:root{
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --ink:#0E1621;
  --ink-2:#2A3442;
  --muted:#5C6775;
  --faint:#8A94A3;
  --line:#E3E6EB;
  --line-strong:#CFD5DE;
  --accent:#1D5FE0;
  --critical:#C43B32;
  --high:#D97706;
  --medium:#B08600;
  --low:#4C7A8C;
  --kev:#C0281F;
  --ok:#12855F;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:14px;
  --shadow:0 1px 2px rgba(14,22,33,.04),0 8px 24px -16px rgba(14,22,33,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:#D8E4FF}

.app{max-width:1340px;margin:0 auto;padding:0 28px 40px}

/* progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .4s ease}
.progress.is-off span{opacity:0;transition:opacity .4s .1s}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:38px;height:38px;border-radius:11px;background:var(--ink);color:#5FE3B0;display:grid;place-items:center;flex:none}
.brand-text h1{font-size:19px;font-weight:600;letter-spacing:-.2px;line-height:1.2}
.brand-text p{font-size:10px;letter-spacing:.16em;color:var(--faint);font-family:var(--mono);margin-top:3px}
.topbar-meta{display:flex;align-items:center;gap:18px}

.live{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.live[data-state="live"] i{background:var(--ok);box-shadow:0 0 0 0 rgba(18,133,95,.5);animation:pulse 2.2s infinite}
.live[data-state="loading"] i{background:var(--accent);animation:pulse 1.2s infinite}
.live[data-state="error"] i{background:var(--critical)}
.live[data-state="snapshot"] i{background:var(--high)}

.stamp{text-align:right;line-height:1.15}
.stamp strong{display:block;font-family:var(--mono);font-size:15px;letter-spacing:-.02em}
.stamp small{font-size:11px;color:var(--faint)}

.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:var(--muted);background:var(--surface);transition:.18s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong);transform:rotate(20deg)}
.icon-btn.is-spin svg{animation:spin 1s linear infinite}

/* ticker */
.ticker{display:flex;align-items:center;gap:0;margin-top:18px;background:var(--ink);color:#DCE3EC;border-radius:10px;overflow:hidden;height:40px}
.ticker-label{flex:none;display:flex;align-items:center;gap:6px;padding:0 14px;height:100%;background:#8E1F17;color:#fff;font-size:11px;letter-spacing:.1em;font-weight:600}
.ticker-track{flex:1;min-width:0;overflow:hidden;position:relative}
.ticker-move{display:inline-flex;gap:34px;white-space:nowrap;font-size:12.5px;padding-left:20px;animation:ticker 60s linear infinite}
.ticker:hover .ticker-move{animation-play-state:paused}
.ticker-move b{font-family:var(--mono);color:#8FD8FF;font-weight:500}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.kpi{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;overflow:hidden}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:12px;color:var(--muted);letter-spacing:.04em}
.kpi-tag{font-size:10px;color:var(--faint);font-family:var(--mono);white-space:nowrap}
.kpi-value{display:flex;align-items:baseline;gap:5px;margin-top:6px}
.kpi-value span{font-size:36px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;font-feature-settings:"tnum"}
.kpi-value small{font-size:12px;color:var(--faint)}
.kpi-foot{font-size:11.5px;color:var(--faint);margin-top:4px;min-height:18px}
.spark{display:block;width:100%;height:34px;margin-top:6px}
.spark rect{fill:#CBD9F6}
.spark rect.hot{fill:#9FB9F2}
.kpi-bars{display:flex;gap:2px;height:6px;margin-top:12px;border-radius:3px;overflow:hidden}
.kpi-bars i{display:block;height:100%}
.kpi-flag{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:11px;color:var(--kev);font-family:var(--mono)}
.kpi-flag i{width:5px;height:5px;border-radius:50%;background:var(--kev);animation:pulse 2.4s infinite}
.kpi-due{height:4px;background:#EEF0F3;border-radius:2px;margin-top:13px;overflow:hidden}
.kpi-due span{display:block;height:100%;width:30%;background:var(--high);border-radius:2px;transition:width .6s}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:22px;margin-top:22px;align-items:start}
.main{min-width:0}
.feed,.layout,.kpis{min-width:0}

/* toolbar */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 250px;height:36px;padding:0 10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--faint);transition:.18s}
.search:focus-within{border-color:#B8CBF4;box-shadow:0 0 0 3px rgba(29,95,224,.08);color:var(--muted)}
.search input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--ink);min-width:0}
.search input::placeholder{color:#9AA3B0}
.search kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--faint)}
.chips{display:flex;gap:4px;background:#ECEEF1;padding:3px;border-radius:9px;min-width:0}
.chip{padding:5px 11px;font-size:12.5px;border-radius:7px;color:var(--muted);transition:.15s;white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip.is-active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(14,22,33,.08)}
.chip-kev.is-active{color:var(--kev)}
.toolbar-right{display:flex;gap:8px;align-items:center;min-width:0}
select{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 28px 0 10px;font:inherit;font-size:12.5px;color:var(--ink-2);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A94A3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.ghost-btn{height:36px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:12.5px;color:var(--ink-2);transition:.15s}
.ghost-btn:hover{border-color:var(--line-strong);background:#FAFBFC}

.result-line{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);padding:10px 2px 4px;font-family:var(--mono)}
.result-line .spacer{flex:1}
.dot-sep{opacity:.5}
.link-btn{font-family:var(--sans);font-size:11.5px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* feed */
.feed{display:flex;flex-direction:column;gap:10px}
.day{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:11px;color:var(--faint);font-family:var(--mono);letter-spacing:.05em}
.day::after{content:"";flex:1;height:1px;background:var(--line)}
.day.today{color:var(--ink)}
.day.today b{color:var(--ink)}

.vuln{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px 18px;transition:border-color .18s,box-shadow .18s,transform .18s;animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both}
.vuln::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--low)}
.vuln[data-sev="critical"]::before{background:var(--critical)}
.vuln[data-sev="high"]::before{background:var(--high)}
.vuln[data-sev="medium"]::before{background:var(--medium)}
.vuln[data-sev="low"]::before{background:var(--low)}
.vuln[data-sev="unknown"]::before{background:#C9CFD8}
.vuln:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-1px)}
.v-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cve{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cve:hover{color:var(--accent)}
.pill{font-size:10.5px;font-family:var(--mono);padding:2px 7px;border-radius:5px;border:1px solid transparent;white-space:nowrap}
.pill-critical{background:#FBEAE8;color:var(--critical);border-color:#F3D3CF}
.pill-high{background:#FDF1E3;color:#A85B05;border-color:#F5DFC4}
.pill-medium{background:#FBF5DF;color:#8A6800;border-color:#EFE4B9}
.pill-low{background:#EAF1F4;color:#3E6777;border-color:#D6E3E9}
.pill-unknown{background:#F1F3F5;color:var(--faint);border-color:#E6E9ED}
.badge-kev{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--kev);border:1px solid #EFCFCB;background:#FDF3F2;border-radius:5px;padding:2px 6px;font-family:var(--mono)}
.badge-kev i{width:4px;height:4px;border-radius:50%;background:var(--kev)}
.v-title{font-size:14px;font-weight:500;line-height:1.45;margin-top:7px;color:var(--ink)}
.v-desc{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vuln.is-open .v-desc{-webkit-line-clamp:unset;display:block}
.v-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--faint);font-family:var(--mono)}
.v-meta em{font-style:normal;color:#6B7686}
.v-foot{display:flex;align-items:center;gap:12px;margin-top:9px;padding-top:9px;border-top:1px dashed #EDEFF2}
.epss{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--faint);font-family:var(--mono)}
.epss b{color:var(--ink-2);font-weight:600}
.epss .bar{width:52px;height:3px;background:#EDEFF2;border-radius:2px;overflow:hidden}
.epss .bar i{display:block;height:100%;background:var(--ink-2)}
.v-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.mini{font-size:11px;color:var(--muted);padding:3px 8px;border-radius:6px;border:1px solid transparent;transition:.15s}
.mini:hover{background:#F4F6F9;color:var(--ink);border-color:var(--line)}
.mini.copy:hover{color:var(--accent)}
.v-detail{display:none;margin-top:10px;padding:10px 12px;background:#FAFBFC;border:1px solid #EDEFF2;border-radius:9px;font-size:12px;color:var(--ink-2)}
.vuln.is-open .v-detail{display:block;animation:fadeUp .25s ease both}
.v-detail h4{font-size:11px;letter-spacing:.08em;color:var(--faint);font-family:var(--mono);font-weight:500;margin:0 0 4px}
.v-detail p{margin:0 0 8px}
.v-detail p:last-child{margin-bottom:0}
.v-detail a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all}

/* cluster */
.cluster{background:#FCFCFD;border:1px solid var(--line);border-radius:12px;padding:13px 16px;animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both;transition:border-color .18s,box-shadow .18s}
.cluster:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.cl-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cl-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.cl-count{font-size:10.5px;font-family:var(--mono);color:var(--faint);background:#F0F2F5;border-radius:5px;padding:2px 6px}
.cl-spacer{flex:1}
.cl-desc{font-size:12px;color:var(--muted);line-height:1.65;margin-top:7px}
.cl-list{margin-top:10px;border-top:1px dashed #E7EAEE;padding-top:6px}
.cl-list li{display:grid;grid-template-columns:132px minmax(0,1fr) 34px;gap:10px;align-items:baseline;padding:4px 0;font-size:11.5px;border-bottom:1px solid #F4F5F7}
.cl-list li:last-child{border-bottom:none}
.cl-list a{font-family:var(--mono);color:var(--accent)}
.cl-list a:hover{text-decoration:underline;text-underline-offset:2px}
.cl-list span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-list b{font-family:var(--mono);font-weight:500;color:var(--ink-2);text-align:right}

/* skeleton */
.sk{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-height:118px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}
.sk i{display:block;height:10px;border-radius:5px;background:#EEF0F3;margin-bottom:10px}
.sk i:nth-child(1){width:32%}
.sk i:nth-child(2){width:78%;height:13px}
.sk i:nth-child(3){width:94%}
.sk i:nth-child(4){width:60%}

/* aside */
.side{display:flex;flex-direction:column;gap:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-head h2{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.panel-meta{font-size:10.5px;color:var(--faint);font-family:var(--mono)}
.sources li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #F0F2F5;font-size:11.5px;color:var(--faint)}
.sources li:first-child{border-top:none}
.sources b{font-size:12px;font-weight:500;color:var(--ink-2);min-width:62px}
.sources .s-dot{width:6px;height:6px;border-radius:50%;background:#C9CFD8;margin-left:auto;flex:none}
.sources .s-dot.ok{background:var(--ok)}
.sources .s-dot.err{background:var(--critical)}
.checklist li{padding:6px 0;border-top:1px solid #F0F2F5}
.checklist li:first-child{border-top:none}
.checklist label{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--ink-2);cursor:pointer;line-height:1.5}
.checklist input{margin:2px 0 0;accent-color:var(--ink);width:13px;height:13px;flex:none;cursor:pointer}
.checklist input:checked + span{color:var(--faint);text-decoration:line-through}
.check-progress{height:3px;background:#EEF0F3;border-radius:2px;margin-top:10px;overflow:hidden}
.check-progress span{display:block;height:100%;width:0;background:var(--ok);transition:width .35s}
.check-count{font-size:10.5px;color:var(--faint);font-family:var(--mono);margin-top:6px}
.legend li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding:4px 0}
.lg{width:9px;height:9px;border-radius:3px;flex:none}
.lg-critical{background:var(--critical)}
.lg-high{background:var(--high)}
.lg-medium{background:var(--medium)}
.lg-kev{background:var(--kev);border-radius:50%}
.lg-epss{background:var(--ink-2)}
.note{font-size:11px;color:var(--faint);line-height:1.7;margin-top:8px;padding-top:8px;border-top:1px solid #F0F2F5}

/* empty/footer/toast */
.empty{text-align:center;padding:60px 20px;color:var(--faint);font-size:13px}
.empty button{margin-top:12px}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);font-family:var(--mono)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--ink);color:#fff;font-size:12.5px;padding:9px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:.25s;z-index:80}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,133,95,.45)}70%{box-shadow:0 0 0 6px rgba(18,133,95,0)}100%{box-shadow:0 0 0 0 rgba(18,133,95,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{100%{transform:translateX(100%)}}

@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .side{display:grid;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .app{padding:0 16px 32px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .side{grid-template-columns:1fr}
  .topbar-meta .live{display:none}
  .toolbar-right{width:100%}
  .toolbar-right select{flex:1}
  .kpi-value span{font-size:30px}
}
@media (max-width:560px){
  .brand-text p{display:none}
  .stamp{display:none}
  .chips{width:100%;overflow-x:auto}
  .chip{flex:1;text-align:center}
  .foot{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ticker-move{animation:none!important}
}