:root {
  color-scheme: dark;
  --bg: #0f1114;
  --bg-2: #161a1f;
  --bg-3: #1d2229;
  --line: #2a313a;
  --text: #e8eaed;
  --text-2: #a7afba;
  --muted: #6f7a87;
  --accent: #3987e5;
  --accent-2: #2a78d6;
  --good: #1baf7a;
  --warn: #eda100;
  --bad: #e34948;
  --pen: #78dcff;
  --radius: 10px;
  --font: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
h2, h3, h4 { margin: 0; font-weight: 600; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
h4 { font-size: 14px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.unit { color: var(--muted); font-size: 11px; margin-left: 2px; }

.topbar { display: flex; align-items: center; gap: 28px; padding: 0 20px; height: 52px; border-bottom: 1px solid var(--line); background: var(--bg-2); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), #78dcff); box-shadow: 0 0 0 3px rgba(57,135,229,.18); }
.ver { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 2px; }
.tabs { display: flex; gap: 4px; }
.tab { background: none; border: 0; color: var(--text-2); padding: 8px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
.tab-ext { text-decoration: none; color: #78b4ff; margin-left: 6px; }
.tab-ext:hover { background: rgba(57,135,229,.12); }
.tab.active { color: var(--text); background: var(--bg-3); }

.view { display: none; }
.view.active { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 52px); }
#view-history.active, #view-users.active { grid-template-columns: 1fr; }
.sidebar { border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); }
.content { padding: 20px 24px; min-width: 0; }
.content.wide { max-width: 1400px; }

.card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
label { display: block; font-size: 12px; color: var(--text-2); margin: 8px 0 0; }
label.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text); font-size: 13px; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=tel], input:not([type]), select {
  width: 100%; margin-top: 4px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; font: inherit; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { font: inherit; }
.btnrow { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.btnrow .primary { margin-top: 0; flex: 1; }
.btnrow .ghost { white-space: nowrap; }
.primary { width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 8px; background: var(--accent-2); color: #fff; font-weight: 600; cursor: pointer; }
.primary:hover { background: var(--accent); }
.primary:disabled { opacity: .45; cursor: default; }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-2); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.ghost:hover { color: var(--text); border-color: var(--text-2); }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 11px; text-transform: none; letter-spacing: 0; padding: 0; }
.hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segmented.three { grid-template-columns: 1fr 1fr 1fr; }
.dropset { margin-bottom: 10px; }
.drop-label { font-size: 12px; color: var(--text-2); margin: 6px 0 4px; font-weight: 600; }
.drop-label .muted { font-weight: 400; }
.segmented button { background: var(--bg); border: 1px solid var(--line); color: var(--text-2); padding: 8px 6px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.segmented button small { font-size: 10.5px; color: var(--muted); }
.segmented button.active { border-color: var(--accent); color: var(--text); background: rgba(57,135,229,.12); }

.drop { position: relative; border: 1.5px dashed var(--line); border-radius: 8px; padding: 12px 10px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(57,135,229,.06); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-inner { font-size: 13px; pointer-events: none; }
.file-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 140px; overflow: auto; font-size: 12px; }
.file-list li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.file-list li:nth-child(odd) { background: rgba(255,255,255,.025); }
.file-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.file-list .size { color: var(--muted); }
.file-list .rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.file-list .rm:hover { color: var(--bad); }
.status { margin-top: 8px; font-size: 12px; color: var(--text-2); min-height: 16px; }
.status.err { color: var(--bad); }

.empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-2); padding: 60px 20px; }
.empty-art { width: 220px; height: 90px; border-radius: 8px; margin-bottom: 20px;
  background: repeating-linear-gradient(90deg, #2a313a 0 3px, #1d2229 3px 7px); position: relative; overflow: hidden; }
.empty-art::after { content: ""; position: absolute; left: 92px; top: 0; width: 7px; height: 100%; background: rgba(227,73,72,.6); }

.result-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.grade { font-weight: 800; font-size: 15px; letter-spacing: .06em; padding: 8px 14px; border-radius: 8px; background: var(--good); color: #052; }
.grade.WARN { background: var(--warn); color: #3a2500; }
.grade.FAIL { background: var(--bad); color: #fff; }
.result-title { flex: 1; }
.result-actions { display: flex; gap: 8px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tile .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tile .v { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .v small { font-size: 12px; color: var(--text-2); font-weight: 400; margin-left: 3px; }
.tile.bad .v { color: var(--bad); } .tile.warn .v { color: var(--warn); } .tile.good .v { color: var(--good); }

.panel { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.subtabs { display: flex; gap: 2px; background: var(--bg); padding: 3px; border-radius: 8px; }
.subtabs button { background: none; border: 0; color: var(--text-2); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.subtabs button.active { background: var(--bg-3); color: var(--text); }
.subtabs button:disabled { opacity: .35; cursor: default; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.sw.dead { background: var(--bad); } .sw.weak { background: var(--warn); } .sw.suspect { background: #9085e9; } .sw.band { background: var(--accent); } .sw.pen { background: var(--pen); }
.imgwrap { background: #000; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; }
.imgwrap img { max-width: 100%; max-height: 560px; image-rendering: auto; }
.chart { width: 100%; height: 320px; }
.chart.small { height: 200px; margin-bottom: 10px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); font-variant-numeric: tabular-nums; }
.table tr.clickable { cursor: pointer; } .table tr.clickable:hover td { background: rgba(255,255,255,.03); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pill.PASS { background: rgba(27,175,122,.18); color: var(--good); } .pill.WARN { background: rgba(237,161,0,.18); color: var(--warn); } .pill.FAIL { background: rgba(227,73,72,.18); color: var(--bad); }
.pill.dead { background: rgba(227,73,72,.18); color: var(--bad); } .pill.weak { background: rgba(237,161,0,.18); color: var(--warn); }
.pill.suspect { background: rgba(144,133,233,.18); color: #9085e9; }
.pill.both { background: rgba(57,135,229,.18); color: var(--accent); } .pill.ringdown, .pill.phantom { background: rgba(255,255,255,.07); color: var(--text-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-family: var(--mono); font-size: 12px; }
.warn { margin-top: 10px; padding: 8px 10px; border-radius: 7px; background: rgba(237,161,0,.12); color: var(--warn); font-size: 12.5px; }
.filters { display: flex; gap: 8px; align-items: center; }
.filters select { width: auto; margin: 0; }

@media (max-width: 900px) { .view.active { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); } }
@media print {
  body { background: #fff; color: #000; }
  .topbar, .sidebar, .result-actions, .subtabs, #view-history, #view-users, .auth { display: none !important; }
  .view.active { grid-template-columns: 1fr; }
  .panel, .tile, .card { border-color: #ccc; background: #fff; }
  .kv dt, .muted { color: #555; }
}

.review { font-size: 13.5px; line-height: 1.5; }
.review .verdict { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.review .rec { font-weight: 600; }
.review h5 { margin: 12px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.review p { margin: 0 0 6px; }
.review ul { margin: 0; padding-left: 18px; }
.review li { margin-bottom: 4px; }
.review .cause { color: var(--text-2); }
.review.busy { color: var(--accent); }
.review.err { color: var(--bad); }
.pill.ok { background: rgba(27,175,122,.18); color: var(--good); } .pill.no { background: rgba(227,73,72,.18); color: var(--bad); }
.pill.high { background: rgba(27,175,122,.18); color: var(--good); } .pill.medium { background: rgba(237,161,0,.18); color: var(--warn); } .pill.low { background: rgba(255,255,255,.07); color: var(--text-2); }

.review .kvs { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: 12.5px; }
.review .kvs dt { color: var(--muted); } .review .kvs dd { margin: 0; }
.review .notice { padding: 8px 10px; border-radius: 7px; background: rgba(57,135,229,.12); color: var(--accent); margin-bottom: 10px; font-size: 12.5px; }
#review-charts .chart { height: 260px; margin-top: 10px; }
#review-charts .cnote { font-size: 12.5px; color: var(--text-2); margin: 4px 0 0; }

.stages { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; }
.stages li { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); align-items: baseline; }
.stages .st { width: 14px; text-align: center; flex: none; }
.stages .nm { font-weight: 600; min-width: 92px; }
.stages .dt { color: var(--text-2); }
.stages li.running .st { color: var(--accent); animation: blink 1s infinite; }
.stages li.done .st { color: var(--good); } .stages li.error .st { color: var(--bad); }
@keyframes blink { 50% { opacity: .3; } }

/* ---- camera capture + mobile ---- */
.camera { display: none; margin-top: 6px; }
.camera input { display: none; }
.camera span { display: block; text-align: center; padding: 11px; border-radius: 8px; background: var(--accent-2); color: #fff; font-weight: 600; cursor: pointer; }
@media (pointer: coarse) { .camera { display: block; } .drop { padding: 10px; } .drop-inner strong { display: none; } }
@media (max-width: 900px) {
  .topbar { padding: 0 12px; height: 48px; gap: 14px; }
  .sidebar { padding: 12px; }
  .content { padding: 12px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile .v { font-size: 19px; }
  .result-head { flex-wrap: wrap; }
  .result-actions { width: 100%; flex-wrap: wrap; gap: 6px; }
  .result-actions .ghost { flex: 1; padding: 8px 6px; font-size: 12.5px; }
  .panel-head { gap: 8px; }
  .subtabs { flex-wrap: wrap; }
  .legend { display: none; }
  .table { font-size: 12px; display: block; overflow-x: auto; }
  .chart { height: 240px; }
  .imgwrap img { max-height: 60vh; }
  input, select, button { font-size: 16px; }   /* stops iOS zooming into fields */
  .primary { padding: 13px; }
  #view-history .table { font-size: 11.5px; }
}

/* probe label photo */
.label-row { margin: 6px 0 8px; }
.drop-small { padding: 8px 10px; }
#label-preview { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: 12px; }
#label-preview img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
#label-preview .muted { flex: 1; white-space: pre-line; }
#label-preview.reading img { opacity: .5; }
#r-label { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; }
#r-label img { height: 40px; border-radius: 4px; border: 1px solid var(--line); cursor: zoom-in; }
#r-label img:hover { height: 160px; }
tr.superseded td { opacity: .55; }
.check.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin: 0 8px; }

/* probe details on the result */
.probe-card { display: flex; gap: 16px; align-items: flex-start; background: var(--panel-2, rgba(255,255,255,.03)); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.probe-card dl { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 18px; margin: 0; }
.probe-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.probe-card dd { margin: 0; font-size: 15px; font-weight: 600; word-break: break-all; }
.probe-card dd.serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; }
.probe-card dd.empty { color: var(--text-2); font-weight: 400; }
#r-label { display: block; margin: 0; }
#r-label img { height: 72px; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
#r-label img:hover { height: 220px; }
/* label read-out under the probe fields */
#label-info { flex: 1; font-size: 12px; }
#label-info .lf { display: grid; grid-template-columns: 70px 1fr; gap: 2px 8px; margin-top: 4px; }
#label-info .lf dt { color: var(--text-2); }
#label-info .lf dd { margin: 0; font-weight: 600; }
#label-info .lf dd.serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pill.regional { background: rgba(255, 180, 60, .18); color: #f3b64a; }
.probe-card dd.unverified { color: #f3b64a; font-weight: 500; }
/* let a finger on a chart scroll the page */
@media (pointer: coarse) {
  .js-plotly-plot, .js-plotly-plot .plot-container, .js-plotly-plot .svg-container { touch-action: pan-y !important; }
  .js-plotly-plot .draglayer, .js-plotly-plot .nsewdrag { pointer-events: none !important; }
}
.busy-note { padding: 40px 20px; text-align: center; color: var(--text-2); font-size: 15px; }
.busy-note.err { color: #f08080; }

/* ---- sign-in ---- */
.topbar .who { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); }
.topbar .who .link { font-size: 12px; }
.auth { position: fixed; inset: 0; z-index: 50; background: rgba(10,12,15,.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.auth-card h2 { margin: 6px 0 0; font-size: 18px; }
.auth-card .brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.auth-card .err, .user-add .err { color: #f08080; font-size: 13px; }
.auth-card .row2 { display: flex; gap: 8px; justify-content: flex-end; }
.user-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.user-add label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.user-add button { height: 36px; }
#users-table .disabled td { opacity: .5; }
.pill.admin { background: rgba(57,135,229,.18); color: #78b4ff; }
.pill.user { background: rgba(255,255,255,.08); color: var(--text-2); }
@media (max-width: 900px) { .topbar .who span { display: none; } }
.pill.likely-lens { background: rgba(243,182,74,.18); color: #f3b64a; border: 1px dashed rgba(243,182,74,.5); }
.pill.likely-array { background: rgba(240,128,128,.15); color: #f08080; border: 1px dashed rgba(240,128,128,.5); }
#overlay-toggle { margin-left: 8px; }
.qr-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr-form { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 10px; }
.qr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.qr-form label.check { flex-direction: row; align-items: center; gap: 8px; }
.qr-preview { background: #fff; padding: 12px; border-radius: 10px; }
.qr-preview img { width: 220px; height: 220px; display: block; image-rendering: pixelated; }
.qr-dl a { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; }

/* ---- ProbeLogic branding, call-to-action, help -------------------------------- */
.brand .logo { height: 34px; width: auto; display: block; background: #fff; border-radius: 7px; padding: 3px 5px; }
.brand a { display: flex; }
.brand-name { font-weight: 700; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.auth-logo img { height: 92px; width: auto; background: #fff; border-radius: 12px; padding: 8px 12px; }
.auth-card .brand { justify-content: center; }
.auth-switch { text-align: center; margin-top: 2px; }
.auth-switch .link { font-size: 13px; }
.auth-card #auth-contact { display: flex; flex-direction: column; gap: 10px; }
.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 6px; padding: 14px 16px; border-radius: var(--radius);
       background: linear-gradient(135deg, rgba(227,73,72,.16), rgba(227,73,72,.06)); border: 1px solid rgba(227,73,72,.45); }
.cta .cta-text { flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.cta .cta-btn { display: inline-block; padding: 12px 20px; border-radius: 9px; background: #b31b1b; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(179,27,27,.35); }
.cta .cta-btn:hover { background: #d32222; }
.help { line-height: 1.55; }
.help h2 { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 26px 0 8px; display: block; }
.help h2:first-child { margin-top: 0; }
.help h3 { font-size: 15px; margin: 18px 0 6px; color: var(--text); }
.help p, .help li { color: var(--text-2); max-width: 820px; }
.help ul, .help ol { padding-left: 22px; margin: 6px 0 10px; }
.help li { margin: 3px 0; }
.help b { color: var(--text); }
.help .tip { border-left: 3px solid var(--accent); padding: 8px 12px; margin: 10px 0; background: rgba(57,135,229,.08); border-radius: 0 8px 8px 0; max-width: 820px; }
.help .pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.help a { color: #78b4ff; }
.help .cta { max-width: 820px; }
@media (max-width: 720px) {
  .brand .logo { height: 28px; }
  .topbar { gap: 10px; padding: 6px 10px; height: auto; flex-wrap: wrap; }
  .topbar .ver { display: none; }
  .topbar .brand { order: 1; }
  .topbar .who { order: 2; margin-left: auto; gap: 10px; white-space: nowrap; }
  .topbar .who #who-name { display: none; }
  .topbar .tabs { order: 3; flex: 1 0 100%; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topbar .tabs::-webkit-scrollbar { display: none; }
  .topbar .tab { padding: 7px 12px; white-space: nowrap; }
  .cta .cta-btn { width: 100%; text-align: center; }
}