/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   The Brief — FX layer styles (Threat Radar canvas,
   progress bar, card glow). Companion to brief-fx.js.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#fx-radar{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
#fx-radar.on{opacity:1}

.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:900;
  pointer-events:none;
  background:linear-gradient(90deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  transform-origin:0 50%;transform:scaleX(0);
}

.fx-glow{position:relative}
.fx-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,255,.055), rgba(0,174,239,.022) 40%, transparent 65%);
  z-index:1;
}
.fx-glow:hover::after{opacity:1}

@media (prefers-reduced-motion: reduce){
  #fx-radar,.fx-progress{display:none!important}
}

/* ── foyl loading "o" — shared platform loader ── */
.lso{position:relative;width:80px;height:80px;animation:lso-spin 3s linear infinite}
.lso span{position:absolute;width:7px;height:7px;border-radius:50%;
  animation:lso-pulse 1.6s ease-in-out infinite}
.lso-brand{font-family:var(--jakarta,'Plus Jakarta Sans',sans-serif);font-size:17px;font-weight:700;
  letter-spacing:-.02em;color:var(--tx);display:flex;align-items:baseline;gap:9px}
.lso-brand span{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--tx3)}
@keyframes lso-spin{to{transform:rotate(360deg)}}
@keyframes lso-pulse{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.lso{animation:none}.lso span{animation:none;opacity:.8}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI overhaul — glassmorphism over the Threat Radar.
   Loaded after each page's inline styles, so these
   same-specificity rules win the cascade.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-title{font-family:'Plus Jakarta Sans',var(--font),sans-serif;font-weight:700;
  letter-spacing:-.03em;font-size:34px}

.card{position:relative;background:rgba(10,13,12,.58);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(100,168,255,.1);border-radius:14px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease}
.card::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.32),rgba(0,137,123,.22),transparent)}
.card:hover{border-color:rgba(100,168,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.card-header{border-bottom:1px solid rgba(100,168,255,.08)}

.kpi-strip{background:rgba(8,10,9,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kpi-cell{transition:background .2s ease}
.kpi-cell:hover{background:rgba(100,168,255,.045)}

.sidebar,aside.sidebar{background:rgba(6,8,7,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

.btn-ghost{transition:color .18s,border-color .18s,background .18s,transform .18s}
.btn-ghost:hover{color:var(--tx);border-color:var(--border3);
  background:rgba(100,168,255,.05);transform:translateY(-1px)}