:root{
  --bg:#0e141d; --panel:#141d29; --panel-2:#1b2735; --line:#26344a;
  --ink:#eef3f9; --muted:#8ea3bd; --accent:#C9A24B; --accent-ink:#0e141d;
  --ok:#3fae7a; --no:#d96a6a; --fav:#C9A24B;
  --radius:10px; --maxw:1280px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:30; background:rgba(14,20,29,.86);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{font-weight:700; letter-spacing:.02em; text-decoration:none; display:flex; gap:10px; align-items:center}
.brand .logo{height:26px; width:auto; display:block}
.authcard .brand .logo{height:30px}
.brand .dot{width:9px; height:9px; background:var(--accent); border-radius:2px; transform:rotate(45deg)}
.brand small{color:var(--muted); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:11px}
.spacer{flex:1}
.who{color:var(--muted); font-size:13px}
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); padding:9px 15px; border-radius:8px; text-decoration:none;
  font-size:14px; font-weight:500; transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px; font-size:13px}
.btn.danger:hover{border-color:var(--no); color:var(--no)}

/* ---- page heads ---- */
.page-head{padding:34px 0 18px}
.eyebrow{color:var(--accent); text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:600; margin:0 0 8px}
h1{font-size:30px; margin:0; font-weight:700; letter-spacing:-.01em}
.sub{color:var(--muted); margin:6px 0 0}

/* ---- gallery cards (dashboard) ---- */
.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:8px 0 50px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:.18s}
.card:hover{transform:translateY(-2px); border-color:var(--accent)}
.card .cover{aspect-ratio:16/10; background:var(--panel-2) center/cover}
.card .meta{padding:14px 16px}
.card .meta h3{margin:0; font-size:17px}
.card .meta p{margin:5px 0 0; color:var(--muted); font-size:13px}

/* ---- contact sheet ---- */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px}
.toolbar .count{color:var(--muted); font-size:13px; margin-right:auto}
.chipfilter{display:flex; gap:6px}
.chip{border:1px solid var(--line); background:var(--panel-2); color:var(--muted); padding:6px 12px;
  border-radius:999px; font-size:13px; cursor:pointer}
.chip.active{color:var(--ink); border-color:var(--accent)}

