/* /Components/Features/Books/Components/BooksListView.razor.rz.scp.css */
/* Плотность каталога книг — устроена так же, как у оружия
   (`Features/Weapons/Components/WeaponsListView.razor.css`), различия только в наборе
   колонок. Отступы ячеек заданы здесь, а не утилитами Tailwind в разметке: селектор
   `.cm-table td` из design-system.css (0,1,1) перебивает одиночный класс `.py-1` (0,1,0),
   а `.bk-table[b-…] td` — уже (0,2,1) и выигрывает.

   ::deep обязателен: строки рендерит дочерний BookTableRow, атрибута области
   видимости этого компонента на них нет. */

/* Шапка и колонка названия закреплены.

   `position: sticky` считает от ближайшего скроллпорта, а он здесь — сама .bk-table:
   `overflow-x: auto` переводит и overflow-y в auto. Без max-height контейнер тянется
   под содержимое, скроллить в нём нечего и ничего не прилипает — поэтому высота задана.
   Заодно фильтры и пагинация перестают уезжать: прокручиваются только строки.

   border-collapse гасит границы у прилипших ячеек, поэтому нижняя линия строки
   в первой колонке нарисована тенью.

   21.5rem — занятое помимо строк: шапка приложения с заголовком и фильтрами плюс
   пагинация с нижним отступом. Обвязка страницы здесь та же, что у каталогов оружия
   и предметов, поэтому и число то же. */
.bk-table[b-4lr29kmfr5] {
    max-height: calc(100vh - 21.5rem);
    max-height: calc(100dvh - 21.5rem);
}

.bk-table[b-4lr29kmfr5]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.bk-table[b-4lr29kmfr5]  thead th:first-child {
    z-index: 3;
}

/* Раскрытие занимает всю строку целиком — закреплять в нём нечего. */
.bk-table[b-4lr29kmfr5]  th:first-child,
.bk-table[b-4lr29kmfr5]  tr:not(.bk-details) > td:first-child {
    position: sticky;
    left: 0;
    box-shadow: inset 0 -1px 0 var(--color-primary-100);
}

/* Прилипшая ячейка обязана быть непрозрачной, иначе сквозь неё поедут соседние
   колонки, и её фон должен повторять состояние строки. Специфичность здесь выше,
   чем у `.cm-table tr:hover td`, поэтому порядок внутри блока и решает: открытая
   строка идёт после ховера, чтобы accent не сменился на primary под пальцем. */
.bk-table[b-4lr29kmfr5]  tbody tr:not(.bk-details) > td:first-child {
    background: white;
}

.bk-table[b-4lr29kmfr5]  tbody tr:not(.bk-details):hover > td:first-child {
    background: var(--color-primary-50);
}

.bk-table[b-4lr29kmfr5]  tbody tr.bk-row-open > td:first-child {
    background: var(--color-accent-50);
}

.bk-table[b-4lr29kmfr5]  th,
.bk-table[b-4lr29kmfr5]  td {
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
}

.bk-table[b-4lr29kmfr5]  th {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Ширины заданы долями, а не абсолютом: тянуться хотят все три текстовые колонки
   сразу, а `max-width: 0` у обрезаемых снимает их собственный минимум. С `width: 100%`
   у названия (как у каталога оружия, где текстовая колонка одна) язык и автор
   схлопывались до «Англи…» и «Ремигиу…» — замерено в ландшафте iPad. */
.bk-table[b-4lr29kmfr5]  th:first-child,
.bk-table[b-4lr29kmfr5]  tr:not(.bk-details) > td:first-child {
    width: 34%;
    white-space: normal;
}

/* Язык и автор — свободный текст: обрезаем многоточием, иначе «Клубный перевод
   Лоуренса Уилсона» растаскивает таблицу за край экрана. `max-width: 0` — тот самый
   приём, без которого ellipsis при `table-layout: auto` не срабатывает. */
.bk-table[b-4lr29kmfr5]  .bk-clip {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-table[b-4lr29kmfr5]  th:nth-child(2),
.bk-table[b-4lr29kmfr5]  tr:not(.bk-details) > td:nth-child(2) {
    width: 10%;
}

.bk-table[b-4lr29kmfr5]  th:nth-child(3),
.bk-table[b-4lr29kmfr5]  tr:not(.bk-details) > td:nth-child(3) {
    width: 16%;
}

/* Открытая строка перестаёт обрезать язык и автора: полное значение видно на месте,
   повторять его отдельным блоком в раскрытии незачем. */
.bk-table[b-4lr29kmfr5]  tr.bk-row-open > .bk-clip {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* accent, а не primary-50: на primary-50 строка сливалась бы с ховером соседей. */
.bk-table[b-4lr29kmfr5]  .bk-row-open > td,
.bk-table[b-4lr29kmfr5]  .bk-details > td {
    background: var(--color-accent-50);
}

.bk-table[b-4lr29kmfr5]  .bk-details > td {
    padding: 0.5rem 0.75rem 0.75rem 1.75rem;
    white-space: normal;
    font-size: 0.75rem;
}

.bk-table[b-4lr29kmfr5]  .bk-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-400);
}

/* Раскрытая карточка на узком экране: подпись слева, значение справа. */
.bk-card-details[b-4lr29kmfr5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.75rem;
    margin: 0.5rem 0 0.25rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-primary-100);
    font-size: 0.75rem;
}

.bk-card-details dt[b-4lr29kmfr5] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-400);
    white-space: nowrap;
}

.bk-card-details dd[b-4lr29kmfr5] {
    margin: 0;
    color: var(--color-primary-700);
}

/* Обложка приходит по чужому URL — ограничиваем и высотой тоже, иначе одна строка
   раскрытия занимает весь экран. Селектор задвоен: в карточке обложку рисует этот
   компонент, в раскрытой строке — дочерний BookTableRow, до которого достаёт только ::deep. */
.bk-table[b-4lr29kmfr5]  .bk-image,
.bk-image[b-4lr29kmfr5] {
    max-width: 12rem;
    max-height: 16rem;
    margin-top: 0.25rem;
    border: 1px solid var(--color-primary-200);
    border-radius: 0.375rem;
}
/* /Components/Features/Campaigns/Components/KeeperCharactersComponent.razor.rz.scp.css */
/* ── Accordion trigger ── */
.kc-trigger[b-iqhpeoq3w8] {
    width: 100%;
    text-align: left;
}

.kc-trigger-left[b-iqhpeoq3w8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}

.kc-campaign-name[b-iqhpeoq3w8] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kc-trigger-right[b-iqhpeoq3w8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.kc-players-count[b-iqhpeoq3w8] {
    font-size: 0.75rem;
    color: var(--color-primary-400);
}

.kc-chevron[b-iqhpeoq3w8] {
    font-size: 0.75rem;
    color: var(--color-primary-400);
}

/* ── Accordion body ── */
.kc-accordion-body[b-iqhpeoq3w8] {
    padding: 0;
    overflow-x: auto;
}

/* ── Table ── */
.kc-no-char-cell[b-iqhpeoq3w8] {
    color: var(--color-primary-400);
}

.kc-action-cell[b-iqhpeoq3w8] {
    white-space: nowrap;
}

/* ── Mobile: stack each row as a card ── */
@media (max-width: 639px) {
    .kc-accordion-body[b-iqhpeoq3w8] {
        overflow-x: visible;
    }

    .kc-table thead[b-iqhpeoq3w8] {
        display: none;
    }

    .kc-table tbody tr[b-iqhpeoq3w8] {
        display: block;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--cm-border-color);
    }

    .kc-table tbody tr:last-child[b-iqhpeoq3w8] {
        border-bottom: none;
    }

    .kc-table tbody td[b-iqhpeoq3w8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.2rem 0;
        border: none;
        font-size: 0.8125rem;
    }

    .kc-table tbody td[b-iqhpeoq3w8]::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--color-primary-400);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        min-width: 5.5rem;
        flex-shrink: 0;
    }

    /* Profession row — if empty, hide it */
    .kc-table tbody td[data-label="Профессия"]:not(:has(*)):empty[b-iqhpeoq3w8] {
        display: none;
    }

    /* Action cell: no label, just the button full-width */
    .kc-table tbody td.kc-action-cell[b-iqhpeoq3w8] {
        padding-top: 0.375rem;
    }

    .kc-table tbody td.kc-action-cell[b-iqhpeoq3w8]::before {
        display: none;
    }

    .kc-table tbody td.kc-action-cell .cm-btn[b-iqhpeoq3w8] {
        width: 100%;
        justify-content: center;
    }

    /* No-char row: show as single inline line */
    .kc-table tbody tr.kc-no-char-row[b-iqhpeoq3w8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .kc-table tbody tr.kc-no-char-row td[b-iqhpeoq3w8] {
        padding: 0;
    }

    .kc-table tbody tr.kc-no-char-row td[b-iqhpeoq3w8]::before {
        display: none;
    }

    .kc-no-char-cell[b-iqhpeoq3w8] {
        font-size: 0.75rem;
        font-style: italic;
    }
}
/* /Components/Features/Campaigns/Components/UserCampaignsComponent.razor.rz.scp.css */
/* ── Grid ── */
.campaigns-grid[b-e0z7ylmznw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 340px));
    gap: 0.625rem;
}

