/* Shared structure of every invitation card (generalised from the original Rosa-Gold card).
   Templates restyle it by overriding the --inv-* variables in their own card.css. */

:root {
  --inv-bg: #fff;
  --inv-text: #333;
  --inv-accent: #e8508f;
  --inv-accent-soft: #ffb3d1;
  --inv-accent-gradient: linear-gradient(135deg, #ff85b3, #e8508f);
  --inv-highlight: #ffd86b;
  --inv-highlight-strong: #d4a017;
  --inv-highlight-light: #fff3b0;
  --inv-highlight-dark: #8a5a00;
  --inv-title-fill: linear-gradient(110deg, #b8860b, #ffd86b 20%, #fff3b0 35%, #d4a017 50%, #ffd86b 65%, #fff3b0 75%, #b8860b);
  --inv-title-glow: drop-shadow(0 2px 0 rgba(138, 90, 0, .35)) drop-shadow(0 0 12px rgba(255, 216, 107, .45));
  --inv-card-border: linear-gradient(135deg, #fff3b0, #d4a017, #ffb3d1, #ffd86b, #b8860b);
  --inv-card-bg: linear-gradient(180deg, rgba(255, 250, 253, .96), rgba(255, 240, 247, .96));
  --inv-shadow: rgba(232, 80, 143, .18);
  --inv-radius: 28px;
  --inv-font-body: system-ui, sans-serif;
  --inv-font-display: Georgia, serif;
  --inv-font-script: Georgia, serif;
  --inv-font-heading: Georgia, serif;
  --inv-title-size: clamp(3.6rem, 13vw, 6.2rem);
  --inv-floater-font: var(--inv-font-heading);
  --inv-floater-stroke: rgba(212, 160, 23, .28);
  --inv-floater-fill: linear-gradient(180deg, rgba(255, 216, 107, .18), rgba(255, 133, 179, .12));
  --inv-on-accent: #fff;
  --inv-surface: #fff;
  --inv-surface-soft: rgba(255, 255, 255, .7);
  --inv-floaters-opacity: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }

.inv-body {
  font-family: var(--inv-font-body);
  color: var(--inv-text);
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--inv-bg);
  background-attachment: fixed;
}

/* ---------- Footer under the card: "Made with yayinvite!" + legal links ---------- */
.inv-footer {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 16px 28px;
}
.inv-made-with {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  color: #2f2a26; text-decoration: none;
  font: 500 14px/1.2 system-ui, sans-serif;
  transition: transform .2s, box-shadow .2s;
}
.inv-made-with:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.inv-made-with strong { color: #5f7a64; font-weight: 700; }
.inv-made-with img { width: 22px; height: 22px; }
.inv-switch-guest-form { margin: 0 0 6px; }
.inv-switch-guest {
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--inv-text);
  font: 14px/1.4 system-ui, sans-serif; opacity: .75;
  transition: opacity .2s, background .2s;
}
.inv-switch-guest strong { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.inv-switch-guest:hover { opacity: 1; background: rgba(255, 255, 255, .5); }
.inv-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font: 12px/1.5 system-ui, sans-serif;
}
.inv-legal a { color: var(--inv-text); opacity: .55; text-decoration: none; }
.inv-legal a:hover { opacity: .9; text-decoration: underline; }

/* ---------- Shine text ---------- */
.inv-shine {
  background: var(--inv-title-fill);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: inv-shine 5s linear infinite;
  filter: var(--inv-title-glow);
}
@keyframes inv-shine { to { background-position: -250% center; } }

/* ---------- Background floaters & sparkles ---------- */
.inv-floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; opacity: var(--inv-floaters-opacity); }
.inv-floater {
  position: absolute;
  font-family: var(--inv-floater-font);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--inv-floater-stroke);
  background: var(--inv-floater-fill);
  -webkit-background-clip: text;
  background-clip: text;
  animation: inv-float linear infinite;
  user-select: none;
}
@keyframes inv-float {
  0%   { transform: translateY(110vh) rotate(var(--r0)); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-30vh) rotate(var(--r1)); opacity: 0; }
}
.inv-sparkle {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--inv-highlight) 40%, transparent 70%);
  animation: inv-twinkle ease-in-out infinite;
}
@keyframes inv-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* ---------- Layout ---------- */
.inv-main {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
  padding: 64px 16px 40px;
  display: flex; flex-direction: column; gap: 26px;
}

