:root{--bg: #0b1220;--surface: #131c2e;--surface-2: #1b2740;--border: #26334d;--text: #e7ecf5;--muted: #93a1bd;--accent: #6b93f7;--accent-ink: #08101f;--warn: #f7c56b;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.shell{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.centred{align-items:center;justify-content:center}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border)}.content{flex:1;width:100%;max-width:620px;margin:0 auto;padding:20px;display:grid;gap:16px;align-content:start}h1{font-size:1.1rem;margin:0;letter-spacing:-.01em}h2{font-size:.95rem;margin:0 0 8px}p{margin:0 0 12px}.muted{color:var(--muted)}.small{font-size:.85rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card.accent{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:linear-gradient(180deg,var(--surface-2),var(--surface))}.card>*:last-child{margin-bottom:0}.row{display:flex;gap:10px;flex-wrap:wrap}button{font:inherit;border-radius:10px;padding:9px 15px;cursor:pointer;border:1px solid transparent;transition:filter .15s ease,background .15s ease}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.primary:hover{filter:brightness(1.08)}.ghost{background:transparent;color:var(--text);border-color:var(--border)}.ghost:hover{background:var(--surface-2)}.linkish{background:none;border:none;color:inherit;text-decoration:underline;padding:0 4px}.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 12px}.kv dt{color:var(--muted);font-size:.85rem}.kv dd{margin:0;word-break:break-word}code{background:var(--surface-2);border-radius:5px;padding:1px 6px;font-size:.85em}.steps{margin:0 0 12px;padding-left:20px;color:var(--muted)}.steps li{margin-bottom:4px}.statusbar{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:9px 16px;font-size:.85rem;text-align:center}.statusbar.offline{background:var(--surface-2);color:var(--muted)}.statusbar.update{background:var(--accent);color:var(--accent-ink);font-weight:500}.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}button{transition:none}}