:root {
    color-scheme: light;
    --bg: #f4f7fb;
    --bg-2: #e8eef6;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-2: rgba(248, 250, 252, 0.96);
    --surface-2: rgba(241, 245, 249, 0.88);
    --surface-3: rgba(226, 232, 240, 0.72);
    --sidebar-bg: rgba(255, 255, 255, 0.78);
    --topbar-bg: rgba(255, 255, 255, 0.78);
    --input-bg: rgba(255, 255, 255, 0.96);
    --hover-bg: rgba(241, 245, 249, 0.98);
    --line: #cbd5e1;
    --line-soft: rgba(100, 116, 139, 0.2);
    --text: #0f172a;
    --text-strong: #020617;
    --muted: #475569;
    --muted-soft: #64748b;
    --accent: #0ea5e9;
    --accent-2: #2563eb;
    --accent-soft: rgba(14, 165, 233, 0.12);
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --accent-text: #0369a1;
    --success-text: #047857;
    --danger-text: #b91c1c;
    --body-radial-1: rgba(14, 165, 233, 0.12);
    --body-radial-2: rgba(37, 99, 235, 0.08);
    --body-grad-start: #f8fbff;
    --body-grad-mid: #eef4fb;
    --body-grad-end: #e8eef6;
    --hero-note-bg: rgba(255, 255, 255, 0.68);
    --hero-note-text: #1e293b;
    --auth-hero-text: #334155;
    --chip-bg: rgba(226, 232, 240, 0.9);
    --chip-border: rgba(148, 163, 184, 0.3);
    --chip-text: #334155;
    --summary-card-bg: rgba(248, 250, 252, 0.94);
    --summary-card-border: rgba(56, 189, 248, 0.2);
    --link-color: #0369a1;
    --shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
    --page-gutter: clamp(14px, 2.2vw, 28px);
    --section-gap: clamp(14px, 1.8vw, 22px);
    --panel-padding: clamp(16px, 2vw, 26px);
    --content-width: 1480px;
    /* Безопасные зоны (вырезы, индикатор «домой») — используются с env() в отступах */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-2: #111827;
    --panel: rgba(18, 27, 45, 0.94);
    --panel-2: rgba(22, 33, 54, 0.97);
    --surface-2: rgba(30, 41, 59, 0.9);
    --surface-3: rgba(51, 65, 85, 0.82);
    --sidebar-bg: rgba(9, 16, 30, 0.9);
    --topbar-bg: rgba(18, 27, 45, 0.9);
    --input-bg: rgba(13, 21, 36, 0.96);
    --hover-bg: rgba(38, 52, 75, 0.92);
    --line: #475569;
    --line-soft: rgba(148, 163, 184, 0.3);
    --text: #e5eef9;
    --text-strong: #f8fbff;
    --muted: #b2c0d3;
    --muted-soft: #d7e0ec;
    --accent: #38bdf8;
    --accent-2: #2563eb;
    --accent-soft: rgba(56, 189, 248, 0.18);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --accent-text: #bae6fd;
    --success-text: #bbf7d0;
    --danger-text: #fecaca;
    --body-radial-1: rgba(56, 189, 248, 0.13);
    --body-radial-2: rgba(37, 99, 235, 0.16);
    --body-grad-start: #020617;
    --body-grad-mid: #0b1220;
    --body-grad-end: #111827;
    --hero-note-bg: rgba(15, 23, 42, 0.72);
    --hero-note-text: #edf5ff;
    --auth-hero-text: #d5deea;
    --chip-bg: rgba(51, 65, 85, 0.86);
    --chip-border: rgba(148, 163, 184, 0.28);
    --chip-text: #e2e8f0;
    --summary-card-bg: rgba(13, 21, 36, 0.9);
    --summary-card-border: rgba(56, 189, 248, 0.22);
    --link-color: #7dd3fc;
    --shadow: 0 26px 56px rgba(2, 6, 23, 0.38);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(circle at top left, var(--body-radial-1), transparent 28%),
        radial-gradient(circle at bottom right, var(--body-radial-2), transparent 24%),
        linear-gradient(135deg, var(--body-grad-start) 0%, var(--body-grad-mid) 55%, var(--body-grad-end) 100%);
    color: var(--text);
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

a {
    color: inherit;
}

.lk-brand-link {
    text-decoration: none;
    color: inherit;
}

.lk-brand-link:hover .lk-brand-title,
.lk-brand-link:hover .lk-topbar-brand-name {
    color: var(--accent);
}

button,
input,
select,
textarea {
    font: inherit;
}

.lk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.lk-brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lk-brand-logo {
    display: block;
    width: 68px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(14, 165, 233, 0.18));
}

.lk-brand-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lk-brand-title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text-strong);
}

.lk-theme-control {
    display: grid;
    gap: 10px;
}

.lk-theme-control--sidebar {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.lk-profile-theme-panel {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.lk-profile-theme-hint {
    margin: 0 0 12px;
    max-width: 42rem;
}

.lk-theme-control--profile {
    max-width: 420px;
}

.lk-theme-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.lk-theme-switch {
    --theme-track-pad: 4px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding: var(--theme-track-pad);
    border-radius: 14px;
    border: 1px solid var(--line-soft);
    background: var(--surface-3);
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.05);
    gap: 0;
    isolation: isolate;
}

.lk-theme-switch::before {
    content: "";
    position: absolute;
    top: var(--theme-track-pad);
    bottom: var(--theme-track-pad);
    left: var(--theme-track-pad);
    width: calc((100% - 2 * var(--theme-track-pad)) / 3);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.26), rgba(37, 99, 235, 0.32));
    box-shadow:
        0 2px 10px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.34, 1.24, 0.64, 1);
    z-index: 0;
    pointer-events: none;
}

:root[data-theme="dark"] .lk-theme-switch::before {
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(37, 99, 235, 0.4));
    box-shadow:
        0 2px 14px rgba(2, 6, 23, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lk-theme-switch[data-theme-mode="light"]::before {
    transform: translateX(0);
}

.lk-theme-switch[data-theme-mode="auto"]::before {
    transform: translateX(100%);
}

.lk-theme-switch[data-theme-mode="dark"]::before {
    transform: translateX(200%);
}

.lk-theme-option {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 10px;
    padding: 10px 6px;
    background: transparent;
    color: var(--muted-soft);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.25;
    cursor: pointer;
    transition: color 0.2s ease;
    min-height: 40px;
}

@media (min-width: 400px) {
    .lk-theme-option {
        font-size: 12px;
        padding: 10px 8px;
    }
}

.lk-theme-option:hover {
    color: var(--text);
}

.lk-theme-option.is-active {
    color: var(--text-strong);
}

.lk-theme-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lk-brand-title--main {
    font-size: clamp(34px, 3.4vw, 48px);
}

.lk-btn {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
}

.lk-nav-btn,
.lk-tab,
.lk-auth-tab {
    touch-action: manipulation;
}

.lk-btn:hover {
    transform: translateY(-1px);
}

.lk-btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
}

.lk-btn-secondary {
    background: var(--accent-soft);
    border-color: rgba(56, 189, 248, 0.28);
    color: var(--accent-text);
}

.lk-btn-ghost {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.24);
    color: var(--muted);
}

.lk-btn-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--danger-text);
}

.lk-form,
.lk-inline-form {
    display: grid;
    gap: 14px;
}

.lk-inline-form {
    grid-template-columns: minmax(0, 1.4fr) minmax(170px, 1fr) auto;
    align-items: end;
}

.lk-field {
    display: grid;
    gap: 7px;
}

.lk-field span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.lk-field input,
.lk-field select,
.lk-field textarea,
.lk-inline-form input,
.lk-inline-form select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--text);
    padding: 12px 14px;
    outline: none;
}

.lk-field textarea {
    resize: vertical;
}

.lk-field-value {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
    display: flex;
    align-items: center;
}

.lk-field--captcha span {
    font-size: 12px;
}

.lk-input-with-btn {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lk-input-with-btn input {
    flex: 1;
}

.lk-input-with-btn button {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .lk-input-with-btn {
        flex-direction: column;
        align-items: stretch;
    }
}

.lk-check-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
}

