/* ☰ in the feed header */
.reels-menu{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#0005;color:#fff;cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px)}
.reels-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Menu: a sheet from the right */
.app-menu{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);height:100dvh;max-height:none;margin:0;padding:calc(16px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));border:0;background:var(--surface);color:var(--text);box-shadow:-12px 0 40px #0007}
.app-menu[open]{display:flex;flex-direction:column;animation:menu-in .25s ease-out}
@keyframes menu-in{from{transform:translateX(100%)}}
.app-menu::backdrop{background:#0009}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 14px;border-bottom:1px solid var(--line)}
.menu-me{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.menu-me img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.menu-me strong{display:block}.menu-me small{color:var(--muted)}
.menu-brand{font-weight:800;font-size:1.2rem}
.menu-close{border:0;background:none;color:inherit;font-size:28px;cursor:pointer}
.menu-list{flex:1;overflow:auto;padding:8px 0}
.menu-list>a,.menu-list>button,.menu-row{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 20px;border:0;background:none;color:inherit;font:inherit;font-size:1rem;text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.menu-list>a:hover,.menu-list>button:hover{background:var(--surface2)}
.menu-list span{width:26px;text-align:center;font-size:1.15rem}
.menu-row .theme-toggle{margin-left:auto}
.menu-foot{display:grid;gap:8px;padding:12px 16px 0;border-top:1px solid var(--line)}
.menu-foot .button{margin:0;border-radius:24px}
.menu-logout{width:100%;min-height:46px;border:1px solid var(--line);border-radius:23px;background:none;color:#ff5470;font:inherit;font-weight:600;cursor:pointer}
/* How it works: a dark layer over the feed with a little animated phone */
.coach{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#000c;color:#fff;text-align:center;animation:coach-in .25s}
.coach[hidden]{display:none}
@keyframes coach-in{from{opacity:0}}
.coach-art{position:relative;width:150px;height:220px;margin-bottom:18px}
.coach-phone{position:absolute;inset:0;border:3px solid #fff;border-radius:26px;overflow:hidden}
.coach-card{position:absolute;inset:8px;border-radius:18px;background:linear-gradient(160deg,#4f9bff,#8b5cf6)}
.coach-card.next{background:linear-gradient(160deg,#ff7a45,#ff3b5c);transform:translateY(105%)}
.coach-hand{position:absolute;left:58%;top:62%;font-size:44px;filter:drop-shadow(0 4px 8px #0008)}
.coach-heart{position:absolute;left:50%;top:44%;font-size:64px;color:#ff3b5c;opacity:0;transform:translate(-50%,-50%) scale(.4)}
.coach[data-tip=swipe] .coach-hand{animation:hand-swipe 1.6s ease-in-out infinite}
.coach[data-tip=swipe] .coach-card{animation:card-out 1.6s ease-in-out infinite}
.coach[data-tip=swipe] .coach-card.next{animation:card-in 1.6s ease-in-out infinite}
@keyframes hand-swipe{0%,15%{transform:translateY(30px);opacity:0}25%{opacity:1}70%{transform:translateY(-90px);opacity:1}85%,100%{transform:translateY(-90px);opacity:0}}
@keyframes card-out{0%,30%{transform:none}70%,100%{transform:translateY(-105%)}}
@keyframes card-in{0%,30%{transform:translateY(105%)}70%,100%{transform:none}}
.coach[data-tip=like] .coach-hand{animation:hand-tap 1.4s ease-in-out infinite}
.coach[data-tip=like] .coach-heart{animation:heart-pop 1.4s ease-out infinite}
@keyframes hand-tap{0%,100%{transform:none}20%,40%{transform:scale(.85)}30%{transform:none}}
@keyframes heart-pop{0%,35%{opacity:0;transform:translate(-50%,-50%) scale(.4)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}80%,100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.coach[data-tip=profile] .coach-hand{left:18%;top:72%;animation:hand-tap 1.4s ease-in-out infinite}
.coach[data-tip=profile] .coach-card::after{content:"Amara, 23";position:absolute;left:10px;bottom:12px;font-weight:800;font-size:15px}
.coach[data-tip=match] .coach-hand{display:none}
.coach[data-tip=match] .coach-heart{opacity:1;transform:translate(-50%,-50%) scale(1);animation:heart-beat 1s ease-in-out infinite}
@keyframes heart-beat{50%{transform:translate(-50%,-50%) scale(1.15)}}
.coach-text{margin:0;font-size:1.6rem;font-weight:800}
.coach-sub{margin:0;max-width:30ch;color:#ffffffcc;line-height:1.45}
.coach-dots{display:flex;gap:6px;margin:12px 0 6px}.coach-dots span{width:7px;height:7px;border-radius:50%;background:#ffffff59;transition:.2s}.coach-dots span.on{width:20px;border-radius:4px;background:#fff}
.coach-next{min-width:160px;min-height:50px;border:0;border-radius:25px;background:#fff;color:#0b2a6b;font-weight:800;font-size:1rem;cursor:pointer}
@media(prefers-reduced-motion:reduce){.coach *{animation:none!important}.coach[data-tip=like] .coach-heart,.coach[data-tip=match] .coach-heart{opacity:1;transform:translate(-50%,-50%)}}