/* ============================================================
   ARIO — 07 FORMS
   Auth · Forms · Support · Bonus
   ============================================================ */

/* ============================================================
   PAGE-WIDE WHITE BACKGROUND — auth + support
   ============================================================ */
body:has(.auth-card),
body:has(.support-hero),
body:has(.support-locked) {
  background: #ffffff !important;
  background-attachment: initial !important;
}
body:has(.auth-card)::before,
body:has(.auth-card)::after,
body:has(.support-hero)::before,
body:has(.support-hero)::after,
body:has(.support-locked)::before,
body:has(.support-locked)::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   AUTH CARD
   ============================================================ */
.auth-card, .pay-card, .result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  max-width: 480px;
  margin: 3rem auto;
  box-shadow: var(--shadow-md);
}
.auth-card {
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  display: none !important;
  content: none !important;
}

.auth-card-badge {
  display: flex;
  justify-content: center;
  margin: 0 auto 1rem;
}
.auth-card-icon {
  width: 68px; height: 68px;
  border-radius: 22px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 55%, #ec4899 100%);
  box-shadow:
    0 14px 34px rgba(59, 130, 246, .4),
    0 0 0 6px rgba(255, 255, 255, .95),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: statIconFloat 4s ease-in-out infinite;
}
.auth-card-icon svg { width: 34px; height: 34px; }

.auth-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -.01em;
  margin-top: .3rem;
  margin-bottom: .35rem;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.auth-sub {
  text-align: center;
  color: var(--text-soft);
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
  line-height: 1.85;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.auth-submit {
  width: 100%;
  margin-top: .5rem;
  padding: 1rem 1.7rem !important;
  font-size: 1rem !important;
  border-radius: 14px !important;
}

/* ---------- Animated inline icons ---------- */
.hand-wave {
  display: inline-block;
  width: 28px; height: 28px;
  color: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, .5));
  animation: waveHand 2s ease-in-out infinite;
  transform-origin: 70% 80%;
  vertical-align: -4px;
  flex-shrink: 0;
}
@keyframes waveHand {
  0%, 100%      { transform: rotate(0deg); }
  15%, 45%, 75% { transform: rotate(14deg); }
  30%, 60%, 90% { transform: rotate(-8deg); }
}

.sparkle-icon {
  display: inline-block;
  width: 22px; height: 22px;
  color: #7c3aed;
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, .55)) drop-shadow(0 0 14px rgba(236, 72, 153, .35));
  animation: sparkleTwinkle 2.6s ease-in-out infinite;
  transform-origin: center;
  vertical-align: -3px;
  flex-shrink: 0;
}
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg);     opacity: 1;   }
  25%      { transform: scale(1.18) rotate(45deg); opacity: .9;  }
  50%      { transform: scale(1.05) rotate(90deg); opacity: 1;   }
  75%      { transform: scale(1.18) rotate(135deg); opacity: .9; }
}

/* ============================================================
   Support Heart — سفید · سه حالت
   ============================================================ */
.support-heart {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  margin-inline-start: .2em;
  transform-origin: center;

  color: #FFFFFF;
  filter:
    drop-shadow(0 2px 4px rgba(15, 23, 42, .18))
    drop-shadow(0 0 12px rgba(148, 163, 184, .4));

  animation: supportHeartBeat 1.8s ease-in-out infinite;
  will-change: transform, filter;
  transition: color .3s ease, filter .3s ease, transform .3s ease;
}
.support-heart svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.support-title:hover .support-heart,
.support-heart:hover {
  color: #F1F5F9;
  filter:
    drop-shadow(0 2px 6px rgba(15, 23, 42, .28))
    drop-shadow(0 0 14px rgba(148, 163, 184, .55));
}

.support-heart:active,
.support-heart.is-liked {
  color: #EF4444;
  filter:
    drop-shadow(0 3px 10px rgba(239, 68, 68, .5))
    drop-shadow(0 0 16px rgba(239, 68, 68, .35));
}