.lk-field .lk-check-line input {
    width: auto;
    margin-top: 3px;
    padding: 0;
    flex-shrink: 0;
}

.lk-field input:focus,
.lk-field select:focus,
.lk-field textarea:focus,
.lk-inline-form input:focus,
.lk-inline-form select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.lk-remember-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -4px;
    margin-bottom: 4px;
    user-select: none;
}

.lk-remember-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #38bdf8;
    cursor: pointer;
}

.lk-remember-row label {
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}

.lk-consent-details {
    margin: 4px 0 8px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.04);
}

:root[data-theme="dark"] .lk-consent-details {
    background: rgba(148, 163, 184, 0.06);
}

.lk-consent-summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    list-style-position: outside;
}

.lk-consent-pre {
    margin: 12px 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: min(42vh, 360px);
    overflow: auto;
}

.lk-consent-check {
    margin-top: 6px;
}

.lk-consent-check label {
    color: var(--text);
}

.lk-grid-two,
.lk-grid-three,
.lk-card-grid,
.lk-summary-grid {
    display: grid;
    gap: var(--section-gap);
}

.lk-grid-two,
.lk-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.lk-grid-three {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.lk-auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--page-gutter), var(--safe-top)) max(var(--page-gutter), var(--safe-right))
        max(var(--page-gutter), var(--safe-bottom)) max(var(--page-gutter), var(--safe-left));
}

.lk-auth-shell {
    width: min(1240px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(380px, 480px);
    gap: clamp(18px, 2vw, 30px);
    align-items: stretch;
}

.lk-auth-hero,
.lk-auth-card,
.lk-panel,
.lk-sidebar,
.lk-topbar,
.lk-device-card,
.lk-empty,
.lk-card {
    border: 1px solid var(--line-soft);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.lk-auth-hero {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.lk-auth-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -25% auto;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    filter: blur(18px);
    pointer-events: none;
}

.lk-auth-hero-lead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.lk-brand-lockup--hero {
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
    align-items: center;
    gap: 18px;
}

.lk-brand-lockup--hero .lk-brand-logo {
    width: min(100%, 260px);
    max-height: 96px;
}

.lk-brand-lockup--hero .lk-brand-texts {
    gap: 6px;
}

.lk-brand-lockup--hero .lk-eyebrow {
    font-size: 14px;
}

.lk-brand-lockup--hero .lk-brand-title {
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: 0.02em;
}

.lk-auth-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.05;
}

.lk-auth-hero p {
    margin: 0;
    color: var(--auth-hero-text);
    font-size: 17px;
    line-height: 1.6;
}

.lk-auth-hero-note {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    background: var(--hero-note-bg);
    color: var(--hero-note-text);
    line-height: 1.6;
    max-width: 720px;
}

.lk-auth-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lk-auth-badges span,
.lk-status-chip {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: var(--accent-text);
    font-size: 13px;
}

.lk-auth-card {
    padding: var(--panel-padding);
    display: grid;
    gap: 18px;
}

.lk-auth-tools {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.lk-auth-local-time {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.35;
    min-width: 0;
}

.lk-auth-local-time--card {
    margin: 0 0 12px;
}

.lk-auth-page-head {
    margin-bottom: 18px;
}

.lk-auth-page-head h2 {
    margin: 0;
    font-size: 28px;
}

.lk-auth-page-head p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.lk-auth-tabs,
.lk-tabs,
.lk-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-auth-tab,
.lk-tab,
.lk-nav-btn {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    color: var(--muted);
    padding: 11px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.lk-auth-tab.is-active,
.lk-tab.is-active,
.lk-nav-btn.is-active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(37, 99, 235, 0.2));
    color: var(--text-strong);
    border-color: rgba(56, 189, 248, 0.35);
}

/* Кнопки с точкой-сводкой по календарю (агрегат по всем бассейнам): «Органайзер» / «Дела» / «Мои бассейны» */
.lk-nav-btn--organizer,
.lk-nav-btn--pools {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lk-nav-btn--icon-only {
    min-width: 54px;
    padding-inline: 12px;
}

.lk-nav-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lk-nav-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lk-nav-badge {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
    align-self: center;
}

.lk-nav-badge--ok {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.28);
}

.lk-nav-badge--warn {
    background: var(--warning);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
}

.lk-nav-badge--bad {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
}

.lk-nav-badge--muted {
    background: var(--muted-icon, #94a3b8);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35);
}

:root[data-theme="dark"] .lk-nav-badge--ok {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35);
}

:root[data-theme="dark"] .lk-nav-badge--warn {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.38);
}

:root[data-theme="dark"] .lk-nav-badge--bad {
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4);
}

:root[data-theme="dark"] .lk-nav-badge--muted {
    background: #64748b;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.45);
}

.lk-success-banner,
.lk-alert {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
}

.lk-auth-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.lk-auth-links a {
    color: var(--link-color);
    text-decoration: none;
    font-size: 14px;
}

.lk-auth-links .lk-btn {
    flex: 1 1 180px;
}

.lk-auth-links a:hover {
    text-decoration: underline;
}

.lk-auth-body--login .lk-auth-hero {
    border-color: rgba(56, 189, 248, 0.22);
}

/* Светлая тема: светлый «не белый» фон — нежный лазурный, без тёмной палитры ночной темы */
:root[data-theme="light"] .lk-auth-body--login .lk-auth-hero {
    background:
        linear-gradient(
            152deg,
            #b6d8ef 0%,
            #c9e5f5 42%,
            #d9eef8 100%
        );
    border-color: rgba(14, 165, 233, 0.32);
    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

:root[data-theme="light"] .lk-auth-body--login .lk-auth-hero::after {
    background: rgba(56, 189, 248, 0.28);
}

:root[data-theme="light"] .lk-auth-body--login .lk-brand-lockup--hero .lk-brand-logo {
    filter:
        drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12))
        drop-shadow(0 10px 22px rgba(14, 116, 144, 0.18));
}

.lk-auth-body--login .lk-auth-card {
    border-color: rgba(56, 189, 248, 0.18);
}

.lk-auth-body--register .lk-auth-hero {
    border-color: rgba(16, 185, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.92)),
        var(--panel);
}

.lk-auth-body--register .lk-auth-hero::after {
    background: rgba(16, 185, 129, 0.14);
}

.lk-auth-body--register .lk-auth-badges span {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.24);
    color: var(--success-text);
}

.lk-auth-body--reset .lk-auth-hero {
    border-color: rgba(245, 158, 11, 0.24);
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(255, 255, 255, 0.92)),
        var(--panel);
}

.lk-auth-body--reset .lk-auth-hero::after {
    background: rgba(245, 158, 11, 0.14);
}

.lk-auth-body--reset .lk-auth-badges span {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.24);
    color: #b45309;
}

:root[data-theme="dark"] .lk-auth-body--register .lk-auth-hero {
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.06), rgba(15, 23, 42, 0.88)),
        var(--panel);
}

:root[data-theme="dark"] .lk-auth-body--reset .lk-auth-hero {
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(15, 23, 42, 0.88)),
        var(--panel);
}

:root[data-theme="dark"] .lk-auth-body--reset .lk-auth-badges span {
    color: #fde68a;
}

.lk-success-banner {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success-text);
}

.lk-alert {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.26);
    color: var(--danger-text);
}

.lk-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    width: min(100%, 1800px);
    margin: 0 auto;
}

.lk-sidebar {
    border-radius: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--sidebar-bg);
    backdrop-filter: blur(20px);
}

.lk-sidebar-head {
    display: grid;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    text-align: center;
    justify-items: center;
}

.lk-sidebar h1,
.lk-topbar h2,
.lk-section-head h3,
.lk-panel h4,
.lk-empty h4 {
    margin: 0;
}

.lk-sidebar-head p,
.lk-topbar p,
.lk-section-head p,
.lk-empty p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.lk-brand-lockup--sidebar {
    margin-bottom: 2px;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    width: 100%;
}

.lk-sidebar .lk-brand-logo {
    width: 54px;
}

