:root{--bg:#F1F3F7;--surface:#FFFFFF;--ink:#14161A;--muted:#6E7480;--line:#DFE3EA;--accent:#3B37E0;--live:#0B7A55;--danger:#B3261E;--code-bg:#14161A;--code-ink:#E8EAF0;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shell{max-width:980px;margin:0 auto;padding:0 20px 72px}.topbar{border-bottom:1px solid var(--line);background:var(--surface);margin-bottom:28px}.topbar-inner{max-width:980px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.brand{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}.topbar nav{display:flex;gap:16px;font-size:14px}.topbar nav a{color:var(--muted)}.topbar nav a.on{color:var(--ink);font-weight:600}.spacer{margin-left:auto}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}h1{font-size:24px;letter-spacing:-.01em;margin:0 0 4px}h2{font-size:16px;margin:0 0 12px}.lede{color:var(--muted);margin:0 0 24px}.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:20px}.route{display:inline-flex;align-items:center;font-family:var(--mono);font-size:13px;background:#EDEFF5;border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink)}.route .host{color:var(--muted)}.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}.row:first-of-type{border-top:0}.row-main{min-width:0;flex:1 1}.row-title{font-weight:600}.row-actions{display:flex;gap:10px;align-items:center}.badge{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted)}.badge.live{color:var(--live);border-color:#B9E3D1;background:#EEF9F4}.empty{color:var(--muted);padding:8px 0 4px}label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.hint{font-weight:400;color:var(--muted)}input[type=password],input[type=text],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:14px/1.5 var(--sans)}textarea.code{font:13px/1.6 var(--mono);background:var(--code-bg);color:var(--code-ink);border-color:#2A2E37;min-height:340px;resize:vertical;-moz-tab-size:2;tab-size:2}.field{margin-bottom:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;gap:16px}.btn,button{font:14px/1 var(--sans);font-weight:600;padding:9px 14px;border-radius:7px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}.btn:hover,button:hover{border-color:#C3C9D4;text-decoration:none}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{background:#2F2CBE;border-color:#2F2CBE}.link-btn{border:0;background:none;padding:0;font-weight:500;font-size:14px;color:var(--muted)}.link-btn:hover{color:var(--ink)}.link-btn.danger:hover{color:var(--danger)}.editor-head{align-items:flex-start;gap:16px;margin-bottom:20px}.editor-head,.tabs{display:flex;flex-wrap:wrap}.tabs{gap:4px;margin-bottom:16px}.tab{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:7px 12px;border-radius:7px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font-weight:500}.tab.on,.tab:hover{color:var(--ink)}.tab.on{border-color:var(--line)}.bar,.tab.on{background:var(--surface)}.bar{position:-webkit-sticky;position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-top:20px}.status{font-size:13px;color:var(--muted)}.status.error{color:var(--danger)}.preview{width:100%;height:620px;border:1px solid var(--line);border-radius:8px;background:#fff}.stack{display:flex;flex-direction:column;gap:20px}@media (max-width:720px){.grid2{grid-template-columns:1fr}.preview{height:460px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}