/* ===== FrameVault — Black & Gold Gallery Theme ===== */
:root {
  --black:       #0d0d0d;
  --black-2:     #141414;
  --black-3:     #1c1c1c;
  --black-4:     #242424;
  --black-5:     #2e2e2e;
  --gold:        #D4AF37;
  --gold-light:  #E8C84A;
  --gold-dark:   #a8891f;
  --gold-muted:  rgba(212,175,55,0.12);
  --white:       #f7f3ec;
  --white-dim:   rgba(247,243,236,0.7);
  --white-muted: rgba(247,243,236,0.35);
  --white-faint: rgba(247,243,236,0.07);
  --border:      rgba(212,175,55,0.2);
  --border-dim:  rgba(247,243,236,0.08);
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --shadow:      0 8px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 40px rgba(212,175,55,0.08);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --transition:  0.2s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-body);
     font-weight:300;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
     background-image:radial-gradient(ellipse 80% 50% at 20% -10%,rgba(212,175,55,0.04) 0%,transparent 60%)}

/* ===== NAVBAR ===== */
.navbar{display:flex;align-items:center;justify-content:space-between;
        padding:1rem 2rem;background:rgba(13,13,13,0.94);backdrop-filter:blur(12px);
        border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-brand{font-family:var(--font-display);font-size:1.4rem;font-weight:600;
           color:var(--gold);text-decoration:none;letter-spacing:0.04em;
           display:flex;align-items:center;gap:0.5rem}
.brand-icon{font-size:1.1rem;opacity:0.8}
.nav-links{display:flex;align-items:center;gap:0.25rem}
.nav-link{color:var(--white-dim);text-decoration:none;font-size:0.875rem;
          padding:0.45rem 0.9rem;border-radius:var(--radius-sm);transition:all var(--transition)}
.nav-link:hover{color:var(--white);background:var(--white-faint)}
.nav-link-gold{color:var(--gold);border:1px solid var(--border);padding:0.4rem 1rem}
.nav-link-gold:hover{background:var(--gold-muted);color:var(--gold-light)}
.nav-link-muted{color:var(--white-muted)}

/* ===== FLASH ===== */
.flash-container{padding:0.75rem 2rem 0;display:flex;flex-direction:column;gap:0.5rem}
.flash{display:flex;align-items:center;justify-content:space-between;
       padding:0.75rem 1.1rem;border-radius:var(--radius-sm);font-size:0.875rem;
       border:1px solid transparent;max-width:700px}
.flash-success{background:rgba(40,80,40,0.4);border-color:rgba(80,160,80,0.3);color:#8fcc8f}
.flash-error  {background:rgba(80,30,30,0.4);border-color:rgba(160,60,60,0.3);color:#cc8f8f}
.flash-info   {background:var(--gold-muted);border-color:var(--border);color:var(--gold)}
.flash-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1.1rem;opacity:0.6;padding:0 0 0 1rem}

/* ===== LAYOUT ===== */
.main-content{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%}
.footer{text-align:center;padding:1.5rem;color:var(--white-muted);font-size:0.75rem;
        border-top:1px solid var(--border-dim);letter-spacing:0.06em}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.2}
h1{font-size:clamp(1.8rem,3.5vw,2.5rem)}
h2{font-size:clamp(1.3rem,2.5vw,1.8rem)}
h3{font-size:1.2rem}
.text-gold{color:var(--gold)}
.text-muted{color:var(--white-muted)}
.text-dim{color:var(--white-dim)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
     padding:0.65rem 1.4rem;border-radius:var(--radius-sm);font-family:var(--font-body);
     font-size:0.875rem;font-weight:400;letter-spacing:0.02em;text-decoration:none;
     border:1px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:500}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 4px 20px rgba(212,175,55,0.3)}
.btn-outline{background:transparent;color:var(--white-dim);border-color:var(--border-dim)}
.btn-outline:hover{border-color:var(--border);color:var(--white);background:var(--white-faint)}
.btn-outline-gold{background:transparent;color:var(--gold);border-color:var(--border)}
.btn-outline-gold:hover{background:var(--gold-muted)}
.btn-danger{background:transparent;color:#cc8f8f;border-color:rgba(160,60,60,0.3)}
.btn-danger:hover{background:rgba(80,30,30,0.4)}
.btn-sm{padding:0.4rem 0.85rem;font-size:0.8rem}
.btn-lg{padding:0.9rem 2rem;font-size:1rem}
.btn-full{width:100%}
.btn-icon{padding:0.4rem 0.6rem}

/* ===== FORMS ===== */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:0.72rem;font-weight:500;letter-spacing:0.08em;
            text-transform:uppercase;color:var(--gold);margin-bottom:0.35rem;opacity:0.8}
.form-input,.form-textarea,.form-select{width:100%;background:var(--black-3);
  border:1px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--white);
  font-family:var(--font-body);font-size:0.9rem;font-weight:300;padding:0.65rem 0.9rem;
  transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-input::placeholder,.form-textarea::placeholder{color:var(--white-muted)}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(212,175,55,0.08)}
