:root {
    color-scheme: light dark;
    /* страница vs поверхность карточки — небольшая разница даёт глубину без теней */
    --page: #f9f9f7;
    --surface: #fcfcfb;
    --surface-2: color-mix(in srgb, #0b0b0b 4%, var(--surface)); /* зебра/hover */
    --fg: #0b0b0b;
    --fg-secondary: #52514e;
    --fg-muted: #898781;
    --accent: #5865f2;
    --border: #e1e0d9;
    --border-strong: #c3c2b7;
    --error: #d03b3b;

    /* палитра для графиков (см. dataviz-скилл, референсный набор, порядок фиксирован) */
    --series-1: #2a78d6; /* blue */
    --series-2: #eb6834; /* orange */
    --series-3: #1baf7a; /* aqua */
    --series-1-track: #cde2fb;

    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-critical: #d03b3b;
}
@media (prefers-color-scheme: dark) {
    :root {
        --page: #0d0d0d;
        --surface: #1a1a19;
        --surface-2: color-mix(in srgb, #ffffff 5%, var(--surface));
        --fg: #ffffff;
        --fg-secondary: #c3c2b7;
        --fg-muted: #898781;
        --border: #2c2c2a;
        --border-strong: #383835;
        --error: #e66767;

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-1-track: #184f95;

        --status-good: #0ca30c;
        --status-warning: #fab219;
        --status-critical: #d03b3b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--page);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6em; margin: 0 0 0.6em; }
h2 { font-size: 1.15em; margin: 1.75em 0 0.6em; color: var(--fg); }
h1, h2 { letter-spacing: -0.01em; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75em 1.5em;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar .brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--fg);
}

.topbar nav { display: flex; align-items: center; gap: 0.35em; }
.topbar nav a {
    padding: 0.4em 0.7em;
    border-radius: 6px;
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
}
.topbar nav a:hover { background: var(--surface-2); color: var(--fg); }

.nav-dropdown { position: relative; }
.nav-dropdown summary {
    padding: 0.4em 0.7em;
    border-radius: 6px;
    color: var(--fg-secondary);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.nav-dropdown summary:hover { background: var(--surface-2); color: var(--fg); }
.nav-dropdown[open] summary { background: var(--surface-2); color: var(--fg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.35em);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 10em;
    padding: 0.35em;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
.nav-dropdown-menu a {
    padding: 0.45em 0.6em;
    border-radius: 6px;
    color: var(--fg-secondary);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--fg); }

.topbar nav .user {
    margin-left: 0.5em;
    padding-left: 0.9em;
    border-left: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 0.9em;
}

main {
    max-width: 40em;
    margin: 2em auto;
    padding: 0 1.5em 4em;
}
main.wide {
    max-width: 78em;
}

.button, button {
    display: inline-block;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.6em 1.2em;
    text-decoration: none;
    cursor: pointer;
    font-size: 1em;
}

.error { color: var(--error); }

form {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    max-width: 20em;
}
form label { display: flex; flex-direction: column; gap: 0.25em; }
form label.checkbox { flex-direction: row; align-items: center; gap: 0.5em; }
input[type="text"], input[type="number"], input[type="search"], select {
    padding: 0.5em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--fg);
    font: inherit;
}
select { background: var(--page); }

.menu { list-style: none; padding: 0; }
.menu li { margin-bottom: 0.5em; }

/* ---- Карточки-разделы на главной ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;
    padding: 0;
    list-style: none;
}
.card-grid li { margin: 0; height: 100%; }
.card {
    display: block;
    height: 100%;
    padding: 1.25em;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--fg);
    background: var(--surface);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .card-title { font-weight: 600; display: flex; align-items: center; gap: 0.5em; }
.card .card-desc { margin-top: 0.35em; color: var(--fg-muted); font-size: 0.9em; }

/* ---- Статы-плашки ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
    gap: 1em;
    margin-bottom: 1.75em;
}
.stat-tile {
    padding: 1em 1.25em;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.stat-tile .stat-value {
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: proportional-nums;
}
.stat-tile .stat-label { color: var(--fg-muted); font-size: 0.85em; margin-top: 0.2em; }
.stat-tile.status-danger .stat-value { color: var(--status-critical); }

/* ---- Значки/бейджи ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}
.badge-ok { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.badge-neutral { background: var(--surface-2); color: var(--fg-secondary); }
.badge-danger { background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }

/* ---- Бейджи по типу изменения на /activity (services/dashboard_data.py::ACTIVITY_ACTION_CLASSES) ---- */
.badge-gear { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--series-1); }
.badge-relic { background: color-mix(in srgb, var(--series-3) 16%, transparent); color: var(--series-3); }
.badge-star { background: color-mix(in srgb, var(--status-warning) 20%, transparent); color: var(--status-warning); }
.badge-zeta { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge-omicron { background: color-mix(in srgb, var(--series-2) 16%, transparent); color: var(--series-2); }
.badge-unlock { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }

/* ---- Секция-карточка (таблица/график в рамке) ---- */
.panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 1.25em;
    margin-bottom: 1.75em;
}
.panel-title {
    font-weight: 600;
    margin-bottom: 0.9em;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}
.panel-title .panel-hint { font-weight: 400; color: var(--fg-muted); font-size: 0.85em; }

/* ---- Таблицы данных: поиск, скролл, сортировка ---- */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-bottom: 0.9em;
    flex-wrap: wrap;
}
.table-toolbar input[type="search"] {
    padding: 0.55em 0.8em;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--page);
    color: var(--fg);
    min-width: 16em;
}
.table-toolbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
table.data th, table.data td {
    text-align: left;
    padding: 0.7em 0.9em;
}
table.data thead th {
    background: var(--surface-2);
    color: var(--fg-secondary);
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border-strong);
    position: sticky;
    top: 0;
}
table.data thead th[data-sort]:hover { color: var(--accent); }
table.data th .sort-arrow { opacity: 0.5; margin-left: 0.3em; font-size: 0.85em; }
table.data tbody tr { border-bottom: 1px solid var(--border); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fg) 2%, transparent); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.muted { color: var(--fg-muted); }
/* ---- Вторичная строка в ячейке таблицы (напр. сырой ID под резолвленным именем) ---- */
.cell-sub { display: block; color: var(--fg-muted); font-size: 0.8em; margin-top: 0.15em; }
.empty-state {
    padding: 2.5em 1.5em;
    text-align: center;
    color: var(--fg-muted);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
}

