:root {
    --bg-primary: #0f1923;
    --bg-card: linear-gradient(145deg, #1b2838, #1a1a2e);
    --accent: #e94560;
    --success: #00ff88;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --border: #2a3a4a;
}
body { background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; }
a { text-decoration: none; color: var(--accent); }
a:hover { color: #ff6b81; }

/* HEADER */
.hero-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    border-bottom: 3px solid var(--accent);
    padding: 1.5rem 0;
    margin-bottom: 2rem;
}
.card-custom { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-custom .card-header { background: rgba(233, 69, 96, 0.15); border-bottom: 1px solid var(--border); }

/* LOGIN */
.login-box { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 3rem; max-width: 400px; }
.btn-accent { background: var(--accent); border: none; color: white; }
.btn-accent:hover { background: #ff6b81; color: white; }

/* GALLERY THUMBS */
.thumb-wrapper {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3; /* Proporzioni uniformi */
    cursor: zoom-in;
    transition: all 0.3s ease;
}
.thumb-wrapper:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(233, 69, 96, 0.2); }
.thumb-wrapper.selected { border-color: var(--success); box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.3); }

/* MINIATURA (Max 250px height) */
.thumb-wrapper img, .thumb-wrapper video {
    width: 100%;
    height: 100%;
    max-height: 250px; /* LIMITE RICHIESTO */
    object-fit: contain; /* Mantiene proporzioni, niente tagli */
    display: block;
}
.thumb-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 2rem 0.5rem 0.5rem;
    font-size: 0.75rem; color: #ddd;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.thumb-checkbox {
    position: absolute; top: 8px; left: 8px;
    width: 22px; height: 22px; z-index: 20; cursor: pointer; accent-color: var(--accent);
}

/* LIGHTBOX */
.lightbox {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95); z-index: 9999;
    justify-content: center; align-items: center; flex-direction: column;
    opacity: 0; transition: opacity 0.3s;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img, .lightbox video { max-width: 95vw; max-height: 85vh; object-fit: contain; border-radius: 6px; }
.lightbox-info { color: #ccc; margin-top: 15px; font-size: 0.9rem; }
.btn-close-lb { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #fff; background: none; border: none; cursor: pointer; z-index: 10; }
.btn-close-lb:hover { color: var(--accent); }
.btn-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: #fff; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; width: 60px; height: 60px; cursor: pointer; z-index: 10; }
.btn-nav:hover { background: var(--accent); }
.btn-prev { left: 20px; } .btn-next { right: 20px; }

/* SELECTION BAR */
.selection-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(233, 69, 96, 0.95); padding: 1rem; z-index: 1000;
    transform: translateY(100%); transition: transform 0.3s ease;
}
.selection-bar.active { transform: translateY(0); }