/* ==========================================================================
   Fonts (self-hosted, Cyrillic + Latin subsets)
   ========================================================================== */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: block;
  src: url('assets/fonts/manrope-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: block;
  src: url('assets/fonts/manrope-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 500 900; font-display: block;
  src: url('assets/fonts/playfair-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 500 900; font-display: block;
  src: url('assets/fonts/playfair-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 500 900; font-display: block;
  src: url('assets/fonts/playfair-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 500 900; font-display: block;
  src: url('assets/fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens + reset
   ========================================================================== */
:root {
  --cream: #FFF7EE;
  --blush: #F8D7DA;
  --rose: #E8798A;
  --wine: #3B1E2A;
  --wine-soft: #5A3A47;
  --gold: #F6C16A;

  --ff-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --scale: 0.4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }

body {
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 20% -10%, #2b1a25 0%, #130c11 70%);
  color: #f3e8ec;
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Preview chrome
   ========================================================================== */
.bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  min-height: 56px; height: auto; padding: 8px 16px;
  background: rgba(18, 11, 16, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bar h1 {
  flex: 1 1 12rem; min-width: 0; margin-right: auto;
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  font-size: 15px; font-weight: 800;
}
.bar h1 span { font-weight: 600; opacity: .5; }

.ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: inherit;
  font: 700 13px var(--ff-sans); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: rgba(255, 255, 255, .13); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn kbd { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .12); font: 700 11px var(--ff-sans); opacity: .75; }
.btn[aria-pressed="true"] { background: #FF5E7E; border-color: #FF5E7E; color: #fff; }
.btn .ic-play { display: none; fill: currentColor; stroke: none; }
.btn.is-paused .ic-play { display: block; }
.btn.is-paused .ic-pause { display: none; }

.scrub {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 12px; font-weight: 700;
}
.scrub input { width: min(220px, 100%); flex: 1 1 8rem; min-width: 0; accent-color: #FF5E7E; }
.scrub output { flex: none; min-width: 48px; font-variant-numeric: tabular-nums; opacity: .85; }

.editor-wrap {
  margin: 12px 24px 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}
.editor-wrap summary {
  padding: 12px 18px; cursor: pointer;
  font: 800 13px var(--ff-sans); list-style: none;
}
.editor-wrap summary::-webkit-details-marker { display: none; }
.editor-wrap[open] summary { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.editor {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 18px;
}
.editor label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; }
.editor input, .editor textarea {
  width: 100%; min-width: 0; padding: 9px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2); background: #21151d; color: #fff;
  font: 14px var(--ff-sans);
}
.editor textarea { resize: vertical; }
.editor input:focus, .editor textarea:focus { outline: 2px solid #FF9EB3; outline-offset: 2px; }
.editor-wide { grid-column: span 2; }
@media (max-width: 900px) {
  .editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bar h1 { flex-basis: 100%; }
  .ctrl { flex-basis: 100%; justify-content: flex-start; }
  .scrub { flex-basis: 100%; width: 100%; }
  .btn > span, .btn kbd { display: none; }
  .btn { padding: 0 10px; }
  .editor, .editor-wrap .editor { grid-template-columns: 1fr; }
  .editor-wide { grid-column: span 1; }
}
.editor-wrap + .stage { padding-top: 20px; }
.stage {
  display: flex; justify-content: center; align-items: flex-start; gap: 28px;
  padding: 24px 24px 20px;
}
.slot { display: flex; flex-direction: column; gap: 12px; }
.cap { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: #cbb9c2; white-space: nowrap; }
.cap b { color: #fff; font-size: 15px; }
.cap a { margin-left: auto; color: #FF9EB3; font-weight: 700; text-decoration: none; }
.cap a:hover { text-decoration: underline; }
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.export-actions .btn { flex: 1 1 auto; justify-content: center; }
.music-control {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; font-weight: 700;
}
.music-control select {
  height: 34px; max-width: min(11rem, 32vw); min-width: 0; padding: 0 28px 0 10px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: inherit;
  font: 700 12px var(--ff-sans); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis;
}
.music-control input[type="range"] { width: 72px; min-width: 56px; accent-color: #FF5E7E; }
.export-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: #21151d; color: #fff; }
.export-dialog::backdrop { background: rgba(0,0,0,.72); }
.export-dialog h2 { margin-bottom: 18px; }
.export-dialog fieldset { display: grid; gap: 12px; border: 0; }
.export-dialog label { display: grid; gap: 5px; font-weight: 700; }
.export-dialog select { padding: 8px; border-radius: 7px; background: #2b1a25; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.export-dialog progress { width: 100%; margin: 14px 0; accent-color: #FF5E7E; }
.export-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.export-sandbox { position: fixed; left: -20000px; top: 0; width: 1080px; height: 1920px; border: 0; visibility: hidden; }
@media (max-width: 900px) {
  .bar { padding: 8px 12px; }
  .editor-wrap { margin-left: 12px; margin-right: 12px; }
}
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.export-actions .btn { flex: 1 1 auto; justify-content: center; }
.export-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 16px; color: #f3e8ec; background: #21151d; box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.export-dialog::backdrop { background: rgba(0,0,0,.7); }
.export-dialog h2 { margin-bottom: 18px; }
.export-dialog fieldset { display: grid; gap: 12px; border: 0; }
.export-dialog label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.export-dialog select { padding: 8px; border-radius: 8px; background: #130c11; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.export-dialog progress { width: 100%; margin: 14px 0; accent-color: #ff5e7e; }
.export-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.export-sandbox { position: fixed; width: 1px; height: 1px; left: -10000px; top: -10000px; border: 0; }

.frame {
  position: relative; flex: none; overflow: hidden; border-radius: 10px;
  width: calc(var(--w) * var(--scale) * 1px);
  height: calc(var(--h) * var(--scale) * 1px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}

body.capture { background: #000; }
body.capture .bar, body.capture .editor-wrap, body.capture .cap { display: none; }
body.capture.export-video .bokeh i { filter: none; }
body.capture.export-video [data-a="g"] { filter: none !important; }
body.capture .stage { padding: 0; gap: 0; justify-content: flex-start; }
body.capture .frame { border-radius: 0; box-shadow: none; }

/* ==========================================================================
   Board base
   ========================================================================== */
.board {
  position: absolute; left: 0; top: 0; overflow: hidden; isolation: isolate;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform: scale(var(--scale)); transform-origin: 0 0;
  background: var(--cream); color: var(--wine);
  font-family: var(--ff-sans);
  user-select: none;
}

/* Intro animation driver: JS sets --p (0..1) per element. */
[data-a] { --p: 0; opacity: var(--p); }
[data-a="up"]  { transform: translate3d(0, calc((1 - var(--p)) * 34px), 0); }
[data-a="pop"] { transform: translate3d(0, calc((1 - var(--p)) * 50px), 0) scale(calc(.94 + var(--p) * .06)); transform-origin: 50% 100%; }
[data-a="g"]   { transform: translate3d(0, calc((1 - var(--p)) * 14px), 0); filter: blur(calc((1 - var(--p)) * 10px)); }

/* Backgrounds */
.bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 640px at 100% 0%, #FFE0CB 0%, rgba(255, 224, 203, 0) 70%),
    radial-gradient(800px 700px at 0% 100%, #F9D2DB 0%, rgba(249, 210, 219, 0) 70%),
    linear-gradient(180deg, #FFF9F2 0%, #FFF2E4 100%);
}
.bokeh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bokeh i {
  position: absolute; border-radius: 50%; opacity: .8; filter: blur(6px);
  background: radial-gradient(circle, var(--c) 0%, rgba(255, 255, 255, 0) 68%);
  will-change: transform;
}
.grain {
  position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .1 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Photo + slideshow
   ========================================================================== */
.photo-wrap { position: relative; border-radius: 46px; }
.photo-wrap::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #F7C3CD 0%, #FFD3AE 100%);
  transform: translate(-12px, 12px) rotate(-2.4deg);
}
.photo {
  position: absolute; inset: 0; overflow: hidden; border-radius: 46px; background: #2a1820;
  box-shadow: 0 34px 60px -24px rgba(59, 30, 42, .55), 0 0 0 6px rgba(255, 255, 255, .85);
  isolation: isolate;
}
.slides { position: absolute; inset: 0; isolation: isolate; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.slide img { position: absolute; max-width: none; display: block; backface-visibility: hidden; pointer-events: none; }

.photo-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(40, 14, 26, 0) 60%, rgba(40, 14, 26, .38) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(40, 14, 26, 0) 62%, rgba(40, 14, 26, .2) 100%);
}

.dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.dots i {
  --a: 0; height: 8px; border-radius: 99px;
  width: calc(8px + var(--a) * 26px);
  background: rgba(255, 255, 255, calc(.45 + var(--a) * .5));
}

/* ==========================================================================
   Shared text components
   ========================================================================== */
.kicker {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 12px; z-index: 5;
  padding: 12px 26px 12px 20px; border-radius: 999px;
  background: var(--wine); color: #fff;
  font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(59, 30, 42, .6);
}
.kicker .dot {
  --pulse: 0; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #FF5E7E;
  box-shadow: 0 0 0 calc(var(--pulse) * 15px) rgba(255, 94, 126, calc(.6 * (1 - var(--pulse))));
}

.age-pill {
  z-index: 5; padding: 11px 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--wine);
  font-size: 28px; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(59, 30, 42, .5);
}

.title {
  font-family: var(--ff-serif); font-weight: 800; line-height: .96; letter-spacing: -.02em; color: var(--wine);
}
.title .t-last {
  font-style: italic; font-weight: 700; padding-right: .08em;
  background: linear-gradient(100deg, #E4506C 0%, #FF8A4C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.goal { font-size: 30px; line-height: 1.36; font-weight: 600; color: var(--wine-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 2px solid rgba(232, 121, 138, .4);
  color: var(--wine); font-size: 26px; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 22px -12px rgba(120, 40, 60, .45);
}
.chip-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #FF5E7E, #FF8F5A);
}
.chip-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Donate card: amount + account
   ========================================================================== */
.donate {
  --breath: 0; --shine-x: -100%; --shine-o: 0;
  position: relative; overflow: hidden; border-radius: 40px; padding: 28px 36px 30px; color: #fff;
  background:
    radial-gradient(540px 260px at 92% -12%, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 70%),
    linear-gradient(112deg, #FF3B6B 0%, #FF5F58 52%, #FF8B3D 100%);
  box-shadow:
    0 calc(22px + var(--breath) * 8px) calc(54px + var(--breath) * 22px) -16px rgba(255, 64, 96, .62),
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(120, 0, 30, .12);
}
.donate-shine {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  transform: translateX(var(--shine-x)) skewX(-18deg); opacity: var(--shine-o);
}
.donate > :not(.donate-shine) { position: relative; }

.donate-head { display: grid; grid-template-columns: auto minmax(0, 360px); column-gap: 24px; justify-content: space-between; align-items: center; }
.donate-head .amount { display: contents; }
.donate-head .amount-label { grid-column: 1; grid-row: 1; }
.donate-head .amount-value { grid-column: 1; grid-row: 2; }
.donate-head .amount-collected { grid-column: 1; grid-row: 3; }
.donate-mts { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right; min-width: 0; }
.donate-mts-label { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: .03em; white-space: nowrap; }
.donate-phone {
  --phone-main: 76px;
  display: flex; flex-direction: row; align-items: center; gap: .32em;
  font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.phone-stack {
  box-sizing: border-box; flex: none;
  height: var(--phone-main); min-height: var(--phone-main);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  line-height: 1; white-space: nowrap;
}
.phone-country {
  font-size: calc(var(--phone-main) * 0.46); font-weight: 800; opacity: .94; line-height: 1;
}
.phone-operator {
  font-size: calc(var(--phone-main) * 0.52); font-weight: 800; line-height: 1;
}
.phone-main {
  font-size: var(--phone-main); font-weight: 800; line-height: 1;
  letter-spacing: .025em; white-space: nowrap;
  height: var(--phone-main); display: flex; align-items: center;
}
.amount-label { font-size: 24px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .94; }
.amount-collected { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.25; opacity: .9; }
.amount-value {
  --glow: 0; display: flex; align-items: baseline; gap: .1em;
  font-size: 104px; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(var(--glow) * 34px) rgba(255, 255, 255, .75), 0 6px 22px rgba(130, 10, 40, .28);
}
.amt { position: relative; display: inline-block; }
.amt-ghost { visibility: hidden; }
.amt-live { position: absolute; right: 0; top: 0; }
.byn { flex: none; display: inline-block; height: .72em; width: calc(.72em * .8079); margin-left: .06em; }

.acct {
  container-type: inline-size;
  margin-top: 16px; padding: 14px 24px 16px; border-radius: 28px;
  background: rgba(52, 12, 30, .6); border: 2px solid rgba(255, 255, 255, .3);
}
.acct-label { font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFD9B8; }
.acct-num {
  display: flex; gap: .4em; margin-top: 4px; white-space: nowrap;
  font-size: clamp(22px, 4.3cqw, 56px); font-weight: 800; line-height: 1.18; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.acct-meta { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 8px; font-size: 23px; line-height: 1.25; }
.acct-meta div { display: flex; align-items: baseline; gap: 10px; }
.acct-meta dt { font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.acct-meta dd { font-weight: 700; }

/* ==========================================================================
   1:1  (1080 x 1080)
   ========================================================================== */
.sq {
  position: absolute; inset: 56px; display: grid; gap: 30px 44px;
  grid-template-columns: 500px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.sq .photo-wrap { min-height: 0; }
.sq .age-pill { position: absolute; top: 26px; right: 26px; }
.sq-info { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; }
.sq .title { position: relative; z-index: 1; font-size: 84px; }
.sq .title span { display: block; }
.sq .title .t-last { padding-bottom: .2em; margin-bottom: -.2em; }
.sq .donate { grid-column: 1 / -1; margin-top: 18px; padding: 18px 36px 20px; }
.sq .amount-value { font-size: 96px; }
.sq .donate-mts-label { font-size: 24px; }
.sq .donate-phone { --phone-main: 66px; }
.sq .acct { margin-top: 10px; padding-top: 10px; padding-bottom: 12px; }

/* ==========================================================================
   4:5  (1080 x 1350)
   ========================================================================== */
.pt { position: absolute; inset: 56px; display: flex; flex-direction: column; gap: 28px; }
.pt-photo { flex: 1 1 auto; min-height: 0; }
.pt .kicker { position: absolute; left: 34px; top: 34px; }
.pt .age-pill { position: absolute; right: 34px; top: 34px; }
.pt .photo-shade {
  background:
    linear-gradient(180deg, rgba(40, 14, 26, .38) 0%, rgba(40, 14, 26, 0) 22%, rgba(40, 14, 26, 0) 44%, rgba(40, 14, 26, .82) 100%);
}
.pt-over { position: absolute; left: 44px; right: 44px; bottom: 66px; z-index: 5; }
.pt .title { font-size: 100px; color: #fff; white-space: nowrap; text-shadow: 0 6px 34px rgba(30, 5, 20, .5); }
.pt .title .t-last { background: linear-gradient(100deg, #FFC9B8 0%, #FFB36B 100%); -webkit-background-clip: text; background-clip: text; }
.pt-info { display: flex; flex-direction: column; gap: 18px; }
.pt .goal { font-size: 31px; }
.pt .donate { margin-top: 18px; }

/* ==========================================================================
   9:16  (1080 x 1920) — platform UI keeps top 250px / bottom 340px
   ========================================================================== */
.story-photo { border-radius: 0; box-shadow: none; background: #2a1820; }
.story-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(38, 12, 26, .55) 0%, rgba(38, 12, 26, 0) 17%, rgba(38, 12, 26, 0) 34%,
    rgba(38, 12, 26, .74) 50%, rgba(38, 12, 26, .93) 74%, rgba(38, 12, 26, .97) 100%);
}
.board--story .bokeh { height: 55%; mix-blend-mode: screen; }
.board--story .bokeh i { opacity: .5; }

.segs { position: absolute; left: 64px; right: 64px; top: 140px; z-index: 6; display: flex; gap: 8px; }
.segs i { flex: 1; height: 7px; overflow: hidden; border-radius: 9px; background: rgba(255, 255, 255, .34); }
.segs b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

.st { position: absolute; left: 64px; right: 64px; bottom: 80px; z-index: 6; display: flex; flex-direction: column; gap: 22px; color: #fff; }
.st-row { display: flex; justify-content: space-between; align-items: center; }
.st .title { font-size: 106px; color: #fff; white-space: nowrap; text-shadow: 0 6px 34px rgba(30, 5, 20, .5); }
.st .title .t-last { background: linear-gradient(100deg, #FFC9B8 0%, #FFB36B 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.st .goal { font-size: 34px; color: rgba(255, 255, 255, .95); }
.st .chip { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .38); color: #fff; box-shadow: none; }
.st .donate { margin-top: 18px; padding: 26px 34px 28px; }
.st .amount-value { font-size: 110px; }
.st .donate-mts-label { font-size: 25px; }
.st .donate-phone { --phone-main: 72px; }

/* ==========================================================================
   Safe-zone overlay
   ========================================================================== */
.safe { position: absolute; inset: 0; z-index: 100; display: none; pointer-events: none; font: 800 24px/1 var(--ff-sans); }
body.show-safe .safe { display: block; }
.sz-box { position: absolute; border: 3px dashed #00E5FF; border-radius: 10px; }
.sz-line { position: absolute; top: 0; bottom: 0; border-left: 3px dashed #FFE600; }
.sz-band {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, rgba(255, 0, 70, .32) 0 16px, rgba(255, 0, 70, .16) 16px 32px);
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.sz-tag { position: absolute; padding: 5px 12px; border-radius: 7px; background: #00E5FF; color: #012; font-size: 20px; }