:root{
--indigo:#120D2C; --violet:#9B46E7; --violet2:#653BE3; --lime:#D6F55B;
--ink:#191436; --muted:#5B5476; --faint:#8A84A8; --line:#E7E3F2; --bg:#FBFAFF;
--panel:#ffffff; --chip:#F0ECFA; --land:#241B46; --hi:#3B2C72;
--crit:#C0392B; --high:#D97706; --elev:#B45309; --ok:#4F7A0B;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);
font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;letter-spacing:-0.02em}
button{font-family:inherit}
a{color:var(--violet2)}
/* header */
.top{background:var(--indigo);color:#fff;padding:22px 0 20px;position:relative;overflow:hidden}
.top::after{content:"";position:absolute;inset:0;background:radial-gradient(640px 320px at 92% -40%,rgba(155,70,231,.5),transparent 60%);pointer-events:none}
.top .wrap{position:relative;z-index:1}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brandrow .lead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brandrow h1{font-size:30px;font-weight:800}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid #4A4280;color:#E9E6F7;white-space:nowrap}
.chip.sev{background:linear-gradient(90deg,var(--violet),var(--violet2));border:0;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.kpi{background:rgba(255,255,255,.06);border:1px solid #2E2760;border-radius:12px;padding:13px 15px}
.kpi b{display:block;font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.kpi span{font-size:12px;color:#BEB6E0;line-height:1.3;display:block;margin-top:3px}
.kpi.lime b{color:var(--lime)}
/* tabs */
.tabsbar{position:sticky;top:0;z-index:20;background:rgba(251,250,255,.94);backdrop-filter:blur(6px);
border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 0}
.tab{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;
padding:9px 15px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tab:hover{background:var(--chip);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--indigo);color:#fff}
.tab:focus-visible{outline:2px solid var(--violet2);outline-offset:2px}
.panel{display:none;padding:22px 0 30px}
.panel.on{display:block}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.sec-h h2{font-size:21px;font-weight:800}
.sec-sub{color:var(--muted);font-size:14px;margin:2px 0 16px;max-width:76ch}
.note{color:var(--faint);font-size:12.5px;line-height:1.45;border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px}
/* controls */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:600;
padding:8px 14px;border-radius:999px;cursor:pointer}
.fbtn:hover{border-color:var(--violet)}
.fbtn[aria-pressed="true"]{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.fbtn:focus-visible{outline:2px solid var(--violet2);outline-offset:2px}
/* map */
.mapgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch}
.mappanel{background:var(--indigo);border-radius:16px;padding:16px 16px 12px;position:relative}
.mappanel svg{width:100%;height:auto;display:block}
.land path{fill:var(--land)}
.hi path{fill:var(--hi)}
.bub{fill:rgba(155,70,231,.80);stroke:var(--lime);stroke-width:.8;cursor:pointer;transition:fill .12s}
.bub:hover,.bub.sel{fill:var(--lime);stroke:#fff}
.maplegend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 4px 2px;color:#BEB6E0;font-size:12px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--violet);border:1.4px solid var(--lime);display:inline-block;vertical-align:-1px;margin-right:6px}
.sq{width:12px;height:12px;border-radius:3px;background:var(--hi);display:inline-block;vertical-align:-1px;margin-right:6px}
.detail{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.detail .kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet2)}
.detail .big{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.detail .ips{font-size:34px;font-weight:800;color:var(--violet2);letter-spacing:-.02em}
.detail .meta{color:var(--muted);font-size:13.5px;margin-top:2px}
.gbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;margin-top:12px;width:fit-content}
.gbadge.direct{background:#FDEDEA;color:#A5281A}
.gbadge.regional{background:#FEF3E2;color:#92590A}
.gbadge.none{background:#EEF0F4;color:#555}
.detail p.g{font-size:13.5px;color:var(--ink);line-height:1.5;margin:10px 0 0}
.detail p.prec{font-size:13px;color:var(--muted);font-style:italic;margin:8px 0 0}
/* bars */
.barrow{display:flex;align-items:center;gap:12px;margin:7px 0;cursor:pointer}
.barrow .nm{width:132px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrk{flex:1;height:22px;background:var(--chip);border-radius:6px;overflow:hidden;position:relative;min-width:0}
.barfill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--violet2),var(--violet));border-radius:6px;transition:width .35s}
.barrow.sel .barfill{background:linear-gradient(90deg,#4F7A0B,var(--lime))}
.barrow .v{width:78px;text-align:right;font-size:13px;font-weight:700}
.barrow .pc{width:46px;text-align:right;font-size:12px;color:var(--muted)}
.barrow:hover .nm{color:var(--violet2)}
/* timeline */
.tl-chart{padding:14px 10px 4px}
.ev{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ev .when{width:118px;flex:0 0 auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ev .what{font-size:14px}
.ev .src{color:var(--faint);font-size:12px}
.k-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.k-discovery{background:#8A84A8}.k-leak{background:#D97706}.k-attack{background:#C0392B}.k-fix{background:#4F7A0B}.k-defence{background:#653BE3}
.legend-kinds{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:4px 0 10px}
.legend-kinds span{display:inline-flex;align-items:center;gap:6px}
/* impact */
.app-ctr{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.app-ctr .lab{font-size:13px;color:var(--muted)}
.arow{border-top:1px solid var(--line);padding:11px 0}
.arow .head{display:flex;align-items:center;gap:12px;cursor:pointer}
.arow .anm{width:130px;font-weight:700;font-size:14px}
.arow .acat{font-size:11.5px;color:var(--faint);width:120px}
.gscore{display:inline-flex;align-items:center;gap:8px;width:148px}
.gmeter{height:9px;border-radius:5px;background:var(--chip);flex:1;overflow:hidden;position:relative}
.gmeter i{position:absolute;inset:0 auto 0 0;border-radius:5px}
.gnum{font-size:12px;font-weight:700;width:34px;text-align:right}
.aips{margin-left:auto;font-size:13px;font-weight:700;width:90px;text-align:right}
.achev{width:16px;text-align:center;color:var(--faint);transition:transform .15s}
.arow.open .achev{transform:rotate(90deg)}
.adet{display:none;padding:10px 0 2px 142px;font-size:13px;color:var(--muted)}
.arow.open .adet{display:block}
.adet b{color:var(--ink)}
@media(max-width:720px){.adet{padding-left:0}}
/* setups ladder */
.ladder{display:flex;flex-direction:column;gap:8px}
.rung{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer;background:#fff}
.rung:hover{border-color:var(--violet)}
.rung.sel{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(18,13,44,.08)}
.rung .lvlbadge{font-size:11px;font-weight:800;letter-spacing:.03em;padding:5px 10px;border-radius:7px;white-space:nowrap}
.rung .nm{font-weight:700;font-size:14.5px}
.rung .det{display:none;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.rung.sel .det{display:block}
.lv4{background:#FDEDEA;color:#A5281A}.lv3{background:#FEF3E2;color:#92590A}.lv2{background:#FBF3DF;color:#7A5B08}.lv1{background:#EAF3DD;color:#4F7A0B}.lv0{background:#EEF0F4;color:#555}
/* self-check */
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sc-form{display:flex;flex-direction:column;gap:14px}
.sc-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.sc-field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.sc-out{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column}
.sc-band{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:999px;width:fit-content}
.sc-out h3{font-size:22px;font-weight:800;margin:12px 0 6px}
.sc-out ul{margin:8px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.sc-out li{display:flex;gap:10px;font-size:14px;color:var(--ink);line-height:1.45}
.sc-out li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet2);margin-top:7px;flex:0 0 auto}
.honest{display:flex;gap:10px;align-items:flex-start;background:#F4FBDF;border:1px solid #E4F3AE;border-radius:11px;padding:12px 14px;margin-top:16px;font-size:13px;color:#2E3B0A;line-height:1.45}
/* verify */
.cc{border-top:1px solid var(--line);padding:13px 0}
.cc .t{font-weight:700;font-size:14px}
.cc .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.cc .seen,.cc .chk{font-size:13px;padding:9px 12px;border-radius:9px;line-height:1.4}
.cc .seen{background:#FDEDEA;color:#7a2b20}.cc .chk{background:#EAF3DD;color:#33500a}
.cc .res{font-size:13px;color:var(--muted);margin-top:7px}
.cc .res b{color:var(--ink)}
.scanbars{display:flex;flex-direction:column;gap:9px;margin:6px 0 2px}
.sb{display:flex;align-items:center;gap:11px}
.sb .nm{width:150px;font-size:13px;font-weight:600}
.sb .trk{flex:1;height:13px;background:var(--chip);border-radius:4px;overflow:hidden;position:relative}
.sb .trk i{position:absolute;inset:0 auto 0 0;background:var(--violet2);border-radius:4px}
.sb .v{font-size:12.5px;color:var(--muted);width:200px;text-align:right}
/* flaw mini */
.flaw2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.flawc{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.flawc .cve{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:800;color:var(--violet2);background:var(--chip);padding:5px 10px;border-radius:7px}
.flawc p{font-size:14px;line-height:1.5;margin:12px 0}
.flawc pre{background:var(--indigo);color:#C9C3E6;border-radius:10px;padding:14px 16px;margin:0;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow:auto}
.flawc .lime{color:var(--lime)}
footer{border-top:1px solid var(--line);padding:18px 0 30px;color:var(--faint);font-size:12.5px;line-height:1.5}
footer b{color:var(--muted)}
.tip{position:fixed;pointer-events:none;background:var(--indigo);color:#fff;font-size:12px;padding:7px 10px;border-radius:8px;opacity:0;transition:opacity .1s;z-index:60;max-width:240px;line-height:1.35}
.tip b{color:var(--lime)}
@media(max-width:860px){
.kpis{grid-template-columns:repeat(2,1fr)}
.mapgrid{grid-template-columns:1fr}
.sc-grid{grid-template-columns:1fr}
.flaw2{grid-template-columns:1fr}
.cc .pair{grid-template-columns:1fr}
.brandrow h1{font-size:25px}
}