/* ============================================================
   AEGIS — Design tokens & base
   ============================================================ */
:root{
  /* surfaces */
  --bg:        #05080c;
  --bg-1:      #070c12;
  --bg-2:      #0a121b;
  --panel:     rgba(12, 20, 29, 0.72);
  --panel-sol: #0b131c;
  --edge:      #152330;
  --edge-hi:   #203343;
  --grid:      rgba(86, 188, 214, 0.06);

  /* text */
  --txt:       #aebecb;
  --txt-hi:    #e4eef4;
  --txt-dim:   #5a6f7e;
  --txt-faint: #374957;

  /* accents */
  --cyan:      #34d6e8;
  --cyan-dim:  #1c7a86;
  --amber:     #ffb01f;
  --amber-dim: #8a6310;
  --green:     #29e08a;
  --red:       #ff3d4a;
  --red-dim:   #8f2228;
  --violet:    #9d7bff;

  /* severity */
  --sev-low:   #34d6e8;
  --sev-med:   #ffb01f;
  --sev-high:  #ff7a1f;
  --sev-crit:  #ff3d4a;

  /* fonts */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --hdr-h: 58px;
  --ticker-h: 26px;
  --banner-h: 18px;
  --nav-w: 196px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(52,214,232,0.06), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(157,123,255,0.05), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hidden{ display: none !important; }
.mono{ font-family: var(--mono); }
.sans{ font-family: var(--sans); }
.dim{ color: var(--txt-dim); }
.faint{ color: var(--txt-faint); }
.hi{ color: var(--txt-hi); }
.cyan{ color: var(--cyan); }
.amber{ color: var(--amber); }
.green{ color: var(--green); }
.red{ color: var(--red); }

::selection{ background: rgba(52,214,232,0.25); }

/* scrollbars */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background: var(--edge-hi); border-radius:0; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ---- generic UI atoms reused across modules ---- */
.eyebrow{
  font-size: 10px; letter-spacing: 0.22em; color: var(--txt-dim);
  text-transform: uppercase;
}
.kvalue{ color: var(--txt-hi); font-variant-numeric: tabular-nums; }

.btn{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  border: 1px solid var(--edge-hi);
  padding: 8px 14px; cursor: pointer; position: relative;
  transition: border-color .15s, color .15s, background .15s;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.btn:hover{ border-color: var(--cyan-dim); color: var(--txt-hi); }
.btn:active{ background: rgba(52,214,232,0.08); }
.btn--cyan{ border-color: var(--cyan-dim); color: var(--cyan); }
.btn--cyan:hover{ background: rgba(52,214,232,0.1); }
.btn--amber{ border-color: var(--amber-dim); color: var(--amber); }
.btn--red{ border-color: var(--red-dim); color: var(--red); }
.btn--red:hover{ background: rgba(255,61,74,0.1); }
.btn--ghost{ border-color: var(--edge); color: var(--txt-dim); }
.btn:disabled{ opacity:.35; cursor: not-allowed; }

/* corner-bracketed panel */
.panel{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  backdrop-filter: blur(2px);
}
.panel__hd{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 8px 12px; border-bottom: 1px solid var(--edge);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-dim);
}
.panel__hd .t{ color: var(--txt); }
.panel__bd{ padding: 12px; }

.bracket::before, .bracket::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  border-color: var(--cyan-dim); border-style: solid; border-width:0;
}
.bracket::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.bracket::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

.tag{
  font-size: 9px; letter-spacing: 0.16em; padding: 2px 6px; text-transform: uppercase;
  border: 1px solid var(--edge-hi); color: var(--txt-dim);
}
.tag--low{ color: var(--sev-low); border-color: rgba(52,214,232,.4); }
.tag--med{ color: var(--sev-med); border-color: rgba(255,176,31,.4); }
.tag--high{ color: var(--sev-high); border-color: rgba(255,122,31,.4); }
.tag--crit{ color: var(--sev-crit); border-color: rgba(255,61,74,.5); background: rgba(255,61,74,.08); }