/* ═══════════════════════════════════════════════════════════════════════════
 * account.css — ЛК юзера.
 * Grid: 2 колонки на desktop (left = standard+artist, right = info/offers).
 * На mobile — одна колонка, стеком.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.account-page {
  background:
    radial-gradient(ellipse at 20% 10%, #42126a40 0, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #1a1c6c40 0, transparent 55%),
    #050719;
  min-height: 100vh;
}

.account-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 22px 60px;
}

/* ─ Loading / gate ──────────────────────────────────────────────────────── */
.account-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}
.loader-ring {
  width: 54px; height: 54px;
  border: 3px solid #2d1f55;
  border-top-color: #d94eff;
  border-radius: 50%;
  animation: loader-spin .9s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg) } }

.account-gate {
  text-align: center;
  padding: 60px 20px;
  color: #d4c7ff;
}
.account-gate h1 { font-size: clamp(24px, 4vw, 36px); margin: 0 0 12px }
.account-gate p  { color: #a89bd0; font-size: 15px }

/* ─ Grid layout ────────────────────────────────────────────────────────── */
.account-content {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
  gap: 22px;
  align-items: start;
}

.account-left,
.account-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* ─ Block (glass card) ─────────────────────────────────────────────────── */
.account-block {
  background: linear-gradient(135deg, #1a1442cc 0%, #0e0a2ccc 100%);
  border: 1px solid #3a2b64;
  border-radius: 20px;
  padding: 24px 24px 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 30px rgba(139, 66, 187, .06),
              0 12px 40px rgba(0, 0, 0, .35);
}
.account-block h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: #f0eaff;
}

/* ═══ Standard block ═══════════════════════════════════════════════════════ */
.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a1aa0 0%, #28cff1 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(217, 78, 255, .25);
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block }
.profile-identity   { min-width: 0; flex: 1 }
.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #f0eaff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-sub {
  font-size: 12px;
  color: #a89bd0;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Field rows (email, telegram) */
.field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #21173e;
}
.field-row:last-of-type { border-bottom: 0 }
.field-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8f83b8;
}
.field-value {
  font-size: 14px;
  color: #e8e2ff;
  text-align: right;
  word-break: break-all;
}

/* ─ Toggle ─ */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-row input { position: absolute; opacity: 0; pointer-events: none }
.toggle-track {
  width: 44px; height: 24px;
  border-radius: 24px;
  background: #2d1f55;
  position: relative;
  transition: background .22s;
  flex-shrink: 0;
}
.toggle-dot {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #a89bd0;
  transition: all .22s cubic-bezier(.4, 0, .2, 1);
}
.toggle-row input:checked + .toggle-track {
  background: linear-gradient(90deg, #6a1aa0, #cf75f3);
}
.toggle-row input:checked + .toggle-track .toggle-dot {
  left: 23px;
  background: #fff;
}
.toggle-label {
  font-size: 14px;
  color: #f0eaff;
  font-weight: 500;
}

/* ─ Balance ─ */
.balance-card {
  background: linear-gradient(135deg, rgba(217, 78, 255, .14) 0%, rgba(42, 207, 241, .08) 100%);
  border: 1px solid rgba(217, 78, 255, .3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 16px;
}
.balance-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9bfe8;
  margin-bottom: 6px;
}
.balance-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.balance-value > #balance-amount {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(100deg, #e04bff 0%, #6a9bff 50%, #2bb6ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.balance-unit {
  font-size: 13px;
  letter-spacing: 2px;
  color: #a89bd0;
  font-weight: 500;
}

