/* Консоль серверів: сторінки 50 (огляд) і 60 (сервер).
   Палітра з макета Claude Design — нейтральна база hue 260, синій акцент hue 235.
   Розкладка й відступи беруться з snippets.css, тут лише те, чого там нема. */

.server-console {
    --sc-bg:      oklch(17% 0.005 260);
    --sc-panel:   oklch(20.5% 0.006 260);
    --sc-panel-2: oklch(23% 0.008 260);
    --sc-line:    oklch(28% 0.008 260);
    --sc-text:    oklch(90% 0.004 260);
    --sc-muted:   oklch(60% 0.006 260);
    --sc-faint:   oklch(40% 0.006 260);
    --sc-accent:  oklch(66% 0.14 235);
    --sc-online:  oklch(72% 0.15 155);
    --sc-offline: oklch(65% 0.17 25);
    --sc-warn:    oklch(78% 0.15 80);

    background: var(--sc-bg);
    color: var(--sc-text);
    /* Тема віддає контент без полів — відступи сторінки беремо з макета */
    padding: 22px 28px 50px;
}

@media (max-width: 640px) {
    .server-console { padding: 16px 14px 40px; }
}

/* --- метрики хоста в консолі -------------------------------------------------
   Графіки й звіти приїхали зі сторінки 1 на стокових шаблонах. Щоб вони не
   випадали з картками з одного екрана, класичному регіону даємо вигляд панелі:
   ті самі фон, рамка й шапка, що в .sc-panel. Обгортки без UI не чіпаємо. */

.sc-metrics { margin-top: 16px; }

/* Гутери теми дають колонкам 0/8, 8/8, 8/0 — крайні панелі притиснуті до країв, а
   середня на 16px вужча. Замінюємо на ту саму сітку, що в картках серверів. */
.sc-metrics-row .container > .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sc-metrics-row .container > .row > .col { width: auto; max-width: none; padding: 0; }

@media (max-width: 1000px) {
    .sc-metrics-row .container > .row { grid-template-columns: 1fr; }
}

.server-console .t-Region:not(.t-Region--noUI) {
    background: oklch(20% 0.006 260);
    border: 1px solid oklch(27% 0.008 260);
    border-radius: 3px;
    box-shadow: none;
}

.server-console .t-Region--noUI { background: transparent; border: 0; }

.server-console .t-Region-header {
    background: transparent;
    border-bottom: 1px solid oklch(27% 0.008 260);
    padding: 10px 16px;
}

/* Шапку роздували власні падінги теми: 12px на блоці заголовка і 8px на контейнері
   поля — через них панель із селектом діапазону виходила вищою за сусідні. Знімаємо
   їх, і обидва блоки стають по 24px (висота рядка = висота селекта). */
.server-console .t-Region-headerItems { min-height: 0; padding: 0; }
.server-console .t-Region-header .t-Form-fieldContainer { margin: 0; padding: 0; min-height: 0; }
.server-console .t-Region-header .t-Form-inputContainer { padding: 0; }
.server-console .t-Region-header .t-Form-itemWrapper { min-height: 0; }
.server-console .t-Region-header .t-Form-labelContainer { display: none; }

/* Кнопки в шапці (Clear Errors) — під ту саму висоту 24px, що заголовок і селект */
.server-console .t-Region-header .t-Button {
    height: 24px;
    min-height: 0;
    padding: 0 10px;
    font-size: 12px;
    line-height: 22px;
}

.server-console .t-Region-header select {
    height: 24px;
    padding: 2px 24px 2px 8px;
    font-size: 12px;
    background: oklch(18% 0.006 260);
    border: 1px solid oklch(32% 0.01 260);
    border-radius: 3px;
    color: oklch(88% 0.004 260);
}

/* Нижні краї панелей у ряду мають збігатися навіть якщо вміст різної висоти */
.sc-metrics-row .t-Region { height: 100%; }

.server-console .t-Region--noUI > .t-Region-header { border-bottom: 0; padding: 0; }

.server-console .t-Region-title {
    font-size: 13px;
    font-weight: 600;
    color: oklch(75% 0.006 260);
    text-transform: none;
    letter-spacing: 0;
}

/* Звіти сюди не входять: у них поля дають самі комірки, див. .sc-report нижче */
.server-console .t-Region:not(.t-Region--noUI):not(.sc-report) .t-Region-body { padding: 14px 16px; }

/* Звіти помилок: та сама щільність і палітра, що в списках консолі.
   Тіло без падінгу, а поля дають крайні комірки — інакше текст першої колонки
   стоїть на 12px правіше за заголовок панелі. */
.sc-report .t-Region-body { padding: 0; }

.sc-report .t-Report-report th:first-child,
.sc-report .t-Report-report td:first-child { padding-left: 16px; }

.sc-report .t-Report-report th:last-child,
.sc-report .t-Report-report td:last-child { padding-right: 16px; }

.sc-report .t-Report-pagination { padding: 8px 16px; }

.server-console .t-Report-report { font-size: 12px; }

.server-console .t-Report-report th {
    background: transparent;
    color: oklch(54% 0.006 260);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid oklch(30% 0.01 260);
    padding: 7px 12px;
}

.server-console .t-Report-report td {
    color: oklch(82% 0.004 260);
    border-bottom: 1px solid oklch(24% 0.007 260);
    padding: 7px 12px;
}

.server-console .t-Report-report tr:hover td { background: oklch(23% 0.008 260); }
.server-console .t-Report-pagination { font-size: 11px; color: oklch(58% 0.006 260); }

/* --- статус --------------------------------------------------------------- */

.sc-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .5rem;
    border-radius: 20px;
    font-size: 11px;
}

.sc-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.sc-status--online  { color: var(--sc-online);  background: color-mix(in oklch, var(--sc-online) 15%, transparent); }
.sc-status--offline { color: var(--sc-offline); background: color-mix(in oklch, var(--sc-offline) 15%, transparent); }
.sc-status--unknown { color: var(--sc-faint);   background: color-mix(in oklch, var(--sc-faint) 20%, transparent); }

/* --- смужки CPU / RAM ------------------------------------------------------ */

