/* =========================================================
   إهداء — نظام التصميم
   خط الواجهة (Baloo Bhaijaan 2) + خط الرسائل (Noto Sans Arabic — ملف محلي في assets/fonts)
   كل القيم من الرموز أدناه. لا قيمة خارجها.
   ========================================================= */

@font-face { font-family: 'Noto Sans Arabic'; src: url('../assets/fonts/NotoSansArabic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('../assets/fonts/NotoSansArabic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* الخط */
  --font: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, sans-serif;
  --font-letter: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* المسافات — مقياس 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* الأنصاف */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* الحركة */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms; --t-base: 250ms; --t-slow: 400ms;

  /* ===== الثيم الوردي (الافتراضي) ===== */
  --bg: #fbe4ec;
  --bg-2: #f7cfdc;
  --surface: #ffffff;
  --surface-2: #fdf1f5;
  --ink: #4a2233;
  --ink-2: #7a465b;
  --ink-3: #9a6a7e;
  --line: #f0c4d3;
  --brand: #e2568a;
  --brand-soft: #f6b3cb;
  --brand-ink: #ffffff;
  --yes: #a3e2be;  --yes-ink: #12472a;
  --no: #f28aa1;   --no-ink: #4a0f1e;
  --shadow-rgb: 74 34 51;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 1px 3px rgb(var(--shadow-rgb) / .10);
  --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / .06), 0 8px 16px rgb(var(--shadow-rgb) / .10);
  --shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / .06), 0 16px 32px rgb(var(--shadow-rgb) / .14);
}

[data-theme="lilac"] {
  --bg: #ece4fb; --bg-2: #dccff7; --surface-2: #f6f1fd; --line: #d3c3f0;
  --ink: #2f2247; --ink-2: #57466f; --ink-3: #7a6a92;
  --brand: #8a5ee0; --brand-soft: #c4b0f2;
  --yes: #b5e6c9; --yes-ink: #124a2b; --no: #f0a1b6; --no-ink: #4a0f1e;
  --shadow-rgb: 47 34 71;
}
[data-theme="sky"] {
  --bg: #e0eefb; --bg-2: #c9dff7; --surface-2: #eff6fd; --line: #bdd6f0;
  --ink: #1e2f47; --ink-2: #445a78; --ink-3: #68799a;
  --brand: #3f7fd9; --brand-soft: #a9c8f0;
  --yes: #b5e6c9; --yes-ink: #124a2b; --no: #f0a1b6; --no-ink: #4a0f1e;
  --shadow-rgb: 30 47 71;
}
[data-theme="mint"] {
  --bg: #e0f5ea; --bg-2: #c8ebd9; --surface-2: #eff9f4; --line: #b8e0cb;
  --ink: #17362a; --ink-2: #3e6353; --ink-3: #618373;
  --brand: #2e9d6a; --brand-soft: #a5dcc0;
  --yes: #ffd9a1; --yes-ink: #4a2a00; --no: #f0a1b6; --no-ink: #4a0f1e;
  --shadow-rgb: 23 54 42;
}
[data-theme="cream"] {
  --bg: #fbf1df; --bg-2: #f5e3c2; --surface-2: #fdf7ea; --line: #ead8b5;
  --ink: #3e2a10; --ink-2: #6b4f25; --ink-3: #8f7247;
  --brand: #c98a2e; --brand-soft: #ecc98f;
  --yes: #b5e6c9; --yes-ink: #124a2b; --no: #f0a1b6; --no-ink: #4a0f1e;
  --shadow-rgb: 62 42 16;
}

