:root { color-scheme: dark;
  --bg:#0c0f1a; --panel:#131a2e; --panel2:#0f1424; --line:#232c46; --line2:#283357;
  --ink:#e7ecf5; --dim:#aab4cc; --faint:#6f7a93; --accent:#5b8def; --gold:#d9b25b; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2440, #0c0f1a 60%); min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
header.site { border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:0;
  background:rgba(12,15,26,.82); backdrop-filter:blur(8px); z-index:10; }
header.site .wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.brand { font-weight:700; letter-spacing:.4px; font-size:18px; }
.brand small { display:block; color:var(--faint); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; }
nav.main { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; }
nav.main a { color:var(--dim); }
nav.main a.active { color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:2px; }
.hero { padding:72px 0 40px; text-align:center; }
.hero h1 { font-size:40px; margin:0 0 12px; letter-spacing:.5px; }
.hero .tag { color:var(--gold); font-style:italic; font-size:16px; }
.hero .sub { color:var(--dim); max-width:640px; margin:18px auto 0; line-height:1.6; }
h2.section { font-size:13px; text-transform:uppercase; letter-spacing:1.6px; color:#9fb0d6; margin:40px 0 4px; }
.lead { color:var(--dim); margin:0 0 20px; line-height:1.55; max-width:720px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:8px 0 48px; }
.card { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:14px; padding:16px; box-shadow:0 14px 32px rgba(0,0,0,.30); transition:transform .12s, border-color .12s; }
.card:hover { transform:translateY(-2px); border-color:#3a4a7d; }
.card h3 { margin:0 0 8px; font-size:15.5px; }
.card p { color:var(--dim); font-size:12.5px; line-height:1.5; margin:0; }
.badge { display:inline-block; font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line2); color:var(--faint); margin-top:10px; }
.badge.approved { color:#39d98a; border-color:#1f5e44; }
.badge.draft, .badge.bootstrap_example_needs_review { color:#f5a623; border-color:#5e4a1f; }
.badge.in_review, .badge.proposal { color:#5b8def; border-color:#27406e; }
.empty { border:1px dashed var(--line2); border-radius:14px; padding:32px; text-align:center;
  color:var(--faint); font-size:13px; line-height:1.6; }
.empty b { color:var(--dim); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:18px 0 40px; }
.tile { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:14px; padding:18px; }
.tile h3 { margin:0 0 6px; font-size:15px; } .tile p { color:var(--dim); font-size:12.5px; margin:0; line-height:1.5; }
.tile .count { color:var(--accent); font-size:11px; font-variant:all-small-caps; letter-spacing:.5px; margin-top:10px; }
footer.site { border-top:1px solid var(--line); color:var(--faint); font-size:11.5px; line-height:1.6; padding:28px 0 44px; }
.stagingbar { background:#5e4a1f; color:#ffe9b8; text-align:center; font-size:12px; padding:7px 12px; letter-spacing:.3px; }
.stagingbar b { color:#fff; }