/* House tokens and components from emerald_cloud_lab/demos/ecl-vision-qa/index.html; fonts self hosted (OFL). */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono.woff2) format('woff2')}

:root{--bg:#F7F9FA;--panel:#FFFFFF;--tint:#EFF3F4;--ink:#212529;--secondary:#66707A;--em:#0CBD96;--em-ink:#078A6C;--em-soft:#E5F7F1;--alert:#C4453A;--alert-soft:#FBEBE9;--warn:#8a6d1f;--warn-soft:#FBF3DC;--border:#E1E6E9;--grid:rgba(33,37,41,.045);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--em-ink)}
[hidden]{display:none !important}

/* ---- frame: the demo's centered column, header, grid hero, numbered tab bar (D66) */
.wrap{max-width:1160px;margin:0 auto;padding:0 36px 110px}
header{display:flex;align-items:center;gap:22px;padding:24px 0;border-bottom:1px solid var(--border)}
header .ecl{height:54px;width:54px;object-fit:contain}
header .sep{width:1px;height:30px;background:var(--border)}
.devby{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)}
.devby img{height:21px}
.devby b{color:var(--ink);font-weight:700}
.proto{margin-left:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--em-ink);border:1px solid var(--em);padding:6px 16px;border-radius:3px;background:var(--em-soft)}
header .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;color:var(--secondary)}
header .proto+.who{margin-left:0}
header .who .role{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px;background:var(--tint);color:var(--ink)}
.hero{padding:54px 0 8px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}
.kicker{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--em-ink);margin-bottom:16px}
h1{font-family:var(--serif);font-weight:600;font-size:52px;line-height:1.08;letter-spacing:-.01em;max-width:820px}
h1 em{font-style:italic;color:var(--em-ink)}
.sub{color:var(--secondary);max-width:680px;margin:16px 0 42px;font-size:16px}
nav{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:42px;background:var(--panel)}
.tab{flex:1 1 auto;border-right:1px solid var(--border);color:var(--secondary);font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;padding:15px 12px;white-space:nowrap;text-align:center;text-decoration:none}
.tab:first-child{border-left:1px solid var(--border)}
.tab.on{background:var(--ink);color:#fff}
.tab:not(.on):hover{background:var(--em-soft);color:var(--ink)}
.fig{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:10px}
.fig.gap{margin:42px 0 10px}
h2{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.15;margin-bottom:8px}
h2 em{font-style:italic;color:var(--em-ink)}
h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:26px 0 12px}
.lead{color:var(--secondary);max-width:720px;margin-bottom:30px;font-size:15.5px}
.lead b{color:var(--ink)}
.knote{font-size:13px;color:var(--secondary);margin-top:12px}
.knote b{color:var(--ink)}
.err{color:var(--alert);font-size:13.5px;margin-top:10px}
.okmsg{color:var(--em-ink);font-size:13.5px;margin-top:10px}
.mono-s{font-family:var(--mono);font-size:.72rem}

