:root {
  --bg: #f4f6f8; --surface: #ffffff; --surface-2: #eef1f4; --text: #17202a;
  --muted: #66717d; --border: #d5dbe1; --accent: #1458d4; --accent-strong: #0d3f9d;
  --danger: #b42318; --danger-bg: #fef3f2; --success: #157f3b; --warning: #9a6700;
  --shadow: 0 8px 28px rgba(20, 30, 45, .10); --radius: 10px; --sidebar: 232px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) { :root { --bg:#12161b; --surface:#1b2128; --surface-2:#252d36; --text:#edf2f7; --muted:#aab5c0; --border:#35404b; --accent:#73a5ff; --accent-strong:#a9c7ff; --danger:#ff8d85; --danger-bg:#3a2020; --success:#72d995; --warning:#f0c96b; --shadow:0 8px 28px rgba(0,0,0,.35); } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; }
button, input, select, textarea { font:inherit; }
button { border:1px solid var(--border); border-radius:7px; padding:.55rem .8rem; background:var(--surface); color:var(--text); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, canvas:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:1px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:white; font-weight:650; }
button.primary:hover:not(:disabled) { background:var(--accent-strong); }
button.secondary { background:var(--surface-2); }
button.danger { background:var(--danger); color:white; border-color:var(--danger); }
button.danger-soft { background:var(--danger-bg); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
button.small { padding:.35rem .55rem; font-size:.88rem; }
.icon-button { padding:.2rem .5rem; border:none; background:transparent; font-size:1.5rem; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); padding:.55rem .65rem; }
select[multiple] { min-height:5.6rem; }
textarea { min-height:8rem; resize:vertical; }
label { display:grid; gap:.35rem; font-weight:600; }
code { padding:.12rem .3rem; border-radius:4px; background:var(--surface-2); overflow-wrap:anywhere; }
[hidden] { display:none !important; }
.muted { color:var(--muted); }
.error { color:var(--danger); }
.notice { padding:.75rem; background:var(--surface-2); border-radius:7px; line-height:1.45; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.login-card { width:min(420px, 100%); display:grid; gap:1rem; padding:2rem; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
.login-card h1 { margin:0; font-size:1.8rem; }
.brand-mark { display:grid; place-items:center; width:58px; height:58px; border-radius:14px; background:var(--accent); color:white; font-weight:800; letter-spacing:.05em; }
.brand-mark.small { width:34px; height:34px; border-radius:8px; font-size:.8rem; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) 1fr; grid-template-rows:58px 1fr; }
.topbar { position:sticky; top:0; z-index:20; grid-column:1/-1; display:flex; align-items:center; gap:.75rem; padding:0 1rem; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:.65rem; font-size:1.05rem; }
.version { color:var(--muted); font-size:.8rem; }
.topbar-spacer, .sidebar-spacer { flex:1; }
.user-label { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-pill { padding:.25rem .55rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.status-pill.online { color:var(--success); background:color-mix(in srgb, var(--success) 13%, transparent); }
.status-pill.offline { color:var(--danger); background:var(--danger-bg); }
.sidebar { position:sticky; top:58px; height:calc(100vh - 58px); display:flex; flex-direction:column; gap:.25rem; padding:.75rem; background:var(--surface); border-right:1px solid var(--border); z-index:15; }
.nav-item { display:flex; align-items:center; gap:.75rem; border:none; text-align:left; background:transparent; padding:.75rem; }
.nav-item.active { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent); font-weight:700; }
.content { min-width:0; padding:1.2rem; }
.view { display:none; }
.view.active { display:block; }
.view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.view-header h1 { margin:0 0 .25rem; font-size:1.65rem; }
.view-header p { margin:0; }
.toolbar, .filter-bar, .bulk-bar, .pagination, .action-grid, .subnav { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.filter-bar { margin-bottom:.75rem; }
.filter-bar > * { flex:1 1 150px; }
.inline-label { display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.inline-label input { width:110px; }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1rem; }
.summary-card { padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,0,0,.03); }
.summary-card strong { display:block; font-size:1.7rem; margin-top:.25rem; }
.panel-grid { display:grid; gap:1rem; margin-bottom:1rem; }
.panel-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:0 2px 12px rgba(0,0,0,.03); min-width:0; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.panel h2, .detail-panel h2 { margin:0; font-size:1.1rem; }
.action-grid { align-items:stretch; }
.action-grid button { flex:1 1 180px; }
.detail-list { display:grid; grid-template-columns:max-content 1fr; gap:.4rem .8rem; margin:0; }
.detail-list dt { color:var(--muted); }
.detail-list dd { margin:0; overflow-wrap:anywhere; }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th, td { padding:.58rem .65rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
th { position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:.82rem; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
tbody tr.selected { background:color-mix(in srgb, var(--accent) 15%, transparent); }
tbody tr:last-child td { border-bottom:0; }
.sort-button { border:none; background:transparent; padding:0; font-weight:700; }
.bulk-bar { margin-bottom:.75rem; padding:.55rem; background:var(--surface-2); border-radius:8px; }
.pagination { justify-content:center; margin-top:.75rem; }
.workspace { display:grid; grid-template-columns:minmax(0,3fr) minmax(330px,2fr); gap:1rem; min-height:620px; }
.workspace-main { min-width:0; }
.detail-panel { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:auto; max-height:calc(100vh - 145px); position:sticky; top:75px; align-self:start; }
.detail-panel.compact { max-height:none; }
.detail-image { width:100%; max-height:430px; object-fit:contain; background:#111; border-radius:8px; margin:.8rem 0; }
.detail-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin:.75rem 0; }
.badges { display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0; }
.badge { padding:.2rem .45rem; border-radius:999px; background:var(--surface-2); font-size:.75rem; font-weight:700; }
.badge.good { color:var(--success); }
.badge.warn { color:var(--warning); }
.badge.bad { color:var(--danger); }
.reading { font-size:2rem; font-weight:750; margin:.25rem 0; }
.empty-state { text-align:center; color:var(--muted); padding:3rem 1rem; }
pre.json { white-space:pre-wrap; overflow-wrap:anywhere; max-height:300px; overflow:auto; padding:.75rem; border-radius:7px; background:var(--surface-2); font-size:.78rem; }
.chart-layout { display:grid; grid-template-columns:minmax(0,4fr) minmax(300px,1fr); gap:1rem; }
.chart-panel { height:clamp(480px, 70vh, 760px); min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#history-chart { display:block; width:100%; height:100%; min-width:0; min-height:0; flex:1 1 auto; background:var(--surface); touch-action:none; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.75rem; padding-top:.5rem; }
.legend-item { display:flex; align-items:center; gap:.35rem; }
.legend-swatch { width:12px; height:12px; border-radius:3px; }
.subnav { margin-bottom:.8rem; border-bottom:1px solid var(--border); }
.subnav button { border:none; border-radius:0; background:transparent; border-bottom:3px solid transparent; }
.subnav button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.admin-content { min-height:520px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.form-grid .full { grid-column:1/-1; }
.modal { width:min(760px,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.modal form > header, .modal form > footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-bottom:1px solid var(--border); }
.modal form > footer { border-top:1px solid var(--border); border-bottom:0; justify-content:flex-end; }
.modal h2 { margin:0; }
.modal-body { padding:1rem; overflow:auto; max-height:calc(100vh - 180px); }
.loading-bar { position:fixed; z-index:100; left:0; right:0; top:0; height:3px; overflow:hidden; background:transparent; }
.loading-bar div { width:35%; height:100%; background:var(--accent); animation:loading 1.1s ease-in-out infinite; }
@keyframes loading { from{transform:translateX(-120%)} to{transform:translateX(400%)} }
.toast-region { position:fixed; z-index:110; right:1rem; bottom:1rem; display:grid; gap:.5rem; width:min(420px,calc(100vw - 2rem)); }
.toast { padding:.8rem 1rem; border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--surface); border-radius:8px; box-shadow:var(--shadow); }
.toast.error { border-left-color:var(--danger); color:var(--text); }
.toast.success { border-left-color:var(--success); }
.progress-track { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; min-width:120px; }
.progress-track span { display:block; height:100%; background:var(--accent); }
.mobile-only { display:none; }
@media (max-width:1100px) { .workspace, .chart-layout { grid-template-columns:1fr; } .detail-panel { position:static; max-height:none; } .panel-grid.two { grid-template-columns:1fr; } }
@media (max-width:760px) {
  :root { --sidebar:260px; }
  .app-shell { grid-template-columns:1fr; }
  .mobile-only { display:block; }
  .sidebar { position:fixed; left:0; transform:translateX(-105%); width:var(--sidebar); box-shadow:var(--shadow); transition:transform .18s ease; }
  .sidebar.open { transform:translateX(0); }
  .content { padding:.8rem; }
  .brand strong { display:none; }
  .user-label { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
}


/* Scope-aware controls are also hidden when they are created after login. */
body[data-admin="false"] .admin-only,
body[data-review="false"] .review-only { display:none !important; }

.button-link { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; text-decoration:none; border:1px solid var(--border); border-radius:7px; padding:.55rem .8rem; background:var(--surface); color:var(--text); }
.button-link:hover { border-color:var(--accent); }
.section-header, .admin-toolbar, .input-actions, .maintenance-actions { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.admin-toolbar { margin-bottom:.85rem; }
.config-editor { min-height:420px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.84rem; }
.input-actions { align-items:flex-end; }
.input-actions > :first-child { flex:1 1 260px; }
.check-label { display:flex; align-items:center; gap:.5rem; font-weight:500; }
.check-label input, .inline-label input[type="checkbox"] { width:auto; }
.ordered-row { display:grid; grid-template-columns:2rem minmax(150px,1fr) auto auto; gap:.6rem; align-items:center; padding:.55rem; border-bottom:1px solid var(--border); }
.ordered-row:last-child { border-bottom:0; }
.sequence-number, .session-sequence { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:999px; background:var(--surface-2); color:var(--muted); font-weight:700; }
.profile-items, .session-item-list, .reason-list { display:grid; gap:.45rem; }
.session-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; width:100%; text-align:left; }
.session-item.active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.session-item-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.capture-item-detail { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.reason-list { margin:.6rem 0; padding-left:1.2rem; }
.roi-picker { display:grid; gap:.75rem; }
.roi-canvas { width:100%; max-height:65vh; object-fit:contain; background:#111; border:1px solid var(--border); border-radius:8px; touch-action:none; cursor:crosshair; }
.maintenance-output { min-height:180px; max-height:420px; overflow:auto; }
.token-value { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; align-items:start; }
.token-value code { padding:.65rem; user-select:all; }
.job-progress { width:min(220px, 25vw); min-width:100px; }
progress { width:100%; height:.7rem; accent-color:var(--accent); }
.legend-swatch.swatch-0 { background:#1769e0; }
.legend-swatch.swatch-1 { background:#d64545; }
.legend-swatch.swatch-2 { background:#14835b; }
.legend-swatch.swatch-3 { background:#9b51c4; }
.legend-swatch.swatch-4 { background:#d07800; }
.legend-swatch.swatch-5 { background:#0089a7; }
.legend-swatch.swatch-6 { background:#aa496e; }
.legend-swatch.swatch-7 { background:#586c80; }

@media (max-width:760px) {
  .ordered-row { grid-template-columns:2rem minmax(0,1fr); }
  .ordered-row > :nth-child(n+3) { grid-column:2; }
  .token-value { grid-template-columns:1fr; }
  .job-progress { width:140px; }
}

.photo-zoom {
  position: relative;
  width: 100%;
  height: clamp(260px, 42vh, 520px);
  margin: .8rem 0;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
}
.photo-zoom.zoomed { cursor: grab; }
.photo-zoom.zoomed:active { cursor: grabbing; }
.photo-zoom-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  transition: transform 80ms linear;
  pointer-events: none;
}
.photo-zoom-controls {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  display: flex;
  gap: .35rem;
  padding: .3rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.photo-zoom-controls button { min-width: 2.35rem; }

/* Permission-dependent controls can be created after login while rendering a
   detail panel. Enforce roles in CSS as well as the initial JS pass. */
body[data-admin="false"] .admin-only,
body[data-review="false"] .review-only {
  display: none !important;
}