/* «Приведи друга» и медиа-программа: страницы /referral и /media, вкладка «Друзья» в кабинете, админка */
.ref-steps { margin: 0 0 8px; padding-left: 1.3em; display: grid; gap: 8px; }
.ref-table { width: 100%; }
.ref-table .num { text-align: right; white-space: nowrap; }
.ref-table tfoot td { font-weight: 600; border-top: 1px solid var(--line-hi); }
.ref-warn { margin: 0 0 12px; }
.ref-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 12px 0; }
.ref-kit figure { margin: 0; }
.ref-kit img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: repeating-conic-gradient(rgba(255,255,255,.06) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
.ref-kit figcaption { margin-top: 6px; font-size: .9em; color: var(--soft); }
.ref-h3 { margin: 16px 0 6px; font-size: 1.05em; }
.ref-chat { padding: 10px 12px; border: 1px dashed var(--line-hi); border-radius: var(--radius-sm); font-size: .92em; overflow-wrap: anywhere; }
.ref-partners { list-style: none; padding: 0; display: grid; gap: 6px; }

/* кабинет */
.ref-pane { margin-bottom: 16px; }
.ref-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ref-code { display: flex; align-items: baseline; gap: 10px; }
.ref-code b { font-size: 1.6em; letter-spacing: .12em; color: var(--gold, var(--accent)); }
.ref-link { display: flex; gap: 8px; min-width: 0; }
.ref-link input { flex: 1; min-width: 0; }
.ref-enter label { display: block; margin-bottom: 6px; }
.ref-form { display: grid; gap: 10px; }
.ref-form label { display: grid; gap: 4px; font-size: .92em; }
.ref-form .x-seg { display: flex; gap: 16px; }
.ref-form .x-seg label { display: inline-flex; gap: 6px; align-items: center; }
.ref-kit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-list { margin-top: 4px; }
.ref-st { white-space: nowrap; }
.ref-st-ok { color: #6fd08c; }
.ref-st-warn { color: #e8b45a; }
.ref-st-bad { color: #ef7d6b; }
@media (max-width: 640px) {
  .ref-link { flex-direction: column; }
  .ref-code b { font-size: 1.35em; }
}

/* админка */
.ref-row-review td { background: rgba(232, 180, 90, .08); }
.ref-acts { white-space: nowrap; }
.ref-rep { padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ref-rep p { margin: 0 0 8px; overflow-wrap: anywhere; }
.ref-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ref-reason { min-width: min(320px, 100%); }

/* «Сейчас в эфире» на главной и витрине x40 (_live.html) */
.live-band { max-width: var(--wrap, 1200px); margin: 24px auto; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); }
.live-band h2 { margin: 0; font-size: 1.05em; display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4a4a; box-shadow: 0 0 0 0 rgba(255, 74, 74, .6); animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 74, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-band ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.live-band li a { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-hi);
  text-decoration: none; color: var(--text); max-width: 100%; }
.live-band li a span { color: var(--soft); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-more { font-size: .9em; }
.live-band li { max-width: 100%; min-width: 0; }
.live-band li a { min-width: 0; overflow: hidden; }
@media (max-width: 640px) {
  .live-band { margin: 16px; flex-direction: column; align-items: stretch; }
  .live-band ul { flex-direction: column; }
  .live-band li a { display: flex; }
}

/* медальоны этапов и наград (art/*-medal-*, tools/gen_ref_art.py) */
.ref-medals { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
/* карточки одной высоты и строки GP на одном уровне: заголовок занимает до трёх строк в общем блоке (замечание владельца 24.10: «прыгает») */
.ref-medals li { display: grid; grid-template-rows: auto 3.9em auto auto; justify-items: center; align-content: start; text-align: center; gap: 6px; padding: 16px 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glass); }
.ref-medals img { width: 96px; height: 96px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
.ref-medals b { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ref-gp { color: var(--gold, var(--accent)); font-size: 14px; font-weight: 600; line-height: 1.35; }
.ref-gp-2 { color: var(--soft); font-weight: 500; }
.ref-gp-old { margin-left: 4px; color: var(--faint); font-weight: 500; }
.ref-total { margin: 4px 0 12px; }
.ref-how-medal { float: right; width: 120px; height: 120px; margin: -8px 0 8px 16px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); }
@media (max-width: 640px) {
  .ref-medals { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ref-medals img { width: 72px; height: 72px; }
  .ref-how-medal { width: 84px; height: 84px; }
}
/* главное действие под содержанием слева (кнопки «Мои друзья», «Подать заявку»); на узком экране — строкой под содержанием */
.v3 .ref-toc-cta { display: grid; gap: 8px; margin-top: 16px; }
.v3 .ref-toc-cta .x-btn { justify-content: center; padding: 0 16px; }
.v3 .xp-toc .ref-toc-cta .x-btn-primary, .v3 .xp-toc .ref-toc-cta .x-btn-primary:hover { color: #fff; }   /* .xp-toc a задаёт серый — для кнопок он нечитаем */
.v3 .xp-toc .ref-toc-cta .x-btn-glass { color: var(--text); }
@media (max-width: 1000px) { .v3 .ref-toc-cta { flex: 1 0 100%; display: flex; flex-wrap: wrap; margin-top: 8px; } }