/* ---- buttons and forms */
.btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border);background:var(--panel);color:var(--secondary);cursor:pointer;border-radius:3px;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.btn.primary:hover{background:#056A53}
.btn.small{padding:5px 10px;font-size:.56rem}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{font:500 13px var(--sans);padding:8px 11px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--em)}
textarea{width:100%;min-height:70px}
input[type=checkbox]{accent-color:var(--em-ink);width:15px;height:15px}
.ctl{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.ctl .btn{padding:10px 14px}
.ctl label{display:flex;flex-direction:column;gap:5px;font:600 .56rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--secondary)}
.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filter{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border);background:var(--panel);color:var(--secondary);cursor:pointer;border-radius:3px;text-decoration:none}
.filter.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter:not(.on):hover{border-color:var(--ink);color:var(--ink)}
.mode-switch{display:inline-flex;gap:3px;padding:3px;background:var(--tint);border:1px solid var(--border);border-radius:4px;margin:0 0 22px}
.mode-button{border:0;background:transparent;color:var(--secondary);padding:9px 15px;border-radius:3px;cursor:pointer;font:600 .61rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mode-button.on{background:var(--ink);color:#fff}

/* ---- stat cards, tables, pills */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:32px}
.stats.two{grid-template-columns:repeat(2,1fr)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--panel);padding:22px}
.stat .n{font-family:var(--serif);font-weight:600;font-size:42px;line-height:1;color:var(--em-ink)}
.stat .n.bad{color:var(--alert)}
.stat .n.hm{color:#3d5a8a}
.stat .n.ink{color:var(--ink)}
.stat .n.txt{font-size:30px}
.stat .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);margin-top:8px;line-height:1.6}
.table-scroll{width:100%;overflow-x:auto;border:1px solid var(--border);background:var(--panel)}
table.events{width:100%;border-collapse:collapse;background:var(--panel);font-size:13.5px}
table.events th{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--tint);white-space:nowrap}
table.events td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
table.events td.num,table.events th.num{text-align:right;font-variant-numeric:tabular-nums}
table.events tr.row:hover{background:var(--em-soft)}
table.events td.empty{color:var(--secondary);text-align:center;padding:30px}
.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:3px;white-space:nowrap}
.pill.ok{background:var(--em-soft);color:var(--em-ink)}
.pill.bad{background:var(--alert-soft);color:var(--alert)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.na{background:var(--tint);color:var(--secondary)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.bar{display:block;height:8px;border-radius:2px;background:var(--em)}
.bar-cell{width:220px}
.bar-track{background:var(--tint);border-radius:2px;height:8px;display:block}
.kv{display:grid;grid-template-columns:170px 1fr;border:1px solid var(--border);background:var(--panel);margin-bottom:24px}
.kv>div{padding:12px 18px;border-bottom:1px solid var(--border)}
.kv>div:nth-last-child(-n+2){border-bottom:0}
.kv .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);background:var(--tint)}
.keybox{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.keybox code{font-family:var(--mono);font-size:13px;background:var(--tint);padding:6px 10px;border-radius:3px;word-break:break-all}
pre.code{font-family:var(--mono);font-size:12px;line-height:1.55;background:#1d2125;color:#E8EDEF;padding:16px 18px;border-radius:5px;overflow-x:auto;margin:8px 0 20px}
pre.json{font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--tint);border:1px solid var(--border);padding:14px 16px;border-radius:4px;overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:20px}
.steps{list-style:none;border:1px solid var(--border);border-radius:5px;background:var(--panel)}
.steps li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13.5px}
.steps li:last-child{border-bottom:0}
.steps i{font:600 10px var(--mono);font-style:normal;background:var(--em);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center}

