:root {
  --navy: #122048;
  --navy-deep: #0a1430;
  --gold: #c9a45c;
  --gold-soft: #f3dca0;
  --ink: #141a2e;
  --muted: #5d6478;
  --line: #dfe2ea;
  --bg: #f5f4f0;
  --card: #ffffff;
  --error: #b42318;
  --radius: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
[hidden] { display: none !important; }
a { color: var(--navy); }

/* ---------- layout ---------- */
.site-header {
  display: flex; justify-content: center;
  padding: 28px 16px 8px;
}
.header-logo { width: 190px; height: auto; }
.wrap { max-width: 620px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 20px; }
.wrap.wide { max-width: 1200px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(18,32,72,.04), 0 8px 24px rgba(18,32,72,.05);
}
.site-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 0 16px 40px; }
@media (max-width: 520px) { .card { padding: 22px 18px; } }

/* locked: only the password box exists on screen */
body.locked .site-header, body.locked .wrap, body.locked .site-footer, body.locked #intro { display: none !important; }
body:not(.locked) #lock { display: none; }
#lock { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.lock-card { width: min(340px, 100%); display: grid; gap: 14px; }
#intro:not(.play) { display: none; }

/* page reveal after intro */
body.intro-running .site-header,
body.intro-running .wrap,
body.intro-running .site-footer { opacity: 0; transform: translateY(14px); }
.site-header, .wrap, .site-footer { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.wrap { transition-delay: .08s; }
.site-footer { transition-delay: .16s; }

/* ---------- type ---------- */
h1, h2 { font-family: "Cormorant Garamond", Georgia, serif; color: var(--navy); font-weight: 600; margin: 0; }
h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.1; }
h2 { font-size: 28px; line-height: 1.2; margin-bottom: 6px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 600; color: var(--gold); margin: 0 0 10px; }
.muted { color: var(--muted); margin: 0 0 16px; }
.rule { width: 56px; height: 2px; background: var(--gold); margin: 20px 0; }

/* ---------- event details ---------- */
.event { text-align: left; }
.details { margin: 0; display: grid; gap: 14px; }
.details > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.details dt { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding-top: 3px; }
.details dd { margin: 0; font-weight: 500; }
@media (max-width: 420px) { .details > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- forms ---------- */
.stack { display: grid; gap: 20px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: grid; gap: 8px; }
.field > span, legend { font-weight: 600; font-size: 14px; color: var(--ink); padding: 0; margin-bottom: 8px; }
fieldset.field { display: grid; gap: 12px; }
fieldset.field > legend { margin-bottom: 4px; }
input[type=text], input[type=password], input[type=search] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,32,72,.12); }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg label, .checks label { position: relative; cursor: pointer; }
.seg input, .checks input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center;
  padding: 12px 10px; border: 1px solid var(--line); border-radius: 10px;
  font-weight: 500; transition: all .15s;
}
.seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg input:focus-visible + span, .checks input:focus-visible + span { box-shadow: 0 0 0 3px rgba(18,32,72,.2); }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; transition: all .15s; user-select: none;
}
.checks span::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #9aa1b4;
  transition: all .15s;
}
.checks input:checked + span { border-color: var(--navy); background: #eef1f8; color: var(--navy); font-weight: 500; }
.checks input:checked + span::before {
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--navy);
}

.btn {
  font: inherit; font-weight: 600; letter-spacing: .02em;
  background: var(--navy); color: #fff;
  border: 0; border-radius: 10px; padding: 14px 20px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-ghost:hover { background: #eef1f8; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.error { color: var(--error); margin: 0; min-height: 0; font-size: 14px; }
.error:empty { display: none; }
.hint { margin: -8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.hint:empty { display: none; }

.summary { display: grid; gap: 10px; margin: 0 0 20px; }
.summary > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--muted); font-size: 14px; }
.summary dd { margin: 0; font-weight: 500; }
@media (max-width: 420px) { .summary > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- intro animation ---------- */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #1b2d63 0%, var(--navy) 45%, var(--navy-deep) 100%);
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s;
}
#intro.out { opacity: 0; visibility: hidden; }
#intro.out .logo-stage { transform: scale(.82) translateY(-30px); }
.intro-glow {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,92,.22) 0%, rgba(201,164,92,0) 60%);
  opacity: 0; animation: glow 2.4s ease-out .9s forwards;
}
@keyframes glow { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }

