:root{
  --bg:#0B0C0F; --surface:#14161B; --surface2:#191C22; --border:#232833;
  --text:#E9ECF2; --muted:#8C93A1;
  --teal:#5FD3C4; --gold:#F2D9A8; --violet:#A78BFA;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:#5FD3C440}

/* ---------- chrome ---------- */
.top{display:flex;align-items:center;gap:18px;height:52px;padding:0 18px;
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand b{font-weight:600;letter-spacing:.2px}
.brand span{color:var(--muted)}
.batchid{display:flex;align-items:center;gap:10px;color:var(--muted);min-width:0}
.batchid b{color:var(--text);font-weight:600}
.sep{width:1px;height:22px;background:var(--border)}
.spacer{flex:1}
.counters{display:flex;gap:8px}
.ctr{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:5px 10px;display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.ctr i{font-style:normal;color:var(--muted)}
.ctr b{font-variant-numeric:tabular-nums;font-weight:600}
.ctr.acc b{color:var(--teal)}
.ctr.typ b{color:var(--gold)}
.navbtn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:6px 12px;color:var(--text)}
.navbtn:hover{border-color:#31384a}

/* ---------- layout ---------- */
.wrap{display:grid;grid-template-columns:380px 1fr;gap:16px;padding:16px;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.card>h3{margin:0;padding:11px 14px;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.card>h3 em{font-style:normal;color:var(--text);text-transform:none;letter-spacing:0;font-weight:400}

/* ---------- commonality ---------- */
.crow{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border)}
.crow:last-child{border-bottom:0}
.crow>label{color:var(--muted);padding-top:6px;font-size:13px}
.cval{display:flex;flex-direction:column;gap:7px;min-width:0}
.cline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cline .inp{flex:1 1 120px;width:auto}
.term{display:inline-flex;align-items:center;gap:6px;background:#1D2129;border:1px solid #2C3340;
  border-radius:6px;padding:3px 8px;font-size:13px}
.term.teal{border-color:#2F5F5A;color:var(--teal)}
.term.gold{border-color:#5C5238;color:var(--gold)}
.term.violet{border-color:#453C6B;color:var(--violet)}
.term .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.apply{background:#1B2B28;border:1px solid #2F5F5A;color:var(--teal);border-radius:6px;
  padding:4px 10px;font-size:13px;white-space:nowrap}
.apply:hover{background:#204039}
.apply[disabled]{opacity:.45;cursor:default}
.applied{color:var(--teal);font-size:13px;display:inline-flex;gap:6px;align-items:center}
.exc{color:var(--muted);font-size:12.5px}
.exc b{color:var(--text);font-weight:600}
.silent{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.silent .dash{display:inline-block;width:14px;height:1px;background:#3A4152}
.inp{background:#0E1014;border:1px solid var(--border);border-radius:6px;padding:6px 9px;
  width:100%;outline:none}
.inp:focus{border-color:#3A4A5F}
.inp::placeholder{color:#5A6273}
.ac{position:relative}
.aclist{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--surface2);
  border:1px solid #2C3340;border-radius:6px;max-height:240px;overflow:auto;box-shadow:0 10px 24px #000a}
.aclist div{padding:6px 9px;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.aclist div:hover,.aclist div.on{background:#232833}
.aclist div span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- queue ---------- */
.qbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.seg{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.seg button{background:transparent;border:0;padding:5px 11px;color:var(--muted);font-size:13px}
.seg button+button{border-left:1px solid var(--border)}
.seg button.on{background:#232833;color:var(--text)}
.runs{padding:6px 14px 14px}
.run{margin-top:12px}
.runh{display:flex;align-items:center;gap:9px;margin:0 0 8px;color:var(--muted);font-size:12px;
  letter-spacing:.4px;text-transform:uppercase}
.runh .lb{color:var(--teal);text-transform:none;letter-spacing:0;font-size:13px}
.runh .ln{flex:1;height:1px;background:var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.qc{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:7px;text-align:left;display:flex;flex-direction:column;gap:6px}
.qc:hover{border-color:#3A4A5F}
.qc.done{border-color:#2F5F5A}
.qc .ph{position:relative;aspect-ratio:1/1;background:#0E1014;border-radius:5px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.qc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.qc .fn{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc .ti{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc .ti.empty{color:#5A6273}
.bar{display:flex;gap:2px}
.bar i{flex:1;height:3px;background:#262B36;border-radius:2px}
.bar i.a{background:var(--teal)}
.bar i.t{background:var(--gold)}
.badge{position:absolute;top:5px;right:5px;background:#0B0C0Fcc;border:1px solid #2F5F5A;
  color:var(--teal);border-radius:4px;font-size:10.5px;padding:1px 5px}

/* ---------- record ---------- */
.strip{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;background:var(--surface);
  border-bottom:1px solid var(--border)}
.strip button{flex:0 0 auto;width:52px;height:52px;padding:0;border:1px solid var(--border);
  border-radius:5px;overflow:hidden;background:#0E1014;position:relative}
.strip button img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.strip button.on{border-color:var(--gold)}
.strip button.on img{opacity:1}
.strip button.done::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--teal)}
.strip .gap{flex:0 0 auto;width:1px;background:var(--border);margin:0 5px}

.rec{display:grid;grid-template-columns:420px 1fr;gap:16px;padding:16px;align-items:start}
.shot{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.shot img{width:100%;display:block;background:#0E1014}
.shot .meta{padding:10px 12px;border-top:1px solid var(--border);display:flex;
  justify-content:space-between;gap:10px;color:var(--muted);font-size:12.5px}
.shot .meta b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}

.frow{display:grid;grid-template-columns:104px minmax(230px,1fr) minmax(300px,1.05fr);
  column-gap:14px;padding:9px 14px;border-bottom:1px solid var(--border);align-items:start}
.frow:last-of-type{border-bottom:0}
.frow>label{color:var(--muted);padding-top:7px;font-size:13px}
.fval{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fsug{min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:3px;align-items:flex-start}
.pull{display:inline-flex;align-items:center;gap:7px;background:#1D2129;border:1px solid #2C3340;
  border-radius:6px;padding:4px 9px;font-size:13px;max-width:100%}
.pull:hover{border-color:#3A4A5F}
.pull .plus{color:var(--teal);font-weight:600}
.pull .n{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.ev{background:transparent;border:0;color:var(--muted);font-size:12.5px;text-decoration:underline;
  text-decoration-color:#3A4152;padding:0;text-align:left}
.ev:hover{color:var(--text)}
.evbox{margin:0 14px 12px;background:#0E1014;border:1px solid var(--border);
  border-radius:var(--r);padding:11px 12px}
.evh{color:var(--muted);font-size:12.5px;margin-bottom:9px}
.evh b{color:var(--text);font-weight:600}
.evg{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.evc{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px;
  text-align:left;display:flex;flex-direction:column;gap:5px}
.evc:hover{border-color:#3A4A5F}
.evc img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;background:#0E1014}
.evc .t{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.evc .v{font-size:12.5px}
.evc .sh{display:flex;flex-wrap:wrap;gap:3px}
.evc .sh i{font-style:normal;font-size:10.5px;color:var(--teal);background:#16241F;
  border:1px solid #26443E;border-radius:3px;padding:0 4px}
.accepted{display:inline-flex;align-items:center;gap:7px;border-left:2px solid var(--gold);
  background:#1A1814;padding:5px 9px;border-radius:0 6px 6px 0;font-size:13px}
.accepted .k{color:var(--teal)}
.accepted button,.typed button{background:transparent;border:0;color:var(--muted);padding:0 0 0 5px;
  font-size:13px;line-height:1}
.accepted>span,.typed>span{line-height:1.3}
.accepted button:hover{color:var(--text)}
.typed{display:inline-flex;align-items:center;gap:7px;border-left:2px solid #3A4152;
  background:#15171C;padding:5px 9px;border-radius:0 6px 6px 0;font-size:13px}
textarea.inp{min-height:62px;resize:vertical;line-height:1.5}

.map{display:flex;flex-direction:column;gap:7px;align-items:flex-start;width:100%}
.maprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.maprow .src{color:var(--muted);font-style:italic}
.maprow .arr{color:#3A4152}
.nomatch{color:var(--muted);font-size:12.5px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.nomatch .w{color:var(--text);font-style:italic}
.propose{background:#1D2129;border:1px solid #2C3340;border-radius:6px;padding:2px 8px;
  font-size:12px;color:var(--muted)}
.propose:hover{color:var(--text);border-color:#3A4A5F}

.recfoot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--border)}
.primary{background:#1B2B28;border:1px solid #2F5F5A;color:var(--teal);border-radius:6px;padding:7px 14px}
.primary:hover{background:#204039}
.primary.on{background:#2F5F5A;color:#07100E}

.modal{position:fixed;inset:0;background:#05060899;display:flex;align-items:center;
  justify-content:center;z-index:60;padding:40px}
.modal .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  max-width:760px;width:100%;max-height:100%;overflow:auto;display:grid;grid-template-columns:320px 1fr}
.modal .box img{width:100%;display:block;background:#0E1014}
.modal .bd{padding:14px 16px}
.modal h4{margin:0 0 12px;font-size:15px;font-weight:600}
.modal dl{display:grid;grid-template-columns:92px 1fr;gap:6px 12px;margin:0}
.modal dt{color:var(--muted);font-size:13px}
.modal dd{margin:0;font-size:13px}
.modal .x{position:absolute;top:16px;right:20px;background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;width:30px;height:30px;color:var(--muted)}
.hidden{display:none!important}

/* value column fills its track; suggestions hug their content */
.fval{align-self:stretch}
.fval>.ac,.fval>textarea{width:100%;align-self:stretch}
.frow>.fval{display:flex}