.sc-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sc-muted);
    margin-bottom: .1875rem;
}

.sc-meter { height: 5px; background: var(--sc-panel-2); border-radius: 3px; overflow: hidden; }
.sc-meter > span { display: block; height: 100%; background: var(--sc-accent); }

/* Поріг 85% з PERFORMANCE_TUNING.md: вище GameThread починає губити тіки */
.sc-meter--warn > span { background: var(--sc-warn); }
.sc-meter--crit > span { background: var(--sc-offline); }

/* Метрики нема — тире, а не 0% */
.sc-none { color: var(--sc-faint); }

/* --- кнопки дій ------------------------------------------------------------ */

.sc-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; }

.sc-btn {
    font-size: 11px;
    padding: .25rem .5rem;
    border-radius: 4px;
    background: var(--sc-panel-2);
    color: var(--sc-muted);
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
}

.sc-btn:hover { background: var(--sc-line); color: var(--sc-text); }
.sc-btn--start { background: color-mix(in oklch, var(--sc-online) 15%, transparent); color: var(--sc-online); }
.sc-btn--stop  { background: color-mix(in oklch, var(--sc-offline) 15%, transparent); color: var(--sc-offline); }

/* --- спільне для всіх Cards-регіонів консолі ------------------------------- */

/* Порожній стан APEX — велика ілюстрація з лупою. Для бічних списків це занадто:
   лишаємо тільки текст. */
.server-console .a-GV-noDataMsg,
.server-console .a-GV-moreDataMsg { padding: .75rem 0; }
.server-console .a-GV-altMessage-icon { display: none; }
.server-console .a-GV-altMessage-text { font-size: 12px; color: var(--sc-faint); }

.server-console .t-CardsRegion { background: transparent; }
.server-console .a-CardView-items { gap: 0; }

/* Заголовок регіону лишається в DOM як орієнтир для скрінрідера, але на екрані
   зайвий: назву блоку малює сама панель. t-CardsRegion--hideHeader його не знімає. */
.server-console .t-CardsRegion-title { display: none; }

/* --- картки серверів (стор. 50) -------------------------------------------- */

.sc-cards .a-CardView-items--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sc-cards .a-CardView-item { width: auto; margin: 0; padding: 0; }

.sc-cards .a-CardView {
    height: 100%;
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 3px;
    cursor: pointer;
}

.sc-cards .a-CardView-body { padding: 0; }

/* Заголовок картки лишається лише як aria-мітка (без нього APEX бере на мітку копію
   тіла): назву й стан малює server_card_html усередині тіла. */
.sc-cards .a-CardView-header { display: none; }

/* Клікабельна вся картка: посилання розтягнуте на неї, кнопок усередині немає */
.sc-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.sc-card-link:hover { color: inherit; text-decoration: none; }
.sc-cards .a-CardView:hover { border-color: oklch(36% 0.012 260); }

@media (max-width: 1000px) {
    .sc-cards .a-CardView-items--grid { grid-template-columns: 1fr; }
}

.sc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid var(--sc-line);
}

.sc-card-id { display: flex; align-items: center; gap: 8px; }
.sc-card-name { font-size: 14px; font-weight: 600; }
.sc-card-state { font-size: 11.5px; }

.sc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sc-dot--online,  .sc-card-state--online  { background: oklch(68% 0.15 145); }
.sc-dot--offline, .sc-card-state--offline { background: oklch(60% 0.17 25); }
.sc-dot--unknown, .sc-card-state--unknown { background: oklch(73% 0.13 80); }

/* Підпис стану — тільки колір тексту, фон лишається картці */
.sc-card-state { background: transparent !important; }
.sc-card-state--online  { color: oklch(70% 0.13 145); }
.sc-card-state--offline { color: oklch(66% 0.15 25); }
.sc-card-state--unknown { color: oklch(73% 0.12 80); }

.sc-card-body { padding: 14px 16px; }

.sc-pairs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: 12px;
}

.sc-k { color: oklch(56% 0.006 260); }
.sc-v { color: oklch(85% 0.004 260); }

.sc-meters { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.sc-meter-head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: oklch(56% 0.006 260);
    margin-bottom: 3px;
}

.sc-meter { height: 5px; background: oklch(27% 0.008 260); border-radius: 3px; overflow: hidden; }
.sc-meter > span { display: block; height: 100%; }

/* --- меню дій ⋮ ------------------------------------------------------------- */

.sc-menu-wrap { position: relative; }

.sc-menu-btn {
    background: transparent;
    border: 1px solid oklch(32% 0.01 260);
    color: oklch(65% 0.006 260);
    border-radius: 3px;
    width: 26px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.sc-menu {
    position: absolute;
    right: 0;
    top: 28px;
    background: oklch(23% 0.008 260);
    border: 1px solid oklch(32% 0.01 260);
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    min-width: 170px;
    z-index: 20;
    overflow: hidden;
}

.sc-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 13px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid oklch(27% 0.008 260);
    color: oklch(85% 0.004 260);
    font-size: 12px;
    cursor: pointer;
}

.sc-menu-item:hover { background: oklch(27% 0.01 260); }

/* ============================================================================
   Сторінка 60 — сервер
   Кожна панель приїжджає одним HTML-блоком із PL/SQL, тож регіон Cards тут лише
   транспорт: його власне оформлення знімається класом sc-panel-region.
   ========================================================================== */

/* Регіон — лише транспорт: власні відступи теми з'їдають зазор між панелями,
   а порожній регіон банерів через них лишає смугу під шапкою. */
.sc-panel-region { margin: 0; padding: 0; }
.sc-panel-region .a-TMV-body { min-height: 0; }
.sc-panel-region .a-CardView-items { padding: 0; }

