/* ==========================================================================
   pecniq — invitation gate + control room (same tokens as css/style.css)
   ========================================================================== */

:root {
  --bg: #050a16;
  --bg-2: #0a1730;
  --fg: #d9e4f5;
  --fg-dim: rgba(217, 228, 245, 0.56);
  --fg-faint: rgba(217, 228, 245, 0.14);
  --line: rgba(217, 228, 245, 0.12);
  --accent: #4f8dff;
  --accent-2: #8fd8ff;
  --ok: #6ee7b7;
  --bad: #fb7185;

  --display: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--fg); font-family: var(--display); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
em { font-style: normal; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-stretch: 100%; text-transform: none; }
[hidden] { display: none !important; }

/* backdrop ---------------------------------------------------------------- */
.g-stars, .g-sky, .g-vignette, .g-flash { position: fixed; inset: 0; pointer-events: none; }
.g-stars { width: 100%; height: 100%; z-index: 0; }
.g-sky { z-index: 1; background:
  radial-gradient(60% 50% at 50% 110%, rgba(79, 141, 255, 0.28), transparent 70%),
  radial-gradient(40% 35% at 85% 10%, rgba(143, 216, 255, 0.10), transparent 70%),
  radial-gradient(50% 40% at 10% 30%, rgba(79, 141, 255, 0.10), transparent 70%); }
.g-vignette { z-index: 2; background: radial-gradient(ellipse at center, transparent 45%, rgba(1, 4, 12, 0.88) 100%); }
.g-flash { z-index: 50; background: radial-gradient(circle at 50% 55%, #fff, #cfe6ff 40%, var(--accent-2)); opacity: 0; }

.g-frame { position: fixed; inset: 22px; z-index: 3; pointer-events: none; color: var(--fg-dim); }
.g-frame i { position: absolute; width: 28px; height: 28px; border: 1px solid var(--accent); opacity: 0.8; }
.g-frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.g-frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.g-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.g-frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.g-frame span { position: absolute; }
.g-frame__tl { top: 14px; left: 44px; } .g-frame__tr { top: 14px; right: 44px; display: flex; align-items: center; gap: 8px; }
.g-frame__bl { bottom: 14px; left: 44px; } .g-frame__br { bottom: 14px; right: 44px; }
.g-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* stage ------------------------------------------------------------------- */
.gate { position: relative; z-index: 5; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 18px; padding: 90px 20px 70px; text-align: center; }
.gate__mark { width: 74px; height: 72px; overflow: visible; filter: drop-shadow(0 0 18px rgba(143, 216, 255, 0.55)); margin-bottom: 4px; }
.gate__mark path { fill: transparent; stroke: var(--accent-2); stroke-width: 3; }
.gate__kicker { color: var(--accent-2); }
.gate__title { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 8.4vw, 124px); letter-spacing: -0.05em; line-height: 0.88; }
.gate__title span { background: linear-gradient(180deg, #fff 10%, #a9c4ee 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate__title em { display: block; font-size: 0.72em; color: var(--accent-2); margin-top: -0.06em; }
.gate__lede { max-width: 470px; color: var(--fg-dim); font-size: 16px; }

/* ticket ------------------------------------------------------------------ */
.ticket { position: relative; width: min(520px, 100%); margin-top: 18px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, rgba(20, 32, 62, 0.7), rgba(8, 14, 30, 0.82)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85), 0 0 90px -40px var(--accent); transition: border-color 0.4s, box-shadow 0.6s; }
.ticket__glow { position: absolute; top: -1px; left: 30px; right: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); }
.ticket__label { display: block; color: var(--fg-dim); margin-bottom: 12px; }
.ticket__row { display: flex; gap: 10px; }
.ticket__input { flex: 1; min-width: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2, 6, 16, 0.55);
  font-family: var(--mono); font-size: clamp(20px, 3.4vw, 26px); letter-spacing: 0.28em; text-transform: uppercase; color: #fff; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.ticket__input::placeholder { color: var(--fg-faint); }
.ticket__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79, 141, 255, 0.16); }
.ticket__go { display: inline-flex; align-items: center; gap: 12px; padding: 0 24px; border-radius: 14px; color: var(--bg); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 40px -10px var(--accent); transition: transform 0.4s var(--ease-out), opacity 0.3s; }
.ticket__go b { transition: transform 0.4s var(--ease-out); }
.ticket__go:hover { transform: translateY(-2px); }
.ticket__go:hover b { transform: translateX(4px); }
.ticket__go:disabled { opacity: 0.6; cursor: wait; }
.ticket__go:focus-visible, .ask a:focus-visible, .ask button:focus-visible { outline: 1px solid var(--accent-2); outline-offset: 3px; }
.ticket__msg { margin-top: 12px; color: var(--fg-dim); min-height: 1.5em; font-size: 10px; }
.ticket.is-bad { border-color: rgba(251, 113, 133, 0.5); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85), 0 0 90px -30px var(--bad); animation: shake 0.5s var(--ease-out); }
.ticket.is-bad .ticket__msg { color: var(--bad); }
.ticket.is-ok { border-color: rgba(110, 231, 183, 0.5); box-shadow: 0 0 120px -20px var(--ok); }
.ticket.is-ok .ticket__msg { color: var(--ok); }
@keyframes shake { 15%, 55% { transform: translateX(-10px); } 35%, 75% { transform: translateX(8px); } 90% { transform: translateX(-3px); } }

