/* Layout: a phone-sized app column with a bottom tab bar; two partner colours, one alarm colour reserved for «Стоп» */
/* Дизайн «Обрій»: штора-фон (Kokonut DrapeBackground), стеклянные карточки, плавающая навигация. Разметка и логика не менялись. */
:root{
  --shade:#B9CFDA; --bg:#B9CFDA; --app:rgba(255,255,255,.55); --surface:rgba(255,255,255,.78); --solid:#FFFFFF;
  --ink:#1E3A4C; --muted:#3F5766; --line:rgba(30,58,76,.16); --glass-line:rgba(255,255,255,.9);
  --you:#1E3A4C; --you-soft:rgba(30,58,76,.09); --them:#B8693F; --them-soft:rgba(233,184,143,.35);
  --stop:#B93A28; --stop-soft:rgba(185,58,40,.12); --good:#2F7D55; --on-accent:#FFFFFF;
  --nav:rgba(255,255,255,.85); --shadow:0 14px 34px -22px rgba(10,30,45,.55);
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --shade:#050C12; --bg:#050C12; --app:rgba(11,27,40,.45); --surface:rgba(11,27,40,.72); --solid:#0B1B28;
  --ink:#E6F0F5; --muted:#B4C8D4; --line:rgba(255,255,255,.14); --glass-line:rgba(255,255,255,.10);
  --you:#F0C08F; --you-soft:rgba(240,192,143,.16); --them:#8FB8D0; --them-soft:rgba(143,184,208,.18);
  --stop:#F28B79; --stop-soft:rgba(242,139,121,.16); --good:#6FCB9A; --on-accent:#0B1B28;
  --nav:rgba(11,27,40,.85); --shadow:0 14px 34px -22px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --shade:#050C12; --bg:#050C12; --app:rgba(11,27,40,.45); --surface:rgba(11,27,40,.72); --solid:#0B1B28;
  --ink:#E6F0F5; --muted:#B4C8D4; --line:rgba(255,255,255,.14); --glass-line:rgba(255,255,255,.10);
  --you:#F0C08F; --you-soft:rgba(240,192,143,.16); --them:#8FB8D0; --them-soft:rgba(143,184,208,.18);
  --stop:#F28B79; --stop-soft:rgba(242,139,121,.16); --good:#6FCB9A; --on-accent:#0B1B28;
  --nav:rgba(11,27,40,.85); --shadow:0 14px 34px -22px rgba(0,0,0,.8); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px}
