/* Bridge the standalone application's semantic tokens to SOMA's shared theme. */
:root[data-theme=dark]{--bg:var(--soma-bg);--bg2:var(--soma-surface);--panel:var(--soma-surface);--card:var(--soma-surface);--surface:var(--soma-raised);--border:var(--soma-border);--border2:var(--soma-border-strong);--hover:var(--soma-raised);--text:var(--soma-text);--muted:var(--soma-muted);--accent:var(--soma-accent);--accent2:var(--soma-accent);--link:var(--soma-accent);--header-bg:var(--soma-bg);--bigcard-bg:var(--soma-surface);--sub-bg:var(--soma-raised);--code-bg:var(--soma-bg);--track-bg:var(--soma-bg);--icon-bg:var(--soma-surface);--thumb:#405b59;--thumb-edge:#5b7b71}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;line-height:1.5}
#twinHeader{padding:18px 20px;border-bottom:1px solid var(--border);gap:12px;grid-template-columns:minmax(0,1fr)}
#twinHeader .metrics{min-width:0;width:100%;grid-template-columns:minmax(540px,1fr) repeat(5,minmax(80px,98px));grid-template-rows:repeat(3,minmax(50px,auto));grid-auto-flow:row;grid-auto-columns:auto}
#twinHeader .m{width:auto;min-width:0}
#twinHeader .m.big{grid-column:1;grid-row:1/span 3;height:auto}
#twinHeaderToggle{background:var(--surface);color:var(--text);border:1px solid var(--border2);min-height:32px}
#twinHeader .twin-heading{gap:12px;align-items:center}
#twinHeader .twin-heading h1{font-size:22px;line-height:1.35;font-weight:600;letter-spacing:-.4px;color:var(--text)}
#twinHeader .brand p{font-size:12px;line-height:1.7;color:var(--muted)}
#twinHeader>.brand{min-width:0;overflow-wrap:anywhere}
.panel,.card{border-radius:var(--soma-radius);border-color:var(--border);background:var(--panel);box-shadow:none}
.panel h2,.card h2{font-size:13px;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--text)}
.panel.avatar-card,.panel.wrist-card{padding:12px}
.panel.avatar-card h2,.panel.wrist-card h2{margin-bottom:12px}
.left,.chart-grid{gap:var(--soma-gap)}
.m{border-radius:var(--soma-control-radius);border-color:var(--border)}
.m label{color:var(--muted)}
button,.soma-select .soma-select-trigger{border-radius:var(--soma-control-radius);font-family:inherit}
.soma-select .soma-select-trigger{background:var(--surface);border-color:var(--border2);color:var(--text);min-height:32px;line-height:1.4}
input[type=number],input[type=text],input[type=url]{border-radius:var(--soma-control-radius);border-color:var(--border2);color:var(--text);background:var(--bg);min-height:30px}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.avatar,.wrist{border-radius:var(--soma-control-radius);border-color:var(--border)}
.vsb-thumb:hover,.vsb-thumb.drag{background:var(--thumb-edge)}
@media(max-width:700px){#twinHeader{padding:14px}.panel.avatar-card,.panel.wrist-card{padding:10px}#twinHeader .twin-heading h1{font-size:20px}}
@media(max-width:1100px){#twinHeader .metrics{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-template-rows:auto}#twinHeader .m{min-height:54px;height:auto}#twinHeader .m.big{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr))}#twinHeader .m.big .kv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#twinHeader .m.big :is(.kv i,.kv span,.col>span,.cum){white-space:normal;overflow-wrap:anywhere}}
@media(max-width:600px){#twinHeader .m.big{grid-template-columns:minmax(0,1fr);gap:12px}#twinHeader .m.big .col+.col{border-left:0;border-top:1px solid var(--border);padding-top:12px}}
@media(max-width:1100px){#twinHeader{padding-right:40px}}