:root{
  --bg:#0b0c10; --bg-2:#111318; --panel:#15171e; --panel-2:#1b1e27;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --text:#eceef2; --muted:#9aa0ab; --faint:#5f6570;
  --accent:#d8a657; --accent-soft:rgba(216,166,87,.12);
  --ok:#49d0bd; --ok-soft:rgba(73,208,189,.12);
  --bad:#f0616d; --bad-soft:rgba(240,97,109,.10);
  --radius:12px; --radius-sm:9px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);
  --reviewW:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-weight:400;
  line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:.005em}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#000}
input,textarea,select,button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* top bar */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;background:rgba(11,12,16,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bar .brand{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--text);white-space:nowrap}
.bar .brand b{color:var(--accent)}
.bar .brand .clr{color:var(--accent)}
/* project title sits dead-centre of the bar */
.bar .title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-weight:500;font-size:15px;letter-spacing:.01em;color:var(--text);
  max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.bar .right{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted)}
.ctrl-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;display:none}
body.panel-open .ctrl-backdrop{display:block}
/* panel floats under the top bar when summoned */
body.panel-open .ver-head{position:fixed;top:56px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:1440px;z-index:60;margin:0;
  max-height:calc(100vh - 74px);overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
/* a placeholder of the same height keeps the page from shifting while the
   panel is detached (desktop only — on mobile the inline panel is hidden) */
@media(min-width:761px){
  body.panel-open .review::before{content:"";display:block;height:var(--panelH,0px)}
}

.wrap{max-width:1440px;margin:0 auto;padding:28px 24px 90px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:var(--accent);color:#151006;
  padding:10px 18px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:transform .12s ease,filter .2s ease,background .2s ease,border-color .2s ease}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.05);filter:none}
.btn.ok{background:var(--ok);color:#04231f}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad);color:#2a0508;filter:none}
.btn.danger[disabled]{background:transparent;border-color:rgba(255,92,108,.32);color:rgba(255,92,108,.42)}
.btn.danger[disabled]:hover{background:transparent;color:rgba(255,92,108,.42)}
.btn.sm{padding:8px 13px;font-size:11.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}

input,textarea,select{background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);
  padding:11px 13px;border-radius:var(--radius-sm);font-size:14px;width:100%;transition:border-color .2s,box-shadow .2s;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:64px}
label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:500}
.field{margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}.small{font-size:12.5px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:22px;box-shadow:var(--shadow)}
h1{font-weight:600;font-size:1.7rem;letter-spacing:-.01em;margin-bottom:4px}
h2{font-weight:600;font-size:1.15rem;letter-spacing:-.005em;margin:0 0 12px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:#20232c;border:1px solid var(--line-2);
  padding:12px 20px;border-radius:10px;font-size:13px;z-index:100;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pill{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:40px;border:1px solid var(--line-2);color:var(--muted);font-weight:600}
.pill.approved{border-color:transparent;background:var(--ok-soft);color:var(--ok)}

/* ---------- CLIENT REVIEW LAYOUT ---------- */
.review{display:block}
.col-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:600}

.ver-head{display:flex;align-items:flex-start;justify-content:center;gap:10px 10px;flex-wrap:wrap;margin:0 auto 22px;
  width:100%;max-width:var(--reviewW);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  transition:background .2s,border-color .2s}