/* ─ Referral ─ */
.referral-card {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(15, 10, 35, .4);
  border: 1px solid #2d1f55;
  border-radius: 14px;
}
.referral-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9bfe8;
  margin-bottom: 10px;
}
.referral-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.referral-link-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: #0e0a2c;
  border: 1px solid #3a2b64;
  border-radius: 10px;
  color: #d4c7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.referral-link-row input:focus {
  outline: 2px solid #cf75f3;
  outline-offset: -1px;
}
.referral-stats {
  font-size: 12px;
  color: #a89bd0;
}
.referral-stats b { color: #f0eaff; font-size: 16px; margin-left: 4px }

/* ─ Logout row ─ */
.logout-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #21173e;
  display: flex;
  justify-content: flex-end;
}
.logout-row .account-btn { color: #ff5a7e }
.logout-row .account-btn:hover { background: rgba(255, 90, 126, .08); color: #ff8ca3 }

/* ═══ Artist block ═════════════════════════════════════════════════════════ */
.artist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.artist-head h2 { margin: 0 }
.artist-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid;
}
.artist-status-badge[data-status="pending"]  { color: #a89bd0; border-color: #3a2b64; background: #0e0a2c }
.artist-status-badge[data-status="review"]   { color: #ffcc5c; border-color: #ffcc5c66; background: #3a2a0e }
.artist-status-badge[data-status="rejected"] { color: #ff5a7e; border-color: #ff5a7e66; background: #3a0e1e }
.artist-status-badge[data-status="approved"] { color: #5ee8c6; border-color: #5ee8c666; background: #0e3a2e }

.artist-reject-hint {
  background: rgba(255, 90, 126, .08);
  border: 1px solid rgba(255, 90, 126, .3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #ffd4de;
}
.artist-reject-hint b { color: #ff5a7e }

/* Form fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.form-field label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9bfe8;
  font-weight: 500;
}
.form-field .required { color: #ff5a7e; margin-left: 2px }
.form-field .field-hint-inline {
  font-size: 10px;
  color: #8f83b8;
  letter-spacing: .8px;
  text-transform: none;
  font-weight: 400;
  margin-left: 10px;
}
.form-field input[type="text"],
.form-field input[type="url"],
.form-field textarea {
  padding: 11px 14px;
  background: #0e0a2c;
  border: 1px solid #3a2b64;
  border-radius: 10px;
  color: #f0eaff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #cf75f3;
  box-shadow: 0 0 0 3px rgba(207, 117, 243, .18);
}
.form-field textarea { resize: vertical; min-height: 110px; line-height: 1.5 }
.form-field.invalid input,
.form-field.invalid textarea {
  border-color: #ff5a7e;
  box-shadow: 0 0 0 3px rgba(255, 90, 126, .18);
}
.field-hint {
  font-size: 11px;
  color: #8f83b8;
  text-align: right;
  letter-spacing: .5px;
}

/* ─ Chip group ─ */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-group .chip {
  position: relative;
  cursor: pointer;
}
.chip-group .chip input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.chip-group .chip span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 10, 35, .5);
  border: 1px solid #3a2b64;
  color: #a89bd0;
  font-size: 12px;
  letter-spacing: .5px;
  transition: all .18s;
  user-select: none;
}
.chip-group .chip:hover span { color: #e8d4ff; border-color: #7d5eb8 }
.chip-group .chip input:checked + span {
  background: linear-gradient(135deg, rgba(207, 117, 243, .3), rgba(42, 207, 241, .18));
  border-color: #cf75f3;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(217, 78, 255, .25);
}
.chip-group .chip input:focus-visible + span {
  outline: 2px solid #cf75f3;
  outline-offset: 2px;
}

/* ─ Logo upload ─ */
.logo-upload-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.logo-preview {
  width: 100px; height: 100px;
  border: 1.5px dashed #3a2b64;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #0e0a2c;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block }
.logo-placeholder {
  color: #5a4a8a;
  font-size: 11px;
  letter-spacing: 1px;
}
.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* ─ Social links ─ */
.social-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.social-list:empty { display: none }
.social-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.social-row input {
  padding: 9px 12px;
  background: #0e0a2c;
  border: 1px solid #3a2b64;
  border-radius: 10px;
  color: #f0eaff;
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
}
.social-row input:focus {
  outline: none;
  border-color: #cf75f3;
  box-shadow: 0 0 0 2px rgba(207, 117, 243, .14);
}
.social-row .social-remove {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 90, 126, .14);
  border: 1px solid rgba(255, 90, 126, .4);
  color: #ff5a7e;
  font-size: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .18s;
}
.social-row .social-remove:hover {
  background: rgba(255, 90, 126, .28);
  transform: scale(1.08);
}

/* ─ Buttons ─ */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s;
  border: 1px solid;
}
.account-btn-primary {
  background: linear-gradient(90deg, #491080 0%, #6a1aa0 100%);
  border-color: #c48bff;
  color: #fff;
  box-shadow: 0 0 0 1px #d94eff40 inset, 0 0 20px #d94eff33;
}
.account-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px #d94eff80 inset, 0 0 28px #d94eff66;
}
.account-btn-secondary {
  background: rgba(15, 10, 35, .5);
  border-color: #3a2b64;
  color: #e8e2ff;
}
.account-btn-secondary:hover {
  border-color: #cf75f3;
  background: rgba(30, 20, 60, .6);
}
.account-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #c9bfe8;
  padding: 8px 12px;
}
.account-btn-ghost:hover {
  color: #f0eaff;
  background: rgba(207, 117, 243, .08);
}
.account-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

.artist-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.artist-actions .account-btn { flex: 1; min-width: 160px }

.artist-footnote {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #21173e;
  font-size: 12px;
  color: #8f83b8;
  line-height: 1.5;
}


/* ═══ Info / offers block ════════════════════════════════════════════════ */




/* ═══ Info / offers block ════════════════════════════════════════════════ */
/* Правая колонка шире. Внутри — grid: 01 full, 02+banner+04 в один
   столбец с 03 full. На мобиле — всё в столбец. */

.info-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
.info-block h2 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 22px;
}
.info-block > .offer-card[data-offer="hero"],
.info-block > .offer-card[data-offer="artist"],
.info-block > .offer-banner,
.info-block > .info-note {
  grid-column: 1 / -1;
}

/* ── Базовая карточка ── */
.offer-card {
  position: relative;
  display: block;              /* ← было flex; вернули block */
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(15, 10, 35, .45);
  border: 1px solid #2d1f55;

  /* Reveal */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.3,1),
    transform .55s cubic-bezier(.2,.7,.3,1),
    border-color .22s, box-shadow .22s, background .22s;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Flex включается только для карточек с монетами — чтобы текст и монеты
   стояли в ряд. В step и passive монет нет → block, h3 над p. */
.offer-card[data-offer="hero"],
.offer-card[data-offer="artist"] {
  display: flex;
  align-items: center;
  gap: 16px;
}



.offer-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217, 78, 255, .14);
}

.offer-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #f0eaff;
  letter-spacing: -.2px;
  line-height: 1.3;
}
.offer-card p {
  margin: 0;
  font-size: 14px;
  color: #d4cae8;
  line-height: 1.55;
}
.offer-card p b { color: #ffcc5c; font-weight: 600 }

/* Текстовая часть — растягивается, монеты прижимаются справа */
.offer-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ═══ 01 — HERO (с двумя монетами, CTA) ═══════════════════════════════ */
.offer-card[data-offer="hero"] {
  min-height: 180px;
  padding: 22px 22px;
  background:
    radial-gradient(ellipse at 100% -10%, rgba(217, 78, 255, .28), transparent 55%),
    radial-gradient(ellipse at -10% 110%, rgba(42, 207, 241, .18), transparent 55%),
    linear-gradient(135deg, rgba(80, 30, 140, .55), rgba(20, 15, 60, .85));
  border-color: rgba(217, 78, 255, .45);
}
.offer-card[data-offer="hero"] h3 { font-size: 20px; margin-bottom: 10px; }
.offer-card[data-offer="hero"] p  { font-size: 15px; }

/* Свечение под hero-карточкой */
.offer-card[data-offer="hero"]::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 140px;
  background: radial-gradient(ellipse at center, rgba(217, 78, 255, .35), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: heroPulse 4.5s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: .55 }
  50%      { opacity: 1 }
}

