:root{color-scheme:dark;--ink:#070707;--surface:#101010;--surface2:#161616;--gold:#d5aa55;--gold-bright:#f1cb78;--muted:#85817a;--line:rgba(221,177,95,.18);font-family:Arial,Helvetica,sans-serif;background:var(--ink);color:#f7f2e7}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(110% 32% at 50% 0%,#2c210d 0%,transparent 50%),linear-gradient(140deg,#0b0b0b,#050505 60%);min-height:100vh}.dashboard{width:min(100%,1080px);min-height:100vh;margin:auto;padding:clamp(18px,3vw,42px);display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);overflow:hidden}.topbar,.hero,.card-title,.card-footer,.metric-heading,.panel-heading,.live-heading,footer,.row{display:flex;align-items:center}.topbar{justify-content:space-between;color:var(--gold);font-size:13px;letter-spacing:.16em}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:800}.brand b{color:var(--gold-bright)}.brand-mark{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--gold);font-size:10px;letter-spacing:0}.connection{font-size:10px;color:#a9a59d}.connection i,.live-dot{width:7px;height:7px;background:#7fdc91;border-radius:50%;box-shadow:0 0 12px #7fdc91;margin-right:7px}body.offline .connection i{background:#d2785b;box-shadow:0 0 12px #d2785b}.topbar button{border:0;background:transparent;color:var(--gold);font-size:21px;cursor:pointer;padding:4px}.hero{justify-content:space-between;padding:clamp(10px,2vw,20px) 0 6px}.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--gold);margin:0 0 9px;font-weight:bold}.eyebrow span{color:#6e5a2f;margin:0 7px}.hero h1{font-size:clamp(64px,17vw,140px);line-height:.8;letter-spacing:-.075em;margin:0;font-weight:700}.hero p:not(.eyebrow){margin:14px 0 0;color:#bdb9b1;text-transform:capitalize;font-size:13px}.system-state{border-left:1px solid var(--line);padding-left:14px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}.system-state span{font-size:11px;color:#8ae29b;letter-spacing:.14em}.system-state small{font-size:9px;color:var(--muted);letter-spacing:.12em}.core-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.core-card,.metric-card,.panel,.live-panel{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.04)}.core-card{min-height:260px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.gpu-card{border-color:rgba(241,203,120,.38)}.card-title{gap:8px}.card-title span,.panel-heading span{font-size:9px;color:#796743}.card-title h2,.panel-heading h2,.live-heading h2{font-size:14px;letter-spacing:.15em;margin:0}.card-title b{margin-left:auto;color:var(--gold-bright);font-size:11px}.dial{--value:0%;width:min(31vw,150px);aspect-ratio:1;margin:auto;display:grid;place-items:center;background:radial-gradient(circle at center,#121212 0 61%,transparent 62%),conic-gradient(var(--gold) var(--value),#2a2925 0);border-radius:50%;position:relative}.dial:after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.08);border-radius:50%}.dial.danger{background:radial-gradient(circle at center,#16110f 0 61%,transparent 62%),conic-gradient(#df694f var(--value),#2a2925 0)}.dial div{display:flex;align-items:baseline;gap:4px;z-index:1}.dial strong{font-size:33px;letter-spacing:-.06em}.dial small{font-size:11px;color:var(--gold)}.card-footer{justify-content:space-between;color:#8f8a80;font-size:9px;letter-spacing:.1em}.card-footer strong{color:#f2efe6;font-size:12px;letter-spacing:0}.hotspot{min-height:42px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;color:var(--muted);letter-spacing:.13em;padding:0 2px}.hotspot strong{font-size:20px;letter-spacing:-.04em;color:var(--gold-bright)}.hotspot small{font-size:11px;color:var(--gold)}.hotspot .line{height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent);margin:0 10px}.right-label{font-size:8px}.metric-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}.metric-card{padding:14px;min-height:146px;position:relative}.metric-heading{justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#d9d5cd}.metric-heading small{font-size:8px;color:var(--gold)}.metric-card>strong{font-size:28px;letter-spacing:-.07em;line-height:1.1;display:inline-block;margin-top:23px}.metric-card .unit{font-size:9px;color:var(--gold);margin-left:4px}.metric-card p{font-size:9px;color:var(--muted);margin:9px 0 0}.progress{height:3px;background:#2b2822;margin-top:15px}.progress i{height:100%;display:block;background:linear-gradient(90deg,#886b32,var(--gold-bright));transition:width .35s ease}.fps-card{background:linear-gradient(145deg,rgba(224,174,83,.16),rgba(255,255,255,.02))}.fps-bars{height:12px;margin-top:15px;display:flex;gap:3px;align-items:end}.fps-bars i{display:block;flex:1;background:var(--gold);height:40%;animation:pulse 1s ease-in-out infinite alternate}.fps-bars i:nth-child(2){height:80%;animation-delay:.12s}.fps-bars i:nth-child(3){height:54%;animation-delay:.24s}.fps-bars i:nth-child(4){height:100%;animation-delay:.36s}.fps-bars i:nth-child(5){height:66%;animation-delay:.48s}.fps-bars i:nth-child(6){height:90%;animation-delay:.6s}.fps-bars i:nth-child(7){height:45%;animation-delay:.72s}@keyframes pulse{to{transform:scaleY(.46);opacity:.48}}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{padding:16px;min-height:150px}.panel-heading{gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:11px}.list{display:flex;flex-direction:column}.row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:10px;gap:7px}.row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfcbc2}.row b{margin-left:auto;color:var(--gold-bright);font-size:11px;font-weight:normal;white-space:nowrap}.row small{color:#8f8b84;font-size:8px}.muted{font-size:10px;color:var(--muted);margin:16px 0}.live-panel{padding:17px;background:linear-gradient(110deg,rgba(243,203,112,.12),rgba(255,255,255,.015) 60%)}.live-heading{gap:7px}.live-heading h2{font-size:11px}.live-heading small{margin-left:auto;color:#90dc9c;font-size:9px;letter-spacing:.12em}.live-metrics{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:8px;margin-top:17px}.live-metrics div{min-width:0}.live-metrics span{display:block;font-size:8px;letter-spacing:.13em;color:#a9a49b}.live-metrics strong{font-size:23px;letter-spacing:-.06em;display:inline-block;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.live-metrics small{font-size:8px;color:var(--gold);margin-left:3px}footer{justify-content:space-between;font-size:8px;letter-spacing:.16em;color:#5f5b54;padding-bottom:4px}dialog{border:0;background:transparent;color:inherit;padding:0;max-width:420px;width:calc(100% - 32px)}dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}.settings-card{position:relative;padding:28px;background:#141414;border:1px solid var(--line);box-shadow:0 24px 80px #000}.settings-card h2{font-size:24px;margin:0 0 25px}.settings-card label:not(.toggle){display:flex;flex-direction:column;gap:8px;font-size:11px;color:#d2cec4;margin-bottom:18px}.settings-card select{background:#0d0d0d;border:1px solid #4e4024;color:#fff;padding:11px;font:inherit}.settings-card .toggle{display:flex;align-items:center;gap:9px;font-size:12px}.settings-card .toggle input{accent-color:var(--gold)}.help{color:var(--muted);font-size:10px;line-height:1.5;margin:18px 0}.settings-actions{display:flex;justify-content:flex-end;gap:9px}.settings-actions button{border:1px solid var(--gold);background:var(--gold);color:#111;padding:9px 14px;font-weight:bold;cursor:pointer}.settings-actions .secondary{background:transparent;color:#e9e3d8;border-color:#3e372a}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#aaa;font-size:24px;cursor:pointer}@media(max-width:480px){.dashboard{padding:17px;gap:17px}.topbar{font-size:11px}.connection{display:none}.core-card{min-height:205px}.core-card{padding:12px}.dial{width:min(31vw,120px)}.dial strong{font-size:27px}.metric-card{min-height:126px;padding:11px}.metric-card>strong{font-size:23px;margin-top:18px}.right-label{display:none}.lower-grid{gap:10px}.panel{padding:12px}.live-metrics strong{font-size:18px}}