/* ---- Мини-тултип на наведение (для баров/точек графиков) ---- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -6px);
    background: var(--fg);
    color: var(--surface);
    padding: 0.35em 0.65em;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ---- Горизонтальный бар-чарт (ранжирование по величине, один hue) ---- */
.bar-chart { display: flex; flex-direction: column; gap: 0.55em; }
.bar-chart-row { display: grid; grid-template-columns: minmax(7em, 12em) 1fr auto; align-items: center; gap: 0.75em; }
.bar-chart-name { font-size: 0.92em; color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-chart-track { position: relative; height: 16px; border-radius: 4px; background: var(--series-1-track); overflow: hidden; }
.bar-chart-fill {
    position: absolute; inset: 0 auto 0 0;
    height: 100%;
    background: var(--series-1);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.bar-chart-fill.regressed { background: var(--status-critical); }
.bar-chart-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92em; min-width: 3.5em; text-align: right; }

/* ---- Стековый бар (композиция по категориям, часть-от-целого) ---- */
.stack-legend { display: flex; gap: 1.25em; flex-wrap: wrap; margin-bottom: 1em; font-size: 0.85em; color: var(--fg-secondary); }
.stack-legend-item { display: inline-flex; align-items: center; gap: 0.4em; }
.stack-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.stack-bar-row { display: grid; grid-template-columns: minmax(7em, 12em) 1fr auto; align-items: center; gap: 0.75em; margin-bottom: 0.55em; }
.stack-bar-name { font-size: 0.92em; color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack-bar-track { height: 16px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.stack-bar-fill-group { height: 100%; display: flex; }
.stack-bar-segment { height: 100%; transition: width 0.4s ease; }
.stack-bar-segment + .stack-bar-segment { margin-left: 2px; }
.stack-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92em; min-width: 2.5em; text-align: right; }

/* ---- Спарклайн (тренд в ячейке таблицы) ---- */
.sparkline { width: 68px; height: 22px; display: block; overflow: visible; }
.sparkline polyline { fill: none; stroke: var(--fg-muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline circle { fill: var(--series-1); }
.sparkline.regressed circle { fill: var(--status-critical); }
.sparkline-cell { display: flex; align-items: center; gap: 0.6em; justify-content: flex-end; }

/* ---- Линейный тренд-график (крупный, наверху страницы ТБ) ---- */
.trend-chart-wrap { width: 100%; }
.trend-chart-plot { position: relative; width: 100%; height: 120px; }
.trend-chart { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.trend-chart polyline { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-chart .trend-area { fill: var(--series-1); opacity: 0.08; stroke: none; }
/* Точки — обычные HTML-круги поверх SVG: у линии viewBox растягивается неравномерно
   под гибкую ширину контейнера, а <circle> внутри того же viewBox от такого растяжения
   превращается в эллипс. HTML-оверлей с border-radius:50% остаётся кругом всегда. */
.trend-dot {
    position: absolute;
    width: 10px; height: 10px;
    background: var(--series-1);
    border: 2px solid var(--surface);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.trend-chart-labels { display: flex; justify-content: space-between; margin-top: 0.4em; font-size: 0.78em; color: var(--fg-muted); }

/* ---- Конструктор (/mod-builder): форма из разнородных секций (обычные поля +
   сетка сетов + повторяемые строки статов) — колонка пошире дефолтной (20em). ---- */
.builder-form { max-width: 42em; gap: 1.25em; }
.builder-form label { max-width: 20em; }
.builder-form .form-block > span { display: block; margin-bottom: 0.5em; }

/* ---- Плейты: форма добавления требования (шире, в сетку, не колонка) ---- */
.requirement-form {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    align-items: flex-end;
    gap: 1em;
}
.requirement-form label { flex: 1 1 12em; min-width: 10em; }
.requirement-form button { flex: 0 0 auto; height: 2.6em; }

/* ---- Строчные мини-формы (переименовать / править требование) — <details>
   раскрывается в обычном потоке (не поповер: внутри .table-scroll оверфлоу
   обрезал бы position:absolute, т.к. overflow-x:auto неявно делает и
   overflow-y:auto — see MDN overflow shorthand), поэтому просто растягивает
   высоту строки/ячейки, что для table-layout безопасно. ---- */
.row-actions { display: flex; align-items: flex-start; gap: 0.75em; flex-wrap: wrap; }
.row-actions summary { list-style: none; cursor: pointer; }
.row-actions summary::-webkit-details-marker { display: none; }
.link-btn { color: var(--accent); font-size: 0.9em; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.row-actions details[open] { flex-basis: 100%; }
.inline-form {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    gap: 0.5em;
    align-items: center;
    margin-top: 0.5em;
    padding: 0.6em;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.inline-form input, .inline-form select {
    padding: 0.4em 0.5em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--fg);
}

.button-danger {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    padding: 0.35em 0.7em;
    font-size: 0.85em;
}
.button-danger:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }

/* ---- Поиск персонажа с выпадающим списком (добавление требования к плейту) ---- */
.unit-search { position: relative; }
.unit-search-input {
    width: 100%;
    padding: 0.5em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--page);
    color: var(--fg);
}
.unit-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16em;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    margin-top: 0.25em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.unit-search-results.open { display: block; }
.unit-search-result { padding: 0.5em 0.75em; cursor: pointer; font-size: 0.9em; }
.unit-search-result:hover, .unit-search-result.active { background: var(--surface-2); }
.unit-search-empty { padding: 0.5em 0.75em; color: var(--fg-muted); font-size: 0.85em; }

/* ---- Мера (доля от целого, одна полоса) ---- */
.meter { display: flex; align-items: center; gap: 0.75em; }
.meter-track { flex: 1; height: 10px; border-radius: 999px; background: var(--series-1-track); overflow: hidden; }
.meter-fill { height: 100%; background: var(--series-1); border-radius: 999px; transition: width 0.4s ease; }
.meter-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9em; min-width: 3em; text-align: right; }

/* ---- Лента активности гильдии (/activity): дата -> карточка игрока -> строки ---- */
.activity-date-header {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    text-align: center;
    margin: 1.75em 0 0.9em;
    position: relative;
}
.activity-date-header:first-child { margin-top: 0; }
.activity-date-header::before, .activity-date-header::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 5em);
    border-top: 1px solid var(--border);
}
.activity-date-header::before { left: 0; }
.activity-date-header::after { right: 0; }
.activity-player-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.9em 1.1em;
    margin-bottom: 0.75em;
}
.activity-player-name { font-weight: 700; font-size: 0.9em; margin-bottom: 0.5em; }
.activity-event-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.3em 0;
    font-size: 0.92em;
}
.activity-event-row + .activity-event-row { border-top: 1px dashed var(--border); }
.activity-unit-name { font-weight: 600; }
.activity-change { color: var(--fg-secondary); }
.activity-change strong { color: var(--fg); }

/* ---- Панель статуса синхронизации (/activity) ---- */
.sync-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75em;
    font-size: 0.88em;
    color: var(--fg-secondary);
}

