/* Patchpager design layer.
   Loaded after the template's inline CSS, so it owns layout, surfaces and type.
   Tokens live in :root / html[data-theme="light"] in templates/index.html. */

body{
  font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;
  background:var(--bg);-webkit-font-smoothing:antialiased;
}
body::before,html[data-theme="light"] body::before{display:none}
html[data-theme="light"] body{background:var(--bg)}
h1,h2,h3,h4,h5,.panel-title,.chart-title,.scan-panel-title{font-family:'Space Grotesk','Inter',sans-serif}
a{color:var(--cyan)}
a:hover{color:var(--txt)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(133,141,153,.32);border-radius:8px;border:2px solid transparent;background-clip:padding-box}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,
[onclick]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-red);outline-offset:2px;box-shadow:none;
}

/* ── Ambient 3D field ─────────────────────────────────────────────────────── */
#rf-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

/* ── Loader ───────────────────────────────────────────────────────────────── */
#loading,html[data-theme="light"] #loading{
  background:var(--obsidian);display:block;
  transition:opacity .7s ease .15s,visibility 0s linear .85s;
}
#loading::before{display:none}
#loading.wipe-out{transform:none;opacity:0;visibility:hidden;pointer-events:none}
#rf-loader{position:absolute;inset:0;width:100%;height:100%;display:block}
.ld-logo-img{
  display:none;position:absolute;left:50%;top:44%;width:min(46vh,70vw);height:auto;
  transform:translate(-50%,-50%);filter:none;animation:none;
}
.rf-nogl .ld-logo-img{display:block}
.ld-center{
  position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);padding:0 16px;
  display:flex;flex-direction:column;align-items:center;gap:4px;animation:none;
}
.ld-brand,html[data-theme="light"] .ld-brand{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.1;
  letter-spacing:-.02em;color:var(--ice);background:none;-webkit-text-fill-color:currentColor;animation:none;margin:0;
}
.ld-tagline{font-size:15px;font-weight:400;color:#B6BCC6;min-height:0;margin:0 0 18px}
.ld-phase{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#858D99;
  text-shadow:none;min-height:20px;
}
.load-progress-wrap{position:static;width:min(280px,70vw);height:2px;margin-top:10px;background:rgba(133,141,153,.2)}
.load-progress-bar{background:var(--brand-red);box-shadow:none;animation:none;transition:width .5s ease}

/* ── Sidebar: obsidian in both themes, per the brand navigation rule ──────── */
#sidebar{
  top:0;width:var(--sidebar);z-index:120;padding:0;overflow:hidden;display:flex;flex-direction:column;
  background:var(--obsidian);border-right:1px solid rgba(133,141,153,.16);
  --txt:#F2F4F7;--txt2:#B6BCC6;--txt3:#858D99;--border:rgba(133,141,153,.2);
}
html[data-theme="light"] #sidebar{background:var(--obsidian)}
.rf-brand{
  display:flex;align-items:center;gap:10px;padding:14px 16px 12px;text-decoration:none;flex:none;
  perspective:400px;
}
.rf-brand-mark{width:46px;height:46px;flex:none;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.rf-brand-mark img{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 8px rgba(253,54,12,.28))}
.rf-brand:hover .rf-brand-mark{transform:rotateY(-18deg) rotateX(8deg) scale(1.06)}
.rf-brand-text{display:flex;flex-direction:column;min-width:0}
.rf-wordmark{height:24px;width:auto;max-width:100%;display:block}
.ld-brand img{height:clamp(32px,4vw,46px);width:auto;display:block}
.logo-text,html[data-theme="light"] .logo-text{
  font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  color:var(--ice);background:none;-webkit-text-fill-color:currentColor;animation:none;white-space:nowrap;
}
.logo-sub,html[data-theme="light"] .logo-sub{font-size:11.5px;font-weight:400;color:#858D99;margin-top:1px;line-height:1.3}
.rf-nav-scroll{flex:1;overflow-y:auto;padding:0 0 14px}
.nav-group-label{font-size:11.5px;font-weight:500;color:#858D99;padding:12px 18px 4px;gap:0}
.nav-group-label::after{display:none}
.nav-item{
  margin:1px 10px;padding:6px 10px 6px 8px;gap:10px;border-radius:7px;border-left:none;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:#B6BCC6;
}
.nav-item:hover{background:rgba(133,141,153,.1);color:#F2F4F7;transform:none}
.nav-item .rf-ic{
  width:18px;height:18px;flex:none;border:none;border-radius:0;box-shadow:none;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.nav-item:hover .rf-ic{transform:none;background:currentColor;box-shadow:none}
.nav-item.active{color:#F2F4F7;background:rgba(253,54,12,.13);border-left:none}
.nav-item.active .rf-ic{background:var(--brand-red);box-shadow:none}
.nav-item.active::before{
  left:-10px;top:7px;bottom:7px;width:3px;background:var(--brand-red);border-radius:0 2px 2px 0;animation:none;
}
.nav-badge{
  background:transparent;border:none;color:#858D99;padding:0;font-size:11.5px;font-weight:500;
}
.nav-item.active .nav-badge{color:#F2F4F7}
.rf-sources{margin:14px 18px 0;color:#858D99;font-size:12.5px}
.rf-sources summary{cursor:pointer;padding:4px 0;font-weight:500}
.rf-sources summary:hover{color:#F2F4F7}
.nav-sources{padding:6px 0 0;font-family:'Inter',sans-serif;font-size:12.5px;line-height:2}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
#header,html[data-theme="light"] #header{
  left:var(--sidebar);height:var(--header);padding:0 24px;gap:18px;box-shadow:none;
  background:rgba(8,9,12,.78);border-bottom:1px solid rgba(133,141,153,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-theme="light"] #header{background:rgba(255,255,255,.86);border-bottom-color:var(--border)}
.rf-header-mark{display:none;width:36px;height:36px;flex:none}
.rf-header-mark img{width:100%;height:100%}
.rf-crumb{display:flex;flex-direction:column;line-height:1.25;min-width:0;white-space:nowrap}
.rf-crumb span{font-size:11.5px;color:var(--txt3)}
.rf-crumb b{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--txt)}
.threat-bar{margin:0;gap:8px;padding-left:18px;border-left:1px solid var(--border)}
.threat-label{font-size:12px;font-weight:500;color:var(--txt3)}
.threat-level-txt{font-size:12.5px;font-weight:600;color:var(--orange-ink)}
.tl-dot{width:14px;height:4px;border-radius:2px;background:rgba(133,141,153,.25)}
html[data-theme="light"] .tl-dot{background:rgba(57,68,84,.16)}
.tl-dot.lit{animation:none}
.hdr-status{gap:16px;min-width:0;overflow:hidden}
.status-pill,html[data-theme="light"] .status-pill{
  background:none;border:none;padding:0;font-size:12.5px;color:var(--txt2);white-space:nowrap;
}
.pulse-dot{animation:none;box-shadow:none}
#countdown{color:var(--txt);font-size:12px}
.hdr-status .fa{color:var(--txt3)!important}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.btn,.scanner-btn{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:8px 14px;border-radius:7px;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.btn-primary,.scanner-btn{
  background:var(--red);color:var(--on-red);border:1px solid transparent;border-radius:0;box-shadow:none;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-primary::after,.scanner-btn::after{display:none}
.btn-primary:hover,.scanner-btn:hover{background:#FF5A2B;color:var(--on-red);box-shadow:none;border-color:transparent}
html[data-theme="light"] .btn-primary:hover,html[data-theme="light"] .scanner-btn:hover{background:#B91D22}
.btn-primary:focus-visible,.scanner-btn:focus-visible{clip-path:none}
.btn-primary .fa,.scanner-btn .fa{color:inherit}
.btn-ghost,select.btn-ghost{background-color:var(--surface2);border:1px solid var(--border);color:var(--txt)}
.btn-ghost:hover{background-color:var(--surface2);border-color:var(--border2);color:var(--txt);box-shadow:none}
html[data-theme="light"] .btn-ghost{background-color:#fff}
.theme-toggle{width:52px;height:26px;background:var(--surface2);border-color:var(--border)}
.theme-toggle:hover{border-color:var(--border2);box-shadow:none}
.theme-toggle .tt-sun{color:var(--yellow-ink)}
.theme-toggle .tt-moon{color:var(--txt2)}
.theme-toggle .tt-knob,html[data-theme="light"] .theme-toggle .tt-knob{
  width:20px;height:20px;top:2px;left:2px;background:var(--steel);border:none;box-shadow:none;transform:translateX(26px);
}
html[data-theme="light"] .theme-toggle{background:var(--surface2)}
html[data-theme="light"] .theme-toggle .tt-knob{transform:none}
.filter-sel,.form-input,.filter-search input{font-family:'Inter',sans-serif;font-size:13px}
.filter-sel,.form-input{background:var(--surface2);border-color:var(--border);color:var(--txt)}
.filter-sel:focus,.form-input:focus{border-color:var(--red);box-shadow:none}
.form-input{font-family:'JetBrains Mono',monospace}
.form-label{font-size:12.5px;font-weight:500;color:var(--txt2)}

/* ── Page frame ───────────────────────────────────────────────────────────── */
#main{padding:22px 28px 56px;max-width:1720px}
.page.active{animation:rf-page .36s cubic-bezier(.2,.75,.25,1) both;transform-origin:50% 0}
@keyframes rf-page{
  from{opacity:0;transform:perspective(1400px) rotateX(3deg) translateY(12px)}
  to{opacity:1;transform:none}
}
.page-intro{display:none}
.section-hdr{flex-wrap:wrap;gap:4px 12px;margin-bottom:18px;padding-bottom:0;border-bottom:none;align-items:center}
.section-hdr h2{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:600;letter-spacing:-.015em;line-height:1.2;order:1}
.section-hdr h2 i{display:none}
.sec-back{order:0;border-radius:7px;background:var(--surface2)}
.section-tag{
  order:2;font-family:'Inter',sans-serif!important;font-size:12px;font-weight:500;padding:1px 9px;border-radius:20px;
  background:transparent;color:var(--txt2);border:1px solid var(--border);
}
.tag-advisory{color:var(--red-ink);border-color:rgba(253,54,12,.4);background:transparent}
.tag-intel{color:var(--txt2);border-color:var(--border);background:transparent}
.section-desc{order:4;flex-basis:100%;margin:0;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--txt3)}
.sec-export{order:3;margin-left:auto}
.sec-exp-btn{font-family:'Inter',sans-serif!important;font-size:13px;font-weight:600;background:var(--surface2);color:var(--txt)}
.sec-exp-btn:hover{color:var(--txt);border-color:var(--border2);box-shadow:none}
.sec-exp-menu{background:var(--surface2);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.sec-exp-menu a{font-family:'Inter',sans-serif;font-size:13px}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.panel,.chart-box,.scan-panel,.conn-card,.scan-history,.scanner-hero,.risk-score-card,.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;animation:none;
  box-shadow:none;
}
html[data-theme="light"] .panel,html[data-theme="light"] .chart-box{box-shadow:0 1px 2px rgba(23,26,33,.05)}
.panel::before,.chart-box::before,.chart-box::after,.scan-panel::after,.scanner-hero::before,.stat-card::before,
.actor-card::before,.conn-card::before{display:none}
.panel-title,.chart-title,.scan-panel-title{
  font-family:'Space Grotesk',sans-serif!important;font-size:14.5px;font-weight:600;color:var(--txt);
}
.chart-title i,.panel-title i,.scan-panel-title i{color:var(--txt3)!important;filter:none!important}
.actor-card,.breach-card,.conn-card,.vuln-card,.finding-card,.remed-item,.research-item,.forum-item{
  background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:10px;animation:none!important;
}
.actor-card:hover,.breach-card:hover{box-shadow:none}
html[data-theme="light"] .actor-card:hover,html[data-theme="light"] .breach-card:hover{box-shadow:none;background:var(--surface)!important}
.actor-card:hover,.breach-card:hover,.conn-card:hover{border-color:var(--border2)!important}
.actor-name,.breach-title,.conn-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600}
.actor-desc{color:var(--txt2);font-size:13px}
.breach-count{color:var(--txt);font-family:'Space Grotesk',sans-serif;font-weight:600}
.d-big,.risk-score-val{font-family:'Space Grotesk',sans-serif}
.chart-box{padding:18px}
.chart-grid{grid-template-columns:4fr 5fr 3fr;gap:14px}
.chart-wrap{height:220px}

/* ── Tables + tabs ────────────────────────────────────────────────────────── */
table{font-size:13.5px}
thead th,.tbl-wrap thead th,html[data-theme="light"] thead th{
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--txt2);background:var(--surface2);padding:9px 14px;
}
tbody tr,html[data-theme="light"] tbody tr{border-bottom:1px solid var(--border)}
tbody tr:hover,html[data-theme="light"] tbody tr:hover,.tbl-wrap tbody tr:hover td{background:rgba(133,141,153,.08)}
tbody td{padding:10px 14px;color:var(--txt2)}
tbody td.mono{font-size:12.5px}
tbody td.mono:hover{text-shadow:none}
.tabs{background:none;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:18px;width:100%;overflow-x:auto;scrollbar-width:none}
.tab{flex:none;white-space:nowrap;padding:9px 2px;border-radius:0;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--txt3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{background:none;color:var(--txt);border-bottom-color:var(--red)}
.tab:hover:not(.active){background:none;color:var(--txt)}
.tab-count,html[data-theme="light"] .tab-count{background:transparent;color:inherit;font-size:12px}
.pager-btn{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;border-radius:7px;background:var(--surface2)}
.pager-btn:hover:not(:disabled){background:var(--surface2);border-color:var(--border2);color:var(--txt);box-shadow:none}
.pager-info b{color:var(--txt)}
.pager-pages{font-family:'Inter',sans-serif;font-size:12px}

/* Severity: tinted plate + explicit word, so colour is never the only signal. */
.badge{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:4px}
.b-crit,.b-online{background:rgba(253,54,12,.14);color:var(--red-ink);border:1px solid rgba(253,54,12,.4)}
.b-high,.b-orange{background:rgba(255,107,53,.13);color:var(--orange-ink);border:1px solid rgba(255,107,53,.38)}
.b-med{background:rgba(198,154,69,.14);color:var(--yellow-ink);border:1px solid rgba(198,154,69,.42)}
.b-low,.b-offline,.b-purple{background:rgba(133,141,153,.12);color:var(--txt2);border:1px solid var(--border2)}
html[data-theme="light"] .b-low,html[data-theme="light"] .b-offline{color:var(--txt2)}
.b-blue,.b-cyan{background:rgba(38,132,255,.13);color:var(--cyan);border:1px solid rgba(38,132,255,.4)}
.b-green{background:rgba(53,214,164,.12);color:var(--green);border:1px solid rgba(53,214,164,.38)}

/* ── Command Center stage ─────────────────────────────────────────────────── */
#rf-stage{
  position:relative;height:clamp(420px,54vh,580px);border-radius:14px;overflow:hidden;isolation:isolate;
  color:var(--ice);background:var(--obsidian) url(/static/brand/backgrounds/01_dark_circuit_hero.svg) center/cover no-repeat;
  border:1px solid rgba(133,141,153,.18);
}
#rf-globe{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;z-index:1}
#rf-globe.dragging{cursor:grabbing}
.rf-stage-copy{
  position:absolute;z-index:3;left:clamp(20px,3.4vw,44px);top:50%;transform:translateY(-58%);
  width:min(540px,50%);pointer-events:none;
}
.rf-stage-copy h1{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,3.7vw,56px);
  line-height:1.04;letter-spacing:-.03em;margin:0 0 14px;
}
.rf-stage-copy p{font-size:15px;line-height:1.55;color:#C6CBD3;margin:0 0 20px;max-width:42ch}
.rf-stage-actions{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}
#rf-stage .btn-primary{background:var(--brand-red);color:var(--obsidian);padding:10px 18px}
#rf-stage .btn-primary:hover{background:#FF5A2B}
#rf-stage .btn-ghost{background:rgba(32,36,43,.8);border-color:rgba(133,141,153,.35);color:var(--ice);padding:10px 16px}
#rf-stage .btn-ghost:hover{background:#2A2F38}
.rf-stage-key{
  position:absolute;z-index:3;right:28px;bottom:54px;margin:0;font-size:12.5px;color:#A9B0BB;pointer-events:none;
  background:rgba(8,9,12,.7);padding:3px 9px;border-radius:5px;
}
#rf-pins{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.rf-pin{
  position:absolute;left:0;top:0;display:flex;gap:7px;align-items:baseline;padding:3px 8px;pointer-events:auto;
  background:rgba(8,9,12,.82);border:1px solid rgba(133,141,153,.3);border-radius:5px;color:var(--ice);
  font:500 12.5px/1.3 'Inter',sans-serif;cursor:pointer;white-space:nowrap;will-change:transform;
  transition:opacity .2s;
}
.rf-pin b{font:500 12px/1.3 'JetBrains Mono',monospace;color:#FF8F8D}
.rf-pin:hover{border-color:var(--brand-red)}
.rf-pin.back{opacity:0;pointer-events:none}
.rf-nogl #rf-pins{position:absolute;inset:auto 20px 72px auto;display:flex;flex-direction:column;gap:6px;width:auto;overflow:visible}
.rf-nogl .rf-pin{position:static;transform:none!important}
.rf-nogl .rf-stage-key,.rf-nogl #rf-globe{display:none}

/* Stat plates overlap the stage; the two that need action carry more weight. */
#stats-banner{
  position:relative;z-index:4;display:grid;grid-template-columns:1.55fr 1.55fr repeat(5,minmax(0,1fr));gap:10px;
  margin:-44px 16px 18px;perspective:1100px;
}
.stat-card{
  background:#20242B;border:1px solid rgba(133,141,153,.24);border-radius:10px;padding:13px 14px 12px;
  animation:none!important;box-shadow:0 14px 26px -16px rgba(0,0,0,.75);min-width:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .18s ease-out,border-color .18s,box-shadow .18s;transform-style:preserve-3d;
}
html[data-theme="light"] .stat-card{background:#fff;border-color:var(--border);box-shadow:0 14px 24px -18px rgba(23,26,33,.4)}
.stat-card:hover,.stat-card.c-red:hover{border-color:var(--border2);box-shadow:0 22px 30px -18px rgba(0,0,0,.8)}
.stat-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(242,244,247,.1),transparent 62%);
}
.stat-card:hover::after{opacity:1}
.stat-icon{display:none}
.stat-label{font-family:'Inter',sans-serif!important;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--txt2);margin:0 0 5px}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-card.c-red .stat-value,.stat-card.c-orange .stat-value{font-size:38px}
.stat-card.c-red .stat-value{color:var(--red)}
.stat-card.c-orange .stat-value{color:var(--orange)}
.stat-sub{font-size:12px;color:var(--txt3);margin-top:3px;line-height:1.35}

/* ── 3D card response on the people-and-actors grids ──────────────────────── */
.actor-grid,.breach-grid{perspective:1400px}
.rf-tilt{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px))!important;
  transition:transform .18s ease-out,border-color .18s;
}

/* ── Target scanner ───────────────────────────────────────────────────────── */
.scanner-hero{padding:26px 28px;position:relative;overflow:hidden}
.scanner-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.32;
  background:url(/static/brand/backgrounds/02_circuit_trace.svg) right center/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 45%,#000);mask:linear-gradient(90deg,transparent 45%,#000);
}
html[data-theme="light"] .scanner-hero::after{display:none}
.scanner-hero>*{position:relative;z-index:1}
.scanner-hero-title{
  font-family:'Space Grotesk',sans-serif!important;font-size:24px;font-weight:600;letter-spacing:-.01em;
  color:var(--txt);background:none;-webkit-text-fill-color:currentColor;text-shadow:none;
}
.scanner-hero-sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--txt2);max-width:70ch}
.scanner-input-wrap input,#scanner-input{font-family:'JetBrains Mono',monospace;background:var(--surface2);border-color:var(--border);color:var(--txt)}
#scanner-input:focus{border-color:var(--red);box-shadow:none}
.scanner-hint-pill{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--surface2);color:var(--txt2);border-color:var(--border)}
.scanner-hint-pill:hover{border-color:var(--border2);color:var(--txt);box-shadow:none}
.scan-empty-icon{opacity:.9;margin-bottom:12px}
.scan-empty-icon img{width:52px;height:52px;display:inline-block;animation:rf-scan-tilt 7s ease-in-out infinite}
@keyframes rf-scan-tilt{0%,100%{transform:perspective(300px) rotateY(-22deg) rotateX(10deg)}50%{transform:perspective(300px) rotateY(22deg) rotateX(-6deg)}}
.scan-empty-title,.scan-loading-txt{font-family:'Space Grotesk',sans-serif!important;font-size:18px;font-weight:600;color:var(--txt)}
.scan-empty-sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--txt3);max-width:56ch}
.scan-empty-sub strong{color:var(--txt)!important}
.scan-loading-sub{font-size:12.5px}