.lk-brand-lockup--sidebar .lk-brand-texts,
.lk-brand-lockup--sidebar .lk-eyebrow {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.lk-sidebar .lk-brand-title {
    font-size: clamp(24px, 2.4vw, 30px);
}

.lk-sidebar .lk-brand-title--main {
    font-size: clamp(24px, 2.4vw, 30px);
}

.lk-sidebar-head h1 {
    font-size: 28px;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
}

.lk-sidebar-head #sidebarUserName {
    margin: 0;
    font-size: 14px;
    text-align: center;
    max-width: 100%;
}

.lk-sidebar .lk-nav {
    display: grid;
    gap: 10px;
}

.lk-sidebar .lk-nav-btn,
.lk-sidebar .lk-sidebar-actions .lk-btn {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border-radius: 14px;
    justify-content: center;
}

.lk-sidebar-actions {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.lk-sidebar-toggle {
    display: none;
    width: 100%;
}

/* «Выйти» в профиле — только на узкой вёрстке (см. max-width: 1100px) */
.lk-profile-logout-mobile {
    display: none;
}

.lk-main {
    padding: max(var(--page-gutter), var(--safe-top)) max(var(--page-gutter), var(--safe-right))
        max(var(--page-gutter), var(--safe-bottom)) max(var(--page-gutter), var(--safe-left));
    display: grid;
    gap: var(--section-gap);
    align-content: start;
}

.lk-main > :not(.lk-mobile-bottom-nav) {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.lk-topbar {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    align-self: start;
    background: var(--topbar-bg);
    backdrop-filter: blur(14px);
}

/* Длинные экраны: верхняя панель остаётся при прокрутке контента */
@media (max-width: 1200px) {
    .lk-app-body .lk-topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    :root[data-theme="dark"] .lk-app-body .lk-topbar {
        box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
    }
}

.lk-topbar-side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
}

.lk-topbar.is-compact {
    padding: 11px 14px;
    gap: 10px;
}

.lk-topbar.is-compact h2 {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.12;
}

.lk-topbar.is-compact p {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
}

.lk-topbar.is-compact .lk-topbar-meta .lk-chip {
    padding: 5px 8px;
    font-size: 11px;
}

/* Force compact topbar on dashboard even with stale JS cache. */
.lk-app-body[data-page="dashboard"] .lk-topbar {
    padding: 11px 14px;
    gap: 10px;
}

.lk-app-body[data-page="dashboard"] .lk-topbar h2 {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.12;
}

.lk-app-body[data-page="dashboard"] .lk-topbar p {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
}

.lk-app-body[data-page="dashboard"] .lk-topbar .lk-topbar-meta .lk-chip {
    padding: 5px 8px;
    font-size: 11px;
}

.lk-topbar-main {
    min-width: 0;
}

.lk-topbar h2 {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.15;
}

.lk-topbar p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
}

.lk-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: fit-content;
}

.lk-topbar-logo {
    width: 34px;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
}

.lk-topbar-brand-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-strong);
}

.lk-topbar-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: center;
}

.lk-topbar-meta .lk-chip {
    padding: 6px 10px;
    font-size: 12px;
}

.lk-mobile-bottom-nav {
    display: none;
}

.lk-view {
    display: none;
    gap: var(--section-gap);
}

.lk-view.is-active,
.lk-tab-panel.is-active {
    display: grid;
}

.lk-tab-panels {
    display: grid;
    gap: var(--section-gap);
}

.lk-tab-panel {
    display: none;
    gap: var(--section-gap);
}

.lk-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#containerViewShell > .lk-section-head > .lk-inline-actions {
    padding-block: 8px;
}

/* Экран бассейна: не даём горизонтальному переполнению ломать сетку */
#containerViewShell {
    min-width: 0;
    width: 100%;
}

#containerTitle,
#containerDescription {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * Вкладка бассейна «Органайзер»: верхняя сетка (форма заметки + форма события) и нижняя (списки).
 * Базовый .lk-grid-two с auto-fit(min 260px) на широких экранах даёт третью пустую дорожку — колонки «уезжают» влево.
 */
@media (min-width: 821px) {
    .lk-tab-panel[data-tab-panel="organizer"] > .lk-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lk-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    padding-inline: 2px;
    scroll-padding-inline: 12px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 8px;
}

#containerTabs {
    padding-block: 10px 12px;
}

.lk-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.lk-section-head--inner {
    margin-bottom: 14px;
}

.lk-page-intro {
    padding: 10px 2px 2px;
    margin-bottom: 2px;
}

.lk-page-intro h3 {
    font-size: 22px;
    line-height: 1.2;
}

.lk-page-intro p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
}

.lk-page-intro--panel {
    padding-top: 0;
    margin-bottom: 10px;
}

.lk-page-intro--dashboard {
    padding: 2px 0 0;
    margin-bottom: 0;
}

/* Глобальный органайзер: компактный заголовок без лишнего воздуха */
#organizerPanel > .lk-section-head.lk-page-intro {
    gap: 0;
}

.lk-page-intro--dashboard h3 {
    font-size: 18px;
    line-height: 1.2;
}

.lk-page-intro--dashboard p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
}

.lk-page-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

/* Дашборд: на десктопе — «Офисный мониторинг», на мобильной вёрстке — «Создать бассейн» */
.lk-dashboard-intro-btn--create {
    display: none;
}

.lk-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Карточки бассейнов на странице «Мои бассейны» — чуть светлее общего панельного фона */
#containersGrid .lk-card {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.96) 48%,
        rgba(241, 245, 249, 0.88) 100%
    );
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow:
        0 22px 44px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    align-content: start;
}

:root[data-theme="dark"] #containersGrid .lk-card {
    background: linear-gradient(
        160deg,
        rgba(51, 65, 85, 0.55) 0%,
        rgba(30, 41, 59, 0.92) 48%,
        rgba(15, 23, 42, 0.72) 100%
    );
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow:
        0 22px 44px rgba(2, 6, 23, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Карточка бассейна: роль + приборы + online — одна строка */
.lk-container-card-stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#containersGrid .lk-container-card-stats .lk-chip--container-stat {
    flex: 0 1 auto;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Вторая строка: агрегат info_glob (зелёный / красный / нейтральный маркер) */
.lk-container-card-glob {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: var(--surface-2);
    min-width: 0;
}

.lk-container-card-glob-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: 4px;
}

.lk-container-card-glob--ok .lk-container-card-glob-dot {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.28);
}

.lk-container-card-glob--bad .lk-container-card-glob-dot {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.24);
}

.lk-container-card-glob--muted .lk-container-card-glob-dot {
    background: var(--muted-soft);
}

.lk-container-card-glob-text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    word-break: break-word;
}

.lk-container-card-glob--muted .lk-container-card-glob-text {
    color: var(--muted);
}

/* Третья строка карточки: календарь (просроченные разовые задачи) */
.lk-container-card-organizer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: var(--surface-2);
    min-width: 0;
}

.lk-container-card-organizer-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: 4px;
}

.lk-container-card-organizer--ok .lk-container-card-organizer-dot {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}

.lk-container-card-organizer--warn .lk-container-card-organizer-dot {
    background: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
}

.lk-container-card-organizer-text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    word-break: break-word;
}

.lk-container-card-organizer--warn .lk-container-card-organizer-text {
    color: var(--text);
}

/* Карточка бассейна: переключатель «Показать приборы» (по умолчанию список скрыт) */
#containersGrid .lk-card--container-tile {
    position: relative;
}

#containersGrid .lk-card--container-tile > .lk-btn {
    margin-top: 12px;
}

#containersGrid .lk-container-card-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#containersGrid .lk-container-card-actions > .lk-btn {
    min-height: 44px;
}

#containersGrid .lk-container-card-actions > .lk-btn[data-open-container] {
    flex: 1 1 auto;
}

#containersGrid .lk-btn--pool-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
}

#containersGrid .lk-btn--pool-note svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Удаление бассейна: отдельная панель во вкладке «Настройки» */
.lk-panel--danger-zone {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(220, 53, 69, 0.35);
}

#containersGrid .lk-container-devices-cb {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#containersGrid .lk-container-devices-cb:not(:checked) ~ .lk-container-card-devices {
    display: none;
}

