:root {
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;--color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#686660;--color-text-faint:#9d9b95;--color-text-inverse:#f9f8f4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-light:#e6f4f4;--color-primary-highlight:#cedcd8;
  --color-success:#437a22;--color-success-bg:#f0fdf4;
  --color-warning-bg:#fef3c7;--color-warning-text:#78350f;--color-warning-border:#fcd34d;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(40,37,29,.06);--shadow-md:0 4px 12px rgba(40,37,29,.08);
  --sidebar-w:272px;
  --topbar-h:3.75rem;
  --font-display:'Cabinet Grotesk','Inter',sans-serif;
  --font-body:'General Sans','Inter',sans-serif;
}
[data-theme="dark"] {
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;--color-divider:#262523;--color-border:#393836;
  --color-text:#e1dfdb;--color-text-muted:#adaaa4;--color-text-faint:#807d78;--color-text-inverse:#2b2a28;
  --color-primary:#4f98a3;--color-primary-hover:#61a7b1;--color-primary-light:#1a2e30;--color-primary-highlight:#313b3b;
  --color-success-bg:#1a2e1a;
  --color-warning-bg:#2d1f07;--color-warning-text:#fbbf24;--color-warning-border:#78350f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);--shadow-md:0 4px 12px rgba(0,0,0,.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 1rem);-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body,sans-serif);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.7}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2;font-family:var(--font-display,sans-serif);font-weight:700}
p,li{text-wrap:pretty}
code{font-family:'Courier New',monospace;font-size:.875em;background:var(--color-divider);padding:.15em .4em;border-radius:var(--radius-sm)}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);display:flex;align-items:center;padding:0 var(--space-4);gap:var(--space-3);background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border)}
.topbar-brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display,sans-serif);font-weight:800;font-size:1.05rem;color:var(--color-text);flex-shrink:0;text-decoration:none}
.topbar-brand:hover{text-decoration:none}
.topbar-brand .accent{color:var(--color-primary)}
.topbar-search{flex:1;max-width:380px;position:relative}
.topbar-search input{width:100%;padding:.48rem .75rem .48rem 2.2rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font-body,sans-serif)}
.topbar-search input::placeholder{color:var(--color-text-faint)}
.topbar-search input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 14%,transparent)}
.topbar-search .search-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--color-text-faint);pointer-events:none}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.btn-icon{width:2.2rem;height:2.2rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.btn-icon:hover{background:var(--color-divider);color:var(--color-text)}
.btn-primary-sm{display:inline-flex;align-items:center;gap:var(--space-1);padding:.45rem 1rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;background:var(--color-primary);color:var(--color-text-inverse);border:none;cursor:pointer;text-decoration:none;transition:background .15s;white-space:nowrap}
.btn-primary-sm:hover{background:var(--color-primary-hover);text-decoration:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);background:transparent;border:none;width:2.2rem;height:2.2rem}
.hamburger span{display:block;height:2px;background:var(--color-text);border-radius:2px;transition:all .2s}

/* ── LAYOUT ── */
.layout{display:flex;min-height:calc(100vh - var(--topbar-h))}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-w);flex-shrink:0;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-4) 0 var(--space-8)}
.sidebar-section-label{padding:var(--space-3) var(--space-4) var(--space-1);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-faint);margin-top:var(--space-2)}
.sidebar-section-label:first-child{margin-top:0}
.nav-link{display:flex;align-items:center;gap:var(--space-2);padding:.5rem var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);border-left:3px solid transparent;transition:all .15s;text-decoration:none;line-height:1.4}
.nav-link:hover{background:color-mix(in oklab,var(--color-divider) 60%,transparent);color:var(--color-text);text-decoration:none}
.nav-link.active{background:var(--color-primary-light);color:var(--color-primary);border-left-color:var(--color-primary);font-weight:600}
.nav-link svg{flex-shrink:0;opacity:.65}
.nav-link.active svg{opacity:1}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}
.sidebar-overlay.open{display:block}

/* ── MAIN ── */
.main{flex:1;min-width:0;padding:var(--space-8) clamp(var(--space-4),5vw,var(--space-12)) var(--space-12)}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-faint);margin-bottom:var(--space-6)}
.breadcrumb a{color:var(--color-text-faint);text-decoration:none}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb-sep{color:var(--color-text-faint);font-size:.75rem}

