/* ============================================================
   The six category walls of Command Center 04 - shared skin.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;background:#020202;color:#f3ead6;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wall{min-height:100vh;padding:10px 12px 64px;max-width:1900px;margin:auto}
.M{font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400}
.brand{display:grid;grid-template-columns:1fr;gap:8px}
.brand>div{border:1px solid #d8a93a;border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#110e06,#050403);min-width:0}
.brand img{width:64px;height:64px;object-fit:contain;flex:none}
.brand .l b,.brand .r b{display:block;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:12px;color:#f2c75a;letter-spacing:.06em}
.brand .l small,.brand .r small{display:block;color:#9a8f76;font-size:8px;letter-spacing:.18em;margin-top:4px}
.brand .r{justify-content:flex-end;text-align:right}
.brand .c{flex-direction:column;justify-content:center;text-align:center;gap:2px}
.brand .c h1{margin:0;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:22px;letter-spacing:.08em;color:#f2c75a;text-shadow:0 0 18px rgba(242,199,90,.35)}
.brand .c h2{margin:0;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:14px;letter-spacing:.3em;color:#5fd8ff}
.brand .c p{margin:4px 0 0;font-size:8.5px;letter-spacing:.24em;color:#d9cfb4;font-weight:800}
.brand .c p i{color:#f2c75a;font-style:normal;margin:0 6px}
.tabs{display:grid;grid-template-columns:auto repeat(8,1fr) 1.2fr;gap:5px;margin:8px 0}
.tabs a,.tabs .clock{border:1px solid #7a6428;border-radius:9px;background:#080706;padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;color:#c9a24a;font-size:8.5px;letter-spacing:.14em;font-weight:800;text-align:center;min-height:44px;cursor:pointer}
.tabs a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tabs a.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#100c04;border-color:#f2c75a}
.tabs a.home{background:#161208;color:#f2c75a;padding:8px 12px}
.tabs a.hot{border-color:#ff5a5a;color:#ff5a5a}
.tabs a:not(.on):hover{background:rgba(216,169,58,.12);color:#ffd45e}
.tabs .clock{flex-direction:column;gap:1px;line-height:1.1}
.tabs .clock small{color:#9a8f76;font-size:8px;letter-spacing:.14em}
.tabs .clock span{font:16px "Courier New",monospace;color:#f2c75a}
.tabs .clock b{font-size:9px;letter-spacing:.2em;color:#3ee88a}.tabs .clock b.y{color:#f2c75a}.tabs .clock b.r{color:#ff5a5a}
main{display:grid;grid-template-columns:230px 1fr 260px;grid-template-rows:auto auto;gap:8px}
.panel{border:1px solid #7a6428;border-radius:10px;background:#080706;padding:9px;min-width:0;position:relative}
.ph{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2e2610;padding:0 3px 7px;color:#d8a93a;font-size:9.5px;letter-spacing:.14em;font-family:Michroma,Orbitron,Inter,sans-serif}
.ph span{font-family:Inter,sans-serif;font-weight:800;font-size:8.5px;letter-spacing:.14em;color:#9a8f76}
.ph span.ok{color:#3ee88a}.ph span.hot{color:#ff5a5a}
.sysrow{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 3px;border-bottom:1px solid #1d1810;font-size:10px;color:#d9cfb4}
.sysrow em{font-style:normal;font-size:8.5px;letter-spacing:.14em;font-weight:800;color:#3ee88a;white-space:nowrap}
.sysrow em.dim{color:#8a8067}.sysrow em.hot{color:#ff5a5a}.sysrow em.y{color:#f2c75a}
.big{font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;color:#f2c75a;font-size:14px}
.left{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;gap:8px}
.left .panel:last-child{flex:1}
.mapbox{grid-column:2;grid-row:1;padding:0;overflow:hidden;min-height:430px}
#worldMap{position:absolute;inset:0}
.mapbox .tl{position:absolute;left:12px;top:10px;z-index:500}
.mapbox .tl small{display:block;color:#5fd8ff;font-size:8px;letter-spacing:.3em;font-weight:800;text-shadow:0 0 8px #000}
.mapbox .tl b{display:block;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;color:#fff;font-size:18px;letter-spacing:.1em;text-shadow:0 0 12px rgba(0,0,0,.9)}
.mon{grid-column:3;grid-row:2}
.mon .tr{padding:4px 3px 0}
.mon .tr h4{margin:0 0 6px;font-size:8px;letter-spacing:.28em;color:#5fd8ff;font-weight:800}
.mon .tr div{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#d9cfb4;padding:3px 0}
.mon .tr div b{font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;color:#fff;font-size:12px}
.mon .tr div b.r{color:#ff5a5a}
.mon .tr p{margin:8px 0 0;font-family:Michroma,Orbitron,Inter,sans-serif;font-size:8px;letter-spacing:.14em;color:#f2c75a;line-height:1.7}
.mapbox .foot{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:500;border:1px solid #d8a93a;border-radius:6px;background:rgba(5,4,3,.9);padding:6px 16px;font-family:Michroma,Orbitron,Inter,sans-serif;font-size:9px;letter-spacing:.24em;color:#f2c75a;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.mapbox .foot.hot{color:#ff5a5a;border-color:#ff5a5a;animation:beat 1s infinite alternate}
@keyframes beat{from{opacity:.55}to{opacity:1}}
.inc{position:absolute;left:10px;right:10px;bottom:38px;z-index:600;background:rgba(5,4,3,.94);border:1px solid #ff5a5a;border-radius:10px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;box-shadow:0 0 30px rgba(255,59,48,.25)}
.inc.rev{border-color:#f2c75a;box-shadow:none}.inc.sim{border-color:#8a8067;box-shadow:none}
.inc .face{width:58px;height:58px;border-radius:8px;object-fit:cover;background:#161208;border:1px solid #7a6428}
.inc small{display:block;color:#d8a93a;font-size:8px;letter-spacing:.2em;font-weight:800}
.inc h3{margin:2px 0;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:15px;color:#fff;letter-spacing:.04em}
.inc p{margin:0;font-size:9.5px;color:#d9cfb4;letter-spacing:.04em}
.inc p b{color:#f2c75a;font-weight:800}
.inc .sev{font-weight:800;color:#ff5a5a;font-size:10px;letter-spacing:.18em;padding:6px 10px;border:1px solid currentColor;border-radius:6px;white-space:nowrap;text-align:center}
.inc.rev .sev{color:#f2c75a}.inc.sim .sev{color:#8a8067}
.inc .actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
button,.btn{border:0;border-radius:6px;background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#100c04;font-weight:800;padding:9px 8px;font-size:8.5px;letter-spacing:.14em;cursor:pointer;width:100%;font-family:Inter,sans-serif;text-align:center;text-decoration:none;display:block;text-transform:uppercase}
button:disabled{opacity:.4;cursor:default}
.dark{background:#1e1a12;color:#f3ead6;border:1px solid #5a4a22}
.red{background:linear-gradient(135deg,#c93030,#8e1f1f);color:#fff}
.safe{background:linear-gradient(135deg,#2f9a4c,#17652d);color:#fff}
.hidden{display:none!important}
.feed{grid-column:3;grid-row:1;display:flex;flex-direction:column}
.queue{display:flex;gap:4px;flex-wrap:wrap;margin:7px 0 3px}
.chip{border:1px solid #5a4a22;border-radius:999px;padding:4px 9px;font-size:8px;letter-spacing:.1em;font-weight:800;color:#d9cfb4;cursor:pointer;background:#0d0b07;width:auto;display:flex;gap:5px;align-items:center;text-transform:none}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.chip.crit{color:#ff5a5a;border-color:#ff5a5a}
.chip.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#100c04;border-color:#f2c75a}
.log{flex:1;overflow:auto;min-height:120px;max-height:none}
.entry{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;padding:7px 3px;border-bottom:1px solid #1d1810}
.entry svg{width:14px;height:14px;stroke:#d8a93a;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.entry b{display:block;font-size:9.5px;color:#fff;letter-spacing:.04em}
.entry b.r{color:#ff5a5a}.entry b.g{color:#3ee88a}.entry b.d{color:#8a8067}
.entry span{display:block;font-size:9px;color:#9a8f76;margin-top:2px;line-height:1.35}
.entry em{display:none}
.entry time{font-size:8px;color:#8a8067;white-space:nowrap;letter-spacing:.06em}
/* ---- the sections under the map, one per tab ---- */
.sections{grid-column:2;grid-row:2;display:flex}
.sec.on{flex:1;display:flex;flex-direction:column}
.sec .tiles{flex:1;align-content:stretch}
.sec .row{margin-top:auto;padding-top:8px}
.sec{display:none;border:1px solid #7a6428;border-radius:10px;background:#080706;padding:12px 14px}
.sec.on{display:block}
.sec h3{margin:0 0 4px;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:12px;letter-spacing:.16em;color:#f2c75a}
.sec .lead{margin:0 0 10px;font-size:10.5px;color:#d9cfb4;line-height:1.55;max-width:900px}
.sec .lead i{font-style:normal;color:#8a8067}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.tile{border:1px solid #3a3020;border-radius:8px;padding:9px;background:#050403;min-width:0}
.tile b{display:block;font-size:8.5px;letter-spacing:.14em;color:#f2c75a;font-weight:800;margin-bottom:4px}
.tile span{display:block;font-size:9.5px;color:#9a8f76;line-height:1.45}
.tile i{display:inline-block;font-style:normal;font-size:7px;letter-spacing:.16em;font-weight:800;padding:2px 5px;border-radius:3px;border:1px solid;margin-top:6px}
.tile i.live{color:#3ee88a;border-color:#3ee88a}.tile i.plan{color:#8a8067;border-color:#5a4a22}.tile i.proto{color:#f2c75a;border-color:#8e7a1f}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.steps div{border-left:2px solid #d8a93a;padding:4px 10px;font-size:9.5px;color:#d9cfb4;line-height:1.45}
.steps div:before{counter-increment:s;content:counter(s);display:block;font-family:Michroma,Orbitron,Inter,sans-serif;color:#f2c75a;font-size:12px;margin-bottom:3px}
.sec .row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.konline{display:flex;gap:4px;justify-content:center;align-items:stretch;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.konline a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#c9a24a;font-family:Michroma,Orbitron,Inter,sans-serif;font-size:8px;letter-spacing:.14em;padding:10px 6px;border-radius:7px;border:1px solid transparent;line-height:1.2}
.konline a:hover{background:rgba(216,169,58,.12);color:#ffd45e}
.konline a.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#100c04}
footer{position:fixed;left:12px;right:12px;bottom:10px;border:1px solid #d8a93a;border-radius:10px;padding:4px;background:rgba(5,4,3,.97);z-index:900}

.lights{position:fixed;inset:0;pointer-events:none;z-index:800;opacity:0;transition:opacity .3s;box-shadow:0 0 0 14px #ff2a2a inset,0 0 120px 40px rgba(255,42,42,.55) inset}
.lights.on{opacity:1;animation:lights .8s infinite alternate}
@keyframes lights{from{opacity:.25}to{opacity:1}}
.flash{position:fixed;inset:0;background:rgba(255,40,40,.5);pointer-events:none;opacity:0;z-index:801}
.flash.on{animation:flash 1s 4}
@keyframes flash{0%,100%{opacity:0}50%{opacity:1}}
.soundnote{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:950;background:#f2c75a;color:#100c04;font-size:9px;font-weight:800;letter-spacing:.2em;padding:7px 14px;border-radius:999px}
.soundnote.off{display:none}
.leaflet-container{background:#03060c;font-family:Inter,sans-serif}
.leaflet-control-attribution{background:rgba(5,4,3,.7)!important;color:#6f675a!important;font-size:8px!important}
.leaflet-control-attribution a{color:#8a8067!important}
.pin{width:16px;height:16px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.8);animation:pulse 1.5s infinite;border:2px solid #fff}
.pin.y{background:#f2c75a;animation:none}
.phone{width:7px;height:7px;border-radius:50%;background:#3ee88a;box-shadow:0 0 6px #3ee88a;opacity:.85}
@keyframes pulse{70%{box-shadow:0 0 0 20px transparent}}
@media(max-width:1200px){main{grid-template-columns:200px 1fr 220px}.tiles,.steps,.sec .row{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  main{grid-template-columns:1fr}.left,.mapbox,.feed,.sections,.mon{grid-column:1;grid-row:auto}.feed{max-height:420px}
  .tabs{grid-template-columns:repeat(4,1fr)}.tabs a span{display:none}.tabs .clock{grid-column:1/-1}
  
  .inc .actions{grid-template-columns:1fr 1fr 1fr}.konline a{font-size:7px;padding:8px 4px}
}