#containersGrid .lk-card--container-tile .lk-card-head {
    align-items: flex-start;
    gap: 12px;
}

#containersGrid .lk-card--container-tile .lk-card-head-main {
    min-width: 0;
    flex: 1;
}

#containersGrid .lk-container-card-head-toggle {
    flex: 0 0 auto;
    padding-top: 1px;
}

#containersGrid .lk-toggle-devices {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

#containersGrid .lk-toggle-devices-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.2;
    max-width: 11rem;
    text-align: right;
}

#containersGrid .lk-toggle-devices-track {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line-soft);
    position: relative;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

#containersGrid .lk-toggle-devices-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}

#containersGrid .lk-container-devices-cb:checked + .lk-card-head .lk-toggle-devices-track {
    background: rgba(14, 165, 233, 0.22);
    border-color: rgba(56, 189, 248, 0.45);
}

#containersGrid .lk-container-devices-cb:checked + .lk-card-head .lk-toggle-devices-thumb {
    transform: translateX(18px);
}

#containersGrid .lk-container-devices-cb:checked + .lk-card-head .lk-toggle-devices-label {
    color: var(--accent-text);
}

#containersGrid .lk-container-devices-cb:focus-visible + .lk-card-head .lk-toggle-devices {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

:root[data-theme="dark"] #containersGrid .lk-toggle-devices-thumb {
    box-shadow: 0 1px 4px rgba(2, 6, 23, 0.55);
}

.lk-panel {
    padding: var(--panel-padding);
    display: grid;
    gap: 18px;
    min-width: 0;
    /* При равной высоте колонок в lk-grid-two не растягивать строки: контент остаётся сверху */
    align-content: start;
}

.lk-panel--danger {
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.14);
}

:root[data-theme="light"] .lk-panel--danger {
    background: rgba(254, 226, 226, 0.65);
    border-color: rgba(185, 28, 28, 0.38);
}

.lk-profile-local-time {
    margin: 0;
}

.lk-card,
.lk-device-card {
    padding: clamp(16px, 1.8vw, 20px);
    display: grid;
    gap: 14px;
    min-width: 0;
}

.lk-device-card--clickable,
.lk-list-item--device-preview {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.lk-device-card--clickable:hover,
.lk-device-card--clickable:focus-visible,
.lk-list-item--device-preview:hover,
.lk-list-item--device-preview:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.34);
    background: var(--hover-bg);
    outline: none;
}

.lk-card-head,
.lk-device-head,
.lk-list-item-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

/* Текстовый блок в шапке списка: иначе длинные строки/meta ломают flex и дают горизонтальный вылет */
.lk-list-item-head > div:first-child {
    min-width: 0;
}

.lk-card-title,
.lk-device-title,
.lk-list-title {
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lk-meta {
    color: var(--muted);
    font-size: 13px;
}

.lk-list-item .lk-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
}

.lk-inline-actions,
.lk-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Кнопки «Изменить» и «Удалить» в правилах уведомлений — всегда в один ряд */
.lk-alert-rule-btns {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.lk-inline-actions--alert-rule {
    justify-content: flex-end;
}

/* Форма правила: .lk-field задаёт display:grid и может перебить скрытие по [hidden] */
#alertRuleChannelBlock[hidden],
#alertRuleThresholdBlock[hidden] {
    display: none !important;
}

/* Кнопка повторной отправки кода регистрации: .lk-btn задаёт display и может перебить [hidden] */
#resendEmailBtn[hidden],
#resendServiceEmailBtn[hidden],
#resendPhoneBtn[hidden] {
    display: none !important;
}

.lk-alert-recipients {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.lk-alert-recipients-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lk-alert-recipients-group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lk-alert-recipient-line {
    padding-left: 2px;
}

.lk-alert-recipients-empty {
    margin-top: 6px;
}

.lk-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lk-summary-card {
    padding: clamp(14px, 1.6vw, 18px);
    border-radius: 20px;
    background: var(--summary-card-bg);
    border: 1px solid var(--summary-card-border);
}

.lk-summary-label {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.lk-summary-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
}

.lk-device-list,
.lk-list {
    display: grid;
    gap: 12px;
}

.lk-list-item {
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface-2);
    padding: clamp(14px, 1.5vw, 16px);
    display: grid;
    gap: 12px;
}

.lk-events-compact {
    gap: 8px;
}

.lk-event-compact {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface-2);
    overflow: hidden;
}

.lk-event-compact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.lk-event-compact-expand {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
}

.lk-event-compact-expand:hover {
    background: var(--hover-bg);
}

.lk-event-compact-expand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lk-event-compact-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.lk-event-compact-chevron::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.5em;
    border-color: transparent transparent transparent currentColor;
}

.lk-event-compact.is-open .lk-event-compact-chevron {
    transform: rotate(90deg);
}

.lk-event-compact-marker {
    flex-shrink: 0;
    padding-top: 3px;
}

.lk-event-compact-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.lk-event-compact-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lk-event-compact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    line-height: 1.4;
}

.lk-event-compact-actions {
    flex-shrink: 0;
    padding: 8px 10px 8px 0;
    align-self: flex-start;
}

.lk-icon-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
}

.lk-icon-btn svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lk-event-compact-body {
    border-top: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="dark"] .lk-event-compact-body {
    background: rgba(255, 255, 255, 0.03);
}

.lk-event-compact-body-inner {
    padding: 12px 14px 14px;
    display: grid;
    gap: 10px;
}

/* Сценарии бассейна: компактная карточка — в свёрнутом виде название, слот и строка команды; остальное по раскрытию */
.lk-scenarios-compact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lk-scenario-compact {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--surface-2);
    overflow: hidden;
}

.lk-scenario-compact-row {
    display: flex;
    align-items: stretch;
}

.lk-scenario-compact-expand {
    width: 100%;
}

.lk-scenario-compact-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
    text-align: left;
}

.lk-scenario-compact-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--text);
}

.lk-scenario-compact-slot {
    font-size: 13px;
}

.lk-scenario-compact-slot--past {
    color: var(--warning);
}

.lk-scenario-compact-cmd {
    font-size: 13px;
    line-height: 1.4;
}

.lk-scenario-compact.is-open .lk-event-compact-chevron {
    transform: rotate(90deg);
}

.lk-scenario-compact-body {
    border-top: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="dark"] .lk-scenario-compact-body {
    background: rgba(255, 255, 255, 0.03);
}

.lk-scenario-compact-body-inner {
    padding: 12px 14px 14px;
    display: grid;
    gap: 10px;
}

.lk-scenario-compact-actions.lk-inline-actions {
    flex-wrap: wrap;
}

.lk-organizer-chip-planned {
    background: rgba(59, 130, 246, 0.14);
    color: var(--text);
}

.lk-list-body,
.lk-device-body {
    display: grid;
    gap: 10px;
}

.lk-list-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lk-device-summary {
    display: grid;
    gap: 4px;
}

.lk-summary-inline-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lk-summary-inline-value {
    font-size: 18px;
    font-weight: 700;
}

.lk-state {
    font-weight: 700;
}

.lk-state--ok {
    color: var(--success);
}

.lk-state--warn {
    color: var(--danger);
}

.lk-state--muted {
    color: var(--muted);
}

.lk-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.lk-chip-row--tek {
    align-items: flex-start;
}

.lk-meta--tek-label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.lk-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    color: var(--chip-text);
}

.lk-chip.is-online,
.lk-status-chip.is-online {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.24);
    color: var(--success-text);
}

.lk-chip.is-offline,
.lk-status-chip.is-offline {
    background: rgba(100, 116, 139, 0.22);
    border-color: rgba(148, 163, 184, 0.3);
    color: var(--chip-text);
}

.lk-empty {
    padding: clamp(22px, 3vw, 32px);
    text-align: center;
}

.lk-upload-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.lk-upload-form input[type="file"] {
    color: var(--muted);
    min-width: 0;
    max-width: 100%;
}

.lk-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lk-attachment-link {
    font-size: 13px;
    color: var(--accent-text);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(56, 189, 248, 0.08);
}

.lk-attachment-link--image {
    padding: 0;
    border: none;
    background: transparent;
    line-height: 0;
}

