:root{--bg:#f4f5f6;--surface:#fff;--surface-code:#edeef0;--dark-panel:#2c2d2f;--fg:#1a1b1d;--muted:#6b6c70;--border:#d6d7d9;--navbar-bg:#717073;--badge-admin:#dc3545;--badge-user:#2563a8;--badge-none:#8a8b8d;--badge-sys:#e8b800;--strip-admin:#e8b800;--strip-user:#2563a8;--strip-none:#8a8b8d;--font-body:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:"DM Mono", "Fira Code", ui-monospace, monospace;--text-xs:.72rem;--text-sm:.82rem;--text-base:.9rem;--text-lg:1rem;--text-h1:1.5rem;--leading:1.4;--radius:.25rem}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading);-webkit-font-smoothing:antialiased;margin:0;padding:0}.page-wrap{max-width:960px;margin:0 auto;padding:2rem 1.5rem 4rem}.page-title{font-family:var(--font-mono);font-size:var(--text-h1);letter-spacing:-.01em;color:var(--fg);margin:0 0 .25rem;font-weight:500}.page-subtitle{font-size:var(--text-sm);color:var(--muted);font-family:var(--font-mono);margin:0 0 2rem}.section-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;font-weight:500}.demo-frame{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--strip-none);border-radius:var(--radius);margin-bottom:.75rem;transition:border-left-color .18s;overflow:hidden}.demo-frame.state-admin{border-left-color:var(--strip-admin)}.demo-frame.state-user{border-left-color:var(--strip-user)}.demo-frame.state-none{border-left-color:var(--strip-none)}.state-indicator{background:var(--surface-code);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);align-items:center;gap:.5rem;padding:.35rem .75rem;display:flex}.state-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.state-dot.admin{background:var(--strip-admin)}.state-dot.user{background:var(--strip-user)}.state-dot.none{background:var(--strip-none)}.demo-navbar{margin:0;padding:.4rem 1rem;background-color:var(--navbar-bg)!important}.demo-navbar .navbar-brand{font-family:var(--font-mono);letter-spacing:.04em;font-size:.85rem;color:#ffffff8c!important}.demo-navbar .nav-link{font-size:.875rem;color:#ffffffd9!important;padding:.45rem .75rem!important}.demo-navbar .nav-link:hover{color:#fff!important}.demo-navbar .nav-link.active{font-weight:500;color:#fff!important}.demo-navbar .dropdown-toggle:after{opacity:.7}.role-badge{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:.2rem;padding:.2em .55em;font-size:.68rem;font-weight:500;line-height:1}.role-badge.admin{background:var(--badge-admin);color:#fff}.role-badge.user{background:var(--badge-user);color:#fff}.role-badge.none{background:var(--badge-none);color:#fff}.role-badge.sys{background:var(--badge-sys);color:#1a1b1d}.navbar-user{color:#fff;white-space:nowrap;align-items:center;gap:.45rem;font-size:.85rem;display:flex}.navbar-user strong{font-weight:600}.user-switcher{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:2.5rem;display:flex}.switcher-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:.25rem}.switcher-btn{font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--fg);cursor:pointer;padding:.3rem .8rem;font-size:.8rem;line-height:1.4;transition:all .12s}.switcher-btn:hover{border-color:var(--navbar-bg);background:var(--surface-code)}.switcher-btn.active{background:var(--navbar-bg);border-color:var(--navbar-bg);color:#fff;font-weight:500}.dropdown-toggle-btn{font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--muted);cursor:pointer;margin-left:auto;padding:.28rem .7rem;font-size:.78rem;transition:all .12s}.dropdown-toggle-btn:hover{border-color:var(--muted);color:var(--fg)}.dropdown-toggle-btn.open{background:var(--dark-panel);border-color:var(--dark-panel);color:#fff}.demo-controls{align-items:center;gap:.5rem;margin-bottom:.4rem;display:flex}.demo-dropdown{background:var(--surface);border:1px solid var(--border);border-top:none;padding:.4rem 0;font-size:.85rem}.demo-dropdown .dd-header{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.55rem 1.25rem .2rem;font-size:.68rem;font-weight:500}.demo-dropdown .dd-item{color:var(--fg);font-family:var(--font-body);padding:.3rem 1.25rem;text-decoration:none;display:block}.demo-dropdown .dd-item:hover{background:var(--surface-code)}.demo-dropdown .dd-divider{border:none;border-top:1px solid var(--border);margin:.35rem 0}.ref-section{margin-top:2.5rem}.ref-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=640px){.ref-grid{grid-template-columns:1fr}}.ref-table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.ref-table th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border);text-align:left;padding:.5rem .75rem;font-weight:500}.ref-table td{border-bottom:1px solid var(--border);vertical-align:middle;padding:.55rem .75rem}.ref-table tr:last-child td{border-bottom:none}.ref-table tr:hover td{background:var(--surface-code)}.code-block{background:var(--dark-panel);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--text-sm);color:#d4d5d8;margin:0;padding:.9rem 1rem;line-height:1.6;overflow-x:auto}.code-block .kw{color:#e8b800}.code-block .str{color:#7ec8a0}.code-block .tag{color:#79b8ff}.code-block .cls{color:#f97583}.code-block .cmt{color:#6a737d}.vis-badge{font-family:var(--font-mono);letter-spacing:.04em;border-radius:.2rem;padding:.15em .5em;font-size:.68rem;font-weight:500;display:inline-block}.vis-badge.yes{color:#155724;background:#d4edda}.vis-badge.no{color:#721c24;background:#f8d7da}.vis-badge.sys{color:#856404;background:#fff3cd}.section-divider{border:none;border-top:1px solid var(--border);margin:2.5rem 0}