/* fire-panel style status display */
.fpanel{background:var(--panel);color:var(--panel-ink);border-radius:16px;padding:22px;box-shadow:var(--shadow);display:grid;gap:16px;font-family:var(--mono)}
.fpanel .row1{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--panel-muted);letter-spacing:1px;text-transform:uppercase}
.lcd{background:#1c3a2a;color:#b9f5cf;border-radius:8px;padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;box-shadow:inset 0 0 0 1px #2a5a40}
.lcd b{font-size:20px;letter-spacing:1px}
.lcd span{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:13px}
.zone{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed #2c353a}
.zone .led{width:11px;height:11px;border-radius:50%;background:#2bd37a;box-shadow:0 0 8px #2bd37a;flex:none}
.zone .led.amb{background:#ffb627;box-shadow:0 0 8px #ffb627}
.zone em{margin-left:auto;font-style:normal;color:var(--panel-muted);font-variant-numeric:tabular-nums}
.fpanel .foot{display:flex;gap:10px;flex-wrap:wrap;font-size:12px}
.tag{border:1px solid #2f3a40;border-radius:6px;padding:4px 8px;color:var(--panel-muted)}
.tag.ok{color:#8fe0b4;border-color:#285a3f}

/* ---- demo ---- */
#demo{background:var(--surface-2);border-bottom:1px solid var(--line)}
.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:s}
.steps li{counter-increment:s;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px;transition:border-color .25s,background .25s,opacity .25s;opacity:.7}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;font-size:28px;line-height:1;color:var(--muted)}
.steps li b{font-family:var(--display);font-size:20px;font-weight:600;text-transform:uppercase;line-height:1.1}
.steps li span{font-size:14px;color:var(--muted);line-height:1.4}
.steps li.done{opacity:1}
.steps li.done::before{color:var(--green)}
.steps li.now{opacity:1;border-color:var(--green);background:var(--green-soft)}
.steps li.now::before{color:var(--green)}
@media (max-width:980px){.steps{grid-template-columns:repeat(5,minmax(170px,1fr));overflow-x:auto;padding-bottom:6px}}
.demoBar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.demoBar .hint{font-size:15px;color:var(--muted)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start}
@media (max-width:1060px){.stage{grid-template-columns:1fr}}

/* controller board */
.board{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.bhead{background:var(--panel);color:var(--panel-ink);display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap}
.bhead .nm{font-weight:700}
.bhead .site{color:var(--panel-muted);font-size:14px}
.bhead .rt{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{font:700 12px var(--body);text-transform:uppercase;letter-spacing:.6px;padding:4px 10px;border-radius:999px;background:#2b353b;color:#cdd6d0}
.pill.drill{background:var(--amber);color:#1d1400}
.pill.live{background:#d62828;color:#fff;animation:pulse 1.2s infinite}
.pill.closed{background:#1e9e57;color:#fff}
@keyframes pulse{50%{opacity:.55}}
.clock{font:600 24px var(--mono);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.bbody{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:0}
@media (max-width:700px){.bbody{grid-template-columns:1fr}}
.planCol{padding:14px;border-right:1px solid var(--line);display:grid;gap:10px;align-content:start}
@media (max-width:700px){.planCol{border-right:0;border-bottom:1px solid var(--line)}}
.ftabs{display:flex;gap:8px;flex-wrap:wrap}
.ftabs button{font:600 14px var(--body);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer;display:flex;gap:8px;align-items:center}
.ftabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ftabs .cnt{font-family:var(--mono);font-size:12px;opacity:.8}
.plan{width:100%;height:auto;display:block;background:var(--surface-2);border-radius:10px}
.plan .wall{fill:none;stroke:var(--ink);stroke-width:3}
.plan .ar{stroke-width:2;transition:fill .35s,stroke .35s}
.plan .ar.pending{fill:var(--surface);stroke:var(--muted);stroke-dasharray:6 5}
.plan .ar.clear{fill:var(--green-soft);stroke:var(--green)}
.plan .ar.issue{fill:var(--amber-soft);stroke:var(--amber)}
.plan .ar.flash{animation:flash .9s}
@keyframes flash{0%{stroke-width:7}}
.plan text{font:700 19px var(--body);fill:var(--ink)}
.plan text.st{font:600 15px var(--mono);fill:var(--muted)}
.plan .exit rect{fill:var(--green)}
.plan .exit text{fill:#fff;font:700 10px var(--body)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:2px solid}
.side{padding:14px;display:grid;gap:12px;align-content:start}
.startBtns{display:grid;gap:8px}
.startBtns .btn{justify-content:center;padding:10px}
.acBox{border-radius:10px;padding:10px 12px;background:var(--surface-2);color:var(--muted);font-size:14px;border:1px solid var(--line);transition:background .3s}
.acBox b{display:block;font-family:var(--mono);font-size:22px;color:var(--ink)}
.acBox.ok{background:var(--green-soft);border-color:var(--green);color:var(--green-ink)}
.acBox.ok b{color:var(--green-ink)}
.prog{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--green);transition:width .4s}
.lbl{font:700 12px var(--body);text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.roll{display:grid;gap:6px;font-size:14px}
.roll label{display:flex;gap:8px;align-items:center;cursor:pointer}
.roll input{width:18px;height:18px;accent-color:var(--green)}
.log{max-height:150px;overflow:auto;display:grid;gap:4px;font-size:13px;align-content:start}
.log div{display:grid;grid-template-columns:48px 1fr;gap:6px}
.log time{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.log .w{color:var(--amber-ink)}
.log .g{color:var(--green-ink)}
.sdBtn{width:100%;justify-content:center}

/* phones */
.phones{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.phone{width:236px;background:#0d0f10;border-radius:38px;padding:10px;box-shadow:var(--shadow);position:relative;flex:none}
.phone .scr{background:#f4f5f7;color:#16181d;border-radius:29px;height:470px;overflow:hidden;position:relative;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.phone .sbar{display:flex;justify-content:space-between;padding:10px 20px 4px;font:600 12px var(--body);color:#16181d}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:#0d0f10;border-radius:14px;z-index:3}
.who{font-size:11px;text-align:center;color:var(--muted);margin-top:8px;font-weight:600}
.lock{flex:1;display:grid;place-content:center;text-align:center;gap:6px;padding:20px;color:#5f6673}
.lock .t{font:600 44px var(--display);color:#16181d}
.notif{position:absolute;left:8px;right:8px;top:36px;background:rgba(255,255,255,.97);border-radius:16px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);z-index:4;cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:8px;text-align:left;border:0;font:inherit;color:#16181d}
.notif.show{transform:none}
.notif .ic{width:30px;height:30px;border-radius:8px;background:#0b7a45;display:grid;place-items:center}
.notif b{display:block;font-size:13px}
.notif small{display:block;color:#5f6673;font-size:12px}
.notif .app{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#8a93a3}
.app{display:flex;flex-direction:column;flex:1;min-height:0}
.app .ah{background:#111;color:#fff;padding:8px 12px;display:flex;align-items:center;gap:8px}
.app .ah b{font-size:13px}
.app .ah .pill{margin-left:auto;font-size:10px;padding:3px 7px}
.app .fh{padding:10px 12px 6px;display:grid;gap:6px}
.app .fh b{font-size:15px}
.app .fh .prog{background:#e2e5ea}
.app .fh small{color:#5f6673}
.alist{overflow:auto;padding:4px 10px 10px;display:grid;gap:6px;align-content:start}
.arow{background:#fff;border:1px solid #e2e5ea;border-radius:10px;padding:8px 10px;display:grid;gap:6px}
.arow .n{display:flex;align-items:center;gap:6px;font-weight:600}
.arow .dot{width:9px;height:9px;border-radius:50%;background:#c3c9d2;flex:none}
.arow.clear{background:#e3f6ea;border-color:#b7e3c7}.arow.clear .dot{background:#1e9e57}
.arow.issue{background:#fff4de;border-color:#f3d596}.arow.issue .dot{background:#e89b0c}
.arow .bb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.arow button{font:700 12px var(--body);border:0;border-radius:8px;padding:8px 4px;cursor:pointer}
.arow .c{background:#1e9e57;color:#fff}.arow .i{background:#e89b0c;color:#1b1300}
.arow .res{font-size:12px;color:#5f6673}
.app .done{margin:auto 10px 10px;padding:10px;border-radius:10px;background:#e3f6ea;color:#12623a;font-weight:700;text-align:center}
.phone.auto .arow button{pointer-events:none}

/* report */
.report{margin-top:26px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
@media (max-width:900px){.report{grid-template-columns:minmax(0,1fr)}}
.report>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.rep h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.rgrid div{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted)}
.rgrid b{display:block;font:600 20px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:520px){.rgrid{grid-template-columns:1fr 1fr}}
.rlist{font-size:14px;display:grid;gap:6px}
.rlist div{display:flex;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.rlist div span:last-child{margin-left:auto;font-family:var(--mono);color:var(--muted)}
.ok{color:var(--green-ink)} .warn{color:var(--amber-ink)}
.tblwrap{overflow-x:auto}
#demo table{border-collapse:collapse;width:100%;font-size:14px}
#demo th,#demo td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
#demo th{font:700 11px var(--body);text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
#demo td.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.badge{font:700 11px var(--body);text-transform:uppercase;padding:3px 8px;border-radius:6px}
.badge.drill{background:var(--amber-soft);color:var(--amber-ink)}
.badge.live{background:var(--red-soft);color:var(--red)}
tr.new td{background:var(--green-soft)}
.placeholder{color:var(--muted);font-size:15px}


#demo .btn{padding:11px 18px;font-size:16px}
#demo h3{font-size:24px}
#demo .fine{font-size:14px;color:var(--muted)}