.lk-attachment-thumb {
    display: block;
    max-width: min(100%, 240px);
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    object-fit: cover;
    vertical-align: middle;
}

/* Полноэкранная ротация дашбордов (офисный мониторинг) */
.lk-office-monitor {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: #020617;
}

:root[data-theme="light"] .lk-office-monitor {
    background: #ffffff;
}

:root[data-theme="dark"] .lk-office-monitor {
    background: #020617;
}

.lk-office-monitor[hidden] {
    display: none !important;
}

body.lk-office-monitor-active {
    overflow: hidden;
}

.lk-office-monitor-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(12px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Цвет панели как у lk-state: слева мягкий акцент (--success / --danger), текст как везде: --text-strong + --muted */
.lk-office-monitor-toolbar--ok {
    /* #10b981 — тот же зелёный, что --success в тёмной теме */
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.4) 0%, rgba(15, 23, 42, 0.97) 55%);
    border-bottom-color: rgba(16, 185, 129, 0.45);
}

.lk-office-monitor-toolbar--warn {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.42) 0%, rgba(15, 23, 42, 0.97) 55%);
    border-bottom-color: rgba(248, 113, 113, 0.45);
}

.lk-office-monitor-toolbar--muted {
    background: linear-gradient(90deg, rgba(51, 65, 85, 0.88) 0%, rgba(15, 23, 42, 0.97) 55%);
    border-bottom-color: rgba(100, 116, 139, 0.35);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--ok {
    /* #059669 — как --success в светлой теме */
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.22) 0%, rgba(255, 255, 255, 0.98) 55%);
    border-bottom-color: rgba(5, 150, 105, 0.38);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--warn {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.2) 0%, rgba(255, 255, 255, 0.98) 55%);
    border-bottom-color: rgba(220, 38, 38, 0.35);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--muted {
    background: linear-gradient(90deg, rgba(71, 85, 105, 0.32) 0%, rgba(255, 255, 255, 0.98) 55%);
    border-bottom-color: rgba(100, 116, 139, 0.28);
}

.lk-office-monitor-toolbar-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    /* Затухание строго от центра полосы к левому и правому краю (текст по центру — совпадает с серединой маски) */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 18%,
        #000 50%,
        rgba(0, 0, 0, 0.35) 82%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 18%,
        #000 50%,
        rgba(0, 0, 0, 0.35) 82%,
        transparent 100%
    );
}

.lk-office-monitor-caption {
    font-size: clamp(17px, 1.35vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    overflow-wrap: anywhere;
    max-width: 100%;
}

.lk-office-monitor-meta {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
    max-width: 100%;
}

.lk-office-monitor-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #000;
}

:root[data-theme="light"] .lk-office-monitor-stage {
    background: #ffffff;
}

:root[data-theme="dark"] .lk-office-monitor-stage {
    background: #020617;
}

.lk-office-monitor-scale {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
}

.lk-office-monitor-frame {
    display: block;
    border: 0;
    background: #0f172a;
}

:root[data-theme="light"] .lk-office-monitor-frame {
    background: #ffffff;
}

:root[data-theme="dark"] .lk-office-monitor-frame {
    background: #0f172a;
}

/* Кнопка «Закрыть»: читаемая на градиентной полосе в обеих темах */
.lk-office-monitor-toolbar .lk-btn-secondary {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(248, 250, 252, 0.96);
}

.lk-office-monitor-toolbar .lk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

:root[data-theme="light"] .lk-office-monitor-toolbar .lk-btn-secondary {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--text-strong);
}

:root[data-theme="light"] .lk-office-monitor-toolbar .lk-btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--text-strong);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--ok .lk-btn-secondary {
    border-color: rgba(5, 150, 105, 0.32);
    color: var(--success-text);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--ok .lk-btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(5, 150, 105, 0.42);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--warn .lk-btn-secondary {
    border-color: rgba(220, 38, 38, 0.32);
    color: var(--danger-text);
}

:root[data-theme="light"] .lk-office-monitor-toolbar--warn .lk-btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.42);
}

.lk-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(10px);
}

.lk-modal-backdrop[hidden] {
    display: none;
}

.lk-modal-backdrop--confirm {
    z-index: 70;
}

.lk-modal--confirm .lk-modal-head p {
    margin: 10px 0 0;
    white-space: pre-wrap;
}

.lk-confirm-actions {
    justify-content: flex-end;
}

.lk-modal--scenario {
    width: min(720px, 100%);
}

.lk-scenarios-create-actions {
    margin: 0 0 18px;
    justify-content: flex-start;
}

/* Вертикальный зазор до/после кнопок одинаковый: у .lk-tab-panel есть gap между строками,
   поэтому снизу вычитаем его из margin-bottom, иначе получается margin + gap > сверху. */
.lk-organizer-create-toolbar {
    --organizer-toolbar-pad: 28px;
    margin: var(--organizer-toolbar-pad) 0 calc(var(--organizer-toolbar-pad) - var(--section-gap));
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.lk-modal--organizer-event {
    width: min(640px, 100%);
}

.lk-modal {
    width: min(560px, 100%);
    max-height: min(90vh, calc(100dvh - 32px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    box-shadow: var(--shadow);
    padding: clamp(18px, 2vw, 24px);
    display: grid;
    gap: 18px;
}

.lk-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.lk-modal-head h3 {
    margin: 0;
}

.lk-modal-head p {
    margin: 6px 0 0;
    color: var(--muted);
}

:root[data-theme="dark"] .lk-auth-hero,
:root[data-theme="dark"] .lk-auth-card,
:root[data-theme="dark"] .lk-panel,
:root[data-theme="dark"] .lk-sidebar,
:root[data-theme="dark"] .lk-topbar,
:root[data-theme="dark"] .lk-device-card,
:root[data-theme="dark"] .lk-empty,
:root[data-theme="dark"] .lk-card,
:root[data-theme="dark"] .lk-modal {
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow:
        0 20px 44px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .lk-panel,
:root[data-theme="dark"] .lk-card,
:root[data-theme="dark"] .lk-device-card,
:root[data-theme="dark"] .lk-empty,
:root[data-theme="dark"] .lk-modal,
:root[data-theme="dark"] #containersGrid .lk-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)) ,
        var(--panel);
}

:root[data-theme="dark"] .lk-list-item,
:root[data-theme="dark"] .lk-summary-card,
:root[data-theme="dark"] .lk-theme-switch,
:root[data-theme="dark"] .lk-auth-tab,
:root[data-theme="dark"] .lk-tab,
:root[data-theme="dark"] .lk-nav-btn {
    border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme="dark"] .lk-list-item {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        var(--surface-2);
}

:root[data-theme="dark"] .lk-summary-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 10px 24px rgba(2, 6, 23, 0.18);
}

:root[data-theme="dark"] .lk-auth-tab,
:root[data-theme="dark"] .lk-tab,
:root[data-theme="dark"] .lk-nav-btn {
    background: rgba(32, 45, 66, 0.9);
    color: #c7d3e2;
}

:root[data-theme="dark"] .lk-auth-tab:hover,
:root[data-theme="dark"] .lk-tab:hover,
:root[data-theme="dark"] .lk-nav-btn:hover {
    border-color: rgba(56, 189, 248, 0.32);
    color: var(--text-strong);
    background: rgba(39, 56, 82, 0.95);
}

:root[data-theme="dark"] .lk-auth-tab.is-active,
:root[data-theme="dark"] .lk-tab.is-active,
:root[data-theme="dark"] .lk-nav-btn.is-active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.28));
    border-color: rgba(56, 189, 248, 0.48);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 18px rgba(37, 99, 235, 0.18);
}

:root[data-theme="dark"] .lk-field span,
:root[data-theme="dark"] .lk-meta,
:root[data-theme="dark"] .lk-summary-label,
:root[data-theme="dark"] .lk-summary-inline-label,
:root[data-theme="dark"] .lk-modal-head p,
:root[data-theme="dark"] .lk-sidebar-head p,
:root[data-theme="dark"] .lk-topbar p,
:root[data-theme="dark"] .lk-section-head p,
:root[data-theme="dark"] .lk-empty p {
    color: var(--muted-soft);
}

