:root{
  color-scheme: dark;

  --night:#0B0A11;
  --surface:#14121D;
  --surface-2:#1C1927;
  --line:#2B2639;
  --line-soft:#221E2E;
  --text:#F1EBF2;
  --muted:#9B93A9;
  --muted-2:#6E687C;
  --lamp:#F2C173;
  --lamp-dim:#C89A55;
  --blush:#E9A0AE;
  --wine:#4A1B31;
  --ok:#8FCB9B;

  --serif: Georgia, "PT Serif", "Iowan Old Style", "Palatino Linotype", "Noto Serif", "DejaVu Serif", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, "DejaVu Sans Mono", monospace;

  --r: 14px;
  --ease: cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}

.glow{
  position:fixed; left:50%; top:-22vh; transform:translateX(-50%);
  width:min(130vw,1200px); height:78vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(242,193,115,.17), rgba(242,193,115,.06) 38%, rgba(74,27,49,.10) 58%, transparent 72%);
}
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hearts{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}

/* The invitation is one composition on a stage: centred on both axes.
   Taller content still scrolls — auto margins centre without clipping. */
.stage{
  position:relative; z-index:1;
  min-height:100dvh;
  display:grid; place-items:center;
  padding:clamp(24px,6vh,64px) 22px;
  text-align:center;
}

/* The panel is a tool, not a poster: read top-down, left-aligned. */
.stage--wide{
  min-height:auto;
  display:block;
  text-align:left;
  max-width:880px; margin:0 auto;
  padding:clamp(28px,7vh,72px) 22px clamp(48px,10vh,96px);
}

/* ---------------------------------------------------------------- type */

.eyebrow{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--lamp-dim); margin:0 0 22px;
}
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,7.6vw,4.3rem); line-height:1.03; letter-spacing:-.022em;
  margin:0; text-wrap:balance;
}
.display--sm{ font-size:clamp(1.9rem,5.2vw,2.9rem); }
.display em{ font-style:italic; color:var(--lamp); }
.lead{
  margin:22px auto 0; max-width:44ch; color:var(--muted);
  font-size:1.05rem; line-height:1.65; text-wrap:pretty;
}
.stage--wide .lead{ margin-inline:0; }
.sec-title{ font-family:var(--serif); font-weight:400; font-size:1.5rem; letter-spacing:-.01em; margin:0; }
.label{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--muted-2); margin:0;
}
.hint{ font-size:.86rem; color:var(--muted-2); margin:0; }
.error{ color:var(--blush); font-size:.9rem; margin:0; min-height:1.3em; }

/* ------------------------------------------------------------- screens */

.screen{ display:none; width:100%; max-width:640px; }
.screen.is-on{ display:block; margin-block:auto; animation:rise .55s var(--ease) both; }
.stage--wide .screen{ max-width:none; }
@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* Heart mark that anchors the centred composition. */
.mark{
  width:34px; height:34px; margin:0 auto 26px; display:block;
  fill:var(--blush); stroke:none;
  filter:drop-shadow(0 0 18px rgba(233,160,174,.45));
  animation:beat 2.6s var(--ease) infinite;
}
@keyframes beat{
  0%,100%{ transform:scale(1) }
  8%{ transform:scale(1.16) }
  16%{ transform:scale(1) }
  24%{ transform:scale(1.09) }
  32%{ transform:scale(1) }
}

/* ------------------------------------------------------------- buttons */

.choice{ display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:48px; min-height:60px; }

.btn{
  font-family:var(--sans); font-size:1rem; font-weight:600;
  border-radius:999px; border:1px solid transparent;
  padding:15px 34px; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease),
             background .2s var(--ease), color .2s var(--ease), opacity .3s;
}
.btn:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; }

.btn--yes{
  background:var(--lamp); color:#1A1208;
  box-shadow:0 12px 34px -14px rgba(242,193,115,.85);
  transform-origin:center;
}
.btn--yes:hover{ box-shadow:0 0 34px -6px rgba(242,193,115,.55), 0 16px 40px -14px rgba(242,193,115,.9); }
.btn--yes[disabled]{ opacity:.3; cursor:not-allowed; box-shadow:none; }

/* Legible on its own, not a ghost of the "yes" button. */
.btn--no{
  background:var(--surface-2); color:var(--text); border-color:var(--muted-2);
  box-shadow:0 8px 22px -14px rgba(0,0,0,.9);
  z-index:40;
}
.btn--no:hover{ border-color:var(--blush); }

/* Loose: driven by transform so the glide is smooth, with a soft trail of
   shadow that keeps it findable against the dark ground. */
.btn--no.is-loose{
  position:fixed; left:0; top:0; margin:0; will-change:transform;
  transition:transform .58s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s;
  box-shadow:0 0 0 1px rgba(233,160,174,.30), 0 14px 40px -12px rgba(233,160,174,.45);
}

/* It stopped running. Now it looks pressable — because it is. */
.btn--no.is-caught{
  background:var(--blush); color:#2B0E17; border-color:transparent;
  box-shadow:0 14px 34px -12px rgba(233,160,174,.85);
}