/* ── DOC CONTENT ── */
.doc-section{margin-bottom:var(--space-12);scroll-margin-top:calc(var(--topbar-h) + 1.5rem)}
.doc-section+.doc-section{padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.doc-section h2{font-size:var(--text-2xl);letter-spacing:-.03em;margin-bottom:var(--space-5);display:flex;align-items:center;gap:var(--space-3)}
.section-icon{width:2.25rem;height:2.25rem;border-radius:var(--radius-lg);background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.section-icon svg{color:var(--color-primary)}
.doc-section h3{font-size:var(--text-lg);margin:var(--space-7) 0 var(--space-3);color:var(--color-text)}
.doc-section h4{font-size:var(--text-base);font-weight:600;margin:var(--space-5) 0 var(--space-2)}
.doc-section p{color:var(--color-text-muted);margin-bottom:var(--space-4);max-width:72ch}
.doc-section ul,.doc-section ol{padding-left:var(--space-5);color:var(--color-text-muted);margin-bottom:var(--space-4);display:grid;gap:var(--space-1)}
.doc-section li{padding-left:var(--space-1)}
.doc-section strong{color:var(--color-text);font-weight:600}
.doc-section hr{border:none;border-top:1px solid var(--color-divider);margin:var(--space-8) 0}

/* ── CALLOUTS ── */
.callout{border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-5) 0;display:flex;gap:var(--space-3);align-items:flex-start}
.callout p{margin:0;font-size:var(--text-sm)}
.callout svg{flex-shrink:0;margin-top:.1rem}
.callout-info{background:var(--color-primary-light);border:1px solid var(--color-primary-highlight)}
.callout-info svg{color:var(--color-primary)}
.callout-info p{color:var(--color-text-muted)}
.callout-warn{background:var(--color-warning-bg);border:1px solid var(--color-warning-border)}
.callout-warn svg{color:var(--color-warning-text)}
.callout-warn p{color:var(--color-warning-text)}
.callout-ok{background:var(--color-success-bg);border:1px solid #bbf7d0}
.callout-ok svg{color:var(--color-success)}
.callout-ok p{color:var(--color-text-muted)}
[data-theme="dark"] .callout-ok{border-color:#166534}

/* ── STEPS ── */
.steps{display:grid;gap:var(--space-3);margin:var(--space-5) 0;counter-reset:step}
.step{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
.step-num{counter-increment:step;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--text-sm);flex-shrink:0;font-family:var(--font-display,sans-serif)}
.step-body strong{display:block;font-size:var(--text-base);color:var(--color-text);margin-bottom:.2rem}
.step-body p{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── TABLES ── */
.doc-table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}
.doc-table th{text-align:left;padding:.6rem var(--space-4);background:var(--color-divider);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-weight:700}
.doc-table td{padding:.65rem var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-muted);vertical-align:top}
.doc-table tbody tr:last-child td{border-bottom:none}
.doc-table tbody tr:hover td{background:color-mix(in oklab,var(--color-divider) 40%,transparent)}

/* ── BADGES ── */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;white-space:nowrap}
.badge-green{background:#dcfce7;color:#166534}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-orange{background:#ffedd5;color:#9a3412}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-gray{background:var(--color-divider);color:var(--color-text-muted)}
.badge-teal{background:var(--color-primary-light);color:var(--color-primary)}
[data-theme="dark"] .badge-green{background:#14532d;color:#86efac}
[data-theme="dark"] .badge-blue{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .badge-orange{background:#431407;color:#fdba74}
[data-theme="dark"] .badge-red{background:#450a0a;color:#fca5a5}

/* ── CARDS GRID ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4);margin:var(--space-5) 0}
.doc-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);transition:box-shadow .15s,border-color .15s;text-decoration:none;display:block;color:inherit}
.doc-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);text-decoration:none}
.doc-card-icon{width:2.5rem;height:2.5rem;border-radius:var(--radius-lg);background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3)}
.doc-card-icon svg{color:var(--color-primary)}
.doc-card h3{font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-1)}
.doc-card p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5}

/* ── SEARCH HIGHLIGHT / EMPTY ── */
mark{background:color-mix(in oklab,var(--color-primary) 22%,transparent);color:inherit;border-radius:2px;padding:0 2px}
.search-no-results{display:none;text-align:center;padding:var(--space-12);color:var(--color-text-faint)}
.search-no-results h3{font-size:var(--text-lg);margin-bottom:var(--space-2);color:var(--color-text-muted)}
.section-hidden{display:none}

/* ── PAGE NAV (prev/next) ── */
.page-nav{display:flex;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.page-nav-btn{flex:1;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;transition:all .15s;background:var(--color-surface)}
.page-nav-btn:hover{border-color:var(--color-primary);background:var(--color-primary-light);text-decoration:none}
.page-nav-btn .nav-dir{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.page-nav-btn .nav-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.page-nav-btn.next{text-align:right}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:40;transform:translateX(-100%);transition:transform .25s ease;padding-top:var(--topbar-h)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:flex}
  .main{padding:var(--space-6) var(--space-4) var(--space-10)}
}
@media(max-width:520px){
  .topbar-search{display:none}
  .hide-mobile{display:none}
  .page-nav{flex-direction:column}
}