/* ask --------------------------------------------------------------------- */
.ask { margin-top: 14px; display: grid; gap: 14px; justify-items: center; }
.ask__title { font-size: 15px; color: var(--fg-dim); }
.ask__title .serif { color: var(--fg); font-size: 1.25em; }
.ask__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ask__links a, .ask__links button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; background: rgba(10, 23, 48, 0.4); transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out); }
.ask__links a:hover, .ask__links button:hover { border-color: var(--accent); background: rgba(79, 141, 255, 0.12); transform: translateY(-2px); }
.ask__links i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--bg); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* intro choreography (CSS only — the gate loads no libraries) -------------- */
.is-intro .g-in { opacity: 0; transform: translateY(26px); filter: blur(10px); }
.g-in { transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out), filter 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 900ms); }
.is-intro .g-frame { opacity: 0; }
.g-frame { transition: opacity 1.6s ease 0.4s; }
.gate__title.g-in { transition-duration: 1.6s; }
.is-intro .gate__title { letter-spacing: 0.2em; }
.gate__title { transition-property: opacity, transform, filter, letter-spacing; }
.is-leaving .gate > * { transition: opacity 0.6s ease, transform 0.9s var(--ease-io), filter 0.6s ease !important; transition-delay: 0s !important; opacity: 0; transform: scale(1.25); filter: blur(14px); }
.is-leaving .g-frame { transition: opacity 0.5s; opacity: 0; }

@media (max-width: 720px) {
  .g-frame { inset: 12px; }
  .g-frame__tr, .g-frame__br { display: none; }
  .g-frame__tl, .g-frame__bl { left: 30px; }
  .gate { padding: 70px 16px 56px; gap: 14px; }
  .gate__title { font-size: clamp(34px, 11.5vw, 60px); }
  .ticket__row { flex-direction: column; }
  .ticket__go { justify-content: space-between; padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-in, .g-frame { transition: none !important; }
  .ticket.is-bad { animation: none; }
}

/* ==========================================================================
   Control room (/invitation)
   ========================================================================== */
.cr { position: relative; z-index: 5; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; padding: 80px 20px 60px; display: grid; align-content: start; justify-items: center; }
.cr__login { width: min(420px, 100%); margin-top: 12vh; }
.cr__login .ticket { margin: 0; }
.cr__head { text-align: center; margin-bottom: 22px; display: grid; gap: 10px; justify-items: center; }
.cr__head .gate__mark { width: 52px; height: 50px; }
.cr__head h1 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.04em; line-height: 0.95; }
.cr__head h1 em { display: block; color: var(--accent-2); font-size: 0.8em; }
.field { display: grid; gap: 8px; margin-bottom: 14px; }
.field input { padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 6, 16, 0.55); outline: none; font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79, 141, 255, 0.16); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 12px; color: var(--bg); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 40px -12px var(--accent); transition: transform 0.4s var(--ease-out), opacity 0.3s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
.btn--ghost:hover { border-color: var(--accent); }
.btn--sm { padding: 8px 12px; font-size: 10px; border-radius: 9px; font-family: var(--mono); letter-spacing: 0.12em; font-weight: 400; }
.btn--bad:hover { border-color: var(--bad); color: var(--bad); }
.btn:focus-visible { outline: 1px solid var(--accent-2); outline-offset: 3px; }
.cr__login .btn { width: 100%; margin-top: 6px; }
.cr__setup { color: var(--fg-dim); font-size: 14px; }
.cr__setup code { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(2, 6, 16, 0.7); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--accent-2); }

