/* ============================================================================
   RAMS SENTINEL — VISUAL THEME v5.0 "SIGNAL"
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css. styles.css keeps every structural rule (grids,
   flex layouts, spacing, breakpoints) — nothing there is touched or at risk.
   This file is a pure re-skin: colour, type, depth, motion, and one running
   signature motif, layered on top by loading second so equal-specificity
   rules win on cascade order alone. No HTML or app logic changes required.

   DESIGN RATIONALE
   Sentinel watches, scans and verifies — so the visual language is drawn from
   two real-world sources instead of generic dashboard styling: (1) a HUD /
   target-lock reticle, the way an inspection instrument frames what it is
   reading, and (2) an engineering blueprint grid, the native surface of the
   RAMS documents this tool audits. The recurring signature — corner brackets
   + a scanning sweep + a fine blueprint grid — appears at every "first
   impression" moment: login, the dashboard hero, and the decision card.
   Severity colour semantics (red/amber/green) are preserved exactly, since
   changing what those colours mean would be a functional regression.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. TOKENS + FONTS
   --------------------------------------------------------------------------- */
:root{
  --void:#070B10;            /* page background, near-black graphite */
  --void-2:#0B1218;          /* secondary void / gradient partner */
  --steel:#0C141C;           /* dark surface: sidebar, topbar, hero, consoles */
  --steel-2:#121D26;         /* raised dark surface */
  --steel-3:#182530;         /* highest raised dark surface / hovers */
  --paper:#F3F7F9;           /* light content background */
  --paper-2:#FFFFFF;         /* light card surface */
  --ink:#0C1620;             /* primary text on light */
  --muted:#5B6E7C;           /* secondary text on light */
  --muted-2:#8CA0AC;         /* tertiary text on dark */
  --line:#DCE4E9;            /* hairline border on light */
  --line-dark:rgba(140,200,206,.16); /* hairline border on dark */
  --signal:#2BE4C4;          /* primary signature accent — sentinel signal */
  --signal-2:#8FFCE8;        /* signal highlight / glow */
  --signal-deep:#0E9A85;     /* signal pressed / deep */
  --beacon:#FFB020;          /* amber — attention, dirty-state, secondary accent */
  --alarm:#FF4459;           /* critical / stop */
  --go:#20D97C;              /* verified / pass */
  --violet:#9A8CFF;
  --blue:#4C93FF;
  --gold:#FFB020;            /* alias kept for existing var(--gold) references */
  --cyan:#2BE4C4;            /* alias kept for existing var(--cyan) references */
  --cyan2:#8FFCE8;           /* alias kept for existing var(--cyan2) references */
  --red:#FF4459;             /* alias kept for existing var(--red) references */
  --amber:#FFB020;           /* alias kept for existing var(--amber) references */
  --green:#20D97C;           /* alias kept for existing var(--green) references */
  --nav:#0C141C;             /* alias kept for existing var(--nav) references */
  --nav-2:#0B1218;           /* alias kept for existing var(--nav-2) references */
  --bg:#EAF1F3;              /* alias kept for existing var(--bg) references */
  --panel:#FFFFFF;           /* alias kept for existing var(--panel) references */
  --shadow:0 24px 60px rgba(4,14,20,.16);
  --shadow2:0 10px 28px rgba(4,14,20,.08);
  --radius:18px;

  --font-display:'Space Grotesk',Inter,ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;

  --grid-line:rgba(43,228,196,.05);
  --grid-line-dark:rgba(43,228,196,.09);
}

*{scrollbar-color:rgba(43,228,196,.35) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(43,228,196,.28);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(43,228,196,.5);background-clip:content-box}

::selection{background:rgba(43,228,196,.32);color:#04110f}

:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------------
   1. BASE + AMBIENT BACKGROUND — the blueprint grid signature
   --------------------------------------------------------------------------- */
body{
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 84% -4%, rgba(43,228,196,.10), transparent 42%),
    radial-gradient(circle at 8% 96%, rgba(255,176,32,.06), transparent 38%),
    var(--bg);
  color:var(--ink);
}

h1,h2,h3,.page-heading h1,.hero-copy h2,.decision-copy h2,.verdict-copy h2,
.brand-block strong,.login-brand h1,.metric-card strong,.chart-centre strong,
.score-ring strong,.complianceScore,.risk-tile strong,.results-kpis strong{
  font-family:var(--font-display);
}

.ambient{display:none}

/* Fine engineering-grid wash across the whole app shell, brightest near the
   sidebar seam and fading out — subtle at content-reading distance, but
   unmistakably a technical instrument rather than a generic SaaS canvas. */
.app-shell{position:relative}
.app-shell::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 90% 70% at 18% 0%, #000 0%, transparent 72%);
}

/* ---------------------------------------------------------------------------
   2. SIDEBAR + BRAND
   --------------------------------------------------------------------------- */
