:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#8b0000;
  --primary-soft:#fff1f2;
  --success:#166534;
  --warning:#92400e;
  --shadow:0 14px 35px rgba(15,23,42,.07);
}
html,body{background:var(--bg);color:var(--text)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.topbar{backdrop-filter:saturate(180%) blur(10px)}
.brand-badge{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#7f1d1d,#b91c1c);display:grid;place-items:center;color:#fff;font-size:1.2rem;box-shadow:var(--shadow)}
.sidebar-shell{min-height:calc(100vh - 73px);position:sticky;top:73px}
.docs-nav{position:sticky;top:73px;max-height:calc(100vh - 73px);overflow:auto}
.docs-link{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:16px;color:#334155;text-decoration:none;margin-bottom:.35rem;transition:.2s ease}
.docs-link:hover{background:#f8fafc;color:#0f172a}
.docs-link.active{background:var(--primary-soft);color:var(--primary);font-weight:700}
.docs-link i{width:1.2rem;text-align:center}
.hero-card,.content-card,.mini-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.hero-card{padding:2rem}
.content-card{padding:1.75rem}
.mini-card{padding:1rem 1.1rem}
.kicker{letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:var(--primary);font-weight:800}
.page-wrap{padding:1.5rem}
.callout{border-radius:20px;padding:1rem 1.2rem;border:1px solid transparent}
.callout-danger{background:#fff1f2;border-color:#fecdd3}
.callout-info{background:#eff6ff;border-color:#bfdbfe}
.callout-warning{background:#fff7ed;border-color:#fed7aa}
.callout-success{background:#f0fdf4;border-color:#bbf7d0}
.article-chip{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.45rem .8rem;background:#111827;color:#fff;font-size:.82rem;font-weight:700}
.list-check{padding-left:1.2rem}
.list-check li{margin-bottom:.6rem}
.table-ux{--bs-table-bg:transparent}
.table-ux thead th{font-size:.9rem;color:#475569;background:#f8fafc}
.table-ux>:not(caption)>*>*{padding:1rem;border-color:#e5e7eb}
.page-title{font-size:clamp(1.85rem,2.5vw,2.75rem);font-weight:800;line-height:1.05}
.page-intro{font-size:1.05rem;color:#475569}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.footer-note{font-size:.92rem;color:#64748b}
@media (max-width:991.98px){.page-wrap{padding:1rem}.hero-card{padding:1.35rem}.content-card{padding:1.2rem}}