
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --text:#0f172a;
  --muted:#667085;
  --border:#e6e9ef;
  --brand:#2563eb;
  --brand-2:#0891b2;
  --danger:#dc2626;
  --warn:#d97706;
  --ok:#059669;
  --shadow:0 16px 50px rgba(15,23,42,.08);
  --header:rgba(255,255,255,.86);
}
html[data-theme="dark"]{
  --bg:#0b0f17;
  --surface:#111827;
  --surface-2:#0f1623;
  --text:#f8fafc;
  --muted:#9aa5b5;
  --border:#243042;
  --brand:#60a5fa;
  --brand-2:#22d3ee;
  --danger:#f87171;
  --warn:#fbbf24;
  --ok:#34d399;
  --shadow:none;
  --header:rgba(11,15,23,.86);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--header);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;object-fit:contain}
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--muted);font-size:14px;padding:8px 10px;border-radius:9px;
}
.nav a:hover,.nav a.active{color:var(--text);background:var(--surface-2);text-decoration:none}
.theme-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:17px;
}
.hero{
  max-width:1180px;margin:0 auto;padding:82px 24px 68px;
}
.eyebrow{
  color:var(--brand);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase
}
.hero h1{
  margin:12px 0 20px;font-size:clamp(44px,7vw,76px);line-height:1.04;
  letter-spacing:-2.8px;max-width:900px;
}
.hero p{max-width:760px;color:var(--muted);font-size:18px;margin:0}
.hero-grid{
  max-width:1180px;margin:0 auto;padding:0 24px 92px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.card{
  display:block;color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:26px;box-shadow:var(--shadow);transition:.18s ease;
}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 38%,var(--border));text-decoration:none}
.card .k{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.12em;text-transform:uppercase}
.card h2{margin:10px 0 8px;font-size:23px;letter-spacing:-.4px}
.card p{margin:0;color:var(--muted);font-size:14px}
.content-shell{
  max-width:1180px;margin:0 auto;padding:48px 24px 90px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;
}
.sidebar{position:sticky;top:84px;align-self:start}
.sidebar .label{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.sidebar a{display:block;padding:8px 10px;margin:3px 0;border-radius:9px;color:var(--muted);font-size:14px}
.sidebar a:hover,.sidebar a.active{background:var(--surface-2);color:var(--text);text-decoration:none}
.doc{max-width:820px}
.doc .doc-eyebrow{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.13em;text-transform:uppercase}
.doc h1{font-size:clamp(36px,5vw,52px);letter-spacing:-1.8px;line-height:1.1;margin:10px 0 10px}
.updated{font-size:13px;color:var(--muted);margin-bottom:32px}
.notice{
  padding:18px 20px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:14px;background:color-mix(in srgb,var(--brand) 5%,var(--surface));margin:24px 0 34px;
}
.notice.warn{border-color:color-mix(in srgb,var(--warn) 32%,var(--border));background:color-mix(in srgb,var(--warn) 6%,var(--surface))}
.notice.danger{border-color:color-mix(in srgb,var(--danger) 30%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.doc h2{margin:42px 0 12px;font-size:24px;letter-spacing:-.5px}
.doc h3{margin:28px 0 8px;font-size:18px}
.doc p,.doc li{color:var(--muted)}
.doc strong{color:var(--text)}
.doc ul{padding-left:22px}
.doc table{width:100%;border-collapse:collapse;margin:18px 0}
.doc th,.doc td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2);color:var(--text)}
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.policy-box{border:1px solid var(--border);border-radius:14px;padding:18px;background:var(--surface)}
.policy-box .tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.policy-box.allow .tag{color:var(--ok)}
.policy-box.restrict .tag{color:var(--warn)}
.policy-box.block .tag{color:var(--danger)}
.policy-box p{font-size:13px;margin:8px 0 0}
.footer{border-top:1px solid var(--border);padding:34px 24px;color:var(--muted)}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}
.small{font-size:12px;color:var(--muted)}
code{background:var(--surface-2);border:1px solid var(--border);padding:2px 6px;border-radius:6px;color:var(--text)}
@media (max-width:860px){
  .nav a{display:none}.nav a.active{display:block}
  .hero{padding-top:58px}.hero h1{letter-spacing:-1.7px}
  .hero-grid{grid-template-columns:1fr}
  .content-shell{grid-template-columns:1fr;gap:16px;padding-top:30px}
  .sidebar{position:static;display:flex;overflow:auto;gap:4px;padding-bottom:8px}
  .sidebar .label{display:none}.sidebar a{white-space:nowrap}
  .policy-grid{grid-template-columns:1fr}
}