.cr__board { width: min(1040px, 100%); display: grid; gap: 22px; }
.cr__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cr__brand { display: flex; align-items: center; gap: 14px; }
.cr__brand .gate__mark { width: 34px; height: 33px; margin: 0; }
.cr__brand b { display: block; font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.cr__brand small { color: var(--fg-dim); }
.cr__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 23, 48, 0.45); }
.stat b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; color: #fff; }
.stat span { color: var(--fg-dim); }
.panel { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, rgba(20, 32, 62, 0.62), rgba(8, 14, 30, 0.8)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.panel__title { color: var(--accent-2); margin-bottom: 14px; }
.gen { display: flex; gap: 10px; flex-wrap: wrap; }
.gen input { flex: 1 1 260px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 6, 16, 0.55); outline: none; font-size: 15px; }
.gen input:focus { border-color: var(--accent); }
.fresh { margin-top: 20px; padding: 22px; border-radius: 16px; border: 1px dashed rgba(143, 216, 255, 0.35); background: rgba(79, 141, 255, 0.07); display: grid; gap: 14px; justify-items: start; }
.fresh__code { font-family: var(--mono); font-size: clamp(30px, 6vw, 54px); letter-spacing: 0.18em; color: #fff; text-shadow: 0 0 30px rgba(143, 216, 255, 0.6); line-height: 1; }
.fresh__for { color: var(--fg-dim); }
.fresh__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fresh.is-new { animation: freshIn 0.9s var(--ease-out); }
@keyframes freshIn { from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(8px); } }

.codes { width: 100%; border-collapse: collapse; font-size: 14px; }
.codes th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--fg-dim); padding: 0 10px 10px; border-bottom: 1px solid var(--line); }
.codes td { padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.codes tr.is-off td:not(:last-child) { opacity: 0.45; }
.codes__code { font-family: var(--mono); letter-spacing: 0.12em; color: #fff; white-space: nowrap; }
.codes__for { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codes__muted { color: var(--fg-dim); white-space: nowrap; }
.codes__acts { display: flex; gap: 6px; justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line); color: var(--fg-dim); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--on { color: var(--ok); border-color: rgba(110, 231, 183, 0.3); }
.chip--wait { color: var(--accent-2); border-color: rgba(143, 216, 255, 0.3); }
.chip--off { color: var(--bad); border-color: rgba(251, 113, 133, 0.3); }
.codes__empty { padding: 30px 0 10px; color: var(--fg-dim); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 0.3s, transform 0.4s var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .cr { padding: 60px 14px 40px; }
  .cr__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 14px; } .stat b { font-size: 34px; }
  .stat span { font-size: 9px; }
  .codes thead { display: none; }
  .codes, .codes tbody, .codes tr, .codes td { display: block; }
  .codes tr { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
  .codes td { padding: 0; border: 0; }
  .codes td[data-k="created"], .codes td[data-k="seen"] { display: none; }
  .codes__acts { grid-column: 1 / -1; justify-content: flex-start; }
}