:root {
    color-scheme: light;
    --page: #f4f5f7;
    --surface: #ffffff;
    --surface-soft: #f8f9fa;
    --card-heading: #eef1f5;
    --hover: #edf3fb;
    --line: #dfe3e8;
    --text: #25272c;
    --muted: #6b7079;
    --primary: #2563eb;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #e5a900;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 20px;
    font: 15px/1.45 "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--page);
}
body.dark-theme {
    color-scheme: dark;
    --page: #1b1d21;
    --surface: #25282e;
    --surface-soft: #2a2d33;
    --card-heading: #30343b;
    --hover: #333b44;
    --line: #3b3f47;
    --text: #e3e5e9;
    --muted: #a8adb7;
}
.container { width: 100%; margin: 0 auto; }
h2, h3, p { overflow-wrap: anywhere; }
h2 { margin: 0 0 20px; font-size: 22px; }
h3 { margin: 0; font-size: 17px; }
button, input[type="submit"], .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 5px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, .nav-button:hover { filter: brightness(1.1); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #6397fb; outline-offset: 3px; }
button:disabled, input[type="submit"]:disabled { opacity: 0.55; cursor: wait; }
input[type="text"], input[type="date"], input[type="password"], input[type="number"], input[type="search"], textarea {
    min-width: 0;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
textarea { resize: vertical; }
form { margin: 0; }
.navbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.navbar-left { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.navbar-right { display: flex; gap: 10px; align-items: flex-start; flex-shrink: 0; }
#addUserBtn { flex-shrink: 0; }
.user-search { flex: 0 1 280px; width: min(100%, 280px); }
.service-filters { display: flex; flex: 1 1 260px; flex-wrap: wrap; gap: 6px; min-width: 0; }
.service-filter { min-height: 28px; padding: 5px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.service-filter.active, .sort-mode.active { color: #fff; background: var(--success); border-color: var(--success); }
.table-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 12px; }
.sort-mode { min-height: 30px; padding: 5px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.menu-wrap { position: relative; }
.menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 216px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 8px 24px #0003; }
.menu-dropdown.open { display: grid; gap: 6px; }
.menu-dropdown button, .menu-dropdown .nav-button { width: 100%; justify-content: flex-start; text-align: left; }
.import-db-label { cursor: pointer; }
.import-db-label input { display: none; }
.table-container { container-type: inline-size; width: var(--table-width, 100%); max-width: 100%; margin: 0 auto; border: 1px solid var(--line); background: var(--surface); font-size: var(--table-font-size, 13.8px); }
.users-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: inherit; font-variant-numeric: tabular-nums; }
.users-table th, .users-table td { padding: 9px 7px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; vertical-align: middle; font-weight: 400; }
.users-table th { position: sticky; top: 0; z-index: 10; padding-top: 12px; padding-bottom: 12px; background: #e9ecf0; color: #515762; font-size: 12.5px; line-height: 1.35; }
body.dark-theme .users-table th { background: #30343b; color: #cbd0d9; }
.users-table th:last-child, .users-table td:last-child { border-right: 0; }
.users-table tr:last-child td { border-bottom: 0; }
.users-table tbody tr { background: var(--surface); }
.users-table tbody tr:nth-child(even) { background: var(--surface-soft); }
.users-table tbody tr:hover { background: var(--hover); }
.users-table th:nth-child(1), .users-table td:nth-child(1) { width: var(--col-1-width, 18%); }
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: var(--col-2-width, 12%); }
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: var(--col-3-width, 6%); }
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: var(--col-4-width, 6%); }
.users-table th:nth-child(5), .users-table td:nth-child(5) { width: var(--col-5-width, 10%); }
.users-table th:nth-child(6), .users-table td:nth-child(6) { width: var(--col-6-width, 10%); }
.users-table th:nth-child(7), .users-table td:nth-child(7) { width: var(--col-7-width, 9%); }
.users-table th:nth-child(8), .users-table td:nth-child(8) { width: var(--col-8-width, 8%); }
.users-table th:nth-child(9), .users-table td:nth-child(9) { width: var(--col-9-width, 10%); }
.users-table th:nth-child(10), .users-table td:nth-child(10) { width: var(--col-10-width, 11%); }
.users-table .username { text-align: left; min-width: 85px; }
.username > span, .service-cell > span { font-size: 1.08em; overflow-wrap: anywhere; }
.user-comment, .service-cost { margin-top: 4px; font-size: 0.88em; color: var(--muted); overflow-wrap: anywhere; }
.user-comment { white-space: pre-wrap; }
.small-date { font-size: 0.88em; color: var(--muted); white-space: nowrap; }
.date-field { color: #2864b4; white-space: nowrap; }
body.dark-theme .date-field { color: #9abfea; }
.days-cell { font-size: 1.12em; }
.status-cell .status-ok, .status-cell .status-alert { display: inline-flex; align-items: center; justify-content: center; min-width: 75px; height: 25px; padding: 3px 7px; border-radius: 5px; color: #fff; font-size: 12px; white-space: nowrap; }
.status-ok, input.save-btn, .row-actions .save-btn { background: var(--success); }
.status-alert, .delete-btn, .session-revoke { background: var(--danger); }
.edit-btn { background: var(--warning); color: #222; }
.row-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.row-actions form { display: flex; align-items: center; gap: 4px; }
.row-actions button { flex: 0 0 27px; width: 27px; height: 30px; min-height: 30px; padding: 0; font-size: 17px; }
.inline-date-fields { display: flex; align-items: center; gap: 4px; min-width: 0; }
.inline-date-group { display: flex; align-items: center; gap: 3px; }
.inline-date-group button { flex-basis: 25px; width: 25px; font-size: 12px; }
.inline-date-group input[type="date"] { flex: 0 0 120px; width: 120px; height: 30px; min-height: 30px; padding: 3px 4px; font-size: 13px; }
.dragging { opacity: 0.45; }

@container (max-width: max(1140px, 88em)) {
    .users-table, .users-table tbody { display: block; }
    .users-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .users-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; gap: 14px 10px; border-bottom: 1px solid var(--line); }
    .users-table tbody tr:last-child { border-bottom: 0; }
    .users-table tbody tr td:nth-child(n) { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
    .users-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
    .users-table .username, .users-table .service-cell { grid-column: span 2; }
    .users-table .status-cell { align-self: center; }
    .users-table .actions { grid-column: 1 / -1; justify-self: stretch; }
    .users-table .actions::before { text-align: right; }
    .row-actions { justify-content: flex-end; }
}
@container (max-width: 520px) {
    .users-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users-table .username, .users-table .service-cell, .users-table .status-cell { grid-column: span 1; }
    .row-actions { display: grid; grid-template-columns: minmax(0, 1fr) 27px 27px; gap: 6px; }
    .row-actions .date-update-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 27px; gap: 8px; }
    .inline-date-fields { display: contents; }
    .inline-date-group { grid-column: 1; display: grid; grid-template-columns: 25px 25px minmax(0, 1fr); }
    .inline-date-group::before { content: attr(data-label); grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
    .inline-date-group input[type="date"] { width: 100%; }
    .row-actions .date-update-form .save-btn { grid-column: 2; grid-row: 1 / 3; align-self: end; }
    .row-actions .edit-btn { grid-column: 2; }
}
.info-panel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px 0; color: var(--muted); font-size: 13px; }
.info-panel p { margin: 0; }
#notificationArea { display: grid; gap: 6px; }
.notification { max-width: 320px; padding: 9px 12px; border-radius: 5px; color: #fff; font-size: 13px; opacity: 0; transition: opacity 0.2s; }
.notification.success { background: var(--success); }
.notification.error { background: var(--danger); }
.notification.visible { opacity: 1; }
.navbar-right #notificationArea { position: fixed; right: 20px; top: 64px; z-index: 120; }
.auth-form { display: grid; gap: 16px; width: min(100%, 400px); margin: 64px auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.auth-form h2 { margin: 0; }
.auth-form label { display: grid; gap: 6px; }
.modal { display: none; position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: 24px 12px; background: #0008; }
.modal-content { position: relative; width: min(100%, 520px); margin: 12px auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 60px #0005; }
.modal-content h2 { padding-right: 24px; }
.modal-content form { display: grid; gap: 14px; }
.modal-content form > label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 12px; }
.modal-content input:not([type="hidden"]), .modal-content textarea { width: 100%; }
.modal-content input[type="submit"] { justify-self: end; width: auto; }
.close { position: absolute; top: 12px; right: 16px; font-size: 25px; color: var(--muted); cursor: pointer; }
.settings-modal-content { width: min(100%, 760px); }
.settings-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.device-sessions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.device-sessions-heading, .device-session { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-sessions-heading { flex-wrap: wrap; }
.device-session { padding: 16px 0; border-bottom: 1px solid var(--line); }
.device-session-details { min-width: 0; overflow-wrap: anywhere; }
.device-session-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.device-session-current { padding: 2px 6px; border-radius: 4px; background: var(--success); color: #fff; font-size: 12px; }
.device-session-meta, #deviceSessionsMessage { color: var(--muted); font-size: 13px; }
.session-revoke { flex-shrink: 0; }
.stats-dashboard { margin-top: 24px; }
.stats-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.stats-hero h2 { margin: 4px 0 0; }
.stats-kicker { color: var(--muted); font-size: 13px; }
.stats-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; flex: 1 1 520px; }
.stats-summary > div { min-width: 0; }
.stats-summary span { display: block; font-size: 23px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stats-summary small, .service-stat-values small { color: var(--muted); font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; margin-top: 20px; }
.service-stat-card { padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.service-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.service-stat-head span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.service-stat-values { display: grid; gap: 14px; padding-top: 14px; }
.service-stat-values > div { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.service-stat-values strong { font-size: 18px; font-weight: 400; white-space: nowrap; }
.log-content { padding: 16px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.log-create { color: #26934b; }
.log-delete { color: #e45656; }
.log-update { color: #528bce; }
.log-notify { color: #bc8b22; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination-link { padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); text-decoration: none; }
.pagination-link.active { color: #fff; background: var(--primary); }
@media (max-width: 640px) {
    body { padding: 12px; }
    .table-container { width: 100%; }
    .navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; }
    .navbar-left { display: contents; }
    .navbar-right { grid-column: 2; grid-row: 1; }
    #addUserBtn { grid-column: 1; grid-row: 1; justify-self: start; font-size: 13px; }
    .user-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .service-filters { grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; gap: 6px; }
    .service-filter { display: block; flex: 0 1 auto; min-width: 0; padding: 6px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .table-tools { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr; gap: 4px; }
    .sort-mode { min-width: 0; min-height: 34px; padding: 7px 4px; font-size: 12px; white-space: nowrap; }
    .users-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 6px;
        padding: 10px;
    }
    .users-table tbody tr td:nth-child(n) { flex: 0 0 calc((100% - 6px) / 2); order: 1; }
    .users-table td::before { margin-bottom: 3px; }
    .users-table .username::before, .users-table .service-cell::before, .users-table .actions::before { display: none; }
    .users-table tbody tr td.username,
    .users-table tbody tr td.service-cell,
    .users-table tbody tr td.status-cell { order: 0; padding-bottom: 8px; }
    .users-table tbody tr td.username { position: relative; z-index: 0; flex: 1 0 calc(75% - 92px); }
    /* Общая полоса шапки следует высоте её содержимого без дублирования ячеек. */
    .users-table .username::after { content: ""; position: absolute; z-index: -1; top: -10px; bottom: 0; left: -10px; width: 100cqw; background: var(--card-heading); border-bottom: 1px solid var(--line); pointer-events: none; }
    .users-table .username > span, .users-table .service-cell > span { font-size: 1.35em; line-height: 1.3; }
    .users-table .user-comment, .users-table .service-cost { margin-top: 2px; }
    .users-table tbody tr td.service-cell { position: relative; flex: 0 1 25%; }
    .users-table tbody tr td.status-cell { position: relative; flex: 0 0 80px; align-self: stretch; text-align: right; }
    .users-table .status-cell::before { display: none; }
    .users-table tbody tr td.actions { flex-basis: 100%; }
    .row-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .row-actions .date-update-form { display: contents; }
    .row-actions button { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px; }
    .inline-date-fields { display: grid; flex: 0 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .inline-date-group { display: grid; grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .inline-date-group::before { content: attr(data-label); grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
    .inline-date-group input[type="date"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 34px; height: 34px; }
    .inline-date-group button { width: 100%; }
    .menu-toggle { padding: 7px 10px; }
    .modal-content { padding: 20px 16px; }
    .modal-content form > label { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .settings-columns { grid-template-columns: minmax(0, 1fr); }
    .device-session { flex-wrap: wrap; }
    .stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-summary span { font-size: 20px; }
    .notification { max-width: calc(100vw - 24px); }
}