/* ═══════════════════════════════════════════════════════════
   FAMÍLIA — cinematic dark gallery
   Fraunces (display) · Outfit (body)
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:      #0a0a0c;
  --surface: #14141a;
  --raise:   #1c1c24;
  --line:    #262630;
  --text:    #ece9e6;
  --dim:     #9d968e;
  --faint:   #6a655f;
  --accent:  #d9a566;
  --accent-soft: rgba(217,165,102,.14);
  --danger:  #e2705f;

  --disp: 'Fraunces', Georgia, serif;
  --body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --r: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

button{ font-family:inherit; }

/* ── header ─────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(10,10,12,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__brand{
  font-family:var(--disp); font-weight:300; font-size:27px; letter-spacing:.01em;
  margin:0; color:var(--text);
}
.top__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.who{ color:var(--dim); font-size:13.5px; }
.linkbtn{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  color:var(--dim); font-size:13.5px; border-bottom:1px solid transparent;
}
.linkbtn:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ── collection tabs ────────────────────────────────────── */
.tabs{ display:flex; gap:7px; flex-wrap:wrap; }
.tab{
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:5px 15px; cursor:pointer;
  color:var(--dim); font-size:13.5px; text-transform:capitalize;
  transition:all .18s ease;
}
.tab:hover{ color:var(--text); border-color:var(--faint); }
.tab.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.tab__n{ opacity:.6; font-size:11.5px; margin-left:5px; }

/* ── layout ─────────────────────────────────────────────── */
main{ padding:26px clamp(16px,4vw,40px) 90px; max-width:1680px; margin:0 auto; }
.loading,.empty{ color:var(--faint); padding:40px 0; text-align:center; }

.group__head{
  display:flex; align-items:baseline; gap:12px;
  margin:34px 0 14px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.group__head:first-child{ margin-top:0; }
.group__title{
  font-family:var(--disp); font-weight:300; font-size:22px; margin:0;
  text-transform:capitalize;
}
.group__n{ color:var(--faint); font-size:12.5px; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}
.grid--video{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

/* ── cards ──────────────────────────────────────────────── */
.card{
  position:relative; display:block; padding:0; border:0; cursor:pointer;
  background:var(--surface); border-radius:var(--r); overflow:hidden;
  aspect-ratio:1/1;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.grid--video .card{ aspect-ratio:16/9; }
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.55); }
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--raise);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover img{ transform:scale(1.045); }

