:root{ --bg:#0b0b10; --fg:#eaeef3; --accent:#8af; --muted:#9aa4b2; --card:#141621; --ok:#29cc7a; }
:root.light{ --bg:#f7f9fc; --fg:#0b1020; --accent:#3a6dff; --muted:#516079; --card:#ffffff; --ok:#1b9e5a; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.35}
a{color:var(--accent);text-decoration:none}
.header{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.brand{display:flex;gap:.6rem;align-items:center}
.brand .logo{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:20px}
.brand h1{font-size:1.1rem;margin:0}
.controls{display:flex;gap:.5rem;align-items:center}
.btn{padding:.55rem .8rem;border:1px solid rgba(255,255,255,.08);background:var(--card);color:var(--fg);border-radius:14px;cursor:pointer;transition:transform .06s ease, box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn.pulse{box-shadow:0 0 0 0 rgba(58,109,255,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,109,255,.5)}70%{box-shadow:0 0 0 14px rgba(58,109,255,0)}100%{box-shadow:0 0 0 0 rgba(58,109,255,0)}}
.container{max-width:1180px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.card h3{margin:.2rem 0 .6rem 0;font-size:1rem}
.badge{font-size:.75rem;color:var(--muted)}
.colorbar{height:10px;border-radius:8px;background:linear-gradient(90deg,#2e3192,#1bffff,#00ff6c,#ffee00,#ff7a00,#ff006a)}
footer{opacity:.8;font-size:.85rem;padding:20px;text-align:center}
.access{display:flex;gap:.4rem;flex-wrap:wrap}
input[type=range]{width:160px}
#plot{width:100%;height:520px;border-radius:18px;overflow:hidden;background:#000}
.hidden{display:none}

/* v4/v5/v6 additions */
.subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;width:100%}
.subgrid .btn{width:100%}
.legend{display:flex;gap:.6rem;align-items:center}
.legend .dot{width:12px;height:12px;border-radius:50%}
.legendCard{display:flex;flex-direction:column;gap:.4rem;background:var(--card);padding:.8rem;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.legendRow{display:flex;gap:.5rem;align-items:center;justify-content:space-between}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.metrics .box{background:var(--card);padding:.8rem;border-radius:14px;border:1px solid rgba(255,255,255,.08)}

.panel{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.4rem 0}
.panel label{font-size:.85rem;opacity:.9}
.panel input,.panel select{padding:.3rem .5rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:var(--card);color:var(--fg)}

#specWrap{display:grid;grid-template-columns:1fr;gap:.6rem}
#specCanvas{width:100%;height:260px;border-radius:12px;background:#000;display:block}
.spec-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.history{display:flex;gap:.4rem;flex-wrap:wrap}
.history .btn{font-size:.85rem}
.preset{min-width:180px}

/* unified buttons v8.1.1 */
#plotWrap{ position: relative; }
#btnFull{ position: absolute; right: 12px; top: 12px; z-index: 60 !important; }
#btnPresent{ position: absolute; right: 12px; top: 56px; z-index: 59 !important; }

/* fullscreen robust v8.1.1 */
#plot{ transition: height .25s ease, border-radius .25s ease, box-shadow .25s ease; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
:fullscreen #plot, :-webkit-full-screen #plot{ height: 100vh !important; height: 100svh !important; height: 100dvh !important; border-radius: 0; }
:fullscreen #plotWrap, :-webkit-full-screen #plotWrap{ inset: 0; }
#plot.fullscreen-active{ height: calc(100vh - 24px) !important; height: calc(100svh - 24px) !important; height: calc(100dvh - 24px) !important; border-radius: 0; }

/* presentation polish v8.1.1 */
body.presentation, body.presentation html{ overflow: hidden; }
body.presentation .container{ max-width: 100%; padding: 8px; }

/* spec toolbar wrap v8.1.1 */
.spec-toolbar{ row-gap: .4rem; }