/* Theme surfaces shared by phone, tablet and desktop. */
.environment-tabs{display:flex;gap:10px;padding:0 0 18px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.environment-tabs [role=tab]{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 22px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:10px;font-size:20px;font-weight:500}
.environment-tabs [role=tab] small{font-size:12px;font-weight:400}
.environment-tabs [role=tab][aria-selected=true]{background:var(--control-hover);color:var(--ink);border-color:var(--muted)}
.environment-tabs [role=tab]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:600px){.environment-tabs{gap:8px;margin-bottom:20px}.environment-tabs [role=tab]{flex:1;justify-content:center;flex-wrap:wrap;gap:3px 9px;padding:11px 12px;font-size:18px}.environment-tabs [role=tab] small{font-size:11px}}
:root{--surface:#fff;--surface-raised:#f7f9fc;--control-hover:#eaf0f9}
:root[data-theme=dark]{color-scheme:dark;--bg:#101827;--surface:#192438;--surface-raised:#202e44;--control-hover:#2a3b55;--ink:#edf2fb;--muted:#b4c1d5;--line:#35445b;--blue:#94b7ff;--navy:#0c1422;--green:#75deb6;--amber:#ffd180}
.card,.login-card,dialog,input,textarea,select,.secondary,.danger,.help{background:var(--surface);color:var(--ink);border-color:var(--line)}
.secondary:hover{background:var(--control-hover)}
.subtle,.coin,.step b,.report-body pre{background:var(--surface-raised)}
.asset-row{border-color:var(--line)}
.link-list button{color:var(--ink)}
dialog{color:var(--ink)}
[data-theme=dark] .primary,[data-theme=dark] .logo{background:#245ee8;color:white}
[data-theme=dark] .primary:hover{background:#316ef5}
[data-theme=dark] .pill{background:#25364d;color:#c3d5ef;border-color:#415671}
[data-theme=dark] .pill.good{background:#123c32;color:var(--green);border-color:#2f6857}
[data-theme=dark] .pill.warn,[data-theme=dark] .notice{background:#3b301d;color:#ffda97;border-color:#6b542d}
[data-theme=dark] .notice.info,[data-theme=dark] .report-list button.selected{background:#203654;color:#bbd1ff;border-color:#3f5e88}
[data-theme=dark] .danger,[data-theme=dark] .negative,[data-theme=dark] #login-error{color:#ffa8b5}
[data-theme=dark] .login-wrap{background:linear-gradient(130deg,#090f19,#162a46)}
[data-theme=dark] footer{color:var(--muted)}
.display-controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
.theme-label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.theme-label select{width:auto;min-height:44px;font-size:16px}
.login-card .display-controls{justify-content:space-between;margin-bottom:26px}
.display-controls button{font-size:14px;min-height:44px}
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.header-actions .display-controls{flex-wrap:nowrap}
button,select{min-height:44px}
input:not([type=checkbox]),textarea{font-size:16px;min-height:44px}
.help{min-width:44px;width:44px;min-height:44px;height:44px;flex-shrink:0;border-radius:50%;font-size:15px}
.help:focus::after,.help:hover::after{display:none}
.metric-label{min-height:44px}
.connection-status{position:sticky;top:0;z-index:60;background:#644718;color:#fff;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));font-size:14px}
.login-wrap{min-height:100dvh;padding: max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
main{padding-bottom:max(24px,env(safe-area-inset-bottom))}
main,header,header>div,.card,.grid-two>*,.report-layout>*,.metrics>*,.row>*,.asset-row>*{min-width:0}
header>div:first-child{flex-shrink:0}
.card,.notice,.source-row,.event,footer{overflow-wrap:anywhere}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-value{font-size:clamp(24px,2.3vw,34px)}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(28px,env(safe-area-inset-bottom))}
dialog input[type=checkbox]{min-width:24px;min-height:24px;accent-color:#245ee8}
.actions button{white-space:normal;max-width:100%}
nav{overscroll-behavior-inline:contain;scrollbar-width:thin}
@media(max-width:1250px){header{flex-wrap:wrap}.header-actions{justify-content:flex-start}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Fold inner screen and tablet widths get the full canvas instead of a narrow sidebar column. */
@media(max-width:960px){
 aside{position:static;width:100%;padding:16px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
 .brand{font-size:20px}.brand .logo{width:34px;height:34px}
 .nav-label,.aside-bottom{display:none}
 nav{display:flex;gap:4px;margin-top:14px;overflow-x:auto}
 nav button{white-space:nowrap;flex-shrink:0;min-height:48px;padding:10px 12px}
 nav b{display:none}
 main{margin:0;padding:22px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .report-layout{grid-template-columns:1fr}.report-list{max-height:240px}
 .grid-two{grid-template-columns:minmax(0,1fr)}
 .header-actions button{min-height:44px}
}
@media(max-width:480px){
 header{display:block}.header-actions{margin-top:16px;gap:10px}
 .header-actions .display-controls{width:100%;justify-content:space-between}
 .metrics{grid-template-columns:minmax(0,1fr)}
 .metric-value{font-size:30px}.metric-label{justify-content:space-between}
 .row{flex-wrap:wrap}.card-head{gap:8px}.card-head .help{margin-left:auto}
 .actions{align-items:stretch}.actions button{flex:1 1 100%;white-space:normal}
 .login-card{padding:24px 20px}.login-card h1{font-size:26px}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.step b{display:flex;margin-bottom:6px}
 .source-row{flex-wrap:wrap}.report-body h1{font-size:24px}
 dialog{padding:22px}.theme-label{gap:6px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}