.card__grad{
  position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  pointer-events:none;
}
.card__title{
  position:absolute; left:11px; right:11px; bottom:9px;
  font-size:13px; line-height:1.3; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.card__dur{
  position:absolute; right:8px; top:8px;
  background:rgba(0,0,0,.72); color:#fff;
  font-size:11.5px; padding:2px 7px; border-radius:5px;
  font-variant-numeric:tabular-nums;
}
.card__play{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;
}
.card__play span{
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,10,12,.55); border:1.5px solid rgba(255,255,255,.75);
  display:grid; place-items:center; color:#fff; font-size:15px; padding-left:3px;
  backdrop-filter:blur(3px);
  transition:transform .22s, background .22s;
}
.card:hover .card__play span{ transform:scale(1.1); background:var(--accent); border-color:var(--accent); color:#141018; }
.card__tags{
  position:absolute; left:8px; top:8px; display:flex; gap:4px;
}
.card__tag{
  background:rgba(10,10,12,.66); color:var(--accent);
  font-size:10.5px; letter-spacing:.05em; padding:2px 7px; border-radius:5px;
  text-transform:capitalize; backdrop-filter:blur(3px);
}

/* ── selection mode ─────────────────────────────────────── */
.selbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:11px clamp(14px,3vw,30px);
  background:rgba(16,16,21,.97);
  border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.selbar[hidden]{ display:none; }
.selbar__n b{ color:var(--accent); font-size:16px; }
.selbar__sep{ width:1px; height:20px; background:var(--line); }
.selbar__select{
  background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:7px 10px; color:var(--text); font-family:inherit; font-size:13.5px;
  min-width:150px;
}
.selbar__select:focus{ outline:none; border-color:var(--accent); }
.selbar__msg{ color:var(--accent); font-size:12.5px; margin-left:auto; }
.selbar__msg.err{ color:var(--danger); }
.btn--ghost{
  background:none; border:1px solid var(--line); color:var(--dim);
}
.btn--ghost:hover{ border-color:var(--danger); color:var(--danger); filter:none; }

/* selection state on cards */
body.selecting .card{ cursor:copy; }
.card__pick{
  position:absolute; left:8px; top:8px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(10,10,12,.5);
  display:none; place-items:center;
  color:#141018; font-size:13px; line-height:1;
}
body.selecting .card__pick{ display:grid; }
body.selecting .card.picked .card__pick{ background:var(--accent); border-color:var(--accent); }
.card.picked{ outline:3px solid var(--accent); outline-offset:-3px; }
body.selecting .card__tags{ left:36px; }

/* collections list in admin sheet */
.colls{ list-style:none; margin:0 0 12px; padding:0; }
.colls li{
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:14px;
}
.colls li:last-child{ border-bottom:0; }
.colls .cname{ text-transform:capitalize; }
.colls .cn{ color:var(--faint); font-size:11.5px; }
.colls .auto{ color:var(--faint); font-size:11px; margin-left:auto; }

/* ── viewer ─────────────────────────────────────────────── */
.viewer{
  position:fixed; inset:0; z-index:60;
  background:rgba(5,5,7,.97);
  display:grid; grid-template-rows:1fr auto;
}
.viewer[hidden]{ display:none; }
/* Flex, not grid: an auto-sized grid row grows to the image's natural height,
   so `max-height:100%` resolves against that grown row and never constrains —
   tall photos overflowed and appeared cropped. Flex centring keeps the item
   bounded by the stage, so the image scales down on whichever axis runs out
   of room first (i.e. it always fits whole). */
.viewer__stage{
  display:flex; align-items:center; justify-content:center;
  padding:46px 62px 10px; min-height:0; overflow:hidden;
}
.viewer__stage img,.viewer__stage video{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:6px; background:#000;
}
.viewer__bar{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px) 22px;
  border-top:1px solid var(--line); color:var(--text); font-size:14px;
}
.viewer__meta{ color:var(--faint); font-size:12.5px; }
.viewer__close,.viewer__nav{
  position:absolute; z-index:2;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  color:var(--text); cursor:pointer; border-radius:50%;
  width:44px; height:44px; display:grid; place-items:center;
  transition:background .18s, transform .18s;
}
.viewer__close:hover,.viewer__nav:hover{ background:var(--accent); color:#141018; }
.viewer__close{ top:16px; right:18px; font-size:26px; line-height:1; }
.viewer__nav{ top:50%; transform:translateY(-50%); font-size:30px; line-height:1; }
.viewer__nav--prev{ left:14px; }
.viewer__nav--next{ right:14px; }
@media (max-width:640px){
  .viewer__stage{ padding:56px 8px 8px; }
  .viewer__nav{ width:38px; height:38px; font-size:24px; }
}

/* ── admin sheet ────────────────────────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:70;
  background:rgba(5,5,7,.9); overflow-y:auto;
  padding:30px clamp(12px,4vw,40px) 60px;
}
.sheet[hidden]{ display:none; }
.sheet__inner{
  max-width:940px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:24px clamp(16px,3vw,30px) 30px;
}
.sheet__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sheet__head h2{ font-family:var(--disp); font-weight:300; font-size:22px; margin:0; }
.sheet__hint{ color:var(--dim); font-size:13.5px; margin:8px 0 18px; }
.sheet__msg{ color:var(--accent); font-size:13px; min-height:20px; margin:12px 0 0; }
.sheet__msg.err{ color:var(--danger); }

.matrix-wrap{ overflow-x:auto; }
.matrix{ width:100%; border-collapse:collapse; font-size:14px; }
.matrix th,.matrix td{
  padding:9px 12px; text-align:left; border-bottom:1px solid var(--line);
}
.matrix thead th{
  color:var(--accent); font-weight:500; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.matrix tbody th{ font-weight:400; color:var(--text); white-space:nowrap; }
.matrix td{ text-align:center; }
.matrix td:last-child{ text-align:right; }
.matrix input[type=checkbox]{
  width:18px; height:18px; accent-color:var(--accent); cursor:pointer;
}
.pill{
  font-size:11px; color:var(--accent); background:var(--accent-soft);
  padding:1px 8px; border-radius:100px; margin-left:7px;
}
.del{ background:none; border:0; color:var(--faint); cursor:pointer; font-size:13px; }
.del:hover{ color:var(--danger); }

.newuser{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
.newuser input{
  flex:1; min-width:150px;
  background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:9px 12px; color:var(--text); font-family:inherit; font-size:14px;
}
.newuser input:focus{ outline:none; border-color:var(--accent); }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  background:var(--accent); color:#141018; border:0; border-radius:7px;
  padding:11px 18px; font-size:15px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:filter .18s;
}
.btn:hover{ filter:brightness(1.09); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn--sm{ padding:9px 15px; font-size:14px; }

/* ── login ──────────────────────────────────────────────── */
.login-body{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(900px 500px at 50% 0%, #1a1620 0%, transparent 62%),
    var(--bg);
}
.login{ width:100%; padding:24px; }
.login__card{
  max-width:370px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:34px 30px 30px;
}
.login__brand{
  font-family:var(--disp); font-weight:300; font-size:36px; margin:0; text-align:center;
}
.login__sub{ color:var(--dim); text-align:center; margin:6px 0 26px; font-size:14px; }
.login__form{ display:grid; gap:15px; }
.field{ display:grid; gap:6px; }
.field span{ font-size:13px; color:var(--dim); }
.field input{
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; color:var(--text); font-family:inherit; font-size:15.5px;
}
.field input:focus{ outline:none; border-color:var(--accent); }
.login__err{
  color:var(--danger); font-size:13.5px; text-align:center; margin:2px 0 0;
}
.login__err[hidden]{ display:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}