/* referrals.css · v1.1.4.451 — K+ redesign
 * Повністю на дизайн-токенах (tokens.css), усе scoped під .kp-page--referrals.
 * Канонічні компоненти (.card/.hero/.btn-*/.badge/.form-*) живуть у cyber-components.css —
 * тут лише referral-специфічні стилі + K+ рестайл наявної розмітки/віджетів/білдера.
 * Без hardcoded кольорів, без arena-card leak (arena-card перевизначено лише в межах сторінки).
 */

/* ─── PAGE SHELL ─── */
.kp-page--referrals{
  max-width: var(--n-wide-w, 1080px);
  margin: 0 auto;
  padding: 0 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text);
}

/* ─── FLASH ─── */
.kp-page--referrals .w-referrals-flash{
  border-radius: var(--n-r-md);
  padding: 12px 16px;
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--border);
}
.kp-page--referrals .w-referrals-flash--ok{
  background: var(--hp-dim); color: var(--hp);
  border-color: color-mix(in srgb, var(--hp) 30%, transparent);
}
.kp-page--referrals .w-referrals-flash--err{
  background: var(--red-dim); color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

/* ─── HEADER (hero) ─── */
.kp-page--referrals .w-referrals-header{
  text-align: center;
  padding: 28px 0 8px;
}
.kp-page--referrals .w-referrals-header__heading{ display: block; }
.kp-page--referrals .w-referrals-header__title{
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 8px;
}
.kp-page--referrals .w-referrals-header__subtitle{
  font-size: .92rem;
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto 14px;
  line-height: 1.5;
}
.kp-page--referrals .w-referrals-header__action{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--cell);
  color: var(--text-2); font-size: .78rem; font-weight: 600;
  text-decoration: none; transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-header__action:hover{
  border-color: var(--border-h); background: var(--cell-h); color: var(--text);
}

/* ─── STAT RIBBON ─── */
.kp-page--referrals .w-referrals-stats-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.kp-page--referrals .w-referrals-stat-tile{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--n-r-lg);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
  transition: all .22s var(--ease);
}
.kp-page--referrals .w-referrals-stat-tile::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--accent); opacity:.5;
}
.kp-page--referrals .w-referrals-stat-tile:hover{
  border-color: var(--border-h); transform: translateY(-2px); box-shadow: var(--n-sh-md);
}
.kp-page--referrals .w-referrals-stat-tile__icon{ font-size: 1.05rem; line-height: 1; }
.kp-page--referrals .w-referrals-stat-tile__value{
  font-family: var(--mono); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -.02em; color: var(--text); line-height: 1;
}
.kp-page--referrals .w-referrals-stat-tile__label{
  font-size: .66rem; font-weight: 600; color: var(--text-3);
  letter-spacing: .02em; text-transform: uppercase;
}

/* ─── STRATEGY CARDS ─── */
.kp-page--referrals .w-referrals-strategy-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.kp-page--referrals .w-referrals-strategy-card{
  background: var(--cell); border: 1px solid var(--border);
  border-radius: var(--n-r-md); padding: 16px;
}
.kp-page--referrals .w-referrals-strategy-card__icon{ font-size: 1.1rem; margin-bottom: 6px; }
.kp-page--referrals .w-referrals-strategy-card__title{
  font-weight: 700; font-size: .85rem; color: var(--text); margin-bottom: 4px;
}
.kp-page--referrals .w-referrals-strategy-card__text{
  font-size: .78rem; color: var(--text-3); line-height: 1.45;
}