@keyframes supportHeartBeat {
  0%   { transform: scale(1);    }
  10%  { transform: scale(1.20); }
  20%  { transform: scale(1);    }
  30%  { transform: scale(1.14); }
  40%  { transform: scale(1);    }
  100% { transform: scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .support-heart { animation: none; }
}

/* ---------- Input / form controls ---------- */
.input-wrap { position: relative; display: block; margin-top: .45rem; }
.input-wrap input { margin-top: 0 !important; padding-right: 3rem !important; padding-left: 1rem !important; }
.toggle-password {
  position: absolute;
  top: 50%; right: .45rem;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  transition: background .2s, color .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-password:hover { background: rgba(59, 130, 246, .12); color: var(--blue-600); }
.toggle-password:active { transform: translateY(-50%) scale(.9); }
.toggle-password svg { width: 20px; height: 20px; display: block; }
.toggle-password .eye-off { display: none; }
.toggle-password.is-visible .eye-on  { display: none; }
.toggle-password.is-visible .eye-off { display: block; }
.toggle-password.is-visible { color: var(--blue-600); }

.field-error, .field-success {
  display: none;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.55;
  animation: fieldSlide .25s ease;
}
.field-error   { color: var(--danger); }
.field-success { color: var(--success); }
.field-error.show, .field-success.show { display: flex; }
.field-error::before   { content: '⚠'; font-size: .9rem; }
.field-success::before { content: '✓'; font-weight: 900; }
@keyframes fieldSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
input.input-invalid { border-color: var(--danger) !important; background: #fef2f2 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important; }
input.input-valid { border-color: var(--success) !important; background: #f0fdf4 !important; }
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
input.input-shake { animation: fieldShake .45s cubic-bezier(.4,0,.2,1); }
label > .field-error,
label > .field-success { margin-bottom: .2rem; }
label { display: block; margin-bottom: 1.1rem; font-weight: 700; font-size: .88rem; color: var(--ink-700); }
input[type=text], input[type=password], input[type=tel], input[type=email], textarea {
  width: 100%;
  padding: .85rem 1rem;
  margin-top: .45rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: .94rem;
  background: var(--ink-50);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, textarea:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
.hint { display: block; font-size: .76rem; font-weight: 400; color: var(--text-soft); margin-top: .35rem; line-height: 1.6; }
.req { color: var(--danger); }
.strength-bar { height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; margin-top: .55rem; }
.strength-bar > div { height: 100%; width: 0; background: var(--danger); transition: width .3s, background .3s; border-radius: 100px; }
.muted { color: var(--text-soft); font-size: .9rem; text-align: center; margin-top: 1rem; }
.muted a { color: var(--blue-600); font-weight: 700; }
.muted a:hover { text-decoration: underline; }
.small { font-size: .8rem; }

/* ============================================================
   Support hero
   ============================================================ */
.support-hero { padding: 4rem 0 1.5rem; text-align: center; }
.support-hero-inner { max-width: 640px; margin-inline: auto; }

.support-title {
  font-family: var(--font-fa);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: .8rem;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #3b82f6, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .15em;
}
.support-sub { color: var(--text-soft); font-size: 1rem; line-height: 2; }

/* ============================================================
   SUPPORT CHANNEL PILLS — pill افقی، پس‌زمینه سفید، کنار هم
   ============================================================ */
.support-channels { padding: 2rem 0; }

.channel-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.6rem;
}

.support-channel-pill {
  --card-accent: #3b82f6;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border-radius: 100px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  font-family: var(--font-fa);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-800);
  text-decoration: none;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, .04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1),
              border-color .25s,
              box-shadow .25s;
  white-space: nowrap;
}

.support-channel-pill.channel-telegram  { --card-accent: #229ED9; }
.support-channel-pill.channel-instagram { --card-accent: #E1306C; }
.support-channel-pill.channel-email     { --card-accent: #3b82f6; }

.support-channel-pill:hover {
  transform: translateY(-2px);
  border-color: var(--card-accent);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--card-accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.support-channel-pill-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    var(--card-accent),
    color-mix(in srgb, var(--card-accent) 70%, #000 10%));
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--card-accent) 30%, transparent);
}
.support-channel-pill-icon svg { display: block; }

.support-channel-pill-name {
  color: var(--ink-800);
  font-weight: 800;
  line-height: 1;
}

.support-channel-pill-handle {
  font-family: var(--font-en);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1;
}

.support-channel-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--card-accent);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  padding-inline-start: .6rem;
  margin-inline-start: .1rem;
  border-inline-start: 1px solid var(--border);
}
.support-channel-pill-cta svg {
  flex-shrink: 0;
  transition: transform .25s;
}
.support-channel-pill:hover .support-channel-pill-cta svg {
  transform: translateX(-3px);
}

/* Meta pills (پاسخ / ساعت کاری) */
.support-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: .5rem;
}
.support-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: .82rem;
  color: var(--text-soft);
  font-weight: 500;
}
.support-meta-item svg { color: var(--blue-500); }

@media (max-width: 640px) {
  .support-channel-pill {
    padding: .5rem .95rem;
    font-size: .78rem;
    gap: .4rem;
  }
  .support-channel-pill-icon { width: 22px; height: 22px; }
  .support-channel-pill-name { font-size: .78rem; }
  .support-channel-pill-handle { font-size: .72rem; }
  .support-channel-pill-cta { font-size: .74rem; padding-inline-start: .45rem; }
}

/* ============================================================
   FAQ — دو ستونه · فشرده
   ============================================================ */
.faq-section {
  padding: 3rem 0;
  scroll-margin-top: 100px;
}

.faq-list {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  align-items: start;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item[open] {
  border-color: rgba(59, 130, 246, .35);
  box-shadow: var(--shadow-md);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-800);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .2s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: var(--ink-50); }

.faq-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-soft);
  transition: transform .3s, color .3s;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--blue-500);
}

