/* ============================================================
   THE SANCTUM — the temple interior (you've passed the hood)
   Same world as /portal/ (Cinzel · Chakra Petch · divine green),
   but a control surface: dense, calm, reverent. No gamer-RGB.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Chakra+Petch:wght@400;500;700&display=swap");

:root{
  --green:#2bff88; --neon:#46ffa0; --bg:#04050b;
  --ink:#e7e9f3; --mute:rgba(231,233,243,.55); --faint:rgba(231,233,243,.34);
  --hair:rgba(70,255,160,.18); --panel:rgba(8,12,18,.55);
  --media:#a45cff; --cloud:#2f9be6; --infra:#e57000; --home:#21c7f5;
  --warn:#ffb24a; --bad:#ff5a6a; --good:#27f08a;
  --fontD:'Cinzel',serif; --fontT:'Chakra Petch',sans-serif; --fontM:'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fontT);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%,rgba(43,255,136,.06),transparent 60%),
    radial-gradient(80% 60% at 50% 120%,rgba(2,3,10,.9),transparent 60%);}
a{color:inherit;text-decoration:none}

#rain{position:fixed;inset:0;z-index:0;opacity:.10;pointer-events:none;mix-blend-mode:screen}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 36%,transparent 42%,rgba(2,3,10,.72) 100%);}
.scan{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}

.sanctum{position:relative;z-index:3;max-width:1140px;margin:0 auto;padding:26px 22px 90px}

/* ── top bar ── */
.s-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--fontM);
  font-size:11px;letter-spacing:2px;text-transform:uppercase}
.s-back{color:var(--neon);opacity:.7;transition:opacity .2s,text-shadow .2s}
.s-back:hover{opacity:1;text-shadow:0 0 10px var(--green)}
.s-conn{display:flex;align-items:center;gap:8px;color:var(--mute)}
.s-conn .d{width:8px;height:8px;border-radius:50%;background:#555}
.s-conn.live{color:var(--good)} .s-conn.live .d{background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse 2.2s infinite}
.s-conn.away{color:var(--warn)} .s-conn.away .d{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.s-clock{color:var(--faint)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── altar (hero) ── */
.s-altar{text-align:center;margin:46px 0 38px}
.s-eyebrow{font-family:var(--fontM);font-size:11px;letter-spacing:.55em;text-transform:uppercase;color:var(--neon);opacity:.8}
.s-title{font-family:var(--fontD);font-weight:900;font-size:clamp(40px,8vw,84px);letter-spacing:.22em;padding-left:.22em;color:#fff;
  text-shadow:0 0 40px rgba(43,255,136,.45),0 2px 30px #000;margin-top:8px;line-height:.96}
.s-oracle{margin-top:14px;font-family:var(--fontM);font-size:12px;letter-spacing:2px;color:var(--mute)}
.s-oracle.up{color:var(--good);text-shadow:0 0 12px rgba(39,240,138,.5)}
.s-oracle.bad{color:var(--bad)}

/* ── aggregate band ── */
.s-aggr{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-bottom:30px}
.ag{background:rgba(6,9,15,.66);padding:18px 14px;text-align:center}
.ag-num{font-family:var(--fontD);font-weight:700;font-size:30px;color:#fff;line-height:1}
.ag-num.warn{color:var(--warn)} .ag-num.bad{color:var(--bad);text-shadow:0 0 16px rgba(255,90,106,.5)}
.ag-lbl{margin-top:7px;font-family:var(--fontM);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}

/* ── grid of panels ── */
.s-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.panel{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:20px 22px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.panel::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);box-shadow:0 0 14px var(--green);opacity:.7}
.panel.span2{grid-column:1 / -1}
.p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.p-title{font-family:var(--fontD);font-weight:700;font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:#fff}
.p-count{font-family:var(--fontM);font-size:11px;letter-spacing:1px;color:var(--faint)}

/* incidents */
.inc{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-top:1px solid rgba(255,255,255,.06)}
.inc:first-of-type{border-top:0}
.inc-sev{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:var(--warn);box-shadow:0 0 9px var(--warn)}
.inc-sev.error,.inc-sev.critical{background:var(--bad);box-shadow:0 0 9px var(--bad)}
.inc-body{flex:1;min-width:0}
.inc-ent{font-family:var(--fontM);font-size:13px;color:#fff;letter-spacing:.5px}
.inc-meta{margin-top:3px;font-family:var(--fontT);font-size:11.5px;color:var(--mute)}
.inc-meta b{color:var(--neon);font-weight:600}
.inc-act{font-family:var(--fontM);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--neon);opacity:.65;
  border:1px solid var(--hair);border-radius:20px;padding:5px 12px;align-self:center;transition:opacity .2s,box-shadow .2s;white-space:nowrap}
.inc-act:hover{opacity:1;box-shadow:0 0 14px rgba(43,255,136,.3)}
.empty{font-family:var(--fontT);font-size:13px;color:var(--good);padding:10px 0;display:flex;align-items:center;gap:9px}
.empty::before{content:"✦";color:var(--green)}

/* rites (workflows) */
.rite{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.06)}
.rite:first-of-type{border-top:0}
.rite-glyph{color:var(--neon);font-family:var(--fontM);font-size:13px;opacity:.8}
.rite-name{flex:1;font-family:var(--fontT);font-size:13px;color:var(--ink);text-transform:capitalize;letter-spacing:.3px}
.rite-go{font-family:var(--fontM);font-size:14px;color:var(--neon);opacity:.6;transition:opacity .2s,transform .2s}
.rite:hover .rite-go{opacity:1;transform:translateX(3px)}

/* gateways (SSO) */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.gate{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px solid var(--hair);border-radius:13px;
  background:rgba(6,9,15,.5);transition:transform .2s,box-shadow .2s,border-color .2s}
.gate:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--acc) 30%,transparent)}
.gate svg{width:26px;height:26px;color:var(--acc);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 60%,transparent))}
.gate-name{font-family:var(--fontM);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}

