:root{
  --bg:#FFF5F6;--card:#FFFFFF;--ink:#2A1418;--muted:#7E5F65;--line:#F2DEE2;--soft:#FBEAEE;
  --brand:#D6336C;--brand-ink:#B02A5B;--brand-soft:#FCE4EC;--brand-2:#F06595;--sun:#6C4AB6;--sun-soft:#EEE7FB;--sun-ink:#5638A0;
  --ok:#1E8A5A;--ok-soft:#DFF5EA;--blue:#2F6FEB;--danger:#C62A2A;--danger-soft:#FDE7E7;
  --r:22px;--shadow:0 1px 2px rgba(42,20,24,.05),0 8px 26px rgba(42,20,24,.07);--ease:cubic-bezier(.2,.8,.2,1);
  --display:'Bricolage Grotesque',Inter,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#170D12;--card:#23161C;--ink:#FFF0F3;--muted:#C2A3AB;--line:#3A2830;--soft:#2C1C23;
  --brand:#FF5C8D;--brand-ink:#FF8AAD;--brand-soft:#3D1A28;--brand-2:#FF8E6B;--sun:#A88BFF;--sun-soft:#2A2145;--sun-ink:#C4B0FF;
  --ok:#4CC58C;--ok-soft:#14332A;--danger:#FF6B6B;--danger-soft:#3A1717;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);color-scheme:dark;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
img{user-select:none;-webkit-user-drag:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;margin:0 0 8px;line-height:1.08}
h1{font-size:32px}h2{font-size:25px}h3{font-size:19px}
p{margin:0 0 10px}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}.spacer{flex:1}.hidden{display:none!important}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;padding:6px 16px 120px}

/* wordmark */
.logo{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.04em;line-height:1}
.logo .mk{width:28px;height:28px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff}
.logo .mk svg{width:17px;height:17px}

/* top bar */
.topbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.title{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:13px;color:var(--muted);font-weight:500}

