:root{
  --bg:#0a0d12; --panel:rgba(15,20,27,.86); --line:rgba(255,255,255,.10);
  --ink:#e8edf3; --dim:#93a1b1; --accent:#f6c86a; --accent2:#8fe3ff;
  --ok:#3ecf8e; --med:#e3b341; --high:#ef5b5b;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
#viewport{position:fixed;inset:0}
canvas{display:block;outline:none}

/* ---------- top bar ---------- */
#top{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:18px;
  padding:0 18px;z-index:20;background:linear-gradient(180deg,rgba(6,9,13,.92),rgba(6,9,13,0))}
.brand .mark{font-weight:700;letter-spacing:.16em;font-size:13px}
.brand .mark span{color:var(--accent);margin:0 2px}
.brand .sub{font-size:11.5px;color:var(--dim);margin-top:3px;letter-spacing:.02em}
.meta{font-size:11px;color:var(--dim);font-family:var(--mono);max-width:46vw;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.top-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

button{font-family:var(--font);color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12px;cursor:pointer;
  transition:background .16s,border-color .16s,transform .1s;white-space:nowrap}
button:hover{background:rgba(255,255,255,.12)}
button:active{transform:translateY(1px)}
button.on{background:rgba(246,200,106,.18);border-color:rgba(246,200,106,.55);color:#ffe6b0}
button.primary{background:linear-gradient(180deg,#f7cf7d,#e0ae4c);color:#231a08;border-color:transparent;font-weight:600}
button.primary:hover{filter:brightness(1.06)}

/* ---------- panels ---------- */
.panel{position:fixed;z-index:18;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  padding:12px;overflow:auto;scrollbar-width:thin}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
#left{left:16px;top:78px;bottom:88px;width:214px}
#right{right:16px;top:78px;bottom:88px;width:352px}
.panel h3{margin:2px 0 8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.panel section+section{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

.views{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.views button{padding:6px 8px;font-size:11.5px;text-align:left}

#layers .layer{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:12px;color:#cfd8e3;cursor:pointer}
#layers input{accent-color:#f6c86a;width:13px;height:13px}

#sectionRow{display:none}
#sectionRow.on{display:block}
input[type=range]{width:100%;accent-color:#f6c86a;background:transparent}

/* ---------- right panel ---------- */
.tabs{display:flex;gap:4px;margin-bottom:10px;position:sticky;top:-12px;padding:6px 0;background:var(--panel);z-index:2}
.tab{flex:1;font-size:11px;padding:6px 4px}
.tabpanel{display:none}
.tabpanel.on{display:block}
.card{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:11px;padding:10px 11px;margin-bottom:9px;cursor:default}
#tab-schedule .card{cursor:pointer}
#tab-schedule .card:hover{background:rgba(255,255,255,.07)}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tag{font-family:var(--mono);font-size:10.5px;background:rgba(143,227,255,.14);color:var(--accent2);
  padding:2px 6px;border-radius:5px;border:1px solid rgba(143,227,255,.3)}
.card-t{font-size:12.5px;font-weight:600}
.card-t.big{font-size:14px;margin:2px 0 8px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;padding:2.5px 0;color:var(--dim)}
.kv b{color:#dfe7ef;font-weight:500;text-align:right}
p.small{font-size:11.5px;line-height:1.55;color:#b9c4d0;margin:6px 0 0}
p.note{font-size:11.5px;line-height:1.6;color:var(--dim);margin:0 0 10px}
ul.basis{margin:0;padding-left:16px}
ul.basis li{font-size:11.5px;line-height:1.6;color:#b9c4d0;margin-bottom:7px}
ul.lines{margin:6px 0 0;padding-left:16px}
ul.lines li{font-size:11.5px;line-height:1.55;color:#c2ccd8;margin-bottom:3px}
.pill{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:5px;font-weight:600}
.pill.high{background:rgba(239,91,91,.16);color:#ff9a9a}
.pill.medium{background:rgba(227,179,65,.16);color:#f2cf7d}
.pill.low{background:rgba(143,227,255,.14);color:#9fe4ff}
.pill.ok{background:rgba(62,207,142,.15);color:#7ee6b6}
.card.sev-high{border-left:2px solid var(--high)}
.card.sev-medium{border-left:2px solid var(--med)}
.card.sev-low{border-left:2px solid var(--accent2)}
.card.ok{border-left:2px solid var(--ok)}

/* ---------- selection card ---------- */
.floatingcard{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);width:min(420px,92vw);
  background:rgba(12,17,23,.94);border:1px solid rgba(246,200,106,.4);border-radius:13px;padding:12px 14px;
  opacity:0;pointer-events:none;transition:.22s;z-index:22;backdrop-filter:blur(12px)}
.floatingcard.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.floatingcard .x{position:absolute;right:8px;top:8px;background:none;border:none;color:var(--dim);font-size:13px;padding:2px 6px}

/* ---------- bottom ---------- */
#bottom{position:fixed;left:0;right:0;bottom:0;height:74px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 18px;z-index:20;background:linear-gradient(0deg,rgba(6,9,13,.94),rgba(6,9,13,0))}
.daynight{display:flex;align-items:center;gap:8px}
.daynight input[type=range]{width:150px}
.pillbtn{padding:5px 10px;font-size:11.5px}
.pillbtn.on{background:rgba(246,200,106,.2);border-color:rgba(246,200,106,.6)}
.mono{font-family:var(--mono);font-size:12px;color:var(--accent);min-width:44px}
.render{display:flex;gap:8px;align-items:center}
a.dl{font-size:12px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:9px;padding:7px 11px;white-space:nowrap}
a.dl:hover{background:rgba(255,255,255,.12)}

/* ---------- loader / toast ---------- */
#loader{position:fixed;inset:0;background:#080b0f;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;z-index:60;font-size:12.5px;color:var(--dim);transition:opacity .5s}
#loader.gone{opacity:0;pointer-events:none}
.ring{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent);
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;top:78px;transform:translate(-50%,-12px);background:rgba(12,17,23,.95);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:12px;color:#cfd8e3;
  opacity:0;transition:.25s;z-index:30;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- mobile ---------- */
#mobilebar{display:none}
@media (max-width:860px){
  #top{height:56px;padding:0 12px;gap:10px}
  .brand .sub{display:none}
  .meta{display:none}
  .top-actions{gap:6px}
  .top-actions button{padding:6px 8px;font-size:11px}
  #left,#right{top:auto;bottom:84px;height:min(54vh,430px);width:calc(100vw - 24px);left:12px;right:12px;
    transform:translateY(135%);opacity:0;pointer-events:none;transition:transform .28s,opacity .2s;border-radius:16px}
  #left.open,#right.open{transform:translateY(0);opacity:1;pointer-events:auto}
  #mobilebar{display:flex;position:fixed;left:12px;right:12px;bottom:14px;gap:8px;z-index:25}
  #mobilebar button{flex:1;padding:9px 0}
  #bottom{display:none}
  .floatingcard{bottom:74px}
}