:root { --bg:#111; --card:#1c1c1e; --line:#333; --fg:#f2f2f2; --mute:#9a9a9f; --acc:#ffb400; --ok:#34c759; --bad:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:18px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; position:sticky; top:0; background:var(--bg); z-index:5; border-bottom:1px solid var(--line); }
h1 { font-size:20px; margin:0; letter-spacing:.5px; }
h2 { font-size:16px; text-transform:uppercase; letter-spacing:1px; color:var(--mute); margin:20px 0 8px; }
main { padding:12px 16px 60px; max-width:640px; margin:0 auto; }
.field { display:block; margin-bottom:12px; }
.field > span { display:block; font-size:14px; color:var(--mute); margin-bottom:4px; }
.field em { font-style:normal; opacity:.7; }
.row { display:flex; gap:8px; }
input { flex:1; min-width:0; font-size:22px; padding:14px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--fg); }
input:focus { outline:none; border-color:var(--acc); }
.runout input { border-color:#5a4a1a; }
.mic { width:58px; font-size:24px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--fg); }
.mic.live { background:var(--bad); border-color:var(--bad); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.6; } }
.heard { display:block; color:var(--mute); min-height:0; font-size:13px; }
.heard:empty { display:none; }
button { font:inherit; font-weight:600; border:0; border-radius:12px; padding:14px 18px; background:var(--acc); color:#000; cursor:pointer; }
button.ghost { background:transparent; border:2px solid var(--line); color:var(--fg); }
button.small { padding:8px 12px; font-size:14px; }
#status { min-height:28px; font-weight:600; color:var(--acc); margin:4px 0 8px; }
#status.idle { color:var(--mute); font-weight:400; font-size:15px; }
#status.err { color:var(--bad); }
#notice { background:#3a2a00; border-radius:10px; padding:10px 12px; margin-bottom:10px; font-size:15px; }
#cards { display:grid; gap:10px; }
.card { display:flex; gap:12px; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:10px; text-align:left; color:var(--fg); font-weight:400; width:100%; }
.card.sel { border-color:var(--ok); }
.card img, .card .ph { width:72px; height:72px; border-radius:8px; object-fit:cover; background:#000; flex:none; }
.card b { display:block; font-size:18px; }
.card .meta { font-size:14px; color:var(--mute); }
.card .rn { color:var(--acc); font-weight:700; }
.card .ro { font-size:13px; color:var(--ok); word-break:break-word; }
.card .ro.no { color:var(--mute); }
.photos { display:flex; gap:6px; overflow-x:auto; padding:6px 0; }
.photos img { width:84px; height:84px; object-fit:cover; border-radius:8px; }
.cardwrap { display:grid; gap:4px; }
.cardwrap .photoBtn { justify-self:start; }
details { margin:10px 0; color:var(--mute); font-size:14px; }
details li { margin:4px 0; }
details code { color:var(--fg); }
#chosen { margin-top:16px; background:var(--card); border-radius:16px; padding:16px; border:2px solid var(--ok); }
.rnum small { color:var(--mute); }
#rText { font-size:44px; font-weight:800; letter-spacing:1px; }
#rWhat { color:var(--mute); font-size:15px; margin-bottom:12px; }
#copyBtn { width:100%; font-size:24px; padding:20px; margin-bottom:8px; }
#copyBtn.done { background:var(--ok); }
#confirmBtn { width:100%; margin:8px 0; }
#confirmBtn.done { border-color:var(--ok); color:var(--ok); }
.link { color:var(--mute); font-size:14px; }
table { width:100%; border-collapse:collapse; }
td { padding:0; }
tr.grade { border-bottom:1px solid var(--line); cursor:pointer; }
tr.grade td { padding:14px 8px; font-size:20px; }
tr.grade td:first-child { font-weight:700; width:70px; }
tr.grade td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
tr.grade.sel { background:#143a1f; }
tr.grade.na td:last-child { color:var(--mute); }
#picked { font-size:20px; margin-bottom:8px; color:var(--ok); font-weight:700; }
#market { margin-top:12px; font-size:17px; }
#priceNote { color:var(--mute); display:block; margin-top:10px; font-size:12px; }
#scanner { position:fixed; inset:0; background:#000; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
#scanner[hidden] { display:none; }
#scanner video { width:100%; max-height:60vh; object-fit:cover; }

.symbols { margin:-4px 0 12px; }
.symgroup { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.symhead { width:100%; font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.5px; }
.sym { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; min-height:56px; padding:6px 8px; background:var(--card); color:var(--fg); border:2px solid #5a4a1a; border-radius:12px; font-weight:400; touch-action:manipulation; }
.sym:active { background:#3a2e0a; }
.sym .mk { font-size:22px; line-height:1.1; font-weight:700; color:var(--acc); }
.sym .mk.txt { font-size:12px; }
.sym .nm { font-size:12px; color:var(--mute); text-align:center; line-height:1.15; }
details.more { margin:4px 0; }
details.more summary { cursor:pointer; padding:10px 4px; font-size:15px; }

/* tells, dismiss, compare */
.cardwrap { position:relative; transition:transform .18s, opacity .18s; touch-action:pan-y; }
.cardwrap.gone { opacity:0; }
.cardwrap .card { padding-right:46px; }
.xbtn { position:absolute; top:4px; right:4px; width:44px; height:44px; padding:0; font-size:22px; line-height:1; background:transparent; color:var(--mute); border-radius:22px; z-index:2; }
.tells { display:flex; flex-wrap:wrap; gap:6px; padding:2px 2px 0; }
.chip { background:#26262a; border:1px solid #444; border-radius:999px; padding:5px 11px; font-size:14px; line-height:1.2; color:var(--fg); }
.chip.none { color:var(--mute); border-style:dashed; }
.tellnote { font-size:13px; color:var(--mute); padding:2px 4px; }
.cardfoot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cmp { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 6px; font-size:15px; color:var(--mute); }
.cmp input { width:26px; height:26px; flex:none; accent-color:var(--acc); }
#compareBtn { width:100%; margin-top:10px; font-size:20px; padding:16px; position:sticky; bottom:8px; z-index:4; }
#compare { background:var(--card); border:2px solid var(--acc); border-radius:14px; padding:12px 14px; margin-top:10px; }
#compare h3 { margin:0 0 6px; font-size:15px; color:var(--mute); font-weight:600; }
#compare ul { margin:0; padding-left:20px; }
#compare li { margin:6px 0; font-size:18px; }
.field.listening input { border-color:var(--bad); }
.field.listening > span { color:var(--bad); }
.stale { opacity:.4; }
.stale { opacity:.4; }

/* pricing picker */
#picked .pick-price { font-size:44px; line-height:1.1; }
#picked .pick-grade { font-size:18px; color:var(--fg); font-weight:600; }
#picked .pick-caption { font-size:13px; color:var(--mute); font-weight:400; }
#matrix h3 { font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--mute); margin:16px 0 6px; }
.grade-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.grade-row-label { flex:0 0 100%; font-size:13px; color:var(--mute); }
.chip { min-height:44px; min-width:44px; padding:8px 12px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--fg); font-size:17px; font-weight:600; }
.chip.on { background:var(--acc); border-color:var(--acc); color:#000; }
.ask-form { margin-top:12px; padding:12px; border:2px solid #5a4a1a; border-radius:12px; }
.ask-form h3 { margin-top:0; }
.ask-line { font-size:19px; font-weight:700; }
.ask-link { display:inline-block; margin:8px 0; padding:12px 16px; min-height:44px; border-radius:12px; background:var(--card); border:2px solid var(--acc); color:var(--acc); font-weight:700; text-decoration:none; }
.ask-status { font-size:14px; margin-bottom:8px; }
.ask-status.warn, .mkt.warn { color:var(--acc); }
.ask-status.ok { color:var(--ok); }
#priceNote.warn { color:var(--acc); }

/* Stage 2B draft preview */
#draft { margin-top: 1.2rem; border-top: 1px solid #444; padding-top: .8rem; }
.draft-note { display: block; opacity: .75; margin-bottom: .6rem; }
.draft-form .field { display: block; margin: .5rem 0; }
.draft-form .field input, .draft-form .field select { width: 100%; box-sizing: border-box; }
.draft-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.draft-row .field { flex: 1 1 10rem; }
.draft-desc textarea { width: 100%; box-sizing: border-box; font: 13px ui-monospace, monospace; min-height: 14rem; }
.draft-form .check { display: block; margin: .6rem 0; }
.draft-table { border-collapse: collapse; width: 100%; margin: .6rem 0; font-size: .9rem; }
.draft-table th { text-align: left; vertical-align: top; padding: .2rem .6rem .2rem 0; white-space: nowrap; opacity: .7; font-weight: 600; }
.draft-table td { padding: .2rem 0; overflow-wrap: anywhere; }
.desc-frame { width: 100%; height: 280px; background: #fff; border: 1px solid #444; border-radius: 6px; }
#draft .thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
#draft .thumb { display: inline-flex; flex-direction: column; align-items: center; }
#draft .thumb img { object-fit: cover; height: 64px; border-radius: 4px; }
#draftMsg, .draftMsg { margin: .5rem 0; }
#draft fieldset.draft-form, #draftOpen fieldset.draft-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.channels { margin: .6rem 0; }
.channels .check { display: block; margin: .3rem 0; }
.draft-result { margin: .6rem 0; }
.result-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
#draftsMenu { margin: .8rem 0; }
#draftsList { list-style: none; padding: 0; }
#draftsList li { padding: .35rem 0; border-bottom: 1px solid #333; }
#draftOpen { margin-top: .8rem; border-top: 1px solid #444; padding-top: .8rem; }
#draftOpen .thumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
#draftOpen .thumb img { object-fit: cover; height: 64px; border-radius: 4px; }

.idphotos { display:grid; gap:8px; margin-top:12px; }
.idslots { display:flex; flex-wrap:wrap; gap:10px; }
.idslot { display:grid; gap:4px; min-width:140px; flex:1; }
.idslot em, .idphotos > span em { font-weight:400; opacity:.7; font-size:.85em; }
.idthumb img { border-radius:6px; max-height:64px; object-fit:cover; }
.cam-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.85); display:grid; grid-template-rows:1fr auto; gap:10px; padding:12px; }
.cam-overlay video { width:100%; height:100%; min-height:0; object-fit:contain; background:#000; }
.cam-actions { display:flex; gap:10px; justify-content:center; }
.idbtns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* staff login */
.who { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mute); flex-wrap:wrap; justify-content:flex-end; }
.authform { display:grid; gap:10px; margin:12px 0; }
.authform h2, .authform h3 { margin:8px 0 0; }
.authnote { color:var(--mute); font-size:15px; margin:0; }
.lockedemail { padding:14px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--mute); font-size:20px; word-break:break-all; }
.authmsg, .authform .err, #usersMsg.err, #pwMsg.err { color:var(--bad); min-height:20px; font-size:15px; }
#usersList { padding-left:18px; }

/* Training menu + grade help */
.training { color:var(--fg); font-size:16px; }
.training h2 { text-transform:none; letter-spacing:0; color:var(--fg); font-size:19px; }
.tr-sec { margin:18px 0; }
.tr-sec h3 { font-size:17px; margin:0 0 8px; color:var(--acc); }
.tr-sec h4 { margin:12px 0 4px; font-size:15px; }
.tr-sub, .tr-legend, .tr-meta { color:var(--mute); font-size:14px; }
.tr-toc { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.tr-toc a { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--fg); text-decoration:none; font-size:14px; }
.tr-scroll { overflow-x:auto; }
table.tr-grades { border-collapse:collapse; font-size:14px; min-width:100%; }
.tr-grades th, .tr-grades td { border:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; }
.tr-grades thead th { background:var(--card); }
.tr-grades td.v { white-space:normal; }
.src { color:var(--acc); font-size:.85em; white-space:nowrap; }
.tr-unsure { border:2px solid var(--acc); background:#2a2100; border-radius:12px; padding:12px; font-size:17px; }
.tr-flow { padding-left:20px; }
.tr-flow li { margin:6px 0; }
.tr-videos { padding-left:18px; }
.tr-videos li { margin:10px 0; }
.tr-videos a, .tr-sources a { color:var(--acc); word-break:break-all; }
.tr-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin:10px 0; }
.tr-photo { margin:0; }
.tr-photo img { width:100%; max-height:220px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#000; }
.tr-photo figcaption { font-size:13px; color:var(--mute); margin-top:4px; }
.tr-photo .credit { font-size:12px; opacity:.8; }
.tr-ph { border:2px dashed var(--acc); border-radius:8px; padding:14px; font-size:14px; color:var(--acc); }
.tr-ph small { display:block; color:var(--mute); margin-top:4px; }
.tr-quiz ol { padding-left:20px; }
.tr-quiz li { margin:14px 0; }
.tr-q { margin:0 0 6px; }
.tr-opts { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.tr-opts button.picked { border-color:var(--acc); }
.tr-qout.right b { color:var(--ok); } .tr-qout.wrong b { color:var(--bad); }
.tr-ans { margin:4px 0; font-size:15px; }
.tr-score { font-weight:700; margin:12px 0; color:var(--acc); }
.tr-score.done { font-size:22px; }
@media (max-width:640px) {
  table.tr-grades, .tr-grades thead, .tr-grades tbody, .tr-grades tr, .tr-grades th, .tr-grades td { display:block; }
  .tr-grades thead { display:none; }
  .tr-grades tr { border:1px solid var(--line); border-radius:10px; margin:0 0 10px; padding:6px; }
  .tr-grades th, .tr-grades td { border:0; padding:4px 6px; }
  .tr-grades td::before { content:attr(data-label) ': '; display:block; color:var(--mute); font-size:12px; text-transform:uppercase; }
  .tr-grades tbody th { font-size:16px; }
}
button.help { min-width:28px; min-height:28px; padding:0 8px; border-radius:999px; background:transparent; border:2px solid var(--mute); color:var(--fg); font-size:14px; line-height:1; margin-left:6px; }
.grade-field { display:flex; gap:6px; align-items:center; }
.grade-field select { flex:1; }
.grade-pop { background:var(--card); border:2px solid var(--acc); border-radius:12px; padding:10px 12px; margin:0 0 10px; font-size:14px; }
.grade-pop p { margin:2px 0 4px; }
.grade-def + .grade-def { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.grade-pop-btns { display:flex; gap:8px; margin-top:8px; }

/* Lister: Needs Wayne, filters, batch approve */
.flagbox { margin:.6rem 0; display:grid; gap:.4rem; }
.flagbox input[type=text], .flagbox input:not([type]) { width:100%; font-size:16px; padding:8px; }
.badge-nw { background:var(--acc); color:#000; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:700; }
.nw-note { display:block; color:var(--mute); }
.draft-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.draft-filters select { font-size:15px; padding:8px; border-radius:8px; background:var(--card); color:var(--fg); border:2px solid var(--line); }
.batch-box { border:2px solid var(--acc); border-radius:12px; padding:10px; margin:8px 0; }
.batch-results ul { padding-left:18px; }
.res-live { color:var(--ok); } .res-failed { color:var(--bad); } .res-skipped { color:var(--mute); }
#addUserForm select { width:100%; font-size:16px; padding:10px; border-radius:10px; background:var(--card); color:var(--fg); border:2px solid var(--line); }