/* Local demo visual system. Risk colours and simulation semantics remain in legend.js. */
:root {
  --bg:#091219; --panel:#101d26; --panel-2:#172b35;
  --line:#22353f; --line-2:#324c58; --ink:#e3edf1;
  --ink-dim:#a0b4be; --ink-faint:#7e98a5; --accent:#79d8d0;
  --mono:"Bahnschrift","Cascadia Mono",Consolas,monospace;
}
body { background:radial-gradient(ellipse at 55% 0%,#18313a55,transparent 60%),var(--bg); font-size:14px; -webkit-font-smoothing:antialiased; }
button,input,select { transition:background .18s,border-color .18s,box-shadow .18s; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:hover { filter:brightness(1.15); }
#app { grid-template-rows:auto auto auto minmax(340px,1fr) auto; height:100dvh; }
#topbar { min-height:76px; padding:14px 26px; gap:24px; flex-wrap:nowrap; background:#0d1921; border-bottom-color:#263a43; }
#topbar .sys { display:flex; align-items:center; gap:13px; font-size:20px; letter-spacing:1px; }
.brand-mark { display:grid; place-items:center; width:42px; height:46px; color:var(--accent); }
.brand-mark svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.35; }
#topbar .sys small { display:block; margin:3px 0 0; color:#829ca8; font-size:12px; letter-spacing:1.3px; }
#topbar>.sep { display:none; }
#clock { margin-left:auto; display:grid; grid-template-columns:auto auto; align-items:center; column-gap:12px; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums; }
#clock .day { font:12px "Segoe UI",sans-serif; margin:0; }
#clock .chip { grid-column:1/-1; text-align:right; margin:4px 0 0; font:12px "Microsoft YaHei",sans-serif; color:#90aaaF; }
.demo-badge { margin-left:0; gap:9px; font-size:12px; padding-left:22px; border-left:1px solid var(--line); }
.demo-badge .dotp { width:6px; height:6px; box-shadow:none; }
.demo-badge .tag { border:1px solid #56717a; color:#c2d6dc; padding:5px 9px; border-radius:5px; letter-spacing:0; }
#playbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:11px 26px; background:#0e1b23; border-bottom:1px solid #21353e; }
.toolbar-label { font-size:12px; font-weight:600; color:#90abb6; letter-spacing:1px; }
#playbar .sep { height:22px; width:1px; background:var(--line); }
.ctrl { gap:8px; }
.ctrl label { font-size:12px; }
.ctrl select,.ctrl input,.ctrl button,#sceneDesc select { background:#152731; border-color:#30454f; height:32px; border-radius:5px; font-size:12px; padding:4px 10px; }
.ctrl select { color:#c1d2d9; }
.ctrl input::placeholder { color:#7b949f; }
.ctrl select:hover,.ctrl input:hover,.ctrl button:hover { border-color:#709992; }
#btnPause { color:#a0e6df; background:#1c3b3d; border-color:#3d6a66; }
#kfSelect { max-width:260px; }
#overview { display:flex; align-items:center; gap:26px; padding:19px 26px 17px; min-width:0; }
.overview-heading { flex:1; min-width:230px; }
.eyebrow { font-size:10px; color:#8ba4ae; letter-spacing:1.8px; }
h1 { font-size:25px; font-weight:600; letter-spacing:2px; line-height:1.4; margin-top:3px; }
.overview-heading p { font-size:12px; color:#829ba6; margin-top:4px; }
#hbCenter { display:grid; grid-template-columns:repeat(3,minmax(135px,1fr)); gap:0; flex-wrap:nowrap; flex:1.25; max-width:700px; }
#hbCenter .kpi { align-items:flex-start; padding:0 24px; border-left:1px solid #2b3c45; gap:4px; }
#hbCenter .kpi .v { font-size:34px; line-height:1.12; color:#e8f1f4; font-weight:500; letter-spacing:-.6px; }
#hbCenter .kpi:first-child .v { color:#94e1d8; }
#hbCenter .kpi .k { font-size:12px; color:#aec0c8; }
#hbCenter .kpi .d { font-size:10px; line-height:1.45; color:#8ca2ad; opacity:1; white-space:normal; }
#main { padding:0 22px 16px; gap:14px; grid-template-columns:280px minmax(0,1fr) 350px; }
.col { gap:14px; }
.panel { border-color:#263a45; border-radius:9px; background:linear-gradient(140deg,#13232d,#101d26 60%); box-shadow:0 8px 24px #00000014; }
.panel>.ph { padding:13px 15px; gap:9px; min-height:47px; border-bottom:1px solid #263a43; }
.panel>.ph b { font-size:14px; font-weight:600; letter-spacing:.5px; }
.panel>.ph .right { font-size:12px; gap:8px; }
.panel-index { color:#6d969e; font:12px var(--mono); border-right:1px solid #354d58; padding-right:9px; }
#sceneCard { border-top:2px solid #649f9c; }
#sceneCard>.body { padding:13px 15px!important; max-height:170px; }
#sceneName { font-size:15px!important; font-weight:500; line-height:1.6; color:#d7e7ec!important; }
#sceneDesc { font-size:12px!important; line-height:1.85!important; margin-top:8px!important; color:#98adb8!important; }
#sceneMeta { font:12px var(--mono); color:#91b6bc; }
#regionCard { height:260px; }
#regionList { padding:7px 14px; }
.region-row { flex-wrap:wrap; gap:6px; padding:10px 0; border-bottom:1px solid #213741; font-size:13px; }
.region-row .dot { width:6px; height:6px; margin-right:2px; }
.region-row .cnt { font-size:12px; }
.region-row .haz { padding:2px 6px; border-radius:4px; font-size:11px; }
#eventCard { min-height:150px; }
#evCount { font-size:11px; color:#8ca5af; }
#evFilterBtn { font-size:11px; padding:3px 5px; border-radius:4px; white-space:nowrap; }
#evFilterBtn[aria-pressed=true] { background:#294942!important; color:#b0ece3!important; }
.event-empty { min-height:150px; height:100%; padding:22px 15px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.empty-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:12px; border:1px solid #39535e; border-radius:50%; color:#87a4b0; font:30px Georgia,serif; }
.event-empty strong { font-size:14px; font-weight:500; color:#b7cbd4; }
.event-empty p { color:#809ba7; font-size:12px; line-height:1.8; margin-top:7px; }
.empty-caption { margin-top:18px; font-size:10px; letter-spacing:1px; color:#7994a0; }
.ev-row { padding:13px 12px; gap:5px; grid-template-columns:48px 7px minmax(0,1fr); }
.ev-row>.wfb { grid-column:3; justify-self:start; margin-top:4px; }
.ev-row .tm { font-size:10px; }
.ev-row .t .tt { white-space:normal; line-height:1.6; font-size:12px; }
.ev-row .badges { margin-top:6px; flex-wrap:wrap; }
.ev-row:hover,.ev-row.sel { background:#1a323d; }
#mapCard { background:#0c1c25; }
#mapCard>.ph:first-child { flex-wrap:wrap; }
#mapCard>.ph .right { flex-wrap:wrap; }
#btnChans { background:#1c323c; border-color:#3b5660; color:#b4d4d9; font-size:12px; padding:4px 8px; height:29px; border-radius:5px; }
#mapLayers { gap:7px; padding:10px 13px; border-bottom-color:#233a44; background:#0e202a; }
#mapLayers label { gap:5px; padding:4px 7px; border:1px solid #2b414c; border-radius:4px; color:#9fb6c0; font-size:11px; line-height:1.4; }
#mapLayers label:has(input:checked) { background:#1c333d; border-color:#3a5861; color:#c4dce1; }
#mapLayers input { width:11px; height:11px; }
#planBox { padding:12px 12px 44px; background:radial-gradient(ellipse at 50% 45%,#193b4344,transparent 70%); }
#planBox svg { border:none; border-radius:0; background:transparent; }
#planBox svg text { font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
#planBox .lbl-mini { fill:#8faab6; font-size:9px; }
#planBox .lbl-sec { fill:#c8dce4; font-size:10px; }
#planBox svg [data-oid]:hover { filter:drop-shadow(0 0 3px #d6efff); stroke:#fff; }
#mapFoot { left:15px; right:15px; bottom:12px; padding-top:8px; border-top:1px solid #263d46; font-size:10px; color:#91a9b5; }
.map-corner { position:absolute; top:140px; right:20px; display:flex; flex-direction:column; gap:3px; color:#7a99a5; font:10px var(--mono); pointer-events:none; }
.map-corner span { font-size:9px; }
#chartTabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding:8px 10px; min-height:49px; background:#0f202a; }
#chartTabs button { padding:7px 1px; border-radius:5px; font-size:12px; white-space:nowrap; }
#chartTabs button.on { background:#274440; border:1px solid #466f68; color:#b6ede2; }
#chartPane>.cap-zone { padding:9px 13px; border-bottom:1px solid #213640; min-height:38px; }
#chartPane>.cap-zone .cap-txt { color:#91a9b5; font-size:11px; }
#chartPane>.echbox>.ech-stage { top:12px; bottom:7px; }
#healthbar { grid-template-columns:minmax(290px,1.1fr) minmax(290px,1fr) minmax(260px,.85fr); gap:22px; padding:14px 26px 31px; background:#0e1b23; border-top-color:#293b45; }
#edges .cap,#hbVersions .cap { font-size:11px; color:#a5bac4; letter-spacing:.4px; margin-bottom:7px; }
#edgeRows { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
.edge-row { gap:6px; font-size:11px; }
.edge-row .dot { width:5px; height:5px; }
.edge-row .en { width:auto; font-size:11px; }
.edge-row .note { font-size:10px; }
#performanceTargets { border-left:1px solid #2b3d46; padding-left:22px; }
.kpi.cand { padding:0; border:0; }
.kpi.cand .cand-h { font-size:11px; color:#acbec7; margin-bottom:5px; }
.kpi.cand .cand-h .ref { display:block; font-size:10px; margin-top:2px; }
.kpi.cand .cand-row { font-size:11px; color:#91adb7; display:inline; }
#hbVersions { font-size:11px; text-align:left; border-left:1px solid #2b3d46; padding-left:22px; }
#hbVersions .ref { font-size:10px; }
#wm { font-size:10px; padding-bottom:6px; color:#8096a2; letter-spacing:.4px; }
#wm::before,#wm::after { content:none; }
.spl::after { background:transparent; }
.spl:hover::after,.spl.drag::after { background:#639e9c; }
#pop,.tblPanel { background:#11232d; border-color:#415f6d; border-radius:12px; }
#pop { width:min(900px,94vw); padding:23px; }
#overlay,#tblOver { background:#030b13bb; backdrop-filter:blur(7px); }
.el { background:#152b36; border-color:#2b4551; border-radius:7px; padding:13px; }
.el h4,.el p,.el li { font-size:13px; }
#popOps button,#popOps input,.tblBar select,.tblBar input,.tblBar button { border-color:#3c5865; border-radius:5px; min-height:32px; background:#1b3540; }
table.tbl { font-size:12px; }
table.tbl th { background:#203944; padding:10px; }
table.tbl td { padding:9px 10px; }
.toast { background:#18313d; border-color:#436370; padding:12px 15px; border-radius:7px; }
@media(min-width:1600px) and (min-height:940px) {
  #main { padding-bottom:20px; } #overview { padding-top:25px; padding-bottom:23px; }
  #regionCard { height:280px; } #sceneCard>.body { max-height:190px; }
  #sceneDesc { font-size:13px!important; } .region-row { padding:12px 0; }
}
@media(max-height:860px) and (min-width:1251px) {
  html,body { overflow:auto; } #app { height:auto; min-height:100dvh; grid-template-rows:auto auto auto minmax(510px,1fr) auto; }
}
@media(max-width:1250px) {
  html,body { height:auto; overflow:auto; }
  #app { height:auto; min-height:100dvh; grid-template-rows:auto auto auto auto auto; }
  #topbar { padding:15px 20px; gap:16px; } #topbar .sys { font-size:18px; }
  .demo-badge { padding-left:14px; } #playbar { padding:12px 20px; gap:10px 14px; }
  #overview { padding:20px; gap:15px; } #hbCenter .kpi { padding:0 15px; }
  #hbCenter .kpi .v { font-size:29px; }
  #main { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)!important; grid-template-rows:560px minmax(560px,auto); padding:0 20px 20px; }
  #mapCard { grid-column:1/-1; grid-row:1; }
  #main>.col:first-child { grid-column:1; grid-row:2; }
  #chartCol { grid-column:2; grid-row:2; }
  .spl { display:none!important; } #regionCard { height:245px; }
  #healthbar { padding:18px 20px; grid-template-columns:1fr 1fr; }
  #hbVersions { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; }
  #wm { position:static; background:#0e1b23; padding:8px 20px 12px; }
}
@media(max-width:760px) {
  #topbar { flex-wrap:wrap; padding:15px; } #topbar .sys { width:100%; font-size:18px; }
  #clock { margin-left:0; font-size:21px; } .demo-badge { margin-left:auto; border:0; padding:0; }
  #playbar { padding:12px 15px; gap:10px; } .toolbar-label,#playbar>.sep { display:none; }
  .ctrl { flex-wrap:wrap; gap:6px; } #ctrlScene { width:100%; }
  #sceneSelect { flex:1; max-width:none!important; min-width:0; } #kfSelect { max-width:160px; }
  #overview { flex-direction:column; align-items:stretch; padding:20px 15px; }
  .overview-heading { min-width:0; } .overview-heading h1 { font-size:24px; }
  #hbCenter { width:100%; max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:8px; }
  #hbCenter .kpi { padding:0 10px; } #hbCenter .kpi:first-child { border-left:0; padding-left:0; }
  #hbCenter .kpi .v { font-size:27px; } #hbCenter .kpi .k { white-space:normal; font-size:11px; }
  #main { display:flex!important; flex-direction:column; padding:0 12px 16px; gap:14px; }
  #mapCard { order:-1; height:520px; flex:none; } #chartCol { height:540px; flex:none; }
  #main>.col:first-child { display:grid; grid-template-columns:1fr; }
  #sceneCard>.body { max-height:none; } #eventCard { min-height:210px; }
  #healthbar { padding:18px 16px; grid-template-columns:1fr; gap:18px; }
  #performanceTargets { border-left:0; padding:15px 0 0; border-top:1px solid var(--line); }
  #hbVersions { grid-column:auto; } #pop .grid6 { grid-template-columns:1fr; }
  #mapFoot { font-size:9px; } #pop { padding:16px; } #clock .day { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}