/* dash.ghostedit.app — photo lane.
   One committed dark world: this is the brand, not a theme response, so every
   colour is painted explicitly and nothing is left to the host ground.
   Chroma-0 neutrals with a faint blue-violet bias; no accent hue at all —
   white is the only primary, and semantic colour is reserved for state. */
:root {
  --base:#131417; --panel:#1a1b1e; --elevated:#202126; --sunken:#0e0f11;
  --border:#2c2d31; --border-soft:#232428; --border-hi:#3a3b41;
  --ink-1:#e8e8ea; --ink-2:#9a9ba0; --ink-3:#66676d; --ink-4:#4a4b50;
  --wash:rgba(232,232,234,.055); --wash-2:rgba(232,232,234,.09);
  --white:#ffffff;
  --ok:#6fcf97; --warn:#e2b340; --bad:#e0685e; --live:#7cc7e8;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:6px; --r-md:9px; --r-lg:12px;
  --dur:.18s;
}
@media (prefers-reduced-motion: reduce){
  :root{--dur:0s}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--base); color:var(--ink-1);
  font-family:var(--ui); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(255,255,255,.16)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:3px}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
dl,dd,dt,p,ul{margin:0}
ul{list-style:none;padding:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

/* ═══════════════ shell ═══════════════ */
.app{display:flex;height:100vh;padding:8px;gap:8px;overflow:hidden}
.side{
  width:232px;flex:none;display:flex;flex-direction:column;padding:6px 4px;min-height:0;
  transition:width var(--dur) ease,opacity var(--dur) ease,padding var(--dur) ease,margin var(--dur) ease;
}
.side.hidden{width:0;padding:0;opacity:0;margin-right:-8px;pointer-events:none;overflow:hidden}
.ws{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 8px;margin-bottom:16px}
.ws .mark{
  width:24px;height:24px;flex:none;border-radius:var(--r-sm);
  background:var(--white);color:var(--base);
  display:grid;place-items:center;font-size:15px;
}
.ws .mark i{display:block;font-style:normal;transform:rotate(45deg);line-height:1}
.ws .wordmark{font-size:13px;font-weight:600;letter-spacing:-.01em}
.ws .env{
  margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--ink-3);
  letter-spacing:.1em;border:1px solid var(--border-soft);border-radius:100px;padding:2px 7px;
}

.snav{display:flex;flex-direction:column;gap:1px;margin-bottom:18px}
.srow{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:6px 10px;border-radius:var(--r-sm);color:var(--ink-2);
  font-size:13px;transition:background var(--dur),color var(--dur);
}
.srow:hover{background:var(--wash);color:var(--ink-1)}
.srow.on{background:var(--wash-2);color:var(--ink-1);font-weight:500}
.srow .ic{width:15px;flex:none;display:grid;place-items:center;font-size:12px;color:var(--ink-3)}
.pin{width:11px;height:11px;fill:currentColor;display:block}
.srow.on .ic{color:var(--ink-1)}
.srow .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .tick{margin-left:auto;font-size:10px;color:var(--ink-4);font-family:var(--mono)}