.faq-answer {
  padding: 0 1rem .95rem;
  font-size: .82rem;
  line-height: 1.95;
  color: var(--ink-600);
  border-top: 1px dashed var(--border);
  padding-top: .85rem;
  margin-top: .25rem;
  animation: slideDown .3s ease;
}

@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Contact section
   ============================================================ */
.contact-section { padding: 3rem 0 6rem; scroll-margin-top: 100px; }
.contact-form {
  max-width: 760px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.contact-form select {
  width: 100%;
  padding: .85rem 1rem;
  padding-inline-start: 2.8rem;
  padding-inline-end: 1rem;
  margin-top: .45rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: .94rem;
  background-color: var(--ink-50);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 16px;
  text-align: right;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.contact-form select:focus {
  outline: none;
  border-color: var(--blue-500);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}
.contact-form select option {
  color: var(--text);
  background: var(--surface);
}

.contact-form textarea { resize: vertical; min-height: 130px; line-height: 1.85; }
.hint-block {
  display: block;
  padding: .7rem 1rem;
  background: rgba(59, 130, 246, .06);
  border: 1px solid rgba(59, 130, 246, .16);
  border-radius: 12px;
  color: var(--blue-700);
  font-size: .82rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.contact-form .btn-lg { width: 100%; margin-top: .5rem; }

/* ============================================================
   Bonus
   ============================================================ */
.bonus-hero {
  position: relative;
  padding: 5rem 1rem 6rem;
  text-align: center;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  margin-bottom: 3rem;
  color: #fff;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0%,   rgba(255, 215, 0, .35), transparent 55%),
    radial-gradient(circle at 15% 100%, rgba(255, 140, 0, .28), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(139, 92, 246, .28), transparent 55%),
    linear-gradient(160deg, #1a0d2e 0%, #0f0520 45%, #1a0d2e 100%);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35), 0 0 0 1px rgba(255, 215, 0, .12) inset;
}
.bonus-hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 1600px; height: 1600px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 215, 0, .09) 10deg,
    transparent 20deg, rgba(255, 215, 0, .09) 30deg,
    transparent 40deg, rgba(255, 215, 0, .09) 50deg,
    transparent 60deg, rgba(255, 215, 0, .09) 70deg,
    transparent 80deg, rgba(255, 215, 0, .09) 90deg,
    transparent 100deg, rgba(255, 215, 0, .09) 110deg,
    transparent 120deg, rgba(255, 215, 0, .09) 130deg,
    transparent 140deg, rgba(255, 215, 0, .09) 150deg,
    transparent 160deg, rgba(255, 215, 0, .09) 170deg,
    transparent 180deg, rgba(255, 215, 0, .09) 190deg,
    transparent 200deg, rgba(255, 215, 0, .09) 210deg,
    transparent 220deg, rgba(255, 215, 0, .09) 230deg,
    transparent 240deg, rgba(255, 215, 0, .09) 250deg,
    transparent 260deg, rgba(255, 215, 0, .09) 270deg,
    transparent 280deg, rgba(255, 215, 0, .09) 290deg,
    transparent 300deg, rgba(255, 215, 0, .09) 310deg,
    transparent 320deg, rgba(255, 215, 0, .09) 330deg,
    transparent 340deg, rgba(255, 215, 0, .09) 350deg,
    transparent 360deg);
  animation: raysRotate 70s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
@keyframes raysRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bonus-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 215, 0, .95) 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 22%, rgba(255, 215, 0, .85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 78%, rgba(255, 255, 255, .9) 1.2px, transparent 2px),
    radial-gradient(circle at 78% 88%, rgba(255, 215, 0, .9) 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 15%, rgba(255, 255, 255, .7) 1px, transparent 1.8px),
    radial-gradient(circle at 65% 72%, rgba(255, 215, 0, .7) 1px, transparent 1.8px),
    radial-gradient(circle at 5%  55%, rgba(255, 255, 255, .6) 1px, transparent 1.8px),
    radial-gradient(circle at 95% 48%, rgba(255, 215, 0, .75) 1.2px, transparent 2px),
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, .55) 1px, transparent 1.8px),
    radial-gradient(circle at 55% 92%, rgba(255, 215, 0, .65) 1px, transparent 1.8px);
  background-size: 220px 220px, 280px 280px, 260px 260px, 300px 300px, 240px 240px, 320px 320px, 200px 200px, 340px 340px, 260px 260px, 300px 300px;
  animation: starsDrift 45s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}