:root[data-theme="dark"] .lk-field input,
:root[data-theme="dark"] .lk-field select,
:root[data-theme="dark"] .lk-field textarea,
:root[data-theme="dark"] .lk-inline-form input,
:root[data-theme="dark"] .lk-inline-form select {
    border-color: rgba(148, 163, 184, 0.34);
    color: #f3f8ff;
    background: rgba(13, 21, 36, 0.96);
}

:root[data-theme="dark"] .lk-field input::placeholder,
:root[data-theme="dark"] .lk-field textarea::placeholder,
:root[data-theme="dark"] .lk-inline-form input::placeholder {
    color: #8ea0b7;
}

:root[data-theme="dark"] .lk-field input:focus,
:root[data-theme="dark"] .lk-field select:focus,
:root[data-theme="dark"] .lk-field textarea:focus,
:root[data-theme="dark"] .lk-inline-form input:focus,
:root[data-theme="dark"] .lk-inline-form select:focus {
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

:root[data-theme="dark"] .lk-chip {
    color: #e5edf7;
    background: rgba(48, 62, 86, 0.88);
    border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme="dark"] .lk-chip.is-offline,
:root[data-theme="dark"] .lk-status-chip.is-offline {
    background: rgba(71, 85, 105, 0.42);
    border-color: rgba(148, 163, 184, 0.36);
    color: #dde7f2;
}

@media (max-width: 1100px) {
    .lk-layout {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        align-items: start;
    }

    /* Верхняя плитка с брендом: только по содержимому, без растягивания по высоте строки сетки */
    .lk-layout > .lk-sidebar,
    .lk-sidebar {
        align-self: start !important;
        height: auto !important;
        min-height: 0;
        max-height: none;
    }

    .lk-auth-tools {
        display: none;
    }

    .lk-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0 0 28px 28px;
        padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) 14px max(14px, var(--safe-left));
        gap: 12px;
    }

    .lk-sidebar.is-expanded {
        max-height: min(78vh, 680px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .lk-sidebar-head {
        border-bottom: 0;
        padding-bottom: 0;
        gap: 8px;
    }

    .lk-sidebar-head h1,
    .lk-sidebar-head #sidebarUserName {
        display: none;
    }

    .lk-brand-lockup--sidebar {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .lk-brand-lockup--sidebar .lk-brand-texts {
        align-items: center;
        text-align: center;
    }

    .lk-brand-lockup--sidebar .lk-eyebrow {
        justify-content: center;
    }

    .lk-sidebar .lk-brand-title,
    .lk-sidebar .lk-brand-title--main {
        font-size: clamp(22px, 3.5vw, 28px);
    }

    .lk-sidebar-toggle {
        display: none !important;
    }

    .lk-sidebar .lk-nav,
    .lk-sidebar .lk-sidebar-actions {
        display: none;
    }

    .lk-sidebar.is-expanded .lk-nav,
    .lk-sidebar.is-expanded .lk-sidebar-actions {
        display: grid;
    }

    .lk-sidebar.is-expanded .lk-sidebar-actions {
        margin-top: 2px;
    }

    .lk-auth-shell {
        grid-template-columns: 1fr;
    }

    /* Вход: на узком экране сначала бренд и форма, текст hero — внизу */
    .lk-auth-body--login .lk-auth-shell {
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2vw, 30px);
    }

    .lk-auth-body--login .lk-auth-hero {
        display: contents;
    }

    .lk-auth-body--login .lk-brand-lockup--hero {
        order: 1;
    }

    /* Узкий экран: тот же светлый лазурный блок под логотипом */
    :root[data-theme="light"] .lk-auth-body--login .lk-brand-lockup--hero {
        padding: 26px 22px 28px;
        border-radius: 24px;
        border: 1px solid rgba(14, 165, 233, 0.32);
        background:
            linear-gradient(
                152deg,
                #b6d8ef 0%,
                #c9e5f5 42%,
                #d9eef8 100%
            );
        box-shadow: var(--shadow);
    }

    .lk-auth-body--login .lk-auth-card {
        order: 2;
    }

    .lk-auth-body--login .lk-auth-hero-lead {
        order: 3;
        border: 1px solid rgba(56, 189, 248, 0.22);
        border-radius: 24px;
        background: var(--panel);
        box-shadow: var(--shadow);
        padding: 22px;
        position: relative;
        overflow: hidden;
    }

    .lk-auth-body--login .lk-auth-hero-lead::after {
        content: "";
        position: absolute;
        inset: auto -10% -25% auto;
        width: 280px;
        height: 280px;
        border-radius: 999px;
        background: rgba(56, 189, 248, 0.12);
        filter: blur(18px);
        pointer-events: none;
        z-index: 0;
    }

    .lk-auth-body--login .lk-auth-hero-lead > * {
        position: relative;
        z-index: 1;
    }

    /* Auth hero: «Платформа управления» + «АкваХАБ» по центру на мобильных и планшетах */
    .lk-auth-body .lk-brand-lockup--hero {
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .lk-auth-body .lk-brand-lockup--hero .lk-brand-texts {
        align-items: center;
    }

    .lk-auth-body .lk-brand-lockup--hero .lk-eyebrow {
        justify-content: center;
    }

    /* Форма входа: «Войти», «Регистрация», «Сброс пароля» — одна ширина и высота строки */
    #loginForm > .lk-btn-primary,
    #loginForm .lk-auth-links .lk-btn {
        width: 100%;
        min-height: 46px;
        padding: 12px 16px;
        box-sizing: border-box;
        flex: none;
    }

    #loginForm .lk-auth-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .lk-brand-title--main {
        font-size: clamp(30px, 6vw, 40px);
    }

    /* Мобильная вёрстка: без дублирующей верхней «плитки» (заголовок раздела + чипы мета) */
    .lk-app-body .lk-topbar {
        display: none;
    }

    /* Без длинных подписей под заголовками разделов (lk-page-intro) */
    .lk-page-intro p {
        display: none;
    }

    .lk-dashboard-intro-btn--office {
        display: none;
    }

    .lk-dashboard-intro-btn--create {
        display: flex;
    }

    /* Карточка бассейна: сводка «Приборов / online / участников / приглашений» — одна строка, компактно */
    #containerSummary.lk-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
    }

    #containerSummary .lk-summary-card {
        padding: 7px 4px 9px;
        border-radius: 12px;
        min-width: 0;
        text-align: center;
    }

    #containerSummary .lk-summary-label {
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    #containerSummary .lk-summary-value {
        margin-top: 3px;
        font-size: clamp(15px, 4.2vw, 18px);
        line-height: 1.1;
    }

    #containersGrid .lk-container-card-stats .lk-chip--container-stat {
        font-size: 10px;
        padding: 4px 6px;
        letter-spacing: -0.02em;
    }

    #containersGrid .lk-toggle-devices-label {
        font-size: 10px;
        max-width: 6.5rem;
    }

    #containersGrid .lk-container-card-glob {
        padding: 6px 8px;
        margin-top: 4px;
    }

    #containersGrid .lk-container-card-glob-text {
        font-size: 12px;
    }

    #containersGrid .lk-container-card-organizer {
        padding: 6px 8px;
        margin-top: 4px;
    }

    #containersGrid .lk-container-card-organizer-text {
        font-size: 12px;
    }

    /* Мобильная вёрстка: «Выйти» в разделе «Профиль», не в сайдбаре */
    .lk-sidebar-actions #logoutBtn {
        display: none !important;
    }

    .lk-profile-logout-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: min(100%, var(--content-width));
        margin-inline: auto;
        margin-top: 4px;
    }

    .lk-profile-logout-mobile .lk-btn {
        width: 100%;
        justify-content: center;
    }

    .lk-main {
        padding-top: max(0px, var(--safe-top));
    }

}

