/* Котосвидания — design system
   Concept: Вика = розовый, Алекс = синий. Когда вы оба свободны, цвета смешиваются в фиолетовый «мэтч».
   Layout: one phone-width column, floating dock at the bottom, bottom sheets for every action. */

:root {
  --bg: #F4F3F8;
  --card: #FFFFFF;
  --soft: #ECEAF3;
  --line: #E1DEEA;
  --ink: #15131B;
  --muted: #777287;
  --faint: #B4B0C2;
  --on: #FFFFFF;

  --vika: #FF3E8A;
  --alex: #2F74FF;
  --match: #8A5CFF;
  --maybe: #F2A100;
  --ok: #10A86F;
  --bad: #EC3D55;

  --c-bar: #7C5CFF;
  --c-food: #FF7433;
  --c-fun: #FF3E8A;
  --c-culture: #2F74FF;
  --c-walk: #10A86F;

  --hatch: rgba(21, 19, 27, .07);
  --veil: rgba(21, 19, 27, .38);
  --shadow: 0 12px 40px rgba(40, 20, 70, .12);
  --shadow-lg: 0 24px 70px rgba(40, 20, 70, .22);

  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-xl: 30px;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 12px;
  --col: 600px;
  --dock: 74px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.2, .9, .25, 1.15);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E0D13; --card: #18161F; --soft: #22202B; --line: #2C2936; --ink: #F3F1F8; --muted: #9B96AC; --faint: #5D5A6B; --on: #FFFFFF;
  --vika: #FF4F96; --alex: #4A86FF; --match: #9B72FF; --maybe: #FFB628; --ok: #2CC788; --bad: #FF5468;
  --c-bar: #9077FF; --c-food: #FF8549; --c-fun: #FF4F96; --c-culture: #4A86FF; --c-walk: #2CC788;
  --hatch: rgba(255, 255, 255, .06); --veil: rgba(0, 0, 0, .6);
  --shadow: 0 12px 40px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0E0D13; --card: #18161F; --soft: #22202B; --line: #2C2936; --ink: #F3F1F8; --muted: #9B96AC; --faint: #5D5A6B; --on: #FFFFFF;
  --vika: #FF4F96; --alex: #4A86FF; --match: #9B72FF; --maybe: #FFB628; --ok: #2CC788; --bad: #FF5468;
  --c-bar: #9077FF; --c-food: #FF8549; --c-fun: #FF4F96; --c-culture: #4A86FF; --c-walk: #2CC788;
  --hatch: rgba(255, 255, 255, .06); --veil: rgba(0, 0, 0, .6);
  --shadow: 0 12px 40px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 500 15px/1.45 var(--ui); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, a, input, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--match); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; line-height: 1.1; }
