/* Кабинет компании.
   Дополняет base.css и site.css: здесь только то, чего нет на публичных
   страницах — плотная шапка, списки строк, формы в две колонки. */

/* ── Шапка ───────────────────────────────────────────────────────────────── */
.cab-head {
    background: var(--c-text);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
.cab-head .wrap {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 56px;
    flex-wrap: wrap;
}
.cab-brand {
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
}
.cab-nav { display: flex; gap: var(--s-1); flex: 1 1 auto; }
.cab-nav a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .95rem;
}
.cab-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cab-nav a.is-here { background: rgba(255, 255, 255, .18); color: #fff; }

.cab-right { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.cab-balance {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Мало денег — говорим об этом до того, как выдача ссылки откажет. */
.cab-balance.is-low { background: #b42318; }
.cab-user { color: rgba(255, 255, 255, .7); text-decoration: none; font-size: .9rem;
            padding: 12px 10px; }
.cab-user:hover { color: #fff; }

.cab-sub {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    font-size: .92rem;
    padding: 10px 0;
}

/* На телефоне меню уезжает во вторую строку целиком, а не сжимается
   в нечитаемые огрызки: админ жалуется именно на это. */
@media (max-width: 560px) {
    .cab-head .wrap { padding-top: 8px; padding-bottom: 8px; }
    .cab-nav { order: 3; flex-basis: 100%; }
    .cab-nav a { flex: 1 1 0; text-align: center; }
    .cab-right { margin-left: auto; }
}

/* ── Две колонки: список и форма ──────────────────────────────────────────── */
.cols { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
    .cols { grid-template-columns: minmax(0, 1fr) 340px; }
    /* Форма выдачи не должна уезжать за экран при длинном списке. */
    .col-side { position: sticky; top: 84px; }
}
/* На телефоне форма идёт первой: пришли сюда, чтобы выдать ссылку. */
@media (max-width: 899px) {
    .col-side { order: -1; }
}

.card-form .field:first-of-type { margin-top: 0; }

/* ── Списки строк ─────────────────────────────────────────────────────────── */
.rows { display: flex; flex-direction: column; gap: 1px; background: var(--c-border);
        border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.row-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    background: var(--c-surface);
    padding: var(--s-3) var(--s-4);
    text-decoration: none;
    color: inherit;
    min-height: 60px;
}
a.row-item:hover { background: var(--c-surface-2); }
.row-item.is-static { cursor: default; }
.row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.row-main b { font-weight: 700; }
.row-meta { white-space: nowrap; }
.row-meta.plus { color: #15803d; font-weight: 700; }

.detail {
    background: var(--c-surface-2);
    padding: var(--s-3) var(--s-4);
    display: grid;
    gap: 4px;
    font-size: .93rem;
}
.detail > div { display: flex; justify-content: space-between; gap: var(--s-4); }

/* ── Метки состояния ──────────────────────────────────────────────────────── */
.tag {
    font-size: .8rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.tag-ok    { background: #dcfce7; color: #14532d; }
.tag-warn  { background: #fef3c7; color: #78350f; }
.tag-muted { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }

/* ── Ссылка для проверяемого ──────────────────────────────────────────────── */
.card-link { border: 2px solid var(--c-primary); }
.copybox { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.copybox input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
}

/* ── Тарифы ───────────────────────────────────────────────────────────────── */
.cards-2 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.stat { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; line-height: 1.1; }

.tariffs { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-4); }
@media (min-width: 720px) { .tariffs { grid-template-columns: repeat(3, 1fr); } }
.tariff {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-5);
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 46px;
}
.tariff:hover { border-color: var(--c-primary); }
.tariff-sum { font-size: 1.4rem; font-weight: 800; }
.tariff-cta { margin-top: var(--s-2); color: var(--c-primary); font-weight: 700; }

/* ── Полоска над тестом у проверяемого ────────────────────────────────────── */
.invite-bar {
    background: var(--c-primary);
    color: #fff;
    font-size: .92rem;
    padding: 10px 0;
}
.invite-bar .wrap { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.invite-bar a { color: #fff; text-decoration: underline; }

.crumbs { margin-bottom: var(--s-3); font-size: .93rem; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; padding: 10px 0; }
.check span { display: flex; flex-direction: column; gap: 2px; }
.check input { margin-top: 4px; width: 20px; height: 20px; flex: none; }

/* ── Три шага на главной ──────────────────────────────────────────────────
   Живут в cab.css, а не в site.css: они про кабинет и нужны только там,
   где о нём рассказывают. */
.steps { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-5);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    font-weight: 800;
    margin-bottom: var(--s-2);
}