.sidebar{
  background:linear-gradient(180deg,var(--steel) 0%,#091019 62%,#050a10 100%);
  border-right:1px solid var(--line-dark);
  box-shadow:16px 0 50px rgba(2,8,13,.35);
}
.sidebar::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.brand-block{position:relative;z-index:1}
.sentinel-logo{
  background:linear-gradient(145deg,rgba(43,228,196,.16),rgba(255,176,32,.08));
  border:1px solid rgba(43,228,196,.30);
  box-shadow:0 0 0 1px rgba(43,228,196,.08) inset, 0 0 26px rgba(43,228,196,.16);
  position:relative;
}
.brand-block strong{font-weight:700;letter-spacing:-.2px}
.brand-block span{color:var(--muted-2);font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.6px}

.main-nav{position:relative;z-index:1}
.nav-item{color:#7E97A6;font-family:var(--font-body);letter-spacing:.1px}
.nav-item i,.nav-item svg{color:#5C7686}
.nav-item:hover{background:rgba(43,228,196,.07);color:#EAFBF8}
.nav-item:hover svg{color:var(--signal)}
.nav-item.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(43,228,196,.20),rgba(43,228,196,.03));
  box-shadow:inset 3px 0 var(--signal), 0 0 22px -6px rgba(43,228,196,.4);
}
.nav-item.active svg{color:var(--signal)}

.privacy-card{
  position:relative;z-index:1;
  border:1px solid rgba(43,228,196,.16);
  background:rgba(9,30,32,.5);
}
.privacy-card svg{color:var(--signal)}
.privacy-card strong{color:#DFFAF5}
.privacy-card span{color:#6E8B94}
.version{position:relative;z-index:1;color:#3E5A66;font-family:var(--font-mono);letter-spacing:1px}

/* ---------------------------------------------------------------------------
   3. TOPBAR + BUTTONS
   --------------------------------------------------------------------------- */
.topbar{
  background:rgba(243,247,249,.82);
  border-bottom:1px solid rgba(15,35,45,.08);
  backdrop-filter:blur(20px) saturate(140%);
}
.menu-trigger{color:var(--muted);font-family:var(--font-body);font-weight:600}
.menu-trigger:hover,.menu-trigger.active{background:rgba(43,228,196,.12);color:var(--ink)}
.menu-popover{border:1px solid var(--line);box-shadow:0 26px 70px rgba(6,20,30,.22)}
.menu-popover button:hover{background:rgba(43,228,196,.1)}
.session-name{color:#7E8FA0;font-family:var(--font-mono);font-size:11px}
.dirty-dot{background:var(--beacon);box-shadow:0 0 0 4px rgba(255,176,32,.18)}
.page-heading h1{letter-spacing:-.6px;font-weight:700}
.page-heading p{color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.2px}

.btn,.icon-btn{font-family:var(--font-body);font-weight:700;letter-spacing:.1px}
.btn.primary{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--signal-deep),var(--signal));
  color:#04140F;
  box-shadow:0 10px 26px -6px rgba(43,228,196,.45);
}
.btn.primary:hover{box-shadow:0 14px 34px -6px rgba(43,228,196,.55)}
.btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.ghost,.icon-btn{background:var(--paper-2);color:#2C4450;border:1px solid var(--line)}
.btn.ghost:hover,.icon-btn:hover{border-color:rgba(43,228,196,.45);color:var(--ink)}
.btn.glass{background:rgba(255,255,255,.07);border:1px solid rgba(43,228,196,.22);backdrop-filter:blur(6px)}
.btn.glass:hover{background:rgba(43,228,196,.12)}
.btn.danger{background:linear-gradient(135deg,#D6293C,var(--alarm));box-shadow:0 10px 24px -6px rgba(255,68,89,.4)}
.logout-btn{background:rgba(255,68,89,.08)!important;border:1px solid rgba(255,68,89,.28)!important;color:#C6293C!important}
.logout-btn:hover{background:rgba(255,68,89,.16)!important}

/* ---------------------------------------------------------------------------
   4. HERO PANEL — signature HUD / target-lock console
   --------------------------------------------------------------------------- */
.hero-panel{
  background:
    radial-gradient(circle at 88% 8%, rgba(43,228,196,.14), transparent 46%),
    linear-gradient(120deg,var(--steel) 0%,#0A1620 58%,#0B1C24 100%);
  box-shadow:0 30px 80px rgba(3,12,18,.35), inset 0 1px 0 rgba(255,255,255,.04);
  border:1px solid rgba(43,228,196,.10);
}
.hero-panel::before{
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:30px 30px;
}
/* Reticle corner brackets — the recurring "instrument framing its subject" mark */
.hero-panel::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  background-image:
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px),
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px);
  background-repeat:no-repeat;
  background-size:22px 22px;
  background-position:top left,top left,bottom right,bottom right;
  opacity:.55;
}
.hero-copy .overline{
  color:var(--signal-2);font-family:var(--font-mono);font-weight:600;letter-spacing:2px;
}
.hero-copy .overline svg{color:var(--beacon)}
.hero-copy h2{font-weight:700;background:linear-gradient(120deg,#fff 30%,#CFEFEA 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{color:#9FB8C2}
.hero-actions .btn.glass{color:#fff}

.radar-orbit{border-color:rgba(43,228,196,.22)}
.radar-sweep{background:conic-gradient(from 10deg,rgba(43,228,196,.4),transparent 22%)}
.radar-core{background:rgba(4,14,18,.94);border:1px solid rgba(43,228,196,.45);box-shadow:0 0 44px rgba(43,228,196,.3)}
.radar-core path:first-child{stroke:var(--signal-2)}
.radar-core path:last-child{stroke:var(--beacon)}
.floating-tag{background:rgba(6,26,28,.86);border:1px solid rgba(43,228,196,.22);color:#CFE9E6;font-family:var(--font-mono);font-size:10.5px}
.floating-tag svg{color:var(--signal)}

/* ---------------------------------------------------------------------------
   5. KPI / METRIC CARDS
   --------------------------------------------------------------------------- */
.metric-card{
  background:var(--paper-2);
  border:1px solid rgba(15,35,45,.08);
  box-shadow:0 8px 22px -8px rgba(10,30,40,.14);
}
.metric-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,currentColor,transparent 40%);
  opacity:.16;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* Corner registration tick — a small nod to the reticle/blueprint signature,
   quiet enough not to compete with the numbers, present enough to read as a
   measuring instrument rather than a generic admin-panel tile. */
.metric-card::after{
  content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  opacity:.28;pointer-events:none;
}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(10,30,40,.2)}
.metric-card strong{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.metric-card .metric-icon{
  background:currentColor;box-shadow:0 6px 16px -4px currentColor;
}
.metric-card .metric-icon svg{color:var(--paper-2);stroke:var(--paper-2)}
.metric-card.cyan{color:var(--signal)}
.metric-card.red{color:var(--alarm)}
.metric-card.amber{color:var(--beacon)}
.metric-card.green{color:var(--go)}
.metric-card.violet{color:var(--violet)}
.metric-card.blue{color:var(--blue)}
.mini-ring{background:conic-gradient(var(--alarm) var(--ring,0%),#EDF1F3 0);font-family:var(--font-mono)}
.green-ring{background:conic-gradient(var(--go) var(--ring,0%),#EDF1F3 0)}
.pulse-bars b{background:var(--beacon)}
.score-meter span{background:linear-gradient(90deg,var(--violet),#C9C1FF)}
.alert-beacon{background:var(--blue);box-shadow:0 0 0 0 rgba(76,147,255,.5)}

/* ---------------------------------------------------------------------------
   6. PANELS — the single highest-leverage class in the app
   --------------------------------------------------------------------------- */
.panel{
  position:relative;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,40,50,.07);
  box-shadow:0 10px 26px -10px rgba(10,30,40,.12);
  backdrop-filter:blur(2px);
}
.panel::after{
  content:"";position:absolute;top:10px;right:10px;width:10px;height:10px;
  border-top:1.5px solid var(--signal);border-right:1.5px solid var(--signal);
  opacity:.35;pointer-events:none;
}
.panel-kicker{
  color:var(--signal-deep);font-family:var(--font-mono);font-weight:700;letter-spacing:1.8px;
}
.panel-head h2{font-weight:700;letter-spacing:-.2px;font-family:var(--font-display)}
.live-pill{background:rgba(32,217,124,.12);color:#0E8E56}
.live-pill b{background:var(--go)}
.secure-pill{background:rgba(43,228,196,.12);color:var(--signal-deep)}
.link-btn{color:var(--signal-deep)}

/* ---------------------------------------------------------------------------
   7. DECISION CARD + SCORE RING
   --------------------------------------------------------------------------- */
.decision-card{
  background:linear-gradient(120deg,#0B1620,#0C1F27);
  box-shadow:0 22px 55px rgba(3,14,20,.3);
  border:1px solid rgba(43,228,196,.14);
}
.decision-card::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  background-image:
    linear-gradient(currentColor 2px,transparent 2px),linear-gradient(90deg,currentColor 2px,transparent 2px),
    linear-gradient(currentColor 2px,transparent 2px),linear-gradient(90deg,currentColor 2px,transparent 2px);
  background-repeat:no-repeat;background-size:16px 16px;
  background-position:top left,top left,bottom right,bottom right;
  opacity:.4;
}
.decision-card.reject{color:var(--alarm);background:linear-gradient(120deg,#2A0F16,#3D141C)}
.decision-card.conditional{color:var(--beacon);background:linear-gradient(120deg,#2A2010,#3A2B10)}
.decision-card.accept{color:var(--go);background:linear-gradient(120deg,#0B2419,#0D3122)}
.decision-emblem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.eyebrow{font-family:var(--font-mono);letter-spacing:2px}
.decision-copy h2{font-weight:700}
.ring-value{filter:drop-shadow(0 0 8px currentColor)}
.score-ring strong{font-weight:700}

/* ---------------------------------------------------------------------------
   8. VERDICT SYSTEM — manager-verdict, fix tickets, worked examples
   ---------------------------------------------------------------------------
   v5.1 reset: the previous pass forced .verdict-head to its own flat dark
   gradient with !important. That fought the card's own architecture instead
   of using it — styles.css already drives this whole component off three
   CSS custom properties (--tone / --tone-ink / --tone-deep) that switch
   automatically between --stop / --fix / --go depending on the actual
   verdict, plus a coloured top strip on .manager-verdict::before. Patching
   .verdict-head on top of that produced a visible seam between two
   different dark gradients and, worse, made every verdict — reject, fix or
   accept — read as the same flat navy. A REJECT should look urgently
   different from a GO at a glance; that's not a style preference, it's the
   report's whole job. This version refreshes the tone palette to sit with
   the rest of the brand, then lets that architecture drive the colour. */
.manager-verdict{
  --stop:#FF4D5E; --stop-ink:#FFE1E4; --stop-deep:#A81D2C;
  --fix:#FFB020;  --fix-ink:#FFEFD2;  --fix-deep:#8A5A00;
  --go:#2FE0A0;   --go-ink:#D8FBEE;   --go-deep:#0B7A52;
  font-family:var(--font-body);
}
.manager-verdict::before{height:6px;box-shadow:0 0 18px -2px var(--tone)}
.verdict-head{position:relative}
.verdict-stamp{box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 26px -6px var(--tone)}
.verdict-stamp span{
  font-family:var(--font-mono);font-weight:700;letter-spacing:2.2px;color:var(--tone);
}
.verdict-copy h2{font-family:var(--font-display);font-weight:700}
.verdict-tally strong{font-family:var(--font-mono);font-weight:700}
.verdict-tally div:first-child strong{text-shadow:0 0 16px var(--tone)}

.block-stop h3{color:var(--alarm)}
.block-fix h3{color:#B8790A}
.block-minor h3,.block-thin h3{color:#5D7382}
.block-good h3{color:#0E8E56}
.fix-ticket{position:relative;transition:transform .18s ease, box-shadow .18s ease}
.fix-ticket:hover{transform:translateX(2px);box-shadow:0 10px 22px -8px rgba(10,30,40,.28)}
.ticket-no{font-family:var(--font-mono)}
.ticket-example{position:relative}
.ticket-example summary{color:var(--signal-deep);font-weight:700}
.ticket-example summary:hover{color:var(--signal)}
.ticket-example .example-body{
  background:linear-gradient(180deg,#FAFCFC,#F3F8F8);
  border:1px solid rgba(43,228,196,.18);border-left:3px solid var(--signal);
  border-radius:0 10px 10px 0;padding:12px 14px;
}
.ticket-example pre{
  font-family:var(--font-mono)!important;background:#0C141C;color:#CFEFEA;
  border-radius:8px;padding:12px 13px;border:1px solid rgba(43,228,196,.16);
  overflow-x:auto;
}
.example-standard{color:var(--muted)}

.print-gauge strong{font-family:var(--font-mono);font-weight:700}
.wrong-file{border-color:rgba(255,176,32,.4)!important;background:rgba(255,176,32,.06)!important}

/* ---------------------------------------------------------------------------
   9. FINDINGS, EVIDENCE, BADGES, CHIPS
   --------------------------------------------------------------------------- */
.finding{background:var(--paper-2);border:1px solid rgba(15,40,50,.08)}
.finding:before{background:#8CA0AC}
.finding.critical:before{background:var(--alarm)}
.finding.major:before{background:#FF7A6B}
.finding.moderate:before{background:var(--beacon)}
.finding.minor:before{background:#8CA0AC}
.finding:hover,.finding.selected{border-color:rgba(43,228,196,.45);box-shadow:0 12px 26px -10px rgba(10,30,40,.2)}
.finding h3{font-family:var(--font-display);font-weight:700}

.badge{font-family:var(--font-mono);letter-spacing:.5px}
.badge.critical{background:rgba(255,68,89,.12);color:#C6293C}
.badge.major{background:rgba(255,122,107,.14);color:#C6472F}
.badge.moderate{background:rgba(255,176,32,.16);color:#9A6300}
.badge.minor{background:#EDF1F3;color:#5F7481}
.badge.positive{background:rgba(32,217,124,.14);color:#0E8E56}
.badge.neutral{background:rgba(43,228,196,.12);color:var(--signal-deep)}

.chip{border:1px solid var(--line);color:var(--muted);font-family:var(--font-mono)}
.chip.active{background:var(--steel);border-color:var(--steel);color:#fff}

.evidence-quote{border-left:3px solid var(--signal);background:rgba(43,228,196,.06);font-family:var(--font-mono)!important}
.coverage-dot.good{background:var(--go);box-shadow:0 0 0 4px rgba(32,217,124,.12)}
.coverage-dot.warn{background:var(--beacon);box-shadow:0 0 0 4px rgba(255,176,32,.12)}
.coverage-dot.bad{background:var(--alarm);box-shadow:0 0 0 4px rgba(255,68,89,.12)}

/* ---------------------------------------------------------------------------
   10. UPLOAD, ANALYSIS CONSOLE, PROGRESS
   --------------------------------------------------------------------------- */
.dropzone{border-color:rgba(43,228,196,.4);background:radial-gradient(circle at 50% 35%,rgba(43,228,196,.08),var(--paper-2) 70%)}
.dropzone:hover,.dropzone.dragover{border-color:var(--signal);box-shadow:inset 0 0 40px rgba(43,228,196,.08)}
.upload-arrow{background:linear-gradient(135deg,var(--signal-deep),var(--signal));box-shadow:0 8px 20px rgba(43,228,196,.35)}
.doc-stack span{border-color:rgba(43,228,196,.4)}

.analysis-console{
  background:linear-gradient(160deg,var(--steel),#0B1E28);
  border:1px solid rgba(43,228,196,.2);
  box-shadow:0 26px 60px -18px rgba(3,14,20,.5);
  position:relative;overflow:hidden;
}
.analysis-console::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:24px 24px;
}
/* Reticle corners, matching the hero panel and decision card — the console
   the reviewer actually watches earns the same "instrument locked on" frame. */
.analysis-console::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  background-image:
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px),
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px);
  background-repeat:no-repeat;background-size:16px 16px;
  background-position:top left,top left,bottom right,bottom right;
  opacity:.45;
}
/* A slow diagonal scan sweep across the console while it's active — ambient
   motion that reads as "working", not decoration for its own sake. */
.analysis-console .scanner-icon{position:relative;overflow:visible}
.analysis-header{position:relative;z-index:1}
.analysis-header span{color:var(--signal-2);font-family:var(--font-mono);letter-spacing:2px}
.analysis-header>strong{color:var(--signal);font-family:var(--font-mono);text-shadow:0 0 18px rgba(43,228,196,.5)}
.scanner-icon{background:rgba(43,228,196,.12);color:var(--signal);box-shadow:0 0 0 1px rgba(43,228,196,.2) inset}
.progress{position:relative;z-index:1;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.progress span{background:linear-gradient(90deg,var(--signal-deep),var(--signal),var(--beacon));box-shadow:0 0 16px rgba(43,228,196,.5)}
.engine-stages{position:relative;z-index:1}
.engine-stages span{color:#5C7A88;font-family:var(--font-mono);font-size:9px;border:1px solid transparent;transition:.3s}
.engine-stages span.active{color:#B7FCEF;background:rgba(43,228,196,.16);border-color:rgba(43,228,196,.4);box-shadow:0 0 14px -4px rgba(43,228,196,.6);animation:stagePulse 1.6s ease-in-out infinite}
.engine-stages span.done{color:#8BF3BC;background:rgba(32,217,124,.14)}
@keyframes stagePulse{50%{box-shadow:0 0 20px -2px rgba(43,228,196,.75)}}
.progress-log{position:relative;z-index:1;font-family:var(--font-mono)!important;color:#6C93A0}

/* ---------------------------------------------------------------------------
   11. FORMS, TABLES, MODALS, TOAST
   --------------------------------------------------------------------------- */
.form-grid input,.form-grid select,.settings-grid input,.search,.rule-filter-row select{
  background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-body);
}
.form-grid input:focus,.form-grid select:focus,.settings-grid input:focus,.search:focus{
  border-color:var(--signal);box-shadow:0 0 0 3px rgba(43,228,196,.14);
}
.table th{color:#7791A0;font-family:var(--font-mono);letter-spacing:.6px}
.table td{color:var(--ink)}
.table tr:hover td{background:rgba(43,228,196,.05)}
.rule-stats span{background:rgba(43,228,196,.1);color:var(--signal-deep)}

.toast{background:var(--steel);border:1px solid rgba(43,228,196,.24);box-shadow:0 20px 50px rgba(3,14,20,.4)}
.toast svg{color:var(--signal)}
.modal{box-shadow:0 30px 90px rgba(3,14,20,.35)}
.modal-icon{background:rgba(255,176,32,.14);color:#B8790A}

/* ---------------------------------------------------------------------------
   12. LOGIN SCREEN — the biggest first-impression moment
   --------------------------------------------------------------------------- */
body.login-only{background:var(--void)}
.login-screen{background:
    radial-gradient(circle at 22% 18%, rgba(43,228,196,.14), transparent 40%),
    radial-gradient(circle at 82% 82%, rgba(255,176,32,.08), transparent 42%),
    linear-gradient(180deg,var(--void) 0%,#050A0F 100%)!important;
}
.login-shell::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 40%, #000 0%, transparent 75%);
}
.login-shell{
  position:relative;z-index:1;
  background:rgba(9,16,22,.55);
  border:1px solid rgba(43,228,196,.14);
  border-radius:26px;
  box-shadow:0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(43,228,196,.04) inset;
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.login-brand{
  background:linear-gradient(155deg,rgba(12,30,34,.9),rgba(6,16,20,.7));
  position:relative;
}
.login-brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);
  background-size:26px 26px;
}
/* Target-lock reticle framing the brand panel — the login screen's signature
   moment: corner brackets animate inward on load, as if Sentinel is locking
   on, before settling into their resting frame. */
.login-brand::after{
  content:"";position:absolute;inset:26px;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px),
    linear-gradient(var(--signal) 2px,transparent 2px),linear-gradient(90deg,var(--signal) 2px,transparent 2px);
  background-repeat:no-repeat;
  background-size:26px 26px;
  background-position:top left,top left,bottom right,bottom right;
  opacity:.7;
  animation:reticleLock 1.1s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes reticleLock{
  0%{inset:70px;opacity:0}
  60%{opacity:1}
  100%{inset:26px;opacity:.7}
}
.login-logo{
  filter:drop-shadow(0 0 26px rgba(43,228,196,.35));
  animation:logoIn .7s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes logoIn{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
.login-brand .overline{color:var(--signal-2);font-family:var(--font-mono);letter-spacing:2.2px;animation:fadeUp .6s .15s both}
.login-brand h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-2px;
  background:linear-gradient(120deg,#fff 20%,#B9F3E9 75%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fadeUp .6s .25s both;
}
.login-brand>p{color:#9AB9C0;animation:fadeUp .6s .35s both}
.login-intelligence{animation:fadeUp .6s .45s both}
.login-intelligence strong{color:#E7FBF6;font-family:var(--font-display)}
.login-intelligence small{color:#7196A0}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.login-card{background:rgba(6,13,18,.4);animation:fadeUp .6s .3s both}
.login-card .panel-kicker{color:var(--signal-2)}
.login-card h2{font-family:var(--font-display);color:#fff;font-weight:700}
.login-card p{color:#8FA8B2}
.login-card label{color:#7E97A2;font-weight:700;font-size:11px;letter-spacing:.4px}
.login-card input{
  background:rgba(255,255,255,.04);border:1px solid rgba(43,228,196,.18);color:#fff;
  border-radius:11px;padding:12px 14px;font-family:var(--font-body);outline:0;
}
.login-card input:focus{border-color:var(--signal);box-shadow:0 0 0 3px rgba(43,228,196,.14)}
.password-wrap button{color:#7E97A2}
.login-error span{color:var(--alarm)}
.login-submit{width:100%;justify-content:center;margin-top:6px}
.login-note{color:#4E6C77;font-family:var(--font-mono);letter-spacing:.3px}

/* ---------------------------------------------------------------------------
   13. PRE-EXISTING BUG FIX — mobile shell layout never switched to block
   --------------------------------------------------------------------------- */
/* styles.css has `body:not(.auth-locked) #applicationShell{display:grid!important}`
   at the base level. Because it's an ID selector with !important, it out-ranks
   the responsive `.app-shell{display:block}` rule inside @media(max-width:760px)
   at every viewport width, including mobile — so the sidebar never left its
   82px icon-rail grid track and sat beside the main content instead of above
   it. This matches the same selector, specificity and !important level, scoped
   to the same breakpoint, so it wins the tie by source order (this file loads
   after styles.css) without touching the original rule at all. */
@media(max-width:760px){
  body:not(.auth-locked) #applicationShell{display:block!important}
  .login-brand::after{display:none}
}


/* ---------------------------------------------------------------------------
   14. MINI-REPORT'S OWN EXPORT — make it unmistakable, not a throwaway ghost
   button lost between "copy the email" and "show technical detail".
   --------------------------------------------------------------------------- */
#verdictSheetBtn{
  border:1.5px solid var(--signal-deep);color:var(--signal-deep);background:rgba(43,228,196,.06);
}
#verdictSheetBtn:hover{background:rgba(43,228,196,.14);border-color:var(--signal)}

/* ===========================================================================
   15. SENTINEL v5.4 — SCOPE-FIRST COMMAND LAYER
   Internal application only. The standalone login remains intentionally intact.
   =========================================================================== */
body:not(.login-only) .main{
  background:
    radial-gradient(circle at 86% 5%,rgba(43,228,196,.10),transparent 30%),
    radial-gradient(circle at 18% 92%,rgba(76,147,255,.07),transparent 28%),
    linear-gradient(180deg,#eef4f6 0%,#e7eef1 100%);
}
body:not(.login-only) .panel{
  border-color:rgba(10,38,48,.09);
  box-shadow:0 16px 45px -25px rgba(3,18,25,.38),inset 0 1px 0 rgba(255,255,255,.8);
}
body:not(.login-only) .panel:hover{border-color:rgba(43,228,196,.18)}
body:not(.login-only) .panel-head h2{letter-spacing:-.45px}
body:not(.login-only) .panel-kicker{font-family:var(--font-mono);letter-spacing:1.3px;font-size:9px}

body:not(.login-only) .decision-card{
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 88% 22%,rgba(43,228,196,.15),transparent 33%),
    linear-gradient(118deg,#07131d 0%,#0b1b25 55%,#0b2025 100%);
  border:1px solid rgba(43,228,196,.17);
  box-shadow:0 28px 70px -25px rgba(1,18,24,.65),inset 0 1px 0 rgba(255,255,255,.05);
}
body:not(.login-only) .decision-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(43,228,196,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(43,228,196,.055) 1px,transparent 1px);
  background-size:28px 28px;mask-image:linear-gradient(90deg,#000,transparent 80%);
}
body:not(.login-only) .decision-card::after{
  content:"";position:absolute;left:-20%;top:-1px;width:38%;height:2px;background:linear-gradient(90deg,transparent,var(--signal),transparent);
  animation:sentinelScan 4.5s ease-in-out infinite;box-shadow:0 0 18px rgba(43,228,196,.6)
}
@keyframes sentinelScan{0%,100%{transform:translateX(0);opacity:.15}50%{transform:translateX(330%);opacity:1}}
body:not(.login-only) .decision-copy .eyebrow{color:var(--signal-2);font-family:var(--font-mono);letter-spacing:1.6px}
body:not(.login-only) .decision-copy h2{color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.22)}
body:not(.login-only) .decision-copy p,.decision-meta{color:#9db7c1}
body:not(.login-only) .score-ring{filter:drop-shadow(0 0 17px rgba(43,228,196,.14))}
body:not(.login-only) .score-ring strong{color:#fff}
body:not(.login-only) .score-ring span{color:#8ca7b2}

.scope-intelligence-panel{
  position:relative;overflow:hidden;margin-top:16px;padding:22px;border-radius:20px;
  color:#fff;background:
    radial-gradient(circle at 92% -5%,rgba(143,252,232,.14),transparent 38%),
    radial-gradient(circle at 8% 120%,rgba(76,147,255,.12),transparent 38%),
    linear-gradient(135deg,#08141e,#0b1d26 55%,#0d2327);
  border:1px solid rgba(43,228,196,.18);box-shadow:0 22px 60px -28px rgba(0,17,23,.75);
}
.scope-intelligence-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(43,228,196,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(43,228,196,.055) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(circle at 18% 10%,#000,transparent 62%)}
.scope-intelligence-panel::after{content:"SCOPE LOCK";position:absolute;right:20px;bottom:16px;color:rgba(143,252,232,.06);font:700 48px/1 var(--font-display);letter-spacing:-2px;pointer-events:none}
.scope-intelligence-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.scope-intelligence-head .panel-kicker{color:var(--signal-2)}
.scope-intelligence-head h2{display:flex;align-items:center;gap:9px;margin:4px 0 5px;color:#fff;font:700 23px/1.1 var(--font-display);letter-spacing:-.7px}
.scope-intelligence-head h2 svg{width:21px;color:var(--beacon)}
.scope-intelligence-head p{margin:0;max-width:760px;color:#8faab4;font-size:12px;line-height:1.55}
.scope-confidence{min-width:145px;padding:10px 12px;border:1px solid rgba(43,228,196,.18);border-radius:13px;background:rgba(2,12,17,.38);text-align:right}
.scope-confidence span{display:block;color:#718f9a;font:600 8px/1 var(--font-mono);text-transform:uppercase;letter-spacing:1.2px}
.scope-confidence strong{display:block;margin-top:5px;color:var(--signal-2);font:700 15px/1 var(--font-display)}
.scope-confidence.confidence-mixed strong{color:var(--beacon)}
.scope-confidence.confidence-low strong{color:var(--alarm)}
.scope-command-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr .65fr .75fr;gap:11px;margin-top:18px}
.scope-primary-card,.scope-stat-card{min-height:112px;padding:15px 16px;border-radius:14px;border:1px solid rgba(143,252,232,.12);background:rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.scope-primary-card small,.scope-stat-card small{display:block;color:#698996;font:600 8px/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:1.2px}
.scope-primary-card strong{display:block;margin:9px 0 6px;color:#fff;font:700 17px/1.15 var(--font-display)}
.scope-primary-card p,.scope-stat-card p{margin:0;color:#88a5af;font-size:10.5px;line-height:1.5}
.scope-stat-card strong{display:block;margin:8px 0 5px;color:var(--signal-2);font:700 30px/1 var(--font-display)}
.scope-stat-card.shielded strong{color:var(--beacon)}
.scope-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.scope-tag{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;font:600 9.5px/1 var(--font-mono);border:1px solid rgba(143,252,232,.13);background:rgba(255,255,255,.04);color:#b7d5d7}
.scope-tag svg{width:12px;height:12px;color:var(--signal)}
.scope-tag.possible{border-color:rgba(255,176,32,.22);color:#dfc18a}.scope-tag.possible svg{color:var(--beacon)}
.scope-honesty{position:relative;z-index:1;display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:10px 12px;border-radius:11px;background:rgba(43,228,196,.055);border-left:2px solid var(--signal);color:#a7c0c6;font-size:10.5px;line-height:1.5}
.scope-honesty svg{width:15px;min-width:15px;margin-top:1px;color:var(--signal)}
.scope-honesty strong{color:#e9fbf8}

body:not(.login-only) .results-kpis{
  background:linear-gradient(110deg,#101e28,#0c1922);border:1px solid rgba(43,228,196,.12);border-radius:16px;box-shadow:0 18px 45px -28px rgba(0,15,20,.7);overflow:hidden
}
body:not(.login-only) .results-kpis>div{border-color:rgba(143,252,232,.08)}
body:not(.login-only) .results-kpis span{color:#718d99;font-family:var(--font-mono);font-size:9px;letter-spacing:.5px}
body:not(.login-only) .results-kpis strong{color:#fff;font-family:var(--font-display);text-shadow:0 0 22px rgba(43,228,196,.12)}

.rewrite-rams{
  position:relative;overflow:hidden;color:#07120f!important;border:1px solid rgba(255,176,32,.55)!important;
  background:linear-gradient(135deg,#ffd06a,#ffb020 52%,#f69500)!important;box-shadow:0 11px 26px -10px rgba(255,176,32,.7)!important
}
.rewrite-rams::after{content:"";position:absolute;inset:-2px;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.7) 45%,transparent 61%);transform:translateX(-135%);transition:.65s}
.rewrite-rams:hover::after{transform:translateX(135%)}
.rewrite-rams svg{color:#07120f!important}
.rewrite-rams.working svg{animation:spinRewrite .9s linear infinite}
@keyframes spinRewrite{to{transform:rotate(360deg)}}

body:not(.login-only) .result-toolbar{border:1px solid rgba(10,39,50,.10);box-shadow:0 14px 40px -27px rgba(2,20,28,.45);backdrop-filter:blur(16px)}
body:not(.login-only) .finding{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
body:not(.login-only) .finding:hover{transform:translateY(-2px);box-shadow:0 13px 26px -18px rgba(6,29,39,.45)}
body:not(.login-only) .document-outcome{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
body:not(.login-only) .document-outcome:hover{transform:translateY(-2px);border-color:rgba(43,228,196,.24);box-shadow:0 16px 35px -24px rgba(4,30,37,.48)}

@media(max-width:980px){.scope-command-grid{grid-template-columns:1fr 1fr}.scope-primary-card{grid-column:1/-1}}
@media(max-width:640px){.scope-intelligence-panel{padding:16px}.scope-intelligence-head{display:block}.scope-confidence{margin-top:12px;text-align:left;min-width:0}.scope-command-grid{grid-template-columns:1fr}.scope-primary-card{grid-column:auto}.scope-intelligence-panel::after{font-size:30px}.scope-intelligence-head h2{font-size:19px}}
.doc-scope-lock{display:inline-flex!important;align-items:center;gap:5px;width:max-content;margin-top:4px;padding:4px 7px;border-radius:999px;background:rgba(43,228,196,.08);border:1px solid rgba(43,228,196,.16);color:#0e8f7e!important;font:600 8.5px/1 var(--font-mono)!important;letter-spacing:.25px}.doc-scope-lock svg{width:11px;height:11px}

/* v5.4 — auditable scope intelligence library */
.scope-library{margin-top:18px;padding-top:18px;border-top:1px solid rgba(9,38,50,.09)}
.scope-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px;padding:17px 18px;border-radius:16px;color:#fff;background:linear-gradient(125deg,#07151f,#0b2028);border:1px solid rgba(43,228,196,.15);overflow:hidden;position:relative}
.scope-library-head::after{content:"RELEVANCE ENGINE";position:absolute;right:18px;top:8px;color:rgba(143,252,232,.055);font:700 27px/1 var(--font-display);letter-spacing:-1px;pointer-events:none}
.scope-library-head .panel-kicker{color:var(--signal-2)}
.scope-library-head h3{margin:4px 0 5px;color:#fff;font:700 19px/1.12 var(--font-display);letter-spacing:-.45px}
.scope-library-head p{margin:0;max-width:760px;color:#8ea8b2;font-size:11px;line-height:1.5}
.scope-library-head>strong{position:relative;z-index:1;min-width:100px;color:var(--signal-2);font:700 28px/1 var(--font-display);text-align:right}
.scope-library-head>strong span{display:block;margin-top:4px;color:#718f9a;font:600 8px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.8px}
.scope-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.scope-library-card{padding:14px;border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbfc);border:1px solid rgba(9,38,50,.09);box-shadow:0 12px 30px -24px rgba(3,25,34,.5);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.scope-library-card:hover{transform:translateY(-2px);border-color:rgba(43,228,196,.28);box-shadow:0 16px 34px -23px rgba(3,25,34,.55)}
.scope-library-title{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid rgba(9,38,50,.07)}
.scope-library-title span{font:700 14px/1.15 var(--font-display);color:#0a2430}
.scope-library-title svg{width:15px;height:15px;color:#0aa58e}
.scope-library-row{margin-top:9px}.scope-library-row small{display:block;margin-bottom:4px;color:#708994;font:600 7.5px/1 var(--font-mono);letter-spacing:.8px;text-transform:uppercase}.scope-library-row p{margin:0;color:#3f5862;font-size:9.7px;line-height:1.45}
@media(max-width:1100px){.scope-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.scope-library-head{display:block}.scope-library-head>strong{display:block;margin-top:12px;text-align:left}.scope-library-grid{grid-template-columns:1fr}}

/* v5.7 numeric typography: standard zero glyphs, no dotted/slashed technical zeros */
body:not(.login-only) :is(.metric-card strong,.mini-ring,.score-ring strong,.results-kpis strong,.verdict-tally strong,.print-gauge strong,.ticket-no,.analysis-header>strong,.risk-figure-value,.document-score,.category-row b,.active-document-card .doc-kpis b){font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-feature-settings:"zero" 0!important;font-variant-numeric:tabular-nums;}