:root{--page:#f5f7fb;--surface:#fff;--surface-soft:#eef3f7;--ink:#172026;--muted:#657181;--line:#d8dee8;--primary:#1f7a68;--primary-hover:#176453;--danger:#bd3f32;--warning:#b88719;--focus:#225fbf;--success:#2f7d4f;--shadow:0 24px 70px #212e3f1f;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--ink);background:var(--page);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}#root{min-height:100svh}.auth-page,.home-page{place-items:center;min-height:100svh;padding:32px;display:grid}.auth-panel,.home-panel,.step-panel,.progress-panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.auth-panel,.home-panel{width:min(100%,460px);padding:32px}.onboarding-page{grid-template-columns:300px minmax(0,1fr);align-items:stretch;gap:20px;width:min(1120px,100%);min-height:100svh;margin:0 auto;padding:32px;display:grid}.progress-panel,.step-panel{padding:28px}.progress-panel{align-self:start;position:sticky;top:32px}.step-panel{align-self:start;min-height:560px}.panel-heading{gap:8px;margin-bottom:24px;display:grid}.eyebrow{color:var(--primary);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:800}h1,h2,p{margin:0}h1,h2{color:var(--ink);font-weight:750;line-height:1.12}h1{font-size:2.25rem}h2{font-size:1.7rem}p{color:var(--muted)}.form-grid{gap:18px;display:grid}.two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.field{color:var(--ink);text-align:left;gap:8px;font-size:.94rem;font-weight:700;display:grid}.field input{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:6px;outline:none;width:100%;min-height:46px;padding:10px 12px;transition:border-color .16s,box-shadow .16s}.field input:focus{border-color:var(--focus);box-shadow:0 0 0 3px #225fbf29}.field input::placeholder{color:#9aa4b2}.file-field input{padding:9px}.field-error,.form-error{color:var(--danger);font-size:.85rem;font-weight:700}.form-error{margin-top:-4px}.form-actions{justify-content:flex-end;align-items:center;gap:12px;margin-top:8px;display:flex}.primary-action,.secondary-action,.icon-action{border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;min-height:44px;font-weight:800;transition:background .16s,border-color .16s,color .16s,transform .16s;display:inline-flex}.primary-action:hover,.secondary-action:hover,.icon-action:hover{transform:translateY(-1px)}.primary-action{background:var(--primary);color:#fff;padding:10px 18px}.primary-action:hover{background:var(--primary-hover)}.secondary-action{background:var(--surface-soft);border-color:var(--line);color:var(--ink);padding:10px 16px}.inline-action{justify-self:start}.icon-action{color:var(--danger);background:#fff5f2;border-color:#f1c6be;align-self:end;width:46px;height:46px;padding:0;font-size:1.35rem}.step-list{gap:12px;margin:28px 0 0;padding:0;list-style:none;display:grid}.step-list li{background:var(--surface-soft);color:var(--muted);border:1px solid #0000;border-radius:6px;align-items:center;gap:12px;min-height:48px;padding:10px 12px;font-weight:800;display:flex}.step-list span{background:var(--surface);border:1px solid var(--line);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.step-list .active{color:var(--primary);background:#e8f4f1;border-color:#1f7a6847}.step-list .complete{color:var(--warning);background:#f7f0df}.song-list{gap:14px;display:grid}.song-row{grid-template-columns:minmax(0,1fr) 46px;align-items:start;gap:12px;display:grid}.profile-preview{aspect-ratio:1;border:1px solid var(--line);object-fit:cover;border-radius:8px;width:112px;height:112px}.success-state{text-align:center;align-content:center;gap:24px;min-height:500px;display:grid}.success-state .panel-heading{margin-bottom:0}.success-state .form-actions{justify-content:center}.success-mark{color:var(--success);background:#e7f5ec;border:1px solid #2f7d4f47;border-radius:50%;justify-content:center;justify-self:center;align-items:center;width:82px;height:82px;font-size:2.2rem;font-weight:900;display:inline-flex}.home-panel{text-align:center;gap:18px;display:grid}.home-panel .secondary-action{justify-self:center;margin-top:8px}@media (width<=820px){.auth-page,.home-page,.onboarding-page{padding:16px}.onboarding-page{grid-template-columns:1fr}.progress-panel{position:static}.step-panel{min-height:auto}.step-list{grid-template-columns:repeat(4,minmax(0,1fr))}.step-list li{text-align:center;place-items:center;gap:6px;min-height:78px;padding:8px;font-size:.82rem;display:grid}}@media (width<=560px){.auth-panel,.home-panel,.progress-panel,.step-panel{padding:22px}h1{font-size:1.85rem}h2{font-size:1.45rem}.two-column,.song-row{grid-template-columns:1fr}.icon-action{justify-self:end}.form-actions{flex-direction:column-reverse;align-items:stretch}.form-actions button,.primary-action,.secondary-action{width:100%}}