/* ============ LEGEND HACKER v2 — dark archive theme ============ */
:root{
  --bg:#060a13;
  --bg2:#0a111f;
  --panel:#0c1322;
  --panel2:#111b30;
  --line:rgba(148,163,184,.16);
  --line2:rgba(148,163,184,.28);
  --txt:#e6ecf5;
  --muted:#8b96a9;
  --faint:#5a6577;
  --accent:#38cfff;
  --accent-dim:rgba(56,207,255,.12);
  --accent-line:rgba(56,207,255,.4);
  --good:#4ade80;
  --gray:#94a3b8;
  --red:#f43f5e;
  --orange:#fb923c;
  --purple:#a78bfa;
  --slate:#64748b;
  --r:12px;
  --r-sm:8px;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(56,207,255,.07), transparent 60%),
    radial-gradient(700px 420px at -10% 10%, rgba(167,139,250,.05), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.shell{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(6,10,19,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:.14em;color:var(--txt)}
.brand span{color:var(--accent)}
.topnav{display:flex;gap:6px}
.topnav a{
  color:var(--muted);font-size:.86rem;font-weight:600;
  padding:7px 12px;border-radius:999px;letter-spacing:.02em;
}
.topnav a:hover{color:var(--txt);text-decoration:none;background:var(--panel2)}
.topnav a.active{color:var(--accent);background:var(--accent-dim)}

/* ---------- hero ---------- */
.hero{padding:56px 0 30px;max-width:760px}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.hero h1{
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.08;margin:0 0 16px;
  letter-spacing:-.01em;
}
.lede{color:var(--muted);font-size:1.02rem;margin:0;max-width:620px}

/* ---------- search ---------- */
.searchbar{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  padding:8px 10px;margin:8px 0 18px;
  transition:border-color .15s, box-shadow .15s;
}
.searchbar:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-dim)}
.search-ico{color:var(--faint);flex:none}
.searchbar input{
  flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  font-size:.98rem;font-family:var(--sans);
}
.searchbar input::placeholder{color:var(--faint)}
.btn-accent{
  background:var(--accent);color:#04121c;border:0;border-radius:var(--r-sm);
  font-weight:700;font-size:.86rem;padding:9px 18px;cursor:pointer;font-family:var(--sans);
  transition:filter .15s, transform .05s;
}
.btn-accent:hover{filter:brightness(1.1)}
.btn-accent:active{transform:translateY(1px)}

/* ---------- category pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:.8rem;font-weight:600;
  padding:6px 13px;cursor:pointer;user-select:none;
  transition:color .12s, border-color .12s, background .12s;
}
.pill:hover{color:var(--txt);border-color:var(--line2)}
.pill.active{color:#04121c;background:var(--accent);border-color:var(--accent)}
.pill .cnt{font-size:.72rem;opacity:.75;font-weight:700}
.pill.active .cnt{opacity:.85}

/* ---------- listbar ---------- */
.listbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.listbar-count{color:var(--faint);font-size:.82rem}
.listbar-controls{display:flex;gap:8px}
select{
  background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.8rem;font-weight:600;padding:7px 10px;outline:0;cursor:pointer;font-family:var(--sans);
}
select:hover,select:focus{border-color:var(--line2);color:var(--txt)}

/* ---------- table ---------- */
.table{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:18px;
}
.tr{display:grid;grid-template-columns:64px 1.6fr 150px 96px 1.15fr 74px;align-items:center}
.tr-head{
  background:var(--bg2);border-bottom:1px solid var(--line);
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.td{padding:11px 12px;min-width:0}
.row{border-top:1px solid var(--line);cursor:pointer;transition:background .1s}
.row:hover{background:var(--panel2)}
.row:first-of-type{border-top:0}
.idx{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.pname{min-width:0}
.pname .u{display:block;font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname .r{display:block;font-size:.76rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat{font-size:.78rem}
.era{font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.tags{display:flex;gap:5px;overflow:hidden;min-width:0}
.tag{
  font-size:.7rem;font-weight:600;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;white-space:nowrap;
}
.tag.more{color:var(--accent);border-color:var(--accent-line)}
.open-btn{
  background:transparent;border:1px solid var(--accent-line);color:var(--accent);
  border-radius:var(--r-sm);font-size:.76rem;font-weight:700;padding:6px 8px;cursor:pointer;
  font-family:var(--sans);transition:background .12s;
}
.open-btn:hover{background:var(--accent-dim)}
@media (max-width:880px){
  .tr{grid-template-columns:56px 1.5fr 130px 74px 64px}
  .tags{display:none}
}
@media (max-width:640px){
  .tr{grid-template-columns:48px 1.4fr 110px 60px}
  .era{display:none}
}

/* ---------- empty ---------- */
.empty{text-align:center;padding:56px 20px;color:var(--txt)}
.empty p{margin:4px 0}

/* ---------- pager ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 28px}
.page-btn{
  min-width:36px;height:36px;padding:0 10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;font-family:var(--sans);
}
.page-btn:hover:not(:disabled){color:var(--txt);border-color:var(--line2)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#04121c}
.page-btn:disabled{opacity:.35;cursor:default}
.page-btn.dots{border-color:transparent;background:transparent;cursor:default}

/* ---------- legend ---------- */
.legend{border-top:1px solid var(--line);padding:44px 0 30px;margin-top:18px}
.legend h2{margin:0 0 8px;font-size:1.35rem}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:22px}
.legend-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;
}
.legend-item h3{margin:0 0 4px;font-size:.92rem;display:flex;align-items:center;gap:8px}
.legend-item h3 em{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:.72rem}
.legend-item p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}
.chip{
  flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.72rem;font-weight:800;letter-spacing:.02em;border:1px solid;
}
.chip-wh{color:var(--good);border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.1)}
.chip-rh{color:var(--orange);border-color:rgba(251,146,60,.45);background:rgba(251,146,60,.1)}
.chip-gh{color:var(--gray);border-color:rgba(148,163,184,.45);background:rgba(148,163,184,.1)}
.chip-ct{color:var(--purple);border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.1)}
.chip-bh{color:var(--red);border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.1)}
.chip-un{color:var(--slate);border-color:rgba(100,116,139,.45);background:rgba(100,116,139,.1)}