.ver-head .vh-group{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  min-width:0;max-width:100%}
.ver-head .mode-ctrl{flex:0 1 220px}
.ver-head .ba-only{flex:0 1 160px}
.ver-head .all-only{flex:1 1 280px;min-width:220px}
.ver-head .view-ctrl{flex:0 1 260px}
.ver-head .clean-ctrl{flex:0 0 100px}
.ver-head .bg-ctrl{flex:0 0 124px}
.ver-head .size-ctrl{flex:0 0 60px}
.ver-head .share-ctrl{flex:0 0 100px}
.ver-head .vh-group > label{width:100%;margin:0;text-align:center;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
/* version selects match the height of the segmented buttons next to them */
.ver-head select{width:100%;min-width:0;height:34px;padding:0 30px 0 12px;
  font-size:11px;font-weight:500;text-overflow:ellipsis}
.ver-head .vh-spacer{display:none}
.ver-head .ctrl-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.ver-head .chips{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;justify-content:center}
.ver-head .chip{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:18px;
  height:34px;display:inline-flex;align-items:center;max-width:136px;padding:0 12px;font-size:11.5px;font-weight:600;
  cursor:pointer;transition:.15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-head .chip:hover{color:var(--text)}
.ver-head .chip.on{background:var(--accent);color:#151006;border-color:var(--accent)}
.clean-menu-btn{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:8px;
  width:100%;height:34px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.clean-menu-btn:hover{color:var(--text)}
.clean-menu-btn.on{background:var(--accent);color:#151006;border-color:var(--accent)}
/* Clean view: hide all feedback + reference viewers, leave only the images */
body.clean .fb{display:none}
body.clean .shot-refs{display:none}

/* ---------- Scopes panel ---------- */
.mini.scopebtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* the panel chrome follows the viewing background (white/gray/black themes);
   the plots themselves stay black — that's how scopes are read */
.scope-box{display:none;flex-direction:column;gap:10px;margin-top:10px;padding:14px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
.scope-box.open{display:flex}
.scope-head{display:flex;flex-direction:column;align-items:center;gap:8px}
.scope-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
/* panel name: a quiet label, not a button */
.scope-name{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--faint);opacity:.65;margin-right:8px}
/* linked switching across the shot's frames */
.scope-linkbtn{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:8px;
  margin-left:8px;padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s;opacity:.8}
.scope-linkbtn:hover{color:var(--text);opacity:1}
.scope-linkbtn.on{background:var(--accent);color:#151006;border-color:var(--accent);opacity:1}
.scope-tabs button{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:8px;
  padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s}
.scope-tabs button:hover{color:var(--text)}
.scope-tabs button.on{background:var(--accent);color:#151006;border-color:var(--accent)}
.scope-extra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.scope-fc{display:inline-flex;gap:5px}
.scope-fc button{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:7px;
  padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s}
.scope-fc button:hover{color:var(--text)}
.scope-fc button.on{background:var(--accent);color:#151006;border-color:var(--accent)}
.scope-thr{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.scope-thr b{color:var(--text);font-variant-numeric:tabular-nums}
.scope-thr input[type=range]{width:110px;accent-color:var(--accent)}
/* 2× toggle — overlay in the bottom-right corner of the vectorscope */
.scope-zoom{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--line-2);
  color:#fff;border-radius:8px;padding:6px 11px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;backdrop-filter:blur(4px)}
.scope-zoom:hover{border-color:var(--accent);color:var(--accent)}
.scope-zoom.on{background:var(--accent);color:#151006;border-color:var(--accent)}
.scope-legend{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;font-size:10.5px;color:var(--muted)}
.scope-legend span{display:inline-flex;align-items:center;gap:5px}
.scope-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
/* uniform, fixed-height stage so switching scope views doesn't jump */
.scope-stage{position:relative;display:flex;justify-content:center;align-items:center;height:300px;width:100%}
.scope-canvas{max-width:100%;max-height:300px;width:auto;height:auto;border-radius:8px;background:#000}
/* false-colour IRE scale — neat overlay on the image, toggled on demand */
.scope-scale{position:absolute;left:10px;top:10px;height:calc(100% - 20px);width:auto;border-radius:6px;background:#000;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.8);border:1px solid var(--line-2)}
.scope-belowbar{display:flex;justify-content:center}
.scale-btn{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);border-radius:8px;
  padding:6px 13px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s}
.scale-btn:hover{color:var(--text);border-color:var(--accent)}
.scale-btn.on{background:var(--accent);color:#151006;border-color:var(--accent)}
.scope-msg{padding:14px}
.ver-head .vh-hint{display:flex;align-items:center;justify-content:center;width:100%;gap:4px;margin-top:1px;text-align:center;
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);opacity:.85}
.ver-head .vh-hint span{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.ver-head .view-hint{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ver-head .view-hint span:first-child{grid-column:1 / span 2}
.ver-head .view-hint span:last-child{grid-column:3}
.ver-head kbd{font-family:inherit;font-size:9px;font-weight:700;color:var(--muted);
  border:1px solid var(--line-2);border-radius:4px;padding:0 4px;line-height:1.5;background:var(--bg-2)}
.ver-head .vh-group > label kbd{font-size:10px}
.frames-cols{display:block}

/* ---- one shot per block: versions stacked (before over after) ---- */
.shot{display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:22px 0 34px;border-bottom:1px solid var(--line)}
.shot.wipe-shot{gap:6px}
@media(min-width:761px){.shot.wipe-shot{padding-top:38px}}
/* an image + its feedback bar form one tight unit (fb hugs the image above) */
.shot-stack{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:var(--frameW,560px);margin:0 auto}
.shot-stack .frame-cell,.shot-stack .fb,.shot-stack .wipe-wrap{max-width:100%}
.shot:last-child{border-bottom:0}
.shot.target{scroll-margin-top:90px}
.shot.target .st-label{color:var(--accent);border-bottom-color:var(--accent)}
.shot-title{width:100%;max-width:var(--frameW,560px);margin:0 auto;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.shot-title .st-left{display:flex;align-items:baseline;gap:12px;min-width:0}
/* analysis tools sit as quiet text under the shot number */
.shot-tools{display:flex;align-items:center;justify-content:center;gap:14px;flex:0 0 auto}
.shot-tools button{appearance:none;background:none;border:0;padding:0;color:var(--faint);font:inherit;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;cursor:pointer;opacity:.72;transition:color .15s,opacity .15s}
.shot-tools button:hover,.shot-tools button.on{color:var(--accent);opacity:1}
.frame-tools{margin-top:0}
body.clean .shot-tools{display:none}
/* shot number stands out: brighter + underlined */
.shot-title .st-label{font-size:12.5px;color:var(--text);padding-bottom:3px;border-bottom:2px solid var(--accent)}
/* copy link is barely there until you hover it */
.shot-link{background:none;border:1px solid transparent;border-radius:7px;padding:4px 9px;cursor:pointer;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--faint);opacity:.45;transition:.15s}
.shot-link:hover{opacity:1;color:var(--text);border-color:var(--line-2);background:var(--bg-2)}
body.clean .shot-link{display:none}
.shot > .shot-refs{width:100%;max-width:var(--frameW,560px);margin:0 auto}

/* side-by-side (left / right) mode */
.shot-grid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start;width:100%}
.shot-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;min-width:0;max-width:var(--frameW,560px)}
/* many versions: wrap into rows so each image stays big */
.shot-grid.cols-3 .shot-col,.shot-grid.cols-4 .shot-col{flex:1 1 calc(50% - 11px);max-width:calc(50% - 11px)}
.shot-grid.cols-5 .shot-col,.shot-grid.cols-6 .shot-col{flex:1 1 calc(33.333% - 15px);max-width:calc(33.333% - 15px)}
.shot-grid.cols-7 .shot-col,.shot-grid.cols-8 .shot-col,.shot-grid.cols-9 .shot-col{flex:1 1 calc(25% - 17px);max-width:calc(25% - 17px)}
.shot-col .frame-cell{max-width:100%}
.shot-col .fb{max-width:100%}
/* mobile: keep Side-by-side actually side by side (images shrink to fit) */
@media(max-width:760px){
  .shot-grid{gap:8px}
  .shot-grid .cap{font-size:9px;letter-spacing:.06em}
  .shot-grid .fb-actions{gap:5px}
}

/* floating controls button — pinned to the middle of the right edge;
   always on mobile, appears after scroll on desktop */
.fab-stack{display:none;position:fixed;right:14px;top:50%;bottom:auto;transform:translateY(-50%);
  z-index:64;flex-direction:column;align-items:center;gap:8px}
.ctrl-fab{width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#151006;border:0;font-size:22px;cursor:pointer;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.7);transition:transform .12s}
.ctrl-fab:active{transform:scale(.94)}
.ctrl-fab:hover{filter:brightness(1.08)}
body.scrolled .fab-stack{display:flex}
body.panel-open .ctrl-fab{background:var(--bg-2);color:var(--text);border:1px solid var(--line-2)}

/* left shot-picker rail: a small iOS-picker-style drum pinned to the left edge */
.shot-rail{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto;padding:14px 13px 14px 4px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.shot-rail::-webkit-scrollbar{display:none}
.rail-num{position:relative;width:26px;height:26px;flex:0 0 auto;border-radius:7px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--muted);font-size:10px;font-weight:600;cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;padding:0;font-variant-numeric:tabular-nums}
/* small blue dot to the right of the square: the shot has unresolved notes */
.rail-num.noted::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#57a8ff}
.rail-num:hover{color:var(--text);border-color:var(--accent)}
/* shot states in the drum: green = approved, red digit = liked.
   The yellow fill belongs ONLY to the current shot marker. */
.rail-num.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.rail-num.liked{color:var(--bad)}
.rail-num.liked.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--bad)}   /* liked+approved: red digit, green frame */
/* current shot: ALWAYS yellow fill, no matter what other state classes or
   theme rules say — !important ends the specificity fights for good */
.rail-num.on{background:var(--accent)!important;color:#151006;border-color:var(--accent)}
.rail-num.on.ok{color:var(--ok);border-color:var(--ok)}
.rail-num.on.liked{color:var(--bad);border-color:var(--accent)}
.rail-num.on.liked.ok{color:var(--bad);border-color:var(--ok)}
/* keep it readable on the light/gray viewing backgrounds */
body.bg-white .rail-num{background:#e7e7ea;border-color:rgba(0,0,0,.18);color:#5a5a5a}
body.bg-white .rail-num.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
body.bg-white .rail-num.liked.ok{color:var(--bad)}
body.bg-white .rail-num.on{background:var(--accent);color:#151006;border-color:var(--accent)}
body.bg-white .rail-num.on.ok{color:var(--ok);border-color:var(--ok)}
body.bg-white .rail-num.on.liked.ok{color:var(--bad)}
body.bg-gray .rail-num{background:#4d4d50;border-color:rgba(255,255,255,.24);color:#dbdbdb}
body.bg-gray .rail-num.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
body.bg-gray .rail-num.liked.ok{color:var(--bad)}
body.bg-gray .rail-num.on{background:var(--accent);color:#151006;border-color:var(--accent)}
body.bg-gray .rail-num.on.ok{color:var(--ok);border-color:var(--ok)}
body.bg-gray .rail-num.on.liked.ok{color:var(--bad)}
@media(max-width:760px){.shot-rail{display:none}}   /* phones have the Shot N/M pill */
/* frames never slide under the rail: Fit (and everything else) stops at the
   rail edge with a small gap; symmetric padding keeps the images centred */
@media(min-width:761px){ #frames{padding-left:64px;padding-right:64px} }   /* clears the rail (left) and the ⚙ button (right) */

/* floating "Shot N / M" indicator (mobile) */
.shot-pill{display:none;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:63;
  background:rgba(15,16,22,.85);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  color:var(--text);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:20px;pointer-events:none;white-space:nowrap}

/* ============ MOBILE LAYOUT ============ */
@media(max-width:760px){
  .wrap{padding:16px 12px 110px}
  .bar{padding:12px 14px}
  /* no room to centre the title on a phone — let it take the free space
     to the right of the brand instead of overlapping it */
  .bar .title{position:static;transform:none;flex:1 1 auto;min-width:0;max-width:none;
    text-align:right;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* keyboard hints are noise on touch (beats the desktop .ver-head .vh-hint rule) */
  .ver-head .vh-hint{display:none!important}

  /* the control panel lives in a bottom sheet, summoned by the ⚙ button —
     a compact grid, not one long column */
  .review > .ver-head{display:none}
  body.panel-open .review > .ver-head{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;
    width:100%;max-width:none;margin:0;z-index:60;border-radius:18px 18px 0 0;
    max-height:72vh;overflow:auto;padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 60px -12px rgba(0,0,0,.9);gap:12px;align-items:start}
  body.panel-open .ver-head .vh-spacer{display:none}
  .ver-head .vh-group{gap:5px;width:100%;align-items:stretch}
  /* sheet grab-handle: a small centred pill on its own top row */
  body.panel-open .review > .ver-head::before{content:"";grid-column:1 / -1;height:4px;margin-bottom:2px;
    background:linear-gradient(var(--line-2),var(--line-2)) center/44px 4px no-repeat;border-radius:3px}
  /* the controls explain themselves — drop every label except Before/After */
  .ver-head .mode-ctrl>label,
  .ver-head .view-ctrl>label,
  .ver-head .clean-ctrl>label,
  .ver-head .share-ctrl>label,
  .ver-head .vh-group.bg-ctrl>label,
  .ver-head .vh-group.size-ctrl>label{display:none}
  /* layout: [handle] / [Mode ▸ Copy link] / [Before | After] / [View] /
             [Clean · Background · Fit] evenly spread on one bottom row */
  .ver-head .mode-ctrl{grid-column:span 4}
  .ver-head .share-ctrl{grid-column:span 2}
  .ver-head .ba-only{grid-column:span 3;min-width:0}
  .ver-head .all-only,.ver-head .view-ctrl{grid-column:1 / -1;min-width:0}
  .ver-head .clean-ctrl,.ver-head .bg-ctrl,.ver-head .size-ctrl{grid-column:span 2}
  /* the Shot N/M pill must not cover the open sheet */
  body.panel-open .shot-pill{display:none!important}
  .fab-stack{display:flex}
  .shot-pill.show{display:block}

  /* comfortable touch targets: EVERY control in the sheet is exactly 44px tall,
     so all rows line up cleanly */
  .mini{padding:11px 14px;font-size:12.5px}
  .ver-head .mini{width:100%;height:44px;padding:0 12px;display:inline-flex;align-items:center}
  .seg{border-radius:10px}
  .seg button{height:44px;padding:0 10px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
  .ver-head .chip{height:40px;max-width:100%;padding:0 14px;font-size:12px}
  .clean-menu-btn{width:100%;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center}
  .size-ctrl button{min-width:0;width:100%;height:44px}
  .bg-ctrl .ctrl-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
  .bg-ctrl button{width:100%;height:44px;border-radius:10px}
  .heart{font-size:24px;padding:6px 8px}
  .fb-actions .st-ok{padding:10px 14px;font-size:12px;min-width:112px}   /* finger-sized on touch */

  /* mobile feedback controls stay on one compact row */
  .frame-cell .cap{flex-wrap:wrap;min-height:0;row-gap:4px}
  .frame-cell .cap .heart{position:static;transform:none;order:2;flex:0 0 auto;margin:0;font-size:22px;padding:4px 6px}
  .frame-cell .cap .fb-note{order:3;flex:1 1 0;min-width:0;margin:0;gap:6px}
  .frame-cell .cap .fb-form{min-width:0}
  .frame-cell .cap .fb-form input{height:40px;padding:0 11px}
  .frame-cell .cap .fb-form.hasText button{height:40px;padding:0 12px}
  .frame-cell .cap .st-ok{position:static;transform:none;order:4;margin-left:0}
  .frame-cell .cap .fb-st{position:static;top:auto;right:auto;order:5;flex:1 1 100%;text-align:right}

  /* the floating actions go back to the bottom corner on phones */
  .fab-stack{top:auto;bottom:18px;right:16px;transform:none}
  .c-done,.c-del,.c-edit{width:34px;height:34px;font-size:14px}
  .fb-form input{padding:13px}
  /* selects: full control height so the text is never clipped */
  .ver-head select{min-width:0;width:100%;height:44px;padding:0 28px 0 12px;font-size:11px;font-weight:500}
  .ver-head .ctrl-row,.ver-head .seg{justify-content:center;width:100%}

  /* wipe: bigger grab handle for fingers */
  .wipe .handle::after{width:64px;height:36px;font-size:15px}

  /* frames use the full width */
  .shot{padding:16px 0 24px;gap:14px}
  /* not enough width to centre + right-align: tools drop under the shot name */
  .shot-title{flex-wrap:wrap;row-gap:8px}
  .shot-tools{position:static;transform:none;width:100%;justify-content:center}
  .shot-stack,.shot-title,.wipe-wrap,.fb,.shot > .shot-refs{max-width:none}
  .frame-cell{max-width:none}
  #frames.fit .frame-cell img{max-height:70vh}

  /* 3+ columns stack vertically — tiny thirds are useless on a phone */
  .shot-grid.cols-3 .shot-col,.shot-grid.cols-4 .shot-col,.shot-grid.cols-5 .shot-col,
  .shot-grid.cols-6 .shot-col,.shot-grid.cols-7 .shot-col,.shot-grid.cols-8 .shot-col,.shot-grid.cols-9 .shot-col{
    flex:1 1 100%;max-width:100%}

  .status-summary{font-size:11.5px;padding:9px 10px}

  /* fullscreen viewer: the image gets all the space, swipe replaces the buttons
     (left/right = prev/next shot, up/down = close) */
  .lb{padding:0;gap:0}
  .lb-stage{max-width:100vw;max-height:100vh;max-height:100dvh}
  .lb img{max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0;transition:transform .15s ease-out}
  .lb-controls{display:none}
  .lb .lb-cap{position:fixed;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));
    right:calc(12px + env(safe-area-inset-right));transform:none;max-width:calc(100vw - 24px);
    overflow:hidden;text-overflow:ellipsis;text-align:left;background:none;backdrop-filter:none;padding:0;border-radius:0;
    font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.68);
    text-shadow:0 1px 6px rgba(0,0,0,.75);pointer-events:none;white-space:nowrap;z-index:2}
  .lb-switch{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2}
}

/* touch phone turned landscape: the image fills the screen; arrows sit on the
   edges, the close control stays top-right, and shot/version stay top-left. */
@media (orientation:landscape) and (hover:none) and (max-height:600px){
  .lb{padding:0;gap:0}
  .lb-stage{max-width:100vw;max-height:100vh;max-height:100dvh}
  .lb img{max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0;transition:transform .15s ease-out}
  .lb-controls{display:contents}
  .lb-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;font-size:22px}
  .lb-nav.prev{left:calc(10px + env(safe-area-inset-left))}
  .lb-nav.next{right:calc(10px + env(safe-area-inset-right))}
  .lb-close{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
    z-index:3;width:38px;height:38px;font-size:19px;margin:0}
  /* shot and version stay in the same top-left position in either orientation */
  .lb .lb-cap{display:block;top:calc(12px + env(safe-area-inset-top));bottom:auto;
    left:calc(12px + env(safe-area-inset-left));right:calc(58px + env(safe-area-inset-right));
    max-width:calc(100vw - 82px);transform:none;text-align:left}
  .lb.switchable .lb-switch{display:inline-flex;position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;
    background:none;box-shadow:none;border-radius:0;padding:2px 10px;
    color:rgba(255,255,255,.5);font-size:11px;font-weight:600;letter-spacing:.04em}
  .lb-switch:hover{filter:none}
}

.frame-cell{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:var(--frameW,560px)}
.frame-cell figure{position:relative;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000;width:100%;
  box-shadow:0 10px 30px -16px rgba(0,0,0,.8);transition:border-color .2s}
.frame-cell:hover figure{border-color:var(--line-2)}
.frame-cell img{width:100%;height:auto;display:block;cursor:zoom-in;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.frame-cell figure > img.hold-preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  visibility:hidden;pointer-events:none;cursor:default}
.frame-cell figure.holding > img.hold-preview{visibility:visible}

/* hold-to-compare: while pressed, the Before frame shows with a corner badge */
.frame-cell figure .hold-badge{display:none;position:absolute;top:10px;left:10px;z-index:3;pointer-events:none;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:4px 9px}
.pin-help{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.54);pointer-events:none;text-align:center}
.pin-help-icon{width:30px;height:30px;border:1px solid rgba(255,255,255,.42);border-radius:50%;position:relative;
  box-shadow:0 1px 10px rgba(0,0,0,.25)}
.pin-help-icon::before,.pin-help-icon::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%)}
.pin-help-icon::before{width:12px;height:1px}
.pin-help-icon::after{width:1px;height:12px}
.pin-help-text{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 7px rgba(0,0,0,.5)}
.frame-cell figure.pin-armed .pin-help{display:flex}
.frame-cell figure.pin-armed img{cursor:crosshair}
.frame-cell figure.holding .hold-badge{display:block}
.frame-cell figure.holding{border-color:var(--accent)}
.frame-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;min-height:13px;margin:0 0 8px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
.frame-name{grid-column:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hold-tip{display:block;grid-column:2;justify-self:end;margin:0;font-size:7.5px;line-height:1;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);opacity:.72;pointer-events:none;white-space:nowrap}
.hold-tip.is-placeholder{visibility:hidden}

/* note pins on the frame */
.pin-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:help;
  min-width:20px;height:20px;padding:0 5px;border-radius:10px 10px 10px 2px;
  background:var(--accent);color:#151006;font-size:11px;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.3)}
.pin.pending{background:#fff;outline:2px solid var(--accent);animation:pinpulse 1.2s infinite}
@keyframes pinpulse{50%{transform:translate(-50%,-100%) scale(1.15)}}
.pin-ref{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;
  margin-right:6px;border-radius:8px 8px 8px 2px;background:var(--accent);color:#151006;font-size:10px;font-weight:700;flex:0 0 auto}
body.clean .pin-layer{display:none}

/* shot status: compact Approve pinned to the bottom-right corner of the frame */
.fb .fb-actions{justify-content:flex-end}
.fb-actions .st-ok{flex:0 0 auto;min-width:104px;justify-content:center;
  padding:6px 12px;font-size:10.5px;letter-spacing:.06em}
.mini.st-ok.on{border-color:var(--ok);color:#04231f;background:var(--ok)}
.mini.st-ok:hover{border-color:var(--ok);color:var(--ok)}
.mini.st-ok.on:hover{color:#04231f}
.fb-st{font-size:11px;color:var(--faint)}
.status-summary{width:100%;max-width:var(--reviewW);margin:-6px auto 18px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  font-size:12.5px;color:var(--muted);text-align:center}
.status-summary b{color:var(--text)}
.status-summary .s-ok{color:var(--ok)}
.status-summary .s-bad{color:var(--bad)}
.frame-cell .cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:7px 0 0;font-weight:600;
  position:relative;width:100%;min-height:34px;display:flex;align-items:center;justify-content:flex-start;gap:8px}
/* desktop: comment field, like and approve share one stable row. */
@media(min-width:761px){
  .frame-cell .cap{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;grid-template-rows:auto auto;align-items:center}
  .frame-cell .cap .fb-note{grid-column:1;grid-row:1;margin:0;min-width:0}
  .frame-cell .cap .fb-form{min-width:0}
  .frame-cell .cap .fb-form input{height:34px;padding:0 11px}
  .frame-cell .cap .fb-form.hasText button{height:34px;padding:0 12px}
  .frame-cell .cap .heart{position:static;transform:none;grid-column:2;grid-row:1;margin:0}
  .frame-cell .cap .st-ok{position:static;transform:none;grid-column:3;grid-row:1;margin:0}
  .frame-cell .cap .fb-st{position:static;grid-column:3;grid-row:2;justify-self:end;margin-top:-2px}
}
.frame-cell .cap .st-ok{letter-spacing:.06em;text-transform:none}
.frame-cell .cap .fb-st{font-size:9px;letter-spacing:.08em;color:var(--faint);text-transform:none}
.mini.st-ok:not(.on){opacity:.5}          /* quiet until it matters */
.mini.st-ok:not(.on):hover{opacity:1}
body.clean .frame-cell .cap{display:none}
.frame-cell .cmt{width:100%}

@media (orientation:landscape) and (hover:none) and (max-height:600px){
  .frame-cell .cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:5px 8px;margin-top:6px}
  .frame-cell .cap .heart{position:static;transform:none;grid-column:1;grid-row:1;order:0;margin:0;font-size:20px;padding:4px 5px}
  .frame-cell .cap .fb-note{grid-column:2;grid-row:1;order:0;width:100%;margin:0}
  .frame-cell .cap .fb-form{min-width:0}
  .frame-cell .cap .st-ok{position:static;transform:none;grid-column:3;grid-row:1;order:0;margin:0;min-width:96px;height:40px;padding:0 10px}
  .frame-cell .cap .fb-st{position:static;transform:none;grid-column:1 / -1;grid-row:2;order:1;text-align:right}
}

/* ---- per-shot reference viewer (collapsible) ---- */
.shot-refs{display:none;flex-direction:column;gap:12px;margin-top:4px;
  padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.shot-refs.open{display:flex}
/* refs header: title left, "N / M" centred, close button right */
.sr-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:26px}
.sr-title{position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.sr-idx{font-size:11px;color:var(--muted);font-weight:500}
.sr-close{position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;
  background:none;border:1px solid var(--line-2);color:var(--faint);font-size:15px;line-height:1;cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;padding:0}
.sr-close:hover{border-color:var(--bad);color:var(--bad)}
.sr-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.sr-main{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:#000;cursor:zoom-in}
.sr-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--line-2);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;backdrop-filter:blur(4px)}
.sr-nav:hover{background:var(--accent);color:#151006;border-color:var(--accent)}
.sr-nav.prev{left:10px}
.sr-nav.next{right:10px}
.sr-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.sr-thumbs img{width:84px;height:52px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:border-color .15s}
.sr-thumbs img:hover{border-color:var(--line-2)}
.sr-thumbs img.sel{border-color:var(--accent)}
.mini.refbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* size control */
.size-ctrl{display:flex;align-items:center;gap:6px}
.size-ctrl .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:4px;font-weight:600}
.size-ctrl button{background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);width:100%;height:34px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:.18s}
.size-ctrl button:hover{border-color:var(--accent);color:var(--text)}
.size-ctrl button.active{border-color:var(--accent);color:#151006;background:var(--accent)}

/* comments */
.cmt{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.cmt .item{font-size:13px;color:var(--muted);margin-bottom:10px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px}
.cmt .item b{color:var(--text);font-weight:600}
.cmt .item .t{font-size:10.5px;color:var(--faint);margin-left:6px}
.cmt form{display:flex;gap:8px;margin-top:8px}
.cmt input{flex:1}

.approve-bar{position:sticky;bottom:16px;z-index:30;margin-top:28px;padding:15px 20px;border:1px solid var(--line-2);
  border-radius:14px;background:rgba(21,23,30,.9);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(6,7,10,.96);backdrop-filter:blur(8px);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:200;padding:34px;
  user-select:none;-webkit-user-select:none}
.lb.open{display:flex}
.lb-stage{display:flex;align-items:center;justify-content:center;max-width:96vw;max-height:82vh}
.lb img{max-width:96vw;max-height:82vh;border-radius:8px;box-shadow:var(--shadow);cursor:zoom-out;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lb.switchable img{cursor:pointer}
.lb-cap{font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:center;cursor:default}
.lb-switch{display:none;align-items:center;gap:8px;background:var(--accent);color:#151006;border:0;border-radius:22px;
  padding:10px 20px;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:filter .15s,transform .1s;
  box-shadow:0 6px 20px -8px rgba(216,166,87,.7)}
.lb.switchable .lb-switch{display:inline-flex}
.lb-switch:hover{filter:brightness(1.08)}
.lb-switch:active{transform:translateY(1px)}
.lb-controls{display:flex;gap:16px;justify-content:center;align-items:center}
.lb-nav,.lb-close{width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--line-2);color:#fff;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;backdrop-filter:blur(4px)}
.lb-nav{font-size:26px}
.lb-close{font-size:24px;margin-left:12px}
.lb-nav:hover{background:var(--accent);color:#151006;border-color:var(--accent)}
.lb-close:hover{background:var(--accent);color:#151006;border-color:var(--accent);transform:rotate(90deg)}

/* ---------- ADMIN SETTINGS SYSTEM ---------- */
.admin-page-head{justify-content:space-between;align-items:flex-end}
.admin-new-view{max-width:520px}
.admin-editor-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.admin-editor-heading{margin:0 auto;text-align:center}
.admin-editor-heading h1{margin:0 auto 4px;font-size:1.7rem;font-weight:600;letter-spacing:0}
.admin-editor-heading .eyebrow{margin-bottom:12px;font-size:10px;font-weight:600;letter-spacing:.2em}
.admin-detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(200px,.55fr) minmax(300px,.9fr);gap:16px;margin-top:10px;align-items:stretch}
.admin-compact-card,.admin-section-card{padding:20px}
.admin-section-card{margin-top:16px}
.admin-card-title,.admin-card-head h2,.admin-section-head h2,.admin-list-head h2{
  margin:0;font-size:16px;line-height:1.2;font-weight:600;letter-spacing:0;color:var(--text)}
.admin-card-head{justify-content:space-between;align-items:center;margin-bottom:16px}
.admin-compact-card .field{margin-bottom:14px}
.admin-compact-card .field:last-child{margin-bottom:0}
.admin-compact-card label:not(.btn):not(.admin-cover-upload),.admin-expiry-block>label,.admin-reviewers>label{
  margin:0 0 7px;text-align:left;font-size:10px;line-height:1.2;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
#editView input:not([type=file]),#editView select{height:38px;padding:0 11px;font-size:13px;font-weight:400;letter-spacing:0}
#editView label.btn{margin:0;cursor:pointer;text-transform:none;letter-spacing:.02em;font-size:11.5px;font-weight:600}
.admin-save-state{min-width:72px;text-align:right;font-size:9px;line-height:1.2;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.admin-save-state.error{color:var(--bad)}
.admin-cover-card{display:flex;flex-direction:column;gap:14px}
/* the image fills the whole card width proportionally (16:9, centre-cropped) */
.admin-cover-card .admin-cover-upload{width:100%;max-width:none;height:auto;aspect-ratio:16/9;margin:0!important}
.admin-cover-card .admin-cover-upload img{object-position:center}
.admin-cover-card .admin-cover-upload:has(img:not(.hidden)){border-style:solid}
.admin-cover-upload{position:relative;display:flex!important;align-items:center;justify-content:center;overflow:hidden;
  border:1px dashed var(--line-2);border-radius:8px;background:var(--bg-2);cursor:pointer;color:var(--faint);transition:.16s}
.admin-cover-upload:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.admin-cover-upload img{width:100%;height:100%;display:block;object-fit:cover}
.admin-cover-upload>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.admin-cover-upload>span b{font-size:18px;line-height:1;font-weight:400}
.admin-link-card{display:flex;flex-direction:column;justify-content:flex-start;gap:14px}
.admin-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.admin-link-row .btn,.admin-version-create .btn,.admin-guid-row .btn{height:38px;padding-top:0;padding-bottom:0}
.admin-link-meta{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1fr);gap:18px;align-items:start}
.admin-expiry-block{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:2px}
.admin-expiry-block label{margin:0}
.admin-expiry-block select{width:auto;min-width:150px}
.admin-expiry-block .small{font-size:10.5px;font-weight:400;color:var(--faint)}
.admin-reviewers{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:2px;min-width:0}
.admin-reviewers label{margin:0}
#reviewerList{font-size:11.5px;font-weight:400;line-height:1.5;color:var(--muted)}
.admin-section-head,.admin-list-head{justify-content:space-between;align-items:center;gap:14px}
.admin-help{margin-top:8px;max-width:920px;font-size:10px;line-height:1.45;font-weight:400;letter-spacing:0;color:var(--faint)}
.admin-list-body{margin-top:14px}
.admin-version-create,.admin-version-actions,.admin-bulk-actions,.admin-frame-actions{gap:8px;justify-content:flex-end}
.admin-version-label-input{width:180px;max-width:100%}
.admin-version-card{padding:16px;margin-bottom:10px;background:var(--bg-2);box-shadow:none}
.admin-version-head{justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.admin-version-title{font-size:13px;line-height:1.45;font-weight:400;color:var(--text)}
.admin-version-title b{font-weight:600}
.admin-version-title .vmeta{font-size:10.5px;font-weight:400;color:var(--faint)}
.admin-version-body{margin-top:12px}
.admin-frame-help{margin-top:8px}
.admin-video-actions{gap:8px;flex-wrap:wrap;margin-top:0}
.admin-video-actions.has-video{margin-top:12px}
.admin-video-progress{margin-top:10px}
.admin-video-manual{margin-top:12px}
.admin-video-manual summary{cursor:pointer;font-size:10px;line-height:1.4;font-weight:400;color:var(--faint)}
.admin-guid-row{gap:8px;margin-top:8px}
@media(max-width:900px){
  .admin-detail-grid{grid-template-columns:1fr}
  .admin-cover-card .admin-cover-upload{max-width:none}
}
@media(max-width:700px){
  .admin-page-head,.admin-section-head,.admin-list-head{align-items:flex-start}
  .admin-version-create,.admin-bulk-actions{justify-content:flex-start}
}
@media(max-width:520px){
  .admin-compact-card,.admin-section-card{padding:16px}
  .admin-link-row{grid-template-columns:minmax(0,1fr) auto}
  .admin-link-meta{grid-template-columns:1fr;gap:12px}
  .admin-version-label-input{width:100%;flex:1 1 150px}
}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:14px}
.thumbs .t{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#000;transition:border-color .2s}
.thumbs .t:hover{border-color:var(--line-2)}
.thumbs .t.selecting{cursor:pointer}
.thumbs .t.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.thumbs .t.selecting .tacts{display:none}
.thumb-check{position:absolute;top:6px;right:6px;z-index:4;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(12,13,18,.72);color:#151006;font-size:13px;font-weight:800;line-height:1;cursor:pointer}
.thumbs .t.selected .thumb-check{background:var(--accent);border-color:var(--accent)}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t .tnum{position:absolute;top:5px;left:6px;font-size:10px;font-weight:600;background:rgba(0,0,0,.6);color:#fff;padding:2px 6px;border-radius:5px}
.proj-list{display:grid;gap:12px;margin-top:18px}
.proj{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--panel);transition:border-color .2s,transform .12s,background .2s}
.proj:hover{border-color:var(--line-2);transform:translateY(-1px);background:var(--panel-2)}
.proj .meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.dash-actions{justify-content:flex-end}
.proj-main{min-width:0;flex:1}
.proj-cover{width:52px;height:52px;flex:0 0 52px;border-radius:7px;border:1px solid var(--line-2);overflow:hidden;background:#090a0e;
  display:flex;align-items:center;justify-content:center;color:var(--faint)}
.proj-cover img{width:100%;height:100%;display:block;object-fit:cover}
.proj-cover.empty{border-style:dashed;background:var(--bg-2)}
.proj-cover.empty span{font-size:18px;font-weight:300;line-height:1}
.proj-open{flex:0 0 auto}
.proj.selecting{justify-content:flex-start}
.proj.selected{border-color:var(--accent);background:var(--accent-soft)}
.proj-check{width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);
  color:#151006;font-size:14px;font-weight:800;line-height:1;cursor:pointer;transition:.16s}
.proj.selected .proj-check{background:var(--accent);border-color:var(--accent)}
.proj-check:hover{border-color:var(--accent)}
.hidden{display:none!important}

/* file input styled */
input[type=file]{padding:9px;border-style:dashed;cursor:pointer;color:var(--muted)}
input[type=file]:hover{border-color:var(--accent)}

/* view-mode segmented toggle */
.seg{display:flex;width:100%;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{flex:1 1 0;min-width:0;background:var(--bg-2);border:0;color:var(--muted);padding:0 11px;height:34px;
  font-size:11.5px;font-weight:600;cursor:pointer;transition:.18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--accent);color:#151006}

/* frame block */
.frame-block{padding:8px 0}
.frame-block.target{outline:2px solid var(--accent);outline-offset:10px;border-radius:14px}

/* wipe before / after */
.wipe-wrap{width:100%;max-width:var(--frameW,560px);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.wipe-head{display:flex;justify-content:space-between;gap:12px}
.wipe-head span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
.wipe{position:relative;width:100%;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000;cursor:ew-resize;user-select:none;touch-action:none;box-shadow:0 10px 30px -16px rgba(0,0,0,.8)}
.thumbs .t .tacts{position:absolute;top:5px;right:6px;display:flex;gap:5px;opacity:0;transition:opacity .18s}
.thumbs .t:hover .tacts{opacity:1}
.thumbs .t .ta{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.65);border:1px solid var(--line-2);color:#fff;font-size:13px;cursor:pointer;line-height:1}
.thumbs .t .ta:hover{background:var(--accent);color:#151006;border-color:var(--accent)}
.thumbs .t .ta.del:hover{background:var(--bad);color:#2a0508;border-color:var(--bad)}
.wipe .base{display:block;width:100%}
.wipe .over{position:absolute;inset:0;overflow:hidden}
.wipe .over img{width:100%;height:100%;display:block;object-fit:fill}
.wipe .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);pointer-events:none}
/* drag hint: left/right arrows instead of a plain circle */
.wipe .handle::after{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;width:52px;height:28px;border-radius:16px;
  background:var(--accent);color:#151006;font-size:13px;font-weight:700;letter-spacing:3px;text-indent:3px;
  box-shadow:0 0 0 4px rgba(0,0,0,.35)}
.wipe .wl{position:absolute;top:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:6px;color:#fff;pointer-events:none;font-weight:600}
.wipe .wl.a{left:10px}.wipe .wl.b{right:10px}

/* Wipe uses the same feedback order as regular frames: comment, heart, approve. */
.wipe-feedback{width:100%;display:grid;grid-template-columns:minmax(150px,1fr) auto auto;grid-template-rows:auto auto;
  align-items:center;gap:5px 8px;margin-top:1px}
.wipe-feedback .fb-note{grid-column:1;grid-row:1;margin:0;min-width:0}
.wipe-feedback .fb-form{min-width:0}
.wipe-feedback .fb-form input{height:34px;padding:0 11px}
.wipe-feedback .fb-form.hasText button{height:34px;padding:0 12px}
.wipe-feedback .heart{grid-column:2;grid-row:1;margin:0}
.wipe-feedback .st-ok{grid-column:3;grid-row:1;margin:0;min-width:104px;justify-content:center}
.wipe-feedback .fb-st{grid-column:3;grid-row:2;justify-self:end}
body.clean .wipe-feedback{display:none}
@media(max-width:760px){
  .wipe-feedback{grid-template-columns:minmax(0,1fr) auto auto}
  .wipe-feedback .fb-form input{height:40px}
  .wipe-feedback .fb-form.hasText button{height:40px}
  .wipe-feedback .st-ok{min-width:112px}
}

/* compact feedback under a frame */
.fb{max-width:var(--frameW,560px);margin:0 auto}
.fb-list{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.fb-item{font-size:13px;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
/* note: the text comes first; a quiet name + date line sits under it */
.fb-item .c-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.fb-item .c-text{color:var(--text);font-size:13px;line-height:1.45}
.fb-item .c-meta{font-size:10.5px;color:var(--faint);display:flex;align-items:baseline;gap:7px}
.fb-item .c-meta b{color:var(--muted);font-weight:600;letter-spacing:.02em}
.fb-item .t{font-size:10px;color:var(--faint);opacity:.8}
.fb-item.done .c-text{text-decoration:line-through}
.fb-item.done .c-body{opacity:.5}
.fb-item.pending{opacity:.6}
.c-acts{display:flex;gap:5px;flex:0 0 auto}
.c-done,.c-del,.c-edit{background:none;border:1px solid var(--line-2);color:var(--faint);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;transition:.15s}
.c-done:hover{border-color:var(--ok);color:var(--ok)}
.c-del:hover{border-color:var(--bad);color:var(--bad)}
.c-edit:hover{border-color:var(--accent);color:var(--accent)}
.fb-item.done .c-done{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.fb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);
  border-radius:8px;min-height:34px;padding:0 12px;font-size:12px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:.18s;white-space:nowrap}
.mini:hover{color:var(--text)}
.mini.note:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mini.like:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.mini.link:hover{border-color:var(--line-2);color:var(--text)}
.fb-count{font-size:11px;color:var(--faint);margin-left:2px}
.heart{background:none;border:0;color:#cfd2d8;font-size:20px;line-height:1;cursor:pointer;transition:transform .15s,color .15s;padding:2px 5px}
.heart:hover{transform:scale(1.18)}
.heart.on{color:#ff4d6d}
.ref-picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.ref-picker .rp{width:88px;height:54px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:border-color .15s}
.ref-picker .rp:hover{border-color:var(--line-2)}
.ref-picker .rp.sel{border-color:var(--accent)}
/* admin: drag-to-reorder thumbnails */
.thumbs .t[draggable=true]{cursor:grab}
.thumbs .t.dragging{opacity:.4;cursor:grabbing;outline:2px dashed var(--accent);outline-offset:-2px}
.thumbs .t.dropover{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.thumbs .t.empty.dropover .slot-empty{color:var(--accent)}
/* highlight while dragging files from Finder over a drop zone */
.dropfiles{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft);border-radius:var(--radius)}
.thumbs .t.dropfiles{outline-style:solid}
.thumbs .t.dropfiles .slot-empty{color:var(--accent)}
/* admin empty frame slots */
.thumbs .t.empty{border-style:dashed;background:transparent}
.thumbs .t .slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--faint)}
.thumbs .t .slot-empty .plus{font-size:20px;line-height:1}
.thumbs .t .slot-empty:hover{color:var(--accent)}
.thumbs .t.empty .tnum{background:transparent;color:var(--faint)}
/* frame.io-style comment row: heart + always-visible field, Send shows while typing */
.fb-note{display:flex;align-items:center;gap:8px;margin:2px 0 9px}
.comment-toggle{flex:0 0 auto;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:7px;background:none;color:var(--faint);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.comment-toggle span{display:block;font-size:20px;line-height:1;transform:rotate(90deg);transition:transform .18s}
.comment-toggle:hover{color:var(--accent);border-color:var(--line-2);background:var(--bg-2)}
.comment-toggle.open span{transform:rotate(-90deg)}
.fb-form{display:flex;gap:8px;flex:1;margin:0}
.fb-form input{flex:1;background:transparent;border:1px solid var(--line-2);border-radius:9px;
  padding:9px 12px;font-size:13px;transition:border-color .2s,background .2s}
.fb-form input::placeholder{color:var(--faint);opacity:.75}
.fb-form input:hover{border-color:var(--line-2)}
.fb-form input:focus{background:var(--bg-2);border-color:var(--accent);box-shadow:none}
.fb-form button{display:none}
.fb-form.hasText button{display:inline-flex}

/* ---------- VIDEO REVIEW (client) ---------- */
.vreview{max-width:min(96vw, 1280px);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.vtabs{display:inline-flex;align-self:flex-start;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.vtabs button{background:var(--bg-2);border:0;color:var(--muted);padding:9px 15px;font-size:12px;font-weight:600;cursor:pointer;transition:.18s}
.vtabs button:hover{color:var(--text)}
.vtabs button.active{background:var(--accent);color:#151006}
.vstage{width:100%;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 12px 34px -18px rgba(0,0,0,.85)}
.vstage video{width:100%;display:block;max-height:78vh;background:#000;cursor:pointer}
.vctr{display:flex;align-items:center;gap:12px}
.vctr .vplay{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);font-size:13px;cursor:pointer;transition:.18s}
.vctr .vplay:hover{border-color:var(--accent);color:var(--accent)}
.vctr .vtime,.vctr .vdur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:40px}
.vctr .vdur{text-align:right}
.vseek{position:relative;flex:1;height:20px;display:flex;align-items:center;cursor:pointer}
.vseek::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:3px;background:var(--line-2)}
.vseek-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;border-radius:3px;background:var(--accent);width:0}
.vseek-head{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.4);left:0}
.vmarks{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.vmark{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#ffd27a;border:2px solid #151006;cursor:pointer;pointer-events:auto;transition:transform .12s}
.vmark:hover{transform:translate(-50%,-50%) scale(1.35)}
.vfb{max-width:100%;margin-top:2px}
.c-ts{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;margin-right:2px}
.c-ts:hover{background:var(--accent);color:#151006}

/* ---------- VIDEO (admin) ---------- */
.vpreview{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:640px}
.vpreview iframe{width:100%;height:100%;border:0;display:block}
.vprog-bar{height:8px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden}
.vprog-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.vprog-t{margin-top:5px}
.vbadge{display:inline-block;vertical-align:middle;margin-left:8px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--faint);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;font-family:'Inter',sans-serif}

/* ---------- FIT TO SCREEN (size = Fit) ---------- */
#frames.fit .shot{gap:12px}
#frames.fit .shot.wipe-shot{gap:6px}
#frames.fit .shot-grid{flex-wrap:nowrap;max-width:var(--reviewW);margin:0 auto}
#frames.fit .frame-cell{max-width:var(--reviewW);width:100%;align-items:center}
#frames.fit .frame-cell figure{width:100%;max-width:100%}
#frames.fit .frame-cell figure > img:not(.hold-preview){width:100%;max-width:100%;height:auto;max-height:none}
#frames.fit .shot-col{max-width:100%;flex:1 1 0}
#frames.fit .shot-stack{max-width:var(--reviewW)}
#frames.fit .wipe-wrap{max-width:none;width:auto}
#frames.fit .wipe{width:auto;max-width:100%}
#frames.fit .wipe .base{width:auto;max-width:100%;max-height:80vh}
#frames.fit .shot-title,#frames.fit .fb,#frames.fit .shot-refs{max-width:var(--reviewW)}

/* ---------- VIEWING BACKGROUND SWITCH ---------- */
.bg-ctrl{display:flex;align-items:center;gap:6px}
.bg-ctrl .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:2px;font-weight:600}
/* colour swatches — permanent border so black never gets lost */
.bg-ctrl button{width:36px;height:34px;border-radius:8px;border:1px solid #7a7a7a;cursor:pointer;transition:.15s;padding:0}
.bg-ctrl button[data-bg=black]{background:#000}
.bg-ctrl button[data-bg=gray]{background:#606060}
.bg-ctrl button[data-bg=white]{background:#fff}
.bg-ctrl button:hover{transform:translateY(-1px)}
.bg-ctrl button.active{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}

@media(max-width:760px){
  body.panel-open .review > .ver-head .vh-group{align-items:stretch}
  body.panel-open .review > .ver-head .mode-ctrl{grid-column:span 4}
  body.panel-open .review > .ver-head .share-ctrl{grid-column:span 2}
  body.panel-open .review > .ver-head .ba-only{grid-column:span 3}
  body.panel-open .review > .ver-head .all-only,
  body.panel-open .review > .ver-head .view-ctrl{grid-column:1 / -1}
  body.panel-open .review > .ver-head .clean-ctrl,
  body.panel-open .review > .ver-head .bg-ctrl,
  body.panel-open .review > .ver-head .size-ctrl{grid-column:span 2}
  body.panel-open .review > .ver-head .seg,
  body.panel-open .review > .ver-head .ctrl-row{width:100%;justify-content:center}
  body.panel-open .review > .ver-head .seg button,
  body.panel-open .review > .ver-head .mini,
  body.panel-open .review > .ver-head .clean-menu-btn,
  body.panel-open .review > .ver-head .size-ctrl button,
  body.panel-open .review > .ver-head select{height:44px}
  body.panel-open .review > .ver-head .mini,
  body.panel-open .review > .ver-head .clean-menu-btn,
  body.panel-open .review > .ver-head .size-ctrl button{width:100%;justify-content:center}
  body.panel-open .review > .ver-head .bg-ctrl .ctrl-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.panel-open .review > .ver-head .bg-ctrl button{width:100%;height:44px}
}

/* viewing backgrounds */
body.bg-black{background:#000}
body.bg-gray{background:#606060}
body.bg-white{background:#f4f4f5}

/* captions readable on light backdrop */
body.bg-white .shot-title,body.bg-white .frame-cell .cap,body.bg-white .sr-title,body.bg-white .col-title{color:#4a4a4a}
body.bg-white .shot{border-bottom-color:rgba(0,0,0,.10)}
/* captions readable on mid-gray backdrop */
body.bg-gray .shot-title,body.bg-gray .frame-cell .cap,body.bg-gray .sr-title,body.bg-gray .col-title{color:#ececec}
body.bg-gray .shot{border-bottom-color:rgba(255,255,255,.16)}

/* control panel adapts to the chosen viewing background */
body.bg-black .ver-head{background:#141414;border-color:rgba(255,255,255,.09)}
body.bg-gray  .ver-head{background:#3f3f3f;border-color:rgba(255,255,255,.16)}
body.bg-white .ver-head{background:#e7e7ea;border-color:rgba(0,0,0,.12)}
body.bg-white .ver-head .vh-group > label{color:#555}
body.bg-gray  .ver-head .vh-group > label{color:#eaeaea}

/* white viewing bg -> light theme for ALL controls inside the review
   (version selects, View, Size, Note, Reference, Copy link, comments…).
   Scoped to .wrap so the top bar and the fullscreen viewer stay dark. */
body.bg-white .wrap{
  --bg-2:#e4e4e7; --panel:#ececef;
  --text:#2b2b2b; --muted:#5a5a5a; --faint:#8a8a8a;
  --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.22);
}
body.bg-white .heart{color:#9a9a9a}
body.bg-white .heart.on{color:#ff4d6d}

/* mid-gray backdrop -> controls slightly darker than the #606060 bg (not near-black) */
body.bg-gray .wrap{
  --bg-2:#4d4d50; --panel:#454548;
  --text:#f2f2f2; --muted:#dbdbdb; --faint:#b6b6b6;
  --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.28);
}

/* ---- shared client-page footer (2026) ---- */
.site-foot{max-width:var(--reviewW,1200px);margin:72px auto 44px;padding:20px 24px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.site-foot a{color:var(--muted);text-decoration:none;transition:color .15s}
.site-foot .foot-copy a{color:var(--text)}
.site-foot .foot-copy a:hover{color:var(--accent)}
.site-foot .foot-social{display:flex;align-items:center;gap:16px;margin-left:auto}
.site-foot .foot-social a{display:inline-flex;color:var(--muted)}
.site-foot .foot-social a:hover{color:var(--accent)}
.site-foot .foot-social svg{width:18px;height:18px;display:block}
@media(max-width:640px){.site-foot{margin-top:44px;gap:12px 20px;justify-content:center;text-align:center}
  .site-foot .foot-social{margin-left:0}}

/* ---- Grid / contact-sheet view (one version, tight) ---- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:var(--reviewW,1200px);margin:0 auto}
.contact-grid .cg-cell{position:relative;appearance:none;border:0;padding:0;margin:0;background:#000;cursor:zoom-in;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden}
.contact-grid .cg-cell img{width:100%;height:100%;object-fit:contain;display:block}
.contact-grid .cg-num{position:absolute;left:6px;top:6px;font-size:10px;letter-spacing:.05em;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:10px;line-height:1.4}
.contact-grid .cg-cell.ok-frame .cg-num{color:var(--ok);background:linear-gradient(rgba(73,208,189,.22),rgba(73,208,189,.22)),rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px var(--ok)}
body.clean .contact-grid .cg-num{display:none}
@media(max-width:760px){.contact-grid{grid-template-columns:repeat(2,1fr);gap:4px}}