/* tabs */
.tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6;max-width:456px;margin:0 auto}
.tabs .in{display:flex;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 10px 34px rgba(23,19,43,.16);padding:6px;border:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);cursor:pointer;position:relative;border-radius:18px;transition:all .25s var(--ease)}
.tabs svg{width:23px;height:23px}
.tabs button.on{color:var(--brand);background:var(--brand-soft)}
.badge{position:absolute;top:3px;left:calc(50% + 6px);background:var(--sun);color:#fff;border-radius:999px;font-size:10px;font-weight:800;min-width:17px;height:17px;padding:0 5px;display:grid;place-items:center;animation:pop .35s var(--ease)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:15px 22px;font-weight:700;cursor:pointer;background:var(--brand);color:#fff;width:100%;transition:transform .15s var(--ease),opacity .2s}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.sun{background:var(--sun);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.soft{background:var(--brand-soft);color:var(--brand-ink)}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger-ghost{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{padding:9px 14px;width:auto;font-size:14px;border-radius:12px}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn svg{width:19px;height:19px}
.link{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;padding:0}
.icon-btn{background:none;border:0;width:42px;height:42px;cursor:pointer;display:grid;place-items:center;border-radius:14px;color:var(--ink);flex:none}
.icon-btn:active{background:var(--soft)}
.icon-btn svg{width:23px;height:23px}
.icon-btn.boxed{background:var(--card);box-shadow:var(--shadow)}

/* forms */
label.f{display:block;margin:12px 0}
.flabel{display:block;font-size:13px;font-weight:700;margin:0 0 8px;color:var(--muted)}
.i{width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:14px 16px;outline:none;transition:border-color .2s}
.i:focus{border-color:var(--brand)}
.i.big{font-size:22px;padding:16px 18px;font-family:var(--display);font-weight:600}
textarea.i{resize:none;min-height:96px}
.counter{text-align:right;font-size:12px;color:var(--muted);margin-top:4px}
.err{color:var(--danger);font-size:14px;margin-top:10px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:9px 14px;cursor:pointer;font-weight:500;transition:all .15s}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip-group-t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;text-align:left;transition:all .15s var(--ease);width:100%;color:var(--ink)}
.opt:active{transform:scale(.985)}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}
.opt .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.opt.multi .tick{border-radius:7px}
.opt.on .tick{background:var(--brand);border-color:var(--brand);color:#fff}
.opt .tick svg{width:14px;height:14px;opacity:0}
.opt.on .tick svg{opacity:1}
.opt>svg{width:18px;height:18px;flex:none;color:var(--muted)}
.switch{position:relative;width:48px;height:29px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s;cursor:pointer}
.switch span::after{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s var(--ease)}
.switch input:checked+span{background:var(--brand)}
.switch input:checked+span::after{transform:translateX(19px)}
input[type=range]{width:100%;accent-color:var(--brand);height:28px}
.rangeval{font-family:var(--display);font-size:36px;font-weight:700;text-align:center;margin:8px 0 6px}

/* profile: scrolling photos */
.pphoto{position:relative;border-radius:24px;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow);background:var(--soft)}
.pphoto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;opacity:0;transition:opacity .35s}
.pphoto img.ld{opacity:1}
.pphoto.blur img{filter:blur(26px) saturate(1.2);transform:scale(1.15)}
.pphoto .lockmsg,.story .lockmsg{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center;color:#fff;padding:30px}
.pphoto .lockmsg div{background:rgba(20,8,12,.45);backdrop-filter:blur(6px);border-radius:18px;padding:14px 16px;font-weight:600;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pphoto .lockmsg svg{width:26px;height:26px}
.pr-reply{position:absolute;right:12px;bottom:12px;width:48px;height:48px;border-radius:16px;border:0;background:var(--card);color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.pr-reply:active{transform:scale(.9)}
.pr-reply svg{width:22px;height:22px}
/* hearts */
.heart{position:absolute;right:14px;bottom:14px;width:54px;height:54px;border-radius:50%;border:0;background:var(--card);color:var(--brand);box-shadow:0 4px 16px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease);z-index:2}
.heart:active{transform:scale(.86)}
.heart svg{width:26px;height:26px}
.pr.has-heart{padding-bottom:26px}
.pr.has-heart .a{margin-right:52px}
/* profile: header */
.phead{padding:18px 18px 16px}
.phead h2{display:flex;align-items:center;gap:8px;margin:0;font-size:29px;flex-wrap:wrap}
.pmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pmeta span{display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);color:var(--brand-ink);border-radius:10px;padding:5px 10px;font-size:13px;font-weight:600}
.pmeta span.demo{background:var(--sun-soft);color:var(--sun-ink)}
.pmeta svg{width:14px;height:14px}
.pcard{background:var(--card);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;position:relative}
.story{position:relative;aspect-ratio:4/5;margin:0 10px;border-radius:20px;background:var(--soft);overflow:hidden;touch-action:pan-y}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.story img.on{opacity:1}
.story.blur img{filter:blur(26px) saturate(1.2);transform:scale(1.15)}
.story .bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:2}
.story .bars i{flex:1;height:3.5px;border-radius:3px;background:rgba(255,255,255,.4)}
.story .bars i.on{background:#fff}
.story .tz{position:absolute;top:0;bottom:30%;width:40%;z-index:2;cursor:pointer}
.story .tz.l{left:0}.story .tz.r{right:0}
.story .ov{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 18px;background:linear-gradient(transparent,rgba(10,6,25,.78));color:#fff;z-index:1}
.story .ov h1{color:#fff;font-size:34px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.story .ov .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.story .ov .meta span{background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:5px 10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.story .ov .meta svg{width:14px;height:14px}
.story .lockmsg{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center;color:#fff;padding:30px}
.story .lockmsg div{background:rgba(10,6,25,.45);backdrop-filter:blur(6px);border-radius:18px;padding:14px 16px;font-weight:600;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.story .lockmsg svg{width:26px;height:26px}
.facts{display:flex;flex-wrap:wrap;gap:8px;padding:16px}
.fact{display:inline-flex;align-items:center;gap:7px;background:var(--soft);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:500}
.fact svg{width:16px;height:16px;color:var(--muted)}
.pr{border-radius:22px;padding:22px 20px 20px;margin-bottom:12px;position:relative}
.pr.c0{background:var(--brand-soft)}.pr.c1{background:var(--sun-soft)}.pr.c2{background:var(--card);box-shadow:var(--shadow)}
.pr .q{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pr .a{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.015em;margin-top:8px;overflow-wrap:anywhere}
.pr .reply{margin-top:14px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:8px;background:var(--soft);color:var(--muted)}
.tag.demo{background:var(--sun-soft);color:var(--sun-ink)}
.tag.brand{background:var(--brand-soft);color:var(--brand-ink)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.sample{background:var(--sun-soft);color:var(--sun-ink)}
.profile-end{text-align:center;padding:6px 0 24px}

/* picks */
.pickhead{display:flex;align-items:center;gap:10px;margin:2px 2px 12px}
.dots{display:flex;gap:4px}
.dots i{width:16px;height:6px;border-radius:4px;background:var(--line)}
.dots i.on{background:var(--brand)}
.bestfit{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:20px;padding:12px 14px;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start}
.bestfit svg{width:22px;height:22px;flex:none;margin-top:1px}
.bestfit .rs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bestfit .rs span{background:rgba(255,255,255,.2);border-radius:8px;padding:3px 8px;font-size:12.5px;font-weight:600}
.actionbar{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:4;pointer-events:none}
.actionbar .in{max-width:480px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between}
.act{pointer-events:auto;border:0;border-radius:999px;height:58px;display:inline-flex;align-items:center;gap:8px;padding:0 22px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 8px 24px rgba(23,19,43,.22);transition:transform .2s var(--ease)}
.act:active{transform:scale(.92)}
.act svg{width:22px;height:22px}
.act.pass{background:var(--card);color:var(--ink);width:58px;padding:0;justify-content:center}
.act.yes{background:var(--brand);color:#fff}
.stage.enter{animation:cardIn .45s var(--ease)}
.stage.leave-left{transition:transform .32s ease-in,opacity .32s;transform:translateX(-115%) rotate(-6deg);opacity:0}
.stage.leave-right{transition:transform .36s ease-in,opacity .36s;transform:translateX(115%) rotate(6deg);opacity:0}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.98)}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.spark{position:fixed;left:50%;top:45%;width:130px;height:130px;margin:-65px 0 0 -65px;z-index:40;pointer-events:none;color:var(--brand);animation:spark .8s var(--ease) forwards}
@keyframes spark{0%{transform:scale(.2) rotate(-30deg);opacity:0}35%{transform:scale(1.15) rotate(0);opacity:1}100%{transform:scale(1.5) rotate(20deg);opacity:0}}
.notice{border-radius:20px;padding:16px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}
.notice.sun{background:var(--sun-soft)}.notice.brand{background:var(--brand-soft)}.notice.ok{background:var(--ok-soft)}.notice.danger{background:var(--danger-soft)}
.notice svg{width:24px;height:24px;flex:none}
.notice.sun svg{color:var(--sun-ink)}.notice.brand svg{color:var(--brand)}.notice.ok svg{color:var(--ok)}.notice.danger svg{color:var(--danger)}
.notice b{display:block;margin-bottom:2px}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--soft) 0%,var(--line) 50%,var(--soft) 100%);background-size:200% 100%;animation:sh 1.3s infinite;border-radius:var(--r)}
@keyframes sh{to{background-position:-200% 0}}

/* lists */
.list{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.li{display:flex;gap:14px;align-items:center;padding:13px 16px;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:none;width:100%;text-align:left;color:var(--ink)}
.li:last-child{border-bottom:0}
.li:active{background:var(--soft)}
.li .t{flex:1;min-width:0}
.li .n{font-weight:700;display:flex;align-items:center;gap:6px}
.li .s{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li.unread .s{color:var(--ink);font-weight:600}
.li .chev{color:var(--muted);width:18px;height:18px;flex:none}
.li .ic{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.li .ic svg{width:20px;height:20px}
.li .val{color:var(--muted);font-size:14px;max-width:45%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:56px;height:56px;border-radius:18px;object-fit:cover;background:var(--soft);flex:none}
.av.sm{width:36px;height:36px;border-radius:12px}
.av.blur{filter:blur(8px)}
.section-t{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:24px 4px 10px}
.conns{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.conns::-webkit-scrollbar{display:none}
.cn{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--ink);font-size:13px;font-weight:600;flex:none;width:76px}
.cn img{width:72px;height:72px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 2.5px var(--bg),0 0 0 4.5px var(--brand);background:var(--soft)}
.unread-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}

/* request grid */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rq{background:var(--card);border-radius:var(--r);overflow:hidden;cursor:pointer;border:0;padding:0;text-align:left;box-shadow:var(--shadow);color:var(--ink);position:relative;animation:cardIn .4s var(--ease) backwards}
.rq .im{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--soft)}
.rq .b{padding:11px 12px 13px}
.rq .c{font-size:13px;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.context{background:var(--brand-soft);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.context .lbl{font-size:12px;font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.06em}
.bubble-note{background:var(--card);border-radius:16px;padding:11px 14px;margin-top:10px;font-size:15px}
.bottombar{position:fixed;bottom:0;left:0;right:0;z-index:8;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.bottombar .in{max-width:480px;margin:0 auto;display:flex;gap:10px}

/* events */
.ev{display:flex;gap:14px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-bottom:12px;border:0;width:100%;text-align:left;cursor:pointer;color:var(--ink);animation:cardIn .4s var(--ease) backwards}
.ev .dt{width:62px;flex:none;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;color:#fff}
.ev .dt b{font-family:var(--display);font-size:26px;line-height:1}
.ev .dt span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ev .bd{flex:1;min-width:0}
.ev .bd h3{font-size:17px;margin:2px 0 4px}
.ev .bd .m{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.ev .bd .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.g-speed_dating{background:linear-gradient(140deg,#D6336C,#F06595)}.g-quiz{background:linear-gradient(140deg,#0E9F8E,#2BC6A0)}
.g-dinner{background:linear-gradient(140deg,#E2572B,#F59E3B)}.g-activity{background:linear-gradient(140deg,#D33C7B,#F06BA3)}
.g-walk{background:linear-gradient(140deg,#2F80ED,#56B4F5)}.g-mixer{background:linear-gradient(140deg,#7A4DE8,#B57BFF)}.g-party{background:linear-gradient(140deg,#E8A100,#FFC93C)}
.evhero{border-radius:28px;color:#fff;padding:26px 22px;margin-bottom:14px;position:relative;overflow:hidden}
.evhero .em{font-size:44px;line-height:1}
.evhero h1{color:#fff;margin:12px 0 6px}
.evhero .m{opacity:.92;font-weight:500}
.kv{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.kv div{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);align-items:center}
.kv div:last-child{border-bottom:0}
.kv svg{width:20px;height:20px;color:var(--brand);flex:none}
.meter{height:8px;border-radius:6px;background:var(--soft);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--brand);border-radius:6px}

/* empty */
.empty{text-align:center;padding:52px 18px}
.empty .art{width:96px;height:96px;margin:0 auto 20px;border-radius:30px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.empty .art svg{width:44px;height:44px}
.countdown{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;font-variant-numeric:tabular-nums}

/* pages */
.page{position:fixed;inset:0;z-index:15;background:var(--bg);display:flex;flex-direction:column;animation:pageIn .32s var(--ease)}
.page.out{animation:pageOut .25s ease-in forwards}
.page .pbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.page .pbody>.wrap{max-width:480px;margin:0 auto;padding:6px 16px 120px}
.page .topbar{position:relative}
.page .topbar .inner{max-width:480px;margin:0 auto;width:100%;display:flex;align-items:center;gap:6px}
@keyframes pageIn{from{transform:translateX(30%);opacity:0}}
@keyframes pageOut{to{transform:translateX(30%);opacity:0}}

/* chat */
.chat{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:4px;max-width:480px;width:100%;margin:0 auto}
.msg-wrap{display:flex;flex-direction:column;max-width:80%;position:relative}
.msg-wrap.me{align-self:flex-end;align-items:flex-end}
.msg-wrap.them{align-self:flex-start;align-items:flex-start}
.msg{padding:10px 15px;border-radius:20px;overflow-wrap:anywhere;white-space:pre-wrap;animation:msgIn .25s var(--ease);user-select:none;-webkit-user-select:none}
.me .msg{background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.them .msg{background:var(--card);border-bottom-left-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.msg.img{padding:0;overflow:hidden;background:none!important;border-radius:18px}
.msg.img img{display:block;max-width:240px;max-height:320px;border-radius:18px;background:var(--soft);min-width:120px;min-height:120px;object-fit:cover}
.react{position:relative;margin-top:-10px;font-size:15px;background:var(--card);border-radius:999px;padding:1px 6px;box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:1;animation:pop .35s var(--ease)}
.me .react{margin-right:8px}.them .react{margin-left:8px}
.receipt{font-size:11.5px;color:var(--muted);margin:3px 6px 6px;font-weight:600}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.daytag{align-self:center;font-size:12px;color:var(--muted);margin:14px 0 6px;font-weight:700}
.typing{align-self:flex-start;background:var(--card);border-radius:20px;padding:13px 16px;display:flex;gap:4px;margin-top:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ty 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.composer{border-top:1px solid var(--line);background:var(--bg);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.composer form{max-width:480px;margin:0 auto;display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;border-radius:20px;min-height:46px;max-height:130px;padding:12px 16px;resize:none}
.composer .wait{max-width:480px;margin:0 auto;text-align:center;color:var(--muted);font-size:14px;padding:6px 10px}
.send{width:46px;height:46px;border-radius:16px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.send svg{width:20px;height:20px}
.attach{width:46px;height:46px;border-radius:16px;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.attach svg{width:22px;height:22px}
.reaction-bar{position:fixed;z-index:30;background:var(--card);border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.22);display:flex;padding:6px;gap:2px;animation:pop .25s var(--ease)}
.reaction-bar button{border:0;background:none;font-size:26px;width:44px;height:44px;border-radius:50%;cursor:pointer}
.banner{border-radius:16px;font-size:13.5px;padding:11px 14px;margin:6px 0 8px;text-align:center;font-weight:500}
.banner.sun{background:var(--sun-soft);color:var(--sun-ink)}.banner.brand{background:var(--brand-soft);color:var(--brand-ink)}
.chat-empty{text-align:center;padding:30px 12px}
.chat-empty img{width:96px;height:96px;border-radius:30px;object-fit:cover;margin-bottom:14px;background:var(--soft)}

/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(10,7,22,.5);z-index:20;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet-bg.out{animation:fadeOut .2s forwards}
.sheet{background:var(--bg);width:100%;max-width:480px;border-radius:28px 28px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));max-height:92dvh;overflow-y:auto;animation:up .32s var(--ease)}
.sheet-bg.out .sheet{animation:down .2s ease-in forwards}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.sheet-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
@keyframes up{from{transform:translateY(60px);opacity:0}}
@keyframes down{to{transform:translateY(80px);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:16px;z-index:50;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:toastIn .35s var(--ease);max-width:calc(100% - 32px);text-align:center;cursor:pointer}
@keyframes toastIn{from{transform:translate(-50%,-30px);opacity:0}}

/* connection splash */
.connsplash{position:fixed;inset:0;z-index:35;background:radial-gradient(120% 90% at 50% 25%,#F7799F 0%,#D6336C 45%,#8E1B47 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;animation:fade .3s}
.connsplash h1{font-size:46px;color:#fff;animation:pop .6s var(--ease)}
.connsplash .pair{display:flex;margin:26px 0 22px}
.connsplash .pair img{width:118px;height:118px;border-radius:36px;object-fit:cover;border:4px solid #fff;background:#d9d2ff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.connsplash .pair img:first-child{transform:rotate(-6deg);animation:slideL .6s var(--ease)}
.connsplash .pair img+img{margin-left:-18px;transform:rotate(6deg);animation:slideR .6s var(--ease)}
@keyframes slideL{from{transform:translateX(-80px) rotate(-16deg);opacity:0}}
@keyframes slideR{from{transform:translateX(80px) rotate(16deg);opacity:0}}
.connsplash .btn{max-width:330px;background:#fff;color:#2A1418;margin-top:10px}
.connsplash .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.connsplash .rule{background:rgba(255,255,255,.15);border-radius:14px;padding:10px 14px;font-size:14px;max-width:330px;margin-bottom:8px}

/* wizard */
.wiz{min-height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom))}
.wiz .prog{height:5px;background:var(--line);border-radius:4px;overflow:hidden;margin:6px 0 4px}
.wiz .prog i{display:block;height:100%;background:var(--brand);border-radius:4px;transition:width .45s var(--ease)}
.wiz .body{flex:1;padding:22px 0 20px}
.wiz .body.fwd{animation:stepIn .38s var(--ease)}
.wiz .body.back{animation:stepBack .38s var(--ease)}
.wiz .step-ic{width:54px;height:54px;border-radius:18px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:18px}
.wiz .step-ic svg{width:27px;height:27px}
.wiz .foot{display:flex;gap:10px;align-items:center}
@keyframes stepIn{from{opacity:0;transform:translateX(36px)}}
@keyframes stepBack{from{opacity:0;transform:translateX(-36px)}}

/* photo editor */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{aspect-ratio:4/5;border-radius:16px;border:2px dashed var(--line);background:var(--card);position:relative;overflow:hidden;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.filled{border:0;cursor:grab;box-shadow:var(--shadow)}
.slot .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:10px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:17px;line-height:1;z-index:2}
.slot .main-tag{position:absolute;left:6px;bottom:6px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;z-index:2}
.slot input{display:none}
.slot.ghost-drag{opacity:.35}
.pslot{background:var(--card);border-radius:18px;padding:16px;margin-bottom:12px;border:1.5px solid var(--line);cursor:pointer;width:100%;text-align:left;color:var(--ink);display:block}
.pslot.empty-p{border-style:dashed}
.pslot .pq{font-size:12px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.04em}
.pslot .pa{font-family:var(--display);font-weight:600;font-size:19px;margin-top:6px;line-height:1.25}

/* me tab */
.me-hero{display:flex;gap:16px;align-items:center;padding:8px 2px 4px}
.me-hero img{width:88px;height:88px;border-radius:28px;object-fit:cover;background:var(--soft)}
.me-hero h2{margin:0;display:flex;align-items:center;gap:6px}
.progress{height:8px;border-radius:6px;background:var(--soft);overflow:hidden;margin:8px 0 2px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:6px;transition:width 1s var(--ease)}
.tip{background:var(--card);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;margin:12px 0;width:100%;border:0;text-align:left;cursor:pointer;color:var(--ink)}
.tip svg{width:22px;height:22px;color:var(--brand);flex:none}

/* auth */
.auth{min-height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.auth .blob{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 40%,transparent),transparent 65%);top:-200px;right:-220px;filter:blur(8px);pointer-events:none;animation:float 9s ease-in-out infinite}
.auth .blob.b{background:radial-gradient(circle,color-mix(in srgb,var(--sun) 40%,transparent),transparent 65%);top:auto;bottom:-240px;left:-240px;right:auto;animation-delay:-4s}
@keyframes float{50%{transform:translate(-26px,26px) scale(1.06)}}
.auth .hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:26px 0;position:relative}
.auth .hero h1{font-size:46px;line-height:1;margin-bottom:14px}
.auth .hero h1 em{font-style:normal;color:var(--brand)}
.auth .pillars{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px}
.auth .pillars div{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);font-weight:600;font-size:14.5px;animation:cardIn .6s var(--ease) backwards}
.auth .pillars div:nth-child(2){animation-delay:.1s}.auth .pillars div:nth-child(3){animation-delay:.2s}.auth .pillars div:nth-child(4){animation-delay:.3s}
.auth .pillars svg{width:22px;height:22px;color:var(--brand);flex:none}
.auth form{position:relative}

.menu{position:fixed;background:var(--card);border-radius:18px;box-shadow:0 12px 36px rgba(0,0,0,.2);overflow:hidden;z-index:30;min-width:220px;animation:pop .2s var(--ease);transform-origin:top right}
.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px 16px;border:0;background:none;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--line);font-weight:500}
.menu button:last-child{border-bottom:0}
.menu button.danger{color:var(--danger)}
.menu svg{width:19px;height:19px}
.loader{display:flex;justify-content:center;padding:60px}
.spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spn .8s linear infinite}
@keyframes spn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* hide the Netlify badge (can also be switched off in Netlify settings) */
#nl-badge-frame{display:none!important}