:root{color-scheme:dark;--primary:#ffb1c2;--on-primary:#65002d;--primary-container:#8e0044;--on-primary-container:#ffd9e1;--secondary-container:#5b3f46;--on-secondary-container:#ffd9e1;--surface:#141217;--surface-low:#1c1a1f;--surface-container:#201e23;--surface-high:#2b292e;--surface-highest:#363439;--on-surface:#e8e0e5;--on-surface-variant:#d2c2c6;--outline:#9b8c90;--outline-variant:#4e4447;--inverse-surface:#e8e0e5;--inverse-on-surface:#322f33;--accent:#ff4f82;--lime:#c7ff2f;--safe-top:max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px));--safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px));--app-height:var(--tg-viewport-height,100dvh);--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--surface);color:var(--on-surface);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overscroll-behavior:none}.app{width:100%;height:var(--app-height);min-height:100dvh;max-width:760px;margin:auto;position:relative;overflow:hidden;background:radial-gradient(circle at 50% -10%,#371b2a 0,transparent 36%),var(--surface)}button,input,textarea,select{font:inherit;color:inherit}.plain{border:0;background:none}.hidden{display:none!important}.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
.screen{height:var(--app-height);min-height:100dvh;padding:calc(20px + var(--safe-top)) 20px calc(116px + var(--safe-bottom));overflow-y:auto;animation:screenIn .3s var(--ease)}.screen.onboarding{padding-bottom:calc(112px + var(--safe-bottom));display:flex;flex-direction:column}.top-tabs{position:fixed;z-index:30;top:calc(10px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;width:270px;height:48px;padding:4px;border:1px solid var(--outline-variant);border-radius:24px;background:#2b292ef7;box-shadow:0 2px 6px #0005;animation:tabsIn .3s var(--ease)}.top-tabs button{flex:1;border:0;border-radius:20px;background:transparent;color:var(--on-surface-variant);font-weight:700;transition:background .3s var(--ease),color .3s,transform .18s}.top-tabs button.active{background:var(--secondary-container);color:var(--on-secondary-container)}.top-tabs button:active{transform:scale(.94)}
.mascot{height:220px;display:grid;place-items:center;margin:8px auto 6px;animation:mascotIn .62s var(--ease),mascotFloat 4.6s ease-in-out .7s infinite}.mascot img{display:block;max-width:240px;max-height:220px;object-fit:contain}.mascot-fallback{width:158px;height:140px;position:relative;filter:drop-shadow(0 18px 28px #8e004455)}.mascot-fallback:before,.mascot-fallback:after{content:"";position:absolute;left:79px;top:22px;width:78px;height:122px;background:linear-gradient(145deg,var(--primary),var(--accent));border-radius:78px 78px 18px 18px;transform:rotate(-45deg);transform-origin:0 100%}.mascot-fallback:after{left:1px;transform:rotate(45deg);transform-origin:100% 100%}.mascot-fallback span{position:absolute;z-index:2;inset:62px 0 auto;text-align:center;font-weight:800;color:var(--on-primary);font-size:24px}.intro{text-align:center;margin:5px 0 24px}.intro h1{font-size:32px;line-height:1.15;margin:0 0 8px;letter-spacing:-.8px;font-weight:700;animation:riseIn .45s var(--ease) .06s both}.intro p{font-size:16px;line-height:1.45;color:var(--on-surface-variant);margin:0;font-weight:500;animation:riseIn .45s var(--ease) .12s both}
.label{display:block;color:var(--on-surface-variant);font-size:13px;line-height:20px;font-weight:700;margin:0 16px 6px;letter-spacing:.25px}.field{width:100%;min-height:56px;border:1px solid var(--outline);outline:0;background:transparent;border-radius:4px 4px 16px 16px;padding:16px;font-size:17px;margin-bottom:18px;caret-color:var(--primary);transition:border-color .2s,box-shadow .2s,background .2s;animation:riseIn .46s var(--ease) .16s both}.field::placeholder{color:var(--on-surface-variant);opacity:.55}.field:focus{border:2px solid var(--primary);padding:15px;background:#ffb1c207;box-shadow:0 0 0 3px #ffb1c212}.at-field{position:relative}.at-field:before{content:"@";position:absolute;z-index:1;left:17px;top:15px;color:var(--on-surface-variant);font-size:18px;pointer-events:none}.at-field input{padding-left:46px;margin-bottom:5px}.at-field input:focus{padding-left:45px}.hint{display:block;margin:0 16px 18px;color:var(--on-surface-variant);font-size:13px}.field.textarea{resize:none;height:128px}
.choice-card,.range-box,.info-card,.menu-group,.coming{background:var(--surface-container);box-shadow:0 1px 2px #0005}.choice-card{border-radius:24px;padding:4px 16px;margin-bottom:20px;animation:riseIn .46s var(--ease) .17s both}.choice{width:100%;border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:14px;padding:13px 0;font-size:17px;font-weight:600;transition:transform .18s,color .2s}.choice:active{transform:scale(.98)}.choice+.choice{border-top:1px solid var(--outline-variant)}.choice-icon,.info-icon,.menu-icon{display:grid;place-items:center;flex:0 0 auto}.choice-icon{width:40px;height:40px;border-radius:12px;background:#343165;color:#dcd9ff;font-size:20px;transition:transform .32s var(--ease),box-shadow .25s}.choice.pink .choice-icon,.choice-icon.pink{background:var(--primary-container);color:var(--on-primary-container)}.choice.lime .choice-icon,.choice-icon.lime{background:#344d00;color:var(--lime)}.choice-icon.popular{background:#f7cf4a;color:#352b00;box-shadow:0 2px 7px #f7cf4a2e}.choice.selected{color:var(--primary)}.choice.selected .choice-icon{transform:scale(1.08);box-shadow:0 0 0 2px var(--primary)}.choice.selected:after{content:"✓";margin-left:auto;color:var(--primary);font-size:23px;font-weight:800;animation:checkIn .32s var(--ease)}
.range-box{border-radius:24px;padding:18px;margin-bottom:22px;display:grid;grid-template-columns:38px 1fr 38px;gap:10px;align-items:center;font-size:17px;font-weight:700;animation:riseIn .46s var(--ease) .17s both}.range-box input{width:100%;accent-color:var(--primary)}.dual-range{position:relative;height:30px}.dual-range input{position:absolute;left:0;top:3px;width:100%;pointer-events:none;background:transparent}.dual-range input::-webkit-slider-thumb{pointer-events:auto}.photo-grid{display:flex;gap:10px;min-height:224px;margin-bottom:18px}.photo-slot{position:relative;width:calc((100% - 20px)/3);height:220px;border:1px solid var(--outline-variant);border-radius:24px;background:var(--surface-container);overflow:hidden;display:grid;place-items:center;color:var(--on-surface-variant);animation:photoIn .48s var(--ease) both;transition:transform .2s,background .2s}.photo-slot:nth-child(2){animation-delay:.07s}.photo-slot:nth-child(3){animation-delay:.14s}.photo-slot:active{transform:scale(.96);background:var(--surface-high)}.photo-slot img{width:100%;height:100%;object-fit:cover}.photo-slot .plus{display:block;font-size:48px;font-weight:300;transition:transform .3s}.photo-slot:active .plus{transform:rotate(90deg)}.photo-slot small{display:block;font-size:13px;font-weight:600}.remove-photo{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:16px;border:0;background:#201e23dd;font-size:20px;box-shadow:0 2px 5px #0007}.info-card{display:flex;align-items:center;gap:14px;border-radius:20px;padding:16px;font-size:15px;font-weight:500;line-height:1.45;animation:riseIn .46s var(--ease) .2s both}.info-icon{width:40px;height:40px;border-radius:12px;background:var(--primary-container);color:var(--on-primary-container)}.info-icon.lime{background:#344d00;color:var(--lime)}
.next{position:fixed;z-index:25;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--safe-bottom));width:min(calc(100% - 40px),720px);height:64px;border:0;border-radius:32px;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:17px;box-shadow:0 3px 8px #0007;transition:transform .18s,box-shadow .2s,opacity .2s;animation:buttonIn .5s var(--ease) both}.next:not(:disabled):active{transform:translateX(-50%) scale(.97);box-shadow:none}.next:disabled{background:#e8e0e51f;color:#e8e0e561;box-shadow:none}.back{position:fixed;z-index:31;top:calc(12px + var(--safe-top));left:max(16px,calc(50% - 364px));width:48px;height:48px;border:0;border-radius:24px;background:var(--surface-high);color:var(--on-surface);font-size:29px;box-shadow:0 2px 6px #0005;transition:transform .18s}.back:active{transform:scale(.88)}
.bottom-nav{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,760px);height:calc(88px + var(--safe-bottom));padding:8px 12px var(--safe-bottom);background:#201e23fa;display:grid;grid-template-columns:1fr 1fr 1fr 74px;border-top:1px solid var(--outline-variant);box-shadow:0 -4px 18px #0004;animation:navIn .45s var(--ease)}.bottom-nav button{border:0;background:transparent;color:var(--on-surface-variant);border-radius:28px;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:color .25s,transform .18s}.bottom-nav button:active{transform:scale(.9)}.bottom-nav button.active{color:var(--on-surface)}.bottom-nav button.active .nav-icon{background:var(--secondary-container);color:var(--on-secondary-container);font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;animation:navPop .35s var(--ease)}.nav-icon{width:64px;height:32px;border-radius:18px;display:grid;place-items:center;font-size:23px}.bottom-nav .avatar-button{background:transparent}.avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:26px;border:3px solid var(--primary);background:var(--surface-highest);font-size:20px;font-weight:800;background-size:cover;background-position:center}
.feed-screen{padding:calc(70px + var(--safe-top)) 0 calc(104px + var(--safe-bottom))}.card-stage{height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 174px);min-height:420px;display:flex;align-items:center;justify-content:center;perspective:900px}.profile-card{width:calc(100% - 32px);height:min(100%,690px);position:relative;border-radius:32px;overflow:hidden;background:var(--surface-container);touch-action:none;box-shadow:0 8px 22px #0007;transition:transform .24s var(--ease),opacity .2s;animation:cardIn .38s var(--ease);will-change:transform,opacity;contain:layout paint}.profile-card.dragging{transition:none}.profile-photo{width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;animation:imageReveal .3s ease both;transform:translateZ(0)}.photo-dots{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px}.photo-dots span{width:32px;height:4px;border-radius:2px;background:#ffffff55;transition:background .2s,transform .2s}.photo-dots span.active{background:#fff;transform:scaleX(1.08)}.profile-gradient{position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.18) 24%,rgba(0,0,0,.94))}.swipe-badge{position:absolute;z-index:6;top:70px;padding:8px 12px;border:3px solid;border-radius:12px;font-size:20px;font-weight:800;letter-spacing:1px;opacity:0;pointer-events:none;will-change:opacity}.swipe-like{left:22px;color:#b8ff78;border-color:#b8ff78;transform:rotate(-8deg)}.swipe-skip{right:22px;color:#ffb1c2;border-color:#ffb1c2;transform:rotate(8deg)}.card-info{position:absolute;left:24px;right:80px;bottom:25px;animation:riseIn .55s var(--ease) .12s both}.name{font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-.6px;margin:0 0 7px}.name .verified{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:15px;background:var(--primary);color:var(--on-primary);font-size:17px;vertical-align:5px}.place{color:#eee4e8;font-size:16px;font-weight:600}.bio{font-size:16px;line-height:1.45;margin:12px 0 0}.heart-burst{position:absolute;z-index:5;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-18deg);font-size:108px;color:var(--accent);text-shadow:0 2px 0 #fff;transition:transform .24s var(--ease),opacity .14s}.heart-burst.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:heartGlow .55s ease}.card-actions{position:absolute;right:18px;bottom:22px;display:flex;flex-direction:column;gap:10px}.round-action{width:56px;height:56px;border-radius:18px;border:0;background:var(--surface-high);font-size:24px;box-shadow:0 2px 7px #0007;transition:transform .18s}.round-action.like{background:var(--primary);color:var(--on-primary)}.round-action:active{transform:scale(.87)}
.empty{min-height:65vh;text-align:center;display:grid;place-content:center;padding:32px;animation:riseIn .5s var(--ease)}.empty-symbol{font-size:86px;color:var(--outline);margin-bottom:16px;animation:softPulse 2.3s ease-in-out infinite}.empty h2{font-size:28px;line-height:1.2;margin:0 0 10px}.empty p{color:var(--on-surface-variant);font-size:16px;margin:0;line-height:1.5}.empty .action{margin-top:26px}.profile-page{padding-top:36px}.profile-hero{text-align:center;animation:riseIn .48s var(--ease)}.profile-hero .big-avatar{width:120px;height:120px;margin:auto;border-radius:60px;border:4px solid var(--primary);background:var(--surface-highest) center/cover;display:grid;place-items:center;font-size:40px}.profile-hero h1{margin:14px 0 5px;font-size:28px}.online{display:inline-flex;gap:7px;align-items:center;color:var(--lime);background:#293700;border-radius:16px;padding:6px 13px;font-size:13px;font-weight:700}.stats{display:flex;justify-content:center;gap:10px;margin:20px 0}.stat{background:var(--secondary-container);color:var(--on-secondary-container);border-radius:18px;padding:8px 15px;font-size:14px;font-weight:600}.menu-group{border-radius:24px;margin:0 0 16px;padding:4px 16px;animation:riseIn .48s var(--ease) both}.menu-row{display:flex;align-items:center;gap:14px;padding:13px 0;font-size:16px;font-weight:600;transition:transform .18s}.menu-row:active{transform:scale(.985)}.menu-row+.menu-row{border-top:1px solid var(--outline-variant)}.menu-row:after{content:"›";margin-left:auto;color:var(--on-surface-variant);font-size:28px}.menu-icon{width:42px;height:42px;border-radius:13px;background:#343165;color:#dcd9ff;font-weight:800}.menu-icon.pink{background:var(--primary-container);color:var(--on-primary-container)}.menu-icon.lime{background:#344d00;color:var(--lime)}.menu-icon.purple{background:#56377b;color:#eadcff}
.page-title{text-align:center;margin:28px 0;animation:riseIn .46s var(--ease)}.page-title .shop-mark{font-size:78px}.page-title h1{font-size:32px;margin:10px 0}.page-title p{color:var(--on-surface-variant);font-size:16px;line-height:1.5}.coming{padding:22px;text-align:center;border-radius:24px;font-size:18px;color:var(--primary);font-weight:700}.list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mini-profile{height:280px;border-radius:24px;position:relative;overflow:hidden;background:var(--surface-container);border:0;text-align:left;padding:0;box-shadow:0 3px 10px #0005;animation:photoIn .45s var(--ease) both;transition:transform .18s}.mini-profile:active{transform:scale(.96)}.mini-profile img{width:100%;height:100%;object-fit:cover}.mini-profile:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000)}.mini-profile div{position:absolute;z-index:2;left:14px;right:10px;bottom:14px;font-size:19px;font-weight:700}.action{border:0;border-radius:24px;background:var(--primary);color:var(--on-primary);padding:14px 24px;font-weight:700;font-size:16px}.danger{background:#ffb4ab;color:#690005}
.modal{position:fixed;z-index:100;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .22s ease}.modal-box{width:min(calc(100% - 24px),736px);margin-bottom:12px;background:var(--surface-high);border-radius:28px;padding:24px 24px calc(24px + var(--safe-bottom));box-shadow:0 12px 40px #000a;animation:sheetIn .38s var(--ease)}.modal-box h3{margin:0 0 12px;font-size:22px}.modal-box p{color:var(--on-surface-variant);line-height:1.5}.modal-box button{width:100%;border:0;border-radius:22px;background:var(--secondary-container);color:var(--on-secondary-container);padding:15px;margin-top:9px;text-align:left;font-weight:700;transition:transform .18s}.modal-box button:active{transform:scale(.98)}.toast{position:fixed;z-index:200;left:50%;bottom:calc(100px + var(--safe-bottom));transform:translate(-50%,22px) scale(.96);opacity:0;background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:4px;padding:13px 18px;font-size:14px;font-weight:600;box-shadow:0 4px 14px #0007;transition:opacity .24s,transform .3s var(--ease);pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.loader{height:60vh;display:grid;place-items:center}.spinner{width:48px;height:48px;border-radius:50%;border:4px solid var(--surface-highest);border-top-color:var(--primary);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes mascotIn{from{opacity:0;transform:translateY(-20px) scale(.82)}to{opacity:1;transform:none}}@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes checkIn{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}@keyframes buttonIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes photoIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}@keyframes cardIn{from{opacity:0;transform:translateY(32px) scale(.94)}to{opacity:1;transform:none}}@keyframes imageReveal{from{opacity:.35;transform:scale(1.015)}to{opacity:1;transform:translateZ(0)}}@keyframes heartGlow{45%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes navPop{0%{transform:scale(.72)}65%{transform:scale(1.15)}100%{transform:none}}@keyframes navIn{from{opacity:0;transform:translate(-50%,28px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes tabsIn{from{opacity:0;transform:translate(-50%,-14px) scale(.94)}to{opacity:1;transform:translate(-50%,0)}}@keyframes softPulse{50%{transform:scale(1.08)}}@keyframes fadeIn{from{opacity:0}}@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@media(max-height:720px){.mascot{height:145px}.mascot img{max-height:145px}.mascot-fallback{transform:scale(.7)}.intro h1{font-size:28px}.screen.onboarding{padding-top:8px}.field{min-height:52px;padding:13px 16px;margin-bottom:12px}.photo-grid,.photo-slot{height:170px;min-height:170px}.next{height:58px}}@media(min-width:600px){.profile-card{width:520px}.list{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
