@font-face { font-family: 'Heebo'; font-weight: 400; font-display: swap; src: url(/room/fonts/heebo-400-hebrew.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 400; font-display: swap; src: url(/room/fonts/heebo-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 500; font-display: swap; src: url(/room/fonts/heebo-500-hebrew.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 500; font-display: swap; src: url(/room/fonts/heebo-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Heebo'; font-weight: 700; font-display: swap; src: url(/room/fonts/heebo-700-hebrew.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 700; font-display: swap; src: url(/room/fonts/heebo-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Heebo'; font-weight: 800; font-display: swap; src: url(/room/fonts/heebo-800-hebrew.woff2) format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 800; font-display: swap; src: url(/room/fonts/heebo-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg: #17120E; --ink: #F7F1E8; --muted: #B9AC9C; --accent: #FFB81C; --accent-ink: #1C1406;
  --field: #221B15; --card: #1E1812; --line: rgba(247, 241, 232, 0.14); --danger: #FF8A7A; --ok: #8FD69B;
}
html, body { margin: 0; min-block-size: 100%; background: var(--bg); color: var(--ink); font-family: 'Heebo', system-ui, sans-serif; }
body { background-image: radial-gradient(60% 40% at 50% 0%, rgba(255, 184, 28, 0.10), transparent 70%); }
.wrap { min-block-size: 100dvh; display: grid; align-content: start; justify-items: center; gap: 18px; padding: 32px 20px 48px; box-sizing: border-box; }
.mark { display: block; block-size: 36px; inline-size: auto; aspect-ratio: 225.3 / 96.35; color: var(--ink); }
.card { inline-size: min(520px, 100%); box-sizing: border-box; padding: 28px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.card h1 { margin: 4px 0 6px; font-size: 24px; line-height: 1.3; }
.org { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.when { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--accent); }
.when-icon { font-size: 18px; line-height: 1; }
.duration { color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
.description { margin: 14px 0 0; color: var(--muted); line-height: 1.6; white-space: pre-line; }
.count { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.form { display: grid; gap: 14px; margin-block-start: 22px; }
.field { display: grid; gap: 6px; }
.field label, .consent { font-size: 14px; color: var(--muted); }
.opt { font-size: 12px; }
.field input {
  font: inherit; font-size: 17px; padding-block: 12px; padding-inline: 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--field); color: var(--ink); outline: none;
}
.field input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.22); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.error { margin: 0; font-size: 13px; color: var(--danger); line-height: 1.5; }
.consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; cursor: pointer; }
.consent input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
button, .btn {
  font: inherit; font-weight: 700; font-size: 16px; padding-block: 13px; padding-inline: 22px;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; text-align: center;
}
button:disabled { opacity: 0.6; cursor: progress; }
button:focus-visible, .btn:focus-visible { outline: 3px solid rgba(255, 184, 28, 0.45); outline-offset: 2px; }
#go { margin-block-start: 6px; }

.state, .done { text-align: center; display: grid; justify-items: center; gap: 8px; }
.state p, .done p { margin: 0; color: var(--muted); line-height: 1.6; max-inline-size: 44ch; }
.check { inline-size: 56px; block-size: 56px; display: grid; place-content: center; border-radius: 50%; background: rgba(143, 214, 155, 0.14); color: var(--ok); font-size: 28px; font-weight: 800; }
.done .btn { inline-size: 100%; box-sizing: border-box; margin-block-start: 12px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-block-start: 4px; }
.link { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.linkbox { inline-size: 100%; display: grid; gap: 6px; margin-block-start: 14px; text-align: start; font-size: 13px; color: var(--muted); }
.copyrow { display: flex; gap: 8px; }
.copyrow input { flex: 1; min-inline-size: 0; font: inherit; font-size: 13px; padding-block: 10px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); }
.copyrow button { padding-block: 10px; padding-inline: 16px; font-size: 14px; background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.push { margin-block-start: 16px; text-align: start; }