:root{
  --bg:#070b12; --bg2:#0b1220; --panel:#0e1726; --panel2:#111d30;
  --line:#1c2b42; --line2:#25395a;
  --txt:#e6edf6; --muted:#8aa0bd; 
  --dim:#5f7595;
  --acc:#22d3a6; --acc2:#38bdf8; --warn:#f5b642; --bad:#f2545b; --good:#22d3a6;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(34,211,166,.10), transparent 60%),
    radial-gradient(800px 460px at 92% 0%, rgba(56,189,248,.09), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:var(--acc2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}

header.top{border-bottom:1px solid var(--line); background:rgba(7,11,18,.8); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20}
.topin{display:flex; align-items:center; gap:14px; height:62px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--txt)}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:none}
.logo b{font-size:18px}
.logo span{font-size:11px; color:var(--dim); display:block; font-weight:500; letter-spacing:.4px; text-transform:uppercase; margin-top:-3px}
nav.top{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
nav.top a{color:var(--muted); font-size:13px; padding:7px 11px; border-radius:9px}
nav.top a:hover{color:var(--txt); background:var(--panel); text-decoration:none}
.langs{display:flex; gap:2px; margin-left:6px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:3px}
.langs a{padding:4px 9px; font-size:12px; border-radius:6px; text-transform:uppercase; letter-spacing:.5px}
.langs a.on{background:var(--acc); color:#04140f; font-weight:700}

.hero{padding:54px 0 26px; text-align:center}
.hero h1{font-size:clamp(27px,5vw,42px); line-height:1.15; margin:0 0 14px; letter-spacing:-.6px}
.hero h1 em{font-style:normal; background:linear-gradient(95deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); max-width:620px; margin:0 auto; font-size:15px}

form.search{margin:26px auto 10px; max-width:760px}
.sbar{display:flex; gap:8px; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r); padding:8px; box-shadow:0 18px 48px -24px rgba(0,0,0,.9)}
.sbar:focus-within{border-color:var(--acc); box-shadow:0 0 0 3px rgba(34,211,166,.12), 0 18px 48px -24px rgba(0,0,0,.9)}
.sbar input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--txt); font-size:15px; padding:11px 12px; font-family:var(--mono)}
.sbar input::placeholder{color:var(--dim); font-family:var(--sans)}
.sbar select{background:var(--panel2); border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:0 10px; font-size:13px; outline:0}
.btn{background:linear-gradient(180deg,var(--acc),#12b48c); color:#04140f; border:0; border-radius:10px; padding:11px 22px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; font-family:var(--sans)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel2); color:var(--muted); border:1px solid var(--line2); font-weight:600}
.btn.ghost:hover{color:var(--txt); border-color:var(--acc)}
.hint{text-align:center; color:var(--dim); font-size:12.5px; margin-top:10px}
.hint code{font-family:var(--mono); color:var(--muted); background:var(--panel); padding:2px 7px; border-radius:6px; border:1px solid var(--line); cursor:pointer}
.hint code:hover{border-color:var(--acc); color:var(--acc)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:26px 0 46px}
.mod{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; transition:.15s}
.mod:hover{border-color:var(--acc); transform:translateY(-2px); text-decoration:none; background:var(--panel2)}
.mod .ic{font-size:19px; margin-bottom:9px; display:block}
.mod h3{margin:0 0 4px; font-size:14.5px; color:var(--txt)}
.mod p{margin:0; font-size:12.5px; color:var(--dim); line-height:1.5}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin:14px 0; overflow:hidden}
.card>h2{margin:0; padding:13px 16px; font-size:13px; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line); background:var(--panel2); letter-spacing:.3px; display:flex; align-items:center; gap:8px}
.card>h2 .toggle{margin-left:auto; color:var(--dim); font-size:11px; cursor:pointer; user-select:none}
.card .body{padding:14px 16px}
.card.collapsed .body{display:none}

.sum{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:18px 0}
.sum .it{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0}
.sum .it .l{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); margin-bottom:5px}
.sum .it .v{font-size:15px; font-weight:600; word-break:break-word; font-family:var(--mono)}
.v.good{color:var(--good)} .v.warn{color:var(--warn)} .v.bad{color:var(--bad)}

.rhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:22px 0 4px; border-bottom:1px solid var(--line)}
.rhead h1{margin:0; font-size:21px; font-family:var(--mono); word-break:break-all}
.rhead .tag{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--acc); background:rgba(34,211,166,.1); border:1px solid rgba(34,211,166,.3); padding:4px 9px; border-radius:99px}
.rhead .acts{margin-left:auto; display:flex; gap:7px}
.rhead .acts a{font-size:12.5px; color:var(--muted); border:1px solid var(--line2); padding:6px 11px; border-radius:9px}
.rhead .acts a:hover{color:var(--acc); border-color:var(--acc); text-decoration:none}
.rmeta{color:var(--dim); font-size:12px; padding:9px 0 0; font-family:var(--mono)}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 2px}
.tabs a{font-size:12.5px; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:7px 12px; border-radius:9px}
.tabs a.on{background:var(--acc); color:#04140f; border-color:var(--acc); font-weight:700}
.tabs a:hover{text-decoration:none; border-color:var(--acc)}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; color:var(--dim); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:7px 10px; border-bottom:1px solid var(--line)}
td{padding:8px 10px; border-bottom:1px solid rgba(28,43,66,.55); vertical-align:top; font-family:var(--mono); font-size:13px; word-break:break-word}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}

