/* Личный кабинет: «Мои разборы». Своих правил минимум — цвета и шрифты
   берутся из темы, здесь только раскладка списка и карточки заказа. */

.my-page { max-width: 900px; }
.my-page__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.my-page__title { margin: 0 0 18px; font-size: clamp(22px, 3vw, 30px); }
.my-page__back { text-decoration: none; opacity: .7; font-size: 14px; }
.my-page__back:hover { opacity: 1; }

/* Список заказов */
.my-orders { display: flex; flex-direction: column; gap: 12px; }

.my-order {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34));
    border-radius: 14px;
    text-decoration: none; color: inherit;
    transition: border-color .2s, transform .2s;
    min-width: 0;
}
.my-order:hover { border-color: var(--tp-border, rgba(184,139,57,.34)); transform: translateY(-1px); }

.my-order__pic {
    flex: 0 0 64px; width: 64px; height: 64px;
    border-radius: 10px; overflow: hidden;
    background: color-mix(in srgb, var(--tp-border, #b88b39) 18%, transparent);
}
.my-order__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.my-order__body { flex: 1 1 auto; min-width: 0; }
.my-order__num { font-size: 12px; opacity: .6; }
.my-order__name { font-weight: 700; margin-top: 2px; }
.my-order__sku { font-size: 13px; opacity: .75; }

.my-order__side { flex: 0 0 auto; text-align: right; }
.my-order__sum { font-weight: 700; white-space: nowrap; }

.my-order__state {
    display: inline-block; margin-top: 4px;
    font-size: 12px; padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34));
    white-space: nowrap;
}
.my-order__state--paid,
.my-order__state--done { border-color: rgba(61, 122, 61, .5); }
.my-order__state--cancelled { opacity: .55; }

/* Карточка заказа */
.my-order-card {
    border: 1px solid var(--tp-border, rgba(184,139,57,.34));
    border-radius: 14px;
    padding: 6px 20px 18px;
}
.my-order-card__row {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 13px 0;
    border-bottom: 1px solid var(--tp-border, rgba(184,139,57,.34));
    border-bottom-color: color-mix(in srgb, var(--tp-border, #b88b39) 45%, transparent);
}
.my-order-card__row:last-of-type { border-bottom: 0; }
.my-order-card__label { flex: 0 0 150px; opacity: .6; font-size: 14px; }
.my-order-card__value { flex: 1 1 220px; min-width: 0; }
.my-order-card__sub { font-size: 13px; opacity: .7; margin-top: 3px; }

.my-order-card__note {
    margin-top: 14px; padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tp-border, #b88b39) 18%, transparent);
    font-size: 14px;
}

@media (max-width: 600px) {
    .my-order { align-items: flex-start; }
    .my-order__side { text-align: left; width: 100%; }
    .my-order-card__label { flex-basis: 100%; }
}

/* Цвета берём из переменных темы: она сама переключает их между
   «Светом» и «Тенью», и жёстко заданные оттенки в тёмной версии
   выглядели чужой светлой рамкой. */

/* Партнёрская программа в кабинете */
.tp-part__ok { padding: 12px 16px; border-radius: 12px; background: rgba(61,122,61,.1); }
.tp-part__errors { padding: 12px 16px; border-radius: 12px; background: rgba(192,77,77,.1); }
.tp-part__errors p { margin: 0 0 4px; }
/* Пояснение для тех, кто вошёл из бота: это не ошибка, а подсказка, —
   красный фон списка ошибок здесь пугал бы без причины. */
.tp-part__note { background: rgba(233,185,93,.12); margin-bottom: 18px; }

.tp-part__link { margin: 18px 0 24px; }
.tp-part__label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin-bottom: 6px; }
.tp-part__link-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-part__link-input {
    flex: 1 1 260px; min-width: 0;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34)); font: inherit; background: transparent; color: inherit;
}
.tp-part__copy {
    height: auto; line-height: normal; padding: 10px 18px; border-radius: 10px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34)); background: transparent; color: inherit;
    font: inherit; cursor: pointer; white-space: nowrap;
}
.tp-part__copy:hover { border-color: var(--tp-text, #0b2340); }

.tp-part__balance {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,160px), 1fr));
    gap: 14px; margin: 18px 0;
}
.tp-part__cell { padding: 14px 16px; border: 1px solid var(--tp-border, rgba(184,139,57,.34)); border-radius: 12px; min-width: 0; }
.tp-part__num { font-size: 20px; font-weight: 700; white-space: nowrap; }
.tp-part__cap { font-size: 12px; opacity: .7; margin-top: 3px; }