/* ---------- Hero ---------- */
.inv-hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
.inv-eyebrow {
  display: inline-block;
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem;
  color: var(--inv-accent);
  background: var(--inv-surface-soft);
  border: 1.5px solid var(--inv-highlight);
  padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px var(--inv-shadow);
}
.inv-title {
  font-family: var(--inv-font-display);
  font-weight: 400;
  font-size: var(--inv-title-size);
  line-height: 1.1; margin-top: 6px; padding: 0 .2em;
  overflow-wrap: anywhere;
}
.inv-age-row { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 14px; }
.inv-age-side {
  font-family: var(--inv-font-heading); font-style: italic;
  font-size: clamp(1.15rem, 4vw, 1.6rem); color: var(--inv-accent);
}
.inv-age-badge {
  position: relative; flex: none;
  width: 140px; height: 140px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--inv-accent-soft), var(--inv-accent) 70%);
  border: 3px solid var(--inv-highlight);
  box-shadow: 0 0 0 5px var(--inv-surface), 0 0 0 7px var(--inv-highlight-strong), 0 10px 26px var(--inv-shadow);
  animation: inv-wiggle 3s ease-in-out infinite;
}
.inv-age-badge::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 2px dashed var(--inv-highlight-strong); opacity: .7;
  animation: inv-spin 14s linear infinite;
}
.inv-age-badge span {
  font-family: var(--inv-font-heading); font-weight: 700;
  font-size: 5.4rem; line-height: 1;
  font-variant-numeric: lining-nums;
  display: block; transform: translateY(-4%);
  color: var(--inv-highlight-light);
  text-shadow: 0 2px 0 var(--inv-highlight-dark), 0 0 14px var(--inv-highlight);
}
@keyframes inv-spin { to { transform: rotate(360deg); } }
@keyframes inv-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg) scale(1.05); }
}
.inv-ribbon {
  position: relative; margin-top: 22px;
  padding: 9px 44px;
  font-weight: 600; font-size: clamp(1rem, 3.6vw, 1.2rem); letter-spacing: .04em;
  color: var(--inv-on-accent); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  background: var(--inv-accent-gradient);
  border-top: 2px solid var(--inv-highlight); border-bottom: 2px solid var(--inv-highlight);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  box-shadow: 0 6px 16px var(--inv-shadow);
}

/* ---------- Song button (floats top left) ---------- */
.inv-song {
  position: fixed; top: 22px; left: 22px; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  animation: inv-song-in 1.1s cubic-bezier(.2, .9, .3, 1.2) both, inv-song-float 4s ease-in-out 1.1s infinite;
}
@keyframes inv-song-in {
  0%   { transform: translate(-160px, -160px) rotate(-40deg) scale(.4); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes inv-song-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(4px, -6px) rotate(-4deg); }
  50%      { transform: translate(0, -10px) rotate(0deg); }
  75%      { transform: translate(-4px, -5px) rotate(4deg); }
}
.inv-song-btn {
  position: relative; display: grid; place-items: center;
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--inv-accent-gradient); color: var(--inv-on-accent);
  border: 3px solid var(--inv-highlight);
  font: 700 .8rem/1.1 var(--inv-font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 18px var(--inv-shadow);
  animation: inv-heartbeat 1.3s ease-in-out infinite;
}
.inv-song-btn.playing { animation-duration: .55s; }
.inv-song-btn:focus-visible { outline: 3px dashed var(--inv-highlight-strong); outline-offset: 6px; }
.inv-song-face { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.inv-song-icon { font-size: 1.6rem; line-height: 1; }
@keyframes inv-heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.13); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
}
.inv-ring {
  position: absolute; left: 50%; top: 50%;
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  border-radius: 50%; border: 3px solid var(--inv-highlight);
  opacity: 0; pointer-events: none;
  animation: inv-ring 1.3s ease-out infinite;
}
.playing .inv-ring { animation-duration: .55s; }
@keyframes inv-ring {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.inv-song-hint {
  margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--inv-accent);
  background: var(--inv-surface-soft); padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--inv-highlight); white-space: nowrap;
}