/* Планшет: трёхколоночные блоки (сценарий, уведомления) — одна колонка раньше, чем на телефоне */
@media (max-width: 960px) {
    .lk-grid-three {
        grid-template-columns: 1fr;
    }

    .lk-inline-form {
        grid-template-columns: 1fr;
    }

    .lk-section-head.lk-page-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .lk-page-intro-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .lk-main {
        padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) calc(120px + var(--safe-bottom))
            max(16px, var(--safe-left));
    }

    .lk-grid-two,
    .lk-grid-three,
    .lk-inline-form {
        grid-template-columns: 1fr;
    }

    .lk-topbar,
    .lk-section-head,
    .lk-card-head,
    .lk-device-head,
    .lk-list-item-head,
    .lk-modal-head {
        flex-direction: column;
        align-items: stretch;
    }

    #containerViewShell > .lk-section-head > .lk-inline-actions {
        padding-block: 4px 8px;
    }

    .lk-topbar {
        padding: 14px;
        gap: 10px;
    }

    .lk-topbar-main {
        width: 100%;
    }

    .lk-topbar h2 {
        font-size: 21px;
    }

    .lk-topbar p {
        font-size: 13px;
    }

    .lk-topbar-meta {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .lk-topbar-side {
        width: 100%;
        justify-content: stretch;
    }

    .lk-topbar-meta .lk-chip {
        width: 100%;
        justify-content: center;
    }

    #containerTabs {
        padding-block: 8px 10px;
    }

    .lk-card,
    .lk-device-card {
        padding: 14px;
        gap: 10px;
    }

    /* Кнопки карточки бассейна — две равные кнопки в строке */
    #containersGrid .lk-container-card-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    #containersGrid .lk-container-card-actions > .lk-btn[data-open-container] {
        width: 100%;
        justify-content: center;
    }

    .lk-panel {
        padding: 16px;
        gap: 16px;
    }

    .lk-list-item {
        padding: 12px;
        gap: 10px;
    }

    /* Шапка карточки списка — колонка: кнопка на всю ширину, без «висящего» смещения */
    .lk-list-item-head .lk-btn {
        align-self: stretch;
        justify-content: center;
    }

    .lk-upload-form {
        flex-direction: column;
        align-items: stretch;
    }

    .lk-upload-form .lk-btn {
        width: 100%;
    }

    .lk-organizer-export-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .lk-organizer-export-bar .lk-btn {
        width: 100%;
        justify-content: center;
    }

    /* Календарь дел: шапка задачи на всю ширину, действия — одна строка (иконка отчёта + Изменить + Удалить) */
    .lk-event-compact-row {
        align-items: stretch;
    }

    .lk-event-compact-expand {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .lk-event-compact-actions.lk-inline-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        padding: 4px 10px 10px 12px;
        box-sizing: border-box;
    }

    .lk-event-compact-actions.lk-inline-actions .lk-btn-secondary,
    .lk-event-compact-actions.lk-inline-actions .lk-btn-danger {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding-inline: 10px;
        font-size: 13px;
    }

    .lk-event-compact-actions.lk-inline-actions .lk-icon-btn {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        align-self: center;
        justify-self: center;
    }

    /* Заметки: одна кнопка «Удалить» на всю ширину под шапкой */
    .lk-note-compact-actions.lk-inline-actions {
        display: flex;
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        padding: 4px 10px 10px 12px;
        box-sizing: border-box;
        justify-content: stretch;
    }

    .lk-note-compact-actions.lk-inline-actions .lk-btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        padding-inline: 10px;
        font-size: 13px;
    }

    .lk-card-title,
    .lk-device-title,
    .lk-list-title {
        font-size: 16px;
    }

    .lk-chip {
        padding: 6px 9px;
        font-size: 11px;
    }

    .lk-sidebar .lk-nav-btn,
    .lk-sidebar .lk-sidebar-actions .lk-btn {
        min-height: 42px;
        padding: 10px 14px;
    }

    /* Нижний док: заметнее фона страницы, общая акцентная гамма sky/blue */
    .lk-mobile-bottom-nav {
        position: fixed;
        left: max(10px, var(--safe-left));
        right: max(10px, var(--safe-right));
        bottom: max(10px, var(--safe-bottom));
        z-index: 55;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        border-radius: 16px;
        border: 1px solid rgba(14, 165, 233, 0.3);
        background: linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(240, 249, 255, 0.97) 42%,
            rgba(232, 242, 252, 0.99) 100%
        );
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow:
            0 4px 6px -1px rgba(15, 23, 42, 0.08),
            0 22px 44px -16px rgba(14, 165, 233, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    }

    :root[data-theme="dark"] .lk-mobile-bottom-nav {
        border-color: rgba(56, 189, 248, 0.42);
        background: linear-gradient(
            165deg,
            rgba(28, 40, 62, 0.99) 0%,
            rgba(18, 30, 48, 0.98) 48%,
            rgba(12, 22, 38, 0.99) 100%
        );
        box-shadow:
            0 4px 8px -2px rgba(0, 0, 0, 0.45),
            0 24px 48px -18px rgba(56, 189, 248, 0.22),
            0 0 0 1px rgba(56, 189, 248, 0.12) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .lk-mobile-bottom-nav-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        min-width: 0;
    }

    .lk-mobile-bottom-nav-overview {
        width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .lk-mobile-bottom-nav .lk-nav-btn {
        margin: 0;
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 12px;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.94);
        border-color: rgba(14, 165, 233, 0.26);
        color: var(--muted);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }

    .lk-mobile-bottom-nav .lk-nav-btn:hover {
        border-color: rgba(14, 165, 233, 0.42);
        color: var(--text);
        background: #ffffff;
    }

    .lk-mobile-bottom-nav .lk-nav-btn.is-active {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.24));
        border-color: rgba(14, 165, 233, 0.5);
        color: var(--text-strong);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.65),
            0 4px 16px rgba(37, 99, 235, 0.18);
    }

    :root[data-theme="dark"] .lk-mobile-bottom-nav .lk-nav-btn {
        background: rgba(24, 36, 56, 0.96);
        border-color: rgba(56, 189, 248, 0.28);
        color: #c4d4e8;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    :root[data-theme="dark"] .lk-mobile-bottom-nav .lk-nav-btn:hover {
        background: rgba(34, 48, 72, 0.98);
        border-color: rgba(56, 189, 248, 0.45);
        color: var(--text-strong);
    }

    :root[data-theme="dark"] .lk-mobile-bottom-nav .lk-nav-btn.is-active {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.32), rgba(37, 99, 235, 0.38));
        border-color: rgba(56, 189, 248, 0.58);
        color: #f8fbff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 6px 22px rgba(37, 99, 235, 0.32);
    }

    .lk-page-intro {
        padding: 6px 0 0;
    }

    .lk-page-intro h3 {
        font-size: 19px;
    }

    .lk-page-intro p {
        font-size: 13px;
    }

    .lk-page-intro--dashboard h3 {
        font-size: 17px;
    }

    .lk-page-intro--dashboard p {
        font-size: 12px;
    }

    .lk-page-intro--dashboard .lk-page-intro-actions {
        width: 100%;
        justify-content: stretch;
    }

    .lk-page-intro--dashboard .lk-page-intro-actions .lk-btn {
        width: 100%;
    }

    .lk-brand-lockup {
        gap: 12px;
    }

    .lk-brand-logo {
        width: 56px;
    }

    .lk-sidebar .lk-brand-logo {
        width: 62px;
    }

    .lk-brand-title {
        font-size: clamp(24px, 7vw, 32px);
    }

    .lk-brand-title--main {
        font-size: clamp(28px, 8vw, 36px);
    }

    .lk-topbar-brand {
        gap: 8px;
        margin-bottom: 8px;
    }

    .lk-topbar-logo {
        width: 28px;
    }

    .lk-topbar-brand-name {
        font-size: 16px;
    }
}

