:root {
    --dark-green: #2d5a3d;
    --deep-green: #16311f;
    --mid-green: #3d7350;
    --gold: #c8a951;
    --gold-light: #e6c975;
    --bg: #eef1ec;
    --white: #ffffff;
    --border: rgba(0,0,0,0.08);
    --text: #1f2622;
    --muted: #8a8f8b;
    --radius: 14px;
    --shadow-1: 0 1px 2px rgba(20,40,25,0.05), 0 4px 12px rgba(20,40,25,0.06);
    --shadow-2: 0 2px 4px rgba(20,40,25,0.06), 0 10px 24px rgba(20,40,25,0.10);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family:'Rajdhani',sans-serif;
    background:
        radial-gradient(1100px 500px at 90% -10%, rgba(200,169,81,0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(45,90,61,0.08), transparent 60%),
        var(--bg);
    color:var(--text); font-size:15px;
}

/* ── Layout — sidebar is pinned full-height, main content scrolls on its own ── */
.layout { display:flex; height:100vh; overflow:hidden; }

/* Sidebar */
.sidebar {
    width:200px; flex-shrink:0; height:100vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:linear-gradient(165deg,#16311f 0%,#2d5a3d 55%,#1a3624 100%);
    box-shadow:4px 0 24px rgba(0,0,0,0.18);
    position:relative; z-index:2;
}
.sb-top { padding:16px 16px 12px; border-bottom:1px solid rgba(200,169,81,0.18); display:flex; align-items:center; gap:10px; }
.sb-logo-icon {
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(150deg,rgba(230,201,117,0.28),rgba(200,169,81,0.10));
    border:1px solid rgba(200,169,81,0.35);
    box-shadow:0 3px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--gold-light); flex-shrink:0;
}
.sb-logo-text { color:var(--gold-light); font-size:11.5px; font-weight:700; letter-spacing:0.09em; line-height:1.35; }
.sb-nav { padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; flex-shrink:0; }
.sb-item { display:flex; align-items:center; gap:8px; padding:10px 16px; color:rgba(230,201,117,0.6); font-size:12px; font-weight:700; letter-spacing:0.07em; text-decoration:none; position:relative; transition:background 0.2s, color 0.2s; }
.sb-item.active, .sb-item:hover { color:var(--gold-light); background:rgba(200,169,81,0.10); }
.sb-item.active::before { content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border-radius:0 3px 3px 0; box-shadow:0 0 8px rgba(200,169,81,0.6); }
.sb-dot { width:6px; height:6px; border-radius:50%; background:rgba(200,169,81,0.25); flex-shrink:0; }
.sb-dot.active { background:var(--gold-light); box-shadow:0 0 6px var(--gold-light); }
.sb-section { padding:10px 16px 6px; font-size:10px; color:rgba(230,201,117,0.4); letter-spacing:0.18em; font-weight:700; flex-shrink:0; }

/* History — the ONLY scrollable region in the sidebar */
.hist { flex:1; min-height:0; overflow-y:auto; padding-bottom:8px; }
.hist::-webkit-scrollbar { width:4px; }
.hist::-webkit-scrollbar-thumb { background:rgba(200,169,81,0.25); border-radius:4px; }
.hist::-webkit-scrollbar-track { background:transparent; }
.hist-loading { padding:14px 16px; font-size:11px; color:rgba(255,255,255,0.32); }
.hi { padding:9px 16px; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; transition:background 0.15s; }
.hi:hover { background:rgba(255,255,255,0.06); }
.hi-name { font-size:11.5px; color:rgba(255,255,255,0.9); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hi-date { font-size:9px; color:rgba(255,255,255,0.32); margin-top:2px; font-family:'Share Tech Mono',monospace; }
.hi-badge { display:inline-block; font-size:9px; padding:2px 7px; border-radius:8px; margin-top:4px; font-weight:700; }
.hi-badge.e { background:rgba(200,169,81,0.22); color:#e6c975; }
.hi-badge.p { background:rgba(34,197,94,0.16); color:#4ade80; }
.hi-badge.f { background:rgba(239,68,68,0.16); color:#f87171; }
.hi-del { float:right; background:rgba(239,68,68,0.16); border:none; color:#f87171; font-size:10px; padding:2px 7px; border-radius:5px; cursor:pointer; margin-top:3px; }
.hi-del:hover { background:rgba(239,68,68,0.32); }

/* Main — the whole app fits the viewport, no page scrolling on any monitor.
   Only the history list (sidebar) and, if a report is very long, the report
   page itself scroll — the live dashboard never does. */
.main-content { flex:1; height:100vh; overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar {
    background:linear-gradient(100deg,#16311f,#3d7350 45%,#16311f);
    padding:clamp(8px,1.6vh,15px) 26px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.12); flex-shrink:0; z-index:5;
}
.topbar-title { color:#fff; font-size:18px; font-weight:700; letter-spacing:0.15em; text-shadow:0 1px 2px rgba(0,0,0,0.2); }
.content-area { padding:clamp(8px,1.6vh,18px) 22px clamp(8px,1.6vh,20px); flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* Report page (not the live dashboard) is allowed to scroll if it's tall */
.report-page { flex:1; min-height:0; overflow-y:auto; }

/* Dashboard — every row sizes itself off the viewport so it always fits,
   whether the monitor is 720p or 4K, without pushing the graph off-screen. */
.dashboard { flex:1; min-height:0; display:flex; flex-direction:column; gap:clamp(6px,1vh,11px); }
.top-row { display:flex; align-items:center; justify-content:space-between; }
.sec-lbl { font-size:13px; font-weight:700; letter-spacing:0.14em; color:var(--muted); }
.fabric-display { font-size:18px; font-weight:700; color:var(--dark-green); font-family:'Share Tech Mono',monospace; }

/* Inputs */
.inp-row { display:flex; gap:10px; }
.ig { display:flex; flex-direction:column; gap:4px; flex:1; }
.ig.sm { flex:0 0 130px; }
.ig label { font-size:10px; color:var(--muted); letter-spacing:0.1em; font-weight:700; }
.field {
    padding:8px 12px; background:var(--white); border:1px solid var(--border); border-radius:9px;
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; color:var(--text); outline:none; width:100%;
    box-shadow:var(--shadow-1), var(--shadow-inset); transition:border-color 0.15s, box-shadow 0.15s;
}
.field:focus { border-color:var(--mid-green); box-shadow:0 0 0 3px rgba(61,115,80,0.14), var(--shadow-inset); }

/* Camera badge (single USB source, no toggle needed) */
.cam-badge {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:8px 10px; background:linear-gradient(180deg,#eaf3de,#dcecc9);
    border:1px solid rgba(45,90,61,0.25); border-radius:9px;
    font-size:12px; font-weight:700; color:var(--dark-green); letter-spacing:0.03em;
    box-shadow:var(--shadow-1);
}

/* Controls */
.ctrl-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.btn3d {
    padding:9px 24px; border:none; border-radius:10px; font-family:'Rajdhani',sans-serif;
    font-size:13px; font-weight:700; letter-spacing:0.08em; display:flex; align-items:center; gap:8px;
    cursor:pointer; transition:transform 0.1s, box-shadow 0.1s;
}
.btn3d:hover { transform:translateY(-1px); }
.btn3d:active { transform:translateY(1px); }
.btn3d.start { background:linear-gradient(165deg,#b89168,#8a663f); color:#fff; box-shadow:0 3px 0 #5a3c1a,0 6px 14px rgba(90,60,26,0.28), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn3d.stop { background:linear-gradient(165deg,#9c8c7c,#6a5a4a); color:#fff; box-shadow:0 3px 0 #4a3a2a,0 6px 14px rgba(74,58,42,0.22), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn3d.refresh { background:linear-gradient(165deg,#4f8a72,#2d5a3d); color:#fff; box-shadow:0 3px 0 #1e3d2a,0 6px 14px rgba(30,61,42,0.24), inset 0 1px 0 rgba(255,255,255,0.15); }
.bindi { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25); transition:all 0.3s; }
.bindi.green { background:#22c55e; box-shadow:0 0 7px #22c55e; }
.bindi.red { background:#ef4444; box-shadow:0 0 7px #ef4444; }
.ctrl-spacer { flex:1; }

/* Light group */
.light-group { display:flex; align-items:center; gap:10px; background:var(--white); border-radius:22px; padding:8px 16px; box-shadow:var(--shadow-1), var(--shadow-inset); border:1px solid var(--border); }
.light-badge { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.08em; }
.light-badge.ok { color:#16a34a; }
.light-badge.low { color:#dc2626; }
.light-badge.checking { color:var(--muted); }
.lbd { width:8px; height:8px; border-radius:50%; background:#ddd; }
.light-badge.ok .lbd { background:#22c55e; box-shadow:0 0 5px #22c55e; animation:blink 2s infinite; }
.light-badge.low .lbd { background:#ef4444; box-shadow:0 0 5px #ef4444; animation:blink 0.7s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.light-sep { width:1px; height:16px; background:rgba(0,0,0,0.08); }
.dots-wrap { display:flex; align-items:center; gap:5px; }
.ld { width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,0.08); transition:all 0.3s; }
.ld.grn { background:radial-gradient(circle at 35% 30%,#a7f3d0,#22c55e 60%,#14532d); box-shadow:0 0 6px rgba(34,197,94,0.6); }
.ld.yel { background:radial-gradient(circle at 35% 30%,#fef08a,#eab308 60%,#854d0e); box-shadow:0 0 6px rgba(234,179,8,0.6); }
.ld.red { background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 60%,#7f1d1d); box-shadow:0 0 6px rgba(239,68,68,0.6); }
.ld.dim { background:#ddd; }

/* Camera preview — top row. Given the SAME flex-grow as the graph row
   below (.sg-row), so both end up equal height — camera stays where it
   was, graph stays where it was, only their sizes are now matched. */
.cam-container { flex:3; min-height:0; display:flex; }
.cam-frame {
    width:100%; height:100%; background:#0c0f0d; border-radius:16px;
    border:1px solid rgba(255,255,255,0.06); position:relative; overflow:hidden;
    box-shadow:inset 0 2px 10px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.4);
}
.cam-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#22c55e,transparent); display:none; animation:scan 2s linear infinite; z-index:3; box-shadow:0 0 10px #22c55e; }
@keyframes scan { 0%{top:0} 100%{top:100%} }
.cam-name { position:absolute; top:9px; left:11px; color:#ffd700; font-size:11px; font-family:'Share Tech Mono',monospace; z-index:3; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.cam-timer { position:absolute; top:9px; right:11px; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); color:#fff; font-size:15px; padding:4px 12px; border-radius:7px; font-family:'Share Tech Mono',monospace; font-weight:700; z-index:3; border:1px solid rgba(255,255,255,0.1); }
.light-warn { position:absolute; bottom:0; left:0; right:0; background:rgba(239,68,68,0.88); color:#fff; text-align:center; font-size:13px; font-weight:700; padding:9px; z-index:4; letter-spacing:0.08em; }
.qbar-wrap { background:var(--white); border-radius:var(--radius); padding:10px 16px; box-shadow:var(--shadow-1), var(--shadow-inset); }
.qbar-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.qbar-lbl { font-size:11px; color:var(--muted); letter-spacing:0.1em; font-weight:700; }
.qbar-mid { font-size:10px; color:var(--muted); }
.qbar-mid span { color:#16a34a; font-weight:700; }
.qbar-val { font-size:13px; font-family:'Share Tech Mono',monospace; font-weight:700; color:var(--muted); }
.qbar-val.excellent { color:#c8a951; }
.qbar-val.good { color:#16a34a; }
.qbar-val.fail { color:#dc2626; }
.qbar-bg { height:11px; background:#e9e9e5; border-radius:11px; position:relative; overflow:visible; margin-bottom:20px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.12); }
.qbar-fill { height:100%; border-radius:11px; transition:width 0.5s; background:linear-gradient(90deg,#22c55e,#16a34a); box-shadow:0 0 8px rgba(34,197,94,0.4); }
.qbar-fill.excellent { background:linear-gradient(90deg,#22c55e,#c8a951); box-shadow:0 0 8px rgba(200,169,81,0.4); }
.qbar-fill.fail { background:linear-gradient(90deg,#ef4444,#dc2626); box-shadow:0 0 8px rgba(220,38,38,0.4); }
.qbar-m80 { position:absolute; left:80%; top:-3px; bottom:-3px; width:2px; background:#16a34a; border-radius:2px; }
.qbar-m80-lbl { position:absolute; left:80%; top:14px; font-size:9px; color:#16a34a; transform:translateX(-50%); white-space:nowrap; font-weight:700; }
.qbar-m90 { position:absolute; left:90%; top:-3px; bottom:-3px; width:2px; background:#c8a951; border-radius:2px; }
.qbar-m90-lbl { position:absolute; left:90%; top:14px; font-size:9px; color:#c8a951; transform:translateX(-50%); white-space:nowrap; font-weight:700; }

/* Stats + Graph — bottom row, same flex-grow as .cam-container above it,
   so this row (and the graph card inside it) matches the camera's height. */
.sg-row { flex:1; min-height:0; display:flex; gap:11px; }
.stats-col { display:flex; flex-direction:column; gap:7px; min-width:96px; flex-shrink:0; justify-content:space-between; }
.sc { background:var(--white); border-radius:var(--radius); padding:clamp(6px,1.4vh,8px) 11px; text-align:center; box-shadow:var(--shadow-1), var(--shadow-inset); position:relative; overflow:hidden; flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }
.sc::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.sc.good::before { background:#22c55e; }
.sc.bad::before { background:#ef4444; }
.sc.neu::before { background:var(--dark-green); }
.sc-pct { font-size:19px; font-weight:700; font-family:'Share Tech Mono',monospace; }
.sc.good .sc-pct { color:#16a34a; }
.sc.bad .sc-pct { color:#dc2626; }
.sc.neu .sc-pct { color:var(--dark-green); }
.sc-lbl { font-size:9px; color:#b3b3af; letter-spacing:0.1em; font-weight:700; }
.graph-card { flex:1; min-width:0; background:var(--white); border-radius:var(--radius); padding:10px 13px; box-shadow:var(--shadow-1), var(--shadow-inset); display:flex; flex-direction:column; min-height:0; }
.graph-title { font-size:10px; color:#b3b3af; letter-spacing:0.08em; font-family:'Share Tech Mono',monospace; margin-bottom:6px; font-weight:700; flex-shrink:0; }
#colorGraph { width:100%; flex:1; min-height:0; display:block; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(10,20,14,0.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-box { background:var(--white); border-radius:18px; padding:34px 42px; max-width:420px; width:90%; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,0.35), 0 2px 0 rgba(255,255,255,0.5) inset; }
.modal-title { font-size:12px; font-weight:700; letter-spacing:0.18em; color:var(--muted); margin-bottom:6px; }
.modal-fabric { font-size:22px; font-weight:700; color:var(--dark-green); margin-bottom:20px; font-family:'Share Tech Mono',monospace; }
.modal-stats { display:flex; gap:24px; justify-content:center; margin-bottom:14px; }
.modal-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ms-pct { font-size:34px; font-weight:700; font-family:'Share Tech Mono',monospace; }
.modal-stat.good .ms-pct { color:#16a34a; }
.modal-stat.bad .ms-pct { color:#dc2626; }
.ms-lbl { font-size:10px; font-weight:700; letter-spacing:0.12em; color:var(--muted); }
.modal-verdict { font-size:13px; margin-bottom:22px; padding:10px 18px; border-radius:9px; font-weight:700; }
.modal-verdict.pass { background:rgba(34,197,94,0.08); color:#15803d; border:1px solid rgba(34,197,94,0.2); }
.modal-verdict.fail { background:rgba(239,68,68,0.08); color:#b91c1c; border:1px solid rgba(239,68,68,0.2); }
.modal-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.btn-modal-view { padding:10px 18px; background:var(--dark-green); color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(45,90,61,0.3); }
.btn-modal-again { padding:10px 18px; background:#c8a951; color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(200,169,81,0.3); }
.btn-modal-close { padding:10px 18px; background:#eee; color:#555; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; }

/* Report page */
.report-page { max-width:100%; }
.report-header { margin-bottom:18px; }
.report-title { font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--muted); }
.report-fabric { font-size:28px; font-weight:700; color:var(--dark-green); font-family:'Share Tech Mono',monospace; }
.report-date { font-size:12px; color:var(--muted); margin-top:3px; }
.report-meta { display:flex; gap:16px; margin-top:6px; font-size:11.5px; color:var(--muted); }
.report-meta strong { color:var(--dark-green); }
.report-sub-meta { font-size:11px; color:var(--muted); margin:6px 0 14px; }
.report-sub-meta strong { color:var(--text); }
.report-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px; }
.rstat { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow-1), var(--shadow-inset); }
.rstat.good { border-color:#22c55e; }
.rstat.bad { border-color:#ef4444; }
.rstat-pct { font-size:28px; font-weight:700; font-family:'Share Tech Mono',monospace; }
.rstat.good .rstat-pct { color:#16a34a; }
.rstat.bad .rstat-pct { color:#dc2626; }
.rstat.neu .rstat-pct { color:var(--dark-green); }
.rstat-lbl { font-size:10px; font-weight:700; letter-spacing:0.12em; color:var(--muted); margin-top:4px; }
.rstat-count { font-size:11px; color:var(--muted); margin-top:3px; }
.verdict { padding:14px 20px; border-radius:10px; font-size:14px; font-weight:700; letter-spacing:0.06em; margin-bottom:16px; box-shadow:var(--shadow-1); }
.verdict.pass { background:rgba(34,197,94,0.08); color:#15803d; border:1px solid rgba(34,197,94,0.2); }
.verdict.fail { background:rgba(239,68,68,0.08); color:#b91c1c; border:1px solid rgba(239,68,68,0.2); }
.report-chart-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:15px; margin-bottom:16px; box-shadow:var(--shadow-1), var(--shadow-inset); }
.graph-label { font-size:10px; color:var(--muted); letter-spacing:0.1em; font-weight:700; margin-bottom:8px; font-family:'Share Tech Mono',monospace; }
.report-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn-back { padding:10px 22px; background:var(--dark-green); color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(45,90,61,0.25); }
.btn-again { padding:10px 22px; background:#c8a951; color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(200,169,81,0.25); }
.btn-export { padding:10px 22px; background:#3d7350; color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(61,115,80,0.25); }
.btn-delete { padding:10px 22px; background:#ef4444; color:#fff; border:none; border-radius:9px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(239,68,68,0.25); }

/* Coming soon */
.coming-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; gap:16px; }
.cs-icon { font-size:60px; color:var(--dark-green); opacity:0.25; }
.cs-text { font-size:20px; font-weight:700; letter-spacing:0.15em; color:var(--muted); text-align:center; }

/* Responsive: narrower windows still show everything (e.g. smaller display / desktop app resize) */
@media (max-width: 980px) {
    .inp-row { flex-wrap:wrap; }
    .ig.sm { flex:1 1 45%; }
    .sg-row { flex-direction:column; }
    .stats-col { flex-direction:row; min-width:0; flex-shrink:0; }
    .sc { padding:6px 8px; }
}

/* Very short monitors (e.g. 720p laptop screens) — compress further */
@media (max-height: 700px) {
    .qbar-bg { margin-bottom:16px; }
}
/* ════════════════════════════ v2 additions ════════════════════════════ */
.topbar { position:relative; }
@media (max-width: 1450px) {
    .topbar:has(.mode-pill) { justify-content:flex-start; }
    .topbar:has(.mode-pill) .topbar-title { font-size:15px; }
}
.muted { color:var(--muted); }
.small { font-size:10px; }
a { color:var(--mid-green); font-weight:700; }
button:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }
button:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* Mode pill in the top bar — the one thing a viewer must never miss */
.mode-pill {
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; gap:8px; max-width:40%;
    padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:0.06em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid transparent;
}
.mode-pill #modeText { overflow:hidden; text-overflow:ellipsis; }
.mp-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:#bbb; }
.mode-pill.measurement { background:#dcf5e3; color:#14532d; border-color:#22c55e; }
.mode-pill.measurement .mp-dot { background:#22c55e; box-shadow:0 0 7px #22c55e; }
.mode-pill.demo { background:#fff4d6; color:#7a5200; border-color:#e0a800; }
.mode-pill.demo .mp-dot { background:#e0a800; box-shadow:0 0 7px #e0a800; animation:blink 1.4s infinite; }
.mode-pill.none { background:rgba(255,255,255,0.12); color:#e8e8e8; }

/* Inputs row */
.ig.xs { flex:0 0 100px; }
.ig.md { flex:0 0 330px; min-width:0; }
.ig.inline { flex:0 0 300px; }
.cam-select-wrap { display:flex; gap:6px; }
.cam-select { cursor:pointer; min-width:0; }
.icon-btn {
    flex-shrink:0; width:36px; border:1px solid var(--border); border-radius:9px; background:var(--white);
    color:var(--dark-green); font-size:16px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-1);
}
.icon-btn:hover { background:#eaf3de; }

.setup-line { font-size:12px; color:var(--text); text-align:right; }
.setup-line strong { color:var(--dark-green); }
.sl-empty { color:#9a6b00; font-weight:600; }
.ctrl-msg { font-size:12px; font-weight:700; margin-left:6px; }
.ctrl-msg.err { color:#dc2626; }
.ctrl-msg.warn { color:#9a6b00; }
.light-badge.warn { color:#b07d00; }
.light-badge.warn .lbd { background:#eab308; box-shadow:0 0 5px #eab308; }

/* Live feed + overlays */
#liveFeed { width:100%; height:100%; object-fit:contain; display:block; background:#0c0f0d; }
.swatches { position:absolute; left:11px; bottom:11px; display:flex; gap:8px; z-index:3; }
.sw { display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:11px;
      padding:4px 9px 4px 4px; border-radius:8px; font-family:'Share Tech Mono',monospace; }
.sw-chip, .ref-chip { width:20px; height:20px; border-radius:5px; background:#333; border:1px solid rgba(255,255,255,0.5); display:inline-block; vertical-align:middle; }
.demo-banner {
    position:absolute; top:0; left:0; right:0; z-index:4; padding:7px 14px;
    background:repeating-linear-gradient(135deg,rgba(224,168,0,0.92) 0 14px,rgba(210,155,0,0.92) 14px 28px);
    color:#2a1d00; font-size:12.5px; font-weight:700; text-align:center; letter-spacing:0.02em;
}
.state-banner {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
    background:rgba(0,0,0,0.7); color:#ffe08a; padding:10px 18px; border-radius:10px;
    font-size:14px; font-weight:700; letter-spacing:0.05em;
}

/* Toast */
.toast {
    position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
    background:#16311f; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,0.3); transition:opacity 0.2s, transform 0.2s; z-index:200; max-width:80%;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.err { background:#991b1b; }

/* Sidebar tags */
.hi-tag { display:inline-block; font-size:8.5px; padding:2px 6px; border-radius:6px; margin:4px 0 0 5px; font-weight:700; }
.hi-tag.demo { background:rgba(224,168,0,0.25); color:#ffd766; }
.hi-tag.legacy { background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.55); }

/* Modal */
.modal-mode { font-size:11.5px; font-weight:700; margin:-12px 0 16px; color:var(--muted); }
.modal-mode.demo { color:#9a6b00; }

/* Generic panels, tags, tables */
.panel { background:var(--white); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-1), var(--shadow-inset); }
.panel-title { font-size:13px; font-weight:700; color:var(--dark-green); margin-bottom:8px; }
.panel-title.mt { margin-top:14px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.panel-head .panel-title { margin:0; }
.tag { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; }
.tag.ok { background:rgba(34,197,94,0.14); color:#15803d; }
.tag.warn { background:rgba(234,179,8,0.18); color:#8a6100; }
.tag.demo { background:rgba(224,168,0,0.18); color:#8a6100; }
.tag.active { background:var(--dark-green); color:#fff; }
.btn-soft {
    display:inline-block; margin-top:8px; padding:7px 12px; background:#eef4ea; color:var(--dark-green);
    border:1px solid rgba(45,90,61,0.2); border-radius:8px; font-family:'Rajdhani',sans-serif;
    font-size:12px; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-soft:hover { background:#e1ecd9; }
.btn-mini { padding:3px 9px; border:1px solid rgba(45,90,61,0.25); background:#fff; color:var(--dark-green);
            border-radius:6px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; cursor:pointer; }
.btn-mini.del { color:#dc2626; border-color:rgba(220,38,38,0.25); }

/* Setup page */
.setup-page { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px; }
.setup-page .top-row { flex-wrap:wrap; gap:10px; }
.steps { display:flex; gap:10px; list-style:none; counter-reset:st; }
.steps li {
    counter-increment:st; flex:1; background:var(--white); border-radius:10px; padding:9px 12px 9px 40px;
    position:relative; font-size:12.5px; line-height:1.35; box-shadow:var(--shadow-1);
}
.steps li::before {
    content:counter(st); position:absolute; left:11px; top:9px; width:20px; height:20px; border-radius:50%;
    background:var(--dark-green); color:var(--gold-light); font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.setup-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:12px; }
.setup-cam { height:auto; aspect-ratio:4/3; max-height:62vh; }
.checks-panel { display:flex; flex-direction:column; }
.check-list { display:flex; flex-direction:column; gap:4px; }
.ck { display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:8px; font-size:12.5px; }
.ck.ok { background:rgba(34,197,94,0.07); }
.ck.bad { background:rgba(239,68,68,0.07); }
.ck-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.ck.ok .ck-dot { background:#22c55e; box-shadow:0 0 5px #22c55e; }
.ck.bad .ck-dot { background:#ef4444; box-shadow:0 0 5px #ef4444; }
.ck-lbl { font-weight:700; }
.ck-val { margin-left:auto; font-family:'Share Tech Mono',monospace; font-size:11.5px; color:var(--muted); text-align:right; }
.cam-info { font-size:12px; margin-top:10px; color:var(--text); line-height:1.4; }
.baseline-row { display:flex; align-items:center; gap:8px; }
.baseline-row label { font-size:11px; color:var(--muted); font-weight:700; }
.sm-field { width:70px; }
.progress { height:8px; background:#e9e9e5; border-radius:8px; margin-top:10px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,#3d7350,#c8a951); transition:width 0.3s; }
.baseline-result { margin-top:10px; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.br-head { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:4px 0; flex-wrap:wrap; }
.br-head.ok { color:#15803d; }
.br-head.bad { color:#b91c1c; }
.br-head .muted { font-size:11px; font-weight:600; }
.br-foot { margin-top:6px; font-size:12px; }
.form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.form-grid .wide { grid-column:span 2; }
.form-actions { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; }
.table-wrap { overflow-x:auto; }
.setup-table { width:100%; border-collapse:collapse; font-size:12px; }
.setup-table th { text-align:left; font-size:10.5px; color:var(--muted); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.setup-table td { padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.setup-table tr.active td { background:rgba(45,90,61,0.06); }
.row-actions { white-space:nowrap; text-align:right; }

/* Report page */
.notice { padding:10px 14px; border-radius:10px; font-size:13px; font-weight:700; margin-bottom:14px; }
.notice.demo { background:#fff4d6; color:#7a5200; border:1px solid #e0a800; }
.notice.legacy { background:#eee; color:#555; border:1px solid #ccc; }
.report-fabric .ref-chip { width:24px; height:24px; border-color:rgba(0,0,0,0.15); margin-right:6px; }
.mode-measurement { color:#15803d !important; }
.mode-demo { color:#9a6b00 !important; }
.report-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.kv { width:100%; font-size:12.5px; border-collapse:collapse; }
.kv td { padding:5px 0; border-bottom:1px solid var(--border); }
.kv td:first-child { color:var(--muted); width:48%; }

@media (max-width: 1200px) {
    .ig.md { flex:1 1 240px; }
    .inp-row { flex-wrap:wrap; }
    .setup-grid, .report-cols { grid-template-columns:1fr; }
    .steps { flex-wrap:wrap; }
    .steps li { flex:1 1 45%; }
    .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .cam-scan, .mode-pill.demo .mp-dot, .light-badge .lbd { animation:none !important; }
}

/* Check page: big camera on the left, score + graph in a column on the right */
.live-row { flex:1; min-height:0; display:flex; gap:11px; }
.live-row .cam-container { flex:0 1 auto; height:100%; aspect-ratio:4/3; max-width:68%; min-width:0; }
.side-col { flex:1; min-width:300px; min-height:0; display:flex; flex-direction:column; gap:11px; }
.side-col .sg-row { flex:1; flex-direction:column; }
.side-col .stats-col { flex-direction:row; min-width:0; flex:0 0 auto; }
.side-col .sc { padding:10px 8px; }
.side-col .sc-pct { font-size:24px; }
@media (max-width: 1100px) {
    .live-row { flex-direction:column; }
    .live-row .cam-container { max-width:100%; width:100%; height:auto; flex:1; }
    .side-col { min-width:0; flex:0 0 auto; }
    .side-col .sg-row { min-height:160px; }
}

/* ════════ Web demo additions ════════ */
.sb-back { margin-top:auto; border-top:1px solid rgba(255,255,255,0.08); }
.sb-item { cursor:pointer; }
.view[hidden] { display:none !important; }
.cam-start {
    position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    background:#0c0f0d; color:#cfe3d4; text-align:center; padding:20px;
}
.cam-start p { font-size:13px; max-width:380px; color:#9fb5a6; }
.cam-start .btn3d { font-size:15px; padding:12px 28px; }
#liveCanvas, #setupCanvas { width:100%; height:100%; object-fit:contain; display:block; background:#0c0f0d; }
.demo-note { font-size:11.5px; color:#9a6b00; font-weight:600; }
.cam-select-wrap .field { cursor:pointer; }
.res-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.modal-report { font-size:12px; color:var(--muted); margin:-6px 0 16px; line-height:1.6; }
.modal-report strong { color:var(--text); }
@media (max-width: 900px) {
    .layout { flex-direction:column; height:auto; overflow:visible; }
    .sidebar { width:100%; height:auto; }
    .hist { max-height:170px; }
    .main-content { height:auto; overflow:visible; }
    .content-area { overflow:visible; }
    .dashboard { min-height:0; }
    .live-row { flex-direction:column; }
    .live-row .cam-container { max-width:100%; width:100%; height:auto; aspect-ratio:4/3; flex:none; }
    .side-col .sg-row { min-height:220px; }
    .mode-pill { position:static; transform:none; max-width:100%; margin-top:6px; }
    .topbar { flex-direction:column; }
    .setup-grid { grid-template-columns:1fr; }
}
/* keep timer + fabric label visible below the demo banner */
#viewCheck .cam-timer, #viewCheck .cam-name { top: 42px; }
#viewCheck .demo-banner { padding: 5px 14px; font-size: 12px; }
@media (max-width: 900px) {
    .inp-row .ig, .inp-row .ig.xs, .inp-row .ig.md { flex: 1 1 100%; }
    .top-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}