:root{--night:#14122b;--night2:#241c4d;--violet:#6c4df5;--lav:#b9a7ff;--gold:#f5c76b;--peach:#ffb37a;--rose:#ff5c8a;--cream:#fbf8f3;--mint:#6fe0b5;--card:rgba(255,255,255,.07);--stroke:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:16px/1.45 ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cream);
  background:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent),radial-gradient(1.4px 1.4px at 78% 9%,#fffb 50%,transparent),radial-gradient(1px 1px at 40% 33%,#fff7 50%,transparent),radial-gradient(1.2px 1.2px at 90% 41%,#fff8 50%,transparent),radial-gradient(1px 1px at 22% 62%,#fff6 50%,transparent),radial-gradient(1.3px 1.3px at 66% 70%,#fff8 50%,transparent),
  linear-gradient(180deg,var(--night),var(--night2) 55%,#3a1f52) fixed;background-attachment:fixed}
#app{max-width:520px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom))}
h1,h2,h3{font-family:ui-serif,Georgia,"Iowan Old Style",serif;font-weight:600;margin:0}
h1{font-size:34px;line-height:1.1}h2{font-size:24px}h3{font-size:18px}
p{margin:.4em 0}.muted{color:#fbf8f3b8}.small{font-size:13px}.center{text-align:center}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;font-family:ui-serif,Georgia,serif;font-size:24px;letter-spacing:.04em;margin:8px 0 18px}
.star{width:64px;height:64px;display:block;margin:6px auto}
.hero{padding:22px 0 10px;text-align:center}
.hero p{font-size:18px;color:#fbf8f3d9}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:16px;margin:14px 0}
.btn{display:block;width:100%;border:0;border-radius:999px;padding:15px 18px;font:600 17px ui-rounded,system-ui,sans-serif;color:#14122b;background:linear-gradient(90deg,var(--gold),var(--peach));cursor:pointer;text-align:center;text-decoration:none}
.btn:disabled{opacity:.45;cursor:default}
.btn.sec{background:transparent;color:var(--lav);border:1px solid var(--stroke)}
.btn.small{display:inline-block;width:auto;padding:9px 16px;font-size:14px}
label{display:block;font-size:14px;color:#fbf8f3c0;margin:14px 0 6px}
input,select,textarea{width:100%;font:inherit;color:var(--cream);background:rgba(255,255,255,.09);border:1px solid var(--stroke);border-radius:14px;padding:13px 14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--lav)}
textarea{resize:vertical;min-height:96px}
select option{color:#14122b}
.row{display:flex;gap:10px}.row>*{flex:1}
.err{color:var(--rose);margin:10px 0}.ok{color:var(--mint)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:flex;gap:12px;margin:12px 0;color:#fbf8f3e6}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--rose));color:#14122b;font-weight:700;display:grid;place-items:center}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.chip{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(111,224,181,.16);color:var(--mint)}
.chip.rose{background:rgba(255,92,138,.16);color:var(--rose)}.chip.lav{background:rgba(185,167,255,.16);color:var(--lav)}
.tabs{display:flex;gap:8px;margin:14px 0}
.tabs button{flex:1;padding:11px;border-radius:999px;border:1px solid var(--stroke);background:transparent;color:var(--cream);font:600 15px inherit;cursor:pointer;position:relative}
.tabs button.on{background:rgba(108,77,245,.35);border-color:var(--lav)}
.badge{position:absolute;top:-6px;right:8px;background:var(--gold);color:#14122b;border-radius:999px;font-size:11px;min-width:18px;padding:1px 5px}
.person{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:12px;margin:8px 0;color:inherit;font:inherit;cursor:pointer}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#14122b;background:linear-gradient(135deg,var(--gold),var(--rose))}
.avatar.q{background:var(--lav)}
.grow{flex:1;min-width:0}.grow b{display:block}.grow span{display:block;font-size:13px;color:#fbf8f3a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tablehead{margin:18px 0 4px;color:var(--lav);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.bubbles{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.b{max-width:82%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.b.me{align-self:flex-end;background:linear-gradient(90deg,var(--gold),var(--peach));color:#14122b}
.b.them{align-self:flex-start;background:rgba(255,255,255,.1);font-family:ui-serif,Georgia,serif;font-style:italic;font-size:17px}
.composer{display:flex;gap:8px;position:sticky;bottom:0;padding:10px 0 4px;background:linear-gradient(0deg,#2a1b4f 70%,transparent)}
.composer input{flex:1}.composer button{flex:none;width:auto;padding:0 20px}
dialog{width:min(92vw,480px);border:1px solid var(--stroke);border-radius:22px;background:#241c4d;color:var(--cream);padding:18px}
dialog::backdrop{background:rgba(10,8,25,.7)}
#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,40px);opacity:0;background:#fbf8f3;color:#14122b;padding:11px 18px;border-radius:999px;font-weight:600;transition:.25s;max-width:90vw;text-align:center;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
a{color:var(--gold)}
footer{margin:28px 0 6px;text-align:center;font-size:12px;color:#fbf8f396}