:root{--bg: #1e1e2e;--bg-elev: #28283c;--bg-input: #181825;--fg: #cdd6f4;--fg-muted: #9399b2;--accent: #89b4fa;--accent-fg: #1e1e2e;--danger: #f38ba8;--success: #a6e3a1;--border: #45475a;--radius: 10px;--font: system-ui, -apple-system, "Segoe UI", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5}#app{min-height:100dvh}.screen{padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));padding-top:max(16px,env(safe-area-inset-top));max-width:720px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:8px}.topbar h1{font-size:20px;margin:0;flex:1;text-align:center}h2{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);margin:24px 0 12px}section{margin-bottom:24px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.field>span{color:var(--fg-muted);font-size:14px}input,select,textarea{width:100%;background:var(--bg-input);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-family:inherit;font-size:16px}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}.btn{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:15px;font-family:inherit;cursor:pointer;touch-action:manipulation}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-ghost{background:transparent;border-color:transparent}.btn-block{display:block;width:100%;padding:14px;font-size:16px}.btn-small{padding:6px 10px;font-size:13px}.list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.list-row{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px}.list-row-inline{flex-direction:row;align-items:flex-end}.list-row-inline .field{flex:1;margin:0}.setup-banner{background:var(--bg-elev);border:1px solid var(--accent);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}.error-banner{background:#f38ba81a;border:1px solid var(--danger);border-radius:var(--radius);color:var(--danger);padding:12px 16px;margin:12px 0}.capture-area{display:flex;flex-direction:column;align-items:center;margin-top:32px}.capture-button{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-fg);border-radius:50%;width:200px;height:200px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:8px;transition:transform .1s}.capture-button:active{transform:scale(.97)}.capture-button.is-disabled{opacity:.4;cursor:not-allowed}.capture-button-icon{font-size:56px;line-height:1}.capture-button-label{font-weight:600;font-size:15px}.capture-hint{color:var(--fg-muted);font-size:13px;margin:12px 0 0;text-align:center}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px;color:var(--fg-muted)}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.preview{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.preview-label{color:var(--fg-muted);font-size:14px;text-transform:uppercase;letter-spacing:.08em}.toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--fg-muted)}.toggle input{width:auto}.preview-rendered :is(h1,h2,h3,h4){margin-top:.8em;margin-bottom:.4em}.preview-rendered code{background:var(--bg-input);padding:2px 4px;border-radius:4px}.preview-raw{background:var(--bg-input);color:var(--fg);padding:12px;border-radius:var(--radius);overflow:auto;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:13px;margin:0}.screen-success{display:flex;align-items:center;justify-content:center;min-height:100dvh}.success-card{text-align:center;max-width:400px;padding:32px 16px}.success-check{font-size:80px;color:var(--success);line-height:1;margin-bottom:8px}.success-card code{background:var(--bg-elev);padding:2px 6px;border-radius:4px;font-size:13px}
