/* Approved metric hierarchy. Presets are opt-in; the existing appearance is unchanged. */
:root[data-preset] { --preset-edge:var(--edge); --preset-paper:var(--panel); }
:root[data-preset] { --bg:#f4f5fa; --panel:#fff; --panel-2:#f8fafc; --card:#f8fafc; --chrome:#f8fafc; --hover:#eef2f7; --press:#e2e8f0; --line:#e2e8f0; --edge:#cbd5e1; --txt:#172033; --dim:#526176; --side:#192133; --sidetxt:#f1f5f9; --sidedim:#b7c2d4; }
:root[data-preset="colorful"] { --accent:#7e22ce; --accent-text:#7e22ce; --accent-hover:#6b21a8; --accent-tint:#f3e8ff; }
:root[data-preset="regular"] { --accent:#475569; --accent-text:#475569; --accent-hover:#334155; --accent-tint:#e2e8f0; }
:root[data-preset][data-theme="dark"] { --bg:#121722; --panel:#1c2535; --panel-2:#222e40; --card:#222e40; --chrome:#182131; --hover:#29374c; --press:#34435a; --line:#334155; --edge:#53637a; --txt:#f1f5f9; --dim:#bdc9da; --accent-text:#d8b4fe; }
@media(prefers-color-scheme:dark) { :root[data-preset]:not([data-theme="light"]) { --bg:#121722; --panel:#1c2535; --panel-2:#222e40; --card:#222e40; --chrome:#182131; --hover:#29374c; --press:#34435a; --line:#334155; --edge:#53637a; --txt:#f1f5f9; --dim:#bdc9da; --accent-text:#d8b4fe; } }
:root[data-preset] :is(.tile,.lead-card) { --state-color:#475569; }
:root[data-preset] :is(.t-blue,[data-state-tone="blue"]) { --state-color:#1d4ed8; }
:root[data-preset] :is(.t-violet,[data-state-tone="violet"]) { --state-color:#7e22ce; }
:root[data-preset] :is(.t-amber,[data-state-tone="amber"]) { --state-color:#a34808; }
:root[data-preset] :is(.t-green,[data-state-tone="green"]) { --state-color:#147638; }
:root[data-preset] :is(.t-red,[data-state-tone="red"]) { --state-color:#b91c1c; }
:root[data-preset] .lead-card[data-state-tone] { border-inline-start:3px solid var(--state-color); }
:root[data-preset] .lead-card[data-state-tone] .lc-bar>.pill:first-of-type { background:var(--state-color); color:#fff; }
:root[data-preset="colorful"] .tile { background:var(--state-color); border-color:var(--state-color); }
:root[data-preset="colorful"] .tile :is(.cap,.n,.sub,.tile-ico) { color:#fff!important; opacity:1; }
:root[data-preset="regular"] .tile { background:var(--panel); border:1px solid var(--edge); border-top:3px solid var(--state-color); }
:root[data-preset="regular"] .tile :is(.cap,.n,.sub) { color:var(--txt)!important; opacity:1; }
:root[data-preset] .tile.on { outline:2px solid var(--accent); outline-offset:3px; }
:root[data-preset="colorful"] .hero { background:linear-gradient(110deg,#7c22cb,#b21658); color:#fff; border-color:transparent; }
:root[data-preset="colorful"] .hero .kicker,
:root[data-preset="colorful"] .hero .when { color:#fff; opacity:1; }
:root[data-preset="colorful"] .hero .acts button { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
:root[data-preset="colorful"] .hero .acts button.solid { color:#6b21a8; background:#fff; border-color:#fff; }
:root[data-preset="regular"] .hero { background:var(--panel); color:var(--txt); box-shadow:none; }
:root[data-preset] .hero { min-height:0; padding:18px 22px; margin-bottom:16px; align-items:center; }
:root[data-preset] .hero h1 { font-size:26px; line-height:1.2; }
:root[data-preset] .hero .kicker { margin-bottom:4px; }
:root[data-preset] .tiles.tiles-7 { grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:12px; }
:root[data-preset] .tile { height:auto; min-height:0; padding:12px; text-align:center; display:flex; flex-direction:column; justify-content:flex-start; gap:4px; }
:root[data-preset] .tile .cap { font-size:13px; line-height:20px; font-weight:650; min-height:0; white-space:nowrap; text-align:center; padding-inline:12px; }
:root[data-preset] .tile .n { font-size:32px; line-height:40px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center; }
:root[data-preset] .tile .sub { font-size:12px; line-height:20px; font-weight:600; white-space:nowrap; text-align:center; margin-top:4px; }
:root[data-preset] .tile .tile-ico { top:8px; inset-inline-end:8px; }
:root[data-preset] .metric:has(>.v):has(>.l) { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-height:0; padding:12px; text-align:center; }
:root[data-preset] .metric:has(>.v)>.l { order:0; font-size:13px; line-height:20px; font-weight:650; white-space:nowrap; }
:root[data-preset] .metric:has(>.l)>.v { order:1; font-size:32px; line-height:40px; font-weight:750; white-space:nowrap; font-variant-numeric:tabular-nums; }
:root[data-preset] .metric:has(>.v)>.n { order:2; font-size:12px; line-height:20px; font-weight:600; }
:root[data-preset] .pulse-stats { display:grid; gap:12px; }
:root[data-preset] .pstat { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:12px; min-height:0; }
:root[data-preset] .pstat>span { order:0; font-size:13px; line-height:20px; font-weight:650; white-space:nowrap; }
:root[data-preset] .pstat>b { order:1; font-size:32px; line-height:40px; font-weight:750; white-space:nowrap; font-variant-numeric:tabular-nums; }
:root[data-preset] .pstat>u { order:2; font-size:12px; line-height:20px; font-weight:600; opacity:1; white-space:nowrap; }
:root[data-preset] .anchor-head { justify-content:center; text-align:center; flex-wrap:wrap; gap:12px; }
:root[data-preset] .anchor-fig { font-variant-numeric:tabular-nums; text-align:center; }
:root[data-preset] .anchor-cap { font-size:13px; line-height:20px; font-weight:600; text-align:center; }
:root[data-preset] .anchor:has(.duo) .duo { display:grid; grid-template-columns:1fr 1fr; margin-top:12px; border-top:1px solid var(--edge); padding-top:12px; }
:root[data-preset] .anchor:has(.duo) .duo-row { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 12px; text-align:center; }
:root[data-preset] .anchor:has(.duo) .duo-row + .duo-row { border-inline-start:1px solid var(--edge); }
:root[data-preset] .anchor:has(.duo) .duo-row>span { font-size:13px; font-weight:600; white-space:nowrap; }
:root[data-preset] .anchor:has(.duo) .duo-row>b { order:1; font-size:25px; line-height:34px; font-variant-numeric:tabular-nums; white-space:nowrap; }
:root[data-preset] .anchor:has(.duo) .duo-track { order:2; width:100%; height:4px; margin-top:6px; }
.appearance-dialog { color:var(--txt); background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:24px; width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.appearance-dialog::backdrop { background:#11182780; }
.appearance-dialog h2,.appearance-account h2 { margin:0 0 8px; font-size:22px; }
.appearance-intro,.appearance-status { color:var(--dim); font-size:14px; line-height:1.5; }
.appearance-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.appearance-option { position:relative; display:flex; flex-direction:column; gap:10px; padding:12px; border:2px solid var(--edge); border-radius:12px; cursor:pointer; font-size:14px; }
.appearance-option:has(input:checked) { border-color:var(--accent); }
.appearance-option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.appearance-option input { align-self:flex-start; width:18px; height:18px; accent-color:var(--accent); }
.appearance-sample { display:block; border:1px solid var(--edge); border-radius:7px; overflow:hidden; }
.appearance-sample-head { display:block; height:24px; background:var(--panel-2); }
.appearance-sample.colorful .appearance-sample-head { background:linear-gradient(110deg,#7c22cb,#b21658); }
.appearance-sample-metrics { display:flex; gap:5px; padding:9px 5px; background:var(--panel); }
.appearance-sample-metrics b { flex:1; text-align:center; border-top:2px solid var(--h-blue); padding-top:5px; font-size:18px; }
.appearance-sample.colorful .appearance-sample-metrics b { color:#fff; background:#174bc3; border-radius:4px; }
.appearance-actions { display:flex; justify-content:flex-end; gap:10px; }
.appearance-actions button,.appearance-account button { min-height:44px; }
.appearance-account { border:1px solid var(--edge); border-radius:12px; padding:20px; margin-bottom:20px; }
@media(max-width:540px) { .appearance-choices { grid-template-columns:1fr; } .appearance-option { display:grid; grid-template-columns:24px 90px 1fr; align-items:center; } :root[data-preset] .tile .n { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { :root[data-preset] .tile { transition:none; } }