:root{
  --bg:#16191c;
  --panel:#24292e;
  --panel2:#1e2327;
  --line:#49525a;
  --text:#f5f7f8;
  --muted:#c2c9ce;
  --accent:#eef2f4;
  --good:#82d9a8;
  --warn:#f0cb72;
  --bad:#f08c8c;
  --mode:#bac4cb;
  --rrc-red:#c94d5d;
  --rrc-orange:#d8784c;
  --rrc-yellow:#d2b749;
  --rrc-green:#4f8b68;
  --rrc-blue:#4f779b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#16191c}
body{
  margin:0;
  background:#16191c;
  background-image:none;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  min-height:100vh;
  transition:background .35s,color .35s;
}
body:before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.016) 4px);
  z-index:99;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 5vw;
  border-bottom:0;
  background:#0f1215;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 14px rgba(0,0,0,.32);
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-20px;
  height:20px;
  background:linear-gradient(
    to bottom,
    var(--rrc-red) 0 20%,
    var(--rrc-orange) 20% 40%,
    var(--rrc-yellow) 40% 60%,
    var(--rrc-green) 60% 80%,
    var(--rrc-blue) 80% 100%
  );
}
.brand{display:flex;gap:14px;align-items:center}
.mark{
  width:48px;height:48px;
  border:1px solid #5d666f;
  display:grid;place-items:center;
  letter-spacing:3px;
  font-weight:800;
  background:#2a3136;
  color:#fff;
  box-shadow:none;
}
.brand h1{font-size:1rem;margin:0;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.brand p{margin:5px 0 0;color:#d7dde1;font-size:.75rem;letter-spacing:.1em}
.status-chip{
  border:1px solid #4f6c5c;
  background:#213128;
  color:#d6f1e2;
  padding:8px 11px;border-radius:999px;
  font-size:.72rem;letter-spacing:.08em
}
.dot{
  display:inline-block;width:7px;height:7px;
  background:#77d59c;border-radius:50%;
  margin-right:7px;box-shadow:0 0 8px rgba(119,213,156,.65)
}

.nav{
  display:flex;gap:8px;overflow:auto;
  padding:12px 5vw;
  border-bottom:1px solid #434c54;
  background:#1a1f23;
  margin-top:20px
}
.nav button{
  background:none;color:#e5eaed;border:0;
  padding:9px 12px;border-radius:4px;white-space:nowrap
}
.nav button:hover,.nav button.active{
  background:#30373d;color:#fff
}
.nav button.active{box-shadow:inset 0 -3px 0 var(--rrc-blue)}

main{
  max-width:1200px;margin:auto;
  padding:40px 5vw 70px;
  background:#16191c;
  color:#f5f7f8
}
.panel{display:none;animation:fade .25s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}

.hero{
  display:grid;grid-template-columns:1.4fr .8fr;gap:40px;
  align-items:center;min-height:420px
}
.eyebrow{color:#d6e1e7;letter-spacing:.16em;font-size:.72rem}
.hero h2{
  color:#fff;
  font-size:clamp(2.5rem,6vw,5.7rem);
  line-height:.94;margin:.3em 0;letter-spacing:-.045em
}
.lead{color:#eef2f4;max-width:690px;font-size:1.08rem;line-height:1.7}
.hero-actions{display:flex;gap:10px;margin-top:24px}

.primary,.secondary,.search-row button{
  padding:12px 16px;border-radius:4px;border:1px solid #717c85
}
.primary{background:#eef2f4;color:#1b2125}
.secondary,.search-row button{background:#2d3439;color:#fff}
.primary:hover{background:#fff}
.secondary:hover,.search-row button:hover{background:#394147}

.facility-card,.card,.notice,.record,.person,.incident,.camera{
  border:1px solid #475058;
  background:#24292e;
  background-image:none;
  border-radius:7px;
  color:#fff
}
.facility-card{padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.facility-head{
  display:flex;justify-content:space-between;
  color:#dde3e6;font-size:.72rem;letter-spacing:.13em;
  border-bottom:1px solid #515a62;padding-bottom:12px
}
.metric{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #424a51}
.metric span{color:#e0e5e8}
.metric .ok,.ok{color:var(--good)}
.warn{color:var(--warn)}
.danger{color:var(--bad)}
.ghost{color:#c0c6ca}
.facility-card small{color:#c6cdd1;display:block;margin-top:12px}

.grid{display:grid;gap:14px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.stat-grid{grid-template-columns:repeat(4,1fr)}
.card{padding:18px;min-height:150px}
.card h3{font-size:.85rem;color:#e6ebee;font-weight:600}
.big-number{font-size:2.8rem;margin:10px 0;color:#fff}
.card p{color:#d5dade}
.notice{
  margin-top:14px;padding:18px;display:flex;justify-content:space-between;gap:20px;
  border-left:4px solid var(--rrc-yellow)
}
.notice p{color:#e2e7e9;margin-bottom:0}
.notice span{color:#ccd2d6;white-space:nowrap}

h2{font-size:2rem;margin-top:0;color:#fff}
.subtle{color:#d0d6da}
.table-wrap{overflow:auto;border:1px solid #4b545c;border-radius:6px}
table{border-collapse:collapse;width:100%;min-width:680px;background:#23282d;color:#f5f7f8}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid #3f4850;font-size:.9rem}
th{color:#f1f4f5;font-size:.72rem;letter-spacing:.08em;background:#1b2024}
.tag{border:1px solid currentColor;padding:4px 7px;border-radius:3px;font-size:.7rem}
.ops-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.ops-grid .card{min-height:120px}

.search-row{display:flex;gap:10px;margin:20px 0}
.search-row input{
  flex:1;background:#30363b;border:1px solid #5d6770;color:#fff;
  padding:12px 14px;border-radius:4px;outline:none
}
.search-row input::placeholder{color:#d0d6da}
.search-row input:focus{border-color:#aeb8bf}
.record-list{display:grid;gap:10px}
.record{padding:16px;cursor:pointer;transition:.18s}
.record:hover{transform:translateX(3px);border-color:#737e87;background:#2c3238}
.record-head{display:flex;justify-content:space-between;gap:20px}
.record h3{margin:0;color:#fff}
.record p{color:#dfe4e6;margin-bottom:0}
.record code{color:#cbd2d6}
.person{padding:18px}
.avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:#353c42;border:1px solid #5f6972;margin-bottom:15px;color:#fff
}
.person p{color:#dce1e4}
.clearance{font-size:.72rem;color:#eef1f3;border-top:1px solid #485158;padding-top:10px}
.timeline{display:grid;gap:10px}
.incident{padding:17px;display:grid;grid-template-columns:150px 1fr;gap:20px}
.incident time{color:#d2d8dc;font-family:monospace}
.incident p{color:#e1e6e8;margin:4px 0}

.modal{
  position:fixed;inset:0;background:rgba(10,12,14,.82);
  display:grid;place-items:center;padding:20px;z-index:100
}
.modal.hidden{display:none}
.modal-card{
  position:relative;width:min(860px,95vw);max-height:88vh;overflow:auto;
  background:#252a2f;border:1px solid #5d6770;color:#fff;
  padding:25px;box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.close{position:absolute;right:12px;top:10px;background:none;border:0;color:#f1f4f5;font-size:1.7rem}

.terminal{
  background:#101513;border:1px solid #2b4035;padding:18px;color:#93d7ac;
  font-family:Consolas,monospace;min-height:360px
}
.terminal-output{white-space:pre-wrap;line-height:1.5;min-height:260px}
.terminal-line{display:flex}.terminal-line span{margin-right:8px}
.terminal input{flex:1;background:none;border:0;outline:none;color:#a9e4bd;font-family:inherit}
.login-box{max-width:420px;margin:20px auto}
.login-box input{
  width:100%;margin:7px 0;padding:11px;background:#30363b;border:1px solid #5d6770;color:#fff
}
.login-box input::placeholder{color:#d0d6da}
.error{color:#ff9a9a;font-family:monospace;font-size:.83rem;min-height:24px}

.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.camera{overflow:hidden;position:relative;aspect-ratio:16/9;background:#12181d}
.camera:after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 4px)
}
.camera .label{position:absolute;top:9px;left:9px;font:12px monospace;color:#eef2f4}
.camera .feedtext{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#aeb8be;font:13px monospace;text-align:center
}
.camera.corrupt .feedtext{
  color:#d1d7da;text-shadow:2px 0 #633,-2px 0 #355;animation:jitter .18s infinite
}
@keyframes jitter{0%{transform:translate(0)}50%{transform:translate(1px,-1px)}100%{transform:translate(-1px,1px)}}
.secret-text{font-family:monospace;color:#d5dadd;letter-spacing:.08em}

#glitch-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:999;display:none;
  background:linear-gradient(90deg,transparent 0 8%,rgba(177,218,227,.08) 9%,transparent 11% 70%,rgba(198,114,114,.05) 72%,transparent 74%)
}
#glitch-overlay.active{display:block;animation:flash .14s steps(2) 4}
@keyframes flash{50%{transform:translateX(5px);filter:contrast(1.5)}}

footer{
  border-top:1px solid #404951;
  padding:20px 5vw;color:#d1d7da;font-size:.75rem;
  display:flex;justify-content:space-between;gap:20px;
  background:#111519
}
.security-banner{
  position:sticky;top:0;z-index:50;text-align:center;padding:14px 20px;
  font-weight:800;letter-spacing:.16em;border-bottom:1px solid currentColor
}
.security-banner small{display:block;margin-top:5px;letter-spacing:.08em;font-weight:500}
.announcement{
  padding:11px 5vw;border-bottom:1px solid #465058;background:#272c31;
  color:#fff;font-size:.86rem;letter-spacing:.04em
}

/* Modes remain in the same dark-gray family */
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background:#16191c;
  background-image:none;
}
body[data-mode="ELEVATED"] .security-banner{display:block!important;background:#635535;color:#fff4cf;border-color:#b59b58}
body[data-mode="LOCKDOWN"]{
  --line:#7d5656;--bad:#ff8e8e;
  background:#17181b;background-image:none;color:#fff
}
body[data-mode="LOCKDOWN"] .security-banner{
  display:block!important;background:#7d3030;color:#fff;border-color:#e37878;
  box-shadow:0 0 20px rgba(125,48,48,.45);animation:pulseBanner 1.6s infinite
}
body[data-mode="LOCKDOWN"] .dot{background:#ff7777;box-shadow:0 0 10px #ff7777}
@keyframes pulseBanner{50%{filter:brightness(.82)}}
body[data-mode="BLACKOUT"]{
  background:#0d1012;background-image:none;color:#eef1f3;filter:saturate(.55)
}
body[data-mode="BLACKOUT"] .security-banner{
  display:block!important;background:#191c1f;color:#e3e7e9;border-color:#555
}
body[data-mode="BLACKOUT"] .record:nth-child(3n),
body[data-mode="BLACKOUT"] .card:nth-child(2n){opacity:.5;filter:blur(.2px)}
body[data-mode="RECOVERY"] .security-banner{
  display:block!important;background:#535748;color:#f2f0d7;border-color:#8c9172
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid.three,.ops-grid,.camera-grid,.stat-grid{grid-template-columns:1fr 1fr}
  .status-chip{display:none}
}
@media(max-width:600px){
  .grid.three,.ops-grid,.camera-grid,.stat-grid{grid-template-columns:1fr}
  .incident{grid-template-columns:1fr}
  .notice{flex-direction:column}
  .topbar{align-items:flex-start}
  .brand h1{font-size:.82rem}
}