@keyframes starsDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 220px 220px, -280px 280px, 260px -260px, -300px -300px, 240px 240px, -320px 320px, 200px -200px, -340px -340px, 260px 260px, -300px -300px; }
}
.bonus-hero-glow {
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, .28) 0%, rgba(255, 140, 0, .18) 35%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: bonusGlowPulse 6s ease-in-out infinite;
}
@keyframes bonusGlowPulse {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.15); }
}
.bonus-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 1400px; height: 1400px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255, 215, 0, .07) 12deg,
    transparent 24deg, rgba(255, 215, 0, .07) 36deg,
    transparent 48deg, rgba(255, 215, 0, .07) 60deg,
    transparent 72deg, rgba(255, 215, 0, .07) 84deg,
    transparent 96deg, rgba(255, 215, 0, .07) 108deg,
    transparent 120deg, rgba(255, 215, 0, .07) 132deg,
    transparent 144deg, rgba(255, 215, 0, .07) 156deg,
    transparent 168deg, rgba(255, 215, 0, .07) 180deg,
    transparent 192deg, rgba(255, 215, 0, .07) 204deg,
    transparent 216deg, rgba(255, 215, 0, .07) 228deg,
    transparent 240deg, rgba(255, 215, 0, .07) 252deg,
    transparent 264deg, rgba(255, 215, 0, .07) 276deg,
    transparent 288deg, rgba(255, 215, 0, .07) 300deg,
    transparent 312deg, rgba(255, 215, 0, .07) 324deg,
    transparent 336deg, rgba(255, 215, 0, .07) 348deg,
    transparent 360deg);
  animation: raysRotate 60s linear infinite reverse;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}