.btn--ghost{ background:transparent; color:var(--muted); border-color:var(--line); }
.btn--ghost:hover{ color:var(--text); border-color:var(--muted-2); }

/* ---------------------------------------------------------------- plan */

.steps{ display:flex; flex-direction:column; gap:38px; margin-top:44px; }
/* Автопрокрутка к шагу не должна прижимать его вплотную к верхней кромке. */
.step, .confirm-bar{ scroll-margin-top:20px; }
.step{ transition:opacity .45s var(--ease), filter .45s var(--ease); }
.step.is-locked{ opacity:.28; pointer-events:none; filter:saturate(.4); }
.step-head{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; }
.stage--wide .step-head{ justify-content:flex-start; }
.step-num{
  font-family:var(--mono); font-size:.72rem; color:var(--lamp-dim);
  border:1px solid var(--line); border-radius:999px;
  width:26px; height:26px; display:grid; place-items:center; flex:none;
}

.day-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.day{
  flex:0 0 auto; width:106px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:14px 12px 16px; text-align:center; cursor:pointer; color:var(--text);
  font-family:var(--sans); transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.day:hover{ border-color:var(--muted-2); transform:translateY(-2px); }
.day.is-sel{ border-color:var(--lamp); background:linear-gradient(180deg, rgba(242,193,115,.13), rgba(242,193,115,.03)); }
.day-dow{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2); }
.day.is-sel .day-dow{ color:var(--lamp-dim); }
.day-num{ font-family:var(--serif); font-size:2rem; line-height:1.1; margin-top:6px; font-variant-numeric:tabular-nums; }
.day-mon{ font-size:.82rem; color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.stage--wide .chips{ justify-content:flex-start; }
.chip{
  font-family:var(--mono); font-size:.92rem; font-variant-numeric:tabular-nums;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--text);
  border-radius:999px; padding:10px 18px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.chip:hover{ border-color:var(--muted-2); }
.chip.is-sel{ border-color:var(--lamp); background:rgba(242,193,115,.12); color:var(--lamp); }

.place-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.place{
  flex:0 0 auto; width:168px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:18px 16px; text-align:center; cursor:pointer; color:var(--text); font-family:var(--sans);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.place:hover{ border-color:var(--muted-2); transform:translateY(-2px); }
.place.is-sel{ border-color:var(--lamp); background:linear-gradient(180deg, rgba(242,193,115,.13), rgba(242,193,115,.03)); }
.place svg{ width:24px; height:24px; stroke:var(--muted); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.place.is-sel svg{ stroke:var(--lamp); }
.place-name{ font-size:1rem; font-weight:600; }
.place-note{ font-size:.82rem; color:var(--muted-2); line-height:1.45; }

.confirm-bar{ margin-top:46px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }

/* -------------------------------------------------------------- ticket */

.ticket{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); margin-top:38px; overflow:hidden;
  animation:print .7s var(--ease) both;
}
@keyframes print{ from{opacity:0; transform:translateY(-22px) scaleY(.96); transform-origin:top} to{opacity:1; transform:none} }
.ticket-top{ padding:26px 28px 22px; }
.ticket-rip{
  position:relative; height:1px;
  background-image:linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);
  background-size:12px 1px;
}
.ticket-rip::before, .ticket-rip::after{
  content:""; position:absolute; top:-9px; width:18px; height:18px;
  border-radius:50%; background:var(--night); border:1px solid var(--line);
}
.ticket-rip::before{ left:-10px; }
.ticket-rip::after{ right:-10px; }
.ticket-body{ padding:26px 28px 30px; display:flex; flex-direction:column; gap:22px; }
.row{ margin:0; display:flex; flex-direction:column; gap:6px; align-items:center; }
.row dt{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-2); }
.row dd{ margin:0; font-family:var(--mono); font-size:1.05rem; font-variant-numeric:tabular-nums; color:var(--text); }
.row dd .big{ font-family:var(--serif); font-size:1.35rem; }

.stamp{
  font-family:var(--serif); font-style:italic; font-size:2.1rem; color:var(--lamp);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.stamp svg{ width:26px; height:26px; fill:var(--blush); stroke:none; }
.stamp span{ font-family:var(--mono); font-style:normal; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }

/* --------------------------------------------------------------- admin */

.panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px; }
.admin-sec{ margin-top:34px; }
.admin-sec > .label{ margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }

input[type=text], input[type=password], select, textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--lamp-dim); }

.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cal-title{ font-family:var(--serif); font-size:1.2rem; }
.nav-btn{
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  border-radius:9px; width:34px; height:34px; cursor:pointer; font-size:1rem; line-height:1;
}
.nav-btn:hover{ color:var(--text); border-color:var(--muted-2); }
.dow-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.dow-row span{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); text-align:center; }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cell{
  aspect-ratio:1/1; border-radius:10px; border:1px solid var(--line-soft);
  background:var(--surface-2); color:var(--muted); cursor:pointer;
  font-family:var(--mono); font-size:.9rem; font-variant-numeric:tabular-nums;
  display:grid; place-items:center; position:relative;
  transition:border-color .15s, background .15s, color .15s;
}
.cell:hover{ border-color:var(--muted-2); color:var(--text); }
.cell.is-free{ background:rgba(242,193,115,.14); border-color:var(--lamp-dim); color:var(--lamp); }
.cell.is-focus{ outline:2px solid var(--lamp); outline-offset:1px; }
.cell.is-past{ opacity:.25; cursor:not-allowed; }
.cell.is-blank{ background:none; border:none; cursor:default; }
.cell.is-booked{ background:rgba(143,203,155,.16); border-color:var(--ok); color:var(--ok); }
.cell .dot{ position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:currentColor; }

.toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mini{
  font-family:var(--sans); font-size:.8rem; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; cursor:pointer; transition:color .2s, border-color .2s;
}
.mini:hover{ color:var(--text); border-color:var(--muted-2); }
.mini--danger:hover{ color:var(--blush); border-color:var(--wine); }
.mini[disabled]{ opacity:.4; cursor:not-allowed; }

.slot-box{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }

.place-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.place-row:last-child{ border-bottom:none; }
.place-row svg{ width:20px; height:20px; stroke:var(--muted-2); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.place-row.is-on svg{ stroke:var(--lamp); }
.place-row-txt{ flex:1; min-width:0; }
.place-row-txt b{ font-weight:600; font-size:.95rem; }
.place-row-txt i{ display:block; font-style:normal; font-size:.8rem; color:var(--muted-2); }

.toggle{
  width:42px; height:24px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); position:relative; cursor:pointer; flex:none;
  transition:background .2s, border-color .2s;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--muted-2); transition:transform .2s var(--ease), background .2s;
}
.place-row.is-on .toggle{ background:rgba(242,193,115,.2); border-color:var(--lamp-dim); }
.place-row.is-on .toggle::after{ transform:translateX(18px); background:var(--lamp); }

.answer{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.answer:last-child{ border-bottom:none; }
.answer svg{ width:22px; height:22px; stroke:var(--ok); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.answer-txt{ flex:1; min-width:0; }
.answer-when{ font-family:var(--mono); font-size:.95rem; font-variant-numeric:tabular-nums; }
.answer-meta{ font-size:.8rem; color:var(--muted-2); }

.stat{ font-family:var(--mono); font-size:.78rem; color:var(--muted-2); letter-spacing:.06em; }
.stat b{ color:var(--lamp); font-weight:400; }

.save-bar{
  position:sticky; bottom:0; z-index:20; margin-top:34px;
  padding:16px 0; background:linear-gradient(180deg, transparent, var(--night) 34%);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:11px 22px; font-size:.88rem; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease); z-index:50;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }
.toast.is-bad{ border-color:var(--wine); color:var(--blush); }

.foot{ margin-top:56px; padding-top:22px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.link{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.link:hover{ color:var(--lamp); }

.empty{ grid-column:1 / -1; padding:26px; border:1px dashed var(--line); border-radius:var(--r); color:var(--muted); font-size:.95rem; }

/* ----------------------------------------------------- синий экран смерти */

.bsod{
  position:fixed; inset:0; z-index:100;
  background:#0078D7; color:#fff;
  font-family:var(--sans); text-align:left;
  overflow-y:auto; padding:clamp(28px,7vh,90px) clamp(22px,9vw,120px);
  display:flex; align-items:center;
  animation:bsod-in .12s steps(2) both;
}
.bsod[hidden]{ display:none; }
@keyframes bsod-in{ from{opacity:0} to{opacity:1} }

.bsod-inner{ max-width:820px; width:100%; }
.bsod-face{ font-size:clamp(4.5rem,13vw,8rem); line-height:1; font-weight:300; margin-bottom:26px; }
.bsod-lead{ font-size:clamp(1.05rem,2.3vw,1.5rem); line-height:1.45; margin:0 0 26px; max-width:32ch; font-weight:300; }
.bsod-pct{ font-size:clamp(1.05rem,2.3vw,1.5rem); margin:0 0 34px; font-weight:300; font-variant-numeric:tabular-nums; }

.bsod-tech{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.bsod-qr{ width:104px; height:104px; flex:none; background:#fff; padding:6px; }
.bsod-qr rect{ fill:#0078D7; }
.bsod-tech-txt{ flex:1; min-width:250px; }
.bsod-tech-txt p{ margin:0 0 6px; font-size:.86rem; line-height:1.5; font-weight:300; }
.bsod-url{ opacity:.9; }
.bsod-stop{ margin-top:12px !important; font-size:.92rem !important; }
.bsod-stop b{ font-weight:600; }
.bsod-codes{
  margin:12px 0 0; font-family:var(--mono); font-size:.74rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-all; opacity:.88;
}

.bsod-done{ margin-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.bsod-verdict{ margin:0; font-size:1rem; font-weight:300; }
.bsod-done .btn--yes{ background:#fff; color:#0B3C63; box-shadow:none; }
.bsod-done .btn--yes:hover{ box-shadow:0 0 0 3px rgba(255,255,255,.28); }

.login{ max-width:360px; margin:14vh auto 0; }

@media (max-width:520px){
  .row{ grid-template-columns:78px 1fr; }
  .btn{ padding:14px 28px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.06s !important; }
}