/* WynnLove app surfaces: the existing palette, comfortable touch sizes, no remote assets. */
:root{color-scheme:light;--safe-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--safe-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--safe-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--safe-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-short{display:none}.nav-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:var(--pink);color:white;font-size:10px}.navitem.active{color:var(--pink-dark)}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d82750;outline-offset:3px}button:disabled{cursor:wait;opacity:.6}
.launch-screen{min-height:100dvh;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.launch-screen img{object-fit:contain}.launch-wordmark{font:700 30px Manrope,var(--sans);letter-spacing:-1px;margin-top:14px;color:var(--ink)}.launch-wordmark span{color:var(--pink)}.launch-screen p{font-size:15px;color:var(--muted);margin:6px 0 24px}.launch-progress{width:34px;height:3px;border-radius:4px;background:var(--pink);animation:launch-pulse 1s ease-in-out infinite alternate}.launch-recovery{max-width:420px;margin:15vh auto;padding:30px}.launch-recovery .btn{display:block;margin:22px 0}.launch-recovery h1{font-size:32px}@keyframes launch-pulse{to{opacity:.3;transform:scaleX(.5)}}
html.dialog-open{overflow:hidden}dialog{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}dialog .dialog-close{width:44px;height:44px;z-index:2;border-radius:50%;background:var(--white);top:8px;right:8px}dialog .match-detail .button-row{position:sticky;bottom:0;background:var(--cream);padding:12px 0;margin-bottom:0}dialog .match-detail .button-row .btn{flex:1;min-height:48px}
.message-screen{display:flex;flex-direction:column;min-height:380px}.message-header{padding-right:35px}.message-header h2{font-family:Manrope,var(--sans);font-size:20px;margin:0 0 4px}.message-header p{font-size:12px;margin:0;color:var(--muted)}.message-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.message-toolbar button{min-height:44px;font-size:12px}.message-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:150px;max-height:45dvh;padding:12px 2px}.message-scroll .bubble{font-size:15px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap;max-width:88%;padding:12px 16px}.message-scroll .reply{margin-left:auto;background:var(--pink);color:#fff;border-radius:16px 16px 3px 16px}.message-scroll .bubble:not(.reply){background:var(--white);border:1px solid var(--line);border-radius:16px 16px 16px 3px}.message-composer{border-top:1px solid var(--line);padding:12px 0 0}.message-composer .field{margin-bottom:8px}.message-composer textarea{min-height:52px;max-height:130px;resize:vertical;font-size:16px;background:var(--white)}.message-composer .btn{min-height:44px}.message-status{font-size:12px;margin:8px 0 0;color:var(--muted)}.message-status:empty{display:none}
.native-app body{padding:0;background:var(--cream)}.native-background:after{background-color:var(--cream)}
/* Compact applies to phone browsers and every native viewport, including tablets. */
:is(.compact-app,.native-app) .shell{display:block;min-height:100dvh;background:var(--cream)}
:is(.compact-app,.native-app) .sidebar{position:fixed;z-index:20;inset:auto 0 0;width:100%;height:auto;min-height:68px;padding:6px max(8px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(8px,var(--safe-left));border:0;border-top:1px solid var(--line);background:#fff;display:block}
:is(.compact-app,.native-app) .sidebar>.brand,:is(.compact-app,.native-app) .side-label,:is(.compact-app,.native-app) .sidebar-tip,:is(.compact-app,.native-app) .side-bottom{display:none}
:is(.compact-app,.native-app) .sidebar nav{display:flex;justify-content:space-around;max-width:720px;margin:auto}
:is(.compact-app,.native-app) .navitem{position:relative;min-height:54px;min-width:44px;width:20%;margin:0;padding:6px 2px;gap:4px;display:flex;flex-direction:column;border-radius:14px;font-size:11px;font-weight:600;color:var(--muted)}
:is(.compact-app,.native-app) .navitem svg{width:23px;height:23px}:is(.compact-app,.native-app) .navitem.active{background:var(--blush);color:var(--pink-dark)}
:is(.compact-app,.native-app) .nav-long{display:none}:is(.compact-app,.native-app) .nav-short{display:inline}:is(.compact-app,.native-app) .nav-count{position:absolute;top:0;right:calc(50% - 23px);font-size:9px;min-width:16px;height:16px}
:is(.compact-app,.native-app) .main{padding:calc(64px + var(--safe-top)) 0 calc(82px + var(--safe-bottom));min-width:0}
:is(.compact-app,.native-app) .topbar{position:fixed;inset:0 0 auto;z-index:15;height:calc(64px + var(--safe-top));padding:var(--safe-top) max(20px,var(--safe-right)) 0 max(20px,var(--safe-left));background:var(--cream);border-bottom:1px solid var(--line)}
:is(.compact-app,.native-app) .topbar .crumb{display:none}:is(.compact-app,.native-app) .mobile-head{display:flex}:is(.compact-app,.native-app) .topbar .brand{font-size:21px}:is(.compact-app,.native-app) .topbar .brand img{width:32px;height:32px}
:is(.compact-app,.native-app) .top-right{gap:8px}:is(.compact-app,.native-app) .top-right>.pill,:is(.compact-app,.native-app) .top-right>.textbtn{display:none}:is(.compact-app,.native-app) .account-menu{width:44px;height:44px;font-size:14px}
:is(.compact-app,.native-app) .content{max-width:760px;padding:24px 20px 20px;margin:0 auto;animation:page-arrive .16s ease-out}
:is(.compact-app,.native-app) .greeting-row{margin-bottom:22px}:is(.compact-app,.native-app) .greeting-row h1{font-size:34px;line-height:1.12;letter-spacing:-1px}:is(.compact-app,.native-app) .greeting-row p{font-size:15px;line-height:1.65}:is(.compact-app,.native-app) .date-note{display:none}
:is(.compact-app,.native-app) .dashboard-grid,:is(.compact-app,.native-app) .two-cols,:is(.compact-app,.native-app) .settings-grid,:is(.compact-app,.native-app) .fields-grid{grid-template-columns:minmax(0,1fr);gap:18px}
:is(.compact-app,.native-app) .right-column{display:flex;flex-direction:column;gap:16px}:is(.compact-app,.native-app) .right-column .card{margin-top:0}
:is(.compact-app,.native-app) .card{border-radius:20px;padding:22px;box-shadow:none}:is(.compact-app,.native-app) .card p{font-size:14px;line-height:1.7}
:is(.compact-app,.native-app) .welcome-card{padding:26px;border-radius:24px;min-height:0;background:var(--blush)}:is(.compact-app,.native-app) .welcome-card h2{font-size:32px;line-height:1.16}:is(.compact-app,.native-app) .welcome-card p{font-size:15px;line-height:1.7}:is(.compact-app,.native-app) .welcome-card .line-heart{opacity:.12}
:is(.compact-app,.native-app) .btn{min-height:48px;padding:13px 19px;font-size:15px;border-radius:14px}:is(.compact-app,.native-app) .textbtn{min-height:44px;font-size:14px}:is(.compact-app,.native-app) .btn:active{transform:scale(.98)}
:is(.compact-app,.native-app) .field input,:is(.compact-app,.native-app) .field textarea,:is(.compact-app,.native-app) .field select{font-size:16px;min-height:48px;padding:13px;border-radius:12px}:is(.compact-app,.native-app) .field label{font-size:14px}:is(.compact-app,.native-app) .field small{font-size:12px;line-height:1.6}
:is(.compact-app,.native-app) .check-label{font-size:14px;line-height:1.6;gap:12px}:is(.compact-app,.native-app) .check-label input{width:20px;height:20px;flex-shrink:0}
:is(.compact-app,.native-app) .app-footer{display:none}:is(.compact-app,.native-app) .introduction-overview{display:grid;padding:22px 18px}:is(.compact-app,.native-app) .introduction-overview span{font-size:12px}:is(.compact-app,.native-app) .quota-card small{font-size:12px}
:is(.compact-app,.native-app) .introduction-group .match-grid{grid-template-columns:minmax(0,1fr);gap:20px}:is(.compact-app,.native-app) .match-card{padding:0;overflow:hidden}:is(.compact-app,.native-app) .match-card .portrait{height:auto;aspect-ratio:1.3}:is(.compact-app,.native-app) .match-body{padding:22px}:is(.compact-app,.native-app) .match-title h3{font-size:19px}:is(.compact-app,.native-app) .match-body p,:is(.compact-app,.native-app) .match-reason{font-size:14px}:is(.compact-app,.native-app) .introduction-primary{width:100%;justify-content:center}:is(.compact-app,.native-app) .pill{font-size:11px}
:is(.compact-app,.native-app) .profile-card,:is(.compact-app,.native-app) .event-card,:is(.compact-app,.native-app) .chat-card{padding:0;overflow:hidden}
:is(.compact-app,.native-app) .chat-header{padding:18px}:is(.compact-app,.native-app) .chat-thread{min-height:200px;max-height:48dvh;padding:18px}:is(.compact-app,.native-app) .chat-message{font-size:15px;max-width:96%}:is(.compact-app,.native-app) .chat-compose{padding:18px}:is(.compact-app,.native-app) .chat-compose textarea{font-size:16px}:is(.compact-app,.native-app) .suggestions{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 8px}:is(.compact-app,.native-app) .suggestions button{min-height:44px;flex-shrink:0;font-size:12px}:is(.compact-app,.native-app) .compose-bottom small{font-size:11px;max-width:140px}:is(.compact-app,.native-app) .chapter{font-size:14px}
:is(.compact-app,.native-app) .auth-page{display:block;max-width:480px;margin:auto;min-height:100dvh;padding:calc(30px + var(--safe-top)) 24px calc(30px + var(--safe-bottom));background:var(--cream)}
:is(.compact-app,.native-app) .auth-intro{display:flex;align-items:center;min-height:0;background:none;padding:12px 0 28px}:is(.compact-app,.native-app) .auth-intro .brand{font-size:28px}:is(.compact-app,.native-app) .auth-intro .brand img{width:54px;height:54px}:is(.compact-app,.native-app) .auth-intro h1,:is(.compact-app,.native-app) .auth-intro p{display:none}
:is(.compact-app,.native-app) .auth-form{padding:0;display:block}:is(.compact-app,.native-app) .auth-form>div{max-width:none}:is(.compact-app,.native-app) .auth-form h2{font-size:34px;line-height:1.2;margin:14px 0 18px}:is(.compact-app,.native-app) .auth-form p{font-size:14px;line-height:1.7}:is(.compact-app,.native-app) .auth-form .safety-registration{font-size:12px}:is(.compact-app,.native-app) #code{font-size:28px;text-align:center;letter-spacing:.25em;font-variant-numeric:tabular-nums}
:is(.compact-app,.native-app) .onboarding-page{padding:calc(18px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));min-height:100dvh;max-width:720px}:is(.compact-app,.native-app) .onboarding-header{margin-bottom:20px}:is(.compact-app,.native-app) .onboarding-layout{grid-template-columns:1fr;gap:14px}:is(.compact-app,.native-app) .onboarding-intro{padding:0}:is(.compact-app,.native-app) .onboarding-intro>.eyebrow,:is(.compact-app,.native-app) .onboarding-intro>h2,:is(.compact-app,.native-app) .onboarding-intro>p{display:none}:is(.compact-app,.native-app) .onboarding-progress{display:flex;justify-content:space-between;gap:8px;margin:0 0 10px}:is(.compact-app,.native-app) .onboarding-progress li{font-size:12px;gap:6px;margin:0}:is(.compact-app,.native-app) .onboarding-progress li span{width:28px;height:28px}:is(.compact-app,.native-app) .onboarding-panel{padding:24px;box-shadow:none}:is(.compact-app,.native-app) .onboarding-panel h1{font-size:32px}
:is(.compact-app,.native-app) dialog{position:fixed;inset:auto 0 var(--wynn-keyboard-gap,0px);margin:0 auto;width:100%;max-width:720px;max-height:calc(var(--wynn-viewport-height,100dvh) - var(--safe-top) - 16px);padding:28px 22px calc(24px + var(--safe-bottom));border:0;border-radius:24px 24px 0 0;box-shadow:0 -12px 60px #29242a18;animation:sheet-arrive .18s ease-out}
:is(.compact-app,.native-app) dialog p{font-size:15px;line-height:1.65}:is(.compact-app,.native-app) dialog.message-dialog{inset:var(--wynn-viewport-top,0px) 0 auto;height:var(--wynn-viewport-height,100dvh);max-height:none;max-width:760px;padding:calc(18px + var(--safe-top)) 20px max(16px,var(--safe-bottom));border-radius:0;overflow:hidden}
:is(.compact-app,.native-app) .message-dialog .dialog-close{top:calc(8px + var(--safe-top));right:12px}:is(.compact-app,.native-app) .message-screen{height:100%;min-height:0}:is(.compact-app,.native-app) .message-scroll{max-height:none;min-height:0}:is(.compact-app,.native-app) .message-header h2{font-size:20px}:is(.compact-app,.native-app) .message-header p{font-size:12px}:is(.compact-app,.native-app) .message-composer{flex-shrink:0}:is(.compact-app,.native-app) .message-status{font-size:12px}
:is(.compact-app,.native-app) #toast{bottom:calc(92px + var(--safe-bottom));font-size:14px;line-height:1.5;width:max-content;max-width:calc(100% - 32px)}
@keyframes page-arrive{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes sheet-arrive{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:is(.compact-app,.native-app) .btn:not(.secondary){background:var(--pink-dark)}

.pool-status{margin-bottom:16px;border-left:4px solid var(--pink)}.pool-status .pill{white-space:normal}.pool-status p{margin:12px 0}.pool-status details{margin:12px 0}.device-photo-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.device-photo-actions p{flex-basis:100%;margin:4px 0}.device-photo-actions button{min-height:44px}