.bonus-hero-content { position: relative; z-index: 2; max-width: 660px; margin-inline: auto; }
.bonus-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.2rem;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .2), rgba(255, 140, 0, .15));
  border: 1px solid rgba(255, 215, 0, .5);
  color: #FFD700;
  font-family: var(--font-en);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  backdrop-filter: blur(8px);
}
.bonus-tag svg { animation: starTwinkle 2s ease-in-out infinite; }
.bonus-tag svg:last-child { animation-delay: -1s; }
@keyframes starTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%      { opacity: .5; transform: scale(.8) rotate(180deg); }
}
.bonus-trophy {
  width: 120px; height: 120px;
  margin: 0 auto 1.8rem;
  color: #FFD700;
  filter: drop-shadow(0 8px 24px rgba(255, 215, 0, .5)) drop-shadow(0 0 40px rgba(255, 215, 0, .3));
  animation: trophyBounce 3s ease-in-out infinite;
}
.bonus-title {
  font-family: var(--font-fa);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1rem;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShine 3s linear infinite;
}
.bonus-sub { color: rgba(255, 255, 255, .85); font-size: 1.05rem; line-height: 2; margin-bottom: 2.2rem; max-width: 520px; margin-inline: auto; }
.bonus-sub b { color: #FFD700; font-weight: 800; }
.bonus-form { max-width: 540px; margin-inline: auto; }
.bonus-input-wrap {
  position: relative;
  display: flex;
  background: linear-gradient(135deg, #2a1a4a, #1a0d2e);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 215, 0, .2);
}
.bonus-input-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2.5px;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFE44D, #B8860B, #FFD700);
  background-size: 300% 300%;
  animation: goldBorderFlow 4s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
@keyframes goldBorderFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.bonus-input-wrap input {
  flex: 1;
  padding: 1.15rem 1.4rem;
  background: transparent;
  border: none;
  color: #FFD700;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  outline: none;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  min-width: 0;
}
.bonus-input-wrap input::placeholder { color: rgba(255, 215, 0, .35); letter-spacing: .14em; font-weight: 600; }
.bonus-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.15rem 1.7rem;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a0d2e;
  border: none;
  font-family: var(--font-fa);
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all .25s ease;
  position: relative;
  z-index: 2;
}
.bonus-submit svg { width: 18px; height: 18px; transition: transform .35s ease; }
.bonus-submit:hover { background: linear-gradient(135deg, #FFE44D, #FFB800); box-shadow: inset 0 0 20px rgba(255, 255, 255, .3); }
.bonus-submit:hover svg { transform: rotate(15deg) scale(1.15); }
.bonus-hint { margin-top: 1rem; color: rgba(255, 255, 255, .6); font-size: .82rem; font-weight: 500; }
.bonus-claimed {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, rgba(74, 222, 128, .15), rgba(74, 222, 128, .08));
  border: 1.5px solid rgba(74, 222, 128, .4);
  border-radius: var(--radius);
  color: #4ade80;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.bonus-change-code {
  display: inline-block;
  margin-top: 1rem;
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-fa);
  padding: .35rem .75rem;
  border-radius: 8px;
  transition: all .2s;
}
.bonus-change-code:hover { color: #FFD700; background: rgba(255, 215, 0, .08); }
.bonus-courses { padding: 2rem 0 5rem; text-align: center; }
.bonus-courses h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: .8rem; color: var(--ink-900); }
.bonus-courses > p { color: var(--text-soft); margin-bottom: 2.5rem; max-width: 520px; margin-inline: auto; }
.bonus-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; max-width: 1000px; margin-inline: auto; }
.bonus-course-card {
  position: relative;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(15, 23, 42, .08), 0 0 0 2px rgba(255, 215, 0, .35);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bonus-course-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(255, 165, 0, .3), 0 0 0 3px rgba(255, 215, 0, .6); }
