:root{
  --bg:#0f1320; --panel:#141a2a; --border:#202a40;
  --text:#eaf0ff; --muted:#a6b4cf; --accent:#2fd271; --accent-2:#22b35e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif}
a{color:#b7d6ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:92%;max-width:1150px;margin:0 auto}
.header{position:sticky;top:0;background:rgba(15,19,32,.85);backdrop-filter: blur(6px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:38px;height:38px;border-radius:10px}
.brand b{letter-spacing:.3px}
.menu{display:flex;gap:18px}
.menu a{color:var(--muted);font-weight:600}
.menu a:hover{color:var(--text);text-decoration:none}
.hero{padding:48px 0;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(47,210,113,.06), transparent)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero h1{font-size:34px;line-height:1.15;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.badge{background:#0b1320;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#b9c7da;font-size:13px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
.download{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#062512;border:0;padding:14px 18px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(47,210,113,.25)}
.btn:hover{background:var(--accent-2)}
.meta{color:#b6c5d8;font-size:14px}
.hero img{width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.section{padding:30px 0;border-bottom:1px dashed var(--border)}
.section h2{margin:0 0 10px}
.grid3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--border);padding:12px 10px;text-align:left}
.star{display:inline-block; width:1.1em; height:1.1em; clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background:#ffcc00; margin-right:2px}
.star.off{background:#334058}
.rating{display:flex;align-items:center;gap:8px}
.rating .score{color:#ffcc88;font-weight:800}
kbd{background:#0c1424;border:1px solid var(--border);padding:3px 6px;border-radius:6px}
.search-box{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.search-box input{flex:1;min-width:220px;background:#0c1424;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
.search-box button{background:#1c2640;border:1px solid var(--border);color:#cbd6eb; padding:10px 12px;border-radius:10px;cursor:pointer}
.badge.k{background:#10203a;color:#9ec3ff;border-color:#1c2e54}
.footer{border-top:1px solid var(--border);padding:22px 0;color:#7f92ab}
small.muted{color:#6f839d}
.toc{background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);padding:14px;border:1px dashed var(--border);border-radius:12px;font-size:14px;color:#c2cde1}
.toc a{color:#cfe2ff}
.notice{background:#0b1424;border-left:3px solid var(--accent);padding:12px;border-radius:8px;color:#cfe2ff}
@media (max-width:960px){ .hero .wrap{grid-template-columns:1fr} .grid3{grid-template-columns:1fr} .menu{display:none} }