/* Пара монет в hero — блок справа от текста */
.offer-coins {
  position: relative;
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  pointer-events: none;
}
.offer-coin {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 210, 120, .55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 200, 90, .35);
}
.offer-coin-back {
  top: 0;
  right: 34px;
  transform: rotate(-14deg) scale(.92);
  opacity: .92;
}
.offer-coin-front {
  bottom: 0;
  right: 0;
  transform: rotate(9deg);
}

/* CTA-кнопка */
.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #c48bff;
  background: linear-gradient(90deg, #491080 0%, #6a1aa0 100%);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 0 0 1px #d94eff40 inset, 0 0 20px #d94eff33;
  transition: transform .18s, box-shadow .18s;
}
.offer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px #d94eff80 inset, 0 0 28px #d94eff66;
}
.offer-cta:active  { transform: translateY(0) scale(.98); }
.offer-cta:disabled{ opacity: .5; cursor: not-allowed; transform: none }

/* ═══ 02 — STEP ═══════════════════════════════════════════════════════ */
.offer-card[data-offer="step"] {
  background: linear-gradient(135deg, rgba(40, 30, 90, .55), rgba(15, 10, 40, .85));
  border-color: rgba(147, 123, 255, .35);
}

/* ═══ 04 — PASSIVE ═══════════════════════════════════════════════════ */
.offer-card[data-offer="passive"] {
  background: linear-gradient(135deg, rgba(25, 20, 55, .5), rgba(10, 8, 30, .8));
  border-color: rgba(90, 70, 150, .35);
}