.bonus-course-display { font-family: var(--font-fa); font-size: 1.15rem; font-weight: 800; color: var(--ink-900); line-height: 1.5; margin-bottom: .6rem; }
.bonus-course-old { font-family: var(--font-en); font-size: .9rem; color: var(--text-soft); text-decoration: line-through; font-weight: 600; }
.bonus-course-free {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
  margin: .5rem 0 1.4rem;
  line-height: 1.2;
}
.bonus-course-card .btn {
  width: 100%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a0d2e;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(255, 165, 0, .3);
  margin-top: auto;
}
.bonus-course-card .btn:hover { background: linear-gradient(135deg, #FFE44D, #FFB800); transform: translateY(-2px); }

/* ============================================================
   PROFILE — Edit with email verification
   ============================================================ */
.profile-wrap {
  padding: 2rem 1rem 4rem;
  display: flex;
  justify-content: center;
}
.profile-card {
  width: 100%;
  max-width: 520px;
  padding: 2.4rem 2rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.profile-card::before {
  display: none !important;
  content: none !important;
}
.profile-icon {
  font-size: 3rem;
  margin-bottom: .6rem;
  display: inline-block;
  animation: statIconFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(59, 130, 246, .35));
}
.profile-title {
  font-family: var(--font-fa);
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: .6rem;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed 55%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-sub {
  font-size: .92rem;
  line-height: 1.9;
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-inline: auto;
}
.profile-email-display {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(124, 58, 237, .06));
  border: 1.5px solid rgba(59, 130, 246, .28);
  margin-bottom: 1.5rem;
  font-family: var(--font-fa);
  font-size: .88rem;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-email-label { color: var(--text-soft); font-weight: 700; }
.profile-email-display b {
  font-family: var(--font-en);
  color: var(--blue-700);
  font-weight: 800;
}
.profile-submit { width: 100%; margin-top: .5rem; gap: .55rem; }
.profile-hint {
  margin-top: 1.2rem;
  font-size: .82rem;
  color: var(--text-soft);
  line-height: 1.9;
}
.profile-hint a {
  color: var(--blue-600);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-code-input {
  width: 100%;
  padding: 1rem 1rem !important;
  margin: 0 0 1rem !important;
  font-family: var(--font-mono) !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  letter-spacing: .6em !important;
  text-align: center !important;
  background: var(--ink-50) !important;
  border: 2px dashed rgba(59, 130, 246, .4) !important;
  border-radius: 14px !important;
  color: var(--blue-700) !important;
}
.profile-code-input:focus {
  border-style: solid !important;
  border-color: var(--blue-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .14) !important;
}
.profile-code-input::placeholder {
  color: rgba(148, 163, 184, .5);
  letter-spacing: .6em;
}

.profile-resend-form { margin-top: 1rem; }
.profile-link-btn {
  background: none;
  border: none;
  padding: .35rem .7rem;
  font-family: var(--font-fa);
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.profile-link-btn:hover { color: var(--blue-700); }

.profile-form { text-align: right; }
.profile-form label {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-fa);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-700);
}
.profile-form input {
  width: 100%;
  padding: .85rem 1rem;
  margin-top: .45rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: .94rem;
  background: var(--ink-50);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.profile-form input:focus {
  outline: none;
  border-color: var(--blue-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}
.profile-divider {
  height: 1px;
  margin: 1.2rem 0;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .25), transparent);
}
.profile-optional {
  font-weight: 500;
  color: var(--text-soft);
  font-size: .82em;
}

/* ============================================================
   TERMS & CONDITIONS BLOCK (register)
   ============================================================ */
.terms-block {
  margin: 1.4rem 0 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .06), rgba(124, 58, 237, .04));
  border: 1.5px solid rgba(59, 130, 246, .22);
  font-family: var(--font-fa);
  font-size: .85rem;
  line-height: 1.9;
}
.terms-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.terms-checkbox-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  cursor: pointer;
  margin: .15rem 0 0 0;
}
.terms-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.terms-checkbox-custom {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(59, 130, 246, .55);
  background: #fff;
  position: relative;
  transition: all .25s;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .12);
}
.terms-checkbox-custom::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s;
}
.terms-checkbox-wrap input:checked + .terms-checkbox-custom {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(59, 130, 246, .4);
}
.terms-checkbox-wrap input:checked + .terms-checkbox-custom::after {
  transform: rotate(45deg) scale(1);
}
.terms-checkbox-wrap input:focus-visible + .terms-checkbox-custom {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .25);
}
.terms-text {
  flex: 1;
  color: var(--ink-700);
  font-weight: 500;
}
.terms-text b { color: #b45309; font-weight: 800; }
.terms-text a {
  color: var(--blue-600);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.terms-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease, margin .3s ease;
  margin-top: 0;
  padding: 0;
  border-top: 0 solid transparent;
}
.terms-details.active {
  max-height: 600px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(59, 130, 246, .25);
}
.terms-details h4 {
  font-family: var(--font-fa);
  font-size: .92rem;
  font-weight: 900;
  color: var(--blue-700);
  margin: 0 0 .7rem;
}
.terms-details ol {
  padding-inline-start: 1.4rem;
  margin: 0;
  color: var(--ink-600);
  font-size: .82rem;
  line-height: 1.95;
}
.terms-details li { margin-bottom: .4rem; }

/* ============================================================
   PROFILE — Readonly fields
   ============================================================ */
.profile-readonly {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1rem;
  background: var(--ink-100);
  border: 1.5px dashed rgba(148, 163, 184, .5);
  border-radius: 12px;
  margin-top: .45rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: .92rem;
  direction: ltr;
  justify-content: flex-start;
}
.profile-readonly svg {
  color: #f59e0b;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, .35));
}
.profile-readonly span {
  font-family: var(--font-en);
  font-weight: 700;
}
.profile-readonly-hint {
  display: block;
  font-size: .74rem;
  color: var(--text-soft);
  margin-top: .4rem;
  font-weight: 500;
  font-family: var(--font-fa);
}

/* ============================================================
   SUBMIT BUTTON — Locked state
   ============================================================ */
.auth-submit.is-locked,
.auth-submit:disabled {
  cursor: not-allowed !important;
  filter: grayscale(.55) brightness(.95);
  opacity: .75;
  transform: none !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12) !important;
  animation: none !important;
  pointer-events: auto;
}
.auth-submit.is-locked::before,
.auth-submit:disabled::before {
  display: none;
}
.auth-submit {
  position: relative;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.7rem !important;
  line-height: 1.5;
  transition: all .3s ease;
}
.auth-submit .submit-label {
  display: block;
  font-weight: 900;
  font-size: 1rem;
}
.auth-submit .submit-lock-hint {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  opacity: .85;
  transition: opacity .3s, max-height .3s, margin .3s;
  max-height: 2em;
  overflow: hidden;
}
.auth-submit:not(.is-locked):not(:disabled) .submit-lock-hint {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}
.auth-submit:not(.is-locked):not(:disabled) {
  cursor: pointer;
  animation: gradientShift 5s ease infinite, submitReadyPulse 2.4s ease-in-out infinite;
}
@keyframes submitReadyPulse {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(59, 130, 246, .35),
                0 0 0 0 rgba(59, 130, 246, .35);
  }
  50% {
    box-shadow: 0 12px 32px rgba(59, 130, 246, .5),
                0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* ============================================================
   PROFILE — Animated Icons
   ============================================================ */
.profile-anim-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto .9rem;
  isolation: isolate;
}
.profile-anim-icon svg {
  position: relative;
  z-index: 3;
  width: 46px;
  height: 46px;
  color: #fff;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .28));
}
.profile-anim-icon::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 50%, #ec4899 100%);
  background-size: 200% 200%;
  box-shadow:
    0 14px 32px rgba(59, 130, 246, .45),
    0 0 40px rgba(124, 58, 237, .28),
    inset 0 2px 4px rgba(255, 255, 255, .35),
    inset 0 -3px 6px rgba(0, 0, 0, .22);
  animation: profileIconGradient 6s ease infinite;
  z-index: 2;
}
.profile-anim-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(59, 130, 246, .55);
  pointer-events: none;
  z-index: 1;
}
.profile-anim-ring-1 { inset: 6px; animation: profileRingSpin 18s linear infinite; }
.profile-anim-ring-2 {
  inset: 0;
  border-style: solid;
  border-color: rgba(124, 58, 237, .32);
  animation: profileRingSpin 26s linear infinite reverse;
}
.profile-anim-ring-3 {
  inset: -8px;
  border-style: dotted;
  border-color: rgba(236, 72, 153, .35);
  animation: profileRingSpin 34s linear infinite;
}
.profile-anim-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(59, 130, 246, .45) 0%,
    rgba(124, 58, 237, .3) 35%,
    transparent 72%);
  filter: blur(22px);
  z-index: 0;
  animation: profileGlowPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes profileIconGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes profileRingSpin { to { transform: rotate(360deg); } }
