:root{
  --bg:#0b1220;
  --panel:#0f1b2e;
  --glow:#19d3ff;
  --accent:#67ff9a;
  --warn:#ffcf5a;
  --bad:#ff6b6b;
  --text:#e6f1ff;
  --muted:#94a3b8;
}
*{box-sizing:border-box}
html,body,#app{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(25,211,255,.08), transparent 60%),
              radial-gradient(800px 400px at 10% -10%, rgba(103,255,154,.06), transparent 60%),
              var(--bg);
  overflow:hidden;
}
.app-header{
  height:72px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(15,27,46,.9), rgba(15,27,46,.6));
  backdrop-filter: blur(6px);
}
.brand{display:flex;align-items:center;gap:14px}
.brand h1{margin:0;font:700 22px/1 Orbitron, Inter, sans-serif;letter-spacing:.8px}
.logo-spark{width:14px;height:14px;border-radius:50%;background:var(--glow);
  box-shadow:0 0 16px var(--glow),0 0 40px rgba(25,211,255,.6)}
.roles{display:flex;gap:10px}
.role-btn{
  border:1px solid rgba(25,211,255,.35);
  color:var(--text);
  background:transparent;
  padding:8px 12px;border-radius:6px;cursor:pointer;
  transition:all .2s ease;
}
.role-btn:hover{box-shadow:0 0 16px rgba(25,211,255,.2) inset, 0 0 12px rgba(25,211,255,.2); transform:translateY(-1px)}
.role-btn.active{background:rgba(25,211,255,.15); border-color:var(--glow)}
.clock{font:600 14px/1.2 Inter;color:var(--muted)}

.hero{position:relative;height:260px}
#scene3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end}
.kpi-strip{width:100%;display:flex;gap:12px;overflow-x:auto;padding:12px 16px 16px}
.kpi{
  min-width:190px;background:linear-gradient(180deg, rgba(25,211,255,.08), rgba(25,211,255,.03));
  border:1px solid rgba(25,211,255,.25);border-radius:10px;padding:10px 12px;
  box-shadow:0 0 20px rgba(25,211,255,.08) inset;
}
.kpi .label{font-size:12px;color:var(--muted)}
.kpi .value{font:700 20px/1.3 Orbitron;color:var(--text)}
.kpi .delta.up{color:var(--accent)}
.kpi .delta.down{color:var(--bad)}

.dashboard{
  position:absolute;left:0;right:0;top:332px;bottom:0; padding:14px 16px 16px; overflow:auto;
}
.panel{display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap:14px; grid-auto-flow: dense}
.panel .wide{grid-column: span 2}
.hidden{display:none}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; overflow:hidden}
.card:before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 40px rgba(25,211,255,.05) inset}
.card h3{margin:0 0 6px 0;font:600 14px/1.2 Inter;letter-spacing:.2px;color:#bfe9ff}
.chart{width:100%;height:calc(100% - 22px)}
/* Details list (ops exception) */
.card .details{width:100%;height:calc(100% - 22px);overflow:auto;padding:6px 4px}
.card .details .row{display:grid;grid-template-columns: 70px 80px 1fr 40px 60px;gap:8px;padding:6px 8px;border-bottom:1px dashed rgba(255,255,255,.06);align-items:center;color:#cfe9ff;font-size:12px}
.card .details .row .id{font-family:Orbitron;color:#bfe9ff}
.card .details .row .prio.high{color:#ff6b6b}
.card .details .row .prio.mid{color:#ffcf5a}
.card .details .row .prio.low{color:#67ff9a}

/* Common card */
.card.common{display:flex;flex-direction:column}
.card .common-wrap{display:flex;gap:10px;align-items:stretch;height:calc(100% - 22px)}
.card .mini{flex:1 1 55%;height:100%}
.card .ticker{flex:1 1 45%;margin:0;padding:0 0 0 12px;list-style:none;overflow:hidden;position:relative}
.card .ticker li{color:#cfe9ff;font:400 12px/1.6 Inter;opacity:.9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.card .ticker:before{content:"最新公告";position:absolute;left:0;top:0;transform:translate(-100%,0);color:#94a3b8;font-size:11px}

/* Ticker simple auto-scroll */
@keyframes tickerScroll{0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
.card .ticker{--speed: 30s}
.card .ticker-inner{display:flex;flex-direction:column;gap:6px;animation: tickerScroll var(--speed) linear infinite}

/* Scrollbars */
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(25,211,255,.35), rgba(25,211,255,.15)); border-radius:8px}

/* Responsive fallback */
@media (max-width: 1400px){
  .panel{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 960px){
  .panel{grid-template-columns: 1fr}
  .brand h1{font-size:18px}
  .hero{height:220px}
}