/* Theme tokens */
:root{--bg:#0b1020;--panel:#0e1428;--text:#e6edf7;--muted:#9fb0c7;--border:#1c2540;--accent:#7c3aed;--accent-2:#10b981;--warn:#f59e0b;--tab:#111936;--tab-active:#1b2450;--shadow:0 10px 30px rgba(0,0,0,.35)}
:root[data-theme="light"]{--bg:#f7f9fc;--panel:#ffffff;--text:#0b1020;--muted:#5b6b82;--border:#e5e9f2;--accent:#6d28d9;--accent-2:#059669;--warn:#b45309;--tab:#f0f3f9;--tab-active:#e7ebf6;--shadow:0 6px 18px rgba(0,0,0,.08)}

*{box-sizing:border-box}
html{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";font-size:16px}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,rgba(124,58,237,.18),transparent 60%),radial-gradient(900px 500px at 120% -20%,rgba(16,185,129,.12),transparent 40%),var(--bg);color:var(--text)}
.header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in oklab,var(--bg),transparent 20%);backdrop-filter:saturate(180%) blur(6px);z-index:20}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
.header h1{font-size:1.05rem;margin:0}
.spacer{flex:1}
.btn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:.5rem .75rem;border-radius:.6rem;cursor:pointer}
.btn:hover{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent),transparent 85%)}
.btn:focus{outline:2px solid var(--warn);outline-offset:2px}
.theme-toggle{display:inline-flex;align-items:center;gap:.45rem}
.theme-toggle .icon{width:18px;height:18px}
.container{display:grid;grid-template-columns:1fr;min-height:calc(100vh - 64px)}

.nav{position:sticky;top:64px;background:color-mix(in oklab,var(--bg),transparent 10%);border-bottom:1px solid var(--border);z-index:15}
.tabbar{display:flex;gap:.3rem;padding:.4rem 7rem;overflow:auto;scroll-snap-type:x mandatory}
.tab{scroll-snap-align:start;flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);background:var(--tab);color:var(--text);cursor:pointer;white-space:nowrap;transition:all .2s ease}
.tab:hover{transform:translateY(-1px);border-color:var(--accent)}
.tab[aria-selected="true"]{background:linear-gradient(180deg,var(--tab-active),color-mix(in oklab,var(--tab-active),black 8%));border-color:var(--accent);box-shadow:var(--shadow)}
.tab .chip{font-size:.75rem;color:var(--muted);border:0.5px solid var(--border);padding:.1rem .3rem;border-radius:999px}

.main{padding:1rem}
.panel{display:none;animation:fade .18s ease}
.panel[aria-hidden="false"]{display:block}
@keyframes fade{from{opacity:.6;transform:translateY(2px)}to{opacity:1}}
.panel h2{margin:.25rem 0 .5rem;font-size:1rem}
.controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1rem}
.input{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:.55rem .65rem;border-radius:.6rem;min-width:240px}
.input::placeholder{color:var(--muted)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;color:var(--muted);border:1px dashed var(--border);padding:.15rem .35rem;border-radius:.4rem}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:.6rem;box-shadow:var(--shadow)}
.table-info{font-size:.85rem;color:var(--muted);margin:.25rem 0 .75rem}
.data-table{width:100%;border-collapse:collapse}
.data-table caption{caption-side:top;text-align:left;padding:.5rem;color:var(--muted);font-size:.9rem}
.data-table thead th{position:sticky;top:0;background:linear-gradient(180deg,color-mix(in oklab,var(--panel),black 8%),var(--panel));color:var(--text);padding:.6rem;border-bottom:1px solid var(--border);font-weight:600;cursor:pointer}
.data-table tbody td{padding:.55rem;border-bottom:1px solid var(--border);vertical-align:top}
.data-table tbody tr:nth-child(odd){background:color-mix(in oklab,var(--panel),black 5%)}
.data-table tbody tr:nth-child(even){background:color-mix(in oklab,var(--panel),white 8%)}
.data-table a{color:var(--accent)}
.footer{border-top:1px solid var(--border);padding:1rem;font-size:.85rem;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (min-width:1000px){.container{grid-template-columns:280px 1fr}.nav{position:static;border-right:1px solid var(--border);border-bottom:none}.tabbar{flex-direction:column;max-height:calc(100vh - 64px);padding:1rem}}