.sgroup{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 6px;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);
}
.sgroup button{color:var(--ink-3);font-size:14px;line-height:1;padding:2px 4px;border-radius:4px}
.sgroup button:hover{color:var(--ink-1);background:var(--wash)}
.slist{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:1px;padding-bottom:8px}
.slist::-webkit-scrollbar{width:6px}
.slist::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.prow{display:flex;align-items:center;border-radius:var(--r-sm);transition:background var(--dur)}
.prow:hover{background:var(--wash)}
.prow.on{background:var(--wash-2)}
.disc{
  width:20px;height:28px;flex:none;display:grid;place-items:center;
  color:var(--ink-4);font-size:8px;border-radius:4px;
  transition:transform var(--dur),color var(--dur);
}
.disc:hover{color:var(--ink-1)}
.disc.open{transform:rotate(90deg)}
.prow .pname{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;
  padding:6px 10px 6px 4px;color:var(--ink-2);font-size:13px;
}
.prow:hover .pname,.prow.on .pname{color:var(--ink-1)}
.prow.on .pname{font-weight:500}
.prow .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.prow .tick{font-size:10px;color:var(--ink-4);font-family:var(--mono);flex:none}
.prow .shared{font-size:10px;color:var(--ink-3);flex:none}
.skid{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:5px 10px 5px 34px;border-radius:var(--r-sm);color:var(--ink-3);font-size:12px;
  transition:background var(--dur),color var(--dur);
}
.skid:hover{background:var(--wash);color:var(--ink-1)}
.skid.on{color:var(--ink-1);background:var(--wash)}
.skid .tick{margin-left:auto;font-size:10px;color:var(--ink-4);font-family:var(--mono)}
.srow .shared{font-size:10px;color:var(--ink-3);flex:none}
.seeall{
  text-align:left;padding:6px 10px 6px 34px;font-size:11.5px;color:var(--ink-4);
  border-radius:var(--r-sm);transition:color var(--dur),background var(--dur);
}
.seeall:hover{color:var(--ink-1);background:var(--wash)}
.norecent{padding:6px 10px;font-size:11.5px;color:var(--ink-4)}
.sfoot{padding:8px 4px 4px;border-top:1px solid var(--border-soft);margin-top:4px}
.user{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);
  border:1px solid var(--border-soft);background:var(--panel);width:100%;text-align:left;
  transition:border-color var(--dur);
}
.user:hover{border-color:var(--border)}
.user.on{border-color:var(--border-hi);background:var(--elevated)}
.ava{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#3a3b40,#232428);border:1px solid var(--border);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-1);
}
.user .who{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.user .who b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .who span{font-size:10.5px;color:var(--ink-3)}

/* ═══════════════ main ═══════════════ */
.main{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;
}
.topbar{
  display:flex;align-items:center;gap:10px;padding:0 16px;height:44px;flex:none;
  border-bottom:1px solid var(--border-soft);
}
.crumbs{display:flex;align-items:center;gap:7px;font-size:12px;min-width:0}
.crumbs button{color:var(--ink-3)}
.crumbs button:hover{color:var(--ink-1)}
.crumbs .sep{color:var(--ink-4)}
.crumbs .cur{color:var(--ink-1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44%;
}
.inspector{
  width:312px;flex:none;background:var(--panel);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);overflow-y:auto;overflow-x:hidden;
  transition:width var(--dur) ease,opacity var(--dur) ease,margin var(--dur) ease;
}
.inspector.hidden,.inspector.gone{
  width:0;opacity:0;border-width:0;margin-left:-8px;pointer-events:none;
}
.inspector::-webkit-scrollbar{width:9px}
.inspector::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;border:2px solid var(--panel)}
.inspin{width:312px;padding:16px;display:flex;flex-direction:column;gap:16px}
.dangerzone{display:flex;gap:8px;flex-wrap:wrap}
.workcol{display:flex;flex-direction:column;gap:16px;max-width:860px}
.paneltog{
  width:26px;height:26px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink-4);transition:color var(--dur),background var(--dur);
}
.paneltog:hover{color:var(--ink-1);background:var(--wash)}
.paneltog[aria-pressed="true"]{color:var(--ink-2)}
.paneltog[hidden]{display:none!important}
.pico{width:15px;height:15px;display:block}
@media (max-width:1080px){ .inspector{position:absolute;right:8px;top:8px;bottom:8px;z-index:40;box-shadow:0 12px 40px rgba(0,0,0,.5)} .app{position:relative} }
.scroll{flex:1;overflow-y:auto;min-height:0}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;border:2px solid var(--panel)}
.page{padding:22px 24px 56px;max-width:900px}