p { margin: 0; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ───────── login ───────── */
.login { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; overflow: hidden; }
.cut { position: absolute; inset: 0; transition: clip-path .75s cubic-bezier(.75, 0, .2, 1), filter .3s; }
.cut-vika { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 63%); }
.cut-alex { clip-path: polygon(0 64%, 100% 37%, 100% 100%, 0 100%); }
.reel { position: absolute; left: 0; right: 0; height: 64%; overflow: hidden; }
.cut-vika .reel { top: 0; } .cut-alex .reel { bottom: 0; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; }
.reel img.on { opacity: 1; animation: kb 1.3s linear both; }
.cut-alex .reel img.on { animation-name: kb2; }
@keyframes kb { from { transform: scale(1.06) translate(-2%, 1%); } to { transform: scale(1.22) translate(2%, -2%); } }
@keyframes kb2 { from { transform: scale(1.22) translate(2%, 1%); } to { transform: scale(1.06) translate(-2%, -1%); } }
.cut::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(0,0,0,.25) 1px, transparent 1.5px) 0 0 / 4px 4px; }
.cut-vika::before, .cut-alex::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.cut-vika::before { background: linear-gradient(180deg, transparent 40%, rgba(255, 62, 138, .55)); }
.cut-alex::before { background: linear-gradient(0deg, transparent 40%, rgba(47, 116, 255, .55)); }
.flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .2s ease-out; }
@keyframes flash { from { opacity: .7; } to { opacity: 0; } }
.cut-name { position: absolute; z-index: 3; font: 900 clamp(64px, 19vw, 150px)/.85 var(--display); letter-spacing: -.04em;
  transform: rotate(-11deg); -webkit-text-stroke: 3px #000; paint-order: stroke fill; text-shadow: 6px 6px 0 #000; pointer-events: none; }
.cut-vika .cut-name { left: 5%; top: calc(8% + var(--safe-t)); color: #FF3E8A; }
.cut-alex .cut-name { right: 5%; bottom: calc(10% + var(--safe-b)); color: #4A86FF; }
.login-mark { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-11deg); pointer-events: none;
  background: #fff; color: #000; font: 700 15px/1 var(--display); padding: 10px 16px; border-radius: 999px; box-shadow: 0 0 0 3px #000; white-space: nowrap; }
.login-mark i, .brand i { font-style: normal; color: var(--match); }
.login-hint { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(18px + var(--safe-b)); text-align: center; pointer-events: none;
  font: 600 12px/1 var(--ui); letter-spacing: .22em; text-transform: uppercase; opacity: .85; text-shadow: 0 1px 2px #000; }
.login.chosen .cut:not(.picked) { filter: brightness(.3); }
.login.chosen .cut.picked { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 5; }
.login.chosen .login-mark, .login.chosen .login-hint { opacity: 0; transition: opacity .2s; }
.login.leaving { animation: out .5s ease forwards; }
@keyframes out { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@media (orientation: landscape) and (min-width: 700px) {
  .cut-vika { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
  .cut-alex { clip-path: polygon(63% 0, 100% 0, 100% 100%, 39% 100%); }
  .reel { height: auto; top: 0; bottom: 0; width: 63%; }
  .cut-vika .reel { left: 0; right: auto; } .cut-alex .reel { right: 0; left: auto; }
  .cut-vika .cut-name { top: auto; bottom: 12%; left: 4%; }
  .cut-alex .cut-name { bottom: auto; top: 10%; right: 4%; }
  .cut-name { font-size: clamp(70px, 10vw, 150px); }
}
@media (hover: hover) { .login:not(.chosen):has(.cut-vika:hover) .cut-alex, .login:not(.chosen):has(.cut-alex:hover) .cut-vika { filter: brightness(.55) saturate(.6); } }

.pin { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)); background: rgba(10, 8, 16, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); animation: pinIn .35s var(--ease); }
@keyframes pinIn { from { opacity: 0; transform: translateY(24px); } }
.pin-back { position: absolute; top: calc(16px + var(--safe-t)); left: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; }
.pin-ava { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(255,255,255,.9); }
.pin-hi { font: 700 22px/1.2 var(--display); margin-top: 6px; }
.pin-sub { color: rgba(255,255,255,.7); font-size: 14px; }
.pin-dots { display: flex; gap: 14px; margin: 14px 0 18px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); transition: background .15s, transform .15s; }
.pin-dots i.on { background: #fff; transform: scale(1.1); }
.pin-dots.bad { animation: shake .4s; }
.pin-dots.bad i { border-color: #FF5468; background: #FF5468; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; }
.pin-pad button { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: 500 28px/1 var(--ui); transition: transform .1s, background .1s; }
.pin-pad button:active { transform: scale(.92); background: rgba(255,255,255,.3); }

/* ───────── shell ───────── */
.app { max-width: var(--col); margin: 0 auto; padding: 0 16px calc(var(--dock) + 28px + var(--safe-b));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  margin: 0 -16px; padding: calc(10px + var(--safe-t)) 16px 10px; background: var(--bg); }
.brand { font: 700 17px/1 var(--display); letter-spacing: -.03em; }
.duo-ava { display: flex; align-items: center; padding: 4px; border-radius: 999px; }
.ava { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--bg); background: var(--soft); }
.ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ava.a { margin-left: -10px; }
.ava.v { outline: 2px solid var(--vika); outline-offset: 1px; }
.ava.a { outline: 2px solid var(--alex); outline-offset: 1px; }
.on-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 2px var(--bg); }
.on-dot.on { background: var(--ok); }
.offline { margin: 4px 0 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--soft); color: var(--muted); font-size: 13px; text-align: center; }
.view { display: grid; gap: 18px; padding-top: 6px; animation: viewIn .28s ease; }
@keyframes viewIn { from { transform: translateY(8px); } }

.dock { position: fixed; z-index: 20; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%);
  width: min(calc(100% - 24px), 420px); height: var(--dock); display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 7px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.dock button { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 19px; color: var(--muted);
  font-size: 11px; font-weight: 600; transition: background .2s, color .2s; }
.dock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock svg .fill { fill: currentColor; stroke: none; }
.dock button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.dock button:active { transform: scale(.94); }
.badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--vika); color: var(--on); font: 700 11px/18px var(--ui); text-align: center; box-shadow: 0 0 0 2px var(--card); }

