:root{
  --bg:#070b12;--bg-card:rgba(13,22,39,.72);--bg-soft:rgba(255,255,255,.05);--border:rgba(255,255,255,.1);
  --border-strong:rgba(77,208,255,.25);--text:#fff;--muted:#9fb0c9;--accent:#67e8f9;--shadow:0 30px 80px rgba(0,0,0,.35)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#070b12;color:#fff}
.page-bg{position:fixed;inset:0;z-index:-1;background:
radial-gradient(circle at top,rgba(0,163,255,.22),transparent 34%),
radial-gradient(circle at top right,rgba(91,33,182,.18),transparent 28%),
radial-gradient(circle at bottom left,rgba(20,184,166,.12),transparent 30%),
linear-gradient(to bottom,rgba(255,255,255,.03),transparent 20%,transparent 80%,rgba(255,255,255,.02)),#070b12}
.container{width:min(1400px,calc(100% - 32px));margin:0 auto}
.topbar{border-bottom:1px solid rgba(103,232,249,.1);background:rgba(11,18,32,.8);backdrop-filter:blur(24px);position:sticky;top:0;z-index:10}
.topbar-inner{display:flex;gap:24px;justify-content:space-between;align-items:center;padding:28px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px}
.logo{height:70px;width:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,163,255,.55))}
.eyebrow{font-size:12px;letter-spacing:.45em;text-transform:uppercase;color:rgba(103,232,249,.82);margin:0 0 12px}
.eyebrow.danger{color:#fecaca}
h1{margin:0;font-size:clamp(40px,7vw,76px);line-height:.95;letter-spacing:-.04em}
.subtext{max-width:700px;color:var(--muted);line-height:1.8;margin-top:16px}
.stats{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));min-width:min(100%,420px)}
.stat-card,.hero-card,.section-card,.nav-card,.rule-card,.notice-card,.filter-btn,.search-wrap,.sidebar{border:1px solid var(--border);background:var(--bg-soft);backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.stat-card{border-radius:18px;padding:16px}
.stat-card span{display:block;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#8b9cb3}
.stat-card strong{display:block;margin-top:10px;font-size:20px;font-weight:800}
.stat-card.accent{border-color:var(--border-strong);background:rgba(34,211,238,.12)}
.main{padding:32px 0 64px}
.hero-card{border-radius:30px;padding:28px;background:var(--bg-card);display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
.pill{display:inline-flex;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;border:1px solid rgba(103,232,249,.2);background:rgba(103,232,249,.1);color:#bff7ff}
.hero-card h2{margin:18px 0 0;font-size:clamp(30px,4vw,56px);line-height:1.05}
.hero-card p{color:var(--muted);line-height:1.8}
.notice-card{border-radius:26px;padding:20px;background:rgba(239,68,68,.1);border-color:rgba(248,113,113,.2)}
.notice-card h3{margin:0;font-size:24px}
.notice-card p{color:rgba(255,255,255,.88)}
.toolbar{margin-top:28px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.search-wrap{border-radius:18px;padding:0;background:rgba(0,0,0,.2)}
.search-wrap input{width:100%;border:none;outline:none;background:transparent;color:#fff;padding:16px 18px;font-size:14px}
.search-wrap input::placeholder{color:#6e7f99}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter-btn{border-radius:18px;padding:14px 16px;font-size:14px;font-weight:700;background:rgba(255,255,255,.05);color:#dbe7f7;cursor:pointer}
.filter-btn.active{background:var(--accent);color:#08212a;border-color:transparent}
.content-grid{margin-top:32px;display:grid;gap:24px;grid-template-columns:300px minmax(0,1fr);align-items:start}
.sidebar{position:sticky;top:110px;border-radius:28px;padding:20px;background:var(--bg-card)}
.sidebar-title{font-size:12px;text-transform:uppercase;letter-spacing:.3em;color:#8b9cb3;margin:0 0 14px}
.nav-list{display:grid;gap:10px}
.nav-card{display:flex;gap:12px;justify-content:space-between;align-items:center;border-radius:20px;padding:14px;background:rgba(255,255,255,.05)}
.nav-title{font-size:14px;font-weight:700}.nav-desc{display:block;margin-top:4px;color:#8fa0ba;font-size:12px}
.badge{padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);color:#d6e2f3;white-space:nowrap}
.sections-column{display:grid;gap:24px}
.section-card{border-radius:30px;padding:24px;background:var(--bg-card)}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;flex-wrap:wrap}
.section-kicker{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.3em;color:rgba(191,247,255,.7)}
.section-card h2{margin:10px 0 0;font-size:clamp(28px,3vw,46px);line-height:1}
.section-desc{margin:12px 0 0;color:var(--muted);line-height:1.7;max-width:760px}
.rules-grid{margin-top:24px;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rule-card{border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.rule-card h3{margin:0;font-size:20px}
.rule-card p{margin:14px 0 0;color:#d3dff0;line-height:1.8;font-size:14px}
.empty-card{text-align:center;border-radius:28px;padding:40px 24px;background:var(--bg-card);border:1px solid var(--border)}
@media (max-width:1100px){.content-grid,.hero-card,.toolbar{grid-template-columns:1fr}.sidebar{position:static}}
@media (max-width:760px){.stats,.rules-grid{grid-template-columns:1fr}.container{width:min(100% - 20px,1400px)}.hero-card,.section-card,.sidebar{padding:18px}.brand{align-items:flex-start;flex-direction:column}.logo{height:58px}}