:root{--bg:#0b0d12;--panel:#12151d;--panel2:#181c27;--line:#232838;--text:#e8eaf2;--mute:#8a91a8;--acc:#6c7bff;--acc2:#4fd1ff;--ok:#3ddc97;--warn:#ffb84d;--bad:#ff5d6c}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 16px/1.55 "Space Grotesk",system-ui,sans-serif;background-image:radial-gradient(900px 400px at 80% -10%,#6c7bff22,transparent 70%)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.hero{padding:8vh 4vw 5vh;max-width:1200px;margin:auto}
.hero h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;letter-spacing:-.04em;font-weight:700}
.hero p{margin-top:20px;color:var(--mute);max-width:46ch;font-size:1.1rem}
.grid{max-width:1200px;margin:auto;padding:0 4vw 60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:80px}
.card.wide{grid-column:1/-1}
h2{font-size:1.05rem;font-weight:500}
label{display:flex;flex-direction:column;gap:6px;color:var(--mute);font-size:.88rem}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks label{flex-direction:row;align-items:center;gap:8px}
input[type=range]{accent-color:var(--acc)}input[type=checkbox]{accent-color:var(--acc)}
input,select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit}
input[type=number]{width:80px}
textarea{width:100%;resize:vertical;font:400 .85rem/1.5 "IBM Plex Mono",monospace}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
button{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:9px 18px;font:500 .92rem inherit;font-family:inherit;cursor:pointer;transition:.15s}
button:hover{filter:brightness(1.12)}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:wait}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.out{font:500 1.05rem "IBM Plex Mono",monospace;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px;word-break:break-all;min-height:52px}
.meter{height:5px;background:var(--line);border-radius:5px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--bad);transition:.25s}
small{color:var(--mute)}
.big{font-size:3rem;font-weight:700;letter-spacing:-.03em;line-height:1}.big small{font-size:1rem;font-weight:400}
canvas{width:100%;height:90px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.stats{color:var(--mute);font-size:.88rem}.stats b{color:var(--text);font-weight:500}
.list{list-style:none;padding:0}
.list li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:.92rem}
.list b{color:var(--text);font-weight:500;font-family:"IBM Plex Mono",monospace}
.info{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.info div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.info dt{color:var(--mute);font-size:.8rem}.info dd{font:400 .88rem "IBM Plex Mono",monospace;word-break:break-word}
.status{border-top:1px solid var(--line);background:var(--panel);padding:28px 5vw 22px}
.status-title{max-width:1200px;margin:0 auto 14px;font-weight:500}
.status-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.status-grid div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column}
.status-grid span{color:var(--mute);font-size:.82rem}.status-grid b{font-weight:500;font-size:1.15rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--warn);margin-right:6px}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.bad{background:var(--bad)}
.copy{max-width:1200px;margin:18px auto 0;color:var(--mute);font-size:.82rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

body{display:grid;grid-template-columns:240px 1fr}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:28px;padding:26px 16px;background:var(--panel);border-right:1px solid var(--line);z-index:5}
.logo{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;padding:0 10px}.logo b{color:var(--acc)}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{padding:9px 12px;border-radius:8px;border-left:3px solid transparent;color:var(--mute);font-size:.95rem;transition:.15s}
.side nav a:hover{background:var(--panel2);color:var(--text)}
.side nav a.active{background:var(--panel2);color:var(--text);border-left-color:var(--acc)}
.content{min-width:0}

@media(max-width:860px){
  body{display:block}
  .side{height:auto;flex-direction:row;align-items:center;gap:12px;padding:10px 4vw;border-right:0;border-bottom:1px solid var(--line)}
  .side nav{flex-direction:row;overflow-x:auto;flex:1}
  .side nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .side nav a.active{border-bottom-color:var(--acc)}
}
@media(max-width:640px){.two{grid-template-columns:1fr}}

.grp{margin:16px 12px 4px;color:var(--mute);font-size:.8rem;opacity:.7}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tiles div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;min-width:0}
.tiles span{color:var(--mute);font-size:.82rem}
.tiles b{font-weight:500;font-size:1.3rem;overflow-wrap:anywhere}
#dGpu{font-size:.95rem;line-height:1.35;padding-top:4px}
#pingCv{height:200px}
@media(max-width:860px){.grp{display:none}}

.drop{border:1.5px dashed var(--line);border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;transition:.15s;align-items:center}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--panel2);color:var(--text)}
.opts{align-items:flex-end;gap:18px}.opts label{min-width:160px}
.files{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.files li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.files .nm{min-width:0;overflow-wrap:anywhere}
.files .sz{color:var(--mute);font:400 .85rem "IBM Plex Mono",monospace}
.files .gain{color:var(--ok)}.files .loss{color:var(--warn)}
.files a{background:var(--acc);color:#fff;border-radius:8px;padding:6px 14px;font-size:.88rem}