/* Indigo Mono by @serafimcloud, exact public 21st color tokens.
   Source: https://21st.dev/@serafimcloud/themes/indigo-mono
   Namespaced to avoid legacy --muted/--accent semantic collisions.
   NVR health uses an explicit green semantic accent requested by the owner. */
:root {
  color-scheme:dark;
  --connection-online:#4ade80;
  --theme-card:oklch(0.2103 0 267.51);
  --theme-ring:oklch(0.5144 0.1605 267.44);
  --theme-input:oklch(0.32 0 0);
  --theme-muted:oklch(0.23 0 0);
  --theme-accent:oklch(0.32 0 0);
  --theme-border:oklch(0.26 0 0);
  --theme-chart-1:oklch(0.9214 0.0248 257.65);
  --theme-chart-2:oklch(0.7597 0.0804 267.01);
  --theme-chart-3:oklch(0.6083 0.1247 272.72);
  --theme-chart-4:oklch(0.5144 0.1605 267.44);
  --theme-chart-5:oklch(0.2571 0.1161 272.24);
  --theme-popover:oklch(0.2103 0 267.51);
  --theme-primary:oklch(0.5144 0.1605 267.44);
  --theme-sidebar:oklch(0.2103 0 267.51);
  --theme-secondary:oklch(0.25 0 0);
  --theme-background:oklch(0 0 0);
  --theme-foreground:oklch(1.00 0 0);
  --theme-destructive:oklch(0.704 0.191 22.216);
  --theme-shadow-color:oklch(0.2571 0.1161 272.24);
  --theme-sidebar-ring:oklch(0.5144 0.1605 267.44);
  --theme-sidebar-accent:oklch(0.32 0 0);
  --theme-sidebar-border:oklch(0.26 0 0);
  --theme-card-foreground:oklch(0.9461 0 0);
  --theme-sidebar-primary:oklch(0.5144 0.1605 267.44);
  --theme-muted-foreground:oklch(0.72 0 0);
  --theme-accent-foreground:oklch(0.9214 0.0248 257.65);
  --theme-popover-foreground:oklch(1.00 0 0);
  --theme-primary-foreground:oklch(0.97 0.014 254.604);
  --theme-sidebar-foreground:oklch(1.00 0 0);
  --theme-secondary-foreground:oklch(0.94 0 0);
  --theme-destructive-foreground:oklch(0.97 0.014 254.604);
  --theme-sidebar-accent-foreground:oklch(0.9214 0.0248 257.65);
  --theme-sidebar-primary-foreground:oklch(0.97 0.014 254.604);
}
:root[data-theme="light"] {
  color-scheme:light;
  --connection-online:#166534;
  --theme-card:oklch(1.00 0 267.51);
  --theme-ring:oklch(0.5144 0.1605 267.44);
  --theme-input:oklch(0.94 0 0);
  --theme-muted:oklch(0.97 0 0);
  --theme-accent:oklch(0.9214 0.0248 257.65);
  --theme-border:oklch(0.92 0 0);
  --theme-chart-1:oklch(0.9214 0.0248 257.65);
  --theme-chart-2:oklch(0.7597 0.0804 267.01);
  --theme-chart-3:oklch(0.6083 0.1247 272.72);
  --theme-chart-4:oklch(0.5144 0.1605 267.44);
  --theme-chart-5:oklch(0.2571 0.1161 272.24);
  --theme-popover:oklch(1.00 0 0);
  --theme-primary:oklch(0.5144 0.1605 267.44);
  --theme-sidebar:oklch(1.00 0 267.51);
  --theme-secondary:oklch(0.94 0 0);
  --theme-background:oklch(0.9851 0 0);
  --theme-foreground:oklch(0 0 0);
  --theme-destructive:oklch(0.58 0.22 27);
  --theme-shadow-color:oklch(0.2571 0.1161 272.24);
  --theme-sidebar-ring:oklch(0.5144 0.1605 267.44);
  --theme-sidebar-accent:oklch(0.9214 0.0248 257.65);
  --theme-sidebar-border:oklch(0.92 0 0);
  --theme-card-foreground:oklch(0.2103 0 267.51);
  --theme-sidebar-primary:oklch(0.5144 0.1605 267.44);
  --theme-muted-foreground:oklch(0.44 0 0);
  --theme-accent-foreground:oklch(0.2571 0.1161 272.24);
  --theme-popover-foreground:oklch(0 0 0);
  --theme-primary-foreground:oklch(0.97 0.014 254.604);
  --theme-sidebar-foreground:oklch(0 0 0);
  --theme-secondary-foreground:oklch(0.25 0 0);
  --theme-destructive-foreground:oklch(0.97 0.014 254.604);
  --theme-sidebar-accent-foreground:oklch(0.2571 0.1161 272.24);
  --theme-sidebar-primary-foreground:oklch(0.97 0.014 254.604);
}
/* Shared mappings cover the current panels and retained legacy screens. */
:root {
  --bg:var(--theme-background); --card:var(--theme-card); --fg:var(--theme-foreground);
  --muted:var(--theme-muted-foreground); --line:var(--theme-border);
  --accent:var(--theme-primary); --accent-bg:var(--theme-accent);
  --ok:var(--theme-foreground); --ok-bg:var(--theme-muted);
  --warn:var(--theme-foreground); --warn-bg:var(--theme-accent);
  --err:var(--theme-destructive); --err-bg:var(--theme-muted);
  --surface:var(--theme-card); --surface-soft:var(--theme-secondary);
  --canvas:var(--theme-background); --text:var(--theme-foreground);
  --subtle:var(--theme-muted-foreground); --border:var(--theme-border);
  --brand:var(--theme-primary); --on-brand:var(--theme-primary-foreground);
  --focus:var(--theme-ring); --success:var(--theme-foreground);
  --danger:var(--theme-destructive); --warning:var(--theme-foreground); --radius:12px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.55 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); }