.form-textarea{resize:vertical;min-height:80px}
.form-select{cursor:pointer}
.form-select option{background:var(--black-3)}
.form-hint{font-size:0.75rem;color:var(--white-muted);margin-top:0.3rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-check{display:flex;align-items:center;gap:0.6rem;cursor:pointer}
.form-check input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px}
.form-check label{font-size:0.875rem;color:var(--white-dim);cursor:pointer}

/* ===== CARDS ===== */
.card{background:var(--black-2);border:1px solid var(--border-dim);
      border-radius:var(--radius-lg);padding:1.5rem;
      transition:border-color var(--transition),box-shadow var(--transition)}
.card:hover{border-color:var(--border)}
.card-header{margin-bottom:1.1rem;padding-bottom:0.9rem;border-bottom:1px solid var(--border-dim)}

/* ===== PAGE HEADER ===== */
.page-header{margin-bottom:2rem}
.page-header h1{margin-bottom:0.4rem}

/* ===== FOLDER GRID ===== */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.folder-card{background:var(--black-2);border:1px solid var(--border-dim);
             border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
             transition:all var(--transition);text-decoration:none;display:block}
.folder-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-gold)}
.folder-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--black-3)}
.folder-thumb-empty{width:100%;aspect-ratio:4/3;display:flex;align-items:center;
                    justify-content:center;background:var(--black-3);
                    font-size:3rem;color:var(--gold);opacity:0.3}
.folder-info{padding:1rem}
.folder-name{font-family:var(--font-display);font-size:1.1rem;color:var(--white);
             margin-bottom:0.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-meta{font-size:0.75rem;color:var(--white-muted);display:flex;gap:0.75rem}
.folder-badge{font-size:0.65rem;padding:2px 7px;border-radius:100px;
              background:var(--gold-muted);color:var(--gold);
              border:1px solid var(--border);margin-left:auto}

/* ===== MEDIA GRID ===== */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.media-item{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-md);
            cursor:pointer;background:var(--black-3);group:true}
.media-item img{width:100%;height:100%;object-fit:cover;display:block;
                transition:transform 0.3s ease}
.media-item:hover img{transform:scale(1.04)}
.media-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%);
                    opacity:0;transition:opacity var(--transition);
                    display:flex;flex-direction:column;justify-content:flex-end;padding:0.75rem}
.media-item:hover .media-item-overlay{opacity:1}
.media-item-title{font-size:0.8rem;color:var(--white);white-space:nowrap;
                  overflow:hidden;text-overflow:ellipsis}
.media-item-actions{position:absolute;top:0.5rem;right:0.5rem;display:flex;gap:0.3rem;
                    opacity:0;transition:opacity var(--transition)}
.media-item:hover .media-item-actions{opacity:1}
.media-action-btn{background:rgba(13,13,13,0.85);border:1px solid var(--border-dim);
                  color:var(--white);border-radius:var(--radius-sm);padding:4px 8px;
                  font-size:0.72rem;cursor:pointer;transition:all var(--transition);
                  text-decoration:none;display:inline-flex;align-items:center}
.media-action-btn:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.video-badge{position:absolute;bottom:0.5rem;right:0.5rem;background:rgba(0,0,0,0.75);
             color:var(--gold);font-size:0.7rem;padding:2px 7px;border-radius:100px;
             display:flex;align-items:center;gap:0.3rem}
.video-badge::before{content:'▶';font-size:0.6rem}
.no-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
          background:var(--black-4);color:var(--gold);font-size:2.5rem;opacity:0.4}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:9999;
          display:none;flex-direction:column;align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox-close{position:absolute;top:1.25rem;right:1.5rem;background:none;border:none;
                color:var(--white);font-size:2rem;cursor:pointer;opacity:0.6;z-index:10}
.lightbox-close:hover{opacity:1;color:var(--gold)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(13,13,13,0.7);border:1px solid var(--border);color:var(--white);
  font-size:1.5rem;width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--transition);z-index:10}
.lightbox-prev{left:1.25rem}
.lightbox-next{right:1.25rem}
.lightbox-prev:hover,.lightbox-next:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.lightbox-media{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:var(--radius-md)}
.lightbox-video{max-width:92vw;max-height:82vh;border-radius:var(--radius-md)}
.lightbox-info{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
               text-align:center;background:rgba(13,13,13,0.8);padding:0.6rem 1.25rem;
               border-radius:100px;border:1px solid var(--border-dim)}
.lightbox-title{font-size:0.875rem;color:var(--white);margin-bottom:0.15rem}
.lightbox-counter{font-size:0.72rem;color:var(--white-muted)}
.lightbox-dl{position:absolute;bottom:1.5rem;right:1.5rem}

/* ===== UPLOAD ZONE ===== */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);
             padding:3rem;text-align:center;cursor:pointer;transition:all var(--transition);
             background:var(--black-3);position:relative}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--gold);background:var(--gold-muted)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-zone-icon{font-size:2.5rem;margin-bottom:0.75rem;opacity:0.4;display:block}