/* ---- login: the demo's #gate screen */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}
.gate .box{text-align:center;max-width:400px;width:100%;padding:30px}
.gate .logos{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.gate .logos img.e{height:42px}
.gate .logos img.o{height:32px}
.gate .logos .sep{width:1px;height:32px;background:var(--border)}
.gate h2{font-family:var(--serif);font-size:34px;font-weight:600}
.gate .who{font-family:var(--mono);color:var(--secondary);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin:6px 0 28px}
.gate input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:14px 18px;font-size:15px;margin-bottom:12px;outline:none;font-family:var(--sans);text-align:center}
.gate input:focus{border-color:var(--em)}
.gate button.go{width:100%;background:var(--em-ink);border:none;border-radius:4px;color:#fff;font-weight:700;padding:14px;font-size:14.5px;cursor:pointer;font-family:var(--sans)}
.gate button.go:hover{background:#056A53}
.gate .alt{margin-top:16px;background:none;border:0;color:var(--em-ink);font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--em)}
.gate .err{color:var(--alert);font-size:13px;margin-top:12px;min-height:18px}
.gate .lead{margin:0 auto 22px}
.gate .qr svg{display:block;width:196px;height:196px;margin:0 auto 14px;background:#fff;border:1px solid var(--border);border-radius:4px}
.gate .key{margin-bottom:16px}
.gate .key summary{cursor:pointer;color:var(--em-ink);font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.gate .key code{display:block;margin-top:8px;font:13px var(--mono);letter-spacing:.06em;word-break:break-all;color:var(--ink)}

/* ---- Try a photo */
.site-pick{display:block;margin:0 0 14px;font:600 12px var(--sans);color:var(--secondary)}
.site-pick select{margin-left:8px}
.drop{display:block;border:2px dashed var(--border);border-radius:6px;background:var(--panel);padding:34px;text-align:center;color:var(--secondary);cursor:pointer;margin-bottom:24px}
.drop.over{border-color:var(--em);background:var(--em-soft)}
.drop b{display:block;font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:4px}
.results{margin-top:6px}
tr.rc{cursor:pointer}
tr.rc.pending td{color:var(--secondary)}
tr.rc .spin{font:500 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}

/* ---- photo with boxes, lightbox, popup */
.ph{position:relative;display:inline-block;max-width:100%;cursor:zoom-in;line-height:0}
.ph img{display:block;max-width:100%;max-height:62vh;border:1px solid var(--border);border-radius:4px;background:#111}
.ph svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ph rect.bx{fill:none;stroke:#0CBD96;stroke-width:2.5}
.ph.th{width:46px;height:46px}
.ph.th img{width:46px;height:46px;object-fit:cover;border-radius:3px}
.ph.th svg{display:none}
.ph.big img{max-height:70vh}
#mbox .ph.big img{max-height:48vh}
#light{position:fixed;inset:0;z-index:90;background:rgba(17,20,22,.88);display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:28px;cursor:zoom-out}
#light.on{display:flex}
#light .ph{cursor:zoom-out}
#light .ph img{max-width:94vw;max-height:86vh;border:0;box-shadow:0 18px 60px rgba(0,0,0,.5)}
#light .cap{font:500 .68rem var(--mono);letter-spacing:.04em;color:#C8D0D4}
#modal{position:fixed;inset:0;background:rgba(33,37,41,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:26px}
#modal.on{display:flex}
#modal .mbox{background:var(--panel);border:1px solid var(--border);border-radius:6px;max-width:1160px;width:100%;max-height:94vh;overflow:auto;box-shadow:0 24px 70px rgba(33,37,41,.25)}
.pop-top{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border)}
.pop-top h3{font:600 19px/1.2 var(--mono);letter-spacing:.01em;margin:0}
.pop-top .sp{flex:1}
.pop-body{padding:16px 22px 20px}
.pop-foot{padding:0 22px 18px;font:600 .6rem var(--mono);letter-spacing:.07em;text-transform:uppercase}
.inline-pop{border:1px solid var(--border);border-radius:6px;background:var(--panel);margin-top:18px}

/* ---- flask (demo task 02, v4.2 per-image results) */
table.fv{width:100%;border-collapse:collapse;background:var(--panel);font-size:13px}
table.fv th{position:sticky;top:0;background:var(--tint);font:600 .56rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
table.fv td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
table.fv tr.rc:hover td{background:var(--em-soft)}
.fv-id{font:500 11.5px var(--mono);color:var(--ink);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-stk{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fv-p{font:600 .56rem/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:0 8px;border-radius:3px;white-space:nowrap}
.fv-p.p{background:var(--em-soft);color:var(--em-ink)}
.fv-p.f{background:var(--alert-soft);color:var(--alert)}
.fv-p.lean{background:#F1F3F5;color:#7b858d}
.fv-p.n{background:#F0F3F4;color:#8b959b}
.fv-cat{font:600 10.5px/1.7 var(--sans);padding:0 7px;border-radius:3px;white-space:nowrap}
.fv-cat.above{color:#9A3412;background:#FCE7DA}.fv-cat.s-above{color:#8a6d1f;background:#FBF3DC}.fv-cat.within{color:#078A6C;background:#E5F7F1}
.fv-cat.s-below{color:#157a83;background:#E1F2F4}.fv-cat.below{color:#445089;background:#EAEDF9}.fv-cat.na{color:#8b959b;background:#F0F3F4}
.fv-same{font:500 11px var(--mono);color:#b3bcc1}
.fv-g{display:flex;align-items:center;gap:6px}
.fv-g svg{display:block;flex:0 0 auto}
.fv-g span{font:600 10.5px var(--mono);color:var(--ink);white-space:nowrap}
.fv-r{font:600 .54rem/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 8px;border-radius:10px;white-space:nowrap;display:inline-block}
.fv-r.hm{background:#E4EAF5;color:#3d5a8a;box-shadow:inset 0 0 0 1px #c6d2e8}
.fvp-meta{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);background:var(--tint)}
.fvp-meta>div{padding:10px 22px 11px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.fvp-meta .k{font:600 .52rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--secondary)}
.fvp-meta .v{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--secondary);white-space:nowrap}
.fvp-ims{padding:16px 22px 0}
.fvp-body{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:14px;padding:16px 22px 0;align-items:stretch}
.fvp-body.one{grid-template-columns:1fr}
.fvp-mt{border:1px solid var(--border);border-radius:5px;display:flex;flex-direction:column;overflow:hidden}
.fvp-mt .r{flex:1;display:grid;grid-template-columns:16px 196px minmax(0,1fr);gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border)}
.fvp-mt .r:last-child{border-bottom:0}
.fvp-mt .k{font:600 .56rem/1.45 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--secondary)}
.fvp-mt .v{font-size:13.5px;line-height:1.4;color:var(--ink)}
.fvp-mt .v b{font-weight:700}
.fvp-mt .r.dec.ap{background:#F3FBF8}.fvp-mt .r.dec.af{background:#FDF4F3}.fvp-mt .r.dec.hm{background:#F3F6FB}
.fvp-mt .dt.ap{color:#078A6C}.fvp-mt .dt.af{color:#C4453A}.fvp-mt .dt.hm{color:#3d5a8a}
.fvp-mk{display:block;width:16px}
.fvp-band{border:1px solid var(--border);border-radius:5px;padding:10px 10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#FBFCFC}
.fvp-band .fig{margin:0;font-size:.54rem;align-self:flex-start}

/* ---- deck (demo task 03, per-position checklist) */
.dc-legend{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--secondary);margin:0 0 12px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.dc-legend span{display:inline-flex;align-items:center;gap:7px}
.dc-legend i{width:15px;height:15px;border-radius:3px;border:1px solid var(--border);display:inline-block}
.dc-legend i.ok{background:#E7F6F0}.dc-legend i.miss{background:#F6D6D1;box-shadow:inset 0 0 0 1.5px rgba(184,64,47,.4)}.dc-legend i.na{background:#F4F6F7}
.dc-scroll{overflow:auto;border:1px solid var(--border)}
table.dc{width:100%;border-collapse:collapse;background:var(--panel);font-size:12.5px;min-width:1020px}
table.dc thead th{position:sticky;top:0;z-index:2;background:var(--tint);font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--secondary);padding:10px 8px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap}
table.dc thead th.lft{text-align:left}
table.dc td{border-bottom:1px solid var(--border);padding:0;vertical-align:middle}
table.dc tr.rc:hover .c-thumb,table.dc tr.rc:hover .c-meta{background:var(--em-soft)}
table.dc .c-thumb{padding:6px 8px;width:62px}
table.dc .c-meta{padding:6px 10px;max-width:190px}
.c-meta .pid{font:600 11.5px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.c-meta .plw{font-size:11px;color:var(--secondary)}
.dc-cell{padding:6px 8px;text-align:center;line-height:1.22;border-left:1px solid var(--grid)}
.dc-cell .pv{font-weight:600;font-size:12px;display:block;margin-top:1px}
.dc-cell .ex{font:500 8.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:#9aa4aa;display:block}
.dc-cell.na{background:#F4F6F7}
.dc-cell.na .pv{color:#c4ccd1;font-weight:500}
.dc-cell.miss{background:#F6D6D1 !important;box-shadow:inset 0 0 0 1.5px rgba(184,64,47,.4)}
.dc-cell.miss .pv{color:#a5331f}
.dc-cell.miss .ex{color:#cc8579;margin-top:2px}
.dc-overall{text-align:center;padding:6px 10px;border-left:1px solid var(--grid)}
.dc-ok{color:#0a7f57;font-weight:700;font-size:15px}
.dc-rev{color:#b8402f;font-weight:600;font-size:9.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.dc-flag{color:#C2570E;font-weight:600;font-size:9.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.f-a1.st-correct{background:#E7F6F0;color:#0a7f57}.f-a1.st-rotated{background:#C6EADD;color:#075e46}
.f-cap.st-uncapped{background:#FBF2D8;color:#8a6d1f}.f-cap.st-capped{background:#F1DFA8;color:#6b520f}
.f-carrier.st-correct{background:#E1F2F4;color:#157a83}.f-carrier.st-rotated{background:#BFE3E8;color:#0e565d}
.f-lid.st-none{background:#ECEFF3;color:#586574}.f-lid.st-present{background:#D6DEE9;color:#3a4a5e}
.f-seal.st-none{background:#F1EAF4;color:#6b4a7a}.f-seal.st-present{background:#E0D0EA;color:#4d3660}
.f-tips.st-seated{background:#EFF3DE;color:#5f6b1f}.f-tips.st-raised{background:#DEE7BE;color:#454f0f}
.f-askew.st-seated{background:#EAEDF9;color:#445089}.f-askew.st-askew{background:#D2D9F1;color:#2f3a70}
.f-rack.st-correct{background:#F7EFE6;color:#8a5a2b}.f-rack.st-fault{background:#EBD8C3;color:#6b4220}
.dcm-status{font:700 12px var(--mono);margin:0 0 10px}
.dcm-status.pass{color:#0a7f57}.dcm-status.fail{color:#b8402f}.dcm-status.review{color:#C2570E}
.dcm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(202px,1fr));gap:10px;margin-top:16px}
.dcm-card{border:1px solid var(--border);border-left-width:3px;border-radius:5px;padding:11px 13px;background:var(--panel)}
.dcm-card.na{background:#FBFCFC;border-left-color:#D9CBA4}
.dcm-card.miss{border-color:var(--alert);background:var(--alert-soft)}
.dcm-card.k-a1{border-left-color:#C6EADD}.dcm-card.k-askew{border-left-color:#D2D9F1}.dcm-card.k-lid{border-left-color:#D6DEE9}.dcm-card.k-seal{border-left-color:#E0D0EA}
.dcm-card.k-cap{border-left-color:#F1DFA8}.dcm-card.k-carrier{border-left-color:#BFE3E8}.dcm-card.k-tips{border-left-color:#DEE7BE}.dcm-card.k-rack{border-left-color:#EBD8C3}
.dcm-card .nm{font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.dcm-card .pair{display:flex;gap:14px;margin-top:9px;font-family:var(--mono)}
.dcm-card .pair small{display:block;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:#9aa4aa;white-space:nowrap}
.dcm-card .what{font-size:12px;color:var(--secondary);margin-top:8px;line-height:1.45}
.dcm-chip{display:inline-block;padding:2px 8px;border-radius:4px;font:700 13px var(--mono);white-space:nowrap}
.dcm-chip.na{background:#F0F3F4;color:#8b959b}
.dcm-chip.miss{background:#F6D6D1;color:#a5331f}
.dcm-card .vd{margin-top:9px;font:700 11px var(--mono);letter-spacing:.03em}
.vd.ok{color:#0a7f57}.vd.bad{color:#b8402f}.vd.na{color:#9aa4aa}

/* ---- tablet (demo task 04) */
.ncchip{display:inline-block;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#66707A;background:#EFF3F4;border:1px solid #DDE4E6;border-radius:10px;padding:1px 8px;cursor:help}
.t-count{font-family:var(--serif);font-size:22px;font-weight:600}
.t-read{display:flex;gap:30px;margin-top:16px;font-family:var(--mono);flex-wrap:wrap}
.t-read small{display:block;font-size:11px;color:#66707A;letter-spacing:.06em;text-transform:uppercase}
.t-read b{font-size:24px;font-weight:600}
.t-read b.ok{color:#0a7f57}.t-read b.nc{color:#66707A}