.sc-panel-region .a-CardView-items--grid { display: block; }
.sc-panel-region .a-CardView-item { width: auto; margin: 0; padding: 0; }
.sc-panel-region .a-CardView { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.sc-panel-region .a-CardView-body { padding: 0; }

/* Заголовок картки потрібен лише як aria-мітка: без нього APEX бере на мітку копію
   тіла — а це дубль розмітки й другий елемент із тим самим id. На екрані ховаємо. */
.sc-panel-region .a-CardView-header { display: none; }

/* --- панель ------------------------------------------------------------------ */

.sc-panel {
    background: oklch(20% 0.006 260);
    border: 1px solid oklch(27% 0.008 260);
    border-radius: 3px;
}

.sc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid oklch(27% 0.008 260);
    /* Заголовок компонентних панелей приходить голим текстом із title регіону:
       APEX не дає HTML у заголовку Template Component. Тому типографіка живе тут,
       а .sc-panel-title лишається для панелей, які ще малює PL/SQL. */
    font-size: 13px;
    font-weight: 600;
    color: oklch(75% 0.006 260);
}

.sc-panel-title { font-size: 13px; font-weight: 600; color: oklch(75% 0.006 260); }
.sc-panel-note  { font-size: 11px; color: oklch(52% 0.006 260); }
.sc-panel-body  { padding: 8px 16px 12px; }
.sc-scroll-220  { max-height: 220px; overflow-y: auto; }

.sc-empty { font-size: 12px; color: oklch(52% 0.006 260); padding: 6px 0; }
.sc-empty--center { text-align: center; padding: 20px 0; }

/* --- шапка сервера ------------------------------------------------------------ */

.sc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid oklch(28% 0.008 260);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.sc-head-name {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: oklch(85% 0.004 260);
    margin-bottom: 5px;
}

.sc-head-state  { display: flex; align-items: center; gap: 6px; }
.sc-head-status { font-size: 12px; }
.sc-head-status--online  { color: oklch(70% 0.13 145); }
.sc-head-status--offline { color: oklch(66% 0.15 25); }
.sc-head-status--unknown { color: oklch(73% 0.12 80); }

.sc-head-actions { display: flex; gap: 8px; position: relative; }

.sc-btn-ghost, .sc-btn-accent {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
}