/* ---------- Cards ---------- */
.inv-card {
  position: relative;
  border-radius: var(--inv-radius);
  padding: 26px 28px;
  box-shadow: 0 10px 40px var(--inv-shadow);
  isolation: isolate;
}
.inv-card::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--inv-radius) + 2px);
  background: var(--inv-card-border);
}
.inv-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--inv-radius);
  background: var(--inv-card-bg);
}
.inv-letter { padding: 36px 28px; }
.inv-greeting {
  text-align: center; font-family: var(--inv-font-script); font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1.2; margin-bottom: 14px;
}
.inv-text { text-align: center; font-size: clamp(1.1rem, 3.6vw, 1.3rem); line-height: 1.75; }
.inv-text + .inv-text { margin-top: 14px; }
.inv-text strong, .inv-text b { color: var(--inv-accent); }
.inv-signature { font-family: var(--inv-font-script); font-size: 2.8rem; display: inline-block; margin-top: 12px; }
.inv-divider {
  height: 2px; margin: 14px auto; width: 70%;
  background: linear-gradient(90deg, transparent, var(--inv-highlight-strong), transparent);
}

/* ---------- Details ---------- */
.inv-details { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.inv-detail {
  text-align: center; padding: 10px 8px;
  background: var(--inv-surface); border-radius: 18px;
  border: 1.5px solid var(--inv-highlight);
  box-shadow: 0 4px 12px var(--inv-shadow);
}
.inv-icon { font-size: 1.6rem; display: inline-block; animation: inv-bob 2.6s ease-in-out infinite; }
.inv-detail:nth-child(2) .inv-icon { animation-delay: .4s; }
.inv-detail:nth-child(3) .inv-icon { animation-delay: .8s; }
@keyframes inv-bob { 50% { transform: translateY(-4px); } }
.inv-detail h3 { font-family: var(--inv-font-heading); font-size: 1.1rem; }
.inv-detail p { font-size: .92rem; line-height: 1.35; }

.inv-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.inv-chips li {
  background: var(--inv-surface); border-radius: 999px; padding: 4px 12px;
  font-size: .92rem; font-weight: 500;
  border: 1.5px dashed var(--inv-accent-soft);
}

/* ---------- Countdown ---------- */
.inv-countdown-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.inv-countdown-label { font-weight: 600; color: var(--inv-accent); }
.inv-countdown { display: flex; gap: 6px; }
.inv-cd-box {
  min-width: 56px; padding: 6px; text-align: center;
  background: var(--inv-accent-gradient);
  border-radius: 14px; border: 2px solid var(--inv-highlight);
  box-shadow: 0 6px 14px var(--inv-shadow), inset 0 2px 0 rgba(255, 255, 255, .35);
  color: var(--inv-on-accent);
}
.inv-cd-num {
  font-family: var(--inv-font-heading); font-size: 1.5rem; line-height: 1;
  color: var(--inv-highlight-light);
  text-shadow: 0 2px 0 var(--inv-highlight-dark), 0 0 10px var(--inv-highlight);
}
.inv-cd-unit { font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.inv-party-now { font-size: 1.2rem; font-weight: 700; color: var(--inv-accent); }

/* ---------- Buttons ---------- */
.inv-btn-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.inv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: .92rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.inv-btn:hover { transform: translateY(-2px) scale(1.03); }
.inv-btn-primary {
  color: var(--inv-on-accent);
  background: var(--inv-accent-gradient);
  border: 2px solid var(--inv-highlight);
  box-shadow: 0 6px 16px var(--inv-shadow);
}
.inv-btn-secondary {
  color: var(--inv-highlight-dark);
  background: linear-gradient(135deg, var(--inv-highlight-light), var(--inv-highlight) 40%, var(--inv-highlight-strong));
  border: 2px solid var(--inv-surface);
  box-shadow: 0 6px 16px var(--inv-shadow);
}

/* ---------- Gift box ---------- */
/* The present on the left, title and text on the right. */
.inv-gift { display: flex; align-items: center; gap: 18px; padding: 22px 24px; text-align: left; }
.inv-gift-img {
  flex: none; width: 92px; height: 92px;
  filter: drop-shadow(0 8px 10px var(--inv-shadow));
  animation: inv-gift-bob 3s ease-in-out infinite;
}
.inv-gift-text { min-width: 0; }
@keyframes inv-gift-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.inv-gift h3 { font-family: var(--inv-font-heading); font-size: 1.5rem; }
.inv-gift p { font-size: 1.05rem; line-height: 1.45; margin-top: 4px; }
.inv-gift b { color: var(--inv-accent); }

/* ---------- Confetti & floating notes ---------- */
.inv-confetti {
  position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none;
  width: 10px; height: 14px; border-radius: 2px;
  animation: inv-confetti var(--dur) cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes inv-confetti {
  0%   { transform: translate(var(--x0), var(--y0)) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)); opacity: 0; }
}
.inv-float-note {
  position: fixed; z-index: 40; pointer-events: none; font-size: 1.8rem;
  animation: inv-float-note 2.4s ease-out forwards;
}
@keyframes inv-float-note {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), -220px) scale(1.2) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .5s ease, transform .5s ease; }
.reveal.shown { opacity: 1; transform: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1060px) {
  .inv-main { padding-top: 160px; }
  /* On phones the song button stays up by the title instead of covering the reply form while scrolling. */
  .inv-song { position: absolute; }
}
@media (max-width: 520px) {
  .inv-song { top: 16px; left: 16px; }
  .inv-song-btn { width: 86px; height: 86px; font-size: .7rem; }
  .inv-card { padding: 20px 14px; }
  .inv-details { grid-template-columns: 1fr; }
  .inv-detail { display: grid; grid-template-columns: 40px 1fr; text-align: left; align-items: center; column-gap: 8px; }
  .inv-detail .inv-icon { grid-row: span 2; text-align: center; }
  .inv-age-row { gap: 20px; }
  .inv-age-badge { width: 108px; height: 108px; }
  .inv-age-badge span { font-size: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Emoji floaters (effects.emoji_floaters): colour glyphs ignore the outlined-letter look. */
.inv-emoji-floaters .inv-floater {
  color: initial; -webkit-text-stroke: 0; background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  transform-origin: center;
}

/* Thumbnails and editor preview: show everything at once, no scroll reveal or fly-in. */
.inv-static .reveal { opacity: 1; transform: none; transition: none; }
.inv-static .inv-song { animation: none; }

/* ---------- Reply (RSVP) ---------- */
.inv-rsvp { text-align: center; scroll-margin-top: 24px; }
.inv-rsvp-title { font-family: var(--inv-font-heading); font-size: clamp(1.5rem, 5vw, 2rem); color: var(--inv-accent); margin-bottom: 14px; }
.inv-rsvp-form { display: grid; gap: 14px; max-width: 460px; margin: 0 auto; text-align: left; }
.inv-rsvp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-rsvp-choice {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: 64px; padding: 10px; cursor: pointer;
  font-weight: 700; font-size: 1.05rem;
  background: var(--inv-surface); color: var(--inv-text);
  border: 2px solid var(--inv-accent-soft); border-radius: 18px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.inv-rsvp-choice:hover { transform: translateY(-2px); }
.inv-rsvp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.inv-rsvp-choice:has(input:focus-visible) { outline: 3px dashed var(--inv-highlight-strong); outline-offset: 3px; }
.inv-rsvp-choice.selected { border-color: var(--inv-accent); background: var(--inv-accent-gradient); color: var(--inv-on-accent); box-shadow: 0 6px 16px var(--inv-shadow); }
/* "Ich nehme [2] Person(en) mit" – one line with the number in the middle */
.inv-rsvp-companions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-weight: 600; color: var(--inv-accent);
}
.inv-rsvp-companions input {
  width: 4.5rem; text-align: center; font: inherit; font-size: 1.1rem; color: var(--inv-text);
  background: var(--inv-surface); border: 1.5px solid var(--inv-accent-soft); border-radius: 12px; padding: 8px 6px;
}
.inv-rsvp-companions input:focus { outline: none; border-color: var(--inv-accent); box-shadow: 0 0 0 3px var(--inv-shadow); }
.inv-rsvp-field { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; color: var(--inv-accent); }
.inv-rsvp-field input, .inv-rsvp-field textarea {
  width: 100%; font: inherit; font-weight: 500; color: var(--inv-text);
  background: var(--inv-surface); border: 1.5px solid var(--inv-accent-soft); border-radius: 12px; padding: 9px 12px;
}
.inv-rsvp-field input:focus, .inv-rsvp-field textarea:focus { outline: none; border-color: var(--inv-accent); box-shadow: 0 0 0 3px var(--inv-shadow); }
.inv-rsvp-submit { justify-self: center; font-size: 1rem; padding: 11px 26px; }
.inv-rsvp-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.inv-rsvp-message { font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.inv-rsvp-error { color: #c62828; margin-bottom: 10px; }
.inv-rsvp-persons { margin: 4px 0 14px; opacity: .85; }
.inv-rsvp-hint { text-align: center; font-size: .85rem; opacity: .75; }
.inv-rsvp-answer { display: grid; justify-items: center; }

/* Without the song button there is nothing to make room for above the hero. */
@media (max-width: 1060px) {
  .inv-main-no-song { padding-top: 56px; }
}

/* ---------- Secret invitation (code page), as on the original Rosa-Gold card ---------- */
.inv-gate { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.inv-gate-card { width: 100%; max-width: 440px; text-align: center; padding: 40px 28px 34px; }
.inv-gate-icon { font-size: 4.2rem; display: inline-block; animation: inv-popper 2.4s ease-in-out infinite; transform-origin: 30% 80%; }
@keyframes inv-popper {
  0%, 70%, 100% { transform: rotate(0) scale(1); }
  78% { transform: rotate(-14deg) scale(1.15); }
  86% { transform: rotate(8deg) scale(1.05); }
  93% { transform: rotate(-4deg) scale(1); }
}
.inv-gate-title { font-family: var(--inv-font-script); font-weight: 400; font-size: clamp(2.8rem, 11vw, 3.6rem); line-height: 1.15; margin: 4px 0 6px; }
.inv-gate-text { font-size: 1.1rem; line-height: 1.5; margin-bottom: 22px; }
.inv-gate-text strong { color: var(--inv-accent); }
.inv-code-inputs { display: flex; justify-content: center; gap: 12px; }
.inv-code-inputs.shake { animation: inv-shake .45s ease; }
.inv-code-inputs input {
  width: 62px; height: 74px;
  font-family: var(--inv-font-heading); font-size: 2.2rem; font-weight: 700;
  font-variant-numeric: lining-nums;
  text-align: center; color: var(--inv-accent);
  background: var(--inv-surface);
  border: 2px solid var(--inv-highlight); border-radius: 18px;
  box-shadow: 0 6px 16px var(--inv-shadow), inset 0 2px 4px var(--inv-shadow);
  outline: none; caret-color: var(--inv-accent);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.inv-code-inputs input:focus {
  border-color: var(--inv-accent-soft);
  box-shadow: 0 0 0 4px var(--inv-shadow), 0 6px 16px var(--inv-shadow);
  transform: translateY(-2px);
}
.inv-code-inputs.wrong input { border-color: #e04a6a; }
.inv-code-inputs.right input { border-color: var(--inv-highlight-strong); background: var(--inv-highlight-light); }
.inv-gate-msg { min-height: 1.6em; margin-top: 16px; font-weight: 600; color: var(--inv-accent); }
@keyframes inv-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
@media (max-width: 400px) {
  .inv-code-inputs { gap: 8px; }
  .inv-code-inputs input { width: 54px; height: 66px; font-size: 1.9rem; }
}

/* ---------- Link preview image (1200×630, see Templates::SocialImagesController) ---------- */
.inv-social { width: 1200px; height: 630px; overflow: hidden; position: relative; background: var(--inv-bg); }
.inv-social .inv-floaters, .inv-social .inv-sparkle { position: absolute; }
.inv-social-main {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center;
}
.inv-social .inv-eyebrow { font-size: 1.3rem; padding: 10px 26px; }
.inv-social-title { font-family: var(--inv-font-display); font-weight: 400; font-size: 8.5rem; line-height: 1.15; padding: 0 .3em; }
.inv-social .inv-ribbon { font-size: 1.8rem; padding: 14px 70px; margin-top: 4px; }