/* Reference-inspired operational theme. Shared by hosted and local runtimes. */
html[data-theme]{--canvas:#09090b;--surface:#121215;--raised:#1b1c22;--soft:#20232c;--ink:#f2f4f8;--muted:#a3adbf;--line:#343946;--green:#70b4ff;--pale:#15263c;--dark:#0d1017;--accent:#75b8ff;--accent-strong:#2868dc;--cyan:#66d5ef;--amber:#f4c36b;--red:#ff929d;--good:#7bdcb0;--shadow:0 16px 45px #0002;color-scheme:dark;background:var(--canvas);color:var(--ink);font-family:Inter,"Segoe UI",system-ui,sans-serif}
html[data-theme=light]{--canvas:#f4f6fb;--surface:#fff;--raised:#f0f3fa;--soft:#e8edf7;--ink:#172235;--muted:#526079;--line:#cbd3e2;--green:#245ec3;--pale:#e6efff;--dark:#eef2fa;--accent:#205dc8;--accent-strong:#245dcc;--cyan:#126a80;--amber:#855300;--red:#b72f42;--good:#166d4b;--shadow:0 12px 35px #1d305b0c;color-scheme:light}
html[data-theme] body{background:var(--canvas);color:var(--ink)}
html[data-theme] :where(p,small,.form-hint,.breadcrumbs,.device-meta,.filter-bar label,.filter-bar span,.workspace-footer,.activity-row time,.activity-row small,.grant-row small,.stats span,.stats small,.device-body p,.site-card p,.sidebar-note p,.sidebar-user small,.site-row small,.device,.activity p,footer){color:var(--muted)}
html[data-theme] :where(h1,h2,h3,strong,label,.breadcrumbs strong){color:var(--ink)}
html[data-theme] :where(.panel,.site-card,.device-card,.sign-in-card,.stats article,.site-row,.activity,.empty-state,dialog,#live-dialog,#recordings-dialog){background:var(--surface);border-color:var(--line);box-shadow:var(--shadow);border-radius:12px;color:var(--ink)}
html[data-theme] :where(input,select,.filter-bar select,.panel>select,.workspace-selector select){background:var(--raised);color:var(--ink);border-color:var(--line);min-height:44px;font-size:14px}
html[data-theme] :where(input::placeholder){color:var(--muted);opacity:1}
html[data-theme] :where(button,a,input,select):focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
html[data-theme] :where(.button,.primary,.probe-button,.text-button,.revoke-button,.theme-toggle){min-height:40px}
html[data-theme] :where(.primary,.button.primary){background:var(--accent-strong);color:#fff;border:1px solid var(--accent-strong);box-shadow:none}
html[data-theme] :where(.primary:hover,.button.primary:hover){background:#2155b3;border-color:#75b8ff}
html[data-theme] :where(.secondary,.button.secondary,.probe-button,.orb-label,.close-button,.theme-toggle){background:var(--raised);color:var(--ink);border:1px solid var(--line)}
html[data-theme] :where(.secondary:hover,.probe-button:hover,.theme-toggle:hover){background:var(--soft);border-color:var(--accent)}
html[data-theme] :where(.text-button,.eyebrow,.icon-button,.menu-toggle,.sidebar-close){color:var(--accent)}
html[data-theme] .text-button:hover{text-decoration:underline;text-underline-offset:4px}
html[data-theme] .theme-toggle{font:600 12px/1.2 Inter,"Segoe UI",sans-serif;border-radius:8px;padding:9px 12px;white-space:nowrap;cursor:pointer}
html[data-theme] .sign-in{position:relative;background:radial-gradient(ellipse at 18% 42%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 55%),var(--canvas)}
html[data-theme] .sign-in>.theme-toggle{position:absolute;top:30px;right:clamp(22px,6vw,85px)}
html[data-theme] .sign-in-grid{padding-top:85px}
html[data-theme] .sign-in-card{background:linear-gradient(145deg,var(--raised),var(--surface));border:1px solid var(--line)}
html[data-theme] :where(.small-mark,.mark,.avatar,.site-icon,.info-symbol,.activity-icon){background:var(--pale);color:var(--cyan)}
html[data-theme] :where(.principles span,.sign-in-footnote,.device-meta,.grant-list,.grant-row,.activity-row,.inline-form,.dialog-actions,.sidebar-user){border-color:var(--line)}
html[data-theme] .principles span{background:var(--surface);color:var(--muted);font-size:11px}
html[data-theme] .connection-art{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;border-radius:12px;padding:20px 8px}
html[data-theme] .diagram-node{background:var(--surface);border-color:var(--line);color:var(--muted);box-shadow:none}
html[data-theme] .central-node{background:var(--pale);border-color:var(--cyan);color:var(--cyan)}
html[data-theme] .connector-line{background:var(--accent)}
html[data-theme] :where(.sidebar,.top,.page-top){background:var(--dark);border-color:var(--line)}
html[data-theme] .sidebar{box-shadow:none}
html[data-theme] .nav-link{color:var(--muted);font-size:13px;min-height:44px}
html[data-theme] .nav-link:hover{background:var(--raised);color:var(--ink)}
html[data-theme] .nav-link[aria-current=page]{background:var(--pale);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
html[data-theme] .sidebar-note strong{color:var(--ink)}
html[data-theme] .status-dot{background:var(--cyan)}
html[data-theme] :where(.workspace-selector label,.brand small){color:var(--muted);opacity:1}
html[data-theme] .page-top{gap:16px}
html[data-theme] .page-top>.theme-toggle{margin-left:0}
html[data-theme] :where(.account-tag,.pill,.policy-tag){background:var(--raised);border:1px solid var(--line);color:var(--muted);font-size:11px;border-radius:6px;letter-spacing:.03em}
html[data-theme] .policy-tag[data-policy=local]{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
html[data-theme] .policy-tag[data-policy=hybrid]{color:var(--accent)}
html[data-theme] .device-status{background:var(--surface);color:var(--muted);border-color:var(--line);font-size:11px;font-weight:650;padding:5px 8px}
html[data-theme] .device-status[data-state=unverified]{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
html[data-theme] :where(.device-status,.local-state)[data-state=registered]{color:var(--accent)}
html[data-theme] :where(.device-status,.local-state)[data-state=connected]{color:var(--cyan);border-color:var(--cyan)}
html[data-theme] :where(.device-status,.local-state)[data-state=recording]{color:var(--red);border-color:var(--red)}
html[data-theme] :where(.device-status,.local-state)[data-state=offline]{color:var(--muted)}
html[data-theme] .device-visual{background:linear-gradient(150deg,var(--raised),var(--surface));color:var(--muted);border-bottom:1px solid var(--line);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px}
html[data-theme] :where(.info-band,.empty-state){background:var(--raised);border-color:var(--line)}
html[data-theme] .stats article:before{background:var(--accent)}
html[data-theme] .stats strong{font-variant-numeric:tabular-nums}
html[data-theme] .site-card h3{font-size:17px}
html[data-theme] .site-card p{font-size:12px}
html[data-theme] :where(.site-card .text-button,.device-card .text-button,.site-card .policy-tag){font-size:12px}
html[data-theme] :where(.form-hint,.sidebar-note p,.sidebar-user strong,.sidebar-user small,.activity-row strong,.activity-row small,.activity-row time,.grant-row small,.info-band p,.workspace-footer){font-size:12px;line-height:1.6}
html[data-theme] :where(.info-band h3,.device-body h3){font-size:15px}
html[data-theme] :where(.device-meta,.device-body p,.stats span,.stats small,.filter-bar label,.filter-bar span,form label){font-size:12px}
html[data-theme] :where(.revoke-button,.notice.error){color:var(--red);background:var(--surface);border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
html[data-theme] .notice{background:var(--raised);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-theme] .handoff-progress{background:var(--raised);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
html[data-theme] .handoff-spinner{border-color:var(--line);border-top-color:var(--cyan)}
html[data-theme] .handoff-progress button{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] :where(dialog::backdrop){background:#0009;backdrop-filter:blur(2px)}
html[data-theme] :where(.hero,.site-row,.activity p){border-color:var(--line)}
html[data-theme] .hero h1 em{color:var(--cyan)}
html[data-theme] .hero p:not(.eyebrow){color:var(--muted)}
html[data-theme] .hero-center{background:var(--pale);color:var(--cyan);box-shadow:none}
html[data-theme] .orbit{border-color:var(--line)}
html[data-theme] :where(.panel p,.auth p:not(.eyebrow)){color:var(--muted)}
html[data-theme] :where(.status,.local-state){display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--raised);color:var(--muted)}
html[data-theme] .local-state[data-state=unverified]{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
html[data-theme] .local-state[data-state=recording]{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
html[data-theme] #message:not(:empty){background:var(--raised);border-color:var(--line);color:var(--amber)}
html[data-theme] #logout{color:var(--accent)}
html[data-theme] :where(#live-state,.live-heading button){color:var(--muted)}
html[data-theme] .live-heading button{background:var(--raised);border:1px solid var(--line);border-radius:6px}
html[data-theme] :where(time,.device-meta,.activity p){font-variant-numeric:tabular-nums}
html[data-theme] .disabled-link{background:var(--soft);color:var(--muted);border-color:var(--line)}
@media(max-width:800px){html[data-theme] .sign-in>.theme-toggle{top:24px;right:22px}html[data-theme] .sign-in-grid{padding-top:70px}html[data-theme] .page-top{gap:10px}html[data-theme] .account-tag{display:none}html[data-theme] .sidebar-user{flex-wrap:wrap}html[data-theme] .sidebar-note{padding-bottom:18px}}
@media(max-width:520px){html[data-theme] .theme-toggle{font-size:11px;padding:8px;min-height:40px}html[data-theme] .top{gap:8px;padding:0 15px}html[data-theme] .site-card{flex-wrap:wrap}html[data-theme] .site-card .policy-tag{margin-left:58px}html[data-theme] .grant-row{flex-wrap:wrap}html[data-theme] .workspace-footer{font-size:11px}}

html[data-theme] #live-dialog{background:var(--surface);color:var(--ink)}
