/* ══════ КАБИНЕТ — партнёрский блок ══════
   Отдельный файл: рабочий cabinet.css не трогаем.
   Переменные берём из style.css (--gold, --deep, --cream, --rose). */

/* ── Ссылка ── */
.ref-linkbox { margin-bottom:1rem; }
.ref-link-label {
    font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:.45rem;
}
.ref-link-row { display:flex; gap:.5rem; align-items:stretch; }
.ref-link-input {
    flex:1; min-width:0;
    padding:.7rem .85rem;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,165,74,.22);
    border-radius:8px;
    color:var(--cream); font-size:.88rem;
    font-family:'Nunito Sans',sans-serif;
    text-overflow:ellipsis;
}
.ref-link-input:focus { outline:none; border-color:var(--gold); }

/* js-rules §9: золотой фон — ТЁМНЫЙ текст, иначе надпись сливается */
.ref-copy-btn {
    flex:0 0 auto; padding:.7rem 1.1rem;
    background:linear-gradient(135deg,var(--gold-dark),var(--gold));
    color:#080510 !important; -webkit-text-fill-color:#080510 !important;
    font-weight:600; font-size:.85rem;
    border:none; border-radius:8px; cursor:pointer;
    font-family:'Nunito Sans',sans-serif;
    transition:box-shadow .3s, opacity .3s;
    white-space:nowrap;
}
.ref-copy-btn:hover { box-shadow:0 4px 20px rgba(212,165,74,.3); }
.ref-copy-btn.ref-copied { opacity:.75; }

.ref-link-hint {
    margin-top:.55rem; font-size:.78rem; line-height:1.5;
    color:var(--text-muted);
}
.ref-share-btn { margin-bottom:1rem; }

/* ── Цифры ── */
.ref-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
    margin:1.1rem 0 .6rem;
}
/* Две цифры вместо четырёх: покупки и деньги. Плитки шире — числа читаются
   сразу, а не теряются среди второстепенного. */
.ref-stats-2 { grid-template-columns:repeat(2,1fr); }
.ref-stats-2 .ref-stat { padding:.9rem .5rem; }
.ref-stats-2 .ref-stat-v { font-size:1.35rem; }
.ref-stat {
    padding:.75rem .4rem; text-align:center;
    background:rgba(212,165,74,.05);
    border:1px solid rgba(212,165,74,.14);
    border-radius:8px;
}
/* Не Cormorant: в его кириллическом наборе нет знака ₽, браузер подставляет
   чужой шрифт — и «534 ₽» выходит с приподнятым рублём. Проверено в Chromium. */
.ref-stat-v {
    font-family:'Nunito Sans',sans-serif;
    font-size:1.1rem; font-weight:600;
    color:var(--gold); line-height:1.2;
    white-space:nowrap;
}
.ref-stat-l {
    margin-top:.25rem; font-size:.68rem; color:var(--text-muted);
    letter-spacing:.03em;
}

.ref-rows { margin:.4rem 0 .2rem; }

/* ── Траты с баланса ── */
.ref-spend {
    margin:1.1rem 0 .2rem; padding:.9rem;
    background:rgba(212,165,74,.04);
    border:1px solid rgba(212,165,74,.15);
    border-radius:10px;
}
.ref-spend-title {
    font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); margin-bottom:.7rem;
    display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.ref-spend-bal {
    letter-spacing:.02em; text-transform:none;
    color:var(--cream); font-size:.78rem;
}
.ref-spend-pick {
    margin:0 0 .8rem; font-size:.72rem;
    letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
}
.ref-spend-pick-label { display:block; margin-bottom:.4rem; }

/* Обёртка нужна ради своей стрелки: у select нельзя стилизовать
   служебные части, поэтому родную стрелку убираем и рисуем свою. */
.ref-spend-select-wrap { position:relative; display:block; }
.ref-spend-select-wrap::after {
    content:''; position:absolute; right:.85rem; top:50%;
    width:8px; height:8px; margin-top:-6px; pointer-events:none;
    border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
    transform:rotate(45deg); opacity:.75;
}
/* appearance:none обязателен: без него Safari и macOS рисуют СВОЙ серый
   контрол поверх наших стилей — фон, рамка и шрифт просто игнорируются. */
.ref-spend-pick select {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    display:block; width:100%; max-width:100%;
    padding:.7rem 2.2rem .7rem .85rem;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,165,74,.22);
    border-radius:8px;
    color:var(--cream); font-size:.88rem;
    font-family:'Nunito Sans',sans-serif;
    letter-spacing:0; text-transform:none;
    line-height:1.3; cursor:pointer;
    transition:border-color .2s, background .2s;
}
.ref-spend-pick select:hover { border-color:rgba(212,165,74,.4); }
/* Системная синяя рамка фокуса выбивалась из палитры — заменяем золотой. */
.ref-spend-pick select:focus {
    outline:none;
    border-color:var(--gold);
    background:rgba(255,255,255,.05);
    box-shadow:0 0 0 3px rgba(212,165,74,.15);
}
/* Раскрытый список рисует система — задаём хотя бы читаемые цвета. */
.ref-spend-pick select option {
    background:#141021; color:#f2ead9;
}
.ref-spend-link {
    display:inline-block; padding:.45rem .85rem;
    border:1px solid rgba(212,165,74,.25); border-radius:6px;
    color:var(--gold); font-size:.78rem; text-decoration:none;
    white-space:nowrap; transition:background .2s;
}
.ref-spend-link:hover { background:rgba(212,165,74,.08); }
.ref-spend-foot {
    margin-top:.7rem; font-size:.74rem; line-height:1.45; color:var(--text-muted);
}
/* Без этого ссылка в подписи рисуется браузерным синим — в тёмной
   золотой палитре это выглядит чужеродно и читается плохо. */