/* ═══ 03 — ARTIST (золото, одна монета) ══════════════════════════════ */
.offer-card[data-offer="artist"] {
  padding: 22px 22px;
  background:
    radial-gradient(ellipse at 95% 20%, rgba(255, 200, 90, .22), transparent 55%),
    linear-gradient(135deg, rgba(90, 60, 20, .55), rgba(30, 20, 10, .85));
  border-color: rgba(255, 200, 90, .5);
}
.offer-card[data-offer="artist"] h3 { color: #ffe1a1; font-size: 18px; }
.offer-card[data-offer="artist"] p  { color: #f0dfc0; }
.offer-card[data-offer="artist"] p b{ color: #ffcc5c }

.offer-coin-solo {
  flex: 0 0 auto;
  pointer-events: none;
}
.offer-coin-solo img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 210, 120, .65);
  box-shadow: 0 6px 26px rgba(0,0,0,.5), 0 0 34px rgba(255, 200, 90, .45);
}

/* ═══ NEW — Banner с монетами (декоративная карточка) ═════════════════
   Ширина = как у остальных карточек. Высота = 1/2 ширины (aspect-ratio 2/1).
   Монеты заполняют блок: одна крупная, вторая — сзади, чуть смещена. */

/* ═══ NEW — Banner с монетой (декоративная карточка) ═════════════════
   Стиль контейнера — как у hero-карточки (градиенты, рамка, свечение).
   Внутри — одно изображение coin-logo_2.jpg, object-fit: cover,
   центрировано. min-height: 180px (desktop) — визуально в один уровень
   с hero-карточкой по высоте. */
.offer-banner {
  position: relative;
  grid-column: 1 / -1;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;

  /* Фон-стиль hero: фиолетово-пинковый градиент + cyan-подсветка */
  background:
    radial-gradient(ellipse at 100% -10%, rgba(217, 78, 255, .28), transparent 55%),
    radial-gradient(ellipse at -10% 110%, rgba(42, 207, 241, .18), transparent 55%),
    linear-gradient(135deg, rgba(80, 30, 140, .55), rgba(20, 15, 60, .85));
  border: 1px solid rgba(217, 78, 255, .45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);

  /* Reveal — как у .offer-card */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.3,1),
    transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.offer-banner.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Изображение заполняет весь контейнер, обрезается по краям */
.offer-banner-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



/* ── Info-note ── */
.info-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  background: rgba(10, 8, 32, .55);
  border: 1px dashed #3a2b64;
  border-radius: 12px;
  font-size: 12px;
  color: #a89bd0;
  line-height: 1.6;
  opacity: 0;
  transition: opacity .6s ease .32s;
}
.info-note.is-revealed { opacity: 1 }










/* ═══ Mobile ══════════════════════════════════════════════════════════════ */

/* ═══ Mobile ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .account-content {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .account-main { padding: 22px 14px 50px }
  .account-block { padding: 20px 18px 22px }
  .artist-actions .account-btn { min-width: 100%; flex: 1 1 100% }

  /* Offers: 1 колонка */
  .info-block { grid-template-columns: 1fr; }
  .info-block > h2,
  .info-block > .offer-card,
  .info-block > .offer-banner,
  .info-block > .info-note { grid-column: 1 / -1; }

  .offer-coins { width: 110px; height: 110px; }
  .offer-coin  { width: 66px; height: 66px; }
  .offer-coin-back { right: 28px }

  .offer-banner { min-height: 160px; }
}

@media (max-width: 480px) {
  .profile-head { gap: 12px }
  .profile-avatar { width: 48px; height: 48px; font-size: 18px }
  .balance-value > #balance-amount { font-size: 28px }

  .social-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "url remove"
      "desc desc";
  }
  .social-row .social-url    { grid-area: url }
  .social-row .social-desc   { grid-area: desc }
  .social-row .social-remove { grid-area: remove }

  /* Offers: компактные */
  .offer-card { padding: 16px 16px; gap: 12px; }
  .offer-card[data-offer="hero"] { padding: 18px 16px; min-height: 150px }
  .offer-card[data-offer="hero"] h3 { font-size: 17px }
  .offer-card[data-offer="hero"] p  { font-size: 13.5px }

  .offer-coins { width: 92px; height: 92px; }
  .offer-coin  { width: 56px; height: 56px; }
  .offer-coin-back { right: 22px }

  .offer-card[data-offer="artist"] { padding: 16px; gap: 12px }
  .offer-coin-solo img { width: 72px; height: 72px }

  .offer-banner { min-height: 140px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .offer-card,
  .offer-banner,
  .info-note {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .offer-card[data-offer="hero"]::after { animation: none }
}