@keyframes profileGlowPulse {
  0%, 100% { opacity: .7; transform: scale(.95); }
  50%      { opacity: 1;  transform: scale(1.14); }
}

.profile-anim-lock svg {
  animation: profileLockFloat 3.2s ease-in-out infinite,
             profileLockShake 5s ease-in-out infinite;
  transform-origin: 50% 65%;
}
@keyframes profileLockFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  25%      { transform: rotate(2deg)  translateY(-2px); }
  50%      { transform: rotate(-2deg) translateY(-3px); }
  75%      { transform: rotate(3deg)  translateY(-1px); }
}
@keyframes profileLockShake {
  0%, 84%, 100% { transform: rotate(-3deg); }
  88%           { transform: rotate(-9deg) scale(1.06); }
  92%           { transform: rotate(7deg)  scale(1.06); }
  96%           { transform: rotate(-4deg) scale(1.04); }
}

.profile-anim-edit svg {
  animation: profileUserFloat 3.4s ease-in-out infinite;
}
@keyframes profileUserFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.05); }
}

.profile-anim-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #93c5fd 45%, transparent 75%);
  box-shadow:
    0 0 10px #93c5fd,
    0 0 20px rgba(96, 165, 250, .7);
  animation: profileSparkOrbit 3s ease-in-out infinite;
}
.profile-anim-spark-1 { top: 4px; left: 10px; animation-delay: 0s; }
.profile-anim-spark-2 {
  bottom: 6px; right: 12px;
  animation-delay: -1s;
  background: radial-gradient(circle, #fff 0%, #f9a8d4 45%, transparent 75%);
  box-shadow:
    0 0 10px #f9a8d4,
    0 0 20px rgba(236, 72, 153, .7);
}
.profile-anim-spark-3 {
  top: 50%; right: 0;
  animation-delay: -2s;
  background: radial-gradient(circle, #fff 0%, #c4b5fd 45%, transparent 75%);
  box-shadow:
    0 0 10px #c4b5fd,
    0 0 20px rgba(167, 139, 250, .7);
}
@keyframes profileSparkOrbit {
  0%, 100% { transform: scale(.8)   translateY(0); opacity: .65; }
  50%      { transform: scale(1.5)  translateY(-3px); opacity: 1; }
}

.profile-save-btn {
  position: relative;
  width: 100%;
  margin-top: .7rem;
  padding: 1.05rem 1.7rem !important;
  font-size: 1rem !important;
  border-radius: 14px !important;
  gap: .6rem !important;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 45%, #0d9488 100%) !important;
  background-size: 200% 200% !important;
  box-shadow:
    0 14px 32px rgba(16, 185, 129, .4),
    0 0 0 0 rgba(16, 185, 129, .5),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  animation: profileSaveGradient 5s ease infinite,
             profileSavePulse 2.6s ease-in-out infinite !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s ease;
}
.profile-save-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.profile-save-btn .profile-save-text {
  font-weight: 900;
  letter-spacing: -.005em;
  position: relative;
  z-index: 2;
}
.profile-save-shine {
  position: absolute;
  top: 0; left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 255, 255, .55) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: profileSaveShine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes profileSaveGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes profileSavePulse {
  0%, 100% {
    box-shadow:
      0 14px 32px rgba(16, 185, 129, .4),
      0 0 0 0 rgba(16, 185, 129, .5),
      inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  50% {
    box-shadow:
      0 14px 32px rgba(16, 185, 129, .55),
      0 0 0 10px rgba(16, 185, 129, 0),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  }
}
@keyframes profileSaveShine {
  0%        { left: -110%; }
  55%, 100% { left: 170%; }
}
.profile-save-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 20px 44px rgba(16, 185, 129, .6),
    0 0 0 0 rgba(16, 185, 129, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
.profile-save-btn:hover svg {
  transform: scale(1.15) rotate(-6deg);
}
.profile-save-btn:active {
  transform: translateY(-1px) scale(.99);
}

/* ============================================================
   SUPPORT LOCKED — هم‌سبک با .acad-acronym-closing
   ============================================================ */
.support-locked {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 1.8rem 2.5rem 1.8rem;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, .07), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
  border: 1.5px solid rgba(59, 130, 246, .2);
  box-shadow:
    0 22px 55px rgba(59, 130, 246, .1),
    0 0 0 1px rgba(255, 255, 255, .6) inset;
  animation: lockedIn .55s cubic-bezier(.4, 0, .2, 1);
}
@keyframes lockedIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.support-locked::before {
  display: none !important;
  content: none !important;
}

.support-locked-inner { position: relative; z-index: 2; }

.support-locked-title {
  font-family: var(--font-fa);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text-soft);
  margin: .4rem 0 1rem;
}

.support-locked-desc {
  font-family: var(--font-fa);
  font-size: .95rem;
  line-height: 2;
  color: var(--text-soft);
  font-weight: 500;
  margin: 0 auto 1.2rem;
  max-width: 500px;
}
.support-locked-hint {
  display: inline-block;
  margin-top: 1rem;
  padding: .55rem 1.1rem;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(124, 58, 237, .06));
  border: 1.5px dashed rgba(59, 130, 246, .35);
  font-size: .84rem;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.7;
}
.support-locked-hint b {
  color: var(--blue-700);
  font-weight: 900;
}

/* ============================================================
   ✅ عکس support_1.png — بالا-راست کارت support-locked
   ============================================================ */
.support-locked-img {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 72px;
  height: auto;
  display: block;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 14px rgba(59, 130, 246, .22));

  --r: -6deg;

  transform: rotate(var(--r));
  transform-origin: 50% 65%;
  animation: supportImgFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes supportImgFloat {
  0%, 100% { transform: translateY(0)    rotate(var(--r)); }
  25%      { transform: translateY(-3px) rotate(calc(var(--r) + 2deg)); }
  50%      { transform: translateY(-6px) rotate(var(--r)); }
  75%      { transform: translateY(-3px) rotate(calc(var(--r) - 2deg)); }
}

html.dark-mode .support-locked-img {
  filter: drop-shadow(0 6px 18px rgba(96, 165, 250, .35));
}

@media (prefers-reduced-motion: reduce) {
  .support-locked-img {
    animation: none;
    transform: rotate(var(--r));
  }
}

@media (max-width: 720px) {
  .support-locked { padding: 1.4rem 1.3rem 1.4rem; border-radius: var(--radius-lg); }
  .support-locked-img { width: 56px; top: 30px; right: 16px; }
}