:root {
  --bg: #ffe9f0;
  --bg2: #ffd6e5;
  --card: #fff8fb;
  --ink: #4a1f35;
  --ink-soft: #8a5470;
  --pink: #ff5c8a;
  --pink-deep: #e03a6e;
  --lilac: #b79cff;
  --butter: #fff0a8;
  --shadow: rgba(224, 58, 110, .22);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2a1020; --bg2: #3a1630; --card: #3d1b33; --ink: #ffe9f2; --ink-soft: #e2a9c4;
    --pink: #ff7aa2; --pink-deep: #ff5c8a; --lilac: #a58bff; --butter: #5a4a1e; --shadow: rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #2a1020; --bg2: #3a1630; --card: #3d1b33; --ink: #ffe9f2; --ink-soft: #e2a9c4;
  --pink: #ff7aa2; --pink-deep: #ff5c8a; --lilac: #a58bff; --butter: #5a4a1e; --shadow: rgba(0, 0, 0, .45);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: "Fredoka", system-ui, sans-serif; color: var(--ink); background: var(--bg);
  background-image: radial-gradient(circle at 15% 10%, var(--bg2) 0, transparent 40%), radial-gradient(circle at 90% 60%, var(--bg2) 0, transparent 45%);
  line-height: 1.5; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
h1, h2 { font-weight: 700; line-height: 1.1; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 12px; }

#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.floater { position: absolute; bottom: -40px; opacity: 0; animation: rise linear infinite; }
@keyframes rise {
  0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
  10% { opacity: .7; } 90% { opacity: .7; }
  100% { transform: translateY(-110vh) rotate(14deg); opacity: 0; }
}

main { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 20px 80px; }
section { padding: 56px 0 8px; }
.section-title { font-size: clamp(1.9rem, 7vw, 2.5rem); text-align: center; }
.section-sub { text-align: center; color: var(--ink-soft); margin: 10px auto 26px; max-width: 34ch; }
.hand { font-family: "Caveat", cursive; font-weight: 700; }

.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 0; }
.sticker { display: inline-block; background: var(--butter); color: var(--ink); padding: 8px 18px; border-radius: 999px; font-size: 1.15rem; transform: rotate(-4deg); box-shadow: 0 6px 0 var(--shadow); margin-bottom: 22px; }
:root[data-theme="dark"] .sticker { color: #ffeaa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticker { color: #ffeaa0; } }
.hero h1 { font-size: clamp(2.8rem, 13vw, 5rem); }
.hero h1 .wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.typed { min-height: 2.8em; margin: 18px auto 30px; font-size: clamp(1.4rem, 5.5vw, 1.9rem); color: var(--pink-deep); max-width: 20ch; }
.cursor { display: inline-block; width: 2px; height: 1em; background: var(--pink-deep); margin-left: 3px; vertical-align: -0.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.btn { border: 0; background: var(--pink); color: #fff; font-weight: 600; font-size: 1.1rem; padding: 14px 28px; border-radius: 999px; box-shadow: 0 6px 0 var(--pink-deep), 0 14px 24px var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-deep), 0 6px 12px var(--shadow); }
.btn.alt { background: var(--lilac); box-shadow: 0 6px 0 #8d6fe6, 0 14px 24px var(--shadow); }
.btn.alt:active { box-shadow: 0 2px 0 #8d6fe6, 0 6px 12px var(--shadow); }
.scroll-hint { margin-top: 34px; font-size: 1.6rem; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }

.panel { background: var(--card); border-radius: 28px; padding: 28px 22px; box-shadow: 0 10px 0 var(--shadow); text-align: center; }
.panel .out { min-height: 4.6em; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 20px; }
.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.85); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.flip { perspective: 800px; border: 0; background: none; padding: 0; aspect-ratio: 1 / 1.05; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.flip.on .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; text-align: center; box-shadow: 0 7px 0 var(--shadow); }
.face.front { background: var(--card); font-size: 2.6rem; gap: 6px; }
.face.front small { font-size: .95rem; color: var(--ink-soft); }
.face.back { transform: rotateY(180deg); background: var(--pink); color: #fff; font-size: 1.02rem; font-weight: 500; line-height: 1.35; }
.flip:nth-child(2n) .face.back { background: var(--lilac); }
.flip:nth-child(3n) .face.back { background: #ff8fb1; }

.meter { height: 26px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 6px 0 18px; border: 3px solid var(--card); box-shadow: inset 0 2px 4px var(--shadow); }
.meter > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pink), var(--lilac)); border-radius: 999px; transition: width 2.4s cubic-bezier(.3, .9, .3, 1); }
.meter-msg { font-size: 1.2rem; min-height: 4.2em; }
.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

.coupons { display: grid; gap: 14px; }
.coupon { position: relative; text-align: left; border: 3px dashed var(--pink); background: var(--card); border-radius: 22px; padding: 16px 18px 16px 70px; transition: transform .15s ease; display: block; width: 100%; }
.coupon:active { transform: scale(.98); }
.coupon .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 2.1rem; }
.coupon b { display: block; font-size: 1.15rem; }
.coupon span { color: var(--ink-soft); font-size: .95rem; }
.coupon .stamp { position: absolute; right: 12px; top: 10px; font-family: "Caveat", cursive; font-weight: 700; font-size: 1.5rem; color: var(--pink-deep); border: 3px solid var(--pink-deep); border-radius: 10px; padding: 0 10px; transform: rotate(-10deg) scale(1.6); opacity: 0; transition: all .25s cubic-bezier(.3, 1.6, .5, 1); }
.coupon.used { border-style: solid; background: var(--butter); }
.coupon.used b { color: #4a3a10; }
.coupon.used .ico + b + span { color: #6b5a25; }
:root[data-theme="dark"] .coupon.used b { color: #ffeaa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coupon.used b { color: #ffeaa0; } }
.coupon.used .stamp { opacity: 1; transform: rotate(-10deg) scale(1); }

.note { background: var(--butter); color: #4a3a10; border-radius: 8px 8px 24px 8px; padding: 26px 24px; transform: rotate(-1.5deg); box-shadow: 0 10px 0 var(--shadow); font-size: 1.9rem; line-height: 1.25; text-align: center; }
:root[data-theme="dark"] .note { color: #ffeaa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note { color: #ffeaa0; } }

.about .qs { display: grid; gap: 18px; text-align: left; margin-bottom: 22px; }
.about label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 1.05rem; }
.about textarea, .about input { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 3px solid var(--bg2); border-radius: 18px; padding: 12px 14px; resize: vertical; min-height: 56px; }
.about input { min-height: 0; }
.about textarea::placeholder, .about input::placeholder { color: var(--ink-soft); opacity: .75; }
.about textarea:focus, .about input:focus { outline: none; border-color: var(--pink); }
.about .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.about .status { margin-top: 18px; font-size: 1.05rem; min-height: 2.4em; }
.about .status textarea { margin-top: 10px; min-height: 120px; font-size: .9rem; }
.finale { text-align: center; padding-bottom: 40px; }
.finale h2 { font-size: clamp(2.1rem, 9.5vw, 3.2rem); }
.arena { position: relative; min-height: 190px; margin-top: 30px; display: flex; justify-content: center; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
#yes { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
#no { background: var(--card); color: var(--ink); box-shadow: 0 6px 0 var(--shadow); transition: left .25s ease, top .25s ease; }
#no.run { position: fixed; z-index: 20; }
.yay { display: none; }
.yay.show { display: block; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.yay .big { font-size: 4rem; }
.yay h2 { margin-top: 6px; }
.yay p { font-size: 1.25rem; margin-top: 12px; }
footer { text-align: center; color: var(--ink-soft); padding: 40px 0 10px; font-size: .95rem; }
.theme-toggle { position: fixed; right: 14px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 30; border: 0; background: var(--card); width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; box-shadow: 0 4px 0 var(--shadow); }
canvas#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .7; cursor: default; }

/* ---------- landing page ---------- */
.site-nav { display: flex; justify-content: space-between; align-items: center; max-width: 760px; margin: 0 auto; padding: 18px 20px; position: relative; z-index: 2; }
.logo { font-weight: 700; font-size: 1.4rem; text-decoration: none; color: var(--ink); }
.logo span { color: var(--pink-deep); }
.nav-link { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.nav-link:hover { color: var(--pink-deep); }
.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }
.lp-hero { text-align: center; padding: 24px 0 6px; }
.lp-hero h1 { font-size: clamp(2.2rem, 8vw, 3.7rem); }
.lp-hero .lead { max-width: 46ch; margin: 16px auto 0; color: var(--ink-soft); font-size: 1.15rem; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.badge { background: var(--butter); color: #4a3a10; border-radius: 999px; padding: 6px 14px; font-size: .95rem; font-weight: 500; }
:root[data-theme="dark"] .badge { color: #ffeaa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge { color: #ffeaa0; } }
.builder { margin-top: 28px; text-align: left; }
.builder h2, .block h2 { font-size: 1.6rem; text-align: center; margin-bottom: 18px; }
.f { margin-bottom: 16px; }
.f label { display: block; font-weight: 600; margin-bottom: 6px; }
.f small { color: var(--ink-soft); font-weight: 400; }
.f input[type="text"], .f input[type="email"], .f select, .f textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 3px solid var(--bg2); border-radius: 18px; padding: 12px 14px; }
.f textarea { resize: vertical; min-height: 70px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--pink); }
.f .check { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.f .check input { width: 22px; height: 22px; accent-color: var(--pink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.fine { font-size: .88rem; color: var(--ink-soft); text-align: center; margin-top: 14px; }
.fine a { color: var(--pink-deep); }
.err { color: var(--pink-deep); font-weight: 600; min-height: 1.5em; text-align: center; margin-top: 10px; }
.result { display: none; text-align: center; }
.result.show { display: block; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.linkbox { background: var(--bg); border: 3px dashed var(--pink); border-radius: 18px; padding: 14px; word-break: break-all; font-weight: 600; margin: 16px 0; }
.share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.btn.small { padding: 10px 18px; font-size: .98rem; box-shadow: 0 4px 0 var(--pink-deep), 0 10px 18px var(--shadow); }
.btn.small.alt { box-shadow: 0 4px 0 #8d6fe6, 0 10px 18px var(--shadow); }
a.btn { text-decoration: none; display: inline-block; }
.block { margin-top: 56px; }
.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.step { background: var(--card); border-radius: 24px; padding: 22px; box-shadow: 0 7px 0 var(--shadow); }
.step .e { font-size: 2.2rem; }
.step h3 { margin: 8px 0 4px; font-size: 1.15rem; }
.step p { color: var(--ink-soft); font-size: .98rem; }
.block > p.sub { text-align: center; color: var(--ink-soft); max-width: 52ch; margin: -6px auto 22px; }
details.faq { background: var(--card); border-radius: 20px; padding: 14px 18px; margin-bottom: 12px; box-shadow: 0 5px 0 var(--shadow); }
details.faq summary { font-weight: 600; cursor: pointer; }
details.faq p { margin-top: 8px; color: var(--ink-soft); }
.legal { max-width: 640px; margin: 0 auto; padding: 0 20px 60px; position: relative; z-index: 1; }
.legal h1 { font-size: 2rem; margin-bottom: 10px; }
.legal h2 { font-size: 1.2rem; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--ink-soft); }
.gone { text-align: center; padding: 120px 20px; }
.gone h1 { font-size: 2.2rem; }
.optout { margin-top: 18px; }
.optout button { background: none; border: 0; color: var(--ink-soft); text-decoration: underline; font-size: .92rem; }

.block { padding-top: 0; }

.f input[type="date"], .f input[type="time"] { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 3px solid var(--bg2); border-radius: 18px; padding: 12px 14px; color-scheme: light dark; }
.f input[type="date"]:focus, .f input[type="time"]:focus { outline: none; border-color: var(--pink); }
.plan { margin-top: 22px; text-align: left; }
.plan .f label { text-align: left; }

/* ---------- plans ---------- */
[hidden] { display: none !important; }
.plan-body main.pl-main { max-width: 640px; margin: 0 auto; padding: 0 16px 130px; position: relative; z-index: 1; }
.pl-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: var(--bg); border-bottom: 3px solid var(--bg2); }
.pl-back { text-decoration: none; font-size: 1.6rem; }
.pl-title { flex: 1; min-width: 0; }
.pl-title h1 { font-size: 1.2rem; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sync { font-size: .78rem; color: var(--ink-soft); }
.pl-sync::before { content: "●"; color: #2fbf71; margin-right: 5px; }
.pl-sync.off::before { color: var(--pink-deep); }
.pl-icon { border: 0; background: var(--card); width: 40px; height: 40px; border-radius: 50%; font-size: 1.15rem; box-shadow: 0 3px 0 var(--shadow); }
.pl-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: space-around; gap: 2px; background: var(--card); padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px); box-shadow: 0 -4px 0 var(--shadow); }
.pl-nav button { flex: 1; border: 0; background: none; padding: 6px 2px; border-radius: 14px; font-size: .72rem; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.pl-nav button .ic { font-size: 1.35rem; }
.pl-nav button.on { color: var(--pink-deep); font-weight: 600; background: var(--bg); }
.pl-nav .dot { position: absolute; top: 0; right: 18%; background: var(--pink-deep); color: #fff; border-radius: 999px; font-size: .65rem; min-width: 17px; padding: 0 5px; line-height: 17px; }
.pl-card { background: var(--card); border-radius: 24px; padding: 18px; margin-top: 16px; box-shadow: 0 6px 0 var(--shadow); }
.pl-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.pl-sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 10px; }
.pl-lab { font-weight: 600; margin: 14px 0 6px; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 3px solid var(--bg2); background: var(--bg); border-radius: 999px; padding: 7px 14px; font-size: .95rem; }
.chip.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.pl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-seg button { border: 3px solid var(--bg2); background: var(--bg); border-radius: 18px; padding: 12px 8px; font-size: .95rem; }
.pl-seg button.on { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 600; }
.pl-people { display: flex; flex-wrap: wrap; gap: 8px; }
.pp { display: flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: .92rem; }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.pl-inline { display: flex; gap: 8px; align-items: center; }
.pl-inline input { flex: 1; min-width: 0; }
.pl-card input[type="text"], .pl-card input[type="date"], .pl-card input[type="time"] { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 3px solid var(--bg2); border-radius: 18px; padding: 10px 14px; color-scheme: light dark; }
.pl-card input:focus { outline: none; border-color: var(--pink); }
.pl-big { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.pl-when { font-weight: 600; font-size: 1.05rem; }
.pl-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--bg); border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.pl-steps { margin: 4px 0 14px 20px; color: var(--ink-soft); display: grid; gap: 6px; }
.pl-item { background: var(--bg); border-radius: 18px; padding: 14px; margin-top: 10px; }
.pl-item.best { outline: 3px solid var(--pink); }
.pl-item.past { opacity: .6; }
.pl-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pl-item .when { font-weight: 600; font-size: 1.05rem; }
.pl-tags { display: flex; gap: 6px; align-items: center; flex: none; }
.tag { font-size: .74rem; background: var(--butter); color: #4a3a10; border-radius: 999px; padding: 3px 10px; font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .tag { color: #ffeaa0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag { color: #ffeaa0; } }
.votes { display: flex; gap: 6px; margin-top: 10px; }
.vb { flex: 1; border: 3px solid var(--bg2); background: var(--card); border-radius: 14px; padding: 8px 4px; font-size: .88rem; }
.vb.on.yes { background: #bff0d8; border-color: #7fd8ab; color: #134d33; }
.vb.on.maybe { background: #fff0a8; border-color: #f0d95c; color: #4a3a10; }
.vb.on.no, .vb.on.pass { background: #ffd0da; border-color: #ff8fa8; color: #6b1630; }
.vb.on.love { background: var(--pink); border-color: var(--pink); color: #fff; }
.vb.on.fine { background: #d9ccff; border-color: #b79cff; color: #2b1a66; }
.who { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
.pl-del { background: none; border: 0; color: var(--ink-soft); font-size: 1.05rem; padding: 2px 6px; }
.pl-link { background: none; border: 0; color: var(--pink-deep); text-decoration: underline; font-size: .92rem; padding: 6px 0 0; }
.pl-link.danger { color: var(--pink-deep); }
.pl-task { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--bg2); }
.pl-task:last-child { border-bottom: 0; }
.pl-task .txt { flex: 1; }
.pl-task.done .txt > div:first-child { text-decoration: line-through; opacity: .6; }
.chk { width: 30px; height: 30px; border-radius: 10px; border: 3px solid var(--pink); background: var(--bg); color: #fff; font-weight: 700; flex: none; }
.pl-task.done .chk { background: var(--pink); }
.pl-chat { max-height: 52vh; overflow-y: auto; display: grid; gap: 8px; padding: 4px 2px; }
.pl-msg { display: flex; }
.pl-msg.mine { justify-content: flex-end; }
.pl-msg .bub { max-width: 82%; background: var(--bg); border-radius: 18px 18px 18px 6px; padding: 8px 12px; word-break: break-word; }
.pl-msg.mine .bub { background: var(--pink); color: #fff; border-radius: 18px 18px 6px 18px; }
.pl-msg.mine .who { color: rgba(255, 255, 255, .8); }
.pl-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: .92rem; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 40; max-width: 90vw; text-align: center; }
.pl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* landing tabs + my plans */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; background: var(--bg); padding: 6px; border-radius: 999px; }
.tabs button { border: 0; background: none; border-radius: 999px; padding: 12px 8px; font-weight: 600; color: var(--ink-soft); }
.tabs button[aria-selected="true"] { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-deep); }
.myplans { display: grid; gap: 8px; margin-bottom: 18px; }
.myplans a { display: flex; justify-content: space-between; gap: 10px; background: var(--bg); border-radius: 16px; padding: 12px 14px; text-decoration: none; color: var(--ink); font-weight: 600; }
.myplans a span { color: var(--ink-soft); font-weight: 400; font-size: .85rem; }