.intro-logo { height: auto; overflow: visible; }
.intro-logo path { fill: #fff; transform-box: fill-box; }

/* swooshes: trace the outline, then fill */
.swoosh {
  fill-opacity: 0; stroke: #fff; stroke-width: .6;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards, fillIn .5s ease forwards;
}
.s1 { animation-delay: .15s, 1.05s; }
.s2 { animation-delay: .3s, 1.15s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { fill-opacity: 1; stroke-opacity: 0; } }

/* chevron pieces fly in (animate `translate`, not `transform`, so the paths keep their transform= offsets) */
.chev { opacity: 0; }
.c1 { animation: chev1 .7s cubic-bezier(.2,.8,.2,1) .7s forwards; }
.c2 { animation: chev2 .7s cubic-bezier(.2,.8,.2,1) .85s forwards; }
@keyframes chev1 { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes chev2 { from { opacity: 0; translate: -18px 22px; } to { opacity: 1; translate: 0 0; } }

/* per-letter stagger index (kept here: CSP blocks inline style attributes) */
#word > path:nth-child(1) { --i: 0; }
#word > path:nth-child(2) { --i: 1; }
#word > path:nth-child(3) { --i: 2; }
#word > path:nth-child(4) { --i: 3; }
#word > path:nth-child(5) { --i: 4; }
#word > path:nth-child(7) { --i: 0; }
#word > path:nth-child(8) { --i: 1; }
#word > path:nth-child(9) { --i: 2; }
#word > path:nth-child(10) { --i: 3; }
#word > path:nth-child(11) { --i: 4; }
#word > path:nth-child(12) { --i: 5; }
#word > path:nth-child(13) { --i: 6; }
/* FLYER letters rise with blur */
.ltr { opacity: 0; animation: rise .65s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(1s + var(--i) * .08s); }
@keyframes rise { from { opacity: 0; translate: 0 14px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.tm { opacity: 0; animation: fade .4s ease 1.55s forwards; }

/* DEFENSE letters fade + spread */
.sub { opacity: 0; animation: spread .5s ease forwards; animation-delay: calc(1.45s + var(--i) * .05s); }
@keyframes spread { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { to { opacity: 1; } }

/* gold sweep: a gradient masked by the logo itself, so it lines up exactly */
.logo-stage { position: relative; width: min(78vw, 560px); transition: transform .8s cubic-bezier(.6,0,.2,1); }
.logo-stage .intro-logo { width: 100%; display: block; }
.sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/logo.svg) center / 100% 100% no-repeat;
          mask: url(/logo.svg) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(243,220,160,.95) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  animation: sheen 1s cubic-bezier(.4,0,.2,1) 1.95s forwards;
}
@keyframes sheen { to { background-position: 0 0; } }

.intro-tag {
  position: relative;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(18px, 3.4vw, 26px);
  letter-spacing: .32em; text-transform: uppercase; color: var(--gold-soft);
  opacity: 0; animation: tag .9s ease 2.05s forwards;
  text-align: center; padding: 0 16px;
}
@keyframes tag { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .32em; } }
.intro-skip {
  position: absolute; bottom: 22px; right: 22px;
  background: none; border: 0; color: rgba(255,255,255,.45); font: 13px Inter, sans-serif; cursor: pointer;
}
.intro-skip:hover { color: #fff; }

/* falling sparkles */
.spark {
  position: absolute; top: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-soft); box-shadow: 0 0 6px rgba(243,220,160,.8);
  animation: fall linear forwards; opacity: 0;
}
@keyframes fall {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), 105vh); }
}

@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  body.intro-running .site-header, body.intro-running .wrap, body.intro-running .site-footer { opacity: 1; transform: none; }
}