.tp-part__h2 { margin: 28px 0 12px; font-size: clamp(18px, 2.5vw, 22px); }
.tp-part__hint { font-size: 13px; opacity: .75; margin: 8px 0 0; }
.tp-part__badge { display: inline-block; margin-left: 6px; font-size: 11px; opacity: .65; }

.tp-part__form { max-width: 520px; margin-top: 12px; }
.tp-part__row { display: flex; gap: 14px; flex-wrap: wrap; }
.tp-part__row .tp-part__field { flex: 1 1 200px; }
.tp-part__field { display: block; margin-bottom: 14px; }
.tp-part__field > span { display: block; font-size: 13px; opacity: .75; margin-bottom: 4px; }
.tp-part__field input, .tp-part__field textarea, .tp-part__field select {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34)); border-radius: 10px;
    font: inherit; background: transparent; color: inherit;
}
.tp-part__submit {
    height: auto; line-height: normal; padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34)); background: transparent; color: inherit;
    font: inherit; cursor: pointer;
}
.tp-part__submit:hover { border-color: var(--tp-text, #0b2340); }

/* ⚠️ Тема сайта рисует КАЖДОЙ ячейке рамку со всех сторон
   (site.css: table td,table th{border:1px solid #ebebeb}). В тёмной версии
   это выглядит светлой сеткой поверх карточки. Гасим её целиком и рисуем
   только нижнюю линию нужного цвета. */
.tp-cards th,
.tp-cards td {
    border: 0;
    padding: 9px 10px;
}
.tp-cards tbody td {
    border-bottom: 1px solid var(--tp-border, rgba(184,139,57,.34));
    border-bottom-color: color-mix(in srgb, var(--tp-border, #b88b39) 45%, transparent);
}
.tp-cards tbody tr:last-child td { border-bottom: 0; }

/* Таблицы кабинета на узком экране.
   Горизонтальная прокрутка запрещена, поэтому таблица не сжимается и не
   уезжает вбок, а разбирается на карточки: строка становится блоком,
   а название колонки подставляется из data-label. */
.tp-part__lvl-note { font-size: 11px; opacity: .6; }

@media (max-width: 560px) {
    .tp-cards, .tp-cards tbody, .tp-cards tr, .tp-cards td { display: block; width: auto; }
    .tp-cards thead { display: none; }

    .tp-cards tr {
        border: 1px solid var(--tp-border, rgba(184,139,57,.34));
        border-radius: 12px;
        padding: 4px 12px;
        margin-bottom: 10px;
    }
    .tp-cards tr:hover { background: none; }

    .tp-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: left;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--tp-border, rgba(184,139,57,.34));
        border-bottom-color: color-mix(in srgb, var(--tp-border, #b88b39) 45%, transparent);
        min-width: 0;
    }
    .tp-cards tr td:last-child { border-bottom: 0; }

    .tp-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px;
        opacity: .6;
    }
    /* Значение прижимаем вправо и разрешаем переносить длинный текст */
    .tp-cards td { overflow-wrap: anywhere; flex-wrap: wrap; }
    .tp-cards .tp-num { text-align: right; }
    /* Приписка под значением, а не сбоку от него */
    .tp-cards .tp-part__lvl-note { flex: 1 0 100%; text-align: right; margin-top: 2px; }
}

/* «Ваша сеть» — уровни карточками, а не таблицей: на любой ширине
   читается одинаково и не требует ни прокрутки, ни перестроения. */
.tp-net {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    margin: 14px 0 6px;
}
.tp-net__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--tp-border, rgba(184,139,57,.34));
    border-radius: 12px;
    min-width: 0;
}
/* Уровни, где уже кто-то есть, выделяем — по ним и смотрят в первую очередь */
.tp-net__item--active { box-shadow: inset 0 0 0 1px var(--tp-border, rgba(184,139,57,.34)); }

.tp-net__lvl { font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.tp-net__count { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tp-net__percent { font-size: 14px; font-weight: 600; }
.tp-net__percent span { display: block; font-size: 11px; font-weight: 400; opacity: .6; }