.phone{max-width:420px;margin:0 auto;background:var(--app);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;min-height:760px}
@media (max-width:480px){body{padding-left:0;padding-right:0;padding-block:0}.phone{border:none;border-radius:0;min-height:100vh}}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 10px}
.brand{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.couple{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted)}
.dots{display:flex}.dots i{width:12px;height:12px;border-radius:50%;display:block}
.dots i:first-child{background:var(--you)}.dots i:last-child{background:var(--them);margin-left:-5px}
main{flex:1;padding:12px 20px 24px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--display);font-size:1.35rem;line-height:1.2}
h2{font-size:1.05rem}
p{margin:0}
.muted{color:var(--muted)}.small{font-size:.92rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.label{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
button{font:inherit;cursor:pointer;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 16px;font-weight:600}
button.primary{background:var(--you);border-color:var(--you);color:var(--on-accent)}
button.ghost{border:none;background:none;padding:0;color:var(--you);text-decoration:underline;text-underline-offset:3px}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--you);outline-offset:2px}
textarea,input[type=text]{font:inherit;width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--app);color:var(--ink);resize:vertical}
textarea{min-height:76px}
.streak{display:flex;gap:6px}
.streak span{flex:1;height:30px;border-radius:8px;background:var(--line);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.streak span.on{background:var(--you-soft);color:var(--you)}
.streak span.today{outline:2px solid var(--you)}
.answer{border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.answer.y{background:var(--you-soft)}.answer.t{background:var(--them-soft)}
.answer b{font-size:.8rem}
.answer.y b{color:var(--you)}.answer.t b{color:var(--them)}
.locked{filter:blur(4px);user-select:none}
.prog{height:6px;background:var(--line);border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;background:var(--you)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.done{color:var(--good);font-weight:700}
/* stop */
.stopbig{background:var(--stop);border-color:var(--stop);color:var(--on-accent);font-family:var(--display);font-size:1.3rem;padding:22px;border-radius:20px}
.notice{background:var(--stop-soft);border-radius:16px;padding:14px 16px;display:grid;gap:6px}
.timer{font-family:var(--display);font-size:2.6rem;text-align:center;font-variant-numeric:tabular-nums}
.breath{width:150px;height:150px;margin:6px auto;border-radius:50%;background:var(--you-soft);display:grid;place-items:center;font-weight:700;color:var(--you);animation:breathe 14s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.7)}28%{transform:scale(1)}57%{transform:scale(1)}100%{transform:scale(.7)}}
@media (prefers-reduced-motion: reduce){.breath{animation:none}}
/* say */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:7px 12px;border-radius:999px;font-size:.88rem}
.chips button.on{background:var(--you);border-color:var(--you);color:var(--on-accent)}
.was{text-decoration:line-through;color:var(--muted)}
.now{font-size:1.05rem;font-weight:600;background:var(--you-soft);border-radius:14px;padding:12px 14px}
/* us */
.dim{display:grid;gap:4px}
.bar{display:grid;grid-template-columns:1fr 30px;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.track{height:8px;background:var(--line);border-radius:4px;overflow:hidden}.track i{display:block;height:100%;border-radius:4px}
.track.y i{background:var(--you)}.track.t i{background:var(--them)}
.trend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;height:110px}
.trend div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;height:100%;justify-content:flex-end}
.trend i{width:100%;max-width:56px;border-radius:8px 8px 4px 4px;background:var(--you)}
.tag{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--them-soft);color:var(--them);white-space:nowrap}
.tag.go{background:var(--you-soft);color:var(--you)}
nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
nav button{border:none;background:none;padding:6px 2px;border-radius:10px;font-size:.8rem;min-height:52px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
nav button svg{width:22px;height:22px}
nav button.on{color:var(--you)}
nav button.stop{color:var(--stop)}
nav button.stop.on{color:var(--stop)}
/* couple test */
.cta{background:var(--you);color:var(--on-accent);border-radius:18px;padding:16px;display:grid;gap:8px}
.cta .label{color:inherit;opacity:.8}
.cta h2{font-family:var(--display);font-size:1.1rem;line-height:1.25}
.cta p{font-size:.88rem;opacity:.92}
.cta button{background:var(--on-accent);color:var(--you);border:none;justify-self:start}
.opts{display:grid;gap:8px}
.opts button{text-align:left;font-weight:500}
.qprog{display:flex;gap:4px}.qprog i{flex:1;height:5px;border-radius:3px;background:var(--line)}.qprog i.on{background:var(--you)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp .answer{font-size:.85rem}
.lvl{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.lvlnum{width:56px;height:56px;border-radius:50%;background:var(--you);color:var(--on-accent);display:grid;place-items:center;font-family:var(--display);font-size:1.4rem}
.medals{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medal{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:4px;background:var(--app)}
.medal .ico{font-size:1.6rem;line-height:1}
.medal b{font-size:.86rem;line-height:1.25}
.medal span{font-size:.74rem;color:var(--muted);line-height:1.3}
.medal.got{background:var(--you-soft);border-color:transparent}
.medal:not(.got) .ico{filter:grayscale(1);opacity:.45}
.medal .prog{height:4px;margin-top:2px}
.match,.miss{font-size:.72rem;font-weight:700;white-space:nowrap}.match{color:var(--good)}.miss{color:var(--them)}
/* real app additions */
.phone{position:relative}
header .right{display:flex;align-items:center;gap:10px}
.iconbtn{border:none;background:none;padding:6px;border-radius:10px;color:var(--muted);display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px}
.toast{position:fixed;max-width:396px;margin:0 auto;left:12px;right:12px;top:12px;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:.88rem}
.toast[hidden]{display:none}
.toast.err{border-left:4px solid var(--stop)}
.paybtn{background:#000;color:#fff;border-color:#000;font-size:1rem;padding:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .paybtn{background:#fff;color:#000;border-color:#fff}}
:root[data-theme="dark"] .paybtn{background:#fff;color:#000;border-color:#fff}
.ticks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ticks li::before{content:"✓ ";color:var(--good);font-weight:700}
.price{font-family:var(--display);font-size:1.8rem}
.linkbox{display:flex;gap:8px;align-items:center}
.linkbox input{flex:1;min-width:0;font-size:.82rem}
.back{justify-self:start;align-self:flex-start}
.center{text-align:center}
.onb{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px 24px}
.onb h1{font-size:1.6rem}
.hero{font-family:var(--display);font-size:2rem;line-height:1.1}
.days{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.days i{height:8px;border-radius:3px;background:var(--line)}
.days i.on{background:var(--you)}
.banner{background:var(--stop-soft);border-radius:16px;padding:14px 16px;display:grid;gap:8px}
.banner .label{color:var(--stop)}
.help{background:var(--stop-soft);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.help a{color:var(--ink);font-weight:700}
.spinner{margin:auto;color:var(--muted)}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
a{color:var(--you)}
button:disabled{opacity:.5;cursor:default}
.empty{color:var(--muted);font-size:.88rem}
.view{flex:1;display:flex;flex-direction:column}
nav{position:sticky;bottom:0;z-index:5}

/* ---- Обрій: поверх базовых стилей ---- */
html{background:var(--shade)}
body{background:transparent}
#drape{position:fixed;inset:0;z-index:0;overflow:hidden}
.phone{position:relative;z-index:1;background:transparent;border:none;border-radius:0;box-shadow:none;min-height:100vh}
@media (min-width:481px){body{padding-block:0}.phone{max-width:420px}}
.brand{font-weight:600;font-size:1.7rem;letter-spacing:0}
h1{font-weight:500;font-size:2.25rem;line-height:1.02}
h2{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.1}
.onb h1{font-size:2.6rem}
.hero{font-weight:500;font-size:2.8rem;line-height:1}
.timer{font-weight:500;font-size:4rem}
.price{font-weight:600;font-size:2.4rem}
.lvlnum{font-weight:600;font-size:1.9rem}
.stopbig{font-weight:600;font-size:1.9rem}
.cta h2{font-size:1.6rem}
.card,.notice,.banner,.help,.cta,.toast{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card{background:var(--surface);border:1px solid var(--glass-line);border-radius:28px;padding:20px;box-shadow:var(--shadow)}
.notice{background:var(--surface);border:1px solid var(--glass-line);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.banner{background:var(--stop-soft);border:1px solid var(--glass-line);border-radius:24px}
.help{border-radius:20px}
.cta{border-radius:28px;padding:20px;box-shadow:var(--shadow)}
.answer,.now,.medal{border-radius:20px}
.medal{background:var(--surface);border-color:var(--glass-line)}
.medal.got{background:var(--you-soft)}
button{border-radius:999px;border:1.5px solid var(--line);background:transparent;padding:11px 22px}
button.primary{background:var(--you);border-color:var(--you);color:var(--on-accent)}
button.ghost{border:none;background:none;padding:0;border-radius:0}
.cta button{background:var(--on-accent);color:var(--you)}
.chips button{padding:7px 16px}
.opts button{border-radius:20px;text-align:left;background:var(--surface)}
textarea,input[type=text]{border-radius:20px;background:var(--surface);border-color:var(--glass-line)}
.stopbig{border-radius:28px}
.breath{background:var(--you-soft)}
.paybtn{border-radius:999px}
.toast{background:var(--surface);border-radius:20px}
.track,.prog{background:var(--line)}
header{padding:24px 22px 8px}
main{padding:10px 22px 120px}
.onb{padding:28px 26px 120px}
/* плавающая навигация-таблетка */
nav{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:388px;margin:0 auto;z-index:10;
  border:1px solid var(--glass-line);border-radius:999px;background:var(--nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:5px;box-shadow:var(--shadow)}
nav[hidden]{display:none}
nav button{border-radius:999px;padding:7px 2px;font-size:.7rem}
nav button.on{background:var(--you-soft);color:var(--ink)}
nav button.stop,nav button.stop.on{color:var(--stop)}
/* узкие экраны (iPhone SE и 320-360 px) */
.brand{flex-shrink:0}
.couple{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.6}
.couple .dots{display:inline-flex;margin-right:8px;vertical-align:-1px}
header .right{min-width:0}
header{gap:8px}
@media (max-width:360px){
  .brand{font-size:1.45rem}
  h1{font-size:2rem}.onb h1{font-size:2.2rem}.hero{font-size:2.3rem}
  header{padding-inline:16px}main{padding-inline:16px}
  nav{left:10px;right:10px}nav button{font-size:.64rem;padding-inline:0}
}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-xl:36rem;--text-base:1rem;--text-base--line-height: 1.5 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-semibold:600;--tracking-tight:-.025em;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.\!absolute{position:absolute!important}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.\!inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}.inset-0{top:0;right:0;bottom:0;left:0}.flex{display:flex}.hidden{display:none}.h-full{height:100%}.\!min-h-0{min-height:0!important}.min-h-\[560px\]{min-height:560px}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.touch-pan-y{--tw-pan-y:pan-y;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.flex-col{flex-direction:column}.\!items-stretch{align-items:stretch!important}.items-center{align-items:center}.\!justify-start{justify-content:flex-start!important}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-hidden{overflow:hidden}.\!bg-transparent{background-color:#0000!important}.bg-zinc-100{background-color:var(--color-zinc-100)}.px-6{padding-inline:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-white{color:var(--color-white)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-900{color:var(--color-zinc-900)}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.data-\[grabbing\]\:cursor-grabbing[data-grabbing]{cursor:grabbing}@media (min-width:40rem){.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}.dark\:bg-zinc-950:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-zinc-950)}.dark\:text-black:where([data-theme=dark],[data-theme=dark] *){color:var(--color-black)}.dark\:text-zinc-100:where([data-theme=dark],[data-theme=dark] *){color:var(--color-zinc-100)}.dark\:text-zinc-400:where([data-theme=dark],[data-theme=dark] *){color:var(--color-zinc-400)}.dark\:text-zinc-800:where([data-theme=dark],[data-theme=dark] *){color:var(--color-zinc-800)}.\[\&\>span\:first-of-type\]\:\!text-\[\#F6F9FB\]>span:first-of-type{color:#f6f9fb!important}.dark\:\[\&\>span\:first-of-type\]\:\!text-\[\#1E3E56\]:where([data-theme=dark],[data-theme=dark] *)>span:first-of-type{color:#1e3e56!important}.\[\&\>span\:nth-of-type\(2\)\]\:\!text-\[\#B9CFDA\]>span:nth-of-type(2){color:#b9cfda!important}.dark\:\[\&\>span\:nth-of-type\(2\)\]\:\!text-\[\#050C12\]:where([data-theme=dark],[data-theme=dark] *)>span:nth-of-type(2){color:#050c12!important}}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

body{padding-inline:16px!important}.phone{max-width:420px}
.cta .btns{display:flex;flex-wrap:wrap;gap:8px}.cta button.alt{background:transparent;color:inherit;border:1.5px solid currentColor}.both{display:grid;gap:6px}.both .prog{height:8px;border-radius:4px}
.who{display:grid;grid-template-columns:1fr 1fr;gap:8px}.who span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:var(--you-soft);font-weight:600;font-size:.9rem;color:var(--muted)}.who span i{grid-row:1/3;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85rem}.who span small{font-size:.72rem;font-weight:500;color:var(--muted)}.who span.on{color:var(--ink)}.who span.on i{background:var(--you);border-color:var(--you);color:var(--on-accent)}.both{margin-top:2px}
.medalrow{display:grid;grid-template-columns:1fr;gap:14px;margin-top:2px}.medalrow>div{display:grid;gap:4px}.mico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--you-soft);font-size:1.6rem}
.who span:nth-child(2){background:var(--them-soft)}.who span:nth-child(2).on i{background:var(--them);border-color:var(--them)}
.prog.goal{overflow:visible;position:relative;height:8px;margin-right:34px}
.prog.goal i{position:relative;overflow:visible}
.prog.goal i::before,.prog.goal i::after{content:"";position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--solid);transform:translateY(-50%)}
.prog.goal i::before{right:-4px;background:var(--them)}.prog.goal i::after{right:-16px;background:var(--you)}
.prog.goal.zero i::before,.prog.goal.zero i::after,.prog.goal.done i::before,.prog.goal.done i::after{display:none}
.prog.goal::after{content:"";position:absolute;right:-34px;top:50%;width:26px;height:26px;transform:translateY(-50%);background-color:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7.5-4.6-9.6-9.2C.9%208.4%202.6%205%206%205c2.1%200%203.5%201.2%204.3%202.4h.01C11.1%206.2%2012.5%205%2014.6%205c3.4%200%205.1%203.4%203.6%206.8C16%2016.4%2012%2021%2012%2021z%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%281.2%200%29%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7.5-4.6-9.6-9.2C.9%208.4%202.6%205%206%205c2.1%200%203.5%201.2%204.3%202.4h.01C11.1%206.2%2012.5%205%2014.6%205c3.4%200%205.1%203.4%203.6%206.8C16%2016.4%2012%2021%2012%2021z%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%281.2%200%29%27/%3E%3C/svg%3E") center/contain no-repeat}
.prog.goal.done::after{background-color:#E26D6D;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7.5-4.6-9.6-9.2C.9%208.4%202.6%205%206%205c2.1%200%203.5%201.2%204.3%202.4h.01C11.1%206.2%2012.5%205%2014.6%205c3.4%200%205.1%203.4%203.6%206.8C16%2016.4%2012%2021%2012%2021z%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%281.2%200%29%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7.5-4.6-9.6-9.2C.9%208.4%202.6%205%206%205c2.1%200%203.5%201.2%204.3%202.4h.01C11.1%206.2%2012.5%205%2014.6%205c3.4%200%205.1%203.4%203.6%206.8C16%2016.4%2012%2021%2012%2021z%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%281.2%200%29%27/%3E%3C/svg%3E") center/contain no-repeat}
.prog.goal i.slide{animation:barslide 1.1s cubic-bezier(.22,.8,.3,1) both}
@keyframes barslide{from{width:var(--from)}}
@media (prefers-reduced-motion: reduce){.prog.goal i.slide{animation:none}}
header{position:relative}
.couple{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--muted);padding:6px 8px;border-radius:999px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;max-width:100%}
.couple[aria-expanded="true"]{background:var(--you-soft);color:var(--ink)}
.couple .chev{width:16px;height:16px;flex:none;transition:transform .2s}.couple[aria-expanded="true"] .chev{transform:rotate(180deg)}
.scrim{position:fixed;inset:0;z-index:14}
.pop{position:absolute;z-index:15;left:16px;right:16px;top:calc(100% - 4px);max-width:388px;margin-left:auto;display:grid;gap:12px;padding:16px;border-radius:24px;border:1px solid var(--glass-line);background:var(--solid);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.popcur{display:grid;gap:6px}.popcur>b{font-family:var(--display);font-size:1.4rem;font-weight:600}
.poprow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;padding-top:10px;border-top:1px solid var(--line)}
.poprow small{display:block;font-weight:500;font-size:.75rem}
.pop .ghost{justify-self:start}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border-radius:999px;padding:8px 14px;font-size:.85rem}
.chip.on{background:var(--you-soft);color:var(--ink);border-color:var(--you)}
.couple{min-height:44px}.iconbtn{min-width:44px;min-height:44px}
.couple.attn::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--you);margin:-26px 0 0 120px;box-shadow:0 0 0 0 var(--you);animation:attn 1.8s infinite}
@keyframes attn{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.couple.attn::after{animation:none}}
nav button{font-size:.75rem!important}.label{font-size:.75rem}
:root[data-theme="dark"] nav{background:rgba(10,18,24,.92)!important}
:root[data-theme="dark"] textarea::placeholder{color:#9fb3c0;opacity:1}
.opts{display:grid;gap:8px}.opts button{text-align:left;padding:12px 16px;border-radius:16px}
.handoff{text-align:center}
.back{justify-self:start}
/* стартовые экраны, тёмная тема: ярче и крупнее текст */
:root[data-theme="dark"] .onb .muted{color:#DCE8EF;font-size:1.08rem;line-height:1.5}
:root[data-theme="dark"] .onb .small{color:#C4D5DF;font-size:.9rem;line-height:1.5}
:root[data-theme="dark"] .onb label{color:#E6F0F5;font-size:.95rem;font-weight:600}
:root[data-theme="dark"] .onb input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;font-size:1.05rem;min-height:52px}
:root[data-theme="dark"] .onb input::placeholder{color:#A9BDCA;opacity:1}
:root[data-theme="dark"] .onb .hero{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
:root[data-theme="dark"] .onb .brand{color:#fff}
:root[data-theme="dark"] .onb .ghost{color:#F2C894;font-size:1rem}
:root[data-theme="dark"] .dotsrow i{background:rgba(255,255,255,.28)}
:root[data-theme="dark"] .dotsrow i.on{background:var(--you)}
.medal .prog.goal{margin-right:0}.medal .prog.goal::after{display:none}
.dotsrow{display:flex;gap:6px}.dotsrow i{width:22px;height:4px;border-radius:2px;background:var(--line)}.dotsrow i.on{background:var(--you)}
.hint{position:absolute;right:16px;top:calc(100% + 2px);z-index:13;background:var(--you);color:var(--on-accent);padding:8px 12px;border-radius:14px;font-size:.8rem;font-weight:600;max-width:220px;cursor:pointer}
.card.main{border-color:var(--you)}
.talkcard h2{font-size:1.5rem}
.talkcard .row{gap:8px}
#themeBtn{display:none!important;position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));z-index:30;width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--glass-line);background:var(--surface);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow);cursor:pointer}
#themeBtn svg{width:20px;height:20px}

/* language switch (flags) */
.lang{display:inline-flex;align-items:center;gap:2px}
.lang .flag{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:2px solid transparent;background:none;display:grid;place-items:center;cursor:pointer;opacity:.55;box-shadow:none}
.lang .flag svg{width:24px;height:24px;display:block}
.lang .flag.on{opacity:1;border-color:var(--ink)}
.lang .flag:hover,.lang .flag:focus-visible{opacity:1}
.topline{display:flex;justify-content:space-between;align-items:center;gap:8px}
@media(max-width:380px){.lang .flag{width:32px;height:32px;min-height:32px}.lang .flag svg{width:22px;height:22px}}

/* invitation panel */
.bubble{margin:10px 0 4px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:var(--you-soft);font-size:.92rem;line-height:1.45}
.bubble b{display:block;color:var(--you);word-break:break-all;font-weight:600;margin-top:6px;font-size:.85rem}
.msgr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ibtn{display:flex;white-space:nowrap;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer}
.ibtn svg{width:26px;height:26px;flex:none}
.ibtn:hover,.ibtn:focus-visible{border-color:var(--you)}
.qrbox{margin:14px auto 4px;text-align:center}
.qrbox[hidden]{display:none}
.qrbox svg{display:block;width:172px;height:172px;margin:0 auto 8px;padding:14px;border-radius:18px;background:#fff;box-sizing:content-box}

/* confirmation sheet */
.dlg{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.dlgscrim{position:absolute;inset:0;background:rgba(5,12,18,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.dlgcard{position:relative;width:100%;max-width:430px;margin:0 12px max(12px,env(safe-area-inset-bottom,0px));padding:20px 18px 16px;border-radius:24px;background:var(--solid,var(--surface));border:1px solid var(--glass-line);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.4);animation:dlgup .18s ease-out}
.dlgcard p{margin:0 0 16px;font-size:1rem;line-height:1.5}
.dlgbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlgbtns button{min-height:46px;border-radius:999px}
@keyframes dlgup{from{transform:translateY(16px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dlgcard{animation:none}}
@media (min-width:640px){.dlg{align-items:center}.dlgcard{margin:0 12px}}
.plans{display:grid;gap:8px}
.plan{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:62px;padding:12px 16px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.plan span{display:grid;gap:2px}
.plan small{font-size:.78rem;font-weight:400;color:var(--muted)}
.plan .pr{text-align:right;font-weight:700;white-space:nowrap}
.plan.on{border-color:var(--you);box-shadow:inset 0 0 0 1px var(--you)}
.banner.trial{background:var(--surface)}
.banner.trial .label{color:var(--you)}
.giftrow{display:grid;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.giftrow:first-of-type{border-top:0}
.giftrow>div:first-child{display:grid;gap:2px}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1rem;letter-spacing:.08em}
.sheet{position:relative;width:min(100%,430px);max-height:92vh;overflow:auto;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:var(--solid,var(--surface));border:1px solid var(--glass-line);border-bottom:0;color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:dlgup .2s ease-out}
.sheet .grab{display:block;width:44px;height:20px;margin:0 auto 6px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.sheet .grab::after{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:4px;background:var(--muted);opacity:.5}
.sheet h2{margin:0 0 4px}
.sheet>p{margin:0 0 8px}
.srow{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 4px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--ink);font:inherit;font-size:1rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.srow svg{width:34px;height:34px;flex:none}
.srow small{display:block;margin-top:2px;font-weight:400;color:var(--muted);font-size:.78rem;word-break:break-all}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.tagbtn{border:0;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;min-height:0}
.tagbtn::after{content:" →"}
.card.tap{cursor:pointer}
.couple{flex:none;overflow:visible;display:inline-flex;align-items:center;gap:2px;padding-inline:6px}
.couple .dots{margin-right:0}
.couple.attn::after{margin:-22px 0 0 22px}
.substrip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:calc(100% - 32px);max-width:640px;margin:2px 16px 6px;padding:10px 16px;min-height:44px;border:0;border-radius:999px;background:var(--you-soft);color:var(--ink);font:inherit;font-size:.85rem;text-align:left;cursor:pointer}
.substrip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.substrip b{flex:none;padding:6px 14px;border-radius:999px;background:var(--you);color:var(--on-accent);white-space:nowrap;font-size:.8rem}
.substrip{border:1px solid var(--you);padding-block:6px 6px 6px}
.substrip:active b{opacity:.8}
.lang .flag{width:auto;height:36px;min-height:36px;padding:0 10px 0 5px;gap:5px;grid-auto-flow:column;border-radius:999px;border:1px solid var(--line);font:inherit;font-size:.75rem;font-weight:700;color:var(--ink);align-items:center}
.lang .flag svg{width:22px;height:22px}
.lang .flag.on{border-color:var(--ink);background:var(--glass-line)}
.lang{gap:4px}
@media(max-width:380px){.lang .flag{height:32px;min-height:32px;padding:0 8px 0 4px;font-size:.7rem}.lang .flag svg{width:20px;height:20px}}
.onb .label{color:var(--you)}
.lang .flag{padding:0 11px;font-size:.78rem;letter-spacing:.04em}
@media(max-width:380px){.lang .flag{padding:0 9px;font-size:.72rem}}

/* pairing: steps, waiting status, one-phone bar, help */
.steps{margin:0 0 10px;padding-left:20px;display:grid;gap:4px}
.status{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.6;flex:none}
.status .dot.on{background:var(--good);opacity:1}
.linkbtn{background:none;border:0;padding:6px 0;min-height:0;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.85}
.dim{opacity:.6}
.dim .small.muted{margin:0 0 6px}
.sharebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:8px 12px;border-radius:14px;background:var(--you-soft)}
.sharebar button{flex:none}
details.faq{margin:0 0 8px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--muted)}
details.faq[open] summary::after{content:"−"}
details.faq p{margin:8px 0 0}
.cta.slim{display:grid;gap:10px;padding:14px 16px}
.cta.slim>div{display:grid;gap:2px;min-width:0}
.cta.slim b{font-family:var(--display);font-size:1rem}
.cta.slim .small{opacity:.9}
.consent{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:388px;margin:0 auto;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:10px;box-shadow:var(--shadow);font-size:.85rem}
.installbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 10px 10px 14px;margin:0 0 4px}
.installbar>div{display:grid;gap:2px;flex:1;min-width:0}
.installbar b{font-size:.9rem}
.installbar .small{opacity:.8}
.installbar button.primary{flex:none;padding:9px 14px}
.installbar button.x{flex:none;border:none;background:none;color:var(--muted);font-size:1.4rem;line-height:1;padding:4px 8px}
.cta .tnote{justify-self:start;background:rgba(10,30,45,.16);color:inherit;border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600}
.cta.slim .btns{display:flex;flex-wrap:wrap;gap:8px}
/* iPhone в режиме приложения: статус-бар прозрачный, контент не должен уходить под часы и индикаторы */
.phone{padding-top:env(safe-area-inset-top,0px)}
.toast{top:calc(12px + env(safe-area-inset-top,0px))}
.ios-app .back{display:none}

/* 30.27: readability (16px base, muted text >= 4.5:1, 44px touch targets) */
button,.sharebtn,.chips button{min-height:44px}
button.ghost{min-height:44px;display:inline-flex;align-items:center}
.linkbtn,.tagbtn{min-height:44px}
.iconbtn{min-width:44px;min-height:44px}
.tag,.match,.miss{font-size:.78rem}
.medal span,.trend div,.bar,.streak span{font-size:.8rem}
/* today: one card for five minutes */
.ringhead{display:flex;gap:16px;align-items:center;margin-bottom:4px}
.ring{display:grid;place-items:center;width:84px;height:84px;position:relative;flex:none}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle:last-child{transition:stroke-dashoffset .9s ease}
.ring b{font:600 1.3rem var(--display)}
.ringhead h2{margin:2px 0 0}
.row3{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--glass-line)}
.row3 .t{flex:1;min-width:0}.row3 .t b{display:block}.row3 .t small{color:var(--muted);font-size:.88rem;line-height:1.3;display:block}
.chk{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;font-size:.9rem}
.chk.ok{background:var(--good);border-color:var(--good);color:var(--solid)}
.gobtn{border-radius:999px;background:var(--you);border-color:var(--you);color:var(--on-accent);padding:8px 12px;font-weight:600;font-size:.92rem;flex:none}
details.more{border:1px solid var(--glass-line);border-radius:18px;background:var(--surface);padding:0 16px}
details.more>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--muted);font-weight:600;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"⌄";font-size:1.1rem;transition:transform .2s}
details.more[open]>summary::after{transform:rotate(180deg)}
details.more>.cta{margin-bottom:10px}
.morelinks{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px}
/* waiting for the partner: blurred filler, never the real answer */
.answer.waiting .blur{filter:blur(6px);user-select:none;pointer-events:none;margin:4px 0}
.answer.waiting .lock{display:flex;gap:8px;align-items:center;margin:6px 0 0;color:var(--muted)}
/* small reactions: envelope flies, heart beats */
.env{display:flex;justify-content:center;font-size:2.4rem;margin:6px 0;opacity:.9}
.env.fly{animation:envfly 1.4s ease-out both}
@keyframes envfly{0%{transform:translateX(-90px) translateY(14px) rotate(-14deg) scale(.6);opacity:0}35%{opacity:1}100%{transform:translateX(0) translateY(0) rotate(0) scale(1);opacity:.9}}
.heart{text-align:center;font-size:2rem;line-height:1;margin:6px 0;color:var(--you);filter:drop-shadow(0 0 12px var(--you-soft))}
.heart.beat{animation:heartbeat 1.1s ease-in-out 2}
@keyframes heartbeat{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.95)}}
@media (prefers-reduced-motion:reduce){.env.fly,.heart.beat{animation:none}.ring circle:last-child{transition:none}}
/* invite first */
.invfirst{display:grid;gap:14px}
.invfirst h1{margin:0}
.bubble{background:var(--you-soft);border:1px solid var(--glass-line);border-radius:18px 18px 18px 6px;padding:12px 14px;margin:8px 0}
.share{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.sharebtn{display:flex;gap:10px;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:18px;padding:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-decoration:none}
.sharebtn svg{width:24px;height:24px;flex:none}
.primary.wide{width:100%}
.sheet .grab{min-height:0}
.ringhead .label{letter-spacing:.04em}
.lang button,.langsw button{min-height:44px}
.lang .flag{height:44px;min-height:44px;font-size:.8rem}
@media(max-width:380px){.lang .flag{height:44px;min-height:44px;font-size:.78rem}}
nav button{position:relative}.navdot{position:absolute;top:6px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--stop);box-shadow:0 0 0 2px var(--solid)}
.compare h2{margin:12px 0 6px}.ticks.paidl li::before{content:"★ ";color:var(--you)}
.altlogin{display:grid;gap:10px;margin-top:6px}
.codeshow{margin-top:10px}.code{display:block;font:700 1.8rem var(--display);letter-spacing:.2em}
.tgbtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:#2AABEE;color:#fff;font-weight:600}.tgbtn svg{width:22px;height:22px}
.tgw{margin:2px 0 10px}.tgw .tgbtn{width:100%;justify-content:center}
.tgw .ghost{display:block;margin:6px 0 0}.tgbox{margin-top:8px}.tgbox .tgbtn{text-decoration:none}
.tgw{display:block;min-height:0}.tgw .tgbtn{display:flex;width:100%;border-radius:999px}.tgbox{margin-top:8px}.tgbox .tgbtn{text-decoration:none}
.saveacc .tgw{margin-top:8px}.saveacc .ghost{margin-top:6px}
.tgbtn{white-space:nowrap}.pairing .saveacc{border:0;background:none;box-shadow:none;padding:14px 0 0;margin:0}.pairing .saveacc .tgbtn{padding:0 16px}

/* Тип пары: карусель из слайдов-карточек */
.tcar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 2px;scroll-padding-left:20px;scrollbar-width:none}
.tcar::-webkit-scrollbar{display:none}
.tslide{flex:0 0 88%;scroll-snap-align:start;background:var(--surface);border:1px solid var(--glass-line);border-radius:28px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-height:210px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tslide:first-child{background:var(--you-soft)}
.tslide h2{font-size:1.7rem}
.tslide .pct{display:flex;align-items:center;gap:12px}.tslide .pct .prog{flex:1;height:8px}.tslide .pct b{font-family:var(--display);font-size:1.6rem;font-weight:600}
.tcount{padding:0 4px}

/* ---- Новый дизайн: слива, цветные карточки игр и тестов ---- */
:root[data-theme="dark"]{
  --shade:#1E1128; --bg:#1E1128; --app:rgba(38,20,50,.45); --surface:rgba(38,20,50,.78); --solid:#261432;
  --ink:#F4EDF8; --muted:#CDBFD8; --line:rgba(255,255,255,.14); --glass-line:rgba(255,255,255,.10);
  --you:#F5B38A; --you-soft:rgba(245,179,138,.16); --them:#C9A6E8; --them-soft:rgba(201,166,232,.18);
  --on-accent:#1E1128; --nav:rgba(30,17,40,.9); --shadow:0 14px 34px -22px rgba(0,0,0,.8)}
:root[data-theme="dark"] #drape{display:none}
:root[data-theme="dark"] nav{background:rgba(30,17,40,.94)!important}
:root[data-theme="dark"] textarea::placeholder{color:#B9A9C6}
:root[data-theme="dark"] .onb .muted{color:#E3D8EC}
:root[data-theme="dark"] .onb .small{color:#CDBFD8}
:root[data-theme="dark"] .onb label{color:#F4EDF8}
[hidden]{display:none!important}
.ctr{text-align:center}
.gtiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
button.gt{position:relative;overflow:hidden;border-radius:26px;padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:left;color:#fff;border:1px solid rgba(255,255,255,.16)}
.gt b{font-family:var(--display);font-size:1.3rem;line-height:1.05;font-weight:600;display:block;overflow-wrap:anywhere}
.gt .s{font-size:.8rem;opacity:.92;display:block;margin-top:4px;font-weight:500}
.gt .dec{position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.18)}
.gt>div:not(.dec){position:relative}
button.gt.wide{grid-column:1 / -1;min-height:112px;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px;background:#F5B38A;color:#1E1128;border-color:transparent}
.gt.wide b{font-size:1.7rem;line-height:1}
.gt.wide .go{background:#1E1128;color:#F5B38A;border-radius:999px;padding:10px 18px;font-weight:700;font-size:.9rem;white-space:nowrap}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{padding:7px 14px;font-size:.85rem;white-space:nowrap;border-radius:999px}
.tabs .tab.on{background:var(--you);color:var(--on-accent);border-color:var(--you)}
.grp{display:grid;gap:10px;margin-top:6px}.grp h3{font-family:var(--display);font-size:1.45rem;font-weight:600}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px;scroll-padding-left:20px}
.hscroll::-webkit-scrollbar{display:none}
.fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 46px),transparent 100%)}
button.mini{flex:0 0 142px;scroll-snap-align:start;border-radius:22px;padding:12px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;gap:0;color:#fff;border:1px solid rgba(255,255,255,.16)}
.mini i{font-style:normal;font-size:1.5rem;margin-bottom:auto}
.mini b{font-family:var(--display);font-size:1.12rem;line-height:1.05;font-weight:600;overflow-wrap:anywhere}
.mini span{font-size:.74rem;opacity:.9;margin-top:4px;font-weight:500}
.mini.done{outline:2px solid #F5B38A;outline-offset:-2px}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.mgrid button.mini{flex:none;width:100%}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.seg button{border:none;padding:9px;text-align:center;font-size:.9rem;border-radius:999px;background:transparent}
.seg button.on{background:var(--you);color:var(--on-accent)}
.nearico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;border:1px solid var(--line);background:var(--surface);flex:none}
.bigpair{display:flex;justify-content:center;margin:4px 0 6px}.bigpair i{width:92px;height:92px;border-radius:50%;display:block}
.bigpair i:nth-child(1){background:#F5B38A}.bigpair i:nth-child(2){background:#8FB8D0;margin-left:-26px}.bigpair i:nth-child(3){background:#C9A6E8;margin-left:-26px}
.invfirst h1.ctr{font-size:2.3rem}
button.big{padding:16px;font-size:1.05rem;font-weight:700}
.stepc{display:flex;align-items:center;gap:14px;border-radius:22px;padding:14px 16px}
.stepc small{display:block;font-size:.85rem;opacity:.8}
.stepc .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;color:#1E1128}
.stepc.a{background:rgba(245,179,138,.2)}.stepc.a .n{background:#F5B38A}
.stepc.b{background:rgba(143,184,208,.22)}.stepc.b .n{background:#8FB8D0}
.stepc.c{background:rgba(201,166,232,.22)}.stepc.c .n{background:#C9A6E8}
/* «Сегодня»: программа синяя, вопрос дня сиреневый */
.card.c-blue{background:#2E6F9E;color:#fff;border-color:rgba(255,255,255,.2)}
.card.c-blue .label,.card.c-blue .muted,.card.c-blue small{color:rgba(255,255,255,.86)}
.card.c-blue .prog{background:rgba(255,255,255,.28)}.card.c-blue .prog i{background:#fff}
.card.c-blue .done{color:#fff}
.card.c-blue button.primary,.wbtn{background:#fff!important;color:#1d4d73!important;border-color:#fff!important;width:100%;font-weight:700}
.card.c-blue #stepDone{background:#fff;color:#1d4d73;border-color:#fff;width:100%;font-weight:700}
.allp{width:100%;font-weight:700}
.card.c-blue .allp{border:1.5px solid rgba(255,255,255,.7);color:#fff;background:transparent;text-decoration:none}
.card.c-lilac{background:#7A5BB0;color:#fff;border-color:rgba(255,255,255,.2)}
.card.c-lilac .label,.card.c-lilac .muted,.card.c-lilac small{color:rgba(255,255,255,.88)}
.card.c-lilac button.dbtn{background:#F5B38A;color:#1E1128;border-color:#F5B38A;width:100%;font-weight:700}
.card.c-lilac textarea{background:rgba(30,17,40,.35);border-color:rgba(255,255,255,.3);color:#fff}
.card.c-lilac .answer.y,.card.c-lilac .answer.t{background:rgba(30,17,40,.3)}
.card.c-lilac .answer b{color:#fff}

/* ---- Цвета карточек как во вкладке «Тесты»; отступы по краям меньше ---- */
.c-rose{background:#B0556B}.c-green{background:#2F7A58}
.tslide.c-blue{background:#2E6F9E}.tslide.c-lilac{background:#7A5BB0}
.card:is(.c-rose,.c-green,.c-blue,.c-lilac),.tslide:is(.c-rose,.c-green,.c-blue,.c-lilac){color:#fff;border-color:rgba(255,255,255,.2)}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) :is(.label,.muted,.small,small){color:rgba(255,255,255,.9)}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) :is(h1,h2,h3,b,strong){color:#fff}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) a,:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) .linkbtn{color:#fff}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) button:not(.primary):not(.dbtn):not(.paybtn):not(.wbtn):not(.tgbtn):not(#stepDone){background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.55)}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) button.primary{background:#F5B38A;color:#1E1128;border-color:#F5B38A}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) :is(input,textarea,select){background:rgba(30,17,40,.35);border-color:rgba(255,255,255,.35);color:#fff}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) .prog{background:rgba(255,255,255,.28)}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) .prog i{background:#fff}
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) :is(.answer.y,.answer.t){background:rgba(30,17,40,.3)}
.medal.got{background:#2F7A58;color:#fff;border-color:rgba(255,255,255,.2)}.medal.got :is(b,span){color:#fff}
@media (max-width:480px){
  body{padding-inline:0!important}
  header{padding-inline:14px}main{padding-inline:14px}
  .tcar,.hscroll{margin:0 -14px;padding-inline:14px;scroll-padding-left:14px}
}
/* --- первый вход: цветные карточки --- */
.onb.intro{justify-content:flex-start;gap:14px;padding-top:18px;min-height:calc(100vh - 8px)}
.introcard{position:relative;overflow:hidden;border-radius:32px;padding:26px 22px 24px;color:#fff;min-height:48vh;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;border:1px solid rgba(255,255,255,.2);margin-top:8px}
.introcard .dec{position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.16)}
.introico{font-size:4rem;line-height:1;margin-bottom:auto;position:relative}
.introcard h2{font-family:var(--display);font-size:2.3rem;line-height:1.02;font-weight:600;color:#fff;position:relative}
.introcard p{font-size:1.08rem;line-height:1.45;color:rgba(255,255,255,.94);position:relative}
.onb.intro .dotsrow{justify-content:center;margin:4px 0}
.onb.intro .primary{margin-top:2px}
.trio{display:flex;margin:4px 0 -2px}.trio i{width:46px;height:46px;border-radius:50%;display:block;margin-right:-14px}
.trio i:nth-child(1){background:#F5B38A}.trio i:nth-child(2){background:#8FB8D0}.trio i:nth-child(3){background:#C9A6E8}
.bens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ben{border-radius:20px;padding:12px 10px;color:#fff;display:flex;flex-direction:column;gap:2px;min-height:112px}
.ben i{font-style:normal;font-size:1.5rem;margin-bottom:auto}.ben b{font-size:.92rem;line-height:1.1}.ben span{font-size:.72rem;opacity:.92;line-height:1.15}
.pricepill{display:inline-block;align-self:flex-start;background:rgba(245,179,138,.16);color:#F5B38A;border:1px solid rgba(245,179,138,.5);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.9rem}
.installbar .small{display:none}.installbar.open .small{display:block}
.or{display:flex;align-items:center;gap:12px;margin:2px 0;color:var(--muted);font-size:.9rem}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
button.later{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:10px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;background:transparent;color:#fff;font:inherit;font-weight:600;text-decoration:none;padding:0 16px}
.onb.intro .primary{min-height:54px;font-size:1.1rem}
/* одинаковые кнопки на цветных карточках: персиковые, на всю ширину */
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) button.primary:not(.tgbtn){display:block;width:100%;background:#F5B38A!important;color:#1E1128!important;border-color:#F5B38A!important;font-weight:700}
.card.c-blue button.primary{background:#F5B38A!important;color:#1E1128!important;border-color:#F5B38A!important}
.wbtn{background:#F5B38A!important;color:#1E1128!important;border-color:#F5B38A!important}
/* логотип */
.brand::before{content:"";display:inline-block;width:1.7em;height:.88em;margin-right:.35em;vertical-align:-.04em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23F5B38A'/%3E%3Ccircle cx='31' cy='16' r='14' fill='%238FB8D0'/%3E%3Ccircle cx='46' cy='16' r='14' fill='%23C9A6E8'/%3E%3C/svg%3E") center/contain no-repeat}
/* светлая тема: тёплый крем вместо голубого, без шторы */
:root[data-theme="light"]{
  --shade:#F6EEE6; --bg:#F6EEE6; --app:rgba(255,255,255,.6); --surface:rgba(255,255,255,.88); --solid:#FFFFFF;
  --ink:#2A1838; --muted:#5E4A6B; --line:rgba(42,24,56,.16); --glass-line:rgba(255,255,255,.9);
  --you:#A5562F; --you-soft:rgba(165,86,47,.1); --them:#6A4A9C; --them-soft:rgba(106,74,156,.14);
  --on-accent:#FFFFFF; --nav:rgba(255,255,255,.92); --shadow:0 14px 34px -22px rgba(42,24,56,.45)}
:root[data-theme="light"] #drape{display:none}
/* ссылки-кнопки на цветных карточках без плашки */
:is(.card,.tslide):is(.c-rose,.c-green,.c-blue,.c-lilac) :is(button.ghost,button.linkbtn){background:none!important;border:0!important;color:#fff;padding:6px 0;min-height:44px;text-decoration:underline;text-underline-offset:3px}
/* крупный логотип на заставке уже есть, маленький в шапке не нужен */
.onb:has(.trio) .brand::before{display:none}
.prog.goal{margin-top:10px}
.introcard{touch-action:pan-y}
@keyframes swl{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes swr{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.swl{animation:swl .32s cubic-bezier(.22,.8,.3,1)}.swr{animation:swr .32s cubic-bezier(.22,.8,.3,1)}
.introcard{will-change:transform}
@media (prefers-reduced-motion: reduce){.swl,.swr{animation:none}}

#goSolo,#invSolo{width:100%}

/* Today as a few big coloured rows */
.trow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:none;border-radius:24px;padding:16px 18px;margin-bottom:12px;min-height:84px;color:#fff}
.trow.rose{background:#B0556B}.trow.blue{background:#2E6F9E}.trow.lilac{background:#7A5BB0}.trow.green{background:#2F7A58}
.trow .ti{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.2)}
.trow .tt{min-width:0}.trow b{display:block;font-size:1.08rem}.trow small{display:block;font-size:.9rem;line-height:1.3;color:rgba(255,255,255,.88)}
.trow .tar{margin-left:auto;font-size:1.5rem;opacity:.8}
.trow .tdone{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#fff;color:#1E1128;display:grid;place-items:center;font-weight:800;flex:none}
.tfoot{text-align:center;margin:14px 0 6px;font-size:.9rem;color:var(--muted)}
.invslim{display:flex;align-items:center;gap:12px;background:#F5B38A;color:#1E1128;border-radius:26px;padding:14px 18px;margin-bottom:14px}
.invslim b{display:block;font-size:1.02rem}.invslim small{display:block;font-size:.85rem;color:#3a2447}
.invslim button{margin-left:auto;background:#1E1128;color:#F5B38A;border-color:#1E1128;padding:10px 16px;flex:none}
.card.pairing{background:#F5B38A;border-color:#F5B38A;color:#1E1128;box-shadow:none}
.card.pairing h2,.card.pairing .label,.card.pairing p,.card.pairing li,.card.pairing small,.card.pairing .status{color:#1E1128}
.card.pairing .primary{background:#1E1128;color:#F5B38A;border-color:#1E1128;width:100%;min-height:54px}
.card.pairing #goSolo{background:transparent;color:#1E1128;border-color:#1E1128}
.card.pairing .linkbtn{color:#1E1128}
.card.pairing button.primary,.card.pairing.c-rose button.primary,.card.pairing.c-green button.primary,.card.pairing.c-blue button.primary,.card.pairing.c-lilac button.primary{background:#1E1128!important;color:#F5B38A!important;border-color:#1E1128!important}
.card.pairing #goSolo,.card.pairing.c-rose #goSolo,.card.pairing.c-green #goSolo,.card.pairing.c-blue #goSolo,.card.pairing.c-lilac #goSolo{background:transparent!important;color:#1E1128!important;border:1.5px solid #1E1128!important}
.card.pairing .dot{background:#1E1128}

button.solo{width:100%;min-height:54px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);margin-top:2px}
.solohint{margin:10px 6px 4px;font-size:.9rem;color:var(--muted);text-align:center}
.card.pairing p,.card.pairing p.small,.card.pairing .status,.card.pairing li{color:#1E1128!important}
.dnote{margin:2px 4px 0;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.88);text-align:center}
.instrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1.5px solid #F5B38A;background:transparent;color:var(--ink);border-radius:24px;padding:14px 18px;margin-bottom:12px;min-height:76px}
.instrow .ti{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;background:rgba(245,179,138,.18);color:#F5B38A}
.instrow b{display:block;font-size:1.05rem}.instrow small{display:block;font-size:.9rem;color:var(--muted)}.instrow .tar{margin-left:auto;font-size:1.5rem;opacity:.7}
.pairbar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:14px 18px;margin-bottom:14px;color:var(--ink)}
.pairbar .pbnum{width:52px;height:52px;border-radius:50%;background:#F5B38A;color:#1E1128;display:grid;place-items:center;font-family:var(--display);font-size:1.7rem;font-weight:600;flex:none}
.pairbar .pbtxt{flex:1;min-width:0;display:grid;gap:5px}
.pairbar small{font-size:.82rem;color:var(--muted)}.pairbar b{font-size:1.1rem}
.pairbar .pbtrack{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.pairbar .pbtrack i{display:block;height:100%;background:#F5B38A;border-radius:4px}
.pairbar .tar{margin-left:auto;font-size:1.5rem;opacity:.7}
.pairbar .pbtrack i.slide{animation:barslide 1.1s cubic-bezier(.22,.8,.3,1) both}
@media (prefers-reduced-motion: reduce){.pairbar .pbtrack i.slide{animation:none}}
.pairbar .pbnum{font-family:var(--body);font-weight:700;font-size:1.5rem}

/* Соло: тихая плашка вместо крупной строки, приглашение под первым ответом */
.invpill{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 8px 8px 18px;margin-bottom:12px}
.invpill span{display:block;min-width:0}.invpill b{display:block;font-size:.92rem;font-weight:600}
.invpill small{display:block;font-size:.78rem;color:var(--muted);line-height:1.3}
.invpill button{margin-left:auto;flex:none;padding:8px 14px;font-size:.88rem;background:var(--you-soft);border-color:transparent;color:var(--ink)}
.invprompt{display:grid;gap:8px;margin-top:6px}
.invprompt button{justify-self:start}
/* 30.42: narrow phones (320 px), finger-sized links, tz select */
@media (max-width:340px){
  header{padding-inline:12px;gap:4px}
  .brand::before{display:none}
  header .right{gap:0}
  .lang .flag{padding:0 6px 0 3px;gap:3px}
  .couple{padding-inline:6px}
  .iconbtn{min-width:40px}
  .substrip{margin-inline:12px;width:calc(100% - 24px);padding-inline:12px;gap:8px}
  .substrip b{padding:6px 10px}
}
.help a,p.small a[href^="/legal/"]{display:inline-block;padding:12px 2px;margin:-12px 0}
#tzSel{width:100%;min-height:44px}
.card.help p{margin:6px 0 12px}
.recl{display:block;margin:18px 0 8px}
.ctr{text-align:center}
#goSolo.linkbtn{padding:12px 10px;min-height:44px}
/* 30.42: tomorrow line, heart on the partner's answer, week card, warm-word starters */
.tomorrow{margin:18px 0 4px}
.heartbtn{display:block;margin:12px auto 2px;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--you);background:none;color:var(--ink);font:inherit;font-weight:700}
.heartbtn:active{opacity:.8}
.heartnote{text-align:center;margin:10px 0 2px}
.weekdots{display:flex;justify-content:space-between;margin:14px 0 10px}
.wd{display:grid;justify-items:center;gap:6px}
.wd small{font-size:.7rem;opacity:.85}
.wd i{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);box-sizing:border-box}
.wd.both i{background:var(--you);border-color:var(--you)}
.wd.me i,.wd.partner i{border-color:#fff;border-width:3px}
.chips.starts{margin:8px 0 10px}