*{box-sizing:border-box}html,body{height:100%}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.5;margin:0;background:var(--bg);color:var(--fg)}
:root{--bg:#0b0c10;--fg:#e5e7eb;--muted:#9ca3af;--card:#111217;--border:#25272e;--accent:#7c3aed;--ok:#10b981;--warn:#f59e0b;--error:#ef4444}
html[data-theme="light"]{--bg:#f7f8fa;--fg:#0f172a;--muted:#64748b;--card:#ffffff;--border:#e5e7eb;--accent:#7c3aed;--ok:#059669;--warn:#d97706;--error:#dc2626}
.container{max-width:1100px;margin:0 auto;padding:24px}
.appbar{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.appbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.appbar h1{font-size:18px;margin:0}
.content{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:12px;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.grid{display:grid;gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
input[type="url"],input[type="text"],input[type="file"]{padding:10px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--fg)}
input::placeholder{color:var(--muted)}
button{padding:10px 16px;border:0;border-radius:10px;background:var(--accent);color:white;cursor:pointer;font-weight:600}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.actions{display:flex;justify-content:flex-end}
pre,code{background:rgba(127,127,127,.08);padding:8px;border-radius:8px;overflow:auto;border:1px solid var(--border)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.badge.ok{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);color:var(--ok)}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:var(--warn)}
.badge.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:var(--error)}
ul.bullets{margin:0;padding-left:16px}
.panel{border:1px dashed var(--border);padding:8px;border-radius:10px;margin:8px 0}
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px;margin:6px 0}
.k{color:var(--muted)}
.arrow{opacity:.6;margin:0 6px}
.table{width:100%;border-collapse:separate;border-spacing:0 6px}
.table th,.table td{padding:10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--card)}
.table th:first-child,.table td:first-child{border-left:1px solid var(--border);border-top-left-radius:8px;border-bottom-left-radius:8px}
.table th:last-child,.table td:last-child{border-right:1px solid var(--border);border-top-right-radius:8px;border-bottom-right-radius:8px}
.muted{color:var(--muted)}
.meta{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tabs{display:flex;gap:6px;margin:6px 0 10px}
.tab{padding:8px 12px;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:999px;cursor:pointer}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tabpanes .tabpane{display:none}
.tabpanes .tabpane.active{display:block}