.sc-btn-ghost  { background: transparent; border: 1px solid oklch(34% 0.01 260); color: oklch(72% 0.006 260); }
.sc-btn-ghost:hover { color: oklch(88% 0.004 260); text-decoration: none; }
.sc-btn-accent { background: oklch(40% 0.09 235); border: 1px solid oklch(46% 0.11 235); color: #fff; font-weight: 500; }

.sc-menu--head { top: 34px; min-width: 180px; border-radius: 4px; }
.sc-menu--head .sc-menu-item { padding: 8px 14px; font-size: 12.5px; }

/* --- банери підтвердження й результату ---------------------------------------- */

.sc-banner { border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; }
.sc-banner[hidden] { display: none; }

.sc-banner--confirm {
    background: oklch(24% 0.03 40);
    border: 1px solid oklch(40% 0.08 40);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sc-banner-text { font-size: 12.5px; color: oklch(90% 0.02 60); }
.sc-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }

.sc-b-cancel, .sc-b-stop {
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

.sc-b-cancel { background: transparent; border: 1px solid oklch(48% 0.02 60); color: oklch(86% 0.02 60); }
.sc-b-stop   { background: oklch(52% 0.17 25); border: 1px solid oklch(52% 0.17 25); color: #fff; font-weight: 600; }

.sc-banner--result {
    background: oklch(21% 0.008 260);
    border: 1px solid oklch(28% 0.01 260);
    border-left: 3px solid oklch(58% 0.15 235);
    border-radius: 3px;
    padding: 9px 14px;
    font-size: 12px;
    color: oklch(82% 0.004 260);
}

.sc-banner--result.is-error { border-left-color: oklch(60% 0.17 25); }

/* Форма дії над гравцем — той самий набір полів, що в модалці стор. 30 */
.sc-banner--action {
    background: oklch(21% 0.008 260);
    border: 1px solid oklch(28% 0.01 260);
    border-left: 3px solid oklch(58% 0.15 235);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-pa-title  { font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.sc-pa-fields { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }

.sc-pa-reason, .sc-pa-interval, .sc-pa-msg {
    background: oklch(18% 0.006 260);
    border: 1px solid oklch(32% 0.01 260);
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 12px;
    color: oklch(88% 0.004 260);
}

.sc-pa-reason { max-width: 340px; }
.sc-pa-msg    { flex: 1; min-width: 180px; }

.sc-b-run {
    background: oklch(40% 0.09 235);
    border: 1px solid oklch(46% 0.11 235);
    color: #fff;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* --- сітка 1.6fr / 1fr --------------------------------------------------------- */

/* .row теми — це вже CSS-сітка на 12 колонок, а .col-8/.col-4 у ній лише span.
   Тому переозначуємо доріжки під 1.6fr/1fr і саджаємо колонки явно: інакше span 8
   не вміщується у дві доріжки й друга колонка їде в наступний ряд. */
.sc-detail-grid > .container > .row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
}

.sc-detail-grid > .container > .row > .col:nth-child(1) { grid-column: 1 / 2; }
.sc-detail-grid > .container > .row > .col:nth-child(2) { grid-column: 2 / 3; }

.sc-detail-grid > .container,
.sc-col > .container { padding: 0; max-width: none; }

.sc-detail-grid > .container > .row,
.sc-col > .container > .row { margin: 0; }

/* Усередині колонки кожен підрегіон — окремий .row; flex на .container тема перебиває,
   тому зазор ставимо сусіднім рядкам напряму (після скидання margin вище). */
.sc-col > .container > .row + .row { margin-top: 16px; }

.sc-detail-grid > .container > .row > .col,
.sc-col > .container > .row > .col { width: auto; max-width: none; padding: 0; }

@media (max-width: 1100px) {
    .sc-detail-grid > .container > .row { grid-template-columns: 1fr; }
}

/* --- шапка матчу ----------------------------------------------------------------- */

/* Фон — скрін поточної мапи, притемнений градієнтом у самому style. Панель матчу
   тримає і шапку, і список гравців, тому власного заголовка в неї немає. */
.sc-match-panel .sc-match-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid oklch(27% 0.008 260);
    border-radius: 3px 3px 0 0;
}

.sc-match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sc-match-team--2 { justify-content: flex-end; text-align: right; }

.sc-match-flags { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sc-match-flags img { height: 40px; width: auto; }

.sc-match-text { display: flex; flex-direction: column; min-width: 0; }
.sc-match-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.sc-match-unit { font-size: 11px; color: oklch(70% 0.006 260); }

.sc-match-center { text-align: center; flex-shrink: 0; padding: 0 12px; }

.sc-match-vs { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.sc-match-count { font-size: 24px; font-weight: 700; letter-spacing: .02em; }
.sc-match-vs-label { font-size: 12px; font-weight: 600; color: oklch(62% 0.006 260); }

.sc-match-layer   { font-size: 11px; color: oklch(72% 0.006 260); margin-top: 3px; }
.sc-match-tickets { font-size: 10.5px; color: oklch(58% 0.006 260); margin-top: 2px; }

/* --- команди, сквади, гравці ----------------------------------------------------- */

.sc-teams { display: flex; gap: 20px; padding: 14px 16px; }
.sc-team  { flex: 1; min-width: 0; }

.sc-squad { background: oklch(22% 0.008 260); border-radius: 3px; padding: 6px 10px; margin-bottom: 8px; }

.sc-squad-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.sc-squad-name {
    font-size: 10.5px;
    color: oklch(62% 0.006 260);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sc-squad-id {
    font-size: 10px;
    color: oklch(48% 0.006 260);
    font-family: ui-monospace, Menlo, monospace;
}

/* Шапка скваду відкриває меню дій — та сама поведінка, що в рядка гравця.
   Атрибут act ставить PL/SQL лише справжнім сквадам, тож Unassigned лишається текстом. */
.sc-squad-head[act] { cursor: pointer; }
.sc-squad-head[act]:hover .sc-squad-name { color: oklch(82% 0.006 260); }
.sc-squad-head[act]:focus-visible {
    outline: 1px solid var(--sc-accent);
    outline-offset: 2px;
}

.sc-player-wrap { position: relative; }

.sc-player {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    background: transparent;
    border: 0;
    font-size: 12px;
    color: oklch(85% 0.004 260);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.sc-player-main { display: flex; align-items: center; gap: 5px; overflow: hidden; min-width: 0; }
.sc-player-main .fa { flex-shrink: 0; font-size: 12px; }
.sc-player-main img { height: 18px; width: auto; flex-shrink: 0; }
.sc-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-player-role { color: oklch(54% 0.006 260); font-size: 10.5px; }
.sc-player-time { color: oklch(55% 0.006 260); flex-shrink: 0; padding-left: 8px; }

/* Адміни й модератори помітні в списку — той самий прийом, що на ростері */
.sc-player-staff { color: oklch(66% 0.17 25); font-weight: 600; }

a.sc-menu-item { text-decoration: none; }
a.sc-menu-item:hover { text-decoration: none; }

.sc-menu--player { left: 0; right: auto; top: 26px; min-width: 160px; z-index: 30; }
.sc-menu--msg    { left: 0; right: auto; top: 100%; min-width: 150px; z-index: 30; }
.sc-menu--squad  { left: 0; right: auto; top: 20px; min-width: 170px; z-index: 30; }

/* Відкрите меню лежить окремим шаром поверх сторінки: і Cards-регіон, і тіло чату
   скролять свій вміст, тож усередині них меню обрізалося б. Координати ставить JS. */
.sc-menu--float {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 9999;
}

/* --- прості списки: черга, адміни ------------------------------------------------ */

.sc-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid oklch(24% 0.007 260);
    font-size: 12px;
}

.sc-row:last-child { border-bottom: 0; }
.sc-row-side { color: oklch(55% 0.006 260); }

/* --- чат -------------------------------------------------------------------------- */

.sc-chat-head { flex-wrap: wrap; gap: 8px; }
.sc-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.sc-chip {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    color: oklch(65% 0.006 260);
    border: 1px solid oklch(34% 0.01 260);
}

.sc-chip.is-on { background: oklch(40% 0.09 235); color: #fff; }

.sc-chat-body {
    padding: 12px 14px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Канали ховає клас на панелі — перемикання чипсів не ганяє запит і не збиває скрол */
.sc-chat-panel.off-ChatAll   .sc-ch-ChatAll,
.sc-chat-panel.off-ChatTeam  .sc-ch-ChatTeam,
.sc-chat-panel.off-ChatSquad .sc-ch-ChatSquad,
.sc-chat-panel.off-ChatAdmin .sc-ch-ChatAdmin { display: none; }

.sc-msg-row { display: flex; justify-content: flex-start; }
.sc-msg-row--right { justify-content: flex-end; }
.sc-msg-wrap { position: relative; max-width: 90%; }

.sc-msg {
    background: oklch(22% 0.008 260);
    border-left: 3px solid oklch(70% 0.006 260);
    border-radius: 3px;
    padding: 6px 10px;
}

.sc-msg--team1     { border-left-color: oklch(70% 0.10 235); }
.sc-msg--team2     { border-left-color: oklch(72% 0.12 70); }
.sc-msg--admin     { border-left-color: oklch(72% 0.15 25); }
.sc-msg--broadcast { border-left-color: oklch(72% 0.15 60); }

.sc-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }

.sc-msg-who {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    color: oklch(70% 0.006 260);
}

.sc-msg--team1 .sc-msg-who     { color: oklch(70% 0.10 235); }
.sc-msg--team2 .sc-msg-who     { color: oklch(72% 0.12 70); }
.sc-msg--admin .sc-msg-who     { color: oklch(72% 0.15 25); }
.sc-msg--broadcast .sc-msg-who { color: oklch(72% 0.15 60); }

.sc-msg-time { font-size: 9.5px; color: oklch(50% 0.006 260); }
.sc-msg-text { font-size: 12px; color: oklch(85% 0.004 260); word-break: break-word; }

.sc-chat-input {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid oklch(27% 0.008 260);
}

.sc-chat-text {
    flex: 1;
    min-width: 0;
    background: oklch(18% 0.006 260);
    border: 1px solid oklch(32% 0.01 260);
    border-radius: 3px;
    padding: 7px 10px;
    font-size: 12px;
    color: oklch(88% 0.004 260);
}

/* --- журнал дій -------------------------------------------------------------------- */

.sc-log-panel { background: oklch(15% 0.005 260); overflow: hidden; }
.sc-log-panel .sc-panel-head { background: oklch(20% 0.006 260); }

.sc-log-body {
    padding: 10px 14px;
    font-family: Menlo, Consolas, "SF Mono", ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.7;
    height: 220px;
    overflow-y: auto;
}

.sc-log-row { white-space: nowrap; overflow-x: auto; }

.sc-log-time   { color: oklch(48% 0.006 260); }
.sc-log-action { color: oklch(82% 0.004 260); }
.sc-log-by     { color: oklch(58% 0.006 260); }
.sc-log-result { color: oklch(52% 0.006 260); }

.sc-log-status--done      { color: oklch(72% 0.13 150); }
.sc-log-status--running   { color: oklch(72% 0.11 235); }
.sc-log-status--pending   { color: oklch(66% 0.008 260); }
.sc-log-status--error     { color: oklch(70% 0.15 25); }
.sc-log-status--cancelled { color: oklch(54% 0.008 260); }

/* --- ігрових даних немає ------------------------------------------------------------ */

.sc-nodata {
    background: oklch(20% 0.006 260);
    border: 1px dashed oklch(32% 0.01 260);
    border-radius: 3px;
    padding: 20px;
    margin-bottom: 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sc-nodata-icon  { width: 30px; height: 30px; border-radius: 3px; background: oklch(26% 0.01 260); flex-shrink: 0; }
.sc-nodata-title { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.sc-nodata-text  { font-size: 12px; color: oklch(60% 0.006 260); line-height: 1.5; max-width: 620px; }

/* ================================================================================
   Профіль гравця (стор. 70). Палітра й панелі спільні з консоллю — тут лише
   те, чого нема в блоках вище. Макет: claude designs/Player Profile (standalone).html
   ================================================================================ */

/* Забанений — третій стан пілюлі поруч з online/offline */
.sc-status--banned { color: var(--sc-offline); background: color-mix(in oklch, var(--sc-offline) 15%, transparent); }

/* --- крихти -------------------------------------------------------------------- */

.pp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: oklch(60% 0.006 260);
    padding: 12px 16px 0;
    margin-bottom: 6px;
}

/* Сторінка без запису в хлібних крихтах (логін) — APEX віддає порожній <ul>, а обгортка
   все одно займає місце */
.pp-crumbs:has(.t-Breadcrumb:empty) { display: none; }

/* Крихти малює рідний компонент APEX на глобальній сторінці, тож ті самі стилі
   накладаємо на його розмітку: <ul class="t-Breadcrumb"> у нашій обгортці .pp-crumbs.
   Поточний пункт APEX віддає як <h1> — гасимо його заголовкову типографіку. */
.pp-crumbs .t-Breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-crumbs .t-Breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* UT малює роздільник "\\" після КОЖНОГО пункту: правило, що ховає його в останнього,
   живе під .t-BreadcrumbRegion, а в нас регіон на blank-with-attributes. Гасимо їхній,
   ставимо свій — лише між пунктами. */
.pp-crumbs .t-Breadcrumb-item::after { content: none; }

.pp-crumbs .t-Breadcrumb-item + .t-Breadcrumb-item::before {
    content: "›";
    color: oklch(40% 0.006 260);
}

.pp-crumbs .t-Breadcrumb-label {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
}

.pp-crumbs .t-Breadcrumb-item.is-active .t-Breadcrumb-label { color: oklch(88% 0.004 260); }
.pp-crumbs a.t-Breadcrumb-label:hover { color: oklch(85% 0.004 260); }

.pp-crumbs a       { color: inherit; text-decoration: none; }
.pp-crumbs a:hover { color: oklch(85% 0.004 260); }
.pp-crumb-sep      { color: oklch(40% 0.006 260); }
.pp-crumb-cur      { color: oklch(88% 0.004 260); }
.pp-crumbs-note    { margin-left: auto; font-size: 11px; color: oklch(52% 0.006 260); }

/* --- шапка профілю -------------------------------------------------------------- */

.pp-head {
    background: oklch(20.5% 0.006 260);
    border: 1px solid oklch(28% 0.008 260);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.pp-head-main { display: flex; gap: 14px; min-width: 0; }
.pp-head-side { display: flex; flex-direction: column; align-items: flex-end; }

.pp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: oklch(26% 0.008 260);
}

.pp-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(45% 0.03 260);
    color: oklch(15% 0.005 260);
    font-size: 20px;
    font-weight: 700;
}

.pp-nick { font-size: 18px; font-weight: 600; margin-bottom: 6px; }

.pp-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: oklch(23% 0.008 260);
    border: 1px solid oklch(30% 0.01 260);
    border-radius: 12px;
    padding: 3px 9px;
    font-size: 11px;
    color: oklch(78% 0.004 260);
}

/* Адмін/модер сервера — акцентом, як червоні ніки в ростері */
.pp-badge--staff {
    background: oklch(40% 0.09 235);
    border-color: oklch(46% 0.11 235);
    color: #fff;
    font-weight: 600;
}

.pp-ids {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: oklch(65% 0.006 260);
}

.pp-id-row  { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pp-id-val  { color: oklch(85% 0.004 260); }
.pp-id-warn { color: var(--sc-warn); }

.pp-copy {
    background: transparent;
    border: none;
    color: oklch(55% 0.006 260);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}

.pp-copy:hover   { color: oklch(85% 0.004 260); }
.pp-copy.is-done { color: var(--sc-online); }

.pp-link { color: oklch(60% 0.12 235); text-decoration: none; }
.pp-link:hover { color: oklch(74% 0.14 235); }

/* --- плитки показників ---------------------------------------------------------- */

.pp-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.pp-stat {
    background: oklch(20.5% 0.006 260);
    border: 1px solid oklch(28% 0.008 260);
    border-left: 2px solid oklch(70% 0.006 260);
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 0;
}

.pp-stat-label { font-size: 10.5px; color: oklch(60% 0.006 260); margin-bottom: 5px; }

/* Дати довші за числа — ріжемо, а не ламаємо сітку */
.pp-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: oklch(70% 0.006 260);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-stat--kills  { border-left-color: oklch(70% 0.14 235); }
.pp-stat--deaths { border-left-color: oklch(70% 0.16 25); }
.pp-stat--kd     { border-left-color: oklch(75% 0.13 90); }
.pp-stat--knocks { border-left-color: oklch(70% 0.12 300); }
.pp-stat--wounds { border-left-color: oklch(72% 0.14 150); }
.pp-stat--danger { border-left-color: oklch(70% 0.16 25); }
.pp-stat--last   { border-left-color: oklch(72% 0.15 155); }

.pp-stat--kills  .pp-stat-value { color: oklch(70% 0.14 235); }
.pp-stat--deaths .pp-stat-value { color: oklch(70% 0.16 25); }
.pp-stat--kd     .pp-stat-value { color: oklch(75% 0.13 90); }
.pp-stat--knocks .pp-stat-value { color: oklch(70% 0.12 300); }
.pp-stat--wounds .pp-stat-value { color: oklch(72% 0.14 150); }
.pp-stat--danger .pp-stat-value { color: oklch(70% 0.16 25); }
.pp-stat--last   .pp-stat-value { color: oklch(72% 0.15 155); font-size: 15px; }

/* --- тижневі графіки ------------------------------------------------------------ */

.pp-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

/* Кожен графік — окремий регіон у сітці APEX, а не дитина .pp-charts: гутера там
   немає, тож проміжок тримає сам блок, і тільки між сусідами. */
.server-console .row > .col > .pp-chart { margin-bottom: 16px; }
.server-console .row > .col:not(.col-start) > .pp-chart { margin-left: 10px; }

.pp-chart {
    background: oklch(20.5% 0.006 260);
    border: 1px solid oklch(28% 0.008 260);
    border-radius: 6px;
    padding: 12px 16px;
}

.pp-chart-title { font-size: 11px; color: oklch(56% 0.006 260); margin-bottom: 8px; }

.pp-chart-body {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
}

.pp-bar-pair { display: flex; gap: 2px; align-items: flex-end; height: 100%; flex: 1; }

.pp-bar {
    display: block;
    flex: 1;
    border-radius: 1px 1px 0 0;
    min-height: 1px;
}

.pp-bar--kills  { background: oklch(66% 0.14 235); }
.pp-bar--deaths { background: oklch(65% 0.17 25); }
.pp-bar--online { background: oklch(66% 0.14 235); }
.pp-bar--seed   { background: oklch(75% 0.13 90); }

/* --- спільна прокрутка панелей --------------------------------------------------- */

.pp-scroll { overflow-y: auto; }
.pp-scroll--160 { max-height: 160px; }
.pp-scroll--180 { max-height: 180px; }
.pp-scroll--200 { max-height: 200px; }
.pp-scroll--220 { max-height: 220px; }

.pp-scroll > .sc-empty { padding: 14px 16px; }

/* --- сесії ---------------------------------------------------------------------- */

.pp-sess {
    padding: 9px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    font-size: 11.5px;
    align-items: center;
}

.pp-sess:last-child { border-bottom: 0; }

.pp-sess-icon--active { color: oklch(72% 0.15 155); }
.pp-sess-icon--ended  { color: oklch(60% 0.006 260); }
.pp-sess-icon--kicked { color: oklch(70% 0.16 25); }

.pp-sess-dur { color: oklch(70% 0.006 260); }
.pp-sess-ip  { font-family: ui-monospace, Menlo, Consolas, monospace; color: oklch(60% 0.006 260); }
.pp-sess-sub { grid-column: 2 / 4; color: oklch(60% 0.006 260); }

/* --- бани ----------------------------------------------------------------------- */

.pp-ban {
    padding: 9px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}

.pp-ban:last-child { border-bottom: 0; }

.pp-ban-icon { margin-right: 5px; }
.pp-ban-icon--active   { color: oklch(70% 0.16 25); }
.pp-ban-icon--unbanned { color: oklch(72% 0.15 155); }
.pp-ban-icon--expired  { color: oklch(40% 0.006 260); }

.pp-ban-term { color: oklch(70% 0.006 260); }
.pp-ban-sub  { color: oklch(60% 0.006 260); margin-top: 2px; }

.pp-unban {
    background: transparent;
    border: 1px solid oklch(65% 0.17 25);
    color: oklch(70% 0.16 25);
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 10.5px;
    cursor: pointer;
    white-space: nowrap;
}

.pp-unban:hover { background: color-mix(in oklch, oklch(65% 0.17 25) 15%, transparent); }

/* --- адмін-журнал --------------------------------------------------------------- */

.pp-log {
    padding: 9px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    font-size: 11.5px;
}

.pp-log:last-child { border-bottom: 0; }

.pp-log-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pp-log-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-log-sub  { color: oklch(56% 0.006 260); margin-top: 3px; }
.pp-log-err  { color: oklch(70% 0.16 25); }

.pp-tag {
    background: oklch(23% 0.01 260);
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
    color: oklch(65% 0.006 260);
}

.pp-tag--KICK  { color: oklch(78% 0.13 80); }
.pp-tag--BAN   { color: oklch(70% 0.16 25); }
.pp-tag--WARN  { color: oklch(80% 0.14 80); }
.pp-tag--SWAP  { color: oklch(70% 0.12 235); }
.pp-tag--UNBAN { color: oklch(72% 0.15 155); }

.pp-state {
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.pp-state--done      { background: oklch(26% 0.05 150 / .5);  color: oklch(72% 0.13 150); }
.pp-state--running   { background: oklch(26% 0.05 235 / .5);  color: oklch(72% 0.11 235); }
.pp-state--pending   { background: oklch(28% 0.015 260 / .5); color: oklch(66% 0.008 260); }
.pp-state--error     { background: oklch(28% 0.08 25 / .5);   color: oklch(70% 0.15 25); }
.pp-state--cancelled { background: oklch(26% 0.008 260 / .5); color: oklch(54% 0.008 260); }

/* Порожній звіт APEX малює своїм блоком із великою лупою — у наших панелях і
   графіках це виглядає чужорідно, тож лишаємо самий текст у стилі .sc-empty. */
.server-console .a-TMV-noDataMsg,
.server-console .a-TMV-altMessage {
    display: block;
    padding: 6px 0;
    min-height: 0;
    background: none;
    border: 0;
}

.server-console .a-TMV-altMessage-icon { display: none; }

.server-console .a-TMV-noDataMsg,
.server-console .a-TMV-altMessage-text,
.server-console .a-TMV-altMessage-title {
    font-size: 12px;
    font-weight: 400;
    color: oklch(52% 0.006 260);
    text-align: left;
}

/* стан сесії тими самими пігулками, що й решта станів */
/* online — сесія триває; left — гра повідомила про вихід; dropped — гравець зник
   між знімками ростера, точного часу виходу в нас немає */
.pp-state--sess-online  { background: oklch(26% 0.05 150 / .5);  color: oklch(72% 0.13 150); }
.pp-state--sess-left    { background: oklch(26% 0.008 260 / .5); color: oklch(58% 0.008 260); }
.pp-state--sess-dropped { background: oklch(28% 0.05 70 / .5);   color: oklch(74% 0.12 70); }

/* види подій в Action log сторінки сервера */
.pp-state--kind-server { background: oklch(26% 0.05 235 / .5);  color: oklch(72% 0.11 235); }
.pp-state--kind-admin  { background: oklch(28% 0.08 25 / .5);   color: oklch(70% 0.15 25); }
.pp-state--kind-player { background: oklch(26% 0.008 260 / .5); color: oklch(60% 0.008 260); }
.pp-state--kind-bet    { background: oklch(28% 0.05 300 / .5);  color: oklch(74% 0.12 300); }
.pp-state--kind-coins  { background: oklch(28% 0.05 80 / .5);   color: oklch(78% 0.13 80); }
.pp-state--kind-match  { background: oklch(26% 0.05 150 / .5);  color: oklch(72% 0.13 150); }

.pp-state--ban-active   { background: oklch(28% 0.08 25 / .5);   color: oklch(70% 0.15 25); }
.pp-state--ban-unbanned { background: oklch(26% 0.05 150 / .5);  color: oklch(72% 0.13 150); }
.pp-state--ban-expired  { background: oklch(26% 0.008 260 / .5); color: oklch(54% 0.008 260); }

/* --- інтерактивні звіти у наших панелях ------------------------------------------
   Шаблон теми ховає шапку своєю preset-опцією t-IRR-region--hideHeader, тому назву
   регіону дає наш sc-panel. Тут лишається причесати саму таблицю під щільність
   решти сторінки. */

.pp-ir .sc-panel-body { padding: 0; }
.pp-ir .a-IRR-toolbar { padding: 8px 12px; background: transparent; border-bottom: 1px solid oklch(24% 0.007 260); }
.pp-ir .a-IRR-table   { font-size: 12px; }

.pp-ir .a-IRR-table th {
    background: transparent;
    color: oklch(54% 0.006 260);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid oklch(30% 0.01 260);
    padding: 7px 12px;
}

.pp-ir .a-IRR-table td {
    color: oklch(82% 0.004 260);
    border-bottom: 1px solid oklch(24% 0.007 260);
    padding: 7px 12px;
}

.pp-ir .a-IRR-table tr:hover td { background: oklch(23% 0.008 260); }
.pp-ir .a-IRR-paginationWrap    { padding: 6px 12px; font-size: 11px; }

/* --- зміни ніка / IP ------------------------------------------------------------- */

.pp-chg {
    padding: 8px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}

.pp-chg:last-child { border-bottom: 0; }

.pp-chg-type  { color: oklch(60% 0.006 260); width: 64px; flex-shrink: 0; }
.pp-chg-vals  { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.pp-chg-old   { color: oklch(60% 0.006 260); }
.pp-chg-arrow { color: var(--sc-warn); margin: 0 4px; }
.pp-chg-new   { color: oklch(90% 0.004 260); font-weight: 600; }
.pp-chg-date  { color: oklch(52% 0.006 260); flex-shrink: 0; }

/* --- whitelist (єдиний редагований блок) ----------------------------------------- */

.pp-wl-body { padding: 12px 16px; }
.pp-wl-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.pp-wl-toggle {
    width: 34px;
    height: 18px;
    border-radius: 9px;
    border: none;
    background: oklch(32% 0.01 260);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.pp-wl-toggle[aria-pressed="true"] { background: oklch(72% 0.15 155); }
.pp-wl-toggle:disabled { opacity: .5; cursor: not-allowed; }

.pp-wl-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
}

.pp-wl-toggle[aria-pressed="true"] .pp-wl-knob { left: 18px; }

.pp-wl-status          { font-size: 12px; }
.pp-wl-status--on      { color: oklch(72% 0.15 155); }
.pp-wl-status--off     { color: oklch(60% 0.006 260); }
.pp-wl-status--expired { color: var(--sc-warn); }

.pp-wl-label { font-size: 11px; color: oklch(60% 0.006 260); }

.pp-wl-date {
    flex: 1;
    background: oklch(18% 0.006 260);
    border: 1px solid oklch(32% 0.01 260);
    color: oklch(85% 0.004 260);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 11.5px;
}

.pp-wl-save {
    background: oklch(40% 0.09 235);
    border: 1px solid oklch(46% 0.11 235);
    color: #fff;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

/* Кнопка оживає лише після реальної зміни — інакше незрозуміло, що саме збережеться */
.pp-wl-save:disabled {
    background: oklch(23% 0.008 260);
    border-color: oklch(30% 0.01 260);
    color: oklch(45% 0.006 260);
    cursor: not-allowed;
}

.pp-wl-hist       { margin-top: 12px; padding-top: 10px; border-top: 1px solid oklch(26% 0.007 260); }
.pp-wl-hist-title { font-size: 10.5px; color: oklch(56% 0.006 260); margin-bottom: 6px; }
.pp-wl-hist-row   { font-size: 11px; color: oklch(62% 0.006 260); padding: 3px 0; }

/* --- коїни ----------------------------------------------------------------------- */

.pp-coins-total { padding: 12px 16px 4px; font-size: 22px; font-weight: 700; }

.pp-coin {
    padding: 6px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}

.pp-coin:last-child { border-bottom: 0; }
.pp-coin-main { min-width: 0; }

.pp-coin-src {
    background: oklch(23% 0.008 260);
    color: oklch(65% 0.006 260);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    margin-right: 6px;
}

.pp-coin-reason   { color: oklch(60% 0.006 260); }
.pp-coin-amt      { font-weight: 600; flex-shrink: 0; }
.pp-coin-amt--pos { color: oklch(72% 0.15 155); }
.pp-coin-amt--neg { color: oklch(70% 0.16 25); }

/* --- ставки ---------------------------------------------------------------------- */

.pp-bet-sum {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid oklch(26% 0.007 260);
}

.pp-sum-label      { font-size: 10px; color: oklch(56% 0.006 260); }
.pp-sum-value      { font-size: 14px; font-weight: 700; }
.pp-sum-value--pos { color: oklch(72% 0.15 155); }
.pp-sum-value--neg { color: oklch(70% 0.16 25); }

.pp-bet {
    padding: 7px 16px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}

.pp-bet:last-child { border-bottom: 0; }

.pp-bet-main  { min-width: 0; }
.pp-bet-sub   { color: oklch(56% 0.006 260); }
.pp-bet-right { text-align: right; flex-shrink: 0; }

.pp-state--bet-active    { background: oklch(26% 0.05 235 / .5);  color: oklch(72% 0.11 235); }
.pp-state--bet-won       { background: oklch(26% 0.05 150 / .5);  color: oklch(72% 0.13 150); }
.pp-state--bet-lost      { background: oklch(28% 0.08 25 / .5);   color: oklch(70% 0.15 25); }
.pp-state--bet-cancelled { background: oklch(26% 0.008 260 / .5); color: oklch(54% 0.008 260); }

.pp-bet-right .pp-state { display: inline-block; margin-bottom: 2px; }

.pp-bet-profit       { font-weight: 600; }
.pp-bet-profit--pos  { color: oklch(72% 0.15 155); }
.pp-bet-profit--neg  { color: oklch(70% 0.16 25); }
.pp-bet-profit--none { color: oklch(60% 0.006 260); }

.pp-awards       { padding: 10px 16px; border-top: 1px solid oklch(26% 0.007 260); }
.pp-awards-title { font-size: 10.5px; color: oklch(56% 0.006 260); margin-bottom: 6px; }
.pp-award        { font-size: 11px; color: oklch(62% 0.006 260); padding: 2px 0; }

/* --- чат гравця ------------------------------------------------------------------ */

/* Каркас панелі спільний (panel_html), тому відступ тіла вішаємо на саму панель чату */
.pp-chat-panel .pp-scroll { padding: 8px 16px; }

.pp-msg { padding: 6px 0; border-bottom: 1px solid oklch(24% 0.007 260); }
.pp-msg:last-child { border-bottom: 0; }
.pp-msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }

.pp-msg-type {
    background: oklch(23% 0.008 260);
    border-radius: 3px;
    padding: 1.5px 6px;
    font-size: 9.5px;
    font-weight: 600;
    color: oklch(65% 0.006 260);
}

.pp-msg-type--ChatAll   { color: oklch(70% 0.1 235); }
.pp-msg-type--ChatTeam  { color: oklch(72% 0.12 70); }
.pp-msg-type--ChatSquad { color: oklch(65% 0.1 300); }
.pp-msg-type--ChatAdmin { color: oklch(72% 0.15 25); }

.pp-msg-time { font-size: 10.5px; color: oklch(52% 0.006 260); }
.pp-msg-text { font-size: 12px; color: oklch(85% 0.004 260); word-break: break-word; }

/* Журнал у двох поданнях: список за замовчуванням, таблиця — за перемикачем у шапці */

.pp-log-style {
    background: transparent;
    border: 1px solid oklch(32% 0.01 260);
    color: oklch(60% 0.006 260);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 10.5px;
    cursor: pointer;
}

.pp-log-style:hover { color: oklch(85% 0.004 260); }

.pp-log-table { display: none; width: 100%; border-collapse: collapse; font-size: 11.5px; }

.pp-log-panel.is-table .pp-log-list  { display: none; }
.pp-log-panel.is-table .pp-log-table { display: table; }

.pp-log-table th {
    text-align: left;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: oklch(54% 0.006 260);
    border-bottom: 1px solid oklch(30% 0.01 260);
}

.pp-log-table td {
    padding: 6px 12px;
    border-bottom: 1px solid oklch(24% 0.007 260);
    vertical-align: middle;
}

.pp-log-table tbody tr:nth-child(even) td { background: oklch(21.5% 0.006 260); }

.pp-td-reason { color: oklch(70% 0.006 260); }
.pp-td-admin  { color: oklch(60% 0.006 260); }

/* Тег дії в таблиці стоїть сам по собі — правий відступ списку тут зайвий */
.pp-log-table .pp-tag { margin-right: 0; }

/* --- вузький екран --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .pp-charts { grid-template-columns: 1fr; }
    .pp-stats  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .pp-head      { flex-direction: column; }
    .pp-head-side { align-items: flex-start; }
    .pp-stats     { grid-template-columns: repeat(2, 1fr); }
}

/* --- сітка карток на Template Component (стор. 50) -------------------------- */

/* Той самий вигляд, що давали обгортки a-CardView, але без них: компонент віддає
   власну розмітку, і чіплятися до внутрішніх класів віджета більше не треба. */
.pp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pp-card {
    height: 100%;
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 3px;
    cursor: pointer;
}

.pp-card:hover { border-color: oklch(36% 0.012 260); }

@media (max-width: 1000px) {
    .pp-cards { grid-template-columns: 1fr; }
}