/* ─── LINK CARD (hero link) ─── */
.kp-page--referrals .w-referrals-link-card,
.kp-page--referrals .referral-link-card{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--n-r-lg); padding: 20px;
  position: relative; overflow: hidden;
}
.kp-page--referrals .w-referrals-link-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.5;
}
.kp-page--referrals .w-referrals-link-card__title{
  font-family: var(--mono); font-weight: 800; font-size: .92rem;
  color: var(--text); margin-bottom: 12px; letter-spacing: .03em;
}
.kp-page--referrals .w-referrals-link-card__field{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.kp-page--referrals .w-referrals-link-card__input{
  flex: 1; min-width: 220px;
  padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--cell);
  color: var(--text); font-family: var(--mono); font-size: .84rem;
}
.kp-page--referrals .w-referrals-link-card__copy{
  padding: 11px 18px; border-radius: 11px; border: 0;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .8rem;
  cursor: pointer; box-shadow: 0 4px 16px var(--accent-g); transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-link-card__copy:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.kp-page--referrals .w-referrals-link-card__hint{
  font-size: .76rem; color: var(--text-3); margin-top: 10px;
}
.kp-page--referrals .w-referrals-link-card__actions,
.kp-page--referrals .referral-link-card__actions{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.kp-page--referrals .w-referrals-link-card__action{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--cell);
  color: var(--text-2); font-size: .76rem; font-weight: 600;
  text-decoration: none; transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-link-card__action:hover{
  border-color: var(--border-h); background: var(--cell-h); color: var(--text);
}

/* ─── SECTIONS ─── */
.kp-page--referrals .w-referrals-section{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--n-r); padding: 20px;
}
.kp-page--referrals .w-referrals-section__head{ margin-bottom: 14px; }
.kp-page--referrals .w-referrals-section__title{
  font-family: var(--mono); font-weight: 800; font-size: .9rem;
  color: var(--text); letter-spacing: .03em; margin: 0;
}
.kp-page--referrals .w-referrals-section__hint{
  font-size: .78rem; color: var(--text-2); margin-top: 4px;
}

/* ─── SHARE TARGETS ─── */
.kp-page--referrals .w-referrals-share-targets{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.kp-page--referrals .w-referrals-share-targets__btn{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--cell);
  color: var(--text-2); font-size: .78rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-share-targets__btn:hover{
  border-color: var(--border-h); background: var(--cell-h); color: var(--text); transform: translateY(-1px);
}
.kp-page--referrals .w-referrals-share-targets__btn--primary{
  background: var(--accent); color:#fff; border-color: transparent; box-shadow: 0 4px 16px var(--accent-g);
}

/* ─── SHARE-KIT / DRAFTS GRIDS ─── */
.kp-page--referrals .w-referrals-share-kit-grid,
.kp-page--referrals .w-referrals-drafts-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.kp-page--referrals .w-referrals-share-kit,
.kp-page--referrals .w-referrals-post-draft{
  background: var(--cell); border: 1px solid var(--border);
  border-radius: var(--n-r-md); padding: 14px;
}
.kp-page--referrals .w-referrals-share-kit__title,
.kp-page--referrals .w-referrals-post-draft__title{
  font-weight: 700; font-size: .82rem; color: var(--text); margin-bottom: 6px;
}
.kp-page--referrals .w-referrals-share-kit__text,
.kp-page--referrals .w-referrals-post-draft__text{
  font-size: .78rem; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; white-space: pre-line;
}
.kp-page--referrals .w-referrals-share-kit__copy,
.kp-page--referrals .w-referrals-post-draft__btn{
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: .76rem; font-weight: 600; cursor: pointer;
  transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-share-kit__copy:hover,
.kp-page--referrals .w-referrals-post-draft__btn:hover{ border-color: var(--border-h); background: var(--cell-h); }
.kp-page--referrals .w-referrals-post-draft__track{ font-size: .68rem; color: var(--text-3); margin-top: 8px; font-family: var(--mono); }

/* ─── INSIGHTS GRID ─── */
.kp-page--referrals .w-referrals-insights__head{ margin-bottom: 12px; }
.kp-page--referrals .w-referrals-insights__title{ font-family: var(--mono); font-weight: 800; font-size: .85rem; color: var(--text); }
.kp-page--referrals .w-referrals-insights__sub{ font-size: .76rem; color: var(--text-3); margin-top: 3px; }
.kp-page--referrals .w-referrals-insights__grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.kp-page--referrals .w-referrals-insights__tile{
  background: var(--cell); border: 1px solid var(--border);
  border-radius: var(--n-r-md); padding: 14px;
}
.kp-page--referrals .w-referrals-insights__tile-icon{ font-size: 1rem; }
.kp-page--referrals .w-referrals-insights__tile-value{ font-family: var(--mono); font-weight: 800; font-size: 1.2rem; color: var(--text); }
.kp-page--referrals .w-referrals-insights__tile-label{ font-size: .68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; }

/* ─── DATA TABLE (widget) ─── */
.kp-page--referrals .w-referrals-data-table__head{ margin-bottom: 12px; }
.kp-page--referrals .w-referrals-data-table__title{ font-family: var(--mono); font-weight: 800; font-size: .85rem; color: var(--text); }
.kp-page--referrals .w-referrals-data-table__sub{ font-size: .76rem; color: var(--text-3); margin-top: 3px; }
.kp-page--referrals .w-referrals-data-table__scroll{ overflow-x: auto; }
.kp-page--referrals .w-referrals-data-table__table{ width: 100%; border-collapse: collapse; font-size: .8rem; }
.kp-page--referrals .w-referrals-data-table__table th{
  text-align: left; font-family: var(--mono); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-3);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.kp-page--referrals .w-referrals-data-table__table td{
  padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-2);
}
.kp-page--referrals .w-referrals-data-table__empty{ color: var(--text-3); font-size: .82rem; padding: 12px 0; }

/* ─── HISTORY ITEM (feed) ─── */
.kp-page--referrals .w-referrals-history-item,
.kp-page--referrals .history-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.kp-page--referrals .w-referrals-history-item:last-child,
.kp-page--referrals .history-item:last-child{ border-bottom: 0; }
.kp-page--referrals .w-referrals-history-item__icon{
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); font-size: .85rem; flex-shrink: 0;
}
.kp-page--referrals .w-referrals-history-item__title,
.kp-page--referrals .history-item__name{ font-size: .84rem; font-weight: 600; color: var(--text); text-decoration: none; }
.kp-page--referrals .history-item__name:hover{ color: var(--accent); }
.kp-page--referrals .w-referrals-history-item__meta,
.kp-page--referrals .history-item__date{ font-size: .7rem; color: var(--text-3); font-family: var(--mono); }
.kp-page--referrals .w-referrals-history-item__body{ flex: 1; }
.kp-page--referrals .history-item__user{ flex: 1; }
.kp-page--referrals .w-referrals-history-item__badge,
.kp-page--referrals .kp-text-gold{
  font-family: var(--mono); font-weight: 700; font-size: .8rem; color: var(--gold);
}

/* ─── BONUS / NETWORK / HISTORY CARDS (arena-card → K+ card, SCOPED) ─── */
.kp-page--referrals .arena-card{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--n-r); padding: 20px; box-shadow: none;
}
.kp-page--referrals .arena-card__head{ margin-bottom: 14px; }
.kp-page--referrals .arena-card__title{
  font-family: var(--mono); font-weight: 800; font-size: .92rem; color: var(--text);
  letter-spacing: .03em; display: flex; align-items: center; gap: 8px; margin: 0;
}
.kp-page--referrals .arena-card__body{ margin-top: 4px; }
.kp-page--referrals .arena-empty{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 12px; color: var(--text-3); font-size: .84rem; text-align: center;
}
.kp-page--referrals .arena-empty__ico{ font-size: 1.6rem; opacity: .7; }

/* table */
.kp-page--referrals .kp-table{ width: 100%; border-collapse: collapse; font-size: .8rem; }
.kp-page--referrals .kp-table th{
  text-align: left; font-family: var(--mono); font-weight: 700; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-3);
  padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.kp-page--referrals .kp-table td{ padding: 10px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }

.kp-page--referrals .kp-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* layout helpers used inline */
.kp-page--referrals .kp-stack-sm{ display: flex; flex-direction: column; gap: 8px; }
.kp-page--referrals .kp-flex{ display: flex; align-items: center; }
.kp-page--referrals .kp-gap-2{ gap: 8px; }
.kp-page--referrals .kp-hint{ font-size: .76rem; color: var(--text-3); }

/* ─── CARD SUMMARY (referral page) ─── */
.kp-page--referrals .w-referrals-card-section{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--n-r); padding: 22px; position: relative; overflow: hidden;
}
.kp-page--referrals .w-referrals-card-section::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.5;
}
.kp-page--referrals .w-referrals-card-section__head{ margin-bottom: 16px; }
.kp-page--referrals .w-referrals-card-section__title{
  font-family: var(--mono); font-weight: 800; font-size: 1rem; color: var(--text); letter-spacing: .02em; margin: 0;
}
.kp-page--referrals .w-referrals-card-section__hint{ font-size: .8rem; color: var(--text-2); margin-top: 4px; }

.kp-page--referrals .w-referrals-card-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kp-page--referrals .w-referrals-card-actions__btn{
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 11px;
  border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: .78rem;
  text-decoration: none; cursor: pointer; box-shadow: 0 4px 16px var(--accent-g); transition: all .2s var(--ease);
}
.kp-page--referrals .w-referrals-card-actions__btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.kp-page--referrals .w-referrals-card-actions__btn--ghost,
.kp-page--referrals .w-referrals-card-actions__btn--secondary{
  background: var(--cell); color: var(--text-2); border: 1px solid var(--border); box-shadow: none;
}
.kp-page--referrals .w-referrals-card-actions__btn--ghost:hover,
.kp-page--referrals .w-referrals-card-actions__btn--secondary:hover{ border-color: var(--border-h); background: var(--cell-h); color: var(--text); }

/* form controls (shared: bonus withdraw / support gold forms) */
.kp-page--referrals .form-input,
.kp-page--referrals .form-textarea,
.kp-page--referrals .form-select{
  width: 100%; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--cell);
  color: var(--text); font-family: var(--font); font-size: .82rem; outline: none;
  transition: all .2s var(--ease);
}
.kp-page--referrals .form-input:focus,
.kp-page--referrals .form-textarea:focus,
.kp-page--referrals .form-select:focus{
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--cell-h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.kp-page--referrals .form-textarea{ resize: vertical; min-height: 90px; line-height: 1.5; }


/* ─── RESPONSIVE ─── */
@media (max-width: 900px){
  .kp-page--referrals .w-referrals-stats-grid{ grid-template-columns: repeat(3, 1fr); }
  .kp-page--referrals .w-referrals-header__title{ font-size: 1.7rem; }
}
@media (max-width: 560px){
  .kp-page--referrals .w-referrals-stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .kp-page--referrals .w-referrals-strategy-grid{ grid-template-columns: 1fr; }
  .kp-page--referrals .w-referrals-share-targets{ grid-template-columns: repeat(2, 1fr); }
  .kp-page--referrals .kp-grid-2{ grid-template-columns: 1fr; }
}


/* ─── COVERAGE COMPLETENESS (wrappers / modifiers) ─── */
.kp-page--referrals .kp-card{
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--n-r); padding: 20px;
}
.kp-page--referrals .w-referrals-post-draft__head,
.kp-page--referrals .w-referrals-share-kit__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.kp-page--referrals .w-referrals-share-targets__btn--ghost{
  background: transparent; color: var(--text-2);
}
.kp-page--referrals .w-referrals-share-targets__btn--secondary{
  background: var(--cell-h); color: var(--text);
}