.upload-zone-text{font-size:0.95rem;color:var(--white-dim)}
.upload-zone-hint{font-size:0.78rem;color:var(--white-muted);margin-top:0.4rem}
.upload-progress{margin-top:1rem;display:none}
.progress-bar{height:4px;background:var(--black-5);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width 0.3s}
.upload-list{margin-top:1rem;display:flex;flex-direction:column;gap:0.4rem;max-height:200px;overflow-y:auto}
.upload-item{display:flex;align-items:center;gap:0.75rem;background:var(--black-4);
             border-radius:var(--radius-sm);padding:0.5rem 0.75rem;font-size:0.8rem}
.upload-item-name{flex:1;color:var(--white-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-item-status{font-size:0.72rem;color:var(--gold)}

/* ===== SHARE LINKS ===== */
.share-link-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;
                 background:var(--black-3);border:1px solid var(--border-dim);
                 border-radius:var(--radius-sm);margin-bottom:0.5rem}
.share-link-url{flex:1;font-family:monospace;font-size:0.78rem;color:var(--gold);
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.share-link-meta{font-size:0.72rem;color:var(--white-muted)}

/* ===== PUBLIC VIEW ===== */
.public-header{text-align:center;padding:2.5rem 1rem 1.5rem;
               border-bottom:1px solid var(--border-dim);margin-bottom:2rem}
.public-title{font-family:var(--font-display);font-size:2rem;color:var(--white);margin-bottom:0.5rem}
.public-desc{color:var(--white-dim);max-width:600px;margin:0 auto}
.public-meta{display:flex;align-items:center;justify-content:center;gap:1rem;
             margin-top:1rem;font-size:0.78rem;color:var(--white-muted)}

/* ===== STATS ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--black-2);border:1px solid var(--border-dim);
           border-radius:var(--radius-lg);padding:1.25rem;text-align:center}
.stat-number{font-family:var(--font-display);font-size:2rem;color:var(--white);line-height:1}
.stat-label{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);
            margin-top:0.4rem;opacity:0.8}

/* ===== TOOLBAR ===== */
.toolbar{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.toolbar-left{display:flex;align-items:center;gap:0.5rem;flex:1}
.toolbar-right{display:flex;align-items:center;gap:0.5rem}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--white-muted)}
.empty-state h2{color:var(--white-dim);margin-bottom:0.75rem}
.empty-state p{margin-bottom:1.5rem}
.empty-icon{font-size:3.5rem;margin-bottom:1rem;opacity:0.25;display:block}

/* ===== AUTH ===== */
.auth-wrap{min-height:calc(100vh - 4rem);display:flex;align-items:center;
           justify-content:center;padding:2rem}
.auth-box{width:100%;max-width:440px;background:var(--black-2);border:1px solid var(--border);
          border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow)}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo-mark{font-family:var(--font-display);font-size:2rem;color:var(--gold);
                display:block;letter-spacing:0.06em}
.auth-logo-sub{font-size:0.72rem;letter-spacing:0.12em;color:var(--white-muted);text-transform:uppercase}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:0.85rem;color:var(--white-muted)}
.auth-footer a{color:var(--gold);text-decoration:none}

/* ===== LANDING ===== */
.landing-hero{text-align:center;padding:5rem 1rem 4rem}
.landing-hero h1{margin-bottom:1rem}
.landing-hero p{font-size:1.05rem;color:var(--white-dim);margin-bottom:2rem;max-width:520px;margin-left:auto;margin-right:auto}
.landing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:4rem}
.feature-card{background:var(--black-2);border:1px solid var(--border-dim);
              border-radius:var(--radius-lg);padding:1.75rem;transition:border-color var(--transition)}
.feature-card:hover{border-color:var(--border)}
.feature-icon{font-size:1.6rem;margin-bottom:0.75rem}
.feature-card h3{color:var(--gold);margin-bottom:0.5rem;font-size:0.95rem;font-family:var(--font-body);font-weight:500}
.feature-card p{font-size:0.875rem;color:var(--white-dim)}

/* ===== COPY BUTTON ===== */
.copy-btn{background:var(--black-4);border:1px solid var(--border-dim);color:var(--gold);
          border-radius:var(--radius-sm);padding:4px 10px;font-size:0.75rem;
          cursor:pointer;transition:all var(--transition)}
.copy-btn:hover{background:var(--gold-muted);border-color:var(--border)}

/* ===== UTILS ===== */
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-1{gap:0.5rem}.gap-2{gap:1rem}
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.w-full{width:100%}.text-center{text-align:center}
.badge{display:inline-block;padding:0.2rem 0.6rem;border-radius:100px;font-size:0.7rem;
       font-weight:500;letter-spacing:0.05em;text-transform:uppercase}
.badge-gold{background:var(--gold-muted);color:var(--gold);border:1px solid var(--border)}
.badge-green{background:rgba(40,80,40,0.4);color:#8fcc8f;border:1px solid rgba(80,160,80,0.3)}
.divider{border:none;border-top:1px solid var(--border-dim);margin:1.5rem 0}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .main-content{padding:1.25rem}
  .navbar{padding:0.9rem 1.25rem}
  .form-row{grid-template-columns:1fr}
  .folder-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .lightbox-prev{left:0.5rem}.lightbox-next{right:0.5rem}
}