.ref-spend-foot a {
    color:var(--gold); text-decoration:none;
    border-bottom:1px solid rgba(212,165,74,.35);
}
.ref-spend-foot a:hover { border-bottom-color:var(--gold); }
.ref-spend-row {
    display:flex; align-items:center; gap:.7rem;
    padding:.5rem 0;
    border-bottom:1px solid rgba(107,63,160,.1);
}
.ref-spend-row:last-of-type { border-bottom:none; }
.ref-spend-info { flex:1; min-width:0; }
.ref-spend-name { font-size:.86rem; color:var(--cream); line-height:1.3; }
.ref-spend-sub  { font-size:.74rem; color:var(--text-muted); margin-top:.1rem; }
/* Цена и действие в одну строку: столбиком список продуктов растягивался
   вдвое и переставал читаться одним взглядом. */
.ref-spend-act  {
    flex:0 0 auto; display:flex; align-items:center;
    justify-content:flex-end; gap:.6rem;
}
.ref-spend-price {
    font-size:.86rem; font-weight:600; color:var(--gold);
    white-space:nowrap;
}
/* js-rules §9: золотой фон — только тёмный текст */
.ref-spend-btn {
    padding:.45rem .85rem;
    background:linear-gradient(135deg,var(--gold-dark),var(--gold));
    color:#080510 !important; -webkit-text-fill-color:#080510 !important;
    font-weight:600; font-size:.78rem;
    border:none; border-radius:6px; cursor:pointer;
    font-family:'Nunito Sans',sans-serif;
    white-space:nowrap; transition:box-shadow .3s;
}
.ref-spend-btn:hover:not(:disabled) { box-shadow:0 4px 16px rgba(212,165,74,.3); }
.ref-spend-btn:disabled { opacity:.55; cursor:wait; }
.ref-spend-short { font-size:.72rem; color:var(--text-muted); white-space:nowrap; }
.ref-spend-note {
    margin-top:.7rem; padding:.55rem .7rem; border-radius:6px;
    font-size:.8rem; line-height:1.45;
    background:rgba(192,96,128,.1); color:var(--rose);
}
.ref-spend-note.ref-spend-ok { background:rgba(212,165,74,.12); color:var(--gold); }

@media (max-width:520px) {
    .ref-spend-row { flex-direction:column; align-items:stretch; gap:.4rem; }
    .ref-spend-act { justify-content:flex-start; }
    .ref-spend-btn, .ref-spend-link { flex:1; text-align:center; padding:.5rem; }
}

/* ── История ── */
.ref-hist-title {
    margin:1.1rem 0 .5rem; font-size:.72rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
}
.ref-hist { max-height:280px; overflow-y:auto; }
.ref-hist-row {
    display:flex; align-items:baseline; gap:.6rem;
    padding:.45rem 0; font-size:.83rem;
    border-bottom:1px solid rgba(107,63,160,.08);
}
.ref-hist-row:last-child { border-bottom:none; }
.ref-hist-date { flex:0 0 3.4rem; color:var(--text-muted); font-size:.78rem; }
.ref-hist-title-cell { flex:1; min-width:0; color:var(--cream); }
.ref-hist-amt { flex:0 0 auto; white-space:nowrap; font-weight:600; }
.ref-hist-in  { color:var(--gold); }
.ref-hist-out { color:var(--text-muted); }
.ref-hist-cancelled {
    color:var(--text-muted); text-decoration:line-through;
    opacity:.6; font-weight:400;
}

.ref-badge {
    display:inline-block; margin-left:.45rem;
    padding:1px 8px; border-radius:20px;
    font-size:.66rem; letter-spacing:.02em; vertical-align:middle;
}
.ref-badge-wait { background:rgba(212,165,74,.1); color:var(--gold); }
.ref-badge-rev  { background:rgba(192,96,128,.1); color:var(--rose); }

.ref-empty {
    padding:.9rem 0; font-size:.82rem; line-height:1.6;
    color:var(--text-muted);
}

/* ── Выплата ── */
.ref-payout-btn { margin-top:1rem; }
.ref-payout-locked {
    margin-top:1rem; padding:.75rem .9rem;
    background:rgba(107,63,160,.06);
    border:1px solid rgba(107,63,160,.12);
    border-radius:8px;
    font-size:.8rem; line-height:1.55; color:var(--text-muted);
}
.ref-payout-open {
    margin-top:1rem; padding:.75rem .9rem;
    background:rgba(212,165,74,.07);
    border:1px solid rgba(212,165,74,.18);
    border-radius:8px;
    font-size:.8rem; line-height:1.55; color:var(--cream);
}
.ref-payout-note {
    margin-top:.6rem; font-size:.78rem; line-height:1.5; color:var(--text-muted);
}
.ref-payout-form { margin-top:1rem; }
.ref-payout-form .cab-input { margin-bottom:.5rem; }

.ref-rules-link {
    display:inline-block; margin-top:.9rem;
    font-size:.78rem; color:var(--text-muted);
    text-decoration:none; border-bottom:1px dotted rgba(212,165,74,.3);
}
.ref-rules-link:hover { color:var(--gold); }

/* ── Телефон ── */
@media (max-width:520px) {
    .ref-stats { grid-template-columns:repeat(2,1fr); }
    .ref-link-row { flex-direction:column; }
    .ref-copy-btn { width:100%; padding:.75rem; }
    .ref-hist-date { flex:0 0 3rem; }
}

/* Ссылка «Открыть разбор» после покупки с баланса */
.ref-spend-open {
    display:inline-block; margin-top:.4rem;
    color:var(--gold); font-weight:600; text-decoration:none;
    border-bottom:1px solid rgba(212,165,74,.4);
}