header h1 { font-size:18px; margin:0; }
.session { display:flex; gap:12px; align-items:center; color:var(--muted); }
.session form { margin:0; }
main { max-width:760px; margin:0 auto; padding:16px; display:grid; gap:16px; }
.layout { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start; }
.sidenav { position:sticky; top:0; display:flex; flex-direction:column; gap:2px; min-height:calc(100vh - 57px); padding:16px 12px; background:var(--card); border-right:1px solid var(--line); }
.sidenav a { display:block; padding:8px 12px; border-radius:6px; color:var(--fg); text-decoration:none; }
.sidenav a:hover { background:var(--bg); }
.sidenav a[aria-current="page"] { background:var(--accent-bg); color:var(--theme-accent-foreground); font-weight:600; }
.theme-switch { margin-top:auto; display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.theme-switch button { flex:1; padding:6px 10px; font-size:14px; font-weight:600; background:transparent; color:var(--muted); border-radius:5px; }
.theme-switch button[aria-pressed="true"] { background:var(--card); color:var(--fg); box-shadow:0 0 0 1px var(--line); }
.layout > .content { max-width:820px; width:100%; margin:0; padding:24px; display:grid; gap:16px; }
.view[hidden] { display:none; }
@media (max-width:720px) {
  .layout { grid-template-columns:1fr; }
  .sidenav { position:static; flex-direction:row; flex-wrap:wrap; align-items:center; min-height:0; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); }
  .theme-switch { margin:0 0 0 auto; }
  .layout > .content { padding:16px; }
}
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; }
.card h2 { font-size:16px; margin:0 0 12px; }
.narrow { max-width:380px; margin:10vh auto; }
label { display:block; margin:0 0 10px; font-weight:600; }
input, select { display:block; width:100%; margin-top:4px; padding:8px 10px; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button, .button { display:inline-block; padding:8px 16px; font:inherit; font-weight:600; border:0; border-radius:6px; background:var(--accent); color:var(--on-brand); cursor:pointer; text-decoration:none; }
button.secondary, .button.secondary { background:transparent; color:var(--theme-accent-foreground); border:1px solid var(--accent); }
button.link { background:none; color:var(--theme-accent-foreground); padding:0; }
button:disabled, .button.disabled { opacity:.45; cursor:not-allowed; pointer-events:auto; }
.grid { display:grid; grid-template-columns:110px 1fr; gap:4px 12px; margin:0 0 12px; }
.grid dt { color:var(--muted); } .grid dd { margin:0; word-break:break-all; }
#agent-reason { word-break:normal; overflow-wrap:anywhere; }
.note { color:var(--muted); font-size:14px; }
.warn { color:var(--warn); font-size:14px; }
.error { color:var(--err); } .ok { color:var(--ok); }
.steps { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; }
.step { border:1px solid var(--line); border-radius:10px; padding:16px; }
.step.current { border:2px solid var(--accent); padding:15px; }
.step[data-state="waiting"] { opacity:.6; }
.step-head { display:flex; gap:12px; align-items:flex-start; }
.step-head h3 { margin:3px 0 2px; font-size:16px; }
.step-num { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-weight:700; background:var(--line); color:var(--fg); }
.step.current .step-num { background:var(--accent); color:var(--on-brand); }
.step[data-state="done"] .step-num { background:var(--ok); color:var(--card); font-size:0; }
.step[data-state="done"] .step-num::after { content:"\2713"; font-size:18px; }
.step[data-state="error"] .step-num { background:var(--err); color:var(--card); }
.step-status { margin:0; color:var(--muted); }
.step[data-state="done"] .step-status { color:var(--ok); }
.step[data-state="busy"] .step-status { color:var(--warn); }
.step[data-state="error"] .step-status { color:var(--err); }
.step-body { margin:12px 0 0 44px; }
.step-body > * + * { margin-top:10px; }
#upload-result:empty, #target-result:empty { display:none; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.file-btn { display:inline-block; margin:0; }
.visually-hidden:focus-visible + .file-btn { outline:2px solid var(--accent); outline-offset:2px; }
.file-name { flex:1 1 160px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.button.big { padding:12px 28px; font-size:17px; }
details summary { margin-bottom:8px; color:var(--theme-accent-foreground); cursor:pointer; }
@media (max-width:720px) { .step-body { margin-left:0; } .step-body .grid { grid-template-columns:72px 1fr; } }
.status-panel { margin:0 0 20px; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.panel-label { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.steps-intro { padding-top:16px; border-top:1px solid var(--line); }
.steps-intro .note { margin:0; }
.statusbar { display:flex; flex-wrap:wrap; gap:8px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); font-size:15px; }
.pill strong { font-weight:700; }
.pill .dot { width:10px; height:10px; border-radius:50%; background:var(--muted); }
.pill[data-tone="ok"] { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.pill[data-tone="ok"] .dot { background:var(--ok); }
.pill[data-tone="busy"] { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.pill[data-tone="busy"] .dot { background:var(--warn); }
.pill[data-tone="error"] { background:var(--err-bg); border-color:var(--err); color:var(--err); }
.pill[data-tone="error"] .dot { background:var(--err); }

/* Current role-separated portal. 21st public status/sign-in patterns, adapted
   to the existing server-rendered HTML rather than adding a component runtime. */
.app-page { background:var(--canvas); color:var(--text); font-size:15px; line-height:1.5; min-width:280px; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; }
.app-page h1,.app-page h2,.app-page h3,.app-page p { margin:0; }
.app-page h1 { font-size:32px; line-height:1.2; letter-spacing:-.035em; font-weight:650; }
.app-page h2 { font-size:18px; letter-spacing:-.02em; font-weight:650; }
.app-page h3 { font-size:15px; font-weight:650; }
.app-page button,.app-page input,.app-page select { font-family:inherit; }
.app-page button,.app-page a { -webkit-tap-highlight-color:transparent; }
.app-page button:focus-visible,.app-page a:focus-visible,.app-page input:focus-visible,.app-page select:focus-visible,.app-page summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-page input,.app-page select { height:48px; min-width:0; margin:0; padding:0 13px; border:1px solid var(--border); border-radius:8px; background:var(--canvas); color:var(--text); font-size:16px; line-height:1.5; box-shadow:none; }
.app-page input::placeholder { color:var(--subtle); opacity:1; }
.app-page input[readonly] { background:var(--surface-soft); color:var(--subtle); }
.app-page input:disabled,.app-page select:disabled { opacity:.6; }
.app-page label { margin:0; }
.app-page svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.app-page code { font-size:.92em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--text); }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-150%); z-index:5; padding:12px 18px; background:var(--surface); color:var(--text); border:1px solid var(--brand); border-radius:8px; }
.skip-link:focus { transform:none; }
.app-header { display:block; padding:0 28px; background:var(--canvas); border-bottom:1px solid var(--border); }
.app-header-inner { max-width:1120px; min-height:80px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--text); text-decoration:none; font-weight:750; font-size:19px; letter-spacing:-.025em; flex:none; }
.brand-caption { display:block; color:var(--subtle); font-size:11px; font-weight:500; letter-spacing:.01em; line-height:1.25; margin-top:1px; }
.brand-mark { width:33px; height:33px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; }
.brand-mark span { background:var(--brand); border-radius:4px; }
.brand-mark span:nth-child(2),.brand-mark span:nth-child(3) { opacity:.42; }
.header-actions { display:flex; align-items:center; gap:12px; min-width:0; }
.account-label { color:var(--subtle); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.logout-form { margin:0; }
.app-page .primary-button,.app-page .secondary-button,.app-page .quiet-button,.app-page .text-button,.app-page .icon-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; border-radius:8px; font-size:14px; line-height:1.4; font-weight:600; padding:10px 16px; cursor:pointer; text-decoration:none; white-space:normal; transition:background-color 120ms ease,border-color 120ms ease; }
.app-page .primary-button { background:var(--brand); color:var(--on-brand); border:1px solid var(--brand); }
.app-page .primary-button:hover:not(:disabled):not(.disabled) { filter:brightness(.94); }
.app-page .secondary-button { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.app-page .secondary-button:hover:not(:disabled):not(.disabled),.app-page .quiet-button:hover:not(:disabled),.app-page .icon-button:hover { background:var(--surface-soft); border-color:var(--subtle); }
.app-page .quiet-button,.app-page .icon-button { background:transparent; color:var(--subtle); border:1px solid transparent; }
.app-page .text-button { background:transparent; border:0; color:var(--theme-accent-foreground); padding-inline:0; }
.app-page .icon-button { width:44px; padding:10px; flex:none; }
.app-page button:disabled,.app-page .disabled { cursor:not-allowed; opacity:.5; }
.app-page .disabled { pointer-events:auto; }
.eyebrow,.detail-label { display:block; font-size:10px; line-height:1.4; font-weight:650; letter-spacing:.12em; color:var(--subtle); }
.eyebrow { margin-bottom:12px; }
.intro-copy { color:var(--subtle); margin-top:10px !important; font-size:14px; line-height:1.6; }
.status-badge { display:inline-flex; align-items:center; gap:7px; flex:none; padding:5px 9px; border:1px solid var(--border); border-radius:6px; color:var(--subtle); font-size:12px; line-height:1.4; font-weight:550; }
.status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.status-badge[data-tone="ok"] { color:var(--success); background:color-mix(in srgb,var(--success) 7%,transparent); border-color:color-mix(in srgb,var(--success) 20%,transparent); }
#connection-badge[data-tone="ok"],#access-badge[data-tone="ok"] { color:var(--connection-online); background:color-mix(in srgb,var(--connection-online) 10%,transparent); border-color:color-mix(in srgb,var(--connection-online) 35%,transparent); }
.status-badge[data-tone="warning"] { color:var(--warning); background:color-mix(in srgb,var(--warning) 7%,transparent); border-color:color-mix(in srgb,var(--warning) 20%,transparent); }
.status-badge[data-tone="error"] { color:var(--text); background:color-mix(in srgb,var(--danger) 7%,transparent); border-color:color-mix(in srgb,var(--danger) 20%,transparent); }
.usage-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid var(--border); border-radius:6px; color:var(--subtle); font-size:12px; line-height:1.4; font-weight:500; }
.app-page .usage-badge svg { width:14px; height:14px; }
.usage-badge[data-state="active"] { color:var(--text); background:color-mix(in srgb,var(--brand) 12%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 45%,var(--border)); }
.usage-badge[data-state="active"] svg { color:var(--theme-accent-foreground); }
.usage-badge[data-state="idle"] { background:var(--surface-soft); }
.inline-message { margin-top:14px !important; padding:12px 14px; border:1px solid color-mix(in srgb,var(--danger) 25%,transparent); border-radius:8px; background:color-mix(in srgb,var(--danger) 6%,transparent); color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.inline-message[data-tone="ok"] { color:var(--success); background:color-mix(in srgb,var(--success) 6%,transparent); border-color:color-mix(in srgb,var(--success) 25%,transparent); }
.inline-message[data-tone="neutral"] { color:var(--subtle); border-color:var(--border); background:var(--surface-soft); }
.inline-message:empty { display:none; }
.field-label { display:block; color:var(--text); font-weight:550; font-size:13px; margin-bottom:8px !important; }
.auth-page { display:flex; flex-direction:column; }
.auth-main { display:flex; flex:1; width:100%; max-width:none; padding:32px 24px; margin:0; flex-direction:column; align-items:center; justify-content:center; }
.auth-panel { width:100%; max-width:424px; padding:36px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.auth-panel h1 { font-size:30px; }
.auth-form { display:flex; flex-direction:column; margin-top:28px; }
.auth-form input { margin-bottom:20px; }
.auth-form .primary-button { margin-top:6px; width:100%; min-height:48px; padding-inline:16px; }
.auth-panel > .error { font-size:13px; margin-top:18px; padding:12px; border-radius:8px; background:color-mix(in srgb,var(--danger) 7%,transparent); color:var(--text); border:1px solid var(--danger); }
.app-footer { display:flex; justify-content:space-between; gap:12px; padding:22px 40px; color:var(--subtle); font-size:11px; }
.viewer-main { display:flex; flex-direction:column; width:100%; max-width:620px; margin:0 auto; padding:64px 24px 40px; gap:18px; }
.admin-return { align-self:flex-start; display:inline-flex; min-height:44px; align-items:center; color:var(--subtle); text-decoration:none; font-size:13px; }
.admin-return::before { content:"\2190"; margin-right:8px; }
.access-panel { border:1px solid var(--border); border-radius:var(--radius); padding:32px; background:var(--surface); }
.access-topline { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:32px; }
.access-topline .eyebrow { margin:0; }
.access-statuses { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.device-symbol { display:grid; place-items:center; width:52px; height:52px; background:var(--surface-soft); border:1px solid var(--border); border-radius:12px; color:var(--theme-accent-foreground); margin-bottom:24px; }
.device-symbol svg { width:26px; height:26px; }
.access-description { color:var(--subtle); line-height:1.7; margin-top:12px !important; min-height:48px; font-size:14px; }
.app-page .open-device { display:flex; width:100%; min-height:52px; padding:14px 18px; margin-top:26px; justify-content:space-between; font-size:15px; }
.access-help { margin-top:12px !important; color:var(--subtle); font-size:12px; line-height:1.6; }
.access-session { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--border); margin-top:28px; padding-top:24px; }
.countdown { display:block; font-size:28px; font-weight:500; line-height:1.3; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:6px; }
.countdown[data-urgent="true"] { color:var(--warning); }
.session-caption { color:var(--subtle); font-size:12px; line-height:1.7; text-align:right; }
.viewer-footnote { color:var(--subtle); font-size:12px; text-align:center; }
.admin-main { display:block; max-width:1176px; width:100%; margin:0 auto; padding:38px 28px 64px; }
.page-heading { display:flex; gap:24px; align-items:center; justify-content:space-between; margin-bottom:30px; }
.page-heading > div { min-width:0; }
.page-heading .eyebrow { margin-bottom:10px; }
.connection-strip { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"device status actions"; align-items:center; gap:18px; padding:20px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.connection-primary { grid-area:device; display:flex; gap:14px; align-items:center; min-width:0; }
.device-mini { width:40px; height:40px; display:grid; place-items:center; color:var(--subtle); border:1px solid var(--border); border-radius:9px; flex:none; }
.connection-value { display:block; font-size:14px; font-weight:550; margin-top:4px; overflow-wrap:anywhere; }
.connection-meta { grid-area:status; min-width:0; justify-self:center; }
.connection-statuses { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:480px; }
.connection-statuses .status-badge,.connection-statuses .usage-badge { min-height:34px; justify-content:center; padding:7px 10px; border-radius:8px; font-weight:500; text-align:center; }
.connection-statuses .usage-badge { flex:0 1 auto; }
.connection-actions { grid-area:actions; display:flex; align-items:center; justify-self:end; gap:8px; }
.section-nav { display:flex; gap:26px; align-items:center; margin-top:26px; border-bottom:1px solid var(--border); }
.section-nav a { display:inline-flex; align-items:center; min-height:52px; border-bottom:2px solid transparent; color:var(--subtle); text-decoration:none; font-size:13px; font-weight:550; white-space:nowrap; }
.section-nav a[aria-current] { border-bottom-color:var(--brand); color:var(--text); }
.admin-session { margin-left:auto; color:var(--subtle); font-size:12px; white-space:nowrap; }
.admin-session strong { color:var(--text); margin-left:6px; font-variant-numeric:tabular-nums; font-weight:500; }
.admin-section { scroll-margin-top:24px; margin-top:32px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-heading p { margin-top:5px; color:var(--subtle); font-size:12px; line-height:1.7; }
.count-label { display:inline-flex; min-width:22px; height:22px; padding:0 6px; align-items:center; justify-content:center; background:var(--surface-soft); border:1px solid var(--border); border-radius:6px; font-size:11px; color:var(--subtle); vertical-align:middle; margin-left:6px; font-weight:500; }
.account-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.account-row { display:grid; grid-template-columns:minmax(140px,1.5fr) minmax(100px,.8fr) minmax(130px,1fr) minmax(120px,1fr) 92px; gap:20px; align-items:center; padding:18px 20px; }
.account-row + .account-row { border-top:1px solid var(--border); }
.account-row > div { min-width:0; }
.account-head { padding-block:11px; color:var(--subtle); font-size:11px; background:var(--surface-soft); }
.account-name { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.account-secondary { display:block; margin-top:4px; font-size:11px; color:var(--subtle); overflow-wrap:anywhere; }
.account-value { font-size:12px; }
.mobile-field-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-page .end-access, .app-page .delete-event { color:var(--danger); border:1px solid var(--border); background:transparent; font-size:12px; min-height:44px; padding:10px; border-radius:7px; white-space:nowrap; }
.app-page .end-access:hover:not(:disabled), .app-page .delete-event:hover:not(:disabled) { color:var(--text); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 6%,transparent); }
.account-error { grid-column:1/-1; margin-top:0 !important; }
.empty-state { padding:34px 20px; text-align:center; color:var(--subtle); font-size:13px; }
.empty-state strong { color:var(--text); display:block; font-size:14px; margin-bottom:6px; font-weight:550; }
.activity-list { margin:0; padding:0; list-style:none; border:1px solid var(--border); border-radius:10px; background:var(--surface); overflow:hidden; }
.activity-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:16px 20px; }
.activity-row + .activity-row { border-top:1px solid var(--border); }
.activity-symbol { width:26px; height:26px; display:grid; place-items:center; background:var(--surface-soft); border:1px solid var(--border); border-radius:50%; color:var(--subtle); font-size:12px; }
.activity-symbol[data-tone="ok"] { color:var(--success); }
.activity-symbol[data-tone="error"] { color:var(--danger); }
.activity-title { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.activity-title strong { font-weight:600; }
.activity-detail { display:block; font-size:11px; color:var(--subtle); margin-top:4px; overflow-wrap:anywhere; }
.activity-heading-actions, .activity-actions { display:flex; align-items:center; gap:14px; flex:none; }
.event-error { grid-column:2/-1; margin-top:0 !important; }
.activity-time { font-size:11px; color:var(--subtle); white-space:nowrap; padding-top:3px; font-variant-numeric:tabular-nums; }
.app-page .load-more { display:flex; margin:16px auto 0; font-size:12px; }
.telegram-settings { margin:0 0 18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.telegram-settings > summary { display:grid; grid-template-columns:36px minmax(0,1fr) auto 18px; align-items:center; gap:12px; list-style:none; min-height:76px; padding:16px 22px; color:var(--text); cursor:pointer; }
.telegram-settings > summary::-webkit-details-marker { display:none; }
.telegram-symbol { display:grid; place-items:center; width:36px; height:36px; color:var(--theme-accent-foreground); border:1px solid var(--border); border-radius:8px; }
.telegram-symbol svg { width:18px; height:18px; }
.telegram-summary-copy { min-width:0; margin-right:auto; }
.telegram-summary-copy strong { display:block; font-size:14px; font-weight:600; }
.telegram-summary-copy > span { display:block; font-size:12px; color:var(--subtle); margin-top:4px; overflow-wrap:anywhere; }
.telegram-settings > summary > svg { width:18px; height:18px; flex:none; }
.telegram-settings[open] > summary > svg { transform:rotate(180deg); }
.telegram-settings-content { border-top:1px solid var(--border); }
.field-help { color:var(--subtle); font-size:12px; line-height:1.6; }
.telegram-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.telegram-section { min-width:0; padding:22px; }
.telegram-section + .telegram-section { border-left:1px solid var(--border); }
.telegram-section-heading { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; min-height:24px; margin-bottom:18px; }
.telegram-section-heading h3 { font-size:13px; }
.telegram-field-state { font-size:11px; color:var(--subtle); overflow-wrap:anywhere; }
.telegram-fields .field { min-width:0; }
.telegram-fields .field input { width:100%; }
.field-help { margin-top:8px !important; }
.app-page textarea { display:block; resize:vertical; width:100%; min-height:104px; min-width:0; margin:0; padding:10px 13px; border:1px solid var(--border); border-radius:8px; background:var(--canvas); color:var(--text); font:inherit; font-size:16px; line-height:1.5; box-shadow:none; }
.app-page textarea::placeholder { color:var(--subtle); opacity:1; }
.app-page textarea:disabled { opacity:.6; }
.app-page textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-page #telegram-users { min-height:78px; }
.telegram-create-link { margin-top:8px !important; color:var(--subtle); font-size:12px; line-height:1.6; }
.telegram-create-link a { display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-underline-offset:3px; }
.telegram-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding-top:16px; border-top:1px solid var(--border); margin-top:14px !important; cursor:pointer; }
.telegram-toggle-copy { min-width:0; }
.telegram-toggle-copy strong { display:block; font-size:13px; font-weight:550; }
.telegram-toggle-copy > span { display:block; margin-top:4px; color:var(--subtle); font-size:12px; line-height:1.6; font-weight:400; }
.telegram-switch { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; }
.app-page .telegram-switch input { position:absolute; inset:0; width:44px; height:44px; padding:0; margin:0; opacity:0; cursor:pointer; z-index:1; }
.telegram-switch-track { width:40px; height:24px; background:var(--theme-accent); border:1px solid var(--subtle); border-radius:14px; position:relative; }
.telegram-switch-track::before { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; background:var(--text); border-radius:50%; }
.telegram-switch input:checked + .telegram-switch-track { background:var(--brand); border-color:var(--brand); }
.telegram-switch input:checked + .telegram-switch-track::before { left:19px; background:var(--theme-primary-foreground); }
.telegram-switch input:focus-visible + .telegram-switch-track { outline:3px solid var(--focus); outline-offset:3px; }
.telegram-switch input:disabled + .telegram-switch-track { opacity:.5; }
.telegram-field-error { margin-top:8px !important; color:var(--danger); font-size:12px; line-height:1.6; }
.app-page .telegram-fields [aria-invalid="true"] { border-color:var(--danger); }
.telegram-access-note { margin-top:14px !important; padding-left:10px; border-left:2px solid var(--border); color:var(--subtle); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.telegram-access-note[data-warning="true"] { border-color:var(--danger); color:var(--text); }
.telegram-help { margin-top:8px; }
.telegram-help > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; list-style:none; color:var(--text); font-size:12px; cursor:pointer; }
.telegram-help > summary::-webkit-details-marker { display:none; }
.telegram-help > summary svg { width:14px; height:14px; }
.telegram-help[open] > summary svg { transform:rotate(90deg); }
.telegram-help ol { margin:0; padding:0 0 0 18px; color:var(--subtle); font-size:12px; line-height:1.7; }
.telegram-help li + li { margin-top:6px; }
.telegram-help strong { color:var(--text); font-weight:500; }
.telegram-bot-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:6px; color:var(--theme-accent-foreground); font-size:12px; text-underline-offset:3px; }
.telegram-bot-link svg { width:14px; height:14px; }
.telegram-form-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 22px; border-top:1px solid var(--border); }
.telegram-save-state { color:var(--subtle); font-size:12px; }
.telegram-save-state[data-dirty="true"] { color:var(--theme-accent-foreground); }
.telegram-form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.telegram-form-actions button { font-size:12px; }
.telegram-settings-content > .inline-message { margin:0 22px 18px !important; }
.app-footer { max-width:1176px; margin:0 auto; padding:0 28px 24px; }
@media (max-width:1100px) { .connection-strip { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"device actions" "status status"; } .connection-meta { width:100%; } .connection-statuses { max-width:none; } }
@media (max-width:900px) { .account-row { gap:14px; grid-template-columns:minmax(120px,1.4fr) minmax(90px,.8fr) minmax(105px,1fr) minmax(110px,1fr) 82px; padding-inline:16px; } }
@media (max-width:680px) {
  .app-page h1 { font-size:28px; }
  .app-header { padding-inline:18px; }
  .app-header-inner { min-height:72px; gap:10px; }
  .brand { gap:9px; font-size:17px; }
  .brand-mark { width:29px; height:29px; }
  .brand-caption { font-size:10px; }
  .header-actions { gap:2px; }
  .account-label { display:none; }
  .app-page .quiet-button { padding-inline:10px; }
  .auth-main { padding:24px 20px; }
  .auth-panel { padding:28px 24px; }
  .viewer-main { padding:28px 18px 32px; }
  .access-panel { padding:24px; }
  .access-topline { flex-direction:column; gap:12px; margin-bottom:28px; }
  .access-topline .eyebrow { font-size:9px; }
  .access-statuses { width:100%; }
  .access-session { gap:12px; }
  .admin-main { padding:26px 18px 42px; }
  .page-heading { align-items:flex-start; margin-bottom:24px; gap:16px; }
  .page-heading .secondary-button { flex:none; min-width:44px; padding:10px; font-size:12px; white-space:nowrap; }
  .page-heading .secondary-button svg { display:none; }
  .page-heading .intro-copy { max-width:250px; font-size:13px; }
  .connection-strip { grid-template-columns:minmax(0,1fr); grid-template-areas:"device" "status" "actions"; padding:16px; gap:16px; }
  .connection-statuses { justify-content:center; }
  .connection-actions { width:100%; }
  .connection-actions > button, .connection-actions > a { flex:1; justify-content:center; }
  .section-nav { gap:20px; margin-top:18px; }
  .section-nav a { font-size:12px; min-height:48px; }
  .admin-session { display:none; }
  .admin-section { margin-top:28px; }
  .section-heading { align-items:flex-start; gap:10px; }
  #activity .section-heading { flex-wrap:wrap; }
  .activity-heading-actions { width:100%; justify-content:flex-end; gap:8px; }
  .section-heading h2 { font-size:17px; }
  .section-heading p { font-size:12px; }
  .account-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 14px; padding:18px; }
  .account-head { display:none; }
  .account-status { text-align:right; }
  .account-name { font-size:14px; }
  .mobile-field-label { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; display:block; font-size:10px; color:var(--subtle); margin-bottom:5px; }
  .account-row .account-actions { grid-column:1/-1; }
  .app-page .end-access { width:100%; }
  .activity-row { grid-template-columns:26px minmax(0,1fr); gap:8px 10px; padding:16px; }
  .activity-actions { grid-column:2; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .activity-time { padding:0; font-size:10px; }
  .app-footer { padding:0 18px 24px; font-size:10px; }
}
@media (max-width:640px) {
  .telegram-settings > summary { grid-template-columns:32px minmax(0,1fr) 18px; gap:8px 10px; padding:16px; }
  .telegram-symbol { grid-column:1; grid-row:1; width:32px; height:32px; }
  .telegram-summary-copy { grid-column:2; grid-row:1; }
  .telegram-settings > summary > .telegram-chevron { grid-column:3; grid-row:1; }
  .telegram-settings > summary > .status-badge { grid-column:2; grid-row:2; justify-self:start; max-width:100%; }
  .telegram-fields { grid-template-columns:1fr; }
  .telegram-section { padding:20px 16px; }
  .telegram-section + .telegram-section { border-left:0; border-top:1px solid var(--border); }
  .telegram-section-heading { margin-bottom:14px; }
  .telegram-form-footer { display:block; padding:16px; }
  .telegram-save-state { display:block; margin-bottom:12px; }
  .telegram-form-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .telegram-form-actions #save-telegram { grid-column:1/-1; grid-row:1; width:100%; }
  .telegram-form-actions #discard-telegram { grid-column:1; grid-row:2; }
  .telegram-form-actions #reload-telegram { grid-column:2; grid-row:2; }
  .telegram-form-actions #discard-telegram[hidden] + #reload-telegram { grid-column:1/-1; }
  .telegram-settings-content > .inline-message { margin:0 16px 16px !important; }
}
@media (max-width:360px) { .app-header { padding-inline:12px; } .brand-caption { max-width:88px; } .header-actions .quiet-button { padding-inline:6px; font-size:12px; } .access-panel { padding:20px; } .session-caption { font-size:11px; } .countdown { font-size:25px; } .section-nav { gap:14px; } .auth-panel { padding:24px 20px; } }
@media (prefers-reduced-motion:reduce) { .app-page *, .app-page *::before, .app-page *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }