:root { --purple:#4b20b5; --purple-dark:#351485; --lavender:#ede5ff; --yellow:#ffba21; --green:#66bf3c; --red:#f52e3d; --ink:#29223e; --cream:#fff9ee; --line:#e5ddec; --muted:#746c88; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; background:linear-gradient(135deg,#f7f1ff 0%,#fffdf7 55%,#fff0cc 100%); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.page-shell { min-height:100vh; display:grid; grid-template-columns:minmax(300px, .85fr) minmax(380px, 670px); align-items:stretch; justify-content:center; }
.side-panel { min-height:100vh; overflow:hidden; position:relative; background:var(--purple); color:#fff; padding:54px clamp(32px,6vw,92px); display:flex; flex-direction:column; }
.side-panel:after { content:""; position:absolute; width:540px; height:540px; border:70px solid rgba(255,255,255,.07); border-radius:50%; bottom:-280px; left:-190px; }
.side-logo { width:min(265px,100%); height:auto; object-fit:contain; object-position:left center; }
.side-copy { margin-top:clamp(80px,15vh,180px); position:relative; z-index:1; letter-spacing:.02em; }
.side-copy span { display:block; color:#ffe29a; font-size:14px; font-weight:800; }
.side-copy strong { display:block; max-width:380px; font-size:clamp(38px,5vw,70px); line-height:.96; margin-top:10px; }
.side-copy p { max-width:310px; font-size:18px; line-height:1.45; margin-top:24px; color:#eee7ff; }
.side-character { width:min(310px, 96%); height:clamp(250px, 38vh, 430px); margin-top:auto; align-self:flex-end; object-fit:contain; object-position:center bottom; position:relative; z-index:1; filter:drop-shadow(0 18px 22px rgba(16,4,70,.25)); }
.app-card { width:100%; min-height:100vh; background:#fff; padding:24px clamp(22px,5vw,56px) 38px; }
.topbar { height:62px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #ffd779; margin:0 -12px 20px; padding:0 12px; }
.topbar img { width:145px; height:46px; object-fit:contain; }
.back { background:transparent; border:0; width:42px; height:42px; color:var(--purple); font-size:34px; line-height:1; margin-left:-10px; }
.back.empty { visibility:hidden; }
.progress { color:#8c81a2; text-align:center; font-size:13px; font-weight:800; margin:13px 0 5px; }
.progress-dots { display:flex; gap:7px; justify-content:center; margin-bottom:16px; }
.progress-dots i { width:8px; height:8px; border-radius:99px; background:#ded5ed; }
.progress-dots i.active { width:23px; background:var(--yellow); }
h1 { color:var(--purple); font-family:Georgia, "Times New Roman", serif; text-align:center; font-size:clamp(28px,4vw,39px); line-height:1.12; margin:10px auto 8px; max-width:560px; }
h2 { color:var(--purple); text-align:center; font-size:clamp(24px,3.4vw,32px); line-height:1.15; margin:6px auto 10px; }
.lead { text-align:center; line-height:1.45; margin:0 auto 20px; max-width:560px; color:#41385b; }
.illustration { height:132px; width:150px; object-fit:contain; display:block; margin:0 auto 6px; }
.assessment { display:grid; gap:9px; }
.question { border:1px solid var(--line); background:#fbf9ff; border-radius:13px; padding:12px 13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.question-name { font-weight:800; font-size:14px; line-height:1.25; }
.required { color:#d82a4c; }
.rating { display:flex; gap:3px; }
.rating button { border:0; background:transparent; padding:2px; color:#ded5ed; font-size:23px; line-height:1; transition:transform .12s,color .12s; }
.rating button:hover,.rating button.selected { color:var(--yellow); transform:scale(1.1); }
.field-label { display:block; font-weight:800; font-size:14px; margin:20px 0 8px; }
.feelings { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.feeling { min-height:88px; border:2px solid transparent; border-radius:13px; padding:11px 9px; color:#362c58; font-weight:750; font-size:13px; line-height:1.18; background:#f5f0ff; text-align:center; }
.feeling:nth-child(1){ background:#e3d6ff; } .feeling:nth-child(2){ background:#fff1c6; } .feeling:nth-child(3){ background:#ece5ff; } .feeling:nth-child(4){ background:#ffd9d6; }
.feeling .emoji { display:block; font-size:24px; margin-bottom:5px; }
.feeling.selected { border-color:var(--purple); box-shadow:0 0 0 3px rgba(75,32,181,.14); }
.error { min-height:20px; color:#c52642; font-size:13px; font-weight:700; margin:10px 0 0; }
.actions { display:flex; gap:10px; margin-top:24px; }
.actions .primary { flex:1; }
.primary,.secondary,.choice { border:0; min-height:54px; border-radius:12px; font-weight:850; font-size:17px; transition:filter .15s,transform .15s; }
.primary { background:var(--purple); color:#fff; box-shadow:0 5px 0 var(--purple-dark); }
.primary:hover,.choice:hover { filter:brightness(1.06); transform:translateY(-1px); }
.primary:active,.choice:active { transform:translateY(2px); box-shadow:none; }
.primary:disabled { opacity:.62; cursor:wait; transform:none; box-shadow:none; }
.secondary { background:#fff; color:var(--purple); border:2px solid var(--purple); padding:0 20px; }
.decision-list { display:grid; gap:13px; margin-top:22px; }
.choice { color:white; display:flex; align-items:center; gap:14px; padding:0 20px; text-align:left; font-size:20px; }
.choice .choice-icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; }
.choice .choice-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.conversation-illustration { height:124px; }
.yes { background:var(--green); } .maybe { background:var(--yellow); } .no { background:var(--red); }
.form-field { margin-top:14px; }
.form-field label { display:block; font-weight:800; font-size:14px; margin:0 0 7px; }
input,textarea { width:100%; border:1.5px solid #ddd5ea; border-radius:10px; color:var(--ink); padding:13px 14px; outline:none; background:#fff; }
input:focus,textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(75,32,181,.1); }
textarea { min-height:150px; resize:vertical; }
.info-box { background:var(--cream); border-radius:14px; padding:15px; margin:17px 0; color:#51466b; font-size:13px; line-height:1.45; }
.privacy { display:flex; gap:9px; align-items:flex-start; color:#756b88; font-size:12px; line-height:1.38; margin:14px 0; }
.privacy span { font-size:18px; }
.referral-card { border:1.5px solid #ded6e9; border-radius:15px; padding:15px; margin-top:15px; position:relative; }
.referral-card h3 { margin:0 0 7px; color:var(--purple); font-size:16px; }
.remove-referral { position:absolute; right:8px; top:8px; border:0; background:#f7eef0; color:#bd2943; border-radius:8px; padding:5px 8px; font-weight:800; }
.check { display:flex; align-items:flex-start; gap:9px; font-size:13px; font-weight:700; line-height:1.32; margin-top:13px; cursor:pointer; }
.check input { width:19px; height:19px; margin:0; accent-color:var(--purple); flex:0 0 auto; }
.add-referral { width:100%; min-height:45px; color:var(--purple); background:#fff; border:2px solid var(--purple); border-radius:10px; font-weight:850; margin-top:13px; }
.skip-note { display:flex; align-items:center; gap:9px; padding:12px; background:#faf8ff; border-radius:11px; margin-top:13px; font-size:14px; font-weight:700; }
.skip-note input { width:19px; height:19px; accent-color:var(--purple); }
.course-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:310px; overflow:auto; padding:2px; }
.course { display:flex; gap:8px; align-items:flex-start; padding:10px; border:1.5px solid #e5ddec; border-radius:10px; font-size:13px; font-weight:700; line-height:1.2; cursor:pointer; }
.course input { width:17px; height:17px; margin:0; accent-color:var(--purple); flex:0 0 auto; }
.gift-message { display:flex; gap:13px; align-items:center; background:#fff6df; border-radius:15px; padding:15px; margin:21px 0 14px; color:#3f345d; font-weight:800; line-height:1.35; }
.gift-message img { width:60px; height:60px; object-fit:contain; }
.final-illustration { width:170px; height:145px; object-fit:contain; display:block; margin:10px auto 2px; }
.success { text-align:center; padding:22px 0; }
.success-badge { width:73px; height:73px; display:grid; place-items:center; margin:0 auto 14px; background:#dff4d4; color:#278740; border-radius:50%; font-size:38px; font-weight:900; }
.success p { font-size:17px; line-height:1.45; margin:10px auto; max-width:420px; }
.success .send-id { font-size:12px; color:var(--muted); margin-top:17px; }
.small { text-align:center; font-size:12px; color:var(--muted); margin:14px 0 0; }
@media (max-width:860px) { .page-shell { display:block; } .side-panel { display:none; } .app-card { max-width:670px; margin:auto; min-height:100vh; } }
@media (max-width:420px) { .app-card { padding:15px 16px 30px; } .topbar { margin:0 -4px 14px; padding:0 4px; height:54px; } .topbar img { width:132px; } .question { grid-template-columns:1fr; gap:6px; } .rating { justify-content:space-between; } .rating button { font-size:27px; } .course-grid { grid-template-columns:1fr; } .choice { min-height:58px; } }