/* ===== الأساس ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  background-image: radial-gradient(circle at 20% 10%, var(--bg-2), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 800; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== الأزرار ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  border-radius: var(--r-md);
  font-weight: 800; font-size: 18px; line-height: 1;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: var(--shadow-sm); }
.btn--ghost { background: var(--surface); color: var(--brand); }
.btn--soft { background: var(--brand-soft); color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: 16px; }
.btn svg { width: 20px; height: 20px; }

/* ===== إطار الشاشات ===== */
.app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--s-4) var(--s-10);
}
.screen {
  width: 100%;
  max-width: 440px;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
}
.screen.is-active { display: flex; animation: screen-in var(--t-slow) var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.screen__title { font-size: 28px; }
.screen__sub { font-size: 18px; color: var(--ink-2); max-width: 32ch; }
.screen__hint { font-size: 14px; color: var(--ink-3); }

/* ===== الملصق (الشخصية) ===== */
.sticker { width: 150px; height: 150px; display: block; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.sticker--sm { width: 110px; height: 110px; }
.sticker .m { display: none; }
.sticker[data-mood="shy"]   .m-shy,
.sticker[data-mood="happy"] .m-happy,
.sticker[data-mood="sad"]   .m-sad,
.sticker[data-mood="angry"] .m-angry,
.sticker[data-mood="love"]  .m-love,
.sticker[data-mood="think"] .m-think,
.sticker[data-mood="wink"]  .m-wink { display: block; }
.sticker--bob { animation: bob 2.4s var(--ease-inout) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sticker.is-shake { animation: shake .4s var(--ease-out); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }
.sticker img { width: 100%; height: 100%; object-fit: contain; }
.sticker--img { width: 190px; height: 190px; }
.sticker--img img { border-radius: 28px; box-shadow: var(--shadow-md); background: #fff; }

/* ===== شاشة السؤال ===== */
.ask__q { font-size: 30px; min-height: 2.6em; display: grid; place-items: center; }
.ask__row {
  display: flex; align-items: center; justify-content: center; gap: var(--s-6);
  flex-wrap: wrap; width: 100%; min-height: 96px;
}
.btn--yes {
  background: var(--yes); color: var(--yes-ink);
  font-size: calc(20px * var(--yes-scale, 1));
  min-height: calc(56px * var(--yes-scale, 1));
  padding: 0 calc(var(--s-8) * var(--yes-scale, 1));
  border-radius: calc(var(--r-md) * var(--yes-scale, 1));
  transition: all var(--t-base) var(--ease-out);
}
.btn--no {
  background: var(--no); color: var(--no-ink);
  font-size: calc(20px * var(--no-scale, 1));
  min-height: calc(56px * var(--no-scale, 1));
  padding: 0 calc(var(--s-8) * var(--no-scale, 1));
  border-radius: calc(var(--r-md) * var(--no-scale, 1));
  transition: all var(--t-base) var(--ease-out);
}
.btn--no.is-gone { opacity: 0; pointer-events: none; transform: scale(.4); }

/* ===== مركز الهدايا ===== */
.hub { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); width: 100%; }
.giftbox {
  width: 100px; padding: var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: 15px; line-height: 1.3;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.giftbox svg { width: 56px; height: 56px; }
.giftbox:hover, .giftbox:focus-visible { transform: translateY(-4px) rotate(-2deg); box-shadow: var(--shadow-md); }
.giftbox.is-opened { opacity: .7; }
.giftbox__lid { transform-origin: 50% 100%; transition: transform var(--t-base) var(--ease-out); }
.giftbox:hover .giftbox__lid { transform: translateY(-4px) rotate(-6deg); }

/* ===== الصور (بولارويد) ===== */
.polaroids {
  position: relative; width: 100%; height: 360px;
  display: grid; place-items: center;
}
.polaroid {
  position: absolute;
  width: 168px; padding: var(--s-2) var(--s-2) var(--s-6);
  background: var(--surface); border-radius: var(--s-1);
  box-shadow: var(--shadow-md);
  transform: translate(0, 0) rotate(0deg);
  transition: transform 600ms var(--ease-out), box-shadow var(--t-base);
  cursor: zoom-in;
  text-align: center;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); border-radius: 2px; }
.polaroid figcaption { font-family: var(--font-letter); font-size: 14px; color: var(--ink-2); margin-top: var(--s-2); line-height: 1.4; min-height: 1.4em; }
.polaroids.is-spread .polaroid { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
.polaroid:hover { z-index: 5; box-shadow: var(--shadow-lg); }

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(var(--shadow-rgb) / .75);
  display: none; place-items: center; padding: var(--s-6);
}
.lightbox.is-open { display: grid; animation: screen-in var(--t-base) var(--ease-out); }
.lightbox figure { margin: 0; background: var(--surface); padding: var(--s-3) var(--s-3) var(--s-6); border-radius: var(--s-1); max-width: 92vw; box-shadow: var(--shadow-lg); }
.lightbox img { max-height: 70vh; width: auto; margin-inline: auto; }
.lightbox figcaption { font-family: var(--font-letter); font-size: 16px; text-align: center; margin-top: var(--s-3); }

/* ===== الأغنية ===== */
.player {
  width: 100%; padding: var(--s-5);
  background: var(--brand-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center;
}
.vinyl { width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand) 0 14px, #1c1116 15px 40px, #2b1c23 41px 100%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .12), var(--shadow-sm);
  position: relative; animation: spin 4s linear infinite; animation-play-state: paused;
}
.vinyl::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 3px rgb(0 0 0 / .25); }
.vinyl::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgb(255 255 255 / .18); }
.vinyl.is-playing { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.player__media { border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.player__media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.player__audio { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.player__play { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.player__play svg { width: 22px; height: 22px; }
.player__bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.player__bar span { display: block; height: 100%; width: 0%; background: var(--brand); transition: width 250ms linear; }
.player__meta { text-align: start; }
.player__meta strong { display: block; font-size: 17px; }
.player__meta small { color: var(--ink-2); font-size: 14px; }
@media (max-width: 380px) { .player { grid-template-columns: 1fr; justify-items: center; } }

/* ===== الرسالة ===== */
.letter-wrap { width: 100%; }
.letter {
  position: relative; width: 100%;
  background: var(--surface); border-radius: var(--s-1);
  padding: var(--s-8) var(--s-6);
  box-shadow: var(--shadow-lg);
  text-align: start;
  background-image: repeating-linear-gradient(transparent 0 35px, var(--line) 35px 36px);
  background-size: 100% 36px; background-position: 0 14px;
}
.letter__to { font-family: var(--font-letter); font-weight: 700; font-size: 22px; color: var(--brand); margin-bottom: var(--s-4); }
.letter__body { font-family: var(--font-letter); font-size: 17px; line-height: 36px; white-space: pre-wrap; color: var(--ink); }
.letter__from { font-family: var(--font-letter); font-weight: 700; font-size: 17px; color: var(--ink-2); margin-top: var(--s-6); text-align: end; }
.letter__body .cursor { display: inline-block; width: 2px; height: 1em; background: var(--brand); vertical-align: -0.15em; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bg-pattern { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .38; pointer-events: none; display: none; }
.bg-pattern.is-on { display: block; }

/* ===== الفيديو ===== */
.video-card { width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.video-card video, .video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-card--portrait video, .video-card--portrait iframe { aspect-ratio: 9 / 16; max-height: 70vh; margin-inline: auto; }

/* ===== كرت «رسالة كل يوم» ===== */
.days {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); width: 100%;
}
@media (min-width: 400px) { .days { grid-template-columns: repeat(6, 1fr); } }
.day {
  aspect-ratio: 1; border-radius: var(--r-md);
  display: grid; place-items: center; position: relative;
  font-weight: 800; font-size: 20px; line-height: 1;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.day:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.day--locked { background: var(--surface-2); color: var(--ink-3); box-shadow: none; }
.day--locked svg { position: absolute; inset-inline-end: 6px; top: 6px; width: 12px; height: 12px; }
.day--today { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-md); animation: pulse 2s var(--ease-inout) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-md); } 50% { box-shadow: 0 0 0 9px transparent, var(--shadow-md); } }
.day--read::after { content: ""; position: absolute; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.day--today.day--read::after { background: var(--brand-ink); }
.day.is-shake { animation: shake .4s var(--ease-out); }
.days-legend { display: flex; gap: var(--s-4); justify-content: center; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.days-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 6px; }

.countdown { background: var(--surface); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); box-shadow: var(--shadow-sm); font-size: 15px; color: var(--ink-2); }
.countdown strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* نافذة رسالة اليوم */
.modal { position: fixed; inset: 0; z-index: 40; display: none; place-items: end center; background: rgb(var(--shadow-rgb) / .45); padding: var(--s-4); }
.modal.is-open { display: grid; }
.modal__card {
  position: relative;
  width: 100%; max-width: 440px; max-height: 88dvh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6) var(--s-8);
  box-shadow: var(--shadow-lg);
  animation: sheet-in var(--t-slow) var(--ease-out);
  text-align: start;
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .modal { place-items: center; } }
.modal__day { color: var(--brand); font-weight: 800; font-size: 15px; }
.modal__title { font-size: 24px; margin-top: var(--s-1); padding-inline-end: var(--s-10); }
.modal__body { font-family: var(--font-letter); font-size: 17px; line-height: 1.9; margin-top: var(--s-4); white-space: pre-wrap; }
.modal__img { width: 100%; border-radius: var(--r-md); margin-top: var(--s-4); }
.modal__link { display: inline-flex; margin-top: var(--s-4); color: var(--brand); font-weight: 800; text-decoration: none; }
.modal__close { position: absolute; inset-inline-end: var(--s-4); top: var(--s-4); width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.modal__close svg { width: 18px; height: 18px; }

.toast {
  position: fixed; bottom: var(--s-6); inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90vw;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  font-size: 15px; box-shadow: var(--shadow-lg); z-index: 60;
  opacity: 0; transform: translateY(12px); transition: opacity var(--t-base), transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: none; }

/* ===== كرت الرقم السري ===== */
.lock {
  width: 100%; background: var(--surface); border-radius: var(--r-lg); padding: var(--s-8) var(--s-6);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--s-4); align-items: stretch;
}
.lock label { font-weight: 800; text-align: start; font-size: 15px; color: var(--ink-2); }
.lock__input {
  width: 100%; min-height: 56px; border-radius: var(--r-md);
  border: 2px solid var(--line); background: var(--surface-2);
  font: inherit; font-size: 22px; font-weight: 800; text-align: center;
  color: var(--ink); padding: 0 var(--s-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lock__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.lock.is-error .lock__input { border-color: var(--no); animation: shake .4s var(--ease-out); }
.lock__err { color: #b3123f; font-size: 14px; min-height: 1.6em; }
.lock__hint { color: var(--ink-3); font-size: 14px; }
.lock .btn[disabled] { opacity: .6; }

/* ===== الغلاف (كرت مغلق) ===== */
.envelope { width: 100%; padding: var(--s-8) var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.envelope__from { font-size: 15px; color: var(--ink-3); }

/* ===== الفوتر / رجوع ===== */
.backrow { display: flex; justify-content: center; }
.footer-note { font-size: 13px; color: var(--ink-3); margin-top: var(--s-6); }
.footer-note a { color: inherit; }

/* ===== القلوب المتطايرة ===== */
.hearts { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.hearts span { position: absolute; bottom: -40px; font-size: var(--sz); animation: fly var(--dur) var(--ease-out) forwards; opacity: 0; }
@keyframes fly { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-110vh) translateX(var(--dx)) rotate(var(--rot)); opacity: 0; } }

/* ===== حالات التحميل والخطأ ===== */
.state { max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.state__title { font-size: 24px; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--brand); animation: spin .9s linear infinite; }
code.id { font-family: ui-monospace, Consolas, monospace; background: var(--surface); padding: 2px 8px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; }

/* ===== صفحة التعريف (بدون رابط) ===== */
.landing { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--s-10); align-items: center; text-align: center; padding-block: var(--s-8); }
.landing__title { font-size: clamp(32px, 6vw, 48px); line-height: 1.2; }
.landing__title em { font-style: normal; color: var(--brand); }
.landing__lead { font-size: 18px; color: var(--ink-2); max-width: 40ch; }
.cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); width: 100%; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; text-align: start;
  background: var(--surface); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon { width: 44px; height: 44px; color: var(--brand); }
.card h3 { font-size: 20px; }
.card p { font-size: 15px; color: var(--ink-2); flex: 1; }
.card__cta { color: var(--brand); font-weight: 800; font-size: 15px; }
.landing__steps { display: grid; gap: var(--s-3); width: 100%; max-width: 480px; text-align: start; counter-reset: st; margin: 0; padding: 0; }
.landing__steps li { list-style: none; display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-2); }
.landing__steps li::before { counter-increment: st; content: counter(st); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; margin-top: 3px; }

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

/* ===== كرت «سهم الحب» ===== */
.arrow-stage { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #f8eee0; --pink: #d81b60; --gold: #f2c14e; --font-display: 'Playfair Display', 'Aref Ruqaa', serif; --font-script: 'Great Vibes', 'Aref Ruqaa', cursive; touch-action: manipulation; }
.arrow-stage[hidden] { display: none; }
.arrow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.arrow-intro { position: absolute; top: 8%; inset-inline: 0; text-align: center; font-family: var(--font-script); font-size: clamp(20px, 5vw, 30px); color: #7a4a3a; opacity: .9; transition: opacity .4s; }
.arrow-hint { position: absolute; bottom: 7%; inset-inline: 0; margin-inline: auto; width: max-content; padding: 12px 22px; border-radius: 999px; background: rgb(255 255 255 / .75); color: #7a4a3a; font-weight: 800; font-size: 16px; box-shadow: 0 6px 18px rgb(90 50 40 / .12); animation: bob 2s var(--ease-inout) infinite; backdrop-filter: blur(6px); }
.arrow-intro.is-hide, .arrow-hint.is-hide { opacity: 0; pointer-events: none; }
.arrow-pink { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; background: radial-gradient(circle at 30% 25%, #e8377a, #c2185b 65%, #ad1457); clip-path: circle(0 at var(--cx, 50%) var(--cy, 30%)); transition: clip-path .75s var(--ease-out), opacity .8s var(--ease-in); }
.arrow-pink.is-in { clip-path: circle(160% at var(--cx, 50%) var(--cy, 30%)); }
.arrow-pink.is-out { opacity: 0; }
.arrow-pink[hidden] { display: none; }
.arrow-pink__inner { display: grid; justify-items: center; gap: 4px; max-width: 92vw; }
.arrow-pink__cap, .arrow-pink__sub { font-family: var(--font-script); font-size: clamp(18px, 4.5vw, 30px); opacity: 0; transform: translateY(8px); transition: opacity .6s .35s, transform .6s .35s var(--ease-out); color: #ffe3ee; }
.arrow-pink__head { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 13vw, 128px); line-height: 1.05; opacity: 0; transform: translateY(24px) scale(.92); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); text-shadow: 0 6px 30px rgb(90 0 40 / .35); }
.arrow-swoosh { width: clamp(180px, 55vw, 420px); margin-top: -6px; }
.arrow-swoosh path { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s .5s var(--ease-inout); filter: drop-shadow(0 0 6px rgb(255 214 107 / .8)); }
.arrow-pink.is-text .arrow-pink__head { opacity: 1; transform: none; }
.arrow-pink.is-text .arrow-pink__cap, .arrow-pink.is-text .arrow-pink__sub { opacity: 1; transform: none; }
.arrow-pink.is-text .arrow-swoosh path { stroke-dashoffset: 0; }
.arrow-burst { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, #fff9e0 0, #ffd66b 10%, rgb(255 214 107 / .5) 22%, transparent 45%); opacity: 0; transform: scale(.15); transition: transform 1s var(--ease-out), opacity 1s; }
.arrow-pink.is-burst .arrow-burst { opacity: 1; transform: scale(2.4); }
.arrow-final { position: absolute; inset-inline-start: 4%; bottom: 6%; max-width: min(64%, 420px); padding: 16px 20px; border-radius: 24px; background: radial-gradient(ellipse at center, rgb(248 238 224 / .92), rgb(248 238 224 / .55) 60%, transparent 100%); text-align: start; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.arrow-final.is-in { opacity: 1; transform: none; }
.arrow-final__cap, .arrow-final__sub { font-family: var(--font-script); font-size: clamp(16px, 4vw, 24px); color: #7a4a3a; line-height: 1.5; }
.arrow-final__head { font-family: var(--font-script); font-weight: 400; font-size: clamp(34px, 9vw, 72px); line-height: 1.15; color: var(--pink); text-shadow: 0 2px 14px rgb(216 27 96 / .18); }
.arrow-final__msg { font-family: var(--font-letter); font-size: 15px; line-height: 1.7; color: #4a2a1f; margin-top: 12px; max-width: 34ch; }
.arrow-done { margin-top: 16px; background: var(--pink); }
@media (min-width: 900px) { .arrow-final { bottom: 14%; } }

/* ===== كرت «أغنية باسمك» ===== */
.ns-stage { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #1b1442; color: #fff; }
.ns-stage[hidden] { display: none; }
.ns-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-sign { position: absolute; top: 7%; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 88vw; padding: 12px 26px 14px; border-radius: 18px; background: #23303a; border: 4px solid #d9c9a3; box-shadow: 0 10px 30px rgb(0 0 0 / .35), inset 0 0 0 2px rgb(255 255 255 / .06); text-align: center; opacity: 0; transform: translateY(-14px) rotate(-2deg); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.ns-sign.is-in { opacity: 1; transform: rotate(-2deg); }
.ns-sign small { display: block; font-family: var(--font); font-size: 16px; color: #ffe8a3; letter-spacing: 0; }
.ns-sign strong { display: block; font-family: var(--font); font-weight: 800; font-size: clamp(34px, 9vw, 64px); line-height: 1.15; color: #b9f6ca; text-shadow: 0 0 18px rgb(185 246 202 / .45); transition: transform .25s var(--ease-out); }
.ns-sign.is-name strong { animation: ns-pop .5s var(--ease-out) both; color: #fff; text-shadow: 0 0 26px rgb(255 209 102 / .9); }
@keyframes ns-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.25); } 100% { transform: scale(1.1); } }
.ns-caption { position: absolute; bottom: 9%; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 92vw; padding: 10px 20px; border-radius: 999px; background: rgb(0 0 0 / .35); font-weight: 800; font-size: clamp(20px, 5.4vw, 34px); line-height: 1.4; text-align: center;
  background-image: linear-gradient(to left, #ffd166 var(--p, 0%), rgb(255 255 255 / .85) var(--p, 0%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ns-caption:empty { display: none; }
.ns-caption.is-in { animation: screen-in .35s var(--ease-out); }
.ns-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgb(27 20 66 / .55), rgb(27 20 66 / .88)); backdrop-filter: blur(2px); }
.ns-overlay[hidden] { display: none; }
.ns-title { font-size: clamp(28px, 7vw, 44px); color: #fff; max-width: 20ch; line-height: 1.3; }
.ns-for { font-size: 18px; color: #e9ddff; }
.ns-hint { font-size: 14px; color: #c7bde6; }
.ns-start { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 999px; background: #ff6b9d; color: #fff; font-weight: 800; font-size: 20px; box-shadow: 0 10px 30px rgb(255 107 157 / .45); animation: bob 2s var(--ease-inout) infinite; }
.ns-start__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .25); font-size: 16px; }
.ns-done__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ns-overlay--done .btn { background: #ff6b9d; color: #fff; }
.ns-overlay--done .btn--ghost { background: rgb(255 255 255 / .15); color: #fff; }