/* Gimbal: three rings on separate axes around the emblem while a scan runs. */
.scan-loading-spinner{
  position:relative;width:84px;height:84px;margin:0 auto 16px;border:none;border-radius:0;animation:none;
  transform-style:preserve-3d;perspective:420px;
  background:url(/static/brand/patchpager-mark-144.png) center/44px no-repeat;
}
.scan-loading-spinner::before,.scan-loading-spinner::after,.scan-loading-spinner span{
  content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--red);
  border-top-color:transparent;border-bottom-color:rgba(133,141,153,.5);
}
.scan-loading-spinner::before{animation:rf-gimbal-a 2.4s linear infinite}
.scan-loading-spinner::after{inset:7px;animation:rf-gimbal-b 3.1s linear infinite}
.scan-loading-spinner span{inset:-7px;display:block;animation:rf-gimbal-c 3.8s linear infinite}
@keyframes rf-gimbal-a{to{transform:rotate3d(1,.4,0,360deg)}}
@keyframes rf-gimbal-b{to{transform:rotate3d(.3,1,0,-360deg)}}
@keyframes rf-gimbal-c{to{transform:rotate3d(.6,.2,1,360deg)}}

/* ── Overlays ─────────────────────────────────────────────────────────────── */
#drawer,html[data-theme="light"] #drawer{top:0;width:min(480px,100vw);transform:translateX(100%);background:var(--graphite)}
html[data-theme="light"] #drawer{background:#fff}
#drawer.open{transform:none}
.dr-hdr,html[data-theme="light"] .dr-hdr{background:inherit}
.dr-title{font-size:16px;font-weight:600;font-family:'Space Grotesk',sans-serif}
.dl{font-size:12.5px;font-weight:500;color:var(--txt3)}
.dm{color:var(--txt)}
#drawer-backdrop{z-index:195}
.modal-box{background:var(--graphite)}
html[data-theme="light"] .modal-box{background:#fff}
.toast{font-family:'Inter',sans-serif;font-size:13.5px;background:var(--graphite)}
html[data-theme="light"] .toast{background:#fff}
#scroll-top{background:var(--surface2);border:1px solid var(--border);color:var(--txt);clip-path:none;border-radius:8px}
#scroll-top:hover{background:var(--surface2);border-color:var(--border2);box-shadow:none}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1480px){
  .threat-bar{display:none}
}
@media(max-width:1240px){
  #stats-banner{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stat-card.c-red,.stat-card.c-orange{grid-column:span 3}
  .stat-card:nth-child(n+3){grid-column:span 2}
  .stat-card:nth-child(n+6){grid-column:span 3}
  .chart-grid{grid-template-columns:1fr 1fr}
  .chart-grid>:nth-child(2){grid-column:1/-1;grid-row:1}
  .hdr-status .status-pill:nth-child(n+2){display:none}
}
@media(max-width:768px){
  #header,html[data-theme="light"] #header{left:0;padding:0 14px;gap:10px}
  #sidebar{width:272px}
  #sidebar-backdrop.open{inset:0}
  .rf-header-mark{display:block}
  .rf-crumb{display:none}
  #main{padding:14px 16px 48px}
  .hdr-controls{margin-left:auto;gap:6px}
  .hdr-controls #date-select,.hdr-controls .btn-ghost{display:none}
  .section-hdr h2{font-size:21px}
  .section-desc{display:block}
  #rf-stage{height:auto;padding:22px 18px 62px}
  #rf-globe{position:relative;height:280px;margin:6px -18px 0;width:calc(100% + 36px)}
  .rf-stage-copy{position:static;transform:none;width:auto;pointer-events:auto}
  .rf-stage-copy h1{font-size:36px}
  .rf-stage-key{display:none}
  #stats-banner{margin:-40px 10px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card,.stat-card.c-red,.stat-card.c-orange,.stat-card:nth-child(n+3),.stat-card:nth-child(n+6){grid-column:span 1}
  .stat-card:nth-child(7){grid-column:1/-1}
  .stat-card.c-red .stat-value,.stat-card.c-orange .stat-value{font-size:30px}
  .chart-grid{grid-template-columns:1fr}
  .chart-grid>:nth-child(2){grid-row:auto;grid-column:auto}
  .scanner-hero{padding:20px 16px}
  .scanner-input-wrap{flex-wrap:wrap}
}

@media(prefers-reduced-motion:reduce){
  .page.active{animation:none}
  .scan-empty-icon img{animation:none}
  .stat-card,.rf-tilt{transform:none!important}
}