.sheet{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding-bottom:60px}
.cell{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer}
.cell .thumb{position:relative; background:#000}
.cell .fname-cap{padding:6px 9px; font-size:11px; color:var(--muted); background:var(--panel);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid var(--line)}
.cell img{width:100%; aspect-ratio:3/2; object-fit:cover; opacity:.95; transition:.2s}
.cell:hover img{opacity:1}
.cell[data-status="rejected"] img{opacity:.32; filter:grayscale(.6)}
.cell .tags{position:absolute; top:8px; left:8px; display:flex; gap:6px}
.tag{font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; backdrop-filter:blur(4px)}
.tag.ok{background:rgba(63,174,122,.9); color:#04150d}
.tag.no{background:rgba(217,106,106,.9); color:#1c0606}
.cell .fav{position:absolute; top:8px; right:8px; color:var(--fav); filter:drop-shadow(0 1px 2px #000); opacity:0}
.cell[data-fav="1"] .fav{opacity:1}
.cell .cmtflag{position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:var(--accent);
  font-size:11px; padding:2px 7px; border-radius:6px; display:none}
.cell[data-cmt="1"] .cmtflag{display:block}

/* ---- lightbox ---- */
.lb{position:fixed; inset:0; z-index:60; background:rgba(6,9,13,.96); display:none; grid-template-columns:1fr 340px}
.lb.open{display:grid}
.lb-stage{position:relative; display:flex; align-items:center; justify-content:center; padding:24px; min-width:0}
.lb-stage img{max-width:100%; max-height:calc(100vh - 48px); object-fit:contain; border-radius:4px}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4);
  border:1px solid var(--line); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:22px}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-side{background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.lb-side .hd{padding:18px 20px; border-bottom:1px solid var(--line)}
.lb-side .hd .fname{color:var(--muted); font-size:12px; word-break:break-all; margin-top:4px}
.lb-actions{display:flex; gap:8px; padding:16px 20px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.act{flex:1; min-width:90px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  padding:10px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; display:flex; gap:7px; align-items:center; justify-content:center}
.act.on-ok{background:var(--ok); border-color:var(--ok); color:#04150d}
.act.on-no{background:var(--no); border-color:var(--no); color:#1c0606}
.act.on-fav{background:var(--fav); border-color:var(--fav); color:var(--accent-ink)}
.lb-cmts{flex:1; overflow-y:auto; padding:16px 20px}
.cmt{margin-bottom:14px}
.cmt .by{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent)}
.cmt.admin .by{color:var(--muted)}
.cmt .bd{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin-top:4px; white-space:pre-wrap}
.cmt .ts{font-size:11px; color:var(--muted); margin-top:3px}
.lb-compose{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:8px}
.lb-compose textarea{flex:1; resize:none; height:42px; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:10px; font-family:inherit; font-size:14px}
.lb-close{position:absolute; top:16px; right:356px; background:rgba(0,0,0,.4); border:1px solid var(--line);
  color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:20px; z-index:2}

/* ---- forms / auth ---- */
.authwrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.authcard{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:34px}
.authcard .brand{justify-content:center; margin-bottom:6px}
.authcard h1{font-size:22px; text-align:center; margin:8px 0 2px}
.authcard .sub{text-align:center; margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); padding:11px 13px; border-radius:9px; font-family:inherit; font-size:15px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.err{background:rgba(217,106,106,.12); border:1px solid var(--no); color:#ffc9c9; padding:10px 13px; border-radius:9px; margin-bottom:16px; font-size:14px}
.note{background:rgba(63,174,122,.1); border:1px solid var(--ok); color:#bfe9d3; padding:10px 13px; border-radius:9px; margin-bottom:16px; font-size:14px}
.empty{text-align:center; color:var(--muted); padding:70px 20px}

/* ---- admin tables ---- */
table.tbl{width:100%; border-collapse:collapse; margin-bottom:40px}
.tbl th,.tbl td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px}
.tbl th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.tbl tr:hover td{background:var(--panel)}
.pill{font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line)}
.pill.ok{color:var(--ok); border-color:var(--ok)}
.pill.no{color:var(--no); border-color:var(--no)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--accent);
  color:var(--accent-ink); padding:11px 18px; border-radius:10px; font-weight:600; opacity:0; transition:.25s; z-index:80}
.toast.show{opacity:1}

@media(max-width:820px){
  /* Lightbox stacks: photo on top, then actions + notes below, whole thing scrolls */
  .lb.open{display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .lb-stage{flex:none; width:100%; padding:14px 14px 6px; min-height:auto}
  .lb-stage img{max-width:100%; max-height:52vh; width:auto}
  .lb-nav{width:40px; height:40px; font-size:20px; background:rgba(0,0,0,.55)}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-side{position:static; width:100%; max-height:none; border-left:none; border-top:1px solid var(--line)}
  .lb-cmts{flex:none; overflow:visible; max-height:none}
  .lb-close{position:fixed; top:12px; right:12px; z-index:70}
  .row2{grid-template-columns:1fr}
}

@media(max-width:520px){
  .wrap{padding:0 14px}
  .topbar .wrap{gap:10px; height:56px}
  .topbar .who{display:none}                 /* keep the bar uncluttered on phones */
  .sheet{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .grid-cards{grid-template-columns:1fr}
  h1{font-size:24px}
  .lb-actions .act{min-width:0}
}

/* multi-reviewer: returning-name chips on the viewer name gate */
.resume{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.resume .eyebrow{margin-bottom:8px}
.resume-names{display:flex;flex-wrap:wrap;gap:8px}

/* multi-reviewer: aggregate results */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.res-card{display:flex;gap:12px;background:var(--card,#141c27);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:hidden}
.res-card>img{width:96px;height:96px;object-fit:cover;border-radius:8px;flex:none;background:#0b0f15}
.res-body{min-width:0;flex:1}
.res-fname{font-size:12px;color:var(--muted);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-line{font-size:13px;margin:3px 0;line-height:1.4}
.res-k{display:inline-block;min-width:42px;font-weight:600;margin-right:6px}
.res-k.ok{color:#5fbf7f}.res-k.no{color:#e06a6a}.res-k.fav{color:var(--accent,#C9A24B)}
.res-line .muted,.muted{color:var(--muted)}
.res-notes{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.res-note{font-size:12.5px;line-height:1.45}
.res-note b{color:var(--text,#e9eef5)}
@media(max-width:520px){.res-grid{grid-template-columns:1fr}}