@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--c1:#12121a;--c2:#161622;--bd:#1e1e2e;--tx:#e0e0e0;--dm:#888;--ac:#6c63ff;--gn:#00d4aa;--rd:#ff1744}
body{font-family:"IBM Plex Sans Arabic",sans-serif;background:var(--bg);color:var(--tx);min-height:100vh}

.tb{background:#0d0d14ee;border-bottom:1px solid var(--bd);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);direction:ltr}
.lg{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#6c63ff,#00d4aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ts{display:flex;gap:20px;font-size:.85rem;color:var(--dm);direction:rtl}
.ts .n{color:var(--ac);font-weight:600;font-family:"JetBrains Mono",monospace}
.ld{width:8px;height:8px;background:#00e676;border-radius:50%;display:inline-block;animation:pu 2s infinite}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.3}}
.nav{display:flex;gap:16px;align-items:center}
.nav a{color:var(--dm);text-decoration:none;font-size:.85rem;padding:6px 14px;border-radius:8px;border:1px solid var(--bd)}
.nav a:hover,.nav a.active{color:var(--ac);border-color:var(--ac)}

/* ===== Dashboard page ===== */
.layout{display:flex;gap:16px;max-width:1500px;margin:0 auto;padding:16px}
.sidebar{width:480px;flex-shrink:0;position:sticky;top:70px;height:calc(100vh - 86px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1e1e2e transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:#1e1e2e;border-radius:4px}
.main{flex:1;min-width:0}
.fb{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:12px}
.fs{margin-bottom:14px}.fs:last-child{margin-bottom:0}
.fl{font-size:.78rem;color:var(--dm);margin-bottom:8px;font-weight:600}
.fc{display:flex;gap:7px;flex-wrap:wrap}
.ch{padding:5px 13px;border-radius:10px;font-size:.78rem;cursor:pointer;text-decoration:none;border:1px solid var(--bd);color:var(--dm);transition:all .2s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ch:hover{border-color:#444;color:var(--tx)}
.ch.a{border-color:var(--ac);color:var(--ac);background:rgba(108,99,255,.1)}
.ch .cn{font-family:"JetBrains Mono",monospace;font-size:.68rem;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px}
.sr{display:flex;gap:10px;margin-bottom:16px}
.sr input{flex:1;background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:11px 16px;border-radius:12px;font-family:inherit;font-size:.9rem;outline:none}
.sr input:focus{border-color:var(--ac)}
.sr button{background:var(--ac);color:#fff;border:none;padding:11px 22px;border-radius:12px;cursor:pointer;font-family:inherit;font-weight:600}

.vc{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:18px;margin-bottom:12px;transition:border-color .2s}
.vc:hover{border-color:#333}
.vc-malware{border-color:rgba(255,23,68,.3);background:linear-gradient(135deg,var(--c1),rgba(255,23,68,.03))}
.vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;direction:ltr}
.vid{display:flex;align-items:center;gap:8px}
.vid a{color:var(--ac);text-decoration:none;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.95rem}
.vid a:hover{text-decoration:underline}
.sev{padding:4px 14px;border-radius:20px;font-size:.76rem;font-weight:600;direction:rtl}

.vt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;direction:ltr}
.t{padding:3px 10px;border-radius:7px;font-size:.74rem;font-weight:500;white-space:nowrap}
.tp{background:rgba(108,99,255,.1);color:#8b83ff}
.tv{background:rgba(0,212,170,.1);color:#00d4aa}
.tver{background:rgba(255,217,61,.1);color:#ffd93d}
.tc{background:rgba(100,181,246,.1);color:#64b5f6}
.tl{background:rgba(156,136,255,.1);color:#9c88ff}
.te{background:rgba(255,255,255,.05);color:#aaa}
.tty{background:rgba(255,107,107,.1);color:#ff6b6b}
.ta{background:rgba(206,147,255,.1);color:#ce93ff}
.tm{background:rgba(255,23,68,.15);color:#ff1744;font-weight:600}
.tex{background:rgba(255,23,68,.1);color:#ff1744}
.ts2{background:rgba(255,255,255,.03);color:#999}
.tpa{background:rgba(0,230,118,.1);color:#00e676}
.td{background:rgba(255,255,255,.04);color:#aaa}

.vd{color:var(--dm);font-size:.85rem;line-height:1.7;margin-bottom:10px;padding:10px 14px;background:rgba(255,255,255,.015);border-radius:8px;border-left:3px solid var(--bd);text-align:left}
.vf{display:flex;gap:14px;align-items:center;font-size:.78rem;color:var(--dm)}
.st{background:rgba(108,99,255,.12);color:var(--ac);padding:2px 10px;border-radius:8px;font-size:.7rem;font-weight:600}
.rl{color:var(--gn);text-decoration:none;font-size:.78rem;margin-right:auto}
.rl:hover{text-decoration:underline}
.expand-btn{color:var(--ac);font-size:.78rem;cursor:pointer;padding:4px 12px;border:1px solid var(--bd);border-radius:8px;user-select:none;background:transparent;font-family:inherit;line-height:1.4}
.expand-btn:hover{border-color:var(--ac);background:rgba(108,99,255,.08)}

.pkg-stats-box{background:rgba(108,99,255,.05);border:1px solid rgba(108,99,255,.15);border-radius:10px;padding:14px 18px !important;margin-top:12px !important;border-top:none !important}
.stats-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}
.stat-item{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--dm)}
.stat-num{font-family:"JetBrains Mono",monospace;color:var(--ac);font-weight:600;font-size:.9rem}
.stat-link{color:var(--gn);text-decoration:none;font-size:.8rem}
.stat-link:hover{text-decoration:underline}
.stat-loading{color:var(--dm);font-size:.8rem}

.det{max-height:0;overflow:hidden;transition:max-height .3s ease}
.det.open{max-height:4000px}
.ds{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.ds h4{color:var(--ac);font-size:.83rem;margin-bottom:6px}
.ds p{color:var(--dm);font-size:.83rem;line-height:1.7;text-align:left}
.ds a{color:var(--gn);text-decoration:none;font-size:.78rem}
.ds a:hover{text-decoration:underline}

.pg{display:flex;justify-content:center;gap:8px;margin-top:20px;padding-bottom:24px}
.pg a{background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:8px 14px;border-radius:8px;text-decoration:none;font-size:.85rem}
.pg a:hover,.pg a.a{border-color:var(--ac);color:var(--ac)}
.pg-sep{color:var(--tx2);padding:8px 4px;font-size:.85rem;user-select:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1100px){
  .layout{flex-direction:column;gap:12px}
  .sidebar{width:100%;height:auto;position:static;max-height:340px}
  .sr{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .layout{padding:10px}
  .sidebar{max-height:none}
  .sidebar .fb{padding:8px 10px}
  .timer-bar{flex-wrap:wrap;gap:10px;padding:8px 12px}
  .sr{flex-direction:column}
  .vf{flex-wrap:wrap;gap:6px}
  .vh{flex-wrap:wrap}
  .vt{gap:4px}
  .t{font-size:.7rem;padding:2px 6px}
}

.timer-bar{background:#0d0d14;border-bottom:1px solid var(--bd);padding:8px 24px;display:flex;align-items:center;justify-content:center;gap:28px;font-size:.78rem;color:var(--dm);direction:rtl;flex-wrap:wrap}
.timer-item{display:flex;align-items:center;gap:4px}
.countdown{color:var(--ac);font-family:"JetBrains Mono",monospace;font-weight:600}
#lastFetch{font-family:"JetBrains Mono",monospace;color:var(--gn)}
#nextFetch{font-family:"JetBrains Mono",monospace;color:var(--dm)}
#newAlert{color:var(--rd);font-weight:600;animation:flash .8s infinite;cursor:pointer;border:1px solid var(--rd);background:rgba(255,23,68,.08);font-family:inherit}
#newAlert:hover{background:rgba(255,23,68,.15)}
.new-count{color:var(--rd);font-family:"JetBrains Mono",monospace}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.4}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ac);color:#fff;padding:12px 24px;border-radius:12px;font-size:.9rem;font-weight:600;z-index:200;display:none;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

.cb-bar{background:var(--c1);border:1px solid var(--bd);border-radius:12px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cb-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.78rem;color:var(--dm);white-space:nowrap}
.cb-label input[type="checkbox"]{width:15px;height:15px;accent-color:var(--ac);cursor:pointer}
.cb-label:hover{color:var(--tx)}
.cb-divider{width:1px;height:20px;background:var(--bd);margin:0 4px}
.cb-title{font-size:.78rem;color:var(--dm);font-weight:600}

.search-alert{background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.2);border-radius:12px;padding:12px 18px;margin-bottom:14px;display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ac)}
.search-spinner{width:16px;height:16px;border:2px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.search-found{background:rgba(0,212,170,.08);border-color:rgba(0,212,170,.2);color:var(--gn)}
.search-empty{background:rgba(255,255,255,.03);border-color:var(--bd);color:var(--dm)}

.em{text-align:center;padding:60px;color:var(--dm)}
.em h3{margin-bottom:8px;color:var(--tx)}

/* ===== Scan page ===== */
.wrap{max-width:900px;margin:0 auto;padding:24px}
.scan-form{display:flex;gap:10px;margin-bottom:24px;direction:ltr}
.scan-form input{flex:1;background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:14px 18px;border-radius:12px;font-family:inherit;font-size:1rem;outline:none}
.scan-form input:focus{border-color:var(--ac)}
.scan-form select{background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:14px;border-radius:12px;font-family:inherit;font-size:.9rem;outline:none;cursor:pointer}
.ver-wrap{position:relative}
.ver-select{background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:14px;border-radius:12px;font-family:"JetBrains Mono",monospace;font-size:.85rem;outline:none;cursor:pointer;min-width:180px}
.ver-select:focus{border-color:var(--ac)}
.scan-form button{background:var(--ac);color:#fff;border:none;padding:14px 28px;border-radius:12px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.95rem}
.ver-warning{background:rgba(255,109,0,.08);border:1px solid rgba(255,109,0,.15);border-radius:8px;padding:8px 14px;margin-bottom:12px;font-size:.82rem;color:#ff6d00;direction:ltr}

.ac-wrap{flex:1;position:relative}
.ac-wrap input{width:100%;background:var(--c1);border:1px solid var(--bd);color:var(--tx);padding:14px 18px;border-radius:12px;font-family:inherit;font-size:1rem;outline:none}
.ac-wrap input:focus{border-color:var(--ac)}
.ac-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--c1);border:1px solid var(--bd);border-top:none;border-radius:0 0 12px 12px;max-height:300px;overflow-y:auto;z-index:50;display:none}
.ac-item{padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:2px}
.ac-item:hover,.ac-item.ac-selected{background:rgba(108,99,255,.15)}
.ac-item:last-child{border-bottom:none}
.ac-item-name{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:.88rem;color:var(--tx);display:flex;align-items:center;gap:8px}
.ac-item-ver{font-size:.75rem;color:var(--dm);font-weight:400}
.ac-item-desc{font-size:.78rem;color:var(--dm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.scan-loading{text-align:center;padding:60px;color:var(--dm);display:flex;align-items:center;justify-content:center;gap:12px;font-size:1rem}
.scan-empty{text-align:center;padding:60px;color:var(--dm);font-size:1rem}

.scan-pkg{background:var(--c1);border:2px solid var(--bd);border-radius:16px;padding:24px;margin-bottom:20px;overflow:hidden}
.scan-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;direction:ltr}
.scan-name{font-size:1.4rem;font-weight:700;color:var(--tx);text-align:left}
.scan-ver{font-size:.9rem;color:var(--dm);font-weight:400}
.scan-desc{color:var(--dm);font-size:.88rem;margin-top:6px;text-align:left}
.scan-badge{padding:8px 18px;border-radius:12px;font-size:.85rem;font-weight:600;white-space:nowrap}

.scan-stats-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;padding:12px 16px;background:rgba(255,255,255,.02);border-radius:10px;direction:ltr}

.used-by-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 16px;background:rgba(108,99,255,.05);border:1px solid rgba(108,99,255,.12);border-radius:10px;direction:ltr}
.used-by-label{font-size:.82rem;color:var(--ac);font-weight:600}
.used-by-link{font-size:.82rem;color:var(--gn);text-decoration:none;font-family:"JetBrains Mono",monospace;background:rgba(0,212,170,.08);padding:3px 10px;border-radius:6px}
.used-by-link:hover{text-decoration:underline}

.scan-summary{display:flex;gap:24px;margin-bottom:20px;padding:14px 18px;background:rgba(255,255,255,.02);border-radius:10px;direction:ltr}
.scan-count{font-size:.9rem;font-weight:600;font-family:"JetBrains Mono",monospace}

.scan-section{margin-top:20px;direction:ltr}
.scan-section h3{font-size:1rem;color:var(--ac);margin-bottom:12px;text-align:left}

.scan-vuln{background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:10px;padding:12px 16px;margin-bottom:8px;direction:ltr;text-align:left}
.scan-vuln-id{font-family:"JetBrains Mono",monospace;color:var(--ac);font-weight:600;font-size:.85rem;margin-left:8px}
.scan-vuln-cve{font-family:"JetBrains Mono",monospace;color:#ff6b6b;font-weight:600;font-size:.82rem;background:rgba(255,107,107,.1);padding:2px 8px;border-radius:4px;margin-left:6px}
.scan-vuln-score{font-family:"JetBrains Mono",monospace;color:#ff6d00;font-size:.8rem;margin-left:8px}
.scan-vuln-sum{color:var(--dm);font-size:.82rem;display:block;margin-top:6px}
.scan-vuln-fix,.scan-vuln-nofix{font-size:.8rem;display:block;margin-top:4px}
.scan-vuln-range{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:#ffd600;margin-left:8px}
.scan-vuln-fixed{font-size:.78rem;color:#00e676;font-family:"JetBrains Mono",monospace;margin-left:6px;background:rgba(0,230,118,.08);padding:2px 8px;border-radius:4px}
.scan-filtered{color:#00e676;font-size:.85rem;margin-top:10px}
.scan-age{font-size:.75rem;color:var(--dm);font-weight:400;background:rgba(255,255,255,.05);padding:2px 8px;border-radius:6px;margin-left:8px}

.scan-dep-age{font-size:.75rem;font-family:"JetBrains Mono",monospace;color:var(--dm);background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px}
.age-aging{color:#ffd600;background:rgba(255,217,0,.08)}
.age-old{color:#ff6d00;background:rgba(255,109,0,.08)}

.sub-deps-collapse{margin-top:6px}
.sub-deps-toggle{font-size:.78rem;color:var(--ac);cursor:pointer;padding:4px 0;list-style:none}
.sub-deps-toggle::-webkit-details-marker{display:none}
.sub-deps-toggle::before{content:'\25B6 ';font-size:.65rem}
details[open] > .sub-deps-toggle::before{content:'\25BC '}
.sub-deps-inner{padding:6px 0 0 12px;border-right:2px solid var(--bd);margin-top:4px}
.depth-badge{font-size:.6rem;color:var(--dm);background:rgba(255,255,255,.05);padding:1px 5px;border-radius:4px}
.depth-0{}.depth-1{opacity:.95}.depth-2{opacity:.9}.depth-3{opacity:.85;font-size:.95em}
.sub-dep-item{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:.8rem;border-right:2px solid var(--bd);margin-bottom:3px;border-radius:4px;background:rgba(255,255,255,.01)}
.sub-dep-cve{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:#ff6b6b;background:rgba(255,107,107,.1);padding:1px 6px;border-radius:4px}

.verdict-box{border:1px solid;border-radius:12px;padding:16px 20px;margin-bottom:16px;direction:ltr}
.verdict-title{font-size:1rem;font-weight:700;margin-bottom:8px}
.verdict-lines p{font-size:.85rem;color:var(--dm);line-height:1.8;margin:0}
.verdict-lines hr{border:none;border-top:1px solid var(--bd);margin:8px 0}

.scan-cached{font-size:.72rem;color:var(--dm);font-family:"JetBrains Mono",monospace}
.rescan-btn{font-size:.78rem;color:var(--ac);text-decoration:none;padding:4px 12px;border:1px solid var(--bd);border-radius:8px}
.rescan-btn:hover{border-color:var(--ac);background:rgba(108,99,255,.08)}

.dev-dep{opacity:.9}
.dev-note{font-size:.72rem;color:var(--dm);font-weight:400;margin-right:8px}
.dev-risk-note{font-size:.76rem;color:var(--dm);line-height:1.7;padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:8px;margin-bottom:10px;direction:ltr}
.dev-summary{display:flex;gap:20px;margin-bottom:10px;font-size:.85rem}
.risk-high-badge{font-size:.7rem;background:rgba(255,23,68,.15);color:#ff1744;padding:2px 8px;border-radius:4px;font-weight:600}
.risk-low-badge{font-size:.7rem;background:rgba(255,217,0,.1);color:#ffd600;padding:2px 8px;border-radius:4px}
.risk-low{font-size:.7rem;color:#ffd600;background:rgba(255,217,0,.08);padding:2px 6px;border-radius:4px}
.risk-none{font-size:.7rem;color:#888;background:rgba(255,255,255,.04);padding:2px 6px;border-radius:4px}

.ver-list{display:flex;flex-direction:column;gap:6px}
.ver-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:8px}
.ver-current{border-color:rgba(108,99,255,.3);background:rgba(108,99,255,.05)}
.ver-name{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:.88rem;color:var(--tx);min-width:100px}
.ver-badge{font-size:.7rem;background:rgba(108,99,255,.15);color:var(--ac);padding:2px 8px;border-radius:6px}
.ver-date{font-size:.82rem;color:var(--ac);font-family:"JetBrains Mono",monospace}
.ver-date-full{font-size:.78rem;color:var(--dm);margin-right:auto}

.scan-tree{display:flex;flex-direction:column;gap:4px;overflow:hidden;max-width:100%}
.scan-dep{background:rgba(255,255,255,.02);border:1px solid var(--bd);border-right:3px solid var(--bd);border-radius:10px;padding:10px 14px;direction:ltr;text-align:left;overflow:hidden;margin-bottom:4px}
.scan-dep-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.scan-dep-name{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:.88rem;color:var(--tx)}
.scan-dep-ver{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--dm)}
.scan-dep-status{font-size:.78rem;font-weight:600;margin-right:auto}
.scan-dep-vuln{margin-top:6px;padding:6px 10px;background:rgba(255,255,255,.02);border-radius:6px;font-size:.8rem;color:var(--dm);font-family:"JetBrains Mono",monospace;display:flex;gap:12px;direction:ltr}

.intro{text-align:center;padding:40px;color:var(--dm)}
.intro h3{color:var(--tx);margin-bottom:10px;font-size:1.2rem}
.intro p{font-size:.9rem;line-height:1.8}