@media (max-width: 560px) {
    .lk-auth-body {
        padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom))
            max(16px, var(--safe-left));
    }

    .lk-auth-tools {
        justify-content: stretch;
    }

    .lk-auth-tools .lk-theme-control,
    .lk-auth-tools .lk-theme-switch {
        width: 100%;
    }

    .lk-auth-tools .lk-theme-option {
        min-width: 0;
    }

    .lk-auth-hero,
    .lk-auth-card {
        padding: 22px;
        border-radius: 20px;
    }

    .lk-auth-body--login .lk-auth-hero-lead {
        border-radius: 20px;
    }

    .lk-brand-lockup--hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lk-auth-body .lk-brand-lockup--hero .lk-eyebrow {
        justify-content: center;
    }

    .lk-brand-texts {
        gap: 2px;
    }

    .lk-sidebar-head h1 {
        font-size: 24px;
    }

    .lk-topbar-brand-name {
        font-size: 15px;
    }

    .lk-eyebrow {
        font-size: 11px;
    }

    .lk-topbar {
        padding: 12px;
    }

    .lk-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lk-inline-actions .lk-btn,
    .lk-auth-links .lk-btn {
        width: 100%;
    }

    /* Правила уведомлений: чип канала и пара кнопок — не растягивать кнопки на всю ширину */
    .lk-inline-actions--alert-rule {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px 10px;
    }

    .lk-inline-actions--alert-rule .lk-btn {
        width: auto;
    }

    .lk-auth-links {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .lk-auth-links a {
        width: 100%;
        text-align: center;
    }

    .lk-mobile-bottom-nav {
        left: max(8px, var(--safe-left));
        right: max(8px, var(--safe-right));
        bottom: max(8px, var(--safe-bottom));
        padding: 7px;
    }

    .lk-mobile-bottom-nav .lk-nav-btn {
        min-height: 38px;
        font-size: 11px;
        padding: 7px 8px;
    }

    .lk-page-intro h3 {
        font-size: 17px;
    }

    .lk-page-intro--dashboard h3 {
        font-size: 16px;
    }
}

.lk-organizer-toolbar {
    margin-bottom: 12px;
}

.lk-organizer-export-collapse {
    min-width: 0;
}

.lk-organizer-export-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 16px 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: rgba(56, 189, 248, 0.06);
}

.lk-organizer-export-bar--collapse {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 12px 14px 14px;
}

.lk-organizer-export-bar .lk-meta {
    margin: 0;
}

.lk-organizer-export-settings {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lk-organizer-export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.lk-organizer-export-row--checks {
    gap: 12px 18px;
}

.lk-organizer-export-hint {
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.88;
}

.lk-organizer-export-local-time {
    font-size: 13px;
}

#organizerExportPeriodWrap.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.lk-scenario-repeat-block {
    margin-bottom: 14px;
}

.lk-scenario-weekday-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 8px;
}

.lk-scenario-weekday-grid .lk-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.lk-scenario-local-time {
    margin: 0 0 10px;
}

.lk-scenario-datetime-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.lk-scenario-datetime-row input[type="datetime-local"] {
    flex: 1 1 200px;
    min-width: 0;
}

.lk-scenario-result-alert {
    margin-top: 0;
    margin-bottom: 16px;
}

.lk-field--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .lk-field--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .lk-field--inline span {
        min-width: 0;
    }

    .lk-field--inline select {
        width: 100%;
        min-width: 0;
    }
}

.lk-organizer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.lk-organizer-stat-done {
    color: var(--success-text);
    border-color: rgba(5, 150, 105, 0.35);
}

.lk-organizer-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
}

.lk-organizer-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.lk-organizer-table th,
.lk-organizer-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

.lk-organizer-table th {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lk-organizer-table tr:last-child td {
    border-bottom: none;
}

.lk-organizer-table-empty {
    text-align: center;
    color: var(--muted);
    padding: 24px !important;
}

.lk-organizer-task-title {
    font-weight: 600;
    color: var(--text-strong);
}

.lk-organizer-desc {
    margin-top: 4px;
    font-size: 12px;
}

.lk-link-as-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--link-color);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lk-link-as-btn:hover {
    color: var(--accent);
}

.lk-organizer-status-select {
    min-width: 130px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
}

.lk-organizer-action-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lk-organizer-th-quick-report,
.lk-organizer-td-quick-report {
    width: 72px;
    text-align: center;
}

.lk-organizer-td-quick-report .lk-btn {
    margin-inline: auto;
}

.lk-quick-report-attachments-empty {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--line-soft);
    color: var(--muted);
    background: var(--surface-2);
    font-size: 13px;
}

.lk-organizer-chip-done {
    background: rgba(5, 150, 105, 0.14);
    color: var(--success-text);
}

.lk-organizer-chip-cancelled {
    opacity: 0.88;
}

.lk-organizer-th-marker {
    width: 2rem;
    text-align: center;
    font-size: 12px;
    opacity: 0.75;
}

.lk-organizer-th-marker abbr {
    text-decoration: none;
    cursor: help;
}

.lk-organizer-td-marker {
    width: 2rem;
    text-align: center;
    vertical-align: middle;
}

.lk-organizer-row-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    vertical-align: middle;
}

.lk-organizer-row-marker--done {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.28);
}

.lk-organizer-row-marker--overdue {
    background: var(--warning);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
}

.lk-organizer-row-marker--planned {
    background: rgba(59, 130, 246, 0.85);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
}

.lk-organizer-row-marker--cancelled {
    background: var(--muted);
    opacity: 0.75;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

.lk-organizer-row-marker--note {
    background: rgba(139, 92, 246, 0.9);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

:root[data-theme="dark"] .lk-organizer-row-marker--note {
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.35);
}

:root[data-theme="dark"] .lk-organizer-row-marker--done {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35);
}

:root[data-theme="dark"] .lk-organizer-row-marker--overdue {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.38);
}

:root[data-theme="dark"] .lk-organizer-row-marker--planned {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}

@media (max-width: 760px) {
    .lk-organizer-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .lk-organizer-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .lk-organizer-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        overflow: hidden;
        white-space: nowrap;
    }

    #organizerTableBody {
        display: grid;
        gap: 10px;
    }

    #organizerTableBody > tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "marker pool quick"
            "task task task"
            "date date date"
            "repeat repeat repeat"
            "status status status"
            "action action action";
        gap: 8px 10px;
        padding: 10px;
        border: 1px solid var(--line-soft);
        border-radius: 14px;
        background: var(--panel-2);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    #organizerTableBody > tr > td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    #organizerTableBody > tr > td:nth-child(1) { grid-area: marker; }
    #organizerTableBody > tr > td:nth-child(2) { grid-area: pool; }
    #organizerTableBody > tr > td:nth-child(3) { grid-area: quick; align-items: flex-end; }
    #organizerTableBody > tr > td:nth-child(4) { grid-area: task; }
    #organizerTableBody > tr > td:nth-child(5) { grid-area: date; }
    #organizerTableBody > tr > td:nth-child(6) { grid-area: repeat; }
    #organizerTableBody > tr > td:nth-child(7) { grid-area: status; }
    #organizerTableBody > tr > td:nth-child(8) { grid-area: action; }

    #organizerTableBody > tr > td:nth-child(5)::before,
    #organizerTableBody > tr > td:nth-child(6)::before,
    #organizerTableBody > tr > td:nth-child(7)::before,
    #organizerTableBody > tr > td:nth-child(8)::before {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
    }

    #organizerTableBody > tr > td:nth-child(5)::before { content: "Дата"; }
    #organizerTableBody > tr > td:nth-child(6)::before { content: "Повтор"; }
    #organizerTableBody > tr > td:nth-child(7)::before { content: "Статус"; }
    #organizerTableBody > tr > td:nth-child(8)::before { content: "Изменить статус"; }

    .lk-organizer-td-marker {
        width: auto;
        justify-content: center;
    }

    .lk-organizer-td-quick-report {
        width: auto;
        text-align: right;
    }

    .lk-organizer-task-title {
        font-size: 15px;
        line-height: 1.3;
    }

    .lk-organizer-status-select {
        width: 100%;
        min-width: 0;
    }

    .lk-organizer-action-stack {
        width: 100%;
    }

    #organizerTableBody > tr > .lk-organizer-table-empty {
        padding: 16px !important;
        border: 1px dashed var(--line-soft);
        border-radius: 14px;
        background: var(--surface-2);
    }
}

@media (max-width: 420px) {
    .lk-topbar-meta {
        grid-template-columns: 1fr;
    }

    .lk-panel,
    .lk-card,
    .lk-device-card,
    .lk-empty {
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-btn:hover,
    .lk-device-card--clickable:hover,
    .lk-list-item--device-preview:hover {
        transform: none;
    }
}