:root{
  --bg:#e0e0e0;
  --panel:#181818;
  --panel2:#101010;
  --line:#505050;
  --text:#101010;
  --muted:#606060;
  --accent:#ffffff;
  --good:#c0c0c0;
  --warn:#d0d0d0;
  --bad:#a0a0a0;
  --mode:#c0c0c0;
  --rrc-red:#787878;
  --rrc-orange:#a8a8a8;
  --rrc-yellow:#d8d8d8;
  --rrc-green:#a0a0a0;
  --rrc-blue:#909090;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#e0e0e0}
body{
  margin:0;
  background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.96) 0,rgba(255,255,255,.55) 18%,transparent 38%),radial-gradient(circle at 84% 16%,rgba(255,255,255,.42) 0,transparent 30%),linear-gradient(180deg,#e8e8e8 0%,#d0d0d0 45%,#c0c0c0 100%);
  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 4px,rgba(0,0,0,.028) 5px);
  opacity:.25;
  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:#080808;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.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:0;
  display:grid;place-items:center;
  letter-spacing:3px;
  font-weight:800;
  background:transparent;
  color:#ffffff;backdrop-filter:blur(9px);
  box-shadow:none;
}
.brand h1{font-size:1rem;margin:0;letter-spacing:.12em;text-transform:uppercase;color:#ffffff}
.brand p{margin:4px 0 0;color:#f0f0f0;font-size:.66rem;letter-spacing:.09em}
.status-chip{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#f8f8f8;
  padding:8px 11px;border-radius:999px;
  font-size:.72rem;letter-spacing:.08em
}
.dot{
  display:inline-block;width:7px;height:7px;
  background:#c0c0c0;border-radius:50%;
  margin-right:7px;box-shadow:0 0 8px rgba(189,189,189,.65)
}

.nav{
  display:flex;gap:8px;overflow:auto;
  padding:12px 5vw;
  border-bottom:1px solid #484848;
  background:rgba(11,11,11,.88);
  margin-top:20px;backdrop-filter:blur(10px)
}
.nav button{
  background:none;color:#f8f8f8;border:0;
  padding:9px 12px;border-radius:4px;white-space:nowrap
}
.nav button:hover,.nav button.active{
  background:rgba(255,255,255,.08);color:#ffffff
}
.nav button.active{box-shadow:inset 0 -3px 0 var(--rrc-yellow)}

.control-room-btn{
  margin-left:auto!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.05)!important;
  color:#ffffff!important;
  backdrop-filter:blur(9px);
  font-weight:700;
}
.control-room-btn:hover{background:rgba(255,255,255,.12)!important;color:#ffffff!important}

main{
  max-width:1200px;margin:auto;
  padding:40px 5vw 70px;
  background:transparent;
  color:#101010
}
.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:#484848;letter-spacing:.16em;font-size:.72rem}
.hero h2{
  color:#ffffff;backdrop-filter:blur(9px);
  font-size:clamp(2.25rem,4vw,4.25rem);
  line-height:.94;margin:.3em 0;letter-spacing:-.045em
}
.lead{color:#202020;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 #484848
}
.primary{background:#101010;color:#ffffff}
.secondary,.search-row button{background:#202020;color:#ffffff}
.primary:hover{background:#202020}
.secondary:hover,.search-row button:hover{background:#303030}

.facility-card,.card,.notice,.record,.person,.incident,.camera{
  border:1px solid rgba(255,255,255,.36);
  background:rgba(19,19,19,.88);
  background-image:none;
  border-radius:7px;
  color:#ffffff;backdrop-filter:blur(9px)
}
.facility-card{padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.facility-head{
  display:flex;justify-content:space-between;
  color:#e0e0e0;font-size:.72rem;letter-spacing:.13em;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:12px
}
.metric{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.metric span{color:#e8e8e8}
.metric .ok,.ok{color:var(--good)}
.warn{color:var(--warn)}
.danger{color:var(--bad)}
.ghost{color:#d0d0d0}
.facility-card small{color:#d8d8d8;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:#f0f0f0;font-weight:600}
.big-number{font-size:2.8rem;margin:10px 0;color:#ffffff}
.card p{color:#e0e0e0}
.notice{
  margin-top:14px;padding:18px;display:flex;justify-content:space-between;gap:20px;
  border-left:4px solid var(--rrc-red)
}
.notice p{color:#f0f0f0;margin-bottom:0}
.notice span{color:#d8d8d8;white-space:nowrap}

h2{font-size:2rem;margin-top:0;color:#101010}
.subtle{color:#585858}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.34);border-radius:6px}
table{border-collapse:collapse;width:100%;min-width:680px;background:#282828;color:#f8f8f8}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid #484848;font-size:.9rem}
th{color:#f0f0f0;font-size:.72rem;letter-spacing:.08em;background:#202020}
.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:rgba(19,19,19,.88);border:1px solid rgba(255,255,255,.18);color:#ffffff;
  padding:12px 14px;border-radius:4px;outline:none
}
.search-row input::placeholder{color:#c8c8c8}
.search-row input:focus{border-color:#ffffff}
.record-list{display:grid;gap:10px}
.record{padding:16px;cursor:pointer;transition:.18s}
.record:hover{transform:translateX(3px);border-color:rgba(255,255,255,.5);background:rgba(31,31,31,.96)}
.record-head{display:flex;justify-content:space-between;gap:20px}
.record h3{margin:0;color:#ffffff}
.record p{color:#e0e0e0;margin-bottom:0}
.record code{color:#d0d0d0}
.person{padding:18px}
.avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:#282828;border:1px solid rgba(255,255,255,.18);margin-bottom:15px;color:#ffffff
}
.person p{color:#e0e0e0}
.clearance{font-size:.72rem;color:#f0f0f0;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.timeline{display:grid;gap:10px}
.incident{padding:17px;display:grid;grid-template-columns:150px 1fr;gap:20px}
.incident time{color:#d8d8d8;font-family:monospace}
.incident p{color:#e8e8e8;margin:4px 0}

.modal{
  position:fixed;inset:0;background:rgba(12,12,12,.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:#181818;border:1px solid rgba(255,255,255,.22);color:#ffffff;
  padding:25px;box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.close{position:absolute;right:12px;top:10px;background:none;border:0;color:#f0f0f0;font-size:1.7rem}

.terminal{
  background:#101010;border:1px solid #383838;padding:18px;color:#c8c8c8;
  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:#d8d8d8;font-family:inherit}
.login-box{max-width:420px;margin:20px auto}
.login-box input{
  width:100%;margin:7px 0;padding:11px;background:#383838;border:1px solid #686868;color:#ffffff
}
.login-box input::placeholder{color:#d8d8d8}
.error{color:#b0b0b0;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:#181818}
.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:#f0f0f0}
.camera .feedtext{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#b8b8b8;font:13px monospace;text-align:center
}
.camera.corrupt .feedtext{
  color:#d8d8d8;text-shadow:2px 0 #404040,-2px 0 #505050;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:#d8d8d8;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(255,255,255,.12) 9%,transparent 11% 70%,rgba(120,120,120,.08) 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 rgba(0,0,0,.18);
  padding:20px 5vw;color:#383838;font-size:.75rem;
  display:flex;justify-content:space-between;gap:20px;
  background:rgba(255,255,255,.28);backdrop-filter:blur(8px)
}
.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 #505050;background:#282828;
  color:#ffffff;backdrop-filter:blur(9px);font-size:.86rem;letter-spacing:.04em
}


/* One-time public-announcement crawl. The latest bulletin remains in the
   persistent announcement panel after this strip disappears. */
.announcement-ticker{
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  height:42px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#101010;
  color:#ffffff;
  border-bottom:1px solid #ffffff;
  box-shadow:0 5px 18px rgba(0,0,0,.20);
}
.announcement-ticker.hidden{display:none!important}
.announcement-ticker:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:linear-gradient(90deg,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%);
}
.announcement-ticker-track{
  width:max-content;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 0 4px 0;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  will-change:transform;
}
.announcement-ticker-track.is-scrolling{animation:rrcAnnouncementCrawl 13s linear 1 both}
.announcement-ticker-label{
  color:var(--rrc-yellow);
  font-weight:900;
  letter-spacing:.16em;
}
@keyframes rrcAnnouncementCrawl{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .announcement-ticker-track.is-scrolling{animation-duration:7s}
}

/* Modes remain in the same dark-gray family */
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background:linear-gradient(180deg,#e8e8e8 0%,#d0d0d0 50%,#c0c0c0 100%);
}
body[data-mode="ELEVATED"] .security-banner{display:block!important;background:#585858;color:#f0f0f0;border-color:#989898}
body[data-mode="LOCKDOWN"]{
  --line:#606060;--bad:#a8a8a8;
  background:#181818;background-image:none;color:#ffffff
}
body[data-mode="LOCKDOWN"] .security-banner{
  display:block!important;background:#404040;color:#ffffff;border-color:#909090;
  box-shadow:0 0 20px rgba(64,64,64,.45);animation:pulseBanner 1.6s infinite
}
body[data-mode="LOCKDOWN"] .dot{background:#909090;box-shadow:0 0 10px #909090}
@keyframes pulseBanner{50%{filter:brightness(.82)}}
body[data-mode="BLACKOUT"]{
  background:#101010;background-image:none;color:#f0f0f0;filter:saturate(.55)
}
body[data-mode="BLACKOUT"] .security-banner{
  display:block!important;background:#181818;color:#e8e8e8;border-color:#585858
}
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:#585858;color:#f0f0f0;border-color:#909090
}


.announcement-panel-head{
  font-size:.76rem;
  letter-spacing:.16em;
  color:#ffffff;
  font-weight:800;
  margin-bottom:10px
}
.announcement-panel-text{
  font-size:1rem;
  line-height:1.6;
}
.notice.announcement-panel{align-items:flex-start}
#announcement-panel-meta{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}

@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}
}















/* FINAL PUBLIC THEME OVERRIDES */
body{
  background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.96) 0,rgba(255,255,255,.55) 18%,transparent 38%),
             radial-gradient(circle at 84% 16%,rgba(255,255,255,.42) 0,transparent 30%),
             linear-gradient(180deg,#e8e8e8 0%,#d0d0d0 45%,#c0c0c0 100%)!important;
}
main{background:transparent!important;color:#101010!important}
.hero h2{
  color:#101010!important;
  font-size:clamp(1.95rem,3.2vw,3.55rem)!important;
  line-height:1.02!important;
  max-width:10ch!important;
  text-wrap:balance;
}
.lead,.eyebrow,h2,.subtle{color:#101010!important}
.notice.announcement-panel{
  background:rgba(14,14,14,.92)!important;
  border-left:4px solid #ffffff!important;
}
.announcement-panel-head,.announcement-panel-text,#announcement-panel-meta{color:#ffffff!important}
.control-room-btn{
  border:1px solid rgba(255,255,255,.22)!important;
  background:rgba(255,255,255,.05)!important;
  color:#ffffff!important;
  backdrop-filter:blur(9px);
}
.control-room-btn:hover{background:rgba(255,255,255,.12)!important;color:#ffffff!important}
.primary,.secondary,.search-row button{box-shadow:none!important}
.facility-card,.card,.record,.person,.incident,.camera,.table-wrap,.modal-card,.notice{
  background:rgba(17,17,17,.9)!important;
  border-color:rgba(255,255,255,.28)!important;
}
footer{
  background:rgba(255,255,255,.34)!important;
  color:#303030!important;
}








body[data-mode="NORMAL"],body[data-mode="ELEVATED"],body[data-mode="RECOVERY"]{
  background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.96) 0,rgba(255,255,255,.55) 18%,transparent 38%),
             radial-gradient(circle at 84% 16%,rgba(255,255,255,.42) 0,transparent 30%),
             linear-gradient(180deg,#e8e8e8 0%,#d0d0d0 45%,#c0c0c0 100%)!important;
}


/* =========================================================
   RRC MIST THEME — FINAL PALETTE LOCK
   Only black/white neutrals + the five RRC rainbow colors.
   ========================================================= */
:root{
  --rrc-red:#ff2d55;
  --rrc-orange:#ff7a00;
  --rrc-yellow:#ffd400;
  --rrc-green:#00c853;
  --rrc-blue:#1976ff;
  --good:var(--rrc-green);
  --warn:var(--rrc-yellow);
  --bad:var(--rrc-red);
  --text:#111111;
  --muted:#666666;
  --line:#555555;
}
html{background:#e8e8e8!important}
body,
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.98) 0,rgba(255,255,255,.78) 18%,rgba(255,255,255,0) 39%),
    radial-gradient(circle at 80% 22%,rgba(255,255,255,.86) 0,rgba(255,255,255,.42) 20%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 52% 76%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f7f7f7 0%,#e7e7e7 45%,#d2d2d2 100%)!important;
  color:#111111!important;
}
body:before{background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 4px,rgba(0,0,0,.025) 5px)!important}
.topbar{background:#070707!important;color:#ffffff!important}
.topbar:after,.admin-head:after{
  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%)!important;
  filter:saturate(1.2) contrast(1.08);
}
.brand h1,.brand p{color:#ffffff!important}
.status-chip{background:#171717!important;border-color:#555555!important;color:#ffffff!important}
.dot{background:var(--rrc-green)!important;box-shadow:0 0 9px var(--rrc-green)!important}
.nav{background:rgba(10,10,10,.94)!important;border-color:#555555!important}
.nav button{color:#eeeeee!important}
.nav button:hover,.nav button.active{background:#2b2b2b!important;color:#ffffff!important}
.nav button.active{box-shadow:inset 0 -3px 0 var(--rrc-yellow)!important}
.control-room-btn{border-color:#666666!important;background:#181818!important;color:#ffffff!important}
.control-room-btn:hover{background:#303030!important;color:#ffffff!important}
main{color:#111111!important}
.eyebrow{color:#333333!important}
.hero h2{
  color:#111111!important;
  font-size:clamp(2rem,3.25vw,3.35rem)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  backdrop-filter:none!important;
  max-width:760px;
}
.lead{color:#202020!important}
h2{color:#111111}
.subtle{color:#555555!important}
.primary,.secondary,.search-row button{border-color:#555555!important;color:#ffffff!important}
.primary{background:#101010!important}
.secondary,.search-row button{background:#252525!important}
.primary:hover,.secondary:hover,.search-row button:hover{background:#3a3a3a!important}
.facility-card,.card,.record,.person,.incident,.camera,.announcement-panel{
  background:rgba(18,18,18,.91)!important;
  background-image:none!important;
  border-color:#666666!important;
  color:#ffffff!important;
  backdrop-filter:blur(11px)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.14);
}
.facility-head,.facility-card small,.metric span,.card h3,.card p,.record p,.record code,.person p,.clearance,.incident time,.incident p{
  color:#e8e8e8!important;
}
.big-number,.record h3{color:#ffffff!important}
.metric{border-color:#4d4d4d!important}
.ok{color:var(--rrc-green)!important}
.warn{color:var(--rrc-yellow)!important}
.danger{color:var(--rrc-red)!important}
.ghost{color:#d0d0d0!important}
.table-wrap{border-color:#666666!important}
table{background:#1d1d1d!important;color:#ffffff!important}
th{background:#111111!important;color:#ffffff!important}
th,td{border-color:#4d4d4d!important}
.search-row input{background:#171717!important;border-color:#666666!important;color:#ffffff!important}
.search-row input::placeholder{color:#bdbdbd!important}
.search-row input:focus{border-color:#ffffff!important}
.record:hover{border-color:#ffffff!important;background:#292929!important}
.avatar{background:#2b2b2b!important;border-color:#666666!important;color:#ffffff!important}
.modal{background:rgba(0,0,0,.82)!important}
.modal-card{background:#171717!important;border-color:#666666!important;color:#ffffff!important}
.modal-card h2,.modal-card p{color:#ffffff}
.modal-card .subtle{color:#cfcfcf!important}
.close{color:#ffffff!important}
.terminal{background:#0b0b0b!important;border-color:#555555!important;color:var(--rrc-green)!important}
.terminal input{color:var(--rrc-green)!important}
.login-box input{background:#2d2d2d!important;border-color:#666666!important;color:#ffffff!important}
.error{color:var(--rrc-red)!important}
.camera{background:#111111!important}
.camera .label,.camera .feedtext,.secret-text{color:#dddddd!important}
#glitch-overlay{background:linear-gradient(90deg,rgba(0,0,0,0) 0 8%,rgba(255,255,255,.18) 9%,rgba(0,0,0,0) 11% 70%,rgba(255,45,85,.13) 72%,rgba(0,0,0,0) 74%)!important}
footer{background:rgba(255,255,255,.52)!important;color:#333333!important;border-color:#aaaaaa!important}
/* Persistent latest public bulletin from Supabase. */
.announcement-panel{
  position:relative;
  margin-top:14px;
  padding:19px 20px 19px 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  border-left:5px solid var(--rrc-red)!important;
  border-radius:7px;
}
.announcement-panel:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  border-radius:7px 7px 0 0;
  background:linear-gradient(90deg,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%);
}
.announcement-panel-head{color:#ffffff!important;font-size:.76rem;letter-spacing:.16em;font-weight:800;margin-bottom:10px}
.announcement-panel-text{color:#f2f2f2!important;font-size:1rem;line-height:1.6;margin-bottom:0}
#announcement-panel-meta{color:#cccccc!important;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
/* Mode colors stay inside the approved palette. */
body[data-mode="ELEVATED"] .security-banner{background:var(--rrc-yellow)!important;color:#000000!important;border-color:#000000!important}
body[data-mode="LOCKDOWN"]{background:#151515!important;color:#ffffff!important}
body[data-mode="LOCKDOWN"] .security-banner{background:var(--rrc-red)!important;color:#ffffff!important;border-color:#ffffff!important}
body[data-mode="LOCKDOWN"] .dot{background:var(--rrc-red)!important;box-shadow:0 0 10px var(--rrc-red)!important}
body[data-mode="BLACKOUT"]{background:#090909!important;color:#eeeeee!important;filter:none!important}
body[data-mode="BLACKOUT"] .security-banner{background:#111111!important;color:#ffffff!important;border-color:#777777!important}
body[data-mode="RECOVERY"] .security-banner{background:var(--rrc-green)!important;color:#000000!important;border-color:#000000!important}
/* Force the face to stay black even if an older browser cache keeps prior SVG styling. */









/* =========================================================
   RRC MIST THEME — SOFTER WHITE + FULL-BLEED HERO RAINBOW
   Final visual pass requested 2026-09-13.
   ========================================================= */
:root{
  /* Same five corporate hues, softened from the neon pass. */
  --rrc-red:#d95767;
  --rrc-orange:#dd8049;
  --rrc-yellow:#d6b84c;
  --rrc-green:#5a9b70;
  --rrc-blue:#5a81a7;
}

html{
  background:#f4f4f4!important;
  overflow-x:hidden;
}

body,
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background:
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.98) 0,rgba(255,255,255,.78) 24%,rgba(255,255,255,0) 48%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.90) 0,rgba(255,255,255,.52) 26%,rgba(255,255,255,0) 50%),
    radial-gradient(circle at 48% 78%,rgba(255,255,255,.58) 0,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#fdfdfd 0%,#f9f9f9 48%,#f2f2f2 100%)!important;
}

/* Keep the corporate stripes colorful, but no longer neon. */
.topbar:after{
  filter:saturate(.96) contrast(1.01)!important;
}

/* The full-bleed stripe lives exactly behind the corporate description. */
.hero-rainbow-band{
  position:relative;
  isolation:isolate;
  margin:22px 0 24px;
  padding:9px 0;
}
.hero-rainbow-band::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-7px;
  bottom:-7px;
  left:-100vw;
  right:-100vw;
  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%
  );
  box-shadow:0 1px 0 rgba(0,0,0,.16),0 -1px 0 rgba(0,0,0,.12);
}
.hero-rainbow-band .lead{
  position:relative;
  z-index:1;
  margin:0;
  max-width:690px;
  padding:13px 16px;
  border:1px solid #bcbcbc;
  border-radius:5px;
  background:rgba(255,255,255,.93)!important;
  color:#111111!important;
  box-shadow:0 5px 18px rgba(0,0,0,.13);
}

/* Let the dark data cards stand crisply against the paler mist. */
.facility-card,.card,.record,.person,.incident,.camera,.announcement-panel{
  box-shadow:0 16px 38px rgba(0,0,0,.16)!important;
}

/* Make the softened palette consistent everywhere the flower/stripes appear. */









@media (max-width:700px){
  .hero-rainbow-band{
    margin:18px 0 20px;
    padding:7px 0;
  }
  .hero-rainbow-band::before{top:-5px;bottom:-5px}
  .hero-rainbow-band .lead{padding:12px 14px}
}


/* HARD FACE COLOR LOCK — 2026-09-13 */



/* MIST GRADIENT MICRO-TUNE — softened vertical contrast */
body,
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background:
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.98) 0,rgba(255,255,255,.78) 24%,rgba(255,255,255,0) 48%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.90) 0,rgba(255,255,255,.52) 26%,rgba(255,255,255,0) 50%),
    radial-gradient(circle at 48% 78%,rgba(255,255,255,.58) 0,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#fdfdfd 0%,#f9f9f9 50%,#f2f2f2 100%)!important;
}








:root{
  /* tiny vibrance bump from the previous softened palette */
  --rrc-red:#df5b6b;
  --rrc-orange:#e1874f;
  --rrc-yellow:#dbbd53;
  --rrc-green:#61a377;
  --rrc-blue:#628ab0;
}

/* =========================================================
   RRC BRAND FLOWER V5 — single implementation only
   Pure HTML/CSS geometry. No SVG, no masking, no white mouth.
   ========================================================= */
:root{
  --rrc-red:#e15c6c;
  --rrc-orange:#e38a50;
  --rrc-yellow:#dfc050;
  --rrc-green:#60a677;
  --rrc-blue:#638db5;
}
.rrc-brand-flower-v7,
.rrc-brand-flower-v7 *{
  box-sizing:border-box!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.rrc-brand-flower-v7{
  position:relative!important;
  display:block!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  flex:0 0 60px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.rrc-brand-flower-v7 i{
  position:absolute!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  box-shadow:none!important;
}
.rrc-brand-flower-petal{
  width:25px!important;
  height:25px!important;
  border:0!important;
  border-radius:50%!important;
  z-index:1!important;
}
.rrc-brand-flower-red{left:17.5px!important;top:0!important;background:var(--rrc-red)!important}
.rrc-brand-flower-orange{left:34px!important;top:13px!important;background:var(--rrc-orange)!important}
.rrc-brand-flower-yellow{left:28px!important;top:34px!important;background:var(--rrc-yellow)!important}
.rrc-brand-flower-green{left:7px!important;top:34px!important;background:var(--rrc-green)!important}
.rrc-brand-flower-blue{left:1px!important;top:13px!important;background:var(--rrc-blue)!important}
.rrc-brand-flower-face{
  left:16px!important;
  top:16px!important;
  width:28px!important;
  height:28px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--rrc-yellow)!important;
  z-index:3!important;
}
.rrc-brand-flower-eye{
  top:25px!important;
  width:3.5px!important;
  height:3.5px!important;
  border:0!important;
  border-radius:50%!important;
  background:#111111!important;
  z-index:5!important;
}
.rrc-brand-flower-eye-left{left:23px!important}
.rrc-brand-flower-eye-right{left:33.5px!important}
.rrc-brand-flower-mouth{
  left:23.5px!important;
  top:30.5px!important;
  width:13px!important;
  height:9px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:3px solid #111111!important;
  border-radius:0 0 10px 10px!important;
  z-index:5!important;
  transform:none!important;
}

/* =========================================================
   RRC V9 — CROSS-BROWSER DARK FADE
   Deliberately uses one neutral grayscale linear gradient.
   No radial white mist, no warm/brown tint.
   ========================================================= */
html{
  background:#080808!important;
  background-image:none!important;
}
body,
body[data-mode="NORMAL"],
body[data-mode="ELEVATED"],
body[data-mode="RECOVERY"]{
  background-color:#080808!important;
  background-image:linear-gradient(
    180deg,
    #050505 0%,
    #090909 18%,
    #101010 38%,
    #171717 60%,
    #202020 80%,
    #2a2a2a 100%
  )!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-attachment:fixed!important;
  color:#f7f7f7!important;
  min-height:100vh!important;
}
main{
  background:transparent!important;
  color:#f7f7f7!important;
}
.hero .eyebrow,
.hero .lead,
.card p,
.subtle,
.facility-card small,
.notice,
.public-announcement-panel,
.public-announcement-panel *{
  color:inherit;
}
footer{
  background:rgba(20,20,20,.94)!important;
  color:#d9d9d9!important;
  border-color:#4b4b4b!important;
}
/* Keep emergency modes intentionally dark and neutral. */
body[data-mode="LOCKDOWN"]{
  background:#111111!important;
  color:#ffffff!important;
}
body[data-mode="BLACKOUT"]{
  background:#060606!important;
  color:#eeeeee!important;
}