/* ── Card ── */
.campaign-card[b-e0z7ylmznw] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.campaign-card-header[b-e0z7ylmznw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cm-border-color);
    min-width: 0;
}

.campaign-card-name[b-e0z7ylmznw] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-primary-800);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-card-body[b-e0z7ylmznw] {
    padding: 0.5rem 0.75rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

/* ── Meta: одна строка «почта · N игроков» ── */
.campaign-meta[b-e0z7ylmznw] {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
    font-size: 12px;
    color: var(--color-primary-400);
    min-width: 0;
}

.campaign-meta-value[b-e0z7ylmznw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.campaign-meta-sep[b-e0z7ylmznw],
.campaign-meta-count[b-e0z7ylmznw] {
    flex-shrink: 0;
}

/* ── Строка списка (персонаж, НПС) ──
   Не карточка внутри карточки: плоская строка с действием справа. */
.campaign-row[b-e0z7ylmznw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.campaign-row-text[b-e0z7ylmznw] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.campaign-row-name[b-e0z7ylmznw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-row-sub[b-e0z7ylmznw] {
    font-size: 11px;
    color: var(--color-primary-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

/* ── Ряд действий ──
   Сетка, а не wrap: кнопки разной длины в обычном ряду дают рваный край
   и одинокую перенесённую кнопку на второй строке. */
.campaign-actions[b-e0z7ylmznw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.campaign-actions .cm-btn[b-e0z7ylmznw] {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 13px;
    gap: 0.375rem;
}

/* Кнопка Хранителя всегда занимает целую строку. */
.campaign-action-wide[b-e0z7ylmznw] {
    grid-column: 1 / -1;
}

/* ── NPC section ── */
.campaign-npcs[b-e0z7ylmznw] {
    border-top: 1px solid var(--cm-border-color);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.campaign-npcs-title[b-e0z7ylmznw] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-400);
}
/* /Components/Features/Characters/Components/AttributeRowsTable.razor.rz.scp.css */
/* Трудный и чрезвычайный успех — производные значения, а не поля ввода:
   их считает AttributeValue из «Обыч.». Рамки у них быть не должно, иначе
   на планшете в них пытаются печатать. */
.attr-derived[b-0c5b9q6u7j] {
    padding: 0.25rem 0.125rem;
    text-align: center;
    color: var(--color-primary-400, #94a3b8);
    font-variant-numeric: tabular-nums;
}
/* /Components/Features/Characters/Components/BiographyComponent.razor.rz.scp.css */
/* BiographyComponent scoped styles */

/* Subsection container */
.bio-subsection[b-ldfcgdifs8] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #fff;
}

/* Subsection header — clickable, with hover */
.bio-subsection-header[b-ldfcgdifs8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.bio-subsection-header:hover[b-ldfcgdifs8] {
    background-color: #f1f5f9;
}

/* Subsection body */
.bio-subsection-body[b-ldfcgdifs8] {
    padding: 0.75rem;
}

/* Label with icon */
.bio-label[b-ldfcgdifs8] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.375rem;
}

/* Textarea styling — ::deep to penetrate into InitialSizeTextArea child component */
[b-ldfcgdifs8] .bio-textarea {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #1e293b;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    resize: vertical;
}

[b-ldfcgdifs8] .bio-textarea:hover {
    border-color: #94a3b8;
}

[b-ldfcgdifs8] .bio-textarea:focus {
    outline: none;
    border-color: #4B7FAF;
    box-shadow: 0 0 0 3px rgba(75, 127, 175, 0.15);
    background-color: #fafbfd;
}

[b-ldfcgdifs8] .bio-textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Larger textarea for Notes and Backstory */
[b-ldfcgdifs8] .bio-textarea-large {
    min-height: 6rem;
}

/* Markdown preview area */
.bio-preview[b-ldfcgdifs8] {
    min-height: 4rem;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: #fafbfd;
    font-size: 0.875rem;
    line-height: 1.6;
}

.bio-preview:empty[b-ldfcgdifs8]::before {
    content: "Нет содержимого для отображения";
    color: #9ca3af;
    font-style: italic;
}

/* Mode toggle buttons (Editor / Preview) */
.bio-mode-btn[b-ldfcgdifs8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bio-mode-btn:hover[b-ldfcgdifs8] {
    background-color: #e2e8f0;
    color: #334155;
}

.bio-mode-btn-active[b-ldfcgdifs8] {
    background-color: #4B7FAF;
    color: #fff;
    border-color: #4B7FAF;
}

.bio-mode-btn-active:hover[b-ldfcgdifs8] {
    background-color: #3D6792;
    border-color: #3D6792;
}

/* Animation for subsection expand/collapse */
@keyframes fadeSlideIn-b-ldfcgdifs8 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bio-subsection-body[b-ldfcgdifs8] {
    animation: fadeSlideIn-b-ldfcgdifs8 0.15s ease-out;
}
/* /Components/Features/Characters/Components/CharacterPortrait.razor.rz.scp.css */
.portrait-block[b-byv5bbyvjq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Пропорции портретной рамки бланка — примерно 4:5. */
.portrait-frame[b-byv5bbyvjq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 6.25rem;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-primary-300, #cbd5e1);
    border-radius: 0.375rem;
    background-color: #f8fafc;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.portrait-frame:hover[b-byv5bbyvjq] {
    border-color: var(--color-accent-500, #4b7faf);
    background-color: #ffffff;
}

/* Клавиатурный фокус живёт на скрытом input, поэтому обводку рисует рамка. */
.portrait-frame:focus-within[b-byv5bbyvjq] {
    outline: 2px solid var(--color-accent-500, #4b7faf);
    outline-offset: 2px;
}

.portrait-frame.is-busy[b-byv5bbyvjq] {
    cursor: progress;
}

.portrait-image[b-byv5bbyvjq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-hint[b-byv5bbyvjq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    color: #94a3b8;
}

.portrait-hint-text[b-byv5bbyvjq] {
    font-size: 0.625rem;
    line-height: 1;
}

.portrait-actions[b-byv5bbyvjq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.portrait-caption[b-byv5bbyvjq] {
    font-size: 0.625rem;
    color: #64748b;
}

/* Крестик — тоже палец, а не курсор: 24px это минимум, ниже уже не попасть. */
.portrait-remove[b-byv5bbyvjq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
    color: #64748b;
    border-radius: 0.25rem;
}

.portrait-remove:hover[b-byv5bbyvjq] {
    color: var(--color-error-600, #c71d20);
    background-color: #fef2f2;
}

.portrait-error[b-byv5bbyvjq] {
    max-width: 8rem;
    font-size: 0.625rem;
    line-height: 1.2;
    text-align: center;
    color: var(--color-error-600, #c71d20);
}
/* /Components/Features/Characters/Components/CharacterStateTable.razor.rz.scp.css */
/* Отметки состояния раскладываются в одну или две колонки по ширине самого блока, а не окна:
   он живёт в колонке «Состояние», и её ширина меняется не так, как ширина экрана — ниже lg
   блок идёт во всю ширину листа (шире), а на 1024px это самая узкая из трёх колонок (уже).
   Медиазапрос тут дал бы две колонки ровно там, где они не помещаются. */
.state-block[b-78zvcmnhr4] {
    container-type: inline-size;
}

/* Колонки — это группы отметок (тело / рассудок), а не просто половинки списка: добавленная
   отметка попадает в свою колонку, а не сдвигает соседнюю. */
.state-list[b-78zvcmnhr4] {
    display: grid;
    gap: 0.125rem;
}

.state-group[b-78zvcmnhr4] {
    display: grid;
    gap: 0.125rem;
    align-content: start;
}

/* Самая длинная подпись — «Бессроч. безумие», 125px; с чекбоксом, отступами и значком
   отмеченного состояния ячейке нужно около 190px, отсюда порог. */
@container (min-width: 400px) {
    .state-list[b-78zvcmnhr4] {
        grid-template-columns: 1fr 1fr;
        column-gap: 0.5rem;
    }

}
/* /Components/Features/Characters/Components/DerivedAttributesTable.razor.rz.scp.css */
/* DerivedAttributesTable component scoped styles */

/* Progress bar animation */
[b-t605tzyrka] .h-1\.5 > div {
    transition: width 0.5s ease-out;
}

/* Print progress bars */
@media print {
    [b-t605tzyrka] .bg-red-500,
    [b-t605tzyrka] .bg-blue-500,
    [b-t605tzyrka] .bg-purple-500,
    [b-t605tzyrka] .bg-green-500 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Кнопка «потратить Удачу» стоит в строке таблицы, поэтому она иконка, а не cm-btn-sm.
   Размер держим на 28px: это всё ещё палец, а не курсор. */
.luck-spend[b-t605tzyrka] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    font-size: 0.75rem;
    color: #64748b;
    border: 1px solid var(--color-primary-300, #cbd5e1);
    border-radius: 0.25rem;
    background-color: #ffffff;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.luck-spend:hover[b-t605tzyrka] {
    color: var(--color-accent-600, #3f6d99);
    border-color: var(--color-accent-500, #4b7faf);
}
/* /Components/Features/Characters/Components/DevelopmentPhaseModal.razor.rz.scp.css */
.dev-step[b-96gv339gza] {
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fff;
}

.dev-step-header[b-96gv339gza] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.dev-step-title[b-96gv339gza] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dev-step-hint[b-96gv339gza] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dev-label[b-96gv339gza] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.125rem;
}

.dev-empty[b-96gv339gza] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

.dev-result[b-96gv339gza] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 0.8rem;
    color: #374151;
}

/* Таблица проверок опыта: узкие колонки под цифры, широкая под название навыка. */
.dev-table[b-96gv339gza] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.dev-table th[b-96gv339gza] {
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.dev-table td[b-96gv339gza] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.dev-badge-mastery[b-96gv339gza] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.05rem 0.35rem;
    border-radius: 9999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Варианты изменения Средств — крупные зоны нажатия, лист держат на планшете. */
.dev-option[b-96gv339gza] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    cursor: pointer;
}

.dev-option:hover[b-96gv339gza] {
    background: #f9fafb;
}

.dev-option-selected[b-96gv339gza] {
    border-color: var(--color-primary-400, #94a3b8);
    background: var(--color-primary-50, #f8fafc);
}

.dev-chip[b-96gv339gza] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.7rem;
    color: #374151;
}

.dev-chip-habituated[b-96gv339gza] {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}
/* /Components/Features/Characters/Components/FellowInvestigatorsPanel.razor.rz.scp.css */
/* Строка списка, а не мини-карточка: блок и так живёт внутри карточки секции. */
.fellow-row[b-z20l5dtg0h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.fellow-who[b-z20l5dtg0h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 11rem;
}

/* У вписанного руками вместо подписи два поля — в портретной ориентации они встают друг под друга. */
.fellow-who-manual[b-z20l5dtg0h] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.fellow-name[b-z20l5dtg0h] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fellow-meta[b-z20l5dtg0h] {
    font-size: 0.6875rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fellow-note[b-z20l5dtg0h] {
    flex: 2 1 14rem;
    min-width: 0;
}

/* Тап-цель крестика — 32px: строка узкая, но палец шириной не меняется. */
.fellow-remove[b-z20l5dtg0h] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    color: #6b7280;
    border-radius: 0.25rem;
}

.fellow-remove:hover[b-z20l5dtg0h] {
    color: var(--color-error-600, #c71d20);
    background-color: #fef2f2;
}

/* Чтобы поля заметок у строк с крестиком и без него стояли в одну линию. */
.fellow-remove-placeholder[b-z20l5dtg0h] {
    display: block;
    flex-shrink: 0;
    width: 2rem;
}

@media (max-width: 640px) {
    .fellow-row[b-z20l5dtg0h] {
        flex-wrap: wrap;
    }

    .fellow-note[b-z20l5dtg0h] {
        flex-basis: 100%;
    }
}
/* /Components/Features/Characters/Components/MythosHabituationPanel.razor.rz.scp.css */
/* Одна строка на вид тварей: на iPad список должен занимать минимум высоты,
   но кнопки остаются полноразмерными для пальца. */
.hab-row[b-kl7t5xsm7x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

.hab-row-done[b-kl7t5xsm7x] {
    background: #ecfdf5;
}

.hab-name[b-kl7t5xsm7x] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.8rem;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hab-formula[b-kl7t5xsm7x] {
    margin-left: 0.35rem;
    font-weight: 400;
    color: #9ca3af;
}

.hab-count[b-kl7t5xsm7x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    color: #6b7280;
    white-space: nowrap;
}

/* Предел правится прямо в строке — у большинства тварей его в бестиарии ещё нет. */
.hab-limit[b-kl7t5xsm7x] {
    width: 2.75rem;
    padding: 0.05rem 0.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    background: #fff;
}

.hab-actions[b-kl7t5xsm7x] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.hab-done[b-kl7t5xsm7x] {
    flex-shrink: 0;
    color: #065f46;
    font-weight: 600;
    white-space: nowrap;
}

.hab-remove[b-kl7t5xsm7x] {
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid #fecaca;
    color: #dc2626;
    background: #fff;
}

.hab-remove:hover[b-kl7t5xsm7x] {
    background: #fef2f2;
}

/* Узкая колонка (портрет iPad, боковые панели) — строка складывается, но не рвётся. */
@media (max-width: 520px) {
    .hab-row[b-kl7t5xsm7x] {
        flex-wrap: wrap;
    }

    .hab-name[b-kl7t5xsm7x] {
        flex-basis: 100%;
    }
}
/* /Components/Features/Characters/Components/SkillGroupCard.razor.rz.scp.css */
/* SkillGroupCard component scoped styles */

/* Smooth hover transition for skill rows */
[b-krcfhhms4b] .skill-row {
    transition: background-color 0.15s ease;
}

/* Print-friendly skill cards */
@media print {
    [b-krcfhhms4b] .bg-primary-50 {
        background-color: #F8FAFC !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Features/Characters/Components/SkillInfoPopover.razor.rz.scp.css */
.popover-wrapper[b-63gwaf58j6] {
    position: relative;
    display: inline-block;
}

.skill-name-btn[b-63gwaf58j6] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: inline;
    font: inherit;
    word-break: normal;
    overflow-wrap: normal;
}

/* Popover panel: hidden by default */
.popover-panel[b-63gwaf58j6] {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 280px;
    max-height: 400px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Show on CSS hover OR when clicked/toggled open */
.popover-wrapper:hover .popover-panel[b-63gwaf58j6],
.popover-panel.is-open[b-63gwaf58j6] {
    display: block;
}

/* Lift popover above backdrop */
.popover-panel.is-open[b-63gwaf58j6] {
    z-index: 50;
}

/* Ensure wrapper captures key events */
.popover-wrapper:focus-within .popover-panel[b-63gwaf58j6] {
    display: block;
}

/* Badges inside popover */
.badge-uncommon[b-63gwaf58j6] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #FEF3C7;
    color: #B45309;
}

.badge-no-retry[b-63gwaf58j6] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: #FEE2E2;
    color: #DC2626;
}

.badge-opposing[b-63gwaf58j6] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

/* Mobile: position fixed, top/left задаются через inline style из C# */
@media (max-width: 768px) {
    .popover-panel[b-63gwaf58j6] {
        position: fixed;
        width: min(90vw, 320px);
        max-height: min(80vh, 500px);
    }
}

@media (max-width: 380px) {
    .popover-panel[b-63gwaf58j6] {
        width: min(95vw, 280px);
    }
}

@media print {
    .popover-panel[b-63gwaf58j6] {
        display: none !important;
    }
}
/* /Components/Features/Characters/Components/SkillPicker.razor.rz.scp.css */
.picker-wrapper[b-w5m2nju14n] {
    position: relative;
}

.picker-dropdown[b-w5m2nju14n] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.picker-item[b-w5m2nju14n] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.1s;
}

.picker-item:hover[b-w5m2nju14n] {
    background-color: #EFF6FF;
}

.picker-item:not(:last-child)[b-w5m2nju14n] {
    border-bottom: 1px solid #F3F4F6;
}

.picker-item-name[b-w5m2nju14n] {
    flex: 1;
    font-weight: 500;
    color: #111827;
}

.picker-item-base[b-w5m2nju14n] {
    font-size: 0.65rem;
    color: #6B7280;
    flex-shrink: 0;
}

.picker-badge[b-w5m2nju14n] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
    background-color: #FEF3C7;
    color: #B45309;
    flex-shrink: 0;
}
/* /Components/Features/Characters/Components/SpecializationGroup.razor.rz.scp.css */
.spec-group[b-dafjgh58wg] {
    margin-bottom: 4px;
}

.spec-group-header[b-dafjgh58wg] {
    display: flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 4px 2px 4px;
    margin-bottom: 1px;
    border-bottom: 1px dashed #E5E7EB;
    cursor: pointer;
    user-select: none;
}

.spec-group-header:hover[b-dafjgh58wg] {
    color: #6B7280;
}

.spec-count-badge[b-dafjgh58wg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 3px;
    background-color: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.spec-group-name[b-dafjgh58wg] {
    flex: 1;
}

.spec-bonus-badge[b-dafjgh58wg] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background-color: #D1FAE5;
    color: #065F46;
    border: 1px solid #6EE7B7;
    flex-shrink: 0;
}
/* /Components/Features/Characters/Components/UnifiedPersonalInfoCard.razor.rz.scp.css */
/* UnifiedPersonalInfoCard component scoped styles */

/* Print optimizations */
@media print {
    [b-5zrz2gh4ch] input {
        border: 1px solid #d1d5db !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Поле «Укло.» — зеркало навыка, на печати оно должно остаться серым. */
    [b-5zrz2gh4ch] .bg-gray-100 {
        background-color: #f9fafb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Features/Characters/Components/Wizard/WizardCharacteristicsStep.razor.rz.scp.css */
/* Плитки вторичных атрибутов: не карточки, а строки сетки внутри уже существующей карточки. */
.derived-tile[b-9clkypc0aa] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.375rem;
    background: var(--color-primary-50);
}

.derived-tile span[b-9clkypc0aa] {
    font-size: 0.75rem;
    color: var(--color-primary-500);
}

.derived-tile strong[b-9clkypc0aa] {
    font-size: 1.125rem;
    color: var(--color-primary-800);
}
/* /Components/Features/Characters/Components/Wizard/WizardGearStep.razor.rz.scp.css */
.money-tile[b-uygqy5t9c6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.375rem;
    background: var(--color-primary-50);
}

.money-tile span[b-uygqy5t9c6] {
    font-size: 0.75rem;
    color: var(--color-primary-500);
}

.money-tile strong[b-uygqy5t9c6] {
    font-size: 1.0625rem;
    color: var(--color-primary-800);
}

.equipment-list[b-uygqy5t9c6] {
    display: flex;
    flex-direction: column;
}

.equipment-row[b-uygqy5t9c6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.375rem 0;
    border-top: 1px solid var(--cm-border-color);
}

.equipment-row:first-child[b-uygqy5t9c6] {
    border-top: 0;
}
/* /Components/Features/Characters/Components/Wizard/WizardMethodStep.razor.rz.scp.css */
.method-card[b-nqf6t7nlz2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.5rem;
    background: white;
    transition: border-color 0.15s, background-color 0.15s;
}

.method-card:hover[b-nqf6t7nlz2] {
    border-color: var(--color-accent-400);
}

.method-card.is-selected[b-nqf6t7nlz2] {
    border-color: var(--color-accent-500);
    background: var(--color-accent-50);
}

.method-card-title[b-nqf6t7nlz2] {
    font-weight: 600;
    color: var(--color-primary-700);
}

.method-card-text[b-nqf6t7nlz2] {
    font-size: 0.8125rem;
    color: var(--color-primary-500);
    line-height: 1.35;
}

.method-card-ref[b-nqf6t7nlz2] {
    font-size: 0.75rem;
    color: var(--color-primary-400);
}
/* /Components/Features/Characters/Components/Wizard/WizardOccupationStep.razor.rz.scp.css */
/* Список профессий длинный: держим его в собственном скролле, страница вбок не едет. */
.occupation-list[b-7h9xc7iqbz] {
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.occupation-row[b-7h9xc7iqbz] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.375rem;
    background: white;
    transition: border-color 0.15s, background-color 0.15s;
}

.occupation-row:hover[b-7h9xc7iqbz] {
    border-color: var(--color-accent-400);
}

.occupation-row.is-selected[b-7h9xc7iqbz] {
    border-color: var(--color-accent-500);
    background: var(--color-accent-50);
}

.occupation-name[b-7h9xc7iqbz] {
    font-weight: 600;
    color: var(--color-primary-700);
}

.occupation-meta[b-7h9xc7iqbz] {
    font-size: 0.75rem;
    color: var(--color-primary-500);
}

.slot-row[b-7h9xc7iqbz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--cm-border-color);
}

.slot-label[b-7h9xc7iqbz] {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    color: var(--color-primary-700);
}

.slot-fixed[b-7h9xc7iqbz] {
    font-size: 0.75rem;
    color: var(--color-primary-400);
}
/* /Components/Features/Characters/Components/Wizard/WizardSkillsStep.razor.rz.scp.css */
/* Заголовок группы навыков внутри общей таблицы — строка, а не вложенная карточка. */
.skills-table .group-row td[b-x1x7mmql2a] {
    background: var(--color-primary-50);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-500);
}

.skills-table td[b-x1x7mmql2a] {
    vertical-align: middle;
}

.slot-row[b-x1x7mmql2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--cm-border-color);
    font-size: 0.875rem;
}

.text-accent[b-x1x7mmql2a] {
    color: var(--color-accent-600);
}
/* /Components/Features/Characters/Components/Wizard/WizardSummaryStep.razor.rz.scp.css */
.summary-tile[b-756ev1laik] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.375rem;
    background: var(--color-primary-50);
}

.summary-tile span[b-756ev1laik] {
    font-size: 0.6875rem;
    color: var(--color-primary-500);
}

.summary-tile strong[b-756ev1laik] {
    font-size: 1.25rem;
    color: var(--color-primary-800);
    line-height: 1.1;
}

.biography-summary > div + div[b-756ev1laik] {
    border-top: 1px solid var(--cm-border-color);
    margin-top: 0.625rem;
    padding-top: 0.625rem;
}

.biography-summary dt[b-756ev1laik] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary-500);
}

.biography-summary dd[b-756ev1laik] {
    white-space: pre-line;
    color: var(--color-primary-700);
    font-size: 0.875rem;
}

.key-connection[b-756ev1laik] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--color-accent-100);
    color: var(--color-accent-700);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}
/* /Components/Features/Characters/Pages/CharacterPage.razor.rz.scp.css */
/* CharacterPage component scoped styles */

/* Compact character name in the sticky header on tablet and below */
.char-header-name[b-uh0sl7njui] {
    font-family: var(--font-family-serif, serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--color-primary-950);
}

@media (min-width: 1024px) {
    .char-header-name[b-uh0sl7njui] {
        font-size: 1.5rem;
    }
}

/* Section header hover effect */
.section-header[b-uh0sl7njui] {
    transition: filter 0.2s ease;
}

.section-header:hover[b-uh0sl7njui] {
    filter: brightness(1.08);
}

/* Smooth section collapse animation via print optimization */
@media print {
    .section-header[b-uh0sl7njui] {
        background: #334155 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Уведомление листа. Раньше это была плашка во всю ширину в потоке: она сдвигала лист вниз
   и висела, пока её не закроют. Теперь она стоит под шапкой рядом с кнопкой сохранения —
   там же, где значок автосохранения, — и ничего не двигает. Высота шапки (.page-topbar) 56px. */
.sheet-toast[b-uh0sl7njui] {
    position: fixed;
    top: calc(56px + 0.75rem);
    right: 1rem;
    z-index: 40;
    max-width: min(24rem, calc(100vw - 2rem));
    border-radius: var(--cm-radius-md, 0.375rem);
    box-shadow: 0 10px 25px -12px rgba(15, 23, 42, 0.45);
}

/* Отступ снизу у NotificationAlert внутри всплывающей плашки не нужен. */
.sheet-toast[b-uh0sl7njui]  > div {
    margin-bottom: 0;
}
/* /Components/Features/Characters/Pages/InvestigatorWizardPage.razor.rz.scp.css */
/* Лента шагов: на планшете она должна умещаться в ширину и не рвать страницу вбок. */
.wizard-steps[b-81t462spvw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.wizard-step[b-81t462spvw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cm-border-color);
    border-radius: 0.5rem;
    background: white;
    color: var(--color-primary-500);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.wizard-step:disabled[b-81t462spvw] {
    opacity: 0.55;
}

.wizard-step:not(:disabled):hover[b-81t462spvw] {
    border-color: var(--color-accent-400);
    color: var(--color-accent-700);
}

.wizard-step.is-current[b-81t462spvw] {
    border-color: var(--color-accent-500);
    background: var(--color-accent-50);
    color: var(--color-accent-700);
}

.wizard-step.is-done .wizard-step-number[b-81t462spvw] {
    background: var(--color-success-600);
    color: white;
}

.wizard-step-number[b-81t462spvw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wizard-step.is-current .wizard-step-number[b-81t462spvw] {
    background: var(--color-accent-600);
    color: white;
}

.wizard-footer[b-81t462spvw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wizard-validation[b-81t462spvw] {
    font-size: 0.8125rem;
    color: var(--color-error-600);
}
/* /Components/Features/Items/Components/ItemsListView.razor.rz.scp.css */
/* Плотность каталога предметов — устроена так же, как у оружия
   (`Features/Weapons/Components/WeaponsListView.razor.css`), различия только в наборе
   колонок. Отступы ячеек заданы здесь, а не утилитами Tailwind в разметке: селектор
   `.cm-table td` из design-system.css (0,1,1) перебивает одиночный класс `.py-1` (0,1,0),
   а `.it-table[b-…] td` — уже (0,2,1) и выигрывает.

   ::deep нужен из-за шапки: `<th>` рисует общий SortableTableHeader, атрибута области
   видимости этого компонента на нём нет. Строки лежат в этом же файле, но правила
   через `::deep` накрывают и их — селектор всё равно потомковый. */

/* Шапка и колонка названия закреплены.

   `position: sticky` считает от ближайшего скроллпорта, а он здесь — сама .it-table:
   `overflow-x: auto` переводит и overflow-y в auto. Без max-height контейнер тянется
   под содержимое, скроллить в нём нечего и ничего не прилипает — поэтому высота задана.
   Заодно фильтры и пагинация перестают уезжать: прокручиваются только строки.

   border-collapse гасит границы у прилипших ячеек, поэтому нижняя линия строки
   в первой колонке нарисована тенью.

   21.5rem — занятое помимо строк: шапка приложения с заголовком и фильтрами плюс
   пагинация с нижним отступом. Замерено в ландшафте iPad; совпало с каталогом оружия,
   потому что обвязка страницы у них одна и та же. Нужно, чтобы страница целиком
   не прокручивалась: две полосы прокрутки сразу хуже одной. */
.it-table[b-yfl6j1ssl2] {
    max-height: calc(100vh - 21.5rem);
    max-height: calc(100dvh - 21.5rem);
}

.it-table[b-yfl6j1ssl2]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.it-table[b-yfl6j1ssl2]  thead th:first-child {
    z-index: 3;
}

/* Раскрытие занимает всю строку целиком — закреплять в нём нечего. */
.it-table[b-yfl6j1ssl2]  th:first-child,
.it-table[b-yfl6j1ssl2]  tr:not(.it-details) > td:first-child {
    position: sticky;
    left: 0;
    box-shadow: inset 0 -1px 0 var(--color-primary-100);
}

/* Прилипшая ячейка обязана быть непрозрачной, иначе сквозь неё поедут соседние
   колонки, и её фон должен повторять состояние строки. Специфичность здесь выше,
   чем у `.cm-table tr:hover td`, поэтому порядок внутри блока и решает: открытая
   строка идёт после ховера, чтобы accent не сменился на primary под пальцем. */
.it-table[b-yfl6j1ssl2]  tbody tr:not(.it-details) > td:first-child {
    background: white;
}

.it-table[b-yfl6j1ssl2]  tbody tr:not(.it-details):hover > td:first-child {
    background: var(--color-primary-50);
}

.it-table[b-yfl6j1ssl2]  tbody tr.it-row-open > td:first-child {
    background: var(--color-accent-50);
}

.it-table[b-yfl6j1ssl2]  th,
.it-table[b-yfl6j1ssl2]  td {
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
}

.it-table[b-yfl6j1ssl2]  th {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Название переносится, если длинное; ширины заданы долями, потому что тянуться
   хотят обе текстовые колонки сразу. 45% — замер в портрете iPad: на 35% в две строки
   уезжали 9 названий из 25, на 45% — одно, а дальше расширять уже нечего. */
.it-table[b-yfl6j1ssl2]  th:first-child,
.it-table[b-yfl6j1ssl2]  tr:not(.it-details) > td:first-child {
    width: 45%;
    white-space: normal;
}

/* Описание — одной строкой с многоточием. `max-width: 0` — тот самый приём, без
   которого ellipsis в таблице с `table-layout: auto` не срабатывает: иначе колонка
   растёт под текст. */
.it-table[b-yfl6j1ssl2]  .it-desc {
    width: 55%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «Раскрыть» для описания = перестать его обрезать прямо в строке. Повторять его
   отдельным блоком в раскрытии нельзя: описания здесь короткие, и блок дословно
   повторял бы колонку — ровно то дублирование, из-за которого каталоги и переделывали. */
.it-table[b-yfl6j1ssl2]  tr.it-row-open > .it-desc {
    /* pre-wrap безопасен: в ячейке лежит ровно описание, без отступов разметки. */
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
}

/* accent, а не primary-50: на primary-50 строка сливалась бы с ховером соседей. */
.it-table[b-yfl6j1ssl2]  .it-row-open > td,
.it-table[b-yfl6j1ssl2]  .it-details > td {
    background: var(--color-accent-50);
}

.it-table[b-yfl6j1ssl2]  .it-details > td {
    padding: 0.5rem 0.75rem 0.75rem 1.75rem;
    white-space: normal;
    font-size: 0.75rem;
}

.it-table[b-yfl6j1ssl2]  .it-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-400);
}

/* Раскрытая карточка на узком экране: подпись слева, значение справа. */
.it-card-details[b-yfl6j1ssl2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.75rem;
    margin: 0.5rem 0 0.25rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-primary-100);
    font-size: 0.75rem;
}

.it-card-details dt[b-yfl6j1ssl2] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-400);
    white-space: nowrap;
}

.it-card-details dd[b-yfl6j1ssl2] {
    margin: 0;
    color: var(--color-primary-700);
}

/* Картинка предмета встречается редко и приходит по чужому URL — ограничиваем
   и высотой тоже, иначе одна строка раскрытия занимает весь экран. */
.it-image[b-yfl6j1ssl2] {
    max-width: 16rem;
    max-height: 12rem;
    margin-top: 0.25rem;
    border: 1px solid var(--color-primary-200);
    border-radius: 0.375rem;
}
/* /Components/Features/Music/Components/MusicPlayerBar.razor.rz.scp.css */
/* Панель прибита к низу области содержимого, а не к низу документа: в режиме игры
   сценария страница занимает всю высоту экрана и обычный «последний блок в потоке»
   уехал бы за край. Левый отступ повторяет .page-with-sidebar — панель рендерится
   внутри неё, поэтому тот же селектор про раскрытую боковую панель работает и здесь. */

.cm-music-bar[b-skbfpr3009] {
    position: fixed;
    left: var(--sidebar-width-collapsed);
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
    background: var(--cm-background);
    border-top: 1px solid var(--cm-border-color);
    box-shadow: 0 -2px 10px rgb(15 23 42 / 6%);
    transition: var(--sidebar-transition);
}

/* На iPad полоса позиции иначе оказывается почти на системной полосе жестов. Горизонтальное
   движение по ней iPadOS принимает за переход в соседнее приложение. Дополнительный низ входит
   в высоту панели через ResizeObserver, поэтому содержимое страницы тоже отступит правильно. */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    .cm-music-bar[b-skbfpr3009] {
        padding-bottom: max(32px, calc(8px + env(safe-area-inset-bottom, 0px)));
    }
}

/* Без ::deep: изоляция дописывает метку компонента к последнему селектору, а .sidebar
   и .page-with-sidebar остаются как есть — ровно то, что нужно для внешнего контекста. */
.sidebar:not(.collapsed) ~ .page-with-sidebar .cm-music-bar[b-skbfpr3009] {
    left: var(--sidebar-width);
}

.cm-music-bar-row[b-skbfpr3009] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Ряд настроений на планшете в портрете не влезает в строку — переносим, а не прячем. */
.cm-music-bar-row--wrap[b-skbfpr3009] {
    flex-wrap: wrap;
    row-gap: 6px;
}

.cm-music-glyph[b-skbfpr3009] {
    color: var(--color-primary-400);
    font-size: 14px;
    flex-shrink: 0;
}

.cm-music-glyph--live[b-skbfpr3009] {
    color: var(--color-accent-500);
}

.cm-music-title[b-skbfpr3009] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.cm-music-name[b-skbfpr3009] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-music-pool[b-skbfpr3009] {
    font-size: 0.75rem;
    color: var(--color-primary-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-music-controls[b-skbfpr3009] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cm-music-volume[b-skbfpr3009] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-music-volume input[type='range'][b-skbfpr3009] {
    width: 96px;
    accent-color: var(--color-accent-500);
    /* Полоска в 4px пальцем не ловится — расширяем зону нажатия по вертикали. */
    height: 32px;
    cursor: pointer;
}

/* Кнопка-иконка без рамки: раскрытие панели и mute не должны спорить по весу
   с основными кнопками управления. */
.cm-music-toggle[b-skbfpr3009] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary-500);
    cursor: pointer;
}

.cm-music-toggle:hover[b-skbfpr3009] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

@media (max-width: 768px) {
    .cm-music-bar[b-skbfpr3009] {
        left: 0;
        /* Над нижней навигацией, а не под ней. */
        bottom: 58px;
    }

    .cm-music-volume input[type='range'][b-skbfpr3009] {
        width: 64px;
    }
}

/* Полоса позиции. Значения в неё пишет js/music-player.js напрямую — здесь только внешний вид. */
.cm-music-seek[b-skbfpr3009] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-music-time[b-skbfpr3009] {
    font-family: var(--font-family-mono, monospace);
    font-size: 0.6875rem;
    color: var(--color-primary-400);
    /* Фиксированная ширина, иначе полоса дёргается на каждой смене цифры. */
    min-width: 3.25rem;
    flex-shrink: 0;
}

.cm-music-time:last-child[b-skbfpr3009] {
    text-align: right;
}

.cm-music-seek input[type='range'][b-skbfpr3009] {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-accent-500);
    /* Полоску в 4px пальцем не поймать — набираем высоту зоны нажатия. */
    height: 28px;
    cursor: pointer;
    /* Жест принадлежит ползунку, а не прокрутке/навигации браузера. Системный жест от самого
       края запретить нельзя, поэтому выше панель ещё и получает безопасный нижний отступ. */
    touch-action: none;
}

.cm-music-seek input[type='range']:disabled[b-skbfpr3009] {
    cursor: default;
    opacity: 0.45;
}
/* /Components/Features/Profile/Pages/ProfilePage.razor.rz.scp.css */
/* Шапка карточки профиля: аватар, имя с адресом, бейдж роли. */
.profile-identity[b-yq51ktog2i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-avatar[b-yq51ktog2i] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--cm-gradient-primary);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-check[b-yq51ktog2i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    /* Планшет: галочка со своей подписью должна нажиматься пальцем, а не ногтем. */
    min-height: 2.25rem;
    cursor: pointer;
}

/* Строка списка внутри карточки — без второй карточки, только разделитель сверху. */
.profile-row[b-yq51ktog2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--color-primary-700);
    border-top: 1px solid var(--cm-border-color);
    cursor: pointer;
}

.profile-row:first-child[b-yq51ktog2i] {
    border-top: 0;
}

.profile-row:hover[b-yq51ktog2i] {
    background: var(--color-primary-50);
}

.profile-row-value[b-yq51ktog2i] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-primary-800);
    white-space: nowrap;
}

.profile-row-note[b-yq51ktog2i] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-primary-400);
}
/* /Components/Features/Scenarios/Components/OneShotAnnouncement.razor.rz.scp.css */
/* ── Oneshot section wrapper ─────────────────────────── */
.oneshot-section[b-gnp3i9vht4] {
    margin-bottom: 12px;
}

/* ── Card ─────────────────────────────────────────────── */
.oneshot-card[b-gnp3i9vht4] {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-300);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    margin-bottom: 12px;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────── */
.scenario-hd[b-gnp3i9vht4] {
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-800));
    color: white;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hd-left[b-gnp3i9vht4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-label[b-gnp3i9vht4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hd-date[b-gnp3i9vht4] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Card body ───────────────────────────────────────── */
.card-body[b-gnp3i9vht4] {
    padding: 14px;
}

.body-layout[b-gnp3i9vht4] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ── Scenario info (left column) ─────────────────────── */
.scenario-info[b-gnp3i9vht4] {
    flex: 1 1 0%;
    min-width: 0;
}

.scenario-title[b-gnp3i9vht4] {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    color: var(--color-primary-900);
}

.meta-grid[b-gnp3i9vht4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin-bottom: 10px;
}

.meta-label[b-gnp3i9vht4] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-600);
}

.meta-value[b-gnp3i9vht4] {
    font-size: 12px;
    color: var(--color-primary-900);
}

.scenario-desc[b-gnp3i9vht4] {
    font-size: 12px;
    color: var(--color-primary-600);
    line-height: 1.6;
    margin-bottom: 10px;
}

.meta-tags[b-gnp3i9vht4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.era-badge[b-gnp3i9vht4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-300);
}

.location-text[b-gnp3i9vht4] {
    font-size: 11px;
    color: var(--color-primary-400);
}

/* ── Characters panel (right column) ─────────────────── */
.pregens-panel[b-gnp3i9vht4] {
    flex: 0 0 260px;
}

.pregens-title[b-gnp3i9vht4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary-400);
    margin-bottom: 8px;
}

/* ── Character row ───────────────────────────────────── */
.pregen-row[b-gnp3i9vht4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-primary-300);
    background: var(--color-primary-100);
    margin-bottom: 5px;
}

.pregen-info[b-gnp3i9vht4] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.pregen-avatar[b-gnp3i9vht4] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.pregen-name[b-gnp3i9vht4] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pregen-occ[b-gnp3i9vht4] {
    font-size: 11px;
    color: var(--color-primary-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Action buttons ──────────────────────────────────── */
.action-btn[b-gnp3i9vht4] {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all .12s;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.release-btn[b-gnp3i9vht4] {
    background: var(--color-error-light, #FBECEC);
    color: var(--color-error-t, #891416);
    border: 1px solid var(--color-error, #C71D20);
}

.release-btn:hover[b-gnp3i9vht4] {
    background: #f5d5d5;
}

.reserve-btn[b-gnp3i9vht4] {
    background: var(--color-accent-500);
    color: white;
}

.reserve-btn:hover[b-gnp3i9vht4] {
    background: var(--color-accent-600);
}

.ghost-btn[b-gnp3i9vht4] {
    background: transparent;
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-300);
}

.ghost-btn:hover[b-gnp3i9vht4] {
    background: var(--color-primary-100);
}

.reserved-label[b-gnp3i9vht4] {
    font-size: 11px;
    color: var(--color-primary-400);
    flex-shrink: 0;
}

/* ── Mobile: hide character panel ─────────────────────── */
@media (max-width: 768px) {
    .pregens-panel[b-gnp3i9vht4] {
        display: none;
    }
}
/* /Components/Features/Spells/Components/SpellsListView.razor.rz.scp.css */
/* Плотность каталога заклинаний — устроена так же, как у оружия
   (`Features/Weapons/Components/WeaponsListView.razor.css`), различия только в наборе
   колонок. Отступы ячеек заданы здесь, а не утилитами Tailwind в разметке: селектор
   `.cm-table td` из design-system.css (0,1,1) перебивает одиночный класс `.py-1` (0,1,0),
   а `.sp-table[b-…] td` — уже (0,2,1) и выигрывает.

   ::deep обязателен: строки рендерит дочерний SpellTableRow, атрибута области
   видимости этого компонента на них нет. */

/* Шапка и колонка названия закреплены.

   `position: sticky` считает от ближайшего скроллпорта, а он здесь — сама .sp-table:
   `overflow-x: auto` переводит и overflow-y в auto. Без max-height контейнер тянется
   под содержимое, скроллить в нём нечего и ничего не прилипает — поэтому высота задана.
   Заодно фильтры и пагинация перестают уезжать: прокручиваются только строки.

   border-collapse гасит границы у прилипших ячеек, поэтому нижняя линия строки
   в первой колонке нарисована тенью.

   21.5rem — занятое помимо строк: шапка приложения с заголовком и фильтрами плюс
   пагинация с нижним отступом. Обвязка страницы здесь та же, что у каталогов оружия,
   предметов и книг, поэтому и число то же. */
.sp-table[b-uhz8eumibk] {
    max-height: calc(100vh - 21.5rem);
    max-height: calc(100dvh - 21.5rem);
}

.sp-table[b-uhz8eumibk]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sp-table[b-uhz8eumibk]  thead th:first-child {
    z-index: 3;
}

/* Раскрытие занимает всю строку целиком — закреплять в нём нечего. */
.sp-table[b-uhz8eumibk]  th:first-child,
.sp-table[b-uhz8eumibk]  tr:not(.sp-details) > td:first-child {
    position: sticky;
    left: 0;
    box-shadow: inset 0 -1px 0 var(--color-primary-100);
}

/* Прилипшая ячейка обязана быть непрозрачной, иначе сквозь неё поедут соседние
   колонки, и её фон должен повторять состояние строки. Специфичность здесь выше,
   чем у `.cm-table tr:hover td`, поэтому порядок внутри блока и решает: открытая
   строка идёт после ховера, чтобы accent не сменился на primary под пальцем. */
.sp-table[b-uhz8eumibk]  tbody tr:not(.sp-details) > td:first-child {
    background: white;
}

.sp-table[b-uhz8eumibk]  tbody tr:not(.sp-details):hover > td:first-child {
    background: var(--color-primary-50);
}

.sp-table[b-uhz8eumibk]  tbody tr.sp-row-open > td:first-child {
    background: var(--color-accent-50);
}

.sp-table[b-uhz8eumibk]  th,
.sp-table[b-uhz8eumibk]  td {
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
}

.sp-table[b-uhz8eumibk]  th {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Название переносится, если длинное; ширины заданы долями, потому что тянуться
   хотят все четыре текстовые колонки сразу, а `max-width: 0` у обрезаемых снимает
   их собственный минимум. Доли подобраны замером в ландшафте iPad: стоимость длиннее
   времени сотворения вдвое (в среднем 29 знаков против 15), и при равных долях
   у времени оставался пустой запас, а стоимость обрезалась. */
.sp-table[b-uhz8eumibk]  th:first-child,
.sp-table[b-uhz8eumibk]  tr:not(.sp-details) > td:first-child {
    width: 30%;
    white-space: normal;
}

/* Стоимость, время и тип — свободный текст: обрезаем многоточием, иначе
   «(Урон*2+1) магии за раунд, 1d20 рассудка» растаскивает таблицу за край экрана.
   `max-width: 0` — тот самый приём, без которого ellipsis при `table-layout: auto`
   не срабатывает: иначе колонка растёт под текст. */
.sp-table[b-uhz8eumibk]  .sp-clip {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-table[b-uhz8eumibk]  .sp-col-type {
    width: 15%;
}

.sp-table[b-uhz8eumibk]  .sp-col-cost {
    width: 36%;
}

.sp-table[b-uhz8eumibk]  .sp-col-time {
    width: 19%;
}

/* «Раскрыть» = перестать обрезать те же ячейки. Повторять стоимость и время
   отдельным блоком в раскрытии нельзя: блок дословно повторял бы колонку — ровно
   то дублирование, из-за которого каталоги и переделывали. */
.sp-table[b-uhz8eumibk]  tr.sp-row-open > .sp-clip {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* accent, а не primary-50: на primary-50 строка сливалась бы с ховером соседей. */
.sp-table[b-uhz8eumibk]  .sp-row-open > td,
.sp-table[b-uhz8eumibk]  .sp-details > td {
    background: var(--color-accent-50);
}

.sp-table[b-uhz8eumibk]  .sp-details > td {
    padding: 0.5rem 0.75rem 0.75rem 1.75rem;
    white-space: normal;
    font-size: 0.75rem;
}

.sp-table[b-uhz8eumibk]  .sp-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-400);
}

/* Раскрытая карточка на узком экране: подпись слева, значение справа. */
.sp-card-details[b-uhz8eumibk] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.75rem;
    margin: 0.5rem 0 0.25rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-primary-100);
    font-size: 0.75rem;
}

.sp-card-details dt[b-uhz8eumibk] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-400);
    white-space: nowrap;
}

.sp-card-details dd[b-uhz8eumibk] {
    margin: 0;
    color: var(--color-primary-700);
}
/* /Components/Features/Weapons/Components/WeaponsListView.razor.rz.scp.css */
/* Плотность каталога оружия.

   Отступы ячеек заданы здесь, а не утилитами Tailwind в разметке: селектор
   `.cm-table td` из design-system.css (0,1,1) перебивает одиночный класс `.py-1` (0,1,0),
   а `.wt-table[b-…] td` — уже (0,2,1) и выигрывает.

   ::deep обязателен: строки рендерит дочерний WeaponTableRow, атрибута области
   видимости этого компонента на них нет. */

/* Шапка и колонка названия закреплены.

   `position: sticky` считает от ближайшего скроллпорта, а он здесь — сама .wt-table:
   `overflow-x: auto` переводит и overflow-y в auto. Без max-height контейнер тянется
   под содержимое, скроллить в нём нечего и ничего не прилипает — поэтому высота задана.
   Заодно фильтры и пагинация перестают уезжать: на iPad прокручиваются только строки.

   border-collapse гасит границы у прилипших ячеек, поэтому нижняя линия строки
   в первой колонке нарисована тенью.

   21.5rem — это занятое помимо строк: шапка приложения с заголовком страницы (224px)
   плюс пагинация с нижним отступом (118px) в ландшафте iPad. Подобрано замером, чтобы
   страница целиком не прокручивалась: две полосы прокрутки сразу хуже одной. */
.wt-table[b-g5x41ur3ar] {
    max-height: calc(100vh - 21.5rem);
    max-height: calc(100dvh - 21.5rem);
}

.wt-table[b-g5x41ur3ar]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.wt-table[b-g5x41ur3ar]  thead th:first-child {
    z-index: 3;
}

/* Раскрытие занимает всю строку целиком — закреплять в нём нечего. */
.wt-table[b-g5x41ur3ar]  th:first-child,
.wt-table[b-g5x41ur3ar]  tr:not(.wt-details) > td:first-child {
    position: sticky;
    left: 0;
    box-shadow: inset 0 -1px 0 var(--color-primary-100);
}

/* Прилипшая ячейка обязана быть непрозрачной, иначе сквозь неё поедут соседние
   колонки, и её фон должен повторять состояние строки. Специфичность здесь выше,
   чем у `.cm-table tr:hover td`, поэтому порядок внутри блока и решает: открытая
   строка идёт после ховера, чтобы accent не сменился на primary под пальцем. */
.wt-table[b-g5x41ur3ar]  tbody tr:not(.wt-details) > td:first-child {
    background: white;
}

.wt-table[b-g5x41ur3ar]  tbody tr:not(.wt-details):hover > td:first-child {
    background: var(--color-primary-50);
}

.wt-table[b-g5x41ur3ar]  tbody tr.wt-row-open > td:first-child {
    background: var(--color-accent-50);
}

.wt-table[b-g5x41ur3ar]  th,
.wt-table[b-g5x41ur3ar]  td {
    padding: 0.3125rem 0.5rem;
    white-space: nowrap;
}

.wt-table[b-g5x41ur3ar]  th {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Название — единственная колонка, которой позволено тянуться и переноситься. */
.wt-table[b-g5x41ur3ar]  th:first-child,
.wt-table[b-g5x41ur3ar]  td:first-child {
    width: 100%;
    white-space: normal;
}

/* accent, а не primary-50: на primary-50 строка сливалась бы с ховером соседей. */
.wt-table[b-g5x41ur3ar]  .wt-row-open > td,
.wt-table[b-g5x41ur3ar]  .wt-details > td {
    background: var(--color-accent-50);
}

.wt-table[b-g5x41ur3ar]  .wt-details > td {
    padding: 0.5rem 0.75rem 0.75rem 1.75rem;
    white-space: normal;
    font-size: 0.75rem;
}

.wt-table[b-g5x41ur3ar]  .wt-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-400);
}

/* Раскрытая карточка на узком экране: подпись слева, значение справа. */
.wt-card-details[b-g5x41ur3ar] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.75rem;
    margin: 0.5rem 0 0.25rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-primary-100);
    font-size: 0.75rem;
}

.wt-card-details dt[b-g5x41ur3ar] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-400);
    white-space: nowrap;
}