ul.pl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
ul.pl li{font-family:var(--mono); font-size:13px; color:var(--txt); padding:6px 10px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; word-break:break-all}
ul.pl.cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
ul.pl.warn li{border-color:rgba(245,182,66,.3)} ul.pl.bad li{border-color:rgba(242,84,91,.35)}

.kv{display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.kv>div{background:var(--panel); padding:9px 12px; font-size:13px; word-break:break-word}
.kv>div:nth-child(odd){color:var(--dim); background:var(--panel2)}
.kv>div:nth-child(even){font-family:var(--mono)}

.chk{display:flex; flex-direction:column; gap:8px}
.chk .row{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; background:var(--bg2); border:1px solid var(--line); border-radius:10px}
.chk .row.good{border-left:3px solid var(--good)}
.chk .row.warn{border-left:3px solid var(--warn)}
.chk .row.bad{border-left:3px solid var(--bad)}
.chk .dot{font-size:14px; line-height:1.4}
.chk .txt{min-width:0; flex:1}
.chk .n{font-weight:600; font-size:13.5px}
.chk .v{font-family:var(--mono); font-size:12.5px; color:var(--muted); word-break:break-all; margin-top:2px}
.chk .w{font-size:12px; color:var(--dim); margin-top:3px}

pre.code{margin:0; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:13px; overflow:auto; max-height:460px; font-family:var(--mono); font-size:12.5px; color:var(--muted); white-space:pre-wrap; word-break:break-word}

.links{display:flex; flex-direction:column; gap:7px}
.links .row{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--bg2); border:1px solid var(--line); border-radius:10px}
.links .row.good{border-color:rgba(34,211,166,.32)}
.links .row.warn{border-color:rgba(245,182,66,.3)}
.links .row .n{font-weight:600; font-size:13.5px; min-width:110px}
.links .row .u{font-family:var(--mono); font-size:12.5px; color:var(--muted); word-break:break-all; flex:1}
.links .row .s{font-size:11px; color:var(--dim); white-space:nowrap}

.alert{border-radius:12px; padding:13px 15px; font-size:13.5px; margin:16px 0; border:1px solid}
.alert.bad{background:rgba(242,84,91,.07); border-color:rgba(242,84,91,.32); color:#ffb9bd}
.alert.warn{background:rgba(245,182,66,.07); border-color:rgba(245,182,66,.3); color:#f7d8a0}
.alert.info{background:rgba(56,189,248,.06); border-color:rgba(56,189,248,.26); color:#bfe6fb}

.grade{font-family:var(--mono); font-size:40px; font-weight:800; line-height:1; padding:14px 20px; border-radius:14px; border:2px solid}
.grade.good{color:var(--good); border-color:rgba(34,211,166,.4); background:rgba(34,211,166,.07)}
.grade.warn{color:var(--warn); border-color:rgba(245,182,66,.4); background:rgba(245,182,66,.07)}
.grade.bad{color:var(--bad); border-color:rgba(242,84,91,.4); background:rgba(242,84,91,.07)}

.prose{color:var(--muted); font-size:14.5px; max-width:760px}
.prose h2{color:var(--txt); font-size:18px; margin:26px 0 10px}
.prose h3{color:var(--txt); font-size:15px; margin:20px 0 8px}
.prose code{font-family:var(--mono); font-size:13px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--acc)}
.prose li{margin:5px 0}

footer{border-top:1px solid var(--line); margin-top:46px; padding:22px 0 34px; color:var(--dim); font-size:12.5px}
.fin{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.fin a{color:var(--muted)}

.load{display:none; text-align:center; padding:18px; color:var(--muted); font-size:13.5px; font-family:var(--mono)}
.load.on{display:block}
.load .bar{height:2px; background:var(--line); border-radius:2px; overflow:hidden; max-width:320px; margin:12px auto 0}
.load .bar i{display:block; height:100%; width:38%; background:linear-gradient(90deg,var(--acc),var(--acc2)); animation:sl 1.1s ease-in-out infinite}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

@media (max-width:640px){
  .hero{padding:34px 0 18px}
  .sbar{flex-wrap:wrap}
  .sbar input{width:100%}
  .sbar select,.btn{flex:1}
  .kv{grid-template-columns:1fr}
  .kv>div:nth-child(odd){padding-bottom:0; background:var(--panel)}
  .rhead .acts{margin-left:0; width:100%}
  .links .row{flex-wrap:wrap}
  .links .row .n{min-width:0}
}