:root{--bg: #0a0a0f;--surface: #14141c;--surface-2: #1c1c28;--border: #2a2a3a;--text: #eef0f6;--muted: #9aa0b4;--accent: #5b8cff;--accent-ink: #0a0a0f;--danger: #ff5b6e;--ok: #46d19e;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;justify-content:center}.screen{width:100%;max-width:460px;padding:28px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}.brand{display:flex;align-items:center;gap:10px}.brand .logo{width:36px;height:36px;object-fit:contain}.brand h1{font-size:22px;margin:0;letter-spacing:-.02em}h2{font-size:20px;margin:0;letter-spacing:-.01em}p.lead{color:var(--muted);margin:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px}button{font:inherit;font-weight:600;border:1px solid transparent;border-radius:12px;padding:13px 16px;cursor:pointer;transition:transform .04s ease,opacity .15s ease}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}textarea,input{font:inherit;width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 14px;resize:vertical}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.id-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;word-break:break-all;font-size:13px}.phrase{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.phrase .word{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:14px;display:flex;gap:8px}.phrase .word .n{color:var(--muted);min-width:18px;text-align:right}.notice{border-radius:12px;padding:12px 14px;font-size:14px;border:1px solid}.notice.warn{border-color:#6b5a1f;background:#221d0c;color:#f2d98c}.notice.danger{border-color:#6b2530;background:#241215;color:#ffb3bd}.row{display:flex;gap:10px}.row>*{flex:1}.muted{color:var(--muted)}.center{text-align:center}.spacer{flex:1}.small{font-size:13px}.checkbox{display:flex;align-items:flex-start;gap:10px}.checkbox input{width:auto;margin-top:3px}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}.screen.has-tabs{padding-bottom:calc(84px + env(safe-area-inset-bottom))}.tabbar{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:100%;max-width:460px;display:flex;background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--border);padding:8px 8px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}.tab{flex:1;background:transparent;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:8px 4px}.tab-active{color:var(--accent)}.qr-card{align-self:center;background:#fff;padding:16px;border-radius:var(--radius)}.qr{display:block;width:220px;height:220px;image-rendering:pixelated}.friend-list{display:flex;flex-direction:column;gap:8px}.friend-row{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text)}.friend-meta{display:flex;flex-direction:column;gap:2px}.friend-name{font-weight:600}.scan-overlay{position:fixed;inset:0;background:#000;z-index:50;display:flex;align-items:center;justify-content:center}.scan-video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:240px;height:240px;border:3px solid rgba(255,255,255,.9);border-radius:20px}.scan-hint{position:absolute;bottom:120px;color:#fff;background:#00000080;padding:8px 16px;border-radius:999px;font-size:14px}.scan-cancel{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));color:#fff;border-color:#fff9}.profile-head{display:flex;align-items:center;gap:14px}.profile-name{font-size:18px;font-weight:700;letter-spacing:-.01em}.field{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-top:4px}.field-label{color:var(--muted)}.form-field{display:flex;flex-direction:column;gap:6px}.form-field .field-label{font-size:13px}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s ease;pointer-events:none}.toast.show{opacity:1}