/* ---- Конструктор (/mod-builder): 6 карточек-слотов модов (форма + выбранный primary-стат
   на ней) — один слот каждой формы у персонажа всегда ровно один. ---- */
.mod-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
    gap: 0.75em;
    max-width: none;
}
.mod-slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    padding: 0.75em 0.5em;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 0.15s ease;
}
.mod-slot-card.filled { border-color: var(--accent); }
.mod-slot-icon { color: var(--fg-muted); line-height: 0; }
.mod-slot-card.filled .mod-slot-icon { color: var(--accent); }
.mod-slot-label { font-size: 0.76em; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mod-slot-card select { width: 100%; font-size: 0.85em; padding: 0.35em; }

/* ---- Конструктор (/mod-builder): интерактивный выбор сетов — 8 строк с подписанным
   нужным количеством + живой счётчик "выбрано/6" (dashboard.js). ---- */
.mod-set-picker { max-width: 28em; }
.mod-set-rows { display: flex; flex-direction: column; gap: 0.4em; }
.mod-set-row { display: flex; align-items: center; gap: 0.6em; }
.mod-set-name { flex: 1 1 8em; }
.mod-set-need { flex: 0 0 auto; font-size: 0.78em; color: var(--fg-muted); }
.mod-set-row input[type="number"] { flex: 0 0 4.5em; }
.mod-set-total { margin-top: 0.6em; font-weight: 600; font-size: 0.9em; }
.mod-set-total.over-limit { color: var(--error); }

/* ---- Повторяемые строки формы (статы от модов на /mod-builder) — настоящая таблица,
   а не список карточек, ради компактности при нескольких строках. ---- */
.stat-rows-table { width: 100%; max-width: 30em; border-collapse: collapse; }
.stat-rows-table th {
    text-align: left;
    font-size: 0.78em;
    color: var(--fg-muted);
    font-weight: 600;
    padding: 0 0.4em 0.4em 0;
}
.stat-rows-table td { padding: 0.25em 0.4em 0.25em 0; vertical-align: middle; }
.stat-rows-table select { width: 100%; }
.stat-rows-table input[type="number"] { width: 7em; }
.row-group-remove {
    flex: 0 0 auto;
    background: transparent;
    color: var(--fg-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 2em;
    height: 2em;
    line-height: 1;
    cursor: pointer;
}
.row-group-remove:hover { color: var(--error); border-color: var(--error); }
.row-group-add { align-self: flex-start; margin-top: 0.5em; }
.sync-status form { margin: 0; }