:root{--bg:#f3f5f4;--bg-elevated:#fff;--text:#1a1f1c;--text-muted:#5b6660;--border:#d7ddd9;--line-green:#06c755;--line-green-hover:#05b34c;--danger:#c62828;--radius:14px;--shadow:0 10px 30px #1a1f1c14;--font:"Segoe UI", "Noto Sans Thai", system-ui, sans-serif;color:var(--text);background:radial-gradient(circle at top left, #06c7551f, transparent 40%), linear-gradient(180deg, #f7faf8 0%, var(--bg) 100%);font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:before,:after{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}#root{min-height:100svh}button,input,textarea{font:inherit}code{background:#e8eee9;border-radius:6px;padding:.1em .35em;font-family:ui-monospace,Consolas,monospace;font-size:.9em}.page{gap:16px;width:min(560px,100%);margin:0 auto;padding:28px 20px 48px;display:grid}.hero{text-align:left;padding:8px 4px 4px}.brand{color:var(--line-green);letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;font-size:.85rem;font-weight:700}.hero h1,.panel h2,.screen h1{margin:0 0 8px;font-size:1.75rem;font-weight:700;line-height:1.2}.lede,.muted,.hint,.status-msg{color:var(--text-muted);margin:0;line-height:1.5}.hint{margin-top:12px;font-size:.92rem}.panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:left;gap:14px;padding:18px;display:grid}.profile{align-items:center;gap:14px;display:flex}.avatar{object-fit:cover;background:#eef3f0;border:2px solid #e4ebe6;border-radius:50%}.meta{gap:8px;margin:0;display:grid}.meta>div{border-top:1px solid var(--border);justify-content:space-between;gap:12px;padding:8px 0;display:flex}.meta dt{color:var(--text-muted)}.meta dd{margin:0;font-weight:600}.actions{flex-wrap:wrap;gap:10px;display:flex}.btn{appearance:none;border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:999px;padding:10px 16px;transition:background .15s,border-color .15s,transform .15s}.btn:hover{background:#f4f7f5}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--line-green);border-color:var(--line-green);color:#fff;font-weight:600}.btn.primary:hover{background:var(--line-green-hover);border-color:var(--line-green-hover)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.profile-summary{align-items:center;gap:14px;display:flex}.profile-summary-name{margin:0 0 4px;font-weight:700}.form{gap:16px}.field{gap:6px;display:grid}.field label{font-size:.95rem;font-weight:600}.optional{color:var(--text-muted);font-weight:400}.field input{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:10px;padding:12px 14px}.field input:focus{border-color:var(--line-green);outline:2px solid #06c75559}.field input[aria-invalid=true]{border-color:var(--danger)}.field-error{color:var(--danger);margin:0;font-size:.9rem}.screen{text-align:center;place-content:center;gap:12px;min-height:100svh;padding:24px;display:grid}.eyebrow{color:var(--line-green);letter-spacing:.08em;margin:0;font-weight:700}.spinner{border:3px solid #d7e8db;border-top-color:var(--line-green);border-radius:50%;width:36px;height:36px;margin:0 auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=480px){.hero h1{font-size:1.5rem}.profile{align-items:flex-start}}