/* ═══════════════ atoms ═══════════════ */
.pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:3px 9px 3px 7px;border-radius:100px;border:1px solid var(--border);
  font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);background:var(--sunken);white-space:nowrap;
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);border-color:rgba(111,207,151,.28)}
.pill.warn{color:var(--warn);border-color:rgba(226,179,64,.28)}
.pill.bad{color:var(--bad);border-color:rgba(224,104,94,.28)}
.pill.live{color:var(--live);border-color:rgba(124,199,232,.3)}
.pill.live i{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--elevated);color:var(--ink-1);font-size:12.5px;font-weight:500;
  transition:background var(--dur),border-color var(--dur),opacity var(--dur);white-space:nowrap;
}
.btn:hover:not(:disabled){background:#282a2f;border-color:var(--border-hi)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.primary{background:var(--white);color:#0e0f11;border-color:var(--white);font-weight:600}
.btn.primary:hover:not(:disabled){background:#e4e4e6;border-color:#e4e4e6}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.quiet:hover:not(:disabled){background:var(--wash);color:var(--ink-1)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.danger{color:var(--bad);border-color:rgba(224,104,94,.3)}
.btn.danger:hover:not(:disabled){background:rgba(224,104,94,.1)}

.panel-c{
  background:var(--elevated);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:16px;
}
.panel-c > h2, .kv > h2{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;
}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ph-row h2{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.phead{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.phead .grow{flex:1;min-width:0}
.pinhead{
  width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-size:13px;color:var(--ink-4);border:1px solid transparent;flex:none;
  transition:color var(--dur),background var(--dur),border-color var(--dur);
}
.pinhead:hover{color:var(--ink-1);background:var(--wash)}
.pinhead.on{color:var(--white);border-color:var(--border)}
.archbar{
  display:flex;align-items:center;gap:12px;margin:-8px 0 20px;padding:10px 14px;
  background:var(--sunken);border:1px solid var(--border-soft);border-radius:var(--r-md);
  font-size:12px;color:var(--ink-3);
}
.archbar span{flex:1}
.pt{font-size:20px;letter-spacing:-.015em;line-height:1.25}
.psub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.psub .dot{color:var(--ink-4);margin:0 6px}

.kv{background:var(--elevated);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:15px}
.kv dl{display:flex;flex-direction:column;gap:0}
.kvr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border-soft)}
.kvr:last-child{border-bottom:none;padding-bottom:0}
.kvr:first-child{padding-top:0}
.kvr dt{font-size:12px;color:var(--ink-3)}
.kvr dd{font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:16px}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.hint b{color:var(--ink-2);font-weight:500}

/* ═══════════════ projects list ═══════════════ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.pcard{
  text-align:left;background:var(--elevated);border:1px solid var(--border-soft);
  border-radius:var(--r-md);overflow:hidden;transition:border-color var(--dur),transform var(--dur);
  display:flex;flex-direction:column;
}
.pcard:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.pcard .strip{height:74px;display:flex;gap:1px;background:var(--sunken)}
.pcard .strip .tile{flex:1;background-size:cover;background-position:center;position:relative}
.pcard .strip .tile.pick::after{
  content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--white);
}
.pcard .body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px}
.pcard .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.pcard .meta .sep{color:var(--ink-4)}
.pcardwrap{position:relative;display:flex}
.pcardwrap .pcard{flex:1;min-width:0}
.pcardwrap.arch .pcard .strip{opacity:.5}
.pcardwrap.arch .pcard .nm{color:var(--ink-2)}
.pinbtn{
  position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:rgba(14,15,17,.66);color:var(--ink-4);
  opacity:0;transition:opacity var(--dur),color var(--dur);
}
.pcardwrap:hover .pinbtn,.pinbtn:focus-visible{opacity:1}
.pinbtn:hover{color:var(--ink-1)}
.pinbtn.on{opacity:1;color:var(--white)}
.pcard .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.pcard .cardfoot .when{font-size:11px;color:var(--ink-4)}
.pcard .nm .tag{
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  border:1px solid var(--border);border-radius:3px;padding:1px 5px;margin-left:6px;font-weight:500;
}
.newcard{
  border:1px dashed var(--border);border-radius:var(--r-md);color:var(--ink-3);
  display:grid;place-items:center;min-height:150px;font-size:12.5px;
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.newcard:hover{border-color:var(--ink-3);color:var(--ink-1);background:var(--wash)}
.newcard .plus{font-size:17px;margin-right:7px;vertical-align:-1px}

.empty{
  border:1px dashed var(--border);border-radius:var(--r-lg);padding:44px 28px;text-align:center;
}
.empty h3{font-size:15px;margin-bottom:6px}
.empty p{font-size:12.5px;color:var(--ink-3);max-width:44ch;margin:0 auto 16px}

/* ═══════════════ drop zone ═══════════════ */
.drop{
  border:1px dashed var(--border);border-radius:var(--r-md);padding:26px 20px;text-align:center;
  transition:border-color var(--dur),background var(--dur);cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--ink-3);background:var(--wash)}
.drop.over{border-color:var(--white)}
.drop b{font-size:13px;font-weight:600;display:block}
.drop .fine{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  margin-top:7px;font-family:var(--mono);
}

/* ═══════════════ the encode pipeline — the product's thesis ═══════════════ */
.runner{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.runner .rhead{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border-soft);
}
.runner .rhead h3{font-size:13px;font-weight:600;flex:1}
.stages{display:flex;flex-direction:column}
.stage{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:9px 15px;border-bottom:1px solid var(--border-soft);
}
.stage:last-child{border-bottom:none}
.stage .mk{
  width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-4);
  display:grid;place-items:center;font-size:9px;color:var(--base);
}
.stage.done .mk{background:var(--ok);border-color:var(--ok)}
.stage.done .mk::after{content:'✓';font-weight:700;font-size:8px}
.stage.run .mk{border-color:var(--live);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage .txt{min-width:0}
.stage .nm{font-size:12.5px;color:var(--ink-3)}
.stage.run .nm,.stage.done .nm{color:var(--ink-1)}
.stage .sub{font-size:11px;color:var(--ink-4);font-family:var(--mono);margin-top:1px}
.stage .rt{font-size:11px;font-family:var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.stage .bar{grid-column:2/4;height:2px;background:var(--border);border-radius:1px;overflow:hidden;margin-top:2px}
.stage .bar i{display:block;height:100%;background:var(--live);transition:width .25s linear}
.stage.done .bar i{background:var(--ok)}

/* the ledger: what stays vs what leaves */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-soft);border-top:1px solid var(--border-soft)}
.ledger .cell{background:var(--sunken);padding:13px 15px}
.ledger .lbl{
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);display:flex;align-items:center;gap:6px;
}
.ledger .lbl .sq{width:6px;height:6px;border-radius:1px;flex:none}
.ledger .stay .sq{background:var(--ok)}
.ledger .leave .sq{background:var(--live)}
.ledger .val{font-family:var(--mono);font-size:19px;font-weight:500;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ledger .stay .val{color:var(--ok)}
.ledger .leave .val{color:var(--live)}
.ledger .cap{font-size:11px;color:var(--ink-4);margin-top:2px;line-height:1.45}

.ratio{padding:11px 15px;border-top:1px solid var(--border-soft);background:var(--sunken)}
.ratio .track{height:4px;border-radius:2px;background:var(--ok);overflow:hidden;display:flex}
.ratio .track i{display:block;height:100%;background:var(--live);transition:width .3s}
.ratio .note{font-size:11px;color:var(--ink-4);margin-top:7px;line-height:1.5}
.ratio .note b{color:var(--ink-2);font-weight:500;font-family:var(--mono)}

/* ═══════════════ brief ═══════════════ */
.brief{display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:11px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px}
.fld .opt{
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  border:1px solid var(--border);border-radius:3px;padding:0 4px;font-weight:500;
}
.fld .aside{font-size:10.5px;color:var(--ink-4);line-height:1.45}
input[type=text],input[type=number],select,textarea{
  background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:7px 10px;font-size:12.5px;width:100%;transition:border-color var(--dur);
}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{
  border-color:var(--ink-3);outline:none;
}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.segctl{display:inline-flex;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px}
.segctl button{padding:4px 11px;border-radius:4px;font-size:11.5px;color:var(--ink-3);transition:background var(--dur),color var(--dur)}
.segctl button:hover{color:var(--ink-1)}
.segctl button.on{background:var(--elevated);color:var(--ink-1);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* ═══════════════ moments / gallery ═══════════════ */
.gbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.gbar .count{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-family:var(--mono)}

.moment{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;
  padding:13px 0;border-bottom:1px solid var(--border-soft);
}
.moment:last-child{border-bottom:none}
.mlabel{padding-top:2px}
.mlabel .idx{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.mlabel .tm{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:2px}
.mlabel .cnt{font-size:11px;color:var(--ink-4);margin-top:3px}
.mframes{display:flex;gap:7px;flex-wrap:wrap}

.frame{
  position:relative;width:118px;aspect-ratio:3/2;border-radius:var(--r-sm);overflow:hidden;
  background-size:cover;background-position:center;cursor:pointer;flex:none;
  border:1px solid var(--border-soft);transition:transform var(--dur),box-shadow var(--dur);
}
.frame:hover{transform:translateY(-2px)}
.frame .n{
  position:absolute;left:0;right:0;bottom:0;padding:3px 5px;
  font-family:var(--mono);font-size:9.5px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame .flag{
  position:absolute;top:4px;left:4px;width:17px;height:17px;border-radius:4px;
  display:grid;place-items:center;font-size:10px;line-height:1;
  background:rgba(14,15,17,.6);color:transparent;transition:color var(--dur),background var(--dur);
}
.frame:hover .flag{color:var(--ink-2)}
.frame.pick{border-color:var(--white);box-shadow:0 0 0 1px var(--white)}
.frame.pick .flag{background:var(--white);color:#0e0f11}
.frame.grid{width:auto}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}

.glist{display:flex;flex-direction:column}
.lrow{
  display:grid;grid-template-columns:22px 46px minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:11px;align-items:center;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;
  border-bottom:1px solid var(--border-soft);
}
.lrow:hover{background:var(--wash)}
.lrow .st{font-size:11px;color:var(--ink-4);text-align:center}
.lrow.pick .st{color:var(--white)}
.lrow .lth{width:46px;aspect-ratio:3/2;border-radius:3px;background-size:cover;background-position:center}
.lrow .fn{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow.pick .fn{font-weight:600}
.lrow .fm{font-size:11px;color:var(--ink-4);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .fs{font-size:11px;color:var(--ink-4);font-family:var(--mono);text-align:right}

.frame.cur{outline:2px solid var(--live);outline-offset:2px}
.lrow.cur{box-shadow:inset 2px 0 0 var(--live);background:var(--wash)}
#togkeys{font-size:12px;font-weight:600;font-family:var(--mono)}

.keysheet{display:flex;flex-direction:column;gap:15px;max-height:56vh;overflow-y:auto;margin:-2px -4px 0;padding:0 4px}
.keygrp{display:flex;flex-direction:column;gap:2px}
.keyhd{
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:5px;
}
.keyrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 0;font-size:12.5px;color:var(--ink-2)}
.keyrow .keys{display:flex;align-items:center;gap:5px;flex:none;color:var(--ink-4);font-size:10.5px}

.pinput{
  width:100%;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13.5px;
}
.pinput:focus{border-color:var(--ink-3);outline:none}
.plist{margin-top:10px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.prow2{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:12.5px;
}
.prow2:hover{background:var(--wash);color:var(--ink-1)}
.prow2.on{background:var(--wash-2);color:var(--ink-1)}
.prow2 .hint2{font-size:10.5px;color:var(--ink-4);font-family:var(--mono);flex:none}
.pempty{padding:14px 10px;font-size:12.5px;color:var(--ink-4)}
.kbd{
  display:inline-block;padding:1px 5px;border-radius:3px;border:1px solid var(--border);
  background:var(--sunken);font-family:var(--mono);font-size:10px;color:var(--ink-2);
}

/* ═══════════════ modal ═══════════════ */
/* A class selector outranks the UA stylesheet's `[hidden]{display:none}`, so
   a rule like `.veil{display:grid}` silently un-hides the element -- and since
   the veil is position:fixed inset:0, it then swallows every click on the page
   while looking like nothing is there. `!important` is what makes this win
   against any component rule regardless of source order, and it is global on
   purpose: the previous attempt patched one element (.paneltog) and left every
   other `hidden` in the document broken. */
[hidden]{display:none!important}

.veil{
  position:fixed;inset:0;background:rgba(8,9,10,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:60;padding:20px;
}
.modal{
  width:min(440px,100%);background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.modal h2{font-size:15px;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--ink-3);margin-bottom:16px}
.modal .slug{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:6px}
.mrow{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:12px;color:var(--ink-2)}
.chk input{margin:2px 0 0;accent-color:var(--white);width:14px;height:14px;flex:none}
.modal .note{font-size:11px;color:var(--ink-4);margin-top:14px;line-height:1.5;border-top:1px solid var(--border-soft);padding-top:12px}

/* ═══════════════ toast ═══════════════ */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:7px;align-items:center}
.toast{
  background:var(--elevated);border:1px solid var(--border-hi);border-radius:var(--r-sm);
  padding:8px 14px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.45);
  animation:rise .22s ease-out;
}
.toast.bad{border-color:rgba(224,104,94,.4);color:var(--bad)}
@keyframes rise{from{opacity:0;transform:translateY(7px)}}

/* ═══════════════ misc ═══════════════ */
.tiercard{
  display:flex;align-items:center;gap:13px;background:var(--elevated);
  border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 16px;margin-bottom:16px;
}
.tiercard .glyph{font-size:20px;color:var(--ink-2)}
.tiercard .who{flex:1;display:flex;flex-direction:column}
.tiercard .who b{font-size:13.5px}
.tiercard .who span{font-size:11.5px;color:var(--ink-3)}
.acct{max-width:600px}
.sect{background:var(--elevated);border:1px solid var(--border-soft);border-radius:var(--r-md);overflow:hidden}
.sect + .sect{margin-top:10px}
.sect > summary{
  list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  transition:color var(--dur);
}
.sect > summary::-webkit-details-marker{display:none}
.sect > summary::marker{content:''}
.sect > summary:hover{color:var(--ink-1)}
.sect > summary .chev{font-size:8px;color:var(--ink-4);transition:transform var(--dur);flex:none}
.sect[open] > summary .chev{transform:rotate(90deg)}
.sect > summary .sum{
  margin-left:auto;font-size:11px;font-family:var(--mono);color:var(--ink-4);
  text-transform:none;letter-spacing:0;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%;
}
.sectbody{padding:14px 15px 16px;border-top:1px solid var(--border-soft)}

.intg{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.intg:first-child{padding-top:0}
.intg .logo{
  width:28px;height:28px;border-radius:6px;background:var(--sunken);border:1px solid var(--border);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-2);flex:none;
}
.intg .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.intg .txt b{font-size:12.5px;font-weight:600}
.intg .txt span{font-size:11px;color:var(--ink-4);line-height:1.45}
.nest{
  padding:13px 0 14px 40px;border-bottom:1px solid var(--border-soft);
}
.ratebox{background:var(--sunken);border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:12px 13px}
.ratehead{
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:9px;
}
.raterow{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:3.5px 0;font-size:12px;color:var(--ink-3);
}
.raterow b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-1);font-weight:500}
.privacy{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
  background:var(--sunken);border:1px solid var(--border-soft);border-radius:var(--r-md);
}
.privacy .g{color:var(--ok);font-size:13px;line-height:1.35;flex:none}
.privacy p{font-size:11.5px;color:var(--ink-3);line-height:1.55}
.privacy b{color:var(--ink-1);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* An integration that exists in the plan and not yet in the product. Shown
   rather than hidden, so the shape of the app is legible, and dimmed so it is
   never mistaken for something that would work if clicked. */
.intg.soon { opacity: .45; }
.intg.soon .pill { border-color: var(--line); color: var(--dim); }

/* The sign-in card. One field, because there is one photographer. */
.gate { max-width: 380px; margin: 18vh auto; text-align: center; }
.gate .mark { font-size: 30px; display: block; margin-bottom: 14px; }
.gate h1 { font-size: 17px; margin: 0 0 6px; }
.gate p { color: var(--dim); margin: 0 0 18px; font-size: 13px; line-height: 1.55; }
/* One button, full width. The gate used to hold a token field; the account
   lives at auth.ghostedit.app now and there is nothing here to type. */
.gate .btn { width: 100%; justify-content: center; }

/* The skipped-frames report after a scan. A frame that could not be read is a
   fact the photographer needs, not a toast that disappears. */
.skips { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.skips b { display: block; margin-bottom: 5px; font-size: 12px; }
.skips ul { margin: 0; padding-left: 16px; color: var(--dim); font-size: 12px; line-height: 1.7; }