/* ───────── common ───────── */
.title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.title h1 { font-size: clamp(26px, 8vw, 32px); font-weight: 900; letter-spacing: -.04em; }
.title p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px;
  background: var(--soft); font-weight: 600; transition: transform .12s, background .2s, opacity .2s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn.ink { background: var(--ink); color: var(--bg); }
.btn.vika { background: var(--vika); color: var(--on); }
.btn.alex { background: var(--alex); color: var(--on); }
.btn.match { background: var(--match); color: var(--on); }
.btn.ok { background: var(--ok); color: var(--on); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 35%, transparent); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: 18px; flex: none; }
.icon-btn:active { transform: scale(.92); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--soft); }
.seg button { min-height: 40px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all .2s; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.seg button b { font-weight: 700; color: var(--match); margin-left: 4px; }
.card { background: var(--card); border-radius: var(--r-lg); }
.empty { padding: 34px 22px; border-radius: var(--r-lg); background: var(--card); text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.empty b { font: 700 18px/1.2 var(--display); color: var(--ink); }
input[type=text], input[type=search], input[type=number], input[type=time], input[type=date], textarea, select {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; border: 0; border-radius: var(--r); background: var(--soft); font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none; }
input:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--match); }
textarea { resize: none; min-height: 84px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.cat-bar { --c: var(--c-bar); } .cat-food { --c: var(--c-food); } .cat-fun { --c: var(--c-fun); } .cat-culture { --c: var(--c-culture); } .cat-walk { --c: var(--c-walk); }

/* ───────── week ───────── */
.weekbar { display: flex; align-items: center; gap: 8px; }
.weekbar .range { flex: 1; white-space: nowrap; min-width: 96px; text-align: center; font: 700 15px/1 var(--display); letter-spacing: -.02em; }
.summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(110deg, color-mix(in srgb, var(--vika) 14%, var(--card)), color-mix(in srgb, var(--alex) 14%, var(--card))); }
.summary .big { font: 900 34px/1 var(--display); letter-spacing: -.05em; color: var(--match); }
.summary p { font-size: 14px; line-height: 1.3; }
.summary .tools { margin-left: auto; }

.days { display: grid; gap: 10px; }
.day { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-radius: var(--r-lg); background: var(--card); align-items: center; }
.day.past { opacity: .5; }
.day .date { display: grid; justify-items: center; gap: 2px; }
.day .date b { font: 900 24px/1 var(--display); letter-spacing: -.05em; }
.day .date span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.day.today .date b { color: var(--match); }
.day.today .date span { color: var(--match); }
.day.today .date::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--match); margin-top: 2px; }
.pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 58px; border-radius: 999px; }
.half { position: relative; display: grid; align-content: center; gap: 1px; padding: 0 16px; text-align: left; overflow: hidden;
  background: var(--soft); transition: background .25s, color .25s, transform .15s; min-width: 0; }