/* ---------- admin ---------- */
.admin-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat .num { font-size: 30px; font-weight: 600; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 13px; color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f7f8fb; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.nowrap { white-space: nowrap; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.yes { background: #e6f4ea; color: #1e6b35; }
.pill.no { background: #f6e8e8; color: #8a2a2a; }
.pill.plus { background: #f6efe0; color: #8a6a26; }
tr:has(+ tr.plus-row) td { border-bottom-color: transparent; }
tr.plus-row td { background: #fbfaf6; padding-top: 6px; }
tr.plus-row.sel td { background: #eef1f8; }
tr.plus-row .nm { font-weight: 500; }
tr.plus-row .elbow { color: var(--gold); font-weight: 600; }
.plus-of { font-size: 12px; color: var(--muted); }
.btn-danger { background: var(--error); }
.btn-danger:hover { background: #8f1c13; }
.btn-danger:disabled { background: #d9a6a1; }
td.pick, th.pick { width: 36px; padding-right: 0; }
td.pick input, th.pick input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--navy); }
tr.sel td { background: #f3f5fb; }
.name-cell .nm { font-weight: 600; }
.name-cell .del { margin-top: 4px; }
.del { background: none; border: 0; color: var(--error); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
#search { max-width: 260px; padding: 9px 12px; }


/* ================= chat with Flyer Bot ================= */
body:not(.locked) { background: radial-gradient(ellipse at top, #fbf8f1 0%, var(--bg) 55%, #ebe8e0 100%) fixed; }
.chat-wrap { max-width: 460px; padding-top: 4px; }
.chat {
  display: flex; flex-direction: column;
  height: min(780px, calc(100dvh - 120px)); min-height: 480px;
  background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(18,32,72,.04), 0 24px 60px rgba(18,32,72,.12);
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
}
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
.who { font-weight: 600; font-size: 16px; line-height: 1.2; }
.status { font-size: 12.5px; color: var(--muted); min-height: 1.2em; }
.head-logo { display: none; margin-left: auto; width: 84px; height: auto; }

.thread {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 14px 10px; display: flex; flex-direction: column; gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.msg { display: flex; }
.msg.sefe { justify-content: flex-start; }
.msg.me { justify-content: flex-end; }
.msg + .msg.me, .msg.me + .msg.sefe, .msg.typing + .msg { margin-top: 6px; }
.bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 20px;
  font-size: 15.5px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap;
  animation: pop .28s cubic-bezier(.2,.9,.3,1.25) both;
}
.msg.sefe .bubble { background: #eef0f5; color: var(--ink); border-bottom-left-radius: 6px; transform-origin: bottom left; }
.msg.me .bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 6px; transform-origin: bottom right; }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: none; } }

.typing .bubble { display: inline-flex; gap: 4px; padding: 13px 15px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa1b4; animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* rich bubbles */
.bubble:has(.event-card), .bubble:has(.summary-card) { padding: 0; background: #fff !important; border: 1px solid var(--line); overflow: hidden; width: 82%; }
.event-card { border-top: 3px solid var(--gold); }
.ec-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 21px; font-weight: 600; color: var(--navy); line-height: 1.15; padding: 14px 16px 6px; }
.ec-row, .sc-row { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 8px 16px; font-size: 14px; }
.ec-row + .ec-row, .sc-row + .sc-row { border-top: 1px solid #f0f1f5; }
.ec-row:last-child, .sc-row:last-child { padding-bottom: 14px; }
.ec-k, .sc-k { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.ec-v, .sc-v { font-weight: 500; }
.summary-card { padding-top: 6px; }

/* composer */
.composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); min-height: 66px; background: #fff; }
.composer:empty::before { content: ""; display: block; height: 44px; border-radius: 22px; background: #f5f6f9; }
.compose-form { display: flex; gap: 8px; align-items: center; animation: rise-in .25s ease both; }
.compose-input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 22px; background: #f8f9fb; color: var(--ink);
}
.compose-input:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(18,32,72,.1); }
.send-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; font-size: 20px; font-weight: 700; display: grid; place-items: center;
  transition: transform .15s, opacity .15s;
}
.send-btn:disabled { opacity: .3; cursor: default; }
.send-btn:not(:disabled):active { transform: scale(.92); }

.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; animation: rise-in .25s ease both; }
.quick-btn {
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  padding: 10px 16px; min-height: 44px; border-radius: 22px;
  border: 1.5px solid var(--navy); background: #fff; color: var(--navy);
  transition: background .15s, color .15s, transform .1s;
}
.quick-btn:hover { background: #eef1f8; }
.quick-btn:active { transform: scale(.96); }
.quick-btn.chip.on { background: var(--navy); color: #fff; }
.quick-btn.done { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.quick-btn.done:disabled { opacity: .35; cursor: default; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; }
}

/* phones (portrait, and landscape where the keyboard leaves very little room):
   the chat is the whole screen, like a real messaging app */
@media (max-width: 600px), (max-height: 520px) and (pointer: coarse) {
  body:not(.locked) .site-header { display: none; }
  .chat-wrap { padding: 0; max-width: none; }
  .chat { height: var(--vvh, 100dvh); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .chat-wrap { position: fixed; inset: 0 0 auto 0; top: var(--vvtop, 0px); }
  html:has(body:not(.locked)), body:not(.locked) { overflow: hidden; height: 100%; overscroll-behavior: none; }
  body:not(.locked):not(.intro-running) { background: #fff; }
  .chat-head { padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .head-logo { display: block; }
  .bubble { max-width: 86%; }
  .bubble:has(.event-card), .bubble:has(.summary-card) { width: 90%; max-width: 90%; }
}

/* question progress under the chat header */
.progress-strip { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: #fbfaf6; }
.ps-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--navy); white-space: nowrap; min-width: 92px; font-variant-numeric: tabular-nums; }
.ps-track { flex: 1; height: 6px; border-radius: 3px; background: #e7e3d8; overflow: hidden; }
.ps-badge { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #6b5420; background: #f3e6c4; border-radius: 999px; padding: 2px 8px; animation: badge-in 3.2s ease both; }
@keyframes badge-in { 0% { opacity: 0; transform: scale(.8); } 10%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.progress-strip.grew .ps-label { animation: count-pop .7s ease; }
@keyframes count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: #8a6a22; } 100% { transform: scale(1); } }
.ps-label { display: inline-block; transform-origin: left center; }
.ps-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #d9bb7a); transition: width .5s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 600px) { .progress-strip { padding: 7px 14px; } }

/* landscape phones: keep content clear of the camera notch (must stay last) */
@media (max-height: 520px) and (pointer: coarse) {
  .chat-head { padding: 6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
  .chat-head .avatar { width: 34px; height: 34px; }
  .thread, .composer, .progress-strip { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .bubble { max-width: 70%; }
}