.wt-card-details dd[b-g5x41ur3ar] {
    margin: 0;
    color: var(--color-primary-700);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

.page[b-9bxfeybak6] {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
}
/* /Components/Navigation/TopBar.razor.rz.scp.css */

.nav-container[b-egd4ej6r1y] {
    border-bottom: 1px solid var(--cm-border-color);
    backdrop-filter: blur(10px);
    background-color: var(--cm-background-alpha);
    width: 100%;
}

.brand[b-egd4ej6r1y] {
    color: var(--color-primary-800);
    font-weight: 700;
}

.user-avatar[b-egd4ej6r1y] {
    background: var(--color-primary-700);
    flex-shrink: 0;
}

.logout-btn[b-egd4ej6r1y] {
    background: var(--cm-gradient-error);
    flex-shrink: 0;
}

    .logout-btn:hover[b-egd4ej6r1y] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px var(--cm-shadow-error);
    }

.mobile-menu[b-egd4ej6r1y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--cm-overlay);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .mobile-menu.show[b-egd4ej6r1y] {
        opacity: 1;
        pointer-events: auto;
    }

.mobile-menu-content[b-egd4ej6r1y] {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: var(--cm-background);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.mobile-menu.show .mobile-menu-content[b-egd4ej6r1y] {
    transform: translateX(0);
}

.google-btn[b-egd4ej6r1y] {
    background: var(--cm-background);
    border: 1px solid var(--cm-border-color);
    border-radius: var(--cm-radius-md);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    color: var(--cm-text-primary, #374151);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

    .google-btn:hover[b-egd4ej6r1y] {
        border-color: var(--cm-border-color-hover);
        box-shadow: var(--cm-shadow-sm);
    }

    .google-btn:focus-visible[b-egd4ej6r1y] {
        outline: 2px solid var(--cm-border-color-hover);
        outline-offset: 2px;
    }

.auth-alert[b-egd4ej6r1y] {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--cm-radius-md);
    color: #dc2626;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-right: 1rem;
    max-width: 300px;
}

/* Active NavLink highlight */
:deep(a.active)[b-egd4ej6r1y] {
    color: var(--color-primary-800);
    background-color: var(--color-primary-50);
    font-weight: 600;
    border-radius: var(--cm-radius-md);
}
/* /Components/Shared/ConfirmationModal.razor.rz.scp.css */
/* ConfirmationModal component scoped styles */
/* CSS isolation automatically applies [b-{component-id}] scope to these styles */

@keyframes scaleIn-b-g3es17t0u9 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn-b-g3es17t0u9 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn[b-g3es17t0u9] {
    animation: fadeIn-b-g3es17t0u9 0.15s ease-out;
}

.animate-scaleIn[b-g3es17t0u9] {
    animation: scaleIn-b-g3es17t0u9 0.15s ease-out;
}
/* /Components/Shared/Modal.razor.rz.scp.css */
/* Modal component scoped styles */
/* CSS isolation automatically applies [b-{component-id}] scope to these styles */

@keyframes scaleIn-b-f4o2nabf8y {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn-b-f4o2nabf8y {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn[b-f4o2nabf8y] {
    animation: fadeIn-b-f4o2nabf8y 0.15s ease-out;
}

.animate-scaleIn[b-f4o2nabf8y] {
    animation: scaleIn-b-f4o2nabf8y 0.15s ease-out;
}