.half.v { border-radius: 999px 10px 10px 999px; }
.half.a { border-radius: 10px 999px 999px 10px; text-align: right; }
.half .who { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.half .st { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.half .sub { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.half.mine { cursor: pointer; }
.half.v.mine { padding-right: 46px; }
.half.a.mine { padding-left: 46px; }
.pair.match .half.v.mine { padding-right: 66px; }
.pair.match .half.a.mine { padding-left: 66px; }
.day.past .pair { height: 44px; }
.day.past .half .sub { display: none; }
.half.mine:active { transform: scale(.97); }
.half.empty .st { color: var(--muted); }
.half.mine.empty { box-shadow: inset 0 0 0 1.5px var(--line); background: transparent; }
.half.mine.empty .st { color: var(--ink); }
.half.v.free { background: var(--vika); color: var(--on); }
.half.a.free { background: var(--alex); color: var(--on); }
.half.busy { background: repeating-linear-gradient(-45deg, var(--soft) 0 7px, var(--hatch) 7px 9px), var(--soft); color: var(--muted); }
.half.busy .st { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.half.v.maybe { box-shadow: inset 0 0 0 2px var(--vika); color: var(--vika); background: transparent; }
.half.a.maybe { box-shadow: inset 0 0 0 2px var(--alex); color: var(--alex); background: transparent; }
.pen { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; background: rgba(255,255,255,.22); color: inherit; }
.pen svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pair .pen.v { left: calc(50% - 38px); color: var(--ink); background: var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.pair.match .pen.v { left: calc(50% - 58px); }
.pair.match .pen.a { right: calc(50% - 58px); }
.pair .pen.a { right: calc(50% - 38px); color: var(--ink); background: var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.pair.match { background: linear-gradient(90deg, var(--vika), var(--match) 50%, var(--alex)); box-shadow: 0 8px 24px color-mix(in srgb, var(--match) 35%, transparent); }
.pair.match .half { background: transparent; }
.pair.match .heart { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); color: var(--match); font-size: 17px; box-shadow: 0 4px 14px rgba(0,0,0,.18); animation: pop .5s var(--ease); z-index: 1; }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.half.bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { transform: scale(.94); } }
.day-foot { grid-column: 2; display: grid; gap: 6px; }
.day-foot:empty { display: none; }
.day-cta { display: flex; gap: 8px; }
.day-cta .btn { flex: 1; min-height: 40px; }
.add-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

.ticket { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--soft); text-align: left; width: 100%; }
.ticket .t { font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.ticket .n { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .by { width: 8px; height: 8px; border-radius: 50%; }
.ticket.accepted { background: color-mix(in srgb, var(--match) 14%, var(--card)); }
.ticket.accepted .t { color: var(--match); }
.pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: var(--card); color: var(--muted); }
.pill.pending { color: var(--maybe); }
.pill.accepted { background: var(--match); color: var(--on); }
.pill.declined, .pill.cancelled, .pill.missed { color: var(--bad); }
.pill.visited { background: var(--vika); color: var(--on); }

/* invitation ticket */
.invite { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: var(--r-xl); color: var(--on); overflow: hidden;
  background: linear-gradient(135deg, var(--vika), var(--match) 55%, var(--alex)); box-shadow: 0 16px 40px color-mix(in srgb, var(--match) 35%, transparent); }
.invite::before, .invite::after { content: ""; position: absolute; top: 64%; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.invite::before { left: -12px; } .invite::after { right: -12px; }
.invite .from { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.invite .from img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.invite h2 { font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.invite .when { font: 700 14px/1.3 var(--display); opacity: .92; }
.invite .note { font-size: 14px; opacity: .9; }
.invite .perf { border-top: 2px dashed rgba(255,255,255,.45); margin: 0 -2px; }
.invite .acts { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.invite .acts .btn { min-height: 44px; padding: 0 10px; background: rgba(255,255,255,.18); color: var(--on); }
.invite .acts .btn.yes { background: #fff; color: #15131B; }

/* ───────── places: swipe deck ───────── */
.deck { position: relative; height: clamp(320px, calc(100vh - 430px), 470px); height: clamp(320px, calc(100dvh - 430px), 470px); }
.sw { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); overflow: hidden; background: var(--card);
  box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .35s var(--ease); will-change: transform; }
.sw.back1 { transform: translateY(14px) scale(.95); }
.sw.back2 { transform: translateY(28px) scale(.9); opacity: .6; }
.sw.dragging { transition: none; }
.sw.fly { transition: transform .45s ease-in, opacity .45s; }
.sw-head { position: relative; padding: 22px 22px 18px; background: var(--c); color: var(--on); min-height: 132px; display: grid; align-content: space-between; gap: 14px; overflow: hidden; }
.sw-head .cat { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.sw-head .kind { font: 900 clamp(30px, 9vw, 44px)/.95 var(--display); letter-spacing: -.05em; text-transform: lowercase; overflow-wrap: anywhere; }
.sw-head::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.12); }
.sw-body { padding: 18px 22px 22px; display: grid; align-content: start; gap: 10px; }
.sw-body h3 { font-size: 22px; letter-spacing: -.03em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
.sw-body .desc { font-size: 15px; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.wants { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--on); }
.wants img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.wants.v { background: var(--vika); } .wants.a { background: var(--alex); }
.stamp { position: absolute; top: 26px; z-index: 3; padding: 6px 14px; border: 4px solid; border-radius: 14px; font: 900 30px/1 var(--display); letter-spacing: -.02em; opacity: 0; pointer-events: none; background: rgba(255,255,255,.9); }
.stamp.like { left: 22px; color: var(--ok); transform: rotate(-14deg); }
.stamp.nope { right: 22px; color: var(--bad); transform: rotate(14deg); }
.deck-ctl { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 6px; }
.sw-body { overflow: hidden; }
.round { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); font-size: 24px; transition: transform .15s; }
.round:active { transform: scale(.9); }
.round[disabled] { opacity: .35; pointer-events: none; }
.round.sm { width: 46px; height: 46px; font-size: 18px; color: var(--muted); }
.round.nope { color: var(--bad); }
.round.like { color: var(--on); background: var(--vika); width: 72px; height: 72px; font-size: 28px; }
.app.is-alex .round.like { background: var(--alex); }
.round svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.round.like svg { fill: currentColor; stroke: none; width: 30px; height: 30px; }
.deck-hint { text-align: center; font-size: 12px; color: var(--muted); }

/* places list */
.list { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--r); background: var(--card); text-align: left; width: 100%; }
.sq { width: 44px; height: 44px; border-radius: 14px; background: var(--c); color: var(--on); display: grid; place-items: center; font: 900 17px/1 var(--display); text-transform: uppercase; flex: none; }
.prow b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .mark { font-size: 16px; color: var(--faint); }
.prow .mark.like { color: var(--vika); } .app.is-alex .prow .mark.like { color: var(--alex); }
.prow .mark.match { color: var(--match); }
.search { position: relative; }
.search input { padding-left: 44px; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }

/* ───────── wheel ───────── */
.wheel { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 6px auto 0; }
.wheel canvas { width: 100%; height: 100%; touch-action: none; display: block; }
.wheel .needle { position: absolute; left: 50%; top: -6px; width: 26px; height: 34px; margin-left: -13px; z-index: 2;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 4px; }
.wheel .hub { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2;
  background: var(--ink); color: var(--bg); font: 900 15px/1 var(--display); letter-spacing: -.02em; box-shadow: 0 0 0 6px var(--card), var(--shadow); transition: transform .15s; }
.wheel .hub:active { transform: translate(-50%, -50%) scale(.92); }
.wheel .hub[disabled] { opacity: 1; }
.result { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-xl); background: var(--card); animation: rise .45s var(--ease); }
@keyframes rise { from { transform: translateY(20px); } }
.result .lab { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.result h2 { font-size: 26px; font-weight: 900; letter-spacing: -.04em; }
.challenge { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--soft); }
.challenge .lab { color: var(--match); }
.challenge p { font-weight: 600; }

/* ───────── history ───────── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 16px; border-radius: var(--r-lg); background: var(--card); display: grid; gap: 4px; }
.stat b { font: 900 30px/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat.hl { background: var(--match); color: var(--on); }
.stat.hl span { color: rgba(255,255,255,.8); }
.stat.fav b { font-size: 17px; line-height: 1.2; letter-spacing: -.02em; }
.h2 { font: 700 17px/1.2 var(--display); letter-spacing: -.02em; }
.memo { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--card); text-align: left; width: 100%; }
.memo .d { display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 2px; }
.memo .d b { font: 900 24px/1 var(--display); letter-spacing: -.05em; }
.memo .d span { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.memo h3 { font-size: 16px; margin-bottom: 6px; }
.rates { display: grid; gap: 4px; }
.rate { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.rate .hh { letter-spacing: 1px; font-size: 14px; }
.rate.v .hh { color: var(--vika); } .rate.a .hh { color: var(--alex); }
.rate .off { opacity: .2; }
.rate q { color: var(--muted); quotes: "«" "»"; }
.memo.todo { box-shadow: inset 0 0 0 2px var(--maybe); }

/* ───────── sheet ───────── */
.veil { position: fixed; inset: 0; z-index: 40; background: var(--veil); display: grid; align-items: end; justify-items: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: var(--col); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 20px calc(22px + var(--safe-b));
  display: grid; gap: 16px; animation: up .35s var(--ease); box-shadow: var(--shadow-lg); }
.sheet::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.veil.closing { animation: fade .2s reverse forwards; }
.veil.closing .sheet { animation: down .2s ease-in forwards; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes down { to { transform: translateY(100%); } }
@media (min-width: 700px) { .veil { align-items: center; } .sheet { border-radius: var(--r-xl); max-height: 86vh; padding-bottom: 22px; } }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sh-head .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sh-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.statuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.statuses button { min-height: 76px; border-radius: var(--r); background: var(--soft); display: grid; place-items: center; align-content: center; gap: 6px; font-weight: 700; font-size: 14px; transition: all .15s; }
.statuses .sw-dot { width: 18px; height: 18px; border-radius: 50%; }
.statuses [data-s="free"] .sw-dot { background: var(--me); }
.statuses [data-s="busy"] .sw-dot { background: repeating-linear-gradient(-45deg, var(--muted) 0 3px, transparent 3px 5px); }
.statuses [data-s="maybe"] .sw-dot { box-shadow: inset 0 0 0 2.5px var(--me); }
.statuses button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.daypick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; }
.daypick::-webkit-scrollbar { display: none; }
.dp { flex: none; width: 56px; padding: 10px 0 8px; border-radius: 18px; background: var(--soft); display: grid; justify-items: center; gap: 4px; }
.dp small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.dp b { font: 900 19px/1 var(--display); letter-spacing: -.04em; }
.dp i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.dp i.free { background: var(--other); } .dp i.busy { background: var(--faint); } .dp i.maybe { box-shadow: inset 0 0 0 1.5px var(--other); }
.dp i.match { background: var(--match); }
.dp[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.dp[aria-pressed="true"] small { color: inherit; opacity: .7; }
.hint { padding: 12px 14px; border-radius: var(--r); background: var(--soft); font-size: 14px; }
.hint.match { background: color-mix(in srgb, var(--match) 16%, var(--card)); color: var(--ink); }
.sugg { display: grid; gap: 6px; }
.picked { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px 8px 8px; border-radius: var(--r); background: var(--soft); }
.kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.hearts { display: flex; gap: 6px; justify-content: center; }
.hearts button { font-size: 40px; line-height: 1; color: var(--line); transition: transform .2s var(--ease), color .15s; }
.hearts button.on { color: var(--me); transform: scale(1.1); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acts .btn { flex: 1; }
.place-hero { margin: -6px -20px 0; padding: 22px 20px; background: var(--c); color: var(--on); display: grid; gap: 14px; position: relative; overflow: hidden; }
.place-hero .kind { font: 900 34px/.95 var(--display); letter-spacing: -.05em; text-transform: lowercase; }
.place-hero .cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.place-hero::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.12); }

/* match celebration */
.matchpop { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: #fff;
  background: linear-gradient(160deg, rgba(255,62,138,.94), rgba(138,92,255,.94) 50%, rgba(47,116,255,.94)); animation: fade .25s; }
.matchpop .cats { display: flex; }
.matchpop .cats img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff; }
.matchpop .cats img + img { margin-left: -18px; }
.matchpop h2 { font: 900 44px/1 var(--display); letter-spacing: -.05em; animation: pop .6s var(--ease); }
.matchpop p { font-size: 17px; max-width: 300px; }
.matchpop .btn { background: #fff; color: #15131B; min-width: 220px; }
.matchpop .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--dock) + 24px + var(--safe-b)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-lg); animation: rise .3s var(--ease); text-align: center; }
.confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; width: 100%; height: 100%; }