/* ---------- categories on rows ---------- */
.pill-cat{
  display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;white-space:nowrap;
}
.pill-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-white-hat{color:var(--good);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.07)}
.c-red-hat{color:var(--orange);border-color:rgba(251,146,60,.4);background:rgba(251,146,60,.07)}
.c-gray-hat{color:var(--gray);border-color:rgba(148,163,184,.4);background:rgba(148,163,184,.07)}
.c-cyber-terrorist{color:var(--purple);border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.07)}
.c-black-hat{color:var(--red);border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.07)}
.c-undefined{color:var(--slate);border-color:rgba(100,116,139,.4);background:rgba(100,116,139,.07)}

/* ---------- doc pages ---------- */
.doc{padding:48px 0 64px;max-width:780px}
.doc h1{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 18px}
.doc h2{font-size:1.15rem;margin:34px 0 10px;color:var(--accent)}
.doc p{color:var(--muted);line-height:1.75;margin:0 0 14px}
.doc ul{color:var(--muted);line-height:1.75;padding-left:20px}
.doc li{margin-bottom:6px}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.form input,.form textarea{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font-family:var(--sans);font-size:.92rem;font-weight:400;letter-spacing:0;
  padding:11px 13px;outline:0;transition:border-color .12s, box-shadow .12s;
  resize:vertical;
}
.form input:focus,.form textarea:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-dim)}
.form .btn-accent{align-self:flex-start;margin-top:4px}
.msg{margin:10px 0 0;font-size:.86rem}
.msg.ok{color:var(--good)}
.msg.err{color:var(--red)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:34px 0 46px;margin-top:40px}
.footer-inner{display:flex;flex-direction:column;gap:10px}
.footer-brand{font-family:var(--mono);font-weight:700;letter-spacing:.14em;margin:0}
.footer-brand span{color:var(--accent)}
.footer-note{color:var(--muted);font-size:.82rem;max-width:560px;margin:0}
.footer-meta{margin:0;font-size:.75rem}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,16,.78);backdrop-filter:blur(5px)}
.modal-panel{
  position:relative;z-index:1;
  width:min(640px,94vw);max-height:88vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  padding:34px 34px 30px;
  animation:pop .16s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:12px;right:14px;
  background:transparent;border:0;color:var(--faint);font-size:1.7rem;line-height:1;
  cursor:pointer;width:36px;height:36px;border-radius:8px;
}
.modal-close:hover{color:var(--txt);background:var(--panel2)}

/* dossier content */
.dossier-head{margin-bottom:22px;padding-right:26px}
.dossier-head .du{font-family:var(--mono);font-size:1.35rem;font-weight:700;margin:0 0 4px;
  word-break:break-word}
.dossier-head .dr{color:var(--muted);font-size:.92rem;margin:0}
.dossier-kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kv-chip{
  display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;font-size:.74rem;color:var(--muted);padding:6px 10px;
}
.kv-chip b{color:var(--txt);font-weight:700}
.dossier-sec{margin:20px 0 0}
.dossier-sec h3{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;
}
.dossier-sec p{margin:0;color:var(--txt);font-size:.92rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.dossier-tags{display:flex;flex-wrap:wrap;gap:6px}
.dossier-refs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dossier-refs a{
  font-family:var(--mono);font-size:.76rem;color:var(--accent);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dossier-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dossier-facts li{
  color:var(--txt);font-size:.9rem;line-height:1.6;padding-left:18px;position:relative;
}
.dossier-facts li::before{
  content:"▹";position:absolute;left:0;color:var(--accent);font-size:.8rem;top:1px;
}
.dossier-empty{color:var(--faint);font-style:italic;font-size:.86rem}