/* scry (blast radius) */
.scry-form{display:flex;gap:9px;margin-bottom:12px}
.scry-form input{flex:1;background:rgba(2,4,8,.6);border:1px solid var(--hair);border-radius:9px;color:#fff;
  font-family:var(--fontM);font-size:12.5px;padding:9px 12px;outline:0;letter-spacing:.5px}
.scry-form input:focus{border-color:var(--green);box-shadow:0 0 12px rgba(43,255,136,.25)}
.scry-form button{background:transparent;border:1px solid var(--green);border-radius:9px;color:var(--green);cursor:pointer;
  font-family:var(--fontD);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:0 16px;transition:box-shadow .2s}
.scry-form button:hover{box-shadow:0 0 16px rgba(43,255,136,.35)}
.scry-out{font-family:var(--fontM);font-size:12px;color:var(--mute);line-height:1.7;max-height:172px;overflow-y:auto}
.scry-out .hit{color:var(--ink)} .scry-out .hot{color:var(--warn)} .scry-out .root{color:var(--green)}

/* offline — beyond the walls */
.s-offline{text-align:center;border:1px solid var(--hair);border-radius:16px;background:var(--panel);padding:34px 24px;margin-bottom:18px}
.s-offline h2{font-family:var(--fontD);font-weight:700;font-size:19px;letter-spacing:3px;color:#fff;text-shadow:0 0 20px rgba(43,255,136,.4)}
.s-offline p{margin-top:10px;font-size:13.5px;color:var(--mute);line-height:1.7;max-width:520px;margin-inline:auto}
.s-offline code{font-family:var(--fontM);color:var(--neon);font-size:12.5px}

.s-foot{margin-top:34px;text-align:center;font-family:var(--fontM);font-size:10px;letter-spacing:2px;color:var(--faint)}
.s-foot .nd{color:var(--infra)}

@media (max-width:820px){
  .s-grid{grid-template-columns:1fr}
  .s-aggr{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}