:root {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-2: #f6f7f9;
    --text: #0f172a;
    --text-muted: #64748b;
    --line: #e2e8f0;
    --sidebar: #111827;
    --sidebar-text: #cbd5e1;
    --sidebar-active: #ffffff;
    --app-sidebar-width: 228px;
    --app-sidebar-collapsed-width: 64px;
    --app-shell-min-width: 1120px;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef2ff;
    --success: #059669;
    --success-soft: #ecfdf5;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning-soft: #fff7ed;
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --radius: 16px;
    --radius-sm: 10px;
    --input-bg: #ffffff;
    --panel-bg: rgba(255, 255, 255, 0.88);
    --panel-border: rgba(226, 232, 240, 0.9);
    --login-card-bg: rgba(255, 255, 255, 0.95);
    --card-head-bg: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    --body-gradient-a: rgba(79, 70, 229, 0.12);
    --body-gradient-b: rgba(14, 165, 233, 0.08);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1120;
    --surface: #151c2f;
    --surface-muted: #1a2235;
    --surface-2: #1a2235;
    --text: #e8edf5;
    --text-muted: #94a3b8;
    --line: #2a3548;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-soft: rgba(99, 102, 241, 0.18);
    --success: #34d399;
    --success-soft: rgba(16, 185, 129, 0.15);
    --danger: #f87171;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --warning-soft: rgba(251, 146, 60, 0.15);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --input-bg: #1a2235;
    --panel-bg: rgba(21, 28, 47, 0.92);
    --panel-border: rgba(42, 53, 72, 0.95);
    --login-card-bg: rgba(21, 28, 47, 0.96);
    --card-head-bg: linear-gradient(180deg, #1a2235 0%, #151c2f 100%);
    --body-gradient-a: rgba(79, 70, 229, 0.08);
    --body-gradient-b: rgba(14, 165, 233, 0.05);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    overflow-x: auto;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, var(--body-gradient-a), transparent 28%),
        radial-gradient(circle at top right, var(--body-gradient-b), transparent 24%),
        var(--bg);
    min-width: var(--app-shell-min-width);
}

body.app-login-body {
    min-width: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-width: var(--app-shell-min-width);
    width: 100%;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--app-sidebar-width);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: var(--sidebar-text);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow: visible;
    z-index: 40;
    transition: width 0.18s ease, padding 0.18s ease;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 6px;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.15s ease;
    position: relative;
}

a.app-brand:hover {
    background: rgba(255, 255, 255, 0.06);
}

.app-brand-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

.app-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-brand-copy strong {
    display: block;
    color: #fff;
    font-size: 0.88rem;
}

.app-brand-copy span {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #94a3b8;
}

.app-sidebar-user-icon {
    display: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.app-sidebar-user-icon .las {
    font-size: 1.1rem;
    line-height: 1;
}

.app-nav {
    display: grid;
    gap: 6px;
    flex-shrink: 0;
}

.app-nav-main {
    margin-bottom: 4px;
}

.app-nav-divider {
    height: 1px;
    margin: 14px 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.app-nav-admin {
    margin-bottom: 4px;
}

.app-sidebar-spacer {
    flex: 1 1 auto;
    min-height: 16px;
}

.app-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--sidebar-text);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.app-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.app-nav a.is-active {
    background: rgba(99, 102, 241, 0.18);
    color: var(--sidebar-active);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25);
}

.app-nav-icon {
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    color: #94a3b8;
}

.app-nav-icon .las {
    font-size: 1.42rem;
    line-height: 1;
}

.app-nav a:hover .app-nav-icon,
.app-nav a.is-active .app-nav-icon,
.app-nav-trigger:hover .app-nav-icon,
.app-nav-trigger.is-active .app-nav-icon {
    color: currentColor;
}

.app-nav-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.app-nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.app-nav a.is-active .app-nav-badge {
    background: #fff;
    color: #4338ca;
    font-weight: 600;
}

.app-sidebar-user {
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-user-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 10px 10px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.app-sidebar-user-trigger:hover {
    background: rgba(255, 255, 255, 0.09);
}

.app-sidebar-user-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-sidebar-user-code {
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.app-sidebar-user-name {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-user-chevron {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(226, 232, 240, 0.65);
    border-bottom: 2px solid rgba(226, 232, 240, 0.65);
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.85;
    transition: transform 0.15s ease;
}

.app-sidebar-user-trigger[aria-expanded="true"] .app-sidebar-user-chevron {
    transform: rotate(225deg) translateY(2px);
}

/* Узкий сайдбар: только иконки, подписи скрыты */
@media (max-width: 1600px) {
    :root {
        --app-sidebar-width: var(--app-sidebar-collapsed-width);
    }

    .app-sidebar {
        padding: 16px 8px;
        align-items: stretch;
    }

    .app-brand {
        justify-content: center;
        padding: 4px 0;
        margin-bottom: 14px;
        gap: 0;
    }

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

    .app-nav a,
    .app-nav-trigger {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
        position: relative;
    }

    .app-nav-label,
    .app-nav a > span:not(.app-nav-icon):not(.app-nav-badge),
    .app-nav-trigger > span:not(.app-nav-icon) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .app-nav-icon {
        width: auto;
        flex: 0 0 auto;
    }

    .app-nav-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        margin-left: 0;
        min-width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 999px;
        font-size: 0;
        line-height: 0;
        background: #818cf8;
        color: transparent;
        box-shadow: 0 0 0 2px #111827;
    }

    .app-nav a.is-active .app-nav-badge {
        background: #a5b4fc;
        color: transparent;
    }

    .app-nav-divider {
        margin: 10px 6px 8px;
    }

    .app-sidebar-user {
        padding-top: 6px;
        z-index: 60;
    }

    .app-sidebar-user-trigger {
        position: relative;
        justify-content: center;
        padding: 8px 0;
        gap: 0;
    }

    .app-sidebar-user-icon {
        display: inline-flex;
    }

    .app-sidebar-user-lines,
    .app-sidebar-user-chevron {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .app-user-dropdown {
        left: calc(100% + 8px);
        right: auto;
        bottom: 0;
        width: 220px;
    }

    /* Мгновенные подписи справа от иконок */
    .app-brand[data-nav-tip]::before,
    .app-nav a[data-nav-tip]::before,
    .app-nav-trigger[data-nav-tip]::before,
    .app-sidebar-user-trigger[data-nav-tip]::before {
        content: "";
        position: absolute;
        left: calc(100% + 6px);
        top: 50%;
        z-index: 101;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-right-color: #1e293b;
        transform: translateY(-50%) translateX(-2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
    }

    .app-brand[data-nav-tip]::after,
    .app-nav a[data-nav-tip]::after,
    .app-nav-trigger[data-nav-tip]::after,
    .app-sidebar-user-trigger[data-nav-tip]::after {
        content: attr(data-nav-tip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 100;
        padding: 7px 11px;
        border-radius: 8px;
        background: #1e293b;
        color: #f8fafc;
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.01em;
        white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
        transform: translateY(-50%) translateX(-4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
    }

    .app-brand[data-nav-tip]:hover::before,
    .app-brand[data-nav-tip]:focus-visible::before,
    .app-nav a[data-nav-tip]:hover::before,
    .app-nav a[data-nav-tip]:focus-visible::before,
    .app-nav-trigger[data-nav-tip]:hover::before,
    .app-nav-trigger[data-nav-tip]:focus-visible::before,
    .app-sidebar-user-trigger[data-nav-tip]:hover::before,
    .app-sidebar-user-trigger[data-nav-tip]:focus-visible::before,
    .app-brand[data-nav-tip]:hover::after,
    .app-brand[data-nav-tip]:focus-visible::after,
    .app-nav a[data-nav-tip]:hover::after,
    .app-nav a[data-nav-tip]:focus-visible::after,
    .app-nav-trigger[data-nav-tip]:hover::after,
    .app-nav-trigger[data-nav-tip]:focus-visible::after,
    .app-sidebar-user-trigger[data-nav-tip]:hover::after,
    .app-sidebar-user-trigger[data-nav-tip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }

    .app-sidebar-user-trigger[aria-expanded="true"][data-nav-tip]::before,
    .app-sidebar-user-trigger[aria-expanded="true"][data-nav-tip]::after {
        opacity: 0;
        visibility: hidden;
    }
}

.app-user-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    padding: 6px;
    border-radius: 12px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    z-index: 50;
}

.app-user-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

.app-user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-user-dropdown-link {
    text-decoration: none;
    color: #e2e8f0;
}

body.app-drawer-open {
    overflow: hidden;
}

.app-drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    visibility: hidden;
}

.app-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.app-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.app-drawer.is-open .app-drawer-backdrop {
    opacity: 1;
}

.app-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 100%);
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 48px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
}

.app-drawer.is-open .app-drawer-panel {
    transform: translateX(0);
}

.app-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.app-drawer-title {
    margin: 0;
    font-size: 1.15rem;
}

.app-drawer-close {
    border: none;
    background: var(--surface-muted);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.app-drawer-close:hover {
    color: var(--text);
    background: var(--line);
}

.app-drawer-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.app-drawer-panel--ps {
    width: min(896px, calc((100vw - 16px) * 0.8));
    max-width: 100vw;
    display: flex;
    flex-direction: column;
}

/* Карточка ПП: список слева остаётся кликабельным (без модального оверлея). */
.app-drawer--ps.is-open:not(.app-drawer--ps-modal) {
    pointer-events: none;
}

.app-drawer--ps.is-open:not(.app-drawer--ps-modal) .app-drawer-panel {
    pointer-events: auto;
}

.app-drawer--ps.is-open:not(.app-drawer--ps-modal) .app-drawer-backdrop {
    opacity: 0;
    pointer-events: none;
}

.app-drawer-panel--ps-create {
    width: min(720px, calc(100vw - 16px));
}

.app-drawer-body--ps {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-drawer-panel--clients-contact {
    width: min(720px, calc(100vw - 16px));
    display: flex;
    flex-direction: column;
    padding: 0;
}

.clients-contact-drawer {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.clients-contact-drawer-head {
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clients-contact-drawer-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.clients-contact-drawer-form {
    flex: 1;
    min-height: 0;
}

.clients-contact-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 8px 44px;
}

.clients-contact-drawer-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clients-contact-drawer-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.clients-contact-drawer-products {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.clients-contact-drawer-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.clients-contact-drawer-products-title {
    margin: 0;
}

.clients-contact-product-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.clients-contact-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}

.clients-contact-product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.clients-contact-product-item input {
    flex-shrink: 0;
}

.clients-contact-product-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.clients-contact-product-icon--empty {
    display: inline-block;
    background: #e2e8f0;
}

.clients-contact-product-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clients-contact-drawer-products-empty {
    margin: 16px 0 0;
    font-size: 0.92rem;
}

.clients-contact-drawer-error {
    margin-top: 12px;
}

.clients-contact-drawer-footer {
    justify-content: flex-start;
    padding-left: 20px;
}

.clients-contact-drawer-footer .clients-contact-drawer-submit {
    min-width: 140px;
}

@media (max-width: 640px) {
    .clients-contact-drawer-body {
        padding-left: 20px;
    }

    .clients-contact-drawer-pair,
    .clients-contact-products-grid {
        grid-template-columns: 1fr;
    }
}

.app-drawer-panel--clients-contact-parser {
    width: min(calc(100vw - 12px), 1400px);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.clients-contact-parser {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.clients-contact-parser-head {
    flex-shrink: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.clients-contact-parser-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}

.clients-contact-parser-subtitle {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 720px;
}

.clients-contact-parser-step {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
}

.clients-contact-parser-step.is-active {
    display: flex;
}

.clients-contact-parser-source-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 12px;
    gap: 8px;
}

.clients-contact-parser-input-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.clients-contact-parser-textarea {
    flex: 1;
    min-height: 280px;
    width: 100%;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    font: inherit;
    line-height: 1.45;
    color: var(--text);
    background: var(--surface-muted);
}

.clients-contact-parser-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #fff;
}

.clients-contact-parser-input-actions {
    flex-shrink: 0;
    padding: 0 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.clients-contact-parser-toolbar {
    flex-shrink: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.clients-contact-parser-toolbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clients-contact-parser-result-error {
    margin: 12px 22px 0;
}

.clients-contact-parser-split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 0;
    overflow: hidden;
}

.clients-contact-parser-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clients-contact-parser-col--contacts {
    border-right: 1px solid var(--line);
}

.clients-contact-parser-col-title {
    margin: 0;
    padding: 14px 18px 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.clients-contact-parser-lines-hint {
    margin: 0;
    padding: 0 18px 10px;
    font-size: 0.85rem;
}

.clients-contact-parser-contacts,
.clients-contact-parser-lines {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 18px 18px;
}

.clients-contact-parser-contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clients-contact-parser-contacts-footer {
    flex-shrink: 0;
    padding: 0 18px 14px;
}

.clients-contact-parser-contacts-footer .app-button-secondary {
    width: 100%;
}

.clients-contact-parser-empty {
    margin: 0 18px 18px;
}

.clients-contact-parser-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    padding: 12px 14px;
}

.clients-contact-parser-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.clients-contact-parser-card-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    min-width: 0;
}

.clients-contact-parser-card-delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.clients-contact-parser-card-delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.clients-contact-parser-card-delete i {
    font-size: 0.82rem;
}

.clients-contact-parser-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.clients-contact-parser-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.clients-contact-parser-field.is-drag-over {
    background: rgba(37, 99, 235, 0.06);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.clients-contact-parser-field.is-drag-over .clients-contact-parser-field-label {
    color: var(--accent);
}

.clients-contact-parser-field:has(textarea) {
    grid-column: 1 / -1;
}

.clients-contact-parser-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.clients-contact-parser-field-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.clients-contact-parser-field-wrap .clients-contact-parser-drop {
    width: 100%;
    padding-right: 34px;
}

.clients-contact-parser-field-wrap--textarea .clients-contact-parser-drop {
    padding-right: 34px;
    min-height: 64px;
}

.clients-contact-parser-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.clients-contact-parser-field-wrap--textarea .clients-contact-parser-clear {
    top: 8px;
    transform: none;
}

.clients-contact-parser-clear:hover {
    background: #f1f5f9;
    color: #64748b;
}

.clients-contact-parser-clear i {
    font-size: 0.72rem;
}

.clients-contact-parser-drop {
    width: 100%;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    background: #fff;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.clients-contact-parser-drop.is-drag-over,
.clients-contact-parser-field.is-drag-over .clients-contact-parser-drop {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
}

.clients-contact-parser-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clients-contact-parser-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    cursor: grab;
    font: inherit;
    color: var(--text);
}

.clients-contact-parser-chip.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.clients-contact-parser-chip-kind {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.clients-contact-parser-chip-text {
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
}

.clients-contact-parser-chip--phone .clients-contact-parser-chip-kind { color: #0f766e; }
.clients-contact-parser-chip--email .clients-contact-parser-chip-kind { color: #1d4ed8; }
.clients-contact-parser-chip--name .clients-contact-parser-chip-kind { color: #7c3aed; }
.clients-contact-parser-chip--position .clients-contact-parser-chip-kind { color: #b45309; }
.clients-contact-parser-chip--noise .clients-contact-parser-chip-kind { color: #94a3b8; }

@media (max-width: 960px) {
    .clients-contact-parser-split {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .clients-contact-parser-col--contacts {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .clients-contact-parser-card-fields {
        grid-template-columns: 1fr;
    }
}

.ps-drawer-loading {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Карточка ПП (drawer + полная страница) */
.ps-detail-page {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.ps-shell {
    --ps-aside-w: 220px;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    overflow: hidden;
}

.ps-shell-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ps-aside-w);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.ps-shell-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 24px 0;
    border-right: 1px solid var(--line);
}

.ps-shell-header {
    flex-shrink: 0;
}

.ps-shell-aside {
    background: #f8fafc;
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.ps-shell-aside--refused {
    background: #fef2f2;
}

.ps-shell-aside--online {
    background: #f5f3ff;
}

.ps-shell-aside--completed {
    background: #ecfdf5;
}

.ps-shell-aside-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-shell-aside-status__label {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ps-shell-aside-status__text,
.ps-shell-aside-status__manager {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.ps-shell-aside-status__text {
    font-weight: 400;
}

.ps-shell-aside-status__text--emph {
    font-weight: 600;
}

.ps-shell-aside-status__text--pre {
    white-space: pre-wrap;
}

.ps-shell-aside-status__manager {
    font-weight: 600;
    color: var(--text);
}

.ps-shell-aside-status--refused .ps-shell-aside-status__label {
    color: #991b1b;
}

.ps-shell-aside-status--refused .ps-shell-aside-status__text {
    color: #991b1b;
}

.ps-shell-aside-status--refused .ps-shell-aside-status__text--emph {
    color: #7f1d1d;
}

.ps-shell-aside-status--online .ps-shell-aside-status__label {
    color: #5b21b6;
}

.ps-shell-aside-status--online .ps-shell-aside-status__text {
    color: #4c1d95;
}

.ps-shell-aside-status--completed .ps-shell-aside-status__label {
    color: #047857;
}

.ps-shell-aside-status__actions {
    margin-top: 10px;
}

.ps-shell-aside-head {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    margin: 0 0 2px;
}

.ps-shell-aside-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-date-anchor-wrap {
    position: relative;
    z-index: 1;
}

.ps-date-anchor-wrap:has(.ps-date-popover:not([hidden])),
.ps-date-anchor-wrap:has(.ps-mgr-popover:not([hidden])),
.ps-date-anchor-wrap:has(.ps-bill-popover:not([hidden])),
.ps-date-anchor-wrap:has(.ps-ext-popover:not([hidden])),
.ps-date-anchor-wrap:has(.ps-refuse-popover:not([hidden])),
.ps-date-anchor-wrap:has(.ps-comment-popover:not([hidden])),
.ps-comment-edit-anchor:has(.ps-comment-popover:not([hidden])) {
    z-index: 30;
}

.ps-shell-aside-top {
    flex-shrink: 0;
}

.ps-shell-aside-back {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent);
}

.ps-shell-aside-user {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.ps-shell-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 0.86rem;
}

.ps-shell-actions-block {
    margin: 15px 0;
}

.ps-shell-action--extra-top-margin {
    margin-top: 10px;
}

.ps-shell-action {
    display: block;
    color: var(--text);
    cursor: default;
}

.ps-shell-action--disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.ps-shell-action--muted {
    color: #94a3b8;
}

.ps-shell-action--clickable:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.ps-shell-action--clickable:disabled:hover {
    color: #94a3b8;
}

.ps-shell-action--clickable {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ps-shell-action--clickable:hover,
.ps-shell-action--clickable[aria-expanded="true"] {
    color: var(--accent);
}

.ps-shell-action--info {
    font-weight: 600;
}

.ps-shell-action--reservation-expired {
    color: #b91c1c;
}

.ps-shell-aside-foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-shell-aside-foot-btn,
.ps-shell-aside-foot-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ps-shell-aside-foot-btn:hover,
.ps-shell-aside-foot-link:hover {
    text-decoration: underline;
}

.ps-shell-aside-foot-btn:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    text-decoration: none;
}

.ps-shell-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.ps-shell-meta-sep {
    color: #cbd5e1;
}

.ps-shell-meta-type {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.25;
}

.ps-shell-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    line-height: 1.25;
    vertical-align: middle;
}

.ps-shell-meta-item--online-until {
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}

.ps-shell-meta-cal-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ps-shell-meta-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    padding: 2px 4px;
    margin: -2px -4px;
    font: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.25;
}

.ps-shell-meta-cal-btn:hover,
.ps-shell-meta-cal-btn[aria-expanded="true"] {
    color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
}

.ps-shell-meta-cal-btn i,
.ps-shell-meta-chan i {
    flex-shrink: 0;
    opacity: 0.85;
}

.ps-shell-meta-call-reminder {
    display: none;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: #f59e0b;
    opacity: 1;
}

.ps-shell-meta-call-reminder.is-active {
    display: inline-block;
}

.ps-shell-meta-cal-wrap .ps-shell-meta-call-reminder {
    margin-left: 4px;
}

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

.ps-date-popover {
    position: absolute;
    z-index: 120;
    width: min(272px, calc(100vw - 32px));
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    overflow: visible;
}

.ps-date-popover--header {
    top: calc(100% + 8px);
    left: 0;
}

.ps-date-popover--aside {
    top: 0;
    right: calc(100% + 10px);
    left: auto;
    transform: none;
}

.ps-date-popover--header::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.ps-date-popover--aside::before {
    content: "";
    position: absolute;
    top: 12px;
    right: -7px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.ps-date-popover--tab {
    top: 0;
    left: calc(100% + 10px);
    right: auto;
    transform: none;
}

.ps-date-popover--tab::before {
    content: "";
    position: absolute;
    top: 12px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.ps-tab-refuse-wrap {
    display: inline-block;
}

.ps-tab-bill-wrap {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.ps-tab-bill-wrap:has(.ps-bill-popover:not([hidden])) {
    z-index: 30;
}

.ps-bills-link-row {
    margin: 12px 0 0;
}

.ps-bills-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    text-align: left;
}

.ps-bills-link-btn:hover {
    color: var(--accent-hover);
}

.ps-mgr-popover {
    z-index: 150;
    width: min(450px, calc(100vw - 32px));
    padding-top: 12px;
}

.ps-bill-popover {
    z-index: 150;
    width: min(450px, calc(100vw - 32px));
    padding-top: 12px;
}

.ps-ext-popover {
    z-index: 150;
    width: min(450px, calc(100vw - 32px));
    padding-top: 12px;
}

.ps-ext-popover-title {
    margin: 0 0 12px;
    padding-right: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.ps-ext-status {
    margin: 0 0 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text);
}

.ps-ext-status--ok {
    color: #15803d;
    font-weight: 600;
}

.ps-ext-status--deny {
    color: #b91c1c;
    font-weight: 600;
}

.ps-ext-status--pending {
    color: var(--text-muted);
}

.ps-ext-limits {
    margin: 0 0 10px;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.ps-ext-limits[hidden] {
    display: none;
}

.ps-bill-popover-title {
    margin: 0 0 12px;
    padding-right: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.ps-bill-field {
    display: block;
    margin-bottom: 10px;
}

.ps-bill-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: #fff;
}

.ps-bill-input:hover,
.ps-bill-input:focus {
    border-color: #b91c1c;
    outline: none;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.15);
}

.ps-refuse-popover {
    z-index: 150;
    width: min(450px, calc(100vw - 32px));
    padding-top: 12px;
}

.ps-refuse-field {
    display: block;
    margin-bottom: 10px;
}

.ps-refuse-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 32px 8px 10px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    cursor: pointer;
}

.ps-refuse-select:hover,
.ps-refuse-select:focus {
    border-color: #b91c1c;
    outline: none;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.15);
}

.ps-refuse-select:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    background-color: #f8fafc;
}

.ps-refuse-comment {
    width: 100%;
    box-sizing: border-box;
    min-height: 88px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
    background: #fff;
}

.ps-refuse-comment::placeholder {
    color: #94a3b8;
}

.ps-refuse-comment:hover,
.ps-refuse-comment:focus {
    border-color: #b91c1c;
    outline: none;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.15);
}

.ps-mgr-search-wrap {
    position: relative;
    margin-bottom: 8px;
}

.ps-mgr-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.82rem;
    pointer-events: none;
}

.ps-mgr-search-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: #fff;
}

.ps-mgr-search-input:hover,
.ps-mgr-search-input:focus {
    border-color: #b91c1c;
    outline: none;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.15);
}

.ps-mgr-results {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.ps-mgr-results[hidden] {
    display: none !important;
}

.ps-mgr-results-item {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.35;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    white-space: normal;
}

.ps-mgr-results-item + .ps-mgr-results-item {
    border-top: 1px solid #f1f5f9;
}

.ps-mgr-results-item:hover,
.ps-mgr-results-item.is-active {
    background: #f8fafc;
}

.ps-mgr-results-code {
    font-weight: 600;
}

.ps-mgr-results-name {
    color: var(--text-muted);
}

.ps-mgr-results-empty {
    padding: 8px 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ps-date-popover[hidden] {
    display: none !important;
}

.ps-date-popover-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

.ps-date-popover-close:hover {
    color: var(--text);
    background: #f1f5f9;
}

.ps-date-popover-fields {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 20px;
    overflow: visible;
}

.ps-date-field {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.ps-date-field--date {
    flex: 0 0 130px;
    max-width: 130px;
}

.ps-date-field--time {
    flex: 0 0 64px;
    max-width: 64px;
}

.ps-date-input,
.ps-time-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: #fff;
}

.ps-date-field--date .ps-date-input {
    padding-right: 36px;
}

.ps-date-input:hover,
.ps-date-input:focus,
.ps-time-input:hover,
.ps-time-input:focus {
    border-color: #b91c1c;
    outline: none;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.15);
}

.ps-date-input--invalid,
.ps-date-input.ps-date-input--invalid:hover,
.ps-date-input.ps-date-input--invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18);
}

.ps-date-field-tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 130;
    display: none;
    width: max-content;
    max-width: 160px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    pointer-events: none;
    white-space: normal;
}

.ps-date-field-tooltip::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #e2e8f0;
}

.ps-date-field-tooltip::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(1px, -50%);
    border: 5px solid transparent;
    border-right-color: #fff;
}

.ps-date-field--date:hover .ps-date-field-tooltip,
.ps-date-field--date:focus-within .ps-date-field-tooltip {
    display: block;
}

.ps-date-popover--cal-open .ps-date-field-tooltip {
    display: none !important;
}

.ps-date-cal-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #64748b;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 6px;
}

.ps-date-cal-toggle:hover {
    color: var(--accent);
    background: #f1f5f9;
}

.ps-time-input::placeholder {
    color: #94a3b8;
}

.ps-date-picker {
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 4px 6px 8px;
    background: #fafbfc;
}

.ps-date-picker[hidden] {
    display: none !important;
}

.ps-date-picker-scroll {
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ps-date-picker-scroll::-webkit-scrollbar {
    display: none;
}

.ps-date-picker-month {
    padding: 8px 4px 12px;
}

.ps-date-picker-month + .ps-date-picker-month {
    border-top: 1px solid #e2e8f0;
}

.ps-date-picker-month-title {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.ps-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 0.72rem;
}

.ps-date-picker-dow {
    text-align: center;
    color: #94a3b8;
    padding: 2px 0 4px;
    font-weight: 500;
}

.ps-date-picker-dow.is-weekend {
    color: #dc2626;
}

.ps-date-picker-day {
    border: none;
    background: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    cursor: pointer;
    color: var(--text);
    font: inherit;
    font-size: 0.74rem;
    line-height: 1;
}

.ps-date-picker-day.is-other {
    color: #cbd5e1;
    pointer-events: none;
}

.ps-date-picker-day.is-weekend:not(.is-disabled):not(.is-selected) {
    color: #dc2626;
}

.ps-date-picker-day.is-disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.ps-date-picker-day.is-valid:not(.is-selected) {
    background: #dcfce7;
}

.ps-date-picker-day.is-selected {
    background: #64748b;
    color: #fff;
}

.ps-date-picker-day.is-valid:hover:not(.is-selected) {
    background: #bbf7d0;
}

.ps-date-reservation {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.35;
}

.ps-date-reservation--expired {
    color: #b91c1c;
}

.ps-date-reservation--empty[hidden] {
    display: none !important;
}

.ps-date-popover-error {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #b91c1c;
    line-height: 1.35;
}

.ps-date-popover-error[hidden] {
    display: none !important;
}

.ps-date-popover-actions {
    display: flex;
    gap: 8px;
}

.ps-date-submit,
.ps-date-cancel {
    flex: 1;
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
}

.ps-date-submit {
    border: none;
    background: #e2e8f0;
    color: #94a3b8;
}

.ps-date-submit:not(:disabled) {
    background: #334155;
    color: #fff;
}

.ps-date-submit:not(:disabled):hover {
    background: #1e293b;
}

.ps-date-cancel {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--text);
}

.ps-date-cancel:hover {
    background: #f8fafc;
}

.ps-shell-meta-product {
    flex-wrap: nowrap;
    gap: 6px;
    color: var(--text);
    font-weight: 500;
    max-width: min(300px, 100%);
}

.ps-shell-product-icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ps-shell-product-icon--empty {
    background: #f1f5f9;
    border-radius: 2px;
}

.ps-shell-meta-product-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    line-height: inherit;
}

.ps-shell-title-row {
    margin-bottom: 16px;
}

.ps-shell-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.ps-shell-title-text {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ps-shell-title-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ps-shell-title-link:hover,
.ps-shell-title-link:focus-visible {
    color: inherit;
    text-decoration: none;
}

.ps-shell-title-temp {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: #94a3b8;
}

.ps-shell-title-temp--1 {
    background: #ef4444;
}

.ps-shell-title-temp--2 {
    background: #f9ad01;
}

.ps-shell-title-temp--3 {
    background: #3b82f6;
}

.ps-shell-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.ps-shell-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
}

.ps-shell-close:hover {
    color: var(--text);
    background: var(--line);
}

.ps-shell-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    border-bottom: 1px solid var(--line);
    margin: 0 -4px 0;
    padding: 0 4px;
}

.ps-shell-tab {
    border: none;
    background: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 10px 2px 12px;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.ps-shell-tab:hover {
    color: var(--text);
}

.ps-shell-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ps-shell-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 28px;
}

.ps-shell-panel[hidden] {
    display: none !important;
}

.ps-tab-muted {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.ps-tab-fake-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
}

.ps-tab-fake-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ps-tab-fake-link:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.ps-tab-contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-tab-related {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ps-related-group-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text);
}

.ps-related-group-title-value {
    font-weight: 700;
}

.ps-related-group-list {
    margin: 0;
}

.ps-tab-contacts-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0;
}

.ps-tab-contacts .ps-tab-block,
.clients-org-contact-list.ps-tab-block,
.clients-org-links-list.ps-tab-block {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.ps-tab-contacts .ps-tab-block,
.clients-org-contact-list.ps-tab-block {
    margin: 0;
}

.clients-org-links-list.ps-tab-block {
    margin-top: 16px;
}

.ps-tab-contacts .ps-tab-block .ps-contacts-section,
.clients-org-contact-list.ps-tab-block .ps-contacts-section,
.clients-org-links-list.ps-tab-block .ps-contacts-section {
    margin-top: 0;
}

.ps-tab-details {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    background: var(--surface-muted);
}

.ps-tab-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
}

.ps-partner-comments-block {
    display: flex;
    flex-direction: column;
}

.ps-partner-comments-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 4pt;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.ps-partner-comments-count {
    display: flex;
    align-items: center;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    color: inherit;
    margin: 0 0 4pt;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
}

.ps-partner-comments-toggle::before {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent currentColor;
    opacity: 0.75;
    transition: transform 0.35s ease;
}

.ps-partner-comments-block.is-expanded .ps-partner-comments-toggle::before {
    transform: rotate(90deg);
}

.ps-partner-comments-toggle:hover {
    color: var(--accent);
}

.ps-partner-comments-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.ps-partner-comments-block.is-expanded .ps-partner-comments-collapse {
    grid-template-rows: 1fr;
}

.ps-partner-comments-collapse-inner {
    overflow: hidden;
    min-height: 0;
}

.ps-partner-comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ps-partner-comments-block .ps-partner-comments--older {
    margin-top: 0;
}

.ps-partner-comments-block .ps-partner-comments--latest {
    margin-top: 0;
}

.ps-partner-comment {
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.ps-partner-comment--billing {
    margin: 8px 0;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-top: 1px solid rgba(79, 70, 229, 0.14);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(238, 242, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(79, 70, 229, 0.04);
}

.ps-partner-comment--local {
    margin: 8px 0;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(13, 148, 136, 0.16);
    border-top: 1px solid rgba(13, 148, 136, 0.16);
    border-left: 3px solid #0d9488;
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(240, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(13, 148, 136, 0.05);
}

.ps-partner-comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.ps-partner-comment-origin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ps-partner-comment-author {
    font-weight: 600;
}

.ps-partner-comment-tail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ps-partner-comment-time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ps-comment-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}

.ps-comment-source--billing {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(79, 70, 229, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ps-comment-source--billing i {
    font-size: 0.72rem;
    opacity: 0.9;
}

.ps-comment-source--local {
    color: #0f766e;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(13, 148, 136, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ps-comment-source--local i {
    font-size: 0.72rem;
    opacity: 0.92;
}

.ps-comment-source--kontur {
    color: #9a3412;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(234, 88, 12, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ps-comment-source--kontur i {
    font-size: 0.72rem;
    opacity: 0.92;
}

.ps-comment-partner-name {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ps-comment-partner-name::before {
    content: "·";
    margin-right: 8px;
    color: #cbd5e1;
}

.ps-partner-comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ps-partner-comment-actions form {
    margin: 0;
}

.ps-partner-comment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.ps-partner-comment-action:hover,
.ps-partner-comment-action:focus-visible {
    border-color: var(--line);
    background: #fff;
    color: var(--accent);
}

.ps-partner-comment-action--danger:hover,
.ps-partner-comment-action--danger:focus-visible {
    color: #b91c1c;
}

.ps-partner-comment-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ps-partner-comment-body {
    font-size: 0.88rem;
    line-height: 1.45;
}

.ps-comment-edit-anchor {
    position: relative;
    display: block;
}

.ps-partner-comment.is-editing,
.ps-history-item.is-editing {
    position: relative;
    z-index: 25;
}

.ps-comment-create-block {
    display: block;
    width: 100%;
}

.ps-comment-create-block[hidden] {
    display: none !important;
}

.bill-drawer-comments:has(.ps-partner-comments-block) .ps-js-ps-comment-trigger {
    display: none;
}

.ps-comment-editor--inline {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.ps-comment-editor--inline::before {
    display: none;
}

.ps-comment-editor--inline .ps-date-popover-actions {
    justify-content: flex-start;
}

.ps-comment-editor--inline .ps-date-submit,
.ps-comment-editor--inline .ps-date-cancel {
    flex: 0 0 auto;
    min-width: 108px;
}

.ps-comment-popover {
    top: calc(100% + 8px);
    left: 0;
    width: min(420px, calc(100vw - 32px));
}

.ps-comment-edit-anchor .ps-comment-popover {
    width: min(420px, calc(100vw - 32px));
    max-width: min(420px, 100%);
}

.ps-comment-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.ps-comment-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.ps-comment-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fafc;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.ps-comment-md-btn:hover {
    border-color: #cbd5e1;
    background: #fff;
    color: var(--accent);
}

.ps-comment-editor-field {
    display: block;
    margin: 0 0 8px;
}

.ps-comment-editor-input {
    display: block;
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}

.ps-comment-editor-input::placeholder {
    color: #94a3b8;
}

.ps-comment-editor-input:hover,
.ps-comment-editor-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

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

.md-body > :first-child {
    margin-top: 0;
}

.md-body > :last-child {
    margin-bottom: 0;
}

.md-body p {
    margin: 0.45em 0;
}

.md-body .md-list {
    margin: 0.45em 0;
    padding-left: 1.35em;
}

.md-body .md-list li {
    margin: 0.2em 0;
}

.md-body .md-table {
    width: 100%;
    margin: 0.6em 0;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.md-body .md-table th,
.md-body .md-table td {
    border: 1px solid var(--line);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.md-body .md-table th {
    background: #f8fafc;
    font-weight: 600;
}

.md-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-body a:hover {
    text-decoration-thickness: 2px;
}

.md-body .md-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5em 0;
    border-radius: 4px;
}

.ps-stage-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.ps-stage-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.ps-stage-item:last-child {
    border-bottom: none;
}

.ps-stage-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ps-stage-row--empty {
    display: block;
    grid-template-columns: 1fr;
    color: var(--text-muted);
    cursor: default;
    padding: 10px 0;
}

.ps-stage-row:not(:disabled):hover,
.ps-stage-row:not(:disabled):focus-visible {
    background: rgba(15, 23, 42, 0.04);
    outline: none;
}

.ps-stage-row:disabled:not(.ps-stage-row--empty) {
    color: #cbd5e1;
    cursor: default;
}

.ps-stage-row:disabled .ps-stage-check {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.ps-stage-row:disabled.is-done .ps-stage-check {
    border-color: #cbd5e1;
    background: #cbd5e1;
}

.ps-stage-row:disabled .ps-stage-when {
    color: #cbd5e1;
}

.ps-stage-row.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.ps-stage-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #94a3b8;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}

.ps-stage-row.is-done .ps-stage-check::before {
    content: '✓';
}

.ps-stage-row.is-done .ps-stage-check {
    border-color: var(--text);
    background: var(--text);
}

.ps-stage-name {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    pointer-events: none;
}

.ps-stage-row.is-done .ps-stage-name {
    color: var(--text-muted);
}

.ps-stage-row.is-done .ps-stage-name::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    pointer-events: none;
}

.ps-stage-row.is-striking .ps-stage-name::after {
    transform: scaleX(0);
    animation: ps-stage-strike-through 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ps-stage-strike-through {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-stage-row.is-striking .ps-stage-name::after {
        animation: none;
        transform: scaleX(1);
    }
}

.ps-stage-when {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    pointer-events: none;
}

.ps-tab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.ps-btn {
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
}

.ps-btn:disabled {
    cursor: not-allowed;
}

.ps-btn--ghost {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.ps-btn--ghost:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.ps-btn--ghost:not(:disabled):hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ps-btn--outline {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.ps-btn--outline:disabled {
    color: #94a3b8;
}

.ps-bills-section {
    margin-top: 24px;
    overflow: visible;
}

.ps-bills-table-wrap {
    overflow-x: auto;
}

.ps-bills-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.ps-bills-table th,
.ps-bills-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.ps-bills-table thead th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.82rem;
}

.ps-bills-table th.ps-bills-table-th-sums,
.ps-bills-table td.ps-bills-table-sums {
    text-align: right;
}

.ps-bills-table-th-sums,
.ps-bills-table-sums {
    width: 55%;
    padding-right: 10px;
}

.ps-bills-table-head-sums,
.ps-bills-table-sums-wrap {
    display: grid;
    grid-template-columns: max-content 1px minmax(5.5em, max-content);
    column-gap: 12px;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    width: fit-content;
    max-width: 100%;
}

.ps-bills-table-head-sums {
    min-height: auto;
}

.ps-bills-table-th-paid,
.ps-bills-table-th-amount,
.ps-bill-sum-value--paid,
.ps-bill-sum-value--total {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.ps-bills-table-head-sep {
    width: 1px;
    height: 1.15em;
    justify-self: center;
    visibility: hidden;
}

.ps-bill-sum-sep {
    width: 1px;
    height: 1.15em;
    background: #64748b;
    justify-self: center;
}

.ps-bills-table tbody tr {
    background: var(--surface-muted);
}

.ps-bills-table-th-date,
.ps-bills-table-date {
    width: 1%;
    white-space: nowrap;
    color: var(--text-muted);
}

.ps-bills-table-date {
    font-variant-numeric: tabular-nums;
}

.ps-bills-table-num {
    font-weight: 500;
}

.ps-bills-table-row--link {
    cursor: pointer;
}

.ps-bills-table-row--link:hover .ps-bills-table-num {
    color: var(--accent);
}

.ps-bills-table-sums-wrap {
    position: relative;
    min-height: 36px;
    min-width: 10rem;
}

.ps-bill-sum-value {
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.ps-bill-sum-value--paid {
    color: var(--text-muted);
    font-weight: 500;
}


.ps-bill-unlink {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ps-bill-unlink-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
}

.ps-bill-unlink-text {
    line-height: 1.2;
}

.ps-bills-table-row:hover .ps-bill-unlink,
.ps-bill-unlink:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.ps-bills-table-row:hover .ps-bills-table-sums-wrap .ps-bill-sum-value {
    opacity: 0.2;
}

.ps-bill-unlink:hover,
.ps-bill-unlink:focus-visible {
    color: var(--text);
    background: var(--line);
}

.ps-bill-unlink:disabled {
    opacity: 0.55;
    cursor: wait;
    pointer-events: none;
}

.ps-summary-dl {
    margin: 0;
}

.ps-summary-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px 16px;
    padding: 10px 0;
    font-size: 0.88rem;
}

.ps-summary-row dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.ps-summary-row dd {
    margin: 0;
    line-height: 1.45;
}

.ps-summary-billing-link {
    margin-top: 6px;
}

.ps-summary-billing-link a {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--accent);
}

.ps-summary-billing-link a:hover {
    color: var(--accent-hover);
}

.ps-summary-brief-link {
    font-weight: 500;
    color: var(--accent);
}

.ps-summary-brief-link:hover {
    color: var(--accent-hover);
}

.ps-summary-source-comment {
    margin-top: 12px;
}

.ps-contacts-section {
    margin-top: 8px;
}

.ps-tab-contacts .ps-tab-block .ps-contacts-section-empty,
.clients-org-contact-list.ps-tab-block .ps-contacts-section-empty {
    margin-top: 4px;
}

.ps-contacts-section-empty {
    margin: 4px 0 0;
}

.ps-contacts-list {
    margin-top: 2px;
}

.ps-contacts-list .ps-org-contact-card,
.ps-contacts-list .ps-org-contact-link-card {
    list-style: none;
}

.ps-org-contact-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.ps-org-contact-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ps-org-contact-temp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}

.ps-org-contact-temp-dot--1 {
    background: #ef4444;
}

.ps-org-contact-temp-dot--2 {
    background: #f9ad01;
}

.ps-org-contact-temp-dot--3 {
    background: #3b82f6;
}

.ps-org-contact-name-muted {
    color: var(--text-muted);
    font-weight: 500;
}

.ps-org-contact-product-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ps-org-contact-product-icon {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.ps-org-contact-position {
    color: var(--text-muted);
    font-weight: 500;
}

.ps-org-contact-action--transfer {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--accent);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.ps-org-contact-action--transfer:hover:not(:disabled),
.ps-org-contact-action--transfer:focus-visible {
    border-color: #c5d4f5;
    background: #f8fafc;
    color: var(--accent);
}

.ps-org-contact-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.ps-org-contact-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ps-org-contact-link {
    color: var(--accent);
    text-decoration: none;
    word-break: break-word;
}

.ps-org-contact-link:hover,
.ps-org-contact-link:focus-visible {
    text-decoration: underline;
    color: var(--accent-hover);
}

.ps-org-contact-text {
    color: var(--text);
}

.ps-org-contact-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.ps-org-contact-comment-icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--text-muted);
    opacity: 0.72;
}

.ps-org-contact-comment-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
}

.ps-org-contact-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(226, 232, 240, 0.95);
}

.ps-org-contact-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    padding: 2px 0;
}

.ps-org-contact-link-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ps-org-contact-link-row-icons {
    flex-shrink: 0;
}

.ps-org-contact-link-row-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--text);
    white-space: nowrap;
}

.ps-org-contact-link-row .ps-partner-comment-actions {
    flex-shrink: 0;
}

.js-clients-contact-link-open {
    cursor: pointer;
}

.clients-link-list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
}

.clients-link-list-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.clients-link-list-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.clients-link-list-back:hover,
.clients-link-list-back:focus-visible {
    color: var(--text);
    background: rgba(148, 163, 184, 0.14);
}

.clients-link-list-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.clients-link-list-comment {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.clients-link-list-comment-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 0.88rem;
    line-height: 1;
    opacity: 0.72;
}

.clients-link-list-comment-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
}

.clients-link-list-orgs {
    display: flex;
    flex-direction: column;
}

.clients-list-inn-line .clients-list-org-star {
    flex-shrink: 0;
    color: #f59e0b;
    font-size: 0.72rem;
    margin-right: 2px;
}

.ps-org-contact-card.is-muted {
    opacity: 0.72;
}

.clients-org-contacts-block .ps-contacts-section + .ps-contacts-section {
    margin-top: 14px;
}

.ps-contact-transfer-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--accent);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ps-contact-transfer-btn:hover:not(:disabled) {
    border-color: #c7d2fe;
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.ps-contact-transfer-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.ps-history-day {
    background: #f1f5f9;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 16px 0 0;
}

.ps-history-day:first-child {
    margin-top: 0;
}

.ps-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ps-history-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0;
}

.ps-history-time {
    flex: 0 0 3rem;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    text-align: right;
    padding-top: 13px;
    font-variant-numeric: tabular-nums;
}

.ps-history-card {
    flex: 1;
    min-width: 0;
}

.ps-history-item {
    font-size: 0.88rem;
}

.ps-history-item--billing {
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-bottom: 1px solid rgba(79, 70, 229, 0.14);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(238, 242, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(79, 70, 229, 0.04);
}

.ps-history-item--local {
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(13, 148, 136, 0.16);
    border-bottom: 1px solid rgba(13, 148, 136, 0.16);
    border-left: 3px solid #0d9488;
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(240, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(13, 148, 136, 0.05);
}

.ps-history-item--kontur {
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(234, 88, 12, 0.16);
    border-bottom: 1px solid rgba(234, 88, 12, 0.16);
    border-left: 3px solid #ea580c;
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(234, 88, 12, 0.05);
}

.ps-history-item--event {
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(100, 116, 139, 0.16);
    border-bottom: 1px solid rgba(100, 116, 139, 0.16);
    border-left: 3px solid #64748b;
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(100, 116, 139, 0.05);
}

.ps-history-event-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
}

.ps-history-event-info-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    cursor: pointer;
}

.ps-history-event-info-btn:hover {
    border-color: rgba(100, 116, 139, 0.55);
    color: var(--text);
    background: #fff;
}

.ps-history-event-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ps-history-event-title,
.ps-history-event-value {
    font-size: 0.9rem;
}

.ps-history-event-value--link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ps-history-event-value--link:hover {
    color: var(--accent);
}

.ps-history-event-author {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.ps-history-event-body {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.ps-comment-source--event {
    color: #475569;
}

.ps-comment-source--event i {
    color: #64748b;
}

.ps-history-comment-body {
    font-size: 0.88rem;
    line-height: 1.45;
}

.ps-history-item--billing .ps-partner-comment-head,
.ps-history-item--local .ps-partner-comment-head,
.ps-history-item--kontur .ps-partner-comment-head {
    margin-bottom: 8px;
}

/* Карточка ПП на всю высоту окна: прокрутка только основного поля */
body.app-page-ps:has(.ps-detail-page) {
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

body.app-page-ps:has(.ps-detail-page) .app-shell {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}

body.app-page-ps:has(.ps-detail-page) .app-main-ps {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.app-page-ps:has(.ps-detail-page) .ps-detail-page {
    flex: 1;
    min-height: 0;
}

.app-drawer-body--ps .ps-shell {
    flex: 1;
    min-height: 0;
}

@media (max-width: 900px) {
    .app-drawer-body--ps {
        overflow-y: auto;
    }
}

/* Уведомления (toast), универсальные */
.app-instant-tip-anchor {
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
}

.app-instant-tip {
    position: fixed;
    z-index: 10050;
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    pointer-events: none;
    white-space: normal;
    overflow: visible;
}

.app-instant-tip[hidden] {
    display: none !important;
}

.app-instant-tip[data-placement="left"]::before,
.app-instant-tip[data-placement="left"]::after,
.app-instant-tip[data-placement="right"]::before,
.app-instant-tip[data-placement="right"]::after,
.app-instant-tip[data-placement="top"]::before,
.app-instant-tip[data-placement="top"]::after,
.app-instant-tip[data-placement="bottom"]::before,
.app-instant-tip[data-placement="bottom"]::after {
    content: "";
    position: absolute;
    border: 6px solid transparent;
    z-index: 1;
}

.app-instant-tip[data-placement="left"]::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #e2e8f0;
}

.app-instant-tip[data-placement="left"]::after {
    left: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-left-color: #fff;
    z-index: 2;
}

.app-instant-tip[data-placement="right"]::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #e2e8f0;
}

.app-instant-tip[data-placement="right"]::after {
    right: calc(100% - 1px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-right-color: #fff;
    z-index: 2;
}

.app-instant-tip[data-placement="top"]::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-top-color: #e2e8f0;
}

.app-instant-tip[data-placement="top"]::after {
    left: 50%;
    top: calc(100% - 1px);
    transform: translateX(-50%);
    border-width: 5px;
    border-top-color: #fff;
    z-index: 2;
}

.app-instant-tip[data-placement="bottom"]::before {
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border-bottom-color: #e2e8f0;
}

.app-instant-tip[data-placement="bottom"]::after {
    left: 50%;
    bottom: calc(100% - 1px);
    transform: translateX(-50%);
    border-width: 5px;
    border-bottom-color: #fff;
    z-index: 2;
}

.app-toast-host {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0;
    width: auto;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    pointer-events: none;
}

.app-toast {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: calc(100vw - 48px);
    padding: 10px 10px 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #334155;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition-duration: 0.18s;
}

.app-toast-message {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    color: #ffffff;
    white-space: normal;
    word-wrap: break-word;
}

.app-toast--debug {
    align-items: flex-start;
    max-width: min(920px, calc(100vw - 48px));
}

.app-toast--debug .app-toast-message {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 400;
    max-height: min(70vh, 560px);
    overflow: auto;
}

.app-toast-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.app-toast-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.app-toast-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Варианты оставлены для API; визуально единый тёмный стиль */
.app-toast--success,
.app-toast--error,
.app-toast--info {
    border-color: rgba(255, 255, 255, 0.12);
    background: #334155;
}

.app-toast--success .app-toast-message,
.app-toast--error .app-toast-message,
.app-toast--info .app-toast-message {
    color: #ffffff;
}

.app-drawer-body--profile {
    padding: 20px 20px 24px;
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 120px);
}

.app-drawer-panel--profile {
    width: min(480px, 100%);
    border-left: none;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.app-profile-hero {
    position: relative;
    padding: 28px 24px 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
        linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #7c3aed 100%);
    color: #fff;
    flex-shrink: 0;
}

.app-profile-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.35rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.app-profile-close:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
}

.app-profile-hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-top: 8px;
}

.app-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.35);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.app-profile-name {
    margin: 6px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.app-profile-email {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    word-break: break-word;
}

.app-profile-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.app-profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.app-profile-badge--role {
    color: #312e81;
    background: rgba(255, 255, 255, 0.92);
}

.app-profile-badge--2fa {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(15, 23, 42, 0.22);
    border-color: rgba(255, 255, 255, 0.18);
}

.app-profile-badge--2fa.is-on {
    color: #065f46;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.app-profile-stack {
    display: grid;
    gap: 16px;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.app-profile-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.app-profile-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--card-head-bg);
}

.app-profile-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.65rem;
    flex-shrink: 0;
}

.app-profile-card-icon--security {
    background: #ecfdf5;
    color: #059669;
}

.app-profile-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.app-profile-card-subtitle {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.app-profile-meta {
    padding: 6px 0;
}

.app-profile-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.app-profile-meta-row:last-child {
    border-bottom: none;
}

.app-profile-meta-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.app-profile-meta-label i {
    width: 1.35rem;
    text-align: center;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
}

.app-profile-meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.app-profile-subsection {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--line);
}

.app-profile-subsection:first-of-type {
    border-top: none;
}

.app-profile-subsection-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.app-profile-subsection-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f8fafc;
    color: #64748b;
    font-size: 1.45rem;
    flex-shrink: 0;
}

.app-profile-subsection-title {
    display: block;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text);
}

.app-profile-subsection-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.app-profile-subsection-body {
    margin-top: 4px;
}

.app-profile-subsection--password {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
}

.app-profile-form {
    max-width: none;
    gap: 12px;
}

.app-profile-form-actions {
    margin-top: 4px;
}

.app-profile-form-actions .app-button,
.app-profile-form-actions .app-button-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-profile-form-actions .app-button i,
.app-profile-form-actions .app-button-secondary i {
    font-size: 1.25rem;
    line-height: 1;
}

.app-profile-form-hint {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.app-profile-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.app-profile-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
}

.app-profile-status-pill i {
    font-size: 1.2rem;
    line-height: 1;
}

.app-profile-status-pill.is-success {
    color: #047857;
    background: var(--success-soft);
    border: 1px solid #a7f3d0;
}

.app-profile-totp-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-profile-totp-start-btn i {
    font-size: 1.25rem;
    line-height: 1;
}

.app-profile-totp-text {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.app-profile-totp-apps {
    display: grid;
    gap: 4px;
}

.app-profile-totp-app-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.app-profile-totp-store-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--accent);
    background: var(--accent-soft);
    text-decoration: none;
}

.app-profile-totp-store-link:hover {
    color: #ffffff;
    background: var(--accent);
}

.app-profile-totp-store-link i {
    font-size: 1.05rem;
    line-height: 1;
}

.app-profile-totp-store-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
}

.app-profile-totp-store-icon svg {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
}

.app-profile-totp-store-link--rustore .app-profile-totp-store-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.app-profile-totp-store-link--rustore .app-profile-totp-store-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.app-profile-totp-muted {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.app-profile-totp-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 12px 0 16px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px dashed #cbd5e1;
}

.app-profile-totp-qr {
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.app-profile-secret-input,
.app-profile-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.04em;
}

.app-profile-totp-confirm-field {
    margin-top: 16px;
}

.app-profile-recovery-panel {
    padding-top: 4px;
}

.app-profile-recovery-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.app-profile-recovery-callout i {
    font-size: 1.65rem;
    margin-top: 2px;
}

.app-profile-recovery-callout strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.92rem;
}

.app-profile-recovery-callout p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #b45309;
}

.app-profile-totp-recovery-list {
    margin: 0 0 16px;
    padding: 14px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.86rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
}

.app-profile-totp-recovery-list li {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

@media (max-width: 420px) {
    .app-drawer-panel--profile {
        width: 100%;
    }

    .app-profile-meta-row {
        flex-direction: column;
        gap: 6px;
    }

    .app-profile-meta-value {
        text-align: left;
    }

    .app-profile-totp-recovery-list {
        grid-template-columns: 1fr;
    }
}

.app-profile-totp-disable {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.app-profile-card--security .app-alert {
    margin-bottom: 12px;
}

.app-profile-totp-admin {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
}

.app-profile-totp-admin h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.app-login-link-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--link, #2563eb);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.app-login-link-btn:hover {
    color: var(--link-hover, #1d4ed8);
}

.app-form-compact .app-field label {
    font-size: 0.88rem;
}

.app-form-compact .app-field input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.app-main {
    padding: 28px;
}

.app-main-shell-naked {
    padding-top: 20px;
}

.app-main-home {
    width: 100%;
    max-width: none;
    padding: 24px 28px 32px;
    box-sizing: border-box;
}

.app-main-payments {
    width: 100%;
    max-width: none;
    padding: 24px 28px 32px;
    box-sizing: border-box;
}

.app-main-bills {
    width: 100%;
    max-width: none;
    padding: 24px 28px 32px;
    box-sizing: border-box;
}

/* Страница «Клиенты» */
.app-main-clients {
    padding: 20px 28px 20px;
}

/* Сплит с двумя колонками: отдельная прокрутка списка и карточки (страница не скроллится) */
body.app-page-clients:has(.clients-layout) {
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

body.app-page-clients:has(.clients-layout) .app-shell {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

body.app-page-clients:has(.clients-layout) .app-main-clients {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.app-page-clients:has(.clients-layout) .app-main-clients .clients-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 342px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
}

body.app-page-clients:has(.clients-layout) .app-main-clients .clients-list-pane {
    margin-bottom: 0;
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

body.app-page-clients:has(.clients-layout) .app-main-clients .clients-detail-pane {
    max-height: none;
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

body.app-page-clients:has(.clients-layout) .clients-list-scroll {
    overscroll-behavior: contain;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.app-user-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.app-user-email {
    font-weight: 600;
    color: var(--text);
}

.app-user-role {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.app-logout-btn {
    padding: 8px 14px;
    min-height: auto;
    font-size: 0.9rem;
}

.app-login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, var(--body-gradient-a), transparent 35%),
        radial-gradient(circle at 80% 80%, var(--body-gradient-b), transparent 30%),
        var(--bg);
}

.app-login-wrap {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.app-login-card {
    padding: 32px;
    border-radius: 20px;
    background: var(--login-card-bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.app-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.app-login-muted {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.app-login-form .app-field {
    margin-bottom: 16px;
}

.app-login-submit {
    width: 100%;
    margin-top: 8px;
}

.app-login-hint {
    margin: 20px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

.app-login-wrap--wide {
    max-width: 480px;
}

.app-login-forgot {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.88rem;
}

.app-login-forgot a {
    color: var(--link, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.app-login-forgot a:hover {
    color: var(--link-hover, #1d4ed8);
    text-decoration: underline;
}

.app-login-lead {
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.app-login-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: login-step;
}

.app-login-steps li {
    flex: 1;
    position: relative;
    padding: 10px 8px 10px 34px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    counter-increment: login-step;
}

.app-login-steps li::before {
    content: counter(login-step);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    background: #e2e8f0;
    color: #475569;
}

.app-login-steps li.is-done {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.app-login-steps li.is-done::before {
    content: '✓';
    background: #22c55e;
    color: #fff;
}

.app-login-steps li.is-active {
    color: #312e81;
    background: #eef2ff;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.08);
}

.app-login-steps li.is-active::before {
    background: #4f46e5;
    color: #fff;
}

.app-login-success {
    text-align: center;
    padding: 8px 0 4px;
}

.app-login-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    font-size: 1.8rem;
}

.app-login-success-icon.is-ok {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
}

.app-login-success-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.app-login-success-text,
.app-login-success-hint {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.app-login-actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.app-login-secondary-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.app-login-mode-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: 12px;
    background: #f1f5f9;
}

.app-login-mode-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-login-mode-btn.is-active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.app-topbar h1 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
}

.app-topbar p {
    margin: 8px 0 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    max-width: 720px;
}

.app-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.app-panel-body {
    padding: 24px;
}

.app-grid {
    display: grid;
    gap: 20px;
}

.app-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-stat-card {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.app-stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.app-stat-value {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 700;
}

.home-dashboard {
    display: grid;
    gap: 28px;
}

.home-greeting {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-muted);
}

.home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.home-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.home-kpi-card--accent {
    border-color: rgba(99, 102, 241, 0.35);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, var(--surface) 100%);
}

.home-kpi-label {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.home-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.home-kpi-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.home-charts-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: 20px;
}

.home-chart-card {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.home-chart-title,
.home-section-title {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
}

.home-chart-wrap {
    position: relative;
    height: 260px;
}

.home-chart-wrap--wide {
    height: 280px;
}

.home-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.home-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.home-quick-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background: #fafbff;
}

.home-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    flex-shrink: 0;
}

.home-quick-copy {
    display: grid;
    gap: 2px;
}

.home-quick-copy strong {
    font-size: 0.95rem;
}

.home-quick-copy span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.home-admin-panel {
    padding-top: 4px;
}

.home-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.home-stat-suffix {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-muted);
}

.home-sync-error {
    color: #dc2626;
}

.app-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.app-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.app-button,
.app-button-secondary,
.app-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.app-button {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.25);
}

.app-button:hover {
    color: #fff;
    transform: translateY(-1px);
}

.app-button-secondary {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
}

.app-button-danger {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.app-table-wrap {
    overflow-x: auto;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
}

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

.app-table th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--surface-muted);
}

.app-table th.app-table-sortable {
    padding: 0;
}

.app-table th.app-table-sortable a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.app-table th.app-table-sortable a:hover {
    color: var(--text);
    background: rgba(79, 70, 229, 0.06);
}

.app-table th.app-table-sortable.is-active a {
    color: var(--text);
}

.app-table-sort-indicator {
    font-size: 0.72rem;
    line-height: 1;
    color: var(--accent);
}

.app-table tbody tr:hover {
    background: rgba(79, 70, 229, 0.03);
}

.app-users-table td {
    vertical-align: middle;
}

.app-users-table tbody tr.app-users-row {
    cursor: default;
}

.app-instant-tip--user-card {
    width: min(340px, calc(100vw - 24px));
    max-width: 340px;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.app-user-tip {
    display: flex;
    flex-direction: column;
}

.app-user-tip-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px;
    background:
        linear-gradient(120deg, rgba(238, 242, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7;
}

.app-user-tip-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.9rem;
}

.app-user-tip-head-copy {
    min-width: 0;
    flex: 1;
}

.app-user-tip-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    word-break: break-word;
}

.app-user-tip-subtitle {
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
}

.app-user-tip-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
}

.app-user-tip-section-title {
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
}

.app-user-tip-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.app-user-tip-meta-label {
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
}

.app-user-tip-meta-value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.app-user-tip-empty {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}

.app-user-tip-provider {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.app-user-tip-provider + .app-user-tip-provider {
    margin-top: 8px;
}

.app-user-tip-provider-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.app-user-tip-provider-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.app-user-tip-provider-logo--empty {
    display: inline-block;
    background: #e2e8f0;
}

.app-user-tip-provider-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.app-user-tip-provider-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-user-tip-provider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

.app-user-tip-provider-row strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-user-tip-linked {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-user-tip-linked-chip {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.74rem;
    font-weight: 500;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .app-instant-tip--user-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .app-user-tip-head {
    background:
        linear-gradient(120deg, rgba(79, 70, 229, 0.18) 0%, rgba(26, 34, 53, 0.7) 48%, transparent 100%),
        linear-gradient(180deg, #1a2235 0%, #151c2f 100%);
    border-bottom-color: var(--line);
}

[data-theme="dark"] .app-user-tip-avatar {
    background: rgba(79, 70, 229, 0.22);
    color: #a5b4fc;
}

[data-theme="dark"] .app-user-tip-provider {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--line);
}

[data-theme="dark"] .app-user-tip-provider-logo--empty {
    background: rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] .app-user-tip-linked-chip {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--line);
    color: var(--text);
}

.app-users-col-notify {
    width: 44px;
    text-align: center;
    color: #94a3b8;
}

.app-users-col-notify .ps-partner-comment-action {
    margin: 0 auto;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.app-badge-success {
    color: var(--success);
    background: var(--success-soft);
}

.app-badge-muted {
    color: #475569;
    background: #f1f5f9;
}

.app-badge-warning {
    color: #b45309;
    background: var(--warning-soft);
}

.app-badge-role {
    color: #4338ca;
    background: var(--accent-soft);
}

.app-alert {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
}

.app-alert-success {
    color: #047857;
    background: var(--success-soft);
    border: 1px solid #a7f3d0;
}

.app-alert-error {
    color: #b91c1c;
    background: var(--danger-soft);
    border: 1px solid #fecaca;
}

.app-form {
    display: grid;
    gap: 18px;
    max-width: 720px;
}

.app-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.app-field input,
.app-field select,
.app-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
}

.app-field textarea {
    min-height: 120px;
    resize: vertical;
}

.app-field small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
}

.app-field.has-error input,
.app-field.has-error select {
    border-color: #f87171;
}

.app-field-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 0.9rem;
}

.app-check {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-check input {
    width: auto;
    min-height: auto;
    margin: 0;
    flex-shrink: 0;
}

.app-check label {
    margin: 0;
}

.app-user-permissions {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.app-user-permissions h2 {
    margin: 0;
    font-size: 1rem;
}

.app-user-permissions > p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.app-user-permissions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.app-user-permissions-list .app-field {
    margin: 0;
}

.app-user-links {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.app-user-links[hidden] {
    display: none;
}

.app-user-links h2 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.app-user-links p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.app-user-links-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.app-user-link-panel {
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr);
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.app-user-link-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.app-user-link-panel-head small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 700;
}

.app-user-link-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 220px;
    margin: 0;
    padding: 10px;
    list-style: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.app-user-link-list.is-drop-target {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.25);
}

.app-user-link-item[hidden] {
    display: none;
}

.app-user-link-card {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-user-link-card:hover,
.app-user-link-item.is-selected .app-user-link-card {
    border-color: #a5b4fc;
    background: var(--accent-soft);
}

.app-user-link-item.is-selected .app-user-link-card {
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.28);
}

.app-user-link-item.is-dragging {
    opacity: 0.55;
}

.app-user-link-name {
    font-weight: 700;
}

.app-user-link-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.app-user-link-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.app-user-link-controls .app-button-secondary {
    width: 44px;
    min-width: 44px;
    padding: 0;
    margin-bottom: 0;
}

.app-user-link-empty {
    padding: 22px 12px;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.9rem;
}

@media (max-width: 760px) {
    .app-user-links-grid {
        grid-template-columns: 1fr;
    }

    .app-user-link-controls {
        flex-direction: row;
    }

    .app-user-link-controls .app-button-secondary {
        width: 48px;
    }
}

.app-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.app-empty h2 {
    margin: 0 0 10px;
    color: var(--text);
}

.app-placeholder {
    padding: 28px;
    border-radius: var(--radius);
    border: 1px dashed #cbd5e1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
}

.app-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-inline-actions form {
    margin: 0;
}

.entity-toolbar-copy {
    color: var(--text-muted);
}

.entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.entity-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.entity-card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.12);
}

.entity-card-client {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}

.entity-card-top,
.entity-card-footer,
.entity-detail-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.entity-card-type,
.entity-detail-kicker {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4338ca;
    background: var(--accent-soft);
}

.entity-card-client .entity-card-type,
.entity-detail-hero-client .entity-detail-kicker {
    color: #0f766e;
    background: #ecfdf5;
}

.entity-card-date,
.entity-card-id,
.entity-detail-meta {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.entity-card-title,
.entity-detail-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.entity-card-subtitle,
.entity-detail-subtitle {
    margin: 0;
    color: var(--text-muted);
}

.entity-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.entity-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.entity-chip-accent {
    color: #4338ca;
    background: var(--accent-soft);
}

.entity-chip-muted {
    color: #475569;
    background: #f1f5f9;
}

.entity-chip-success {
    color: #047857;
    background: var(--success-soft);
}

.entity-card-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.entity-card-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.entity-detail {
    display: grid;
    gap: 22px;
}

.entity-detail-hero {
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(199, 210, 254, 0.9);
}

.entity-detail-hero-client {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.08));
    border-color: rgba(153, 246, 228, 0.9);
}

.entity-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.entity-meta-item-wide {
    grid-column: 1 / -1;
}

.entity-meta-item {
    padding: 16px;
    border-radius: 14px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
}

.entity-meta-label {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entity-meta-value {
    font-weight: 600;
    word-break: break-word;
}

.entity-json-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0f172a;
    overflow: hidden;
}

.entity-json-panel summary {
    padding: 14px 18px;
    cursor: pointer;
    color: #e2e8f0;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.96);
}

.entity-json {
    margin: 0;
    padding: 18px;
    overflow: auto;
    max-height: 520px;
    color: #e2e8f0;
    background: #0f172a;
    font-size: 0.84rem;
    line-height: 1.55;
}

.entity-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
    color: var(--text-muted);
}

.entity-pagination a {
    font-weight: 600;
}

.entity-section-title {
    margin: 24px 0 12px;
    font-size: 1.05rem;
    color: var(--text);
}

.entity-subtable-wrap {
    display: grid;
    gap: 12px;
}

.entity-contact-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-muted);
}

.clients-org-contacts-block {
    padding: 0;
}

.clients-org-contacts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.clients-block-head-start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.clients-block-head-start .entity-section-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.25;
}

.clients-block-reorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    gap: 0;
    width: 22px;
    height: 28px;
}

.clients-block-reorder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 13px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    transition: color 0.12s ease, opacity 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.clients-block-reorder-btn i {
    display: block;
    line-height: 1;
}

.clients-block-reorder-btn:hover:not(:disabled),
.clients-block-reorder-btn:focus-visible:not(:disabled) {
    color: var(--accent);
    opacity: 1;
    background: rgba(59, 130, 246, 0.08);
}

.clients-block-reorder-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.clients-block-reorder-btn[hidden] {
    display: none !important;
}

.clients-org-contacts-head .clients-detail-block-title {
    margin: 0;
}

.clients-org-contacts-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.clients-org-links-list .ps-contacts-section {
    margin-top: 0;
}

.ps-org-contact-link-card .ps-org-contact-head {
    margin-bottom: 0;
    align-items: center;
}

.ps-org-contact-link-card .ps-org-contact-name-row {
    align-items: center;
}

.ps-org-contact-link-card .ps-org-contact-link-row-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.app-drawer-panel--clients-contact-link {
    width: min(720px, calc(100vw - 16px));
    display: flex;
    flex-direction: column;
    padding: 0;
}

.clients-contact-link-drawer {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.clients-contact-link-drawer-head {
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clients-contact-link-drawer-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.clients-contact-link-drawer-form {
    flex: 1;
    min-height: 0;
}

.clients-contact-link-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 8px 44px;
}

.clients-contact-link-org-section {
    margin-bottom: 18px;
}

.clients-contact-link-org-search-wrap,
.clients-contact-link-contact-wrap {
    position: relative;
}

.clients-contact-link-org-search,
.clients-contact-link-contact-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--text);
    background: #fff;
}

.clients-contact-link-org-search:focus,
.clients-contact-link-contact-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.clients-contact-link-org-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clients-contact-link-org-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.clients-contact-link-org-star-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.clients-contact-link-org-star-btn.is-active {
    color: #f59e0b;
}

.clients-contact-link-org-star-btn:not(.is-active):hover,
.clients-contact-link-org-star-btn:not(.is-active):focus-visible {
    color: #94a3b8;
}

.clients-contact-link-org-star-btn.is-active:hover,
.clients-contact-link-org-star-btn.is-active:focus-visible {
    color: #d97706;
}

.clients-contact-link-org-item-label {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
}

.clients-contact-link-org-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.clients-contact-link-org-remove:hover {
    color: var(--text);
}

.clients-contact-link-field {
    margin-bottom: 18px;
}

.clients-contact-link-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.clients-contact-link-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.clients-contact-link-suggest-item {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.clients-contact-link-suggest-item:hover,
.clients-contact-link-suggest-item:focus-visible {
    background: var(--surface-muted);
}

.clients-contact-link-products {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.clients-contact-link-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.clients-contact-link-products-title {
    margin: 0;
}

.clients-contact-link-comment-field {
    margin-top: 18px;
}

.clients-contact-link-drawer-error {
    margin-top: 12px;
}

.clients-contact-link-drawer-footer {
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
}

.clients-contact-link-drawer-submit {
    min-width: 140px;
}

.clients-contact-link-drawer-delete {
    margin-left: auto;
}

@media (max-width: 640px) {
    .clients-contact-link-drawer-body {
        padding-left: 20px;
    }

    .clients-org-contacts-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.clients-bookings-frame {
    min-height: 120px;
}

.clients-bookings-block {
    margin: 0;
}

.clients-bookings-block--enter {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.clients-bookings-block--enter.is-visible {
    opacity: 1;
    transform: none;
}

.clients-bookings-block--loading .clients-bookings-table tbody tr:hover {
    background: transparent;
}

.clients-bookings-shimmer-filter {
    width: 132px;
    height: 34px;
    border-radius: 999px;
    flex-shrink: 0;
}

.clients-bookings-shimmer-row td {
    border-bottom-color: #eef2f7;
}

.clients-bookings-shimmer-row:last-child td {
    border-bottom: none;
}

.clients-bookings-shimmer-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 220px;
}

.clients-bookings-shimmer-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 4px;
}

.clients-bookings-shimmer-line {
    display: block;
    height: 12px;
    border-radius: 999px;
}

.clients-bookings-shimmer-line--product {
    width: min(100%, 148px);
}

.clients-bookings-shimmer-line--partner {
    width: min(100%, 176px);
}

.clients-bookings-shimmer-line--date {
    width: 88px;
}

.clients-bookings-shimmer-line--action {
    width: 92px;
    margin-left: auto;
}

.clients-bookings-loading-fallback {
    margin: 0;
    padding: 8px 0;
}

.clients-bookings-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    padding: 28px 20px 30px;
    text-align: center;
    border: 1px dashed #dbe3ef;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fafbfd 0%, #f8fafc 100%);
}

.clients-bookings-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 16px;
    background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
    color: var(--accent);
    font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.12);
}

.clients-bookings-empty-state-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.clients-bookings-empty-state-desc {
    margin: 0;
    max-width: 34ch;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .clients-bookings-block--enter {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .clients-bookings-block--loading .app-shimmer::after {
        animation: none;
        transform: none;
        opacity: 0.35;
    }
}

.clients-bookings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.clients-bookings-title {
    margin: 0;
}

.clients-bookings-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.clients-bookings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    line-height: 1.35;
}

.clients-bookings-table thead th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #f8fafc;
}

.clients-bookings-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.clients-bookings-table tbody tr:last-child td {
    border-bottom: none;
}

.clients-bookings-table tbody tr:hover {
    background: #f8fafc;
}

.clients-bookings-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.clients-bookings-product-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.clients-bookings-product-icon--empty {
    display: inline-block;
    border-radius: 4px;
    background: #e2e8f0;
}

.clients-bookings-product-name {
    min-width: 0;
}

.clients-bookings-cell-partner {
    color: var(--text);
}

.clients-bookings-cell-partner--own {
    background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 72%);
}

.clients-bookings-partner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.clients-bookings-partner-text {
    min-width: 0;
}

.clients-bookings-partner--own .clients-bookings-partner-text {
    font-weight: 600;
}

.clients-bookings-partner-own-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(79, 70, 229, 0.15);
    line-height: 1.35;
}

.clients-bookings-cell-upto {
    white-space: nowrap;
}

.clients-bookings-cell-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.clients-bookings-extend-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.clients-bookings-extend-btn:hover:not(:disabled),
.clients-bookings-extend-btn:focus-visible:not(:disabled) {
    text-decoration: underline;
}

.clients-bookings-extend-btn:disabled {
    color: var(--text-muted);
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: none;
}

.clients-ps-footer,
.clients-bookings-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.clients-ps-footer[hidden],
.clients-bookings-footer[hidden] {
    display: none !important;
}

[data-clients-bookings-empty][hidden] {
    display: none !important;
}

.clients-bookings-empty-state[data-clients-bookings-empty] {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .clients-bookings-table thead {
        display: none;
    }

    .clients-bookings-table tbody tr {
        display: grid;
        gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid #e2e8f0;
    }

    .clients-bookings-table tbody tr:last-child {
        border-bottom: none;
    }

    .clients-bookings-table tbody td {
        display: block;
        padding: 0;
        border: 0;
    }

    .clients-bookings-cell-action {
        text-align: left;
    }

    .clients-bookings-shimmer-line--action {
        margin-left: 0;
    }

    .clients-bookings-shimmer-filter {
        width: 100%;
        max-width: 180px;
    }
}

.clients-bills-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.clients-bills-title {
    margin: 0;
}

.clients-bills-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: visible;
}

.clients-bills-filters-bar {
    position: relative;
    z-index: 2;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.clients-bills-filters-bar:has(.clients-ps-product-popover:not([hidden])),
.clients-bills-filters-bar:has(.ps-filter-period-popover:not([hidden])) {
    z-index: 30;
}

.clients-bills-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.clients-bills-hide-deleted {
    margin-left: auto;
}

.clients-bills-period-filter {
    position: relative;
    z-index: 1;
}

.clients-bills-period-filter .ps-filter-period-trigger {
    width: auto;
    min-height: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 0.86rem;
    font-weight: 500;
    gap: 8px;
}

.clients-bills-period-filter .ps-filter-period-trigger:hover {
    border-color: #c5d4f5;
    background: #f8fafc;
}

.clients-bills-period-filter .ps-date-popover--filter {
    z-index: 40;
    width: min(440px, calc(100vw - 32px));
}

.clients-bills-product-filter {
    position: relative;
    z-index: 1;
}

.clients-bills-product-filter .clients-ps-product-popover {
    z-index: 40;
    left: 0;
    right: auto;
}

.clients-bills-table-wrap {
    position: relative;
    z-index: 0;
    border: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.clients-bills-empty {
    margin: 0;
    padding: 18px 14px;
}

.clients-bills-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    line-height: 1.35;
}

.clients-bills-table thead th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #f8fafc;
    min-height: 40px;
}

.clients-bills-filters-row th {
    height: 40px;
    padding: 8px 14px;
    vertical-align: middle;
}

.clients-bills-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.clients-bills-table tbody tr:last-child td {
    border-bottom: none;
}

.clients-bills-row td {
    border-bottom: 0;
    padding-bottom: 4px;
}

.clients-bills-table tbody tr.clients-bills-row td {
    border-bottom: 0;
}

.clients-bills-row,
.clients-bills-row-extra,
.clients-bills-row-comment {
    position: relative;
    cursor: pointer;
    transition: background 0.12s ease;
}

.clients-bills-row:hover:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:hover)),
.clients-bills-row:focus-visible:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:focus-visible)),
.clients-bills-row:hover:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra,
.clients-bills-row:focus-visible:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra,
.clients-bills-row:hover:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra + .clients-bills-row-comment,
.clients-bills-row:focus-visible:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra + .clients-bills-row-comment,
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra:hover),
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra:hover) + .clients-bills-row-extra,
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra:hover) + .clients-bills-row-extra + .clients-bills-row-comment,
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover),
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover) + .clients-bills-row-extra,
.clients-bills-row:not(.clients-bills-row--paid):not(.clients-bills-row--not-visible):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover) + .clients-bills-row-extra + .clients-bills-row-comment {
    background: #f8fafc;
    outline: none;
}

.clients-bills-row--paid:focus-visible,
.clients-bills-row--not-visible:focus-visible {
    outline: none;
}

.clients-bills-row--paid,
.clients-bills-row-extra--paid,
.clients-bills-row-comment.clients-bills-row-extra--paid {
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.12) 0%, rgba(22, 163, 74, 0.06) 24%, rgba(22, 163, 74, 0.03) 36%, transparent 52%);
}

.clients-bills-row--paid:hover:not(:has(.clients-bills-pdf-btn:hover)),
.clients-bills-row--paid:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)),
.clients-bills-row--paid:hover:not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra--paid,
.clients-bills-row--paid:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra--paid,
.clients-bills-row--paid:hover:not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra--paid + .clients-bills-row-comment,
.clients-bills-row--paid:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra--paid + .clients-bills-row-comment,
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover),
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover) + .clients-bills-row-extra--paid,
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover) + .clients-bills-row-extra--paid + .clients-bills-row-comment,
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover),
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover) + .clients-bills-row-extra--paid,
.clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover) + .clients-bills-row-extra--paid + .clients-bills-row-comment {
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.18) 0%, rgba(22, 163, 74, 0.09) 24%, rgba(22, 163, 74, 0.04) 36%, rgba(248, 250, 252, 0.35) 52%, transparent 68%);
}

.clients-bills-row--not-visible,
.clients-bills-row-extra--not-visible,
.clients-bills-row-comment.clients-bills-row-extra--not-visible {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.14) 0%, rgba(220, 38, 38, 0.07) 24%, rgba(220, 38, 38, 0.03) 36%, transparent 52%);
}

.clients-bills-row--not-visible:hover:not(:has(.clients-bills-pdf-btn:hover)),
.clients-bills-row--not-visible:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)),
.clients-bills-row--not-visible:hover:not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra--not-visible,
.clients-bills-row--not-visible:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra--not-visible,
.clients-bills-row--not-visible:hover:not(:has(.clients-bills-pdf-btn:hover)) + .clients-bills-row-extra--not-visible + .clients-bills-row-comment,
.clients-bills-row--not-visible:focus-visible:not(:has(.clients-bills-pdf-btn:focus-visible)) + .clients-bills-row-extra--not-visible + .clients-bills-row-comment,
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible:hover),
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible:hover) + .clients-bills-row-extra--not-visible,
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible:hover) + .clients-bills-row-extra--not-visible + .clients-bills-row-comment,
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible + .clients-bills-row-comment:hover),
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible + .clients-bills-row-comment:hover) + .clients-bills-row-extra--not-visible,
.clients-bills-row--not-visible:has(+ .clients-bills-row-extra--not-visible + .clients-bills-row-comment:hover) + .clients-bills-row-extra--not-visible + .clients-bills-row-comment {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.1) 24%, rgba(220, 38, 38, 0.04) 36%, rgba(248, 250, 252, 0.35) 52%, transparent 68%);
}

.clients-bills-row.is-hidden,
.clients-bills-row[hidden],
.clients-bills-row-extra.is-hidden,
.clients-bills-row-extra[hidden],
.clients-bills-row-comment.is-hidden,
.clients-bills-row-comment[hidden] {
    display: none;
}

.clients-bills-cell-number {
    position: relative;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    white-space: nowrap;
}

.clients-bills-table tbody td.clients-bills-cell-number {
    width: 1%;
    vertical-align: top;
    white-space: nowrap;
}

.clients-bills-number-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    max-width: 100%;
}

.clients-bills-number-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clients-bills-copy-btn.clients-copy-btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    opacity: 1;
    border-color: rgba(226, 232, 240, 0.9);
}

.clients-bills-row:hover .clients-bills-copy-btn.clients-copy-btn,
.clients-bills-copy-btn.clients-copy-btn:hover {
    color: var(--accent);
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.clients-bills-copy-btn.clients-copy-btn.is-copied {
    color: var(--success);
}

.clients-bills-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.clients-bills-stack-primary {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #15803d;
    white-space: nowrap;
}

.clients-bills-stack-secondary {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    white-space: nowrap;
}

.clients-bills-filters-row th:nth-child(2),
.clients-bills-filters-row th:nth-child(3) {
    width: 7.5rem;
    max-width: 7.5rem;
    padding-left: 6px;
    padding-right: 6px;
}

.clients-bills-cell-bill-meta,
.clients-bills-cell-paid-meta {
    width: 7.5rem;
    max-width: 7.5rem;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

.clients-bills-cell-bill-meta {
    padding-right: 2px;
}

.clients-bills-cell-paid-meta {
    padding-left: 2px;
}

.clients-bills-cell-bill-meta .clients-bills-stack,
.clients-bills-cell-paid-meta .clients-bills-stack {
    gap: 1px;
}

.clients-bills-cell-bill-meta .clients-bills-stack-primary,
.clients-bills-cell-paid-meta .clients-bills-stack-primary {
    font-size: 0.84rem;
}

.clients-bills-cell-bill-meta .clients-bills-stack-secondary,
.clients-bills-cell-paid-meta .clients-bills-stack-secondary {
    font-size: 0.72rem;
}

.clients-bills-paid-empty {
    color: #94a3b8;
}

.clients-bills-cell-product {
    padding-left: 28px;
}

.clients-bills-product {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.clients-bills-product-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.clients-bills-product-icon--empty {
    display: inline-block;
    border-radius: 4px;
    background: #e2e8f0;
}

.clients-bills-product-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.clients-bills-product-name {
    min-width: 0;
    color: #334155;
    line-height: 1.25;
}

.clients-bills-product-issuer {
    font-style: italic;
    font-size: 12px;
    line-height: 1.2;
    color: #94a3b8;
}

.clients-bills-row-extra td {
    padding-top: 0;
    padding-bottom: 10px;
}

.clients-bills-row-extra-packages {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    border-top: 0;
    line-height: 1.25;
}

.clients-bills-row-extra:has(+ .clients-bills-row-comment) > .clients-bills-row-extra-packages {
    border-bottom: 0;
    padding-bottom: 2px;
}

.clients-bills-row-comment > .clients-bills-row-comment-cell {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    border-top: 0;
    vertical-align: top;
}

.clients-bills-row-comment-box {
    margin: 0;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(13, 148, 136, 0.16);
    border-left: 3px solid #0d9488;
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(240, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(13, 148, 136, 0.05);
}

.clients-bills-row-comment-body {
    font-size: 0.8rem;
    line-height: 1.35;
    color: #334155;
}

.clients-bills-row-comment-body > *:first-child {
    margin-top: 0;
}

.clients-bills-row-comment-body > *:last-child {
    margin-bottom: 0;
}

.clients-bills-row-comment-body p {
    margin: 0 0 0.35em;
}

.clients-bills-row-comment-body p:last-child {
    margin-bottom: 0;
}

.clients-bills-row-comment-body ul,
.clients-bills-row-comment-body ol {
    margin: 0.2em 0 0.35em;
    padding-left: 1.2em;
}

.clients-bills-row-comment-body .md-table {
    margin: 0.35em 0;
    font-size: 0.78rem;
}

.clients-bills-row-extra-label {
    font-size: 0.76rem;
    color: #94a3b8;
    margin-right: 6px;
}

.clients-bills-row-extra-text {
    font-size: 0.8rem;
    color: #475569;
}

.clients-bills-row-extra:last-child td,
.clients-bills-row-comment:last-child td,
.clients-bills-row:last-child + .clients-bills-row-extra td {
    border-bottom: none;
}

/* Горизонтальный разделитель между счетами (PDF/номер rowspan + пакеты/комментарий) */
.clients-bills-table tbody tr.clients-bills-row > td.clients-bills-cell-pdf,
.clients-bills-table tbody tr.clients-bills-row > td.clients-bills-cell-number {
    border-bottom: 1px solid #e2e8f0;
}

.clients-bills-table tbody tr.clients-bills-row-extra > td.clients-bills-row-extra-packages {
    border-bottom: 1px solid #e2e8f0;
}

.clients-bills-table tbody tr.clients-bills-row-extra:has(+ .clients-bills-row-comment) > td.clients-bills-row-extra-packages {
    border-bottom: 0;
}

.clients-bills-table tbody tr.clients-bills-row:has(+ .clients-bills-row-extra:last-child) > td.clients-bills-cell-pdf,
.clients-bills-table tbody tr.clients-bills-row:has(+ .clients-bills-row-extra:last-child) > td.clients-bills-cell-number,
.clients-bills-table tbody tr.clients-bills-row-extra:last-child > td.clients-bills-row-extra-packages,
.clients-bills-table tbody tr.clients-bills-row:has(+ .clients-bills-row-extra + .clients-bills-row-comment:last-child) > td.clients-bills-cell-pdf,
.clients-bills-table tbody tr.clients-bills-row:has(+ .clients-bills-row-extra + .clients-bills-row-comment:last-child) > td.clients-bills-cell-number,
.clients-bills-table tbody tr.clients-bills-row-comment:last-child > td.clients-bills-row-comment-cell {
    border-bottom: none;
}

.clients-bills-footer {
    margin-top: 10px;
}

[data-theme="dark"] .clients-bills-panel {
    border-color: var(--line);
    background: var(--surface);
}

[data-theme="dark"] .clients-bills-filters-bar {
    background: var(--surface-muted);
    border-bottom-color: var(--line);
}

[data-theme="dark"] .clients-bills-period-filter .ps-filter-period-trigger {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .clients-bills-period-filter .ps-filter-period-trigger:hover {
    background: var(--surface-muted);
}

[data-theme="dark"] .clients-bills-cell-number {
    color: var(--text);
}

[data-theme="dark"] .clients-bills-stack-primary {
    color: #4ade80;
}

[data-theme="dark"] .clients-bills-stack-secondary,
[data-theme="dark"] .clients-bills-product-name,
[data-theme="dark"] .clients-bills-product-issuer,
[data-theme="dark"] .clients-bills-paid-empty {
    color: var(--text-muted);
}

[data-theme="dark"] .clients-bills-pdf-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .clients-bills-pdf-btn:hover,
[data-theme="dark"] .clients-bills-pdf-btn:focus-visible {
    background: var(--surface-muted);
    color: var(--text);
}

[data-theme="dark"] .clients-bills-table tbody tr.clients-bills-row > td.clients-bills-cell-pdf,
[data-theme="dark"] .clients-bills-table tbody tr.clients-bills-row > td.clients-bills-cell-number,
[data-theme="dark"] .clients-bills-table tbody tr.clients-bills-row-extra > td.clients-bills-row-extra-packages,
[data-theme="dark"] .clients-bills-table tbody tr.clients-bills-row-comment > td.clients-bills-row-comment-cell {
    border-bottom-color: var(--line);
}

[data-theme="dark"] .clients-bills-row--paid,
[data-theme="dark"] .clients-bills-row-extra--paid,
[data-theme="dark"] .clients-bills-row-comment.clients-bills-row-extra--paid {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.08) 24%, rgba(34, 197, 94, 0.04) 36%, transparent 52%);
}

[data-theme="dark"] .clients-bills-row:hover:not(.clients-bills-row--paid),
[data-theme="dark"] .clients-bills-row:focus-visible:not(.clients-bills-row--paid),
[data-theme="dark"] .clients-bills-row:hover:not(.clients-bills-row--paid) + .clients-bills-row-extra,
[data-theme="dark"] .clients-bills-row:focus-visible:not(.clients-bills-row--paid) + .clients-bills-row-extra,
[data-theme="dark"] .clients-bills-row:hover:not(.clients-bills-row--paid) + .clients-bills-row-extra + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row:focus-visible:not(.clients-bills-row--paid) + .clients-bills-row-extra + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra:hover),
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra:hover) + .clients-bills-row-extra,
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra:hover) + .clients-bills-row-extra + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover),
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover) + .clients-bills-row-extra,
[data-theme="dark"] .clients-bills-row:not(.clients-bills-row--paid):has(+ .clients-bills-row-extra + .clients-bills-row-comment:hover) + .clients-bills-row-extra + .clients-bills-row-comment {
    background: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .clients-bills-row--paid:hover,
[data-theme="dark"] .clients-bills-row--paid:focus-visible,
[data-theme="dark"] .clients-bills-row--paid:hover + .clients-bills-row-extra--paid,
[data-theme="dark"] .clients-bills-row--paid:focus-visible + .clients-bills-row-extra--paid,
[data-theme="dark"] .clients-bills-row--paid:hover + .clients-bills-row-extra--paid + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row--paid:focus-visible + .clients-bills-row-extra--paid + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover),
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover) + .clients-bills-row-extra--paid,
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid:hover) + .clients-bills-row-extra--paid + .clients-bills-row-comment,
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover),
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover) + .clients-bills-row-extra--paid,
[data-theme="dark"] .clients-bills-row--paid:has(+ .clients-bills-row-extra--paid + .clients-bills-row-comment:hover) + .clients-bills-row-extra--paid + .clients-bills-row-comment {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.26) 0%, rgba(34, 197, 94, 0.12) 24%, rgba(34, 197, 94, 0.06) 36%, rgba(30, 41, 59, 0.3) 52%, transparent 68%);
}

[data-theme="dark"] .clients-bills-product-icon--empty {
    background: #334155;
}

[data-theme="dark"] .clients-bills-copy-btn.clients-copy-btn {
    border-color: #334155;
    background: rgba(30, 41, 59, 0.92);
}

[data-theme="dark"] .clients-bills-row-extra-packages {
    border-bottom-color: var(--line);
}

[data-theme="dark"] .clients-bills-row-extra-text,
[data-theme="dark"] .clients-bills-row-extra-label {
    color: var(--text-muted);
}

[data-theme="dark"] .clients-bills-row-comment-box {
    background: linear-gradient(
        120deg,
        rgba(13, 148, 136, 0.2) 0%,
        rgba(13, 148, 136, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(45, 212, 191, 0.28);
    border-left-color: #2dd4bf;
    box-shadow: none;
}

[data-theme="dark"] .clients-bills-row-comment-body {
    color: var(--text);
}

[data-theme="dark"] .clients-bills-block .bills-state-pill {
    border-color: #334155;
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .clients-bills-block .bills-state-pill.is-paid {
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(22, 163, 74, 0.18);
    color: #86efac;
}

[data-theme="dark"] .clients-bills-block .bills-state-pill.is-unpaid {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(185, 28, 28, 0.22);
    color: #fca5a5;
}

[data-theme="dark"] .clients-bills-block .bills-state-pill.is-new {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(37, 99, 235, 0.22);
    color: #93c5fd;
}

[data-theme="dark"] .clients-bills-block .bills-state-pill.is-autoship {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(37, 99, 235, 0.28);
    color: #93c5fd;
}

[data-theme="dark"] .clients-bills-block .bills-state-pill.is-autoship-done {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(22, 163, 74, 0.22);
    color: #86efac;
}

[data-theme="dark"] .clients-bills-act-accepted {
    color: var(--text);
}

[data-theme="dark"] .app-list-page-next:hover:not(:disabled),
[data-theme="dark"] .ps-list-pagenext:hover {
    border-color: rgba(129, 140, 248, 0.55);
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] button.app-list-page-next:disabled {
    opacity: 0.4;
    color: var(--text-muted);
}

.clients-ps-block {
    margin: 0;
}

.clients-ps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.clients-ps-title {
    margin: 0;
}

.clients-ps-product-filter {
    position: relative;
}

.clients-ps-product-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    color: var(--text);
    cursor: pointer;
}

.clients-ps-product-filter-btn:hover,
.clients-ps-product-filter-btn:focus-visible {
    border-color: #c5d4f5;
    background: #f8fafc;
}

.clients-ps-product-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: min(640px, calc(100vw - 48px));
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.clients-ps-product-popover-body {
    padding: 14px 16px 10px;
}

.clients-ps-product-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.clients-ps-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
}

.clients-ps-product-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.clients-ps-product-item {
    margin: 0;
}

.clients-ps-product-popover-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--line);
}

.clients-ps-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.clients-ps-tab {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.clients-ps-tab.is-active {
    border-color: #c5d4f5;
    background: #eef2ff;
    color: var(--accent);
}

.clients-ps-tab.is-disabled,
.clients-ps-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.clients-ps-tab:not(:disabled):hover,
.clients-ps-tab:not(:disabled):focus-visible {
    border-color: #c5d4f5;
    background: #f8fafc;
}

.clients-ps-list-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.clients-ps-list {
    display: flex;
    flex-direction: column;
}

.clients-ps-row {
    display: grid;
    grid-template-columns: 16px minmax(88px, 0.9fr) minmax(96px, 0.85fr) 16px minmax(0, 1.8fr) 52px minmax(100px, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    font-size: 0.86rem;
    line-height: 1.35;
    transition: background 0.12s ease;
}

.clients-ps-list .clients-ps-row:last-child {
    border-bottom: none;
}

.clients-ps-row:hover {
    background: #f8fafc;
}

.clients-ps-row-product .ps-list-product-icon {
    width: 20px;
    height: 20px;
}

.clients-ps-row-product {
    justify-content: center;
}

.clients-ps-row-product .ps-list-product-icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    cursor: default;
}

.clients-ps-row-type {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.clients-ps-row-temp {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-ps-row-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.clients-ps-row--new {
    font-weight: 700;
}

.clients-ps-row--new .clients-ps-row-type,
.clients-ps-row--new .clients-ps-row-when,
.clients-ps-row--new .clients-ps-row-text,
.clients-ps-row--new .clients-ps-row-mgr {
    font-weight: 700;
}

.clients-ps-row--muted {
    opacity: 0.6;
}

.clients-ps-row.is-hidden {
    display: none !important;
}

.clients-ps-list-empty {
    margin: 0;
    padding: 20px 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .clients-ps-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clients-ps-row {
        grid-template-columns: 16px minmax(72px, 0.8fr) minmax(80px, 0.75fr) 14px minmax(0, 1.2fr) 44px minmax(72px, 0.9fr);
        font-size: 0.82rem;
    }
}

.entity-tag--product {
    background: #f4f7ff;
    border-color: #d8e2ff;
}

.contact-products-page {
    max-width: 920px;
}

.contact-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
}

.contact-products-item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-products-item:hover {
    border-color: #c5d4f5;
    background: #fff;
}

.contact-products-item.is-checked {
    border-color: #93b4f7;
    background: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.contact-products-item-check {
    flex-shrink: 0;
    margin: 4px 0 0;
}

.contact-products-item-body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.contact-products-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
}

.contact-products-item-icon--empty {
    display: inline-block;
    background: #e2e8f0;
}

.contact-products-item-name {
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--text);
    min-width: 0;
}

.contact-products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.contact-products-status {
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .contact-products-grid {
        grid-template-columns: 1fr;
    }
}

.entity-muted {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

.entity-tag {
    display: inline-block;
    margin: 4px 8px 0 0;
    padding: 4px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 0.85rem;
}

.entity-comment-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
    line-height: 1.6;
}

.entity-grid-admin {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.entity-admin-card {
    padding: 22px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.entity-admin-card h3 {
    margin-top: 0;
}

.entity-grid-admin .entity-admin-card-wide {
    grid-column: 1 / -1;
}

.admin-ref-sync-blocked {
    margin-top: 12px;
}

.admin-ref-sync-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.45;
}

.admin-ref-sync-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 14px;
}

.admin-ref-sync-status {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.admin-ref-sync-wrap {
    margin-top: 4px;
}

.admin-ref-sync-table code {
    font-size: 0.8rem;
}

.admin-ref-sync-api {
    word-break: break-all;
}

.admin-ref-sync-col-num {
    text-align: right;
    white-space: nowrap;
}

.admin-ref-sync-err {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #b91c1c;
    line-height: 1.4;
}

.admin-ref-sync-skip-msg {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.admin-ref-sync-summary td {
    border-top: 2px solid var(--line);
    padding-top: 12px;
}

.admin-ref-sync-note-warn {
    color: #b45309;
}

/* Страница синхронизации: задачи */
.sync-page-lead {
    margin: 0 0 1rem;
    /* max-width: 52rem; */
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.sync-page-lead code {
    font-size: 0.84em;
}

.sync-jobs-table {
    table-layout: fixed;
}

.sync-jobs-table > thead > tr > th {
    vertical-align: bottom;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.sync-jobs-col-task { width: 28%; }
.sync-jobs-col-schedule { width: 22%; }
.sync-jobs-col-result { width: 14%; }
.sync-jobs-col-cursor { width: 20%; }
.sync-jobs-col-actions { width: 16%; }

.sync-jobs-table > tbody > tr.sync-job-row > td {
    vertical-align: top;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.sync-job-task {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.sync-job-task-title {
    font-weight: 650;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--text);
}

.sync-job-task-key {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.sync-job-task-blurb {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.sync-job-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sync-job-task-meta a {
    color: var(--accent);
    text-decoration: none;
}

.sync-job-task-meta a:hover {
    text-decoration: underline;
}

.sync-job-schedule {
    display: grid;
    gap: 0.65rem;
}

.sync-job-enabled-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.sync-job-enabled-label input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.sync-job-enabled-text {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
}

.sync-job-meta-list {
    display: grid;
    gap: 0.3rem;
}

.sync-job-meta-row {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: baseline;
    font-size: 0.84rem;
    line-height: 1.35;
}

.sync-job-meta-k {
    color: var(--text-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sync-job-meta-v {
    min-width: 0;
    color: var(--text);
    word-break: break-word;
}

.sync-job-result {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
}

.sync-job-result-saved {
    font-size: 0.86rem;
    color: var(--text);
}

.sync-job-result-saved strong {
    font-variant-numeric: tabular-nums;
}

.sync-job-cursor {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.sync-job-cursor-value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.sync-job-muted {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.sync-job-actions-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.sync-job-actions-stack .app-button-secondary {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

.sync-job-error-row td {
    padding-top: 0;
    padding-bottom: 0.85rem;
    background: transparent;
}

.sync-job-error {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: var(--danger-soft);
    color: #b91c1c;
    font-size: 0.84rem;
    line-height: 1.4;
}

.sync-job-config-row td {
    padding-top: 0;
    padding-bottom: 1rem;
    background: transparent;
}

.sync-job-config-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted) 100%);
}

.sync-job-config-head {
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sync-job-config-form {
    display: grid;
    gap: 0.85rem;
    max-width: 36rem;
    margin: 0;
    align-items: stretch;
}

.sync-job-config-field {
    display: grid;
    gap: 0.28rem;
    margin: 0;
}

.sync-job-config-label {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text);
}

.sync-job-config-hint {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.sync-job-config-input,
.sync-job-config-form .app-input.sync-job-config-input {
    width: 100%;
    max-width: none;
    min-height: 42px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
}

.sync-job-config-input:focus,
.sync-job-config-form .app-input.sync-job-config-input:focus {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}

.sync-job-config-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.sync-job-config-status {
    min-width: 5rem;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.sync-job-config-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.sync-job-config-json {
    display: block;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
    line-height: 1.4;
}

.sync-run-status {
    min-height: 1.4em;
}

.sync-job-row-disabled td {
    opacity: 0.65;
}

.sync-job-row-disabled .sync-job-enabled-label {
    opacity: 1;
}

@media (max-width: 1100px) {
    .sync-jobs-table,
    .sync-jobs-table thead,
    .sync-jobs-table tbody,
    .sync-jobs-table tr.sync-job-row,
    .sync-jobs-table tr.sync-job-error-row,
    .sync-jobs-table tr.sync-job-config-row,
    .sync-jobs-table th,
    .sync-jobs-table td {
        display: block;
        width: 100%;
    }

    .sync-jobs-table thead {
        display: none;
    }

    .sync-jobs-table > tbody > tr.sync-job-row {
        margin-bottom: 0.85rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--surface, #fff);
    }

    .sync-jobs-table > tbody > tr.sync-job-row > td {
        border: 0;
        border-top: 1px solid var(--line);
        padding: 0.85rem 1rem;
    }

    .sync-jobs-table > tbody > tr.sync-job-row > td:first-child {
        border-top: 0;
    }

    .sync-job-actions-stack {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sync-job-actions-stack .app-button-secondary {
        width: auto;
        flex: 1 1 auto;
    }
}

/* DB schema browser (admin) */
.db-schema-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}

.db-schema-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.db-schema-toc {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
}

.db-schema-toc-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.db-schema-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.db-schema-toc-list li {
    margin-bottom: 6px;
}

.db-schema-toc-btn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    margin: 0;
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    word-break: break-word;
}

.db-schema-toc-btn:hover {
    color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
}

.db-schema-toc-btn.is-active {
    font-weight: 600;
    color: var(--accent);
    background: rgba(99, 102, 241, 0.12);
}

.db-schema-main {
    min-width: 0;
}

.db-schema-placeholder {
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px dashed var(--line);
    background: #f8fafc;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.db-schema-placeholder p {
    margin: 0;
}

.db-schema-placeholder[hidden] {
    display: none;
}

.db-schema-section {
    scroll-margin-top: 24px;
}

.db-schema-table-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.db-schema-table-heading .db-schema-table-title {
    margin: 0;
    font-size: 1.25rem;
}

.db-schema-preview-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.db-schema-preview-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--accent);
}

.db-schema-preview-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.db-schema-preview-btn svg {
    display: block;
}

.db-schema-table-comment {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.db-schema-pk-line {
    margin: 0 0 14px;
    font-size: 0.875rem;
}

.db-schema-kicker {
    display: inline-block;
    margin-right: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.db-schema-columns code {
    font-size: 0.8125rem;
}

.db-schema-col-name {
    font-weight: 500;
}

.db-schema-badge {
    margin-left: 6px;
    font-size: 0.65rem;
    padding: 2px 6px;
    vertical-align: middle;
}

.db-schema-default code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.db-schema-fk {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.db-schema-fk-ref {
    color: var(--text-muted);
}

.db-schema-indexes {
    margin-top: 14px;
}

.db-schema-indexes summary {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.db-schema-index-list {
    margin: 12px 0 0;
    padding-left: 18px;
}

.db-schema-index-list li {
    margin-bottom: 12px;
}

.db-schema-index-def {
    margin: 6px 0 0;
    padding: 10px 12px;
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-x: auto;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid var(--line);
}

.db-schema-back {
    margin-top: 24px;
}

body.db-preview-modal-open {
    overflow: hidden;
}

.db-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.db-preview-modal[hidden] {
    display: none;
}

.db-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.db-preview-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: min(88vh, 920px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.db-preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.db-preview-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.db-preview-modal-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.db-preview-modal-close:hover {
    background: #f1f5f9;
    color: var(--text);
}

.db-preview-modal-body {
    padding: 16px 20px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.db-preview-modal-loading {
    margin: 0;
    color: var(--text-muted);
}

.db-preview-modal-error {
    margin-bottom: 12px;
}

.db-preview-table-wrap {
    overflow: auto;
    max-height: min(52vh, 480px);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.db-preview-data-table {
    font-size: 0.8125rem;
}

.db-preview-data-table th,
.db-preview-data-table td {
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-preview-null {
    color: var(--text-muted);
    font-style: italic;
}

.db-preview-modal-note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Модалка news v3: привязка к верху экрана (не по центру длинной страницы) */
.sync-news-v3-modal.db-preview-modal {
    align-items: flex-start;
    justify-content: center;
    padding: 16px 16px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sync-news-v3-modal .sync-news-v3-dialog {
    width: min(920px, 100%);
    max-width: min(920px, 96vw);
    max-height: calc(100vh - 32px);
    margin: 0 auto;
    flex-shrink: 0;
}

.sync-news-v3-modal .db-preview-modal-body {
    overflow: auto;
    min-height: 0;
}

.sync-news-v3-body {
    margin: 0;
    padding: 12px;
    max-height: min(50vh, 420px);
    overflow: auto;
    font-size: 0.8rem;
    line-height: 1.45;
    background: var(--surface-2, #f6f7f9);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

.sync-news-v3-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
}

.ps-event-info-dialog {
    width: min(920px, calc(100vw - 2rem));
    max-height: calc(100vh - 32px);
}

.ps-event-info-modal .db-preview-modal-body {
    overflow: auto;
    min-height: 0;
    max-height: min(70vh, 640px);
}

.ps-event-info-section {
    margin-bottom: 1.25rem;
}

.ps-event-info-section:last-child {
    margin-bottom: 0;
}

.ps-event-info-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.ps-event-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ps-event-info-table th,
.ps-event-info-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    vertical-align: top;
    text-align: left;
}

.ps-event-info-table th {
    width: 34%;
    color: var(--text-muted);
    font-weight: 500;
}

.ps-event-info-table td code,
.ps-event-info-table td.ps-event-info-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-word;
}

.ps-event-info-table tr:last-child th,
.ps-event-info-table tr:last-child td {
    border-bottom: none;
}

.sync-log-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 8px;
}

.sync-log-section-header .entity-section-title {
    margin: 0;
}

/* Раздел «Клиенты»: список + карточка (без внешней app-panel) */
.clients-layout {
    display: grid;
    grid-template-columns: minmax(280px, 342px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Ультраширокие мониторы (21:9 и шире): ширина как на 16:9 при той же высоте экрана */
@media (min-aspect-ratio: 21/9) and (min-width: 1800px) {
    body.app-page-clients:has(.clients-layout) .app-main-clients {
        align-items: flex-start;
    }

    .clients-layout,
    body.app-page-clients:has(.clients-layout) .app-main-clients .clients-layout {
        width: 100%;
        max-width: min(100%, max(720px, calc(100vh * 16 / 9 - var(--app-sidebar-width) - 56px)));
        grid-template-columns: minmax(280px, 342px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        justify-content: start;
    }
}

.clients-list-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    min-height: 0;
    overflow: hidden;
    max-height: calc(100vh - 110px);
}

.clients-detail-pane {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 110px);
    padding-right: 2px;
    transition: opacity 0.15s ease;
}

.clients-detail-pane.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.clients-list-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.clients-list-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.clients-list-search {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0.55) 100%);
    flex-shrink: 0;
}

.clients-list-search-field {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clients-list-search-field:focus-within {
    border-color: #a5b4fc;
    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.12),
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.clients-list-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.82rem;
    pointer-events: none;
}

.clients-list-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 9px 6px 9px 0;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    outline: none;
}

.clients-list-search-input::placeholder {
    color: #94a3b8;
}

.clients-list-search-input::-webkit-search-cancel-button,
.clients-list-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.clients-list-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.clients-list-search-clear:hover {
    background: #f1f5f9;
    color: #64748b;
}

.clients-list-search-clear i {
    font-size: 0.78rem;
}

.clients-list-empty {
    padding: 28px 16px 32px;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.clients-list-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.clients-list-row {
    position: relative;
    display: block;
    padding: 11px 40px 10px 12px;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease;
}

.clients-list-row:hover {
    background: rgba(248, 250, 252, 0.95);
    color: inherit;
}

.clients-list-row.is-selected {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 0 var(--accent);
}

.clients-list-row-body {
    min-width: 0;
}

.clients-list-inn-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 2px;
}

.clients-list-inn {
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.clients-list-fl {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f1f5f9;
}

.clients-list-name {
    margin-top: 4px;
    font-size: 0.86rem;
    line-height: 1.35;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clients-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.clients-copy-btn i {
    font-size: 0.88rem;
}

.clients-list-row:hover .clients-copy-btn,
.clients-list-row.is-selected .clients-copy-btn {
    opacity: 1;
}

.clients-copy-btn:hover {
    border-color: var(--line);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.clients-copy-btn.is-copied {
    opacity: 1;
    color: var(--success);
}

.clients-list-sentinel {
    padding: 12px;
    border-top: 1px solid var(--line);
    text-align: center;
    flex-shrink: 0;
}

.clients-list-sentinel-text {
    display: none;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.clients-list-sentinel.is-loading .clients-list-sentinel-text {
    display: block;
}

.clients-detail-placeholder {
    padding: 28px 20px;
    text-align: center;
    margin: 0;
}

.clients-detail-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clients-detail-blocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clients-detail-frame {
    position: relative;
    z-index: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    padding: 18px 20px;
}

.clients-detail-frame:has(.ps-comment-popover:not([hidden])),
.clients-detail-frame:has(.clients-ps-product-popover:not([hidden])),
.clients-detail-frame:has(.ps-filter-period-popover:not([hidden])) {
    z-index: 25;
}

.clients-detail-frame--solo {
    padding: 20px 22px;
}

.clients-detail-frame .clients-detail-block {
    margin: 0;
}

.clients-detail-frame .clients-detail-block-title,
.clients-detail-frame .entity-section-title {
    margin: 0 0 14px;
}

.clients-detail-frame .clients-block-head-start .entity-section-title {
    margin: 0;
}

.clients-detail-hero {
    margin: 0;
}

.clients-detail-hero-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.clients-detail-focus-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.88rem;
    border-radius: 10px;
}

.clients-detail-focus-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.clients-detail-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-wrap: wrap;
}

.clients-detail-create-ps-btn,
.clients-detail-create-bill-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.88rem;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.clients-detail-create-ps-btn.app-button {
    box-shadow: 0 6px 12px rgba(79, 70, 229, 0.28);
}

.clients-detail-create-bill-btn.app-button {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.28);
}

.clients-detail-create-bill-btn.app-button:hover {
    background: linear-gradient(135deg, #9333ea, #6d28d9);
    color: #fff;
}

.clients-detail-create-ps-btn:hover,
.clients-detail-create-bill-btn:hover {
    transform: none;
}

[data-theme="dark"] .clients-detail-create-bill-btn.app-button {
    background: linear-gradient(135deg, #c084fc, #9333ea);
    box-shadow: 0 12px 24px rgba(147, 51, 234, 0.28);
}

[data-theme="dark"] .clients-detail-create-bill-btn.app-button:hover {
    background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.clients-detail-billing-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.clients-detail-billing-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.clients-detail-hero-inn-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.clients-detail-inn {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--text);
}

.clients-detail-hero-inn-line .clients-detail-copy-btn {
    position: static;
    opacity: 1;
    width: 32px;
    height: 32px;
    margin-left: 2px;
}

.clients-detail-name {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.clients-detail-address {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.clients-detail-comments {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.clients-detail-comments .clients-detail-comments-inner {
    margin: 0;
}

.clients-detail-comments .ps-tab-fake-link {
    font-size: 0.88rem;
}

.clients-detail-comments .ps-partner-comments-block {
    margin-top: 10px;
}

.clients-detail-comments .ps-date-anchor-wrap:has(.ps-comment-popover:not([hidden])),
.clients-detail-comments .ps-comment-edit-anchor:has(.ps-comment-popover:not([hidden])) {
    z-index: 30;
}

.entity-contact-card.is-muted {
    opacity: 0.55;
}

.clients-row-muted td {
    color: var(--text-muted);
}

/* Потенциальные продажи: страница фильтров */
.app-main-ps {
    padding: 20px 28px 28px;
    box-sizing: border-box;
    max-width: 100%;
}

.ps-filter-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
}

.ps-block {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 20px 22px 22px;
    box-sizing: border-box;
}

.ps-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 14px;
}

.ps-calendar-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.ps-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ps-calendar-select {
    min-height: 40px;
    padding: 0 36px 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.ps-calendar-select:disabled {
    opacity: 0.65;
    cursor: wait;
    background-color: var(--surface-muted);
}

.ps-calendar-month-picker {
    position: relative;
    flex-shrink: 0;
}

.ps-calendar-month-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 158px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ps-calendar-month-trigger:hover,
.ps-calendar-month-trigger[aria-expanded="true"] {
    border-color: rgba(123, 44, 191, 0.35);
    background: #fbf7ff;
}

.ps-calendar-month-trigger:disabled {
    opacity: 0.65;
    cursor: wait;
    background-color: var(--surface-muted);
}

.ps-calendar-month-trigger i {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.ps-calendar-month-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: 220px;
    max-width: calc(100vw - 48px);
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.ps-calendar-month-popover[hidden] {
    display: none !important;
}

.ps-calendar-month-popover-head {
    padding: 6px 8px 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ps-calendar-month-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 310px;
    overflow-y: auto;
    padding-right: 2px;
}

.ps-calendar-month-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.ps-calendar-month-option:hover {
    background: var(--surface-muted);
}

.ps-calendar-month-option.is-selected {
    background: #f3e8ff;
    color: #5b21b6;
    font-weight: 700;
}

.ps-calendar-month-option.is-current:not(.is-selected) {
    background: #fff7ed;
    color: #9a3412;
}

.ps-calendar-month-badge {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    color: #9a3412;
    font-size: 0.68rem;
    font-weight: 700;
}

.ps-calendar-block--loading .ps-calendar-count {
    opacity: 0.35;
}

.ps-calendar-block--loading .ps-calendar-cell--day {
    pointer-events: none;
}

.ps-calendar-product-filter {
    flex-shrink: 0;
}

.ps-calendar-product-filter-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
}

.ps-calendar-block:has([data-ps-cal-month-popover]:not([hidden])),
.ps-calendar-block:has([data-ps-cal-product-popover]:not([hidden])),
.ps-calendar-block:has([data-ps-cal-mgr-popover]:not([hidden])) {
    position: relative;
    z-index: 2;
}

.ps-calendar-block:has([data-ps-cal-month-popover]:not([hidden])) .ps-calendar-toolbar,
.ps-calendar-block:has([data-ps-cal-product-popover]:not([hidden])) .ps-calendar-toolbar,
.ps-calendar-block:has([data-ps-cal-mgr-popover]:not([hidden])) .ps-calendar-toolbar {
    position: relative;
    z-index: 5;
}

.ps-calendar-block:has([data-ps-cal-month-popover]:not([hidden])) .ps-calendar-body,
.ps-calendar-block:has([data-ps-cal-product-popover]:not([hidden])) .ps-calendar-body,
.ps-calendar-block:has([data-ps-cal-mgr-popover]:not([hidden])) .ps-calendar-body {
    pointer-events: none;
}

.ps-calendar-product-filter .clients-ps-product-popover[hidden] {
    display: none !important;
}

.ps-calendar-product-filter:not(.ps-calendar-mgr-filter) .clients-ps-product-popover:not([hidden]) {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 480px);
    overflow: hidden;
}

.ps-calendar-product-filter:not(.ps-calendar-mgr-filter) .clients-ps-product-popover-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.ps-calendar-product-filter:not(.ps-calendar-mgr-filter) .clients-ps-product-popover-footer {
    flex-shrink: 0;
    background: #fff;
}

.ps-calendar-mgr-popover {
    width: min(360px, calc(100vw - 48px));
}

.ps-calendar-mgr-popover::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: rotate(45deg);
    background: #fff;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.ps-calendar-mgr-radio-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ps-calendar-mgr-radio {
    margin: 0;
}

.ps-calendar-mgr-search-block[hidden] {
    display: none !important;
}

.ps-calendar-mgr-search-wrap {
    margin-top: 4px;
}

.ps-calendar-mgr-results {
    margin-top: 6px;
}

.ps-calendar-mgr-filter [data-ps-cal-mgr-save]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ps-calendar-body {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 4px;
}

.ps-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ps-calendar-nav:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.ps-calendar-grid-wrap {
    min-width: 0;
}

.ps-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.ps-calendar-wd {
    padding: 10px 6px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: lowercase;
    color: #64748b;
    background: #f8fafc;
}

.ps-calendar-wd--weekend {
    color: #c08497;
}

.ps-calendar-cell--empty {
    min-height: 51px;
    background: #fff;
}

.ps-calendar-cell--day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.ps-calendar-cell--day:hover {
    background: #f8fafc;
}

.ps-calendar-cell--has {
    background: #fff9e6;
}

.ps-calendar-cell--has:hover {
    background: #fff3cc;
}

.ps-calendar-cell--day.is-selected {
    box-shadow: inset 0 0 0 2px #7b2cbf;
    z-index: 1;
}

.ps-calendar-cell--day.is-today {
    z-index: 1;
}

.ps-calendar-cell--day.is-today::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 2px solid var(--accent);
    border-radius: 8px;
    pointer-events: none;
}

.ps-calendar-cell--day.is-today .ps-calendar-daynum {
    color: var(--accent);
    font-weight: 700;
}

.ps-calendar-daynum {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
}

.ps-calendar-count {
    font-size: clamp(0.95rem, 1.8vw, 1.35rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.ps-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;
}

.ps-saved-filters-block {
    padding: 0;
}

.ps-saved-filters {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.ps-saved-filters-row--head .ps-saved-filters-cell {
    padding: 16px 22px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.ps-saved-filters-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.ps-saved-filters-head-title {
    font-size: inherit;
    font-weight: inherit;
}

.ps-saved-filters-add {
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent, #2563eb);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ps-saved-filters-add:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.ps-saved-filters-row:not(.ps-saved-filters-row--head) .ps-saved-filters-cell {
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.ps-saved-filters-row:last-child .ps-saved-filters-cell {
    border-bottom: none;
}

.ps-saved-filters-link {
    display: block;
    min-height: 63px;
    box-sizing: border-box;
    padding: 21px 22px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
    transition: background 0.15s ease;
}

.ps-saved-filters-row--custom .ps-saved-filters-link[role="link"] {
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;
}

.ps-saved-filters-row--custom .ps-saved-filters-link[role="link"]:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: -2px;
}

body.ps-saved-filters-sorting,
body.ps-saved-filters-sorting * {
    cursor: grabbing !important;
}

.ps-saved-filters-link:hover {
    background: var(--surface-muted);
    color: #0f172a;
}

.ps-saved-filters-link--all {
    background: #fff9e6;
}

.ps-saved-filters-row--all .ps-saved-filters-link {
    display: grid;
    grid-template-columns: 50% 16.666667% 16.666667% 16.666667%;
    align-items: center;
    gap: 0;
    min-width: 0;
    min-height: 63px;
    box-sizing: border-box;
    padding: 14px 0;
}

.ps-saved-filters-link--all:hover {
    background: #fff3cc;
    color: #0f172a;
}

.ps-saved-filters-row-inner {
    display: flex;
    align-items: stretch;
    min-height: 63px;
    position: relative;
}

.ps-js-saved-filter-sort-surface {
    touch-action: none;
    -webkit-touch-callout: none;
}

.ps-saved-filters-table.is-sorting-active {
    user-select: none;
    -webkit-user-select: none;
}

.ps-saved-filters-table.is-sorting-active .ps-js-saved-filter-nav {
    pointer-events: none;
}

.ps-saved-filters-row-inner.is-press-pending {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.ps-saved-filters-row--placeholder .ps-saved-filters-cell {
    padding: 0 8px;
    background: transparent;
    border: none;
}

.ps-saved-filters-placeholder-gap {
    display: block;
    min-height: 63px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.05);
    border: 2px dashed rgba(37, 99, 235, 0.28);
    box-sizing: border-box;
    transition: min-height 0.18s ease, background 0.18s ease;
}

.ps-saved-filters-floater {
    position: fixed;
    z-index: 1200;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    will-change: top, left, transform, box-shadow;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 8px 20px rgba(15, 23, 42, 0.1);
    transform: translateY(0) scale(1);
}

.ps-saved-filters-floater.is-lifted {
    transform: translateY(-4px) scale(1.008);
    box-shadow:
        0 6px 10px rgba(15, 23, 42, 0.08),
        0 16px 36px rgba(15, 23, 42, 0.18);
}

.ps-saved-filters-floater.is-settling {
    transition:
        top 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(1);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 8px 18px rgba(15, 23, 42, 0.1);
}

.ps-saved-filters-floater-cell {
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}

/* Копия строки вне <tr> — дублируем layout .ps-saved-filters-row--custom */
.ps-saved-filters-floater .ps-saved-filters-row-inner {
    display: flex;
    align-items: stretch;
    min-height: 63px;
    height: 100%;
    position: relative;
}

.ps-saved-filters-floater .ps-saved-filters-link {
    flex: 1;
    display: grid;
    grid-template-columns: 50% 16.666667% 16.666667% 16.666667%;
    align-items: center;
    gap: 0;
    min-width: 0;
    min-height: 63px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
    background: transparent;
}

.ps-saved-filters-floater .ps-saved-filters-col--main {
    padding-left: 22px;
    padding-right: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.ps-saved-filters-floater .ps-saved-filters-col--period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    text-align: left;
}

.ps-saved-filters-floater .ps-saved-filters-col--count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 18px;
}

.ps-saved-filters-floater .ps-saved-filters-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.ps-saved-filters-floater .ps-saved-filters-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 63px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    pointer-events: none;
}

.ps-saved-filters-row--custom .ps-saved-filters-cell {
    position: relative;
}

.ps-saved-filters-row--custom .ps-saved-filters-link {
    flex: 1;
    display: grid;
    grid-template-columns: 50% 16.666667% 16.666667% 16.666667%;
    align-items: center;
    gap: 0;
    min-width: 0;
    min-height: 63px;
    box-sizing: border-box;
    padding: 14px 0;
}

.ps-saved-filters-col {
    min-width: 0;
    box-sizing: border-box;
}

.ps-saved-filters-col--main {
    padding-left: 22px;
    padding-right: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-saved-filters-col--period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    text-align: left;
}

.ps-saved-filters-col--count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 18px;
}

.ps-saved-filters-name {
    display: block;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-saved-filters-params-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.ps-saved-filters-temp-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.ps-saved-filters-params {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-saved-filters-period-value {
    display: block;
    max-width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-saved-filters-period-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
}

.ps-saved-filters-count {
    font-size: clamp(1.15rem, 2.0vw, 1.55rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ps-saved-filters-count.is-loading {
    font-size: 1.2rem;
    font-weight: 500;
    color: #94a3b8;
}

.ps-saved-filters-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.ps-saved-filters-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 63px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ps-saved-filters-menu-btn:hover,
.ps-saved-filters-menu-btn[aria-expanded="true"] {
    background: var(--surface-muted);
    color: #0f172a;
}

.ps-saved-filters-menu {
    position: absolute;
    top: calc(100% - 10px);
    right: 10px;
    z-index: 50;
    min-width: 168px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.ps-saved-filters-menu[hidden] {
    display: none;
}

.ps-saved-filters-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    box-sizing: border-box;
}

.ps-saved-filters-menu-item:hover {
    background: #f1f5f9;
}

.ps-saved-filters-menu-item--danger {
    color: #b91c1c;
}

.ps-saved-filters-menu-item--danger:hover {
    background: #fef2f2;
}

.app-drawer-panel--ps-filter {
    width: min(720px, calc(100vw - 16px));
    max-width: 100vw;
    display: flex;
    flex-direction: column;
}

.app-drawer-body--ps-filter {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ps-filter-drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #fff;
}

.ps-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.ps-filter-drawer-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.ps-filter-drawer-close {
    border: none;
    background: var(--surface-muted);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.ps-filter-drawer-close:hover {
    color: var(--text);
    background: var(--line);
}

.ps-filter-drawer-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ps-filter-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 24px 20px;
}

.ps-filter-field {
    padding: 18px 0 8px;
}

.ps-filter-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.ps-filter-input,
.ps-filter-select {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.92rem;
    box-sizing: border-box;
}

.ps-filter-input--date {
    min-width: 0;
}

.ps-filter-section {
    border-top: 1px solid var(--line);
}

.ps-filter-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.ps-filter-section-chevron {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.ps-filter-section:not(.is-open) .ps-filter-section-body {
    display: none;
}

.ps-filter-section:not(.is-open) .ps-filter-section-chevron {
    transform: rotate(180deg);
}

.ps-filter-section-body {
    padding-bottom: 14px;
}

.ps-filter-check-grid {
    display: grid;
    gap: 8px 20px;
}

.ps-filter-check-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.ps-filter-check-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ps-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    cursor: pointer;
    user-select: none;
}

.ps-filter-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-filter-check-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    position: relative;
}

.ps-filter-check-input:checked + .ps-filter-check-box {
    background: #0f172a;
    border-color: #0f172a;
}

.ps-filter-check-input:checked + .ps-filter-check-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ps-filter-check-label {
    font-size: 0.88rem;
    line-height: 1.35;
    color: #0f172a;
}

.ps-filter-check--product {
    align-items: center;
    min-width: 0;
}

.ps-filter-check--product .ps-filter-check-label--product {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-filter-product-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.ps-filter-product-icon--empty {
    display: inline-block;
    background: #e2e8f0;
}

.ps-filter-reset {
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.ps-filter-reset:hover {
    text-decoration: underline;
}

.ps-filter-temp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.ps-filter-temp-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ps-filter-temp-dot--hot { background: #ef4444; }
.ps-filter-temp-dot--warm { background: #f9ad01; }
.ps-filter-temp-dot--cold { background: #3b82f6; }

.ps-filter-period-extra {
    margin-top: 10px;
}

.ps-filter-period-wrap {
    position: relative;
}

.ps-filter-period-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f1f5f9;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
}

.ps-filter-period-trigger:hover {
    background: #e8eef4;
}

.ps-filter-period-trigger-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ps-date-popover--filter {
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: min(440px, 100%);
    padding: 16px 16px 14px;
}

.ps-date-popover--filter::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 28px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.ps-filter-period-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.ps-filter-period-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    cursor: pointer;
    user-select: none;
}

.ps-filter-period-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-filter-period-radio-mark {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
}

.ps-filter-period-radio:checked + .ps-filter-period-radio-mark {
    border-color: #0f172a;
}

.ps-filter-period-radio:checked + .ps-filter-period-radio-mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #0f172a;
}

.ps-filter-period-option-label {
    font-size: 0.9rem;
    color: #0f172a;
}

.ps-filter-period-option-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ps-filter-period-option-body--range {
    gap: 6px;
}

.ps-filter-period-select {
    min-height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    color: #0f172a;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ps-filter-period-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ps-filter-period-date-field {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ps-filter-period-date {
    min-width: 130px;
    min-height: 36px;
    padding: 0 34px 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.ps-filter-period-date::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ps-filter-period-date::-moz-calendar-picker-indicator {
    display: none;
}

.ps-filter-period-date:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ps-filter-period-date-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
}

.ps-filter-period-date-icon:hover {
    color: #64748b;
    background: rgba(148, 163, 184, 0.12);
}

.ps-filter-period-date:disabled + .ps-filter-period-date-icon {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ps-filter-period-range-sep {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ps-filter-period-popover-actions {
    margin-top: 4px;
}

.ps-date-anchor-wrap:has(.ps-filter-period-popover:not([hidden])) {
    z-index: 50;
}

.ps-filter-period-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.ps-filter-inline-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.ps-filter-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.ps-filter-radio-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-filter-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.ps-filter-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-filter-radio-mark {
    width: 16px;
    height: 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.ps-filter-radio input:checked + .ps-filter-radio-mark {
    border-color: #0f172a;
}

.ps-filter-radio input:checked + .ps-filter-radio-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #0f172a;
}

.ps-filter-mgr-pick {
    margin-top: 12px;
}

.ps-filter-mgr-search-wrap {
    position: relative;
}

.ps-filter-mgr-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.ps-filter-mgr-search {
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.ps-filter-mgr-results {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    max-height: 180px;
    overflow-y: auto;
}

.ps-filter-mgr-results-item,
.ps-filter-mgr-results-empty {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.ps-filter-mgr-results-item:hover {
    background: var(--surface-muted);
}

.ps-filter-mgr-results-empty {
    color: var(--text-muted);
    cursor: default;
}

.ps-filter-mgr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ps-filter-mgr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.84rem;
}

.ps-filter-mgr-chip-remove {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.ps-filter-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}

.ps-filter-footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.ps-filter-count {
    font-size: 0.88rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ps-filter-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.ps-filter-btn--primary {
    background: #0f172a;
    color: #fff;
}

.ps-filter-btn--primary:hover {
    background: #1e293b;
}

.ps-filter-btn--secondary {
    background: #e2e8f0;
    color: #64748b;
}

.ps-filter-btn--secondary:not(:disabled) {
    background: #cbd5e1;
    color: #0f172a;
}

.ps-filter-btn--secondary:disabled {
    cursor: not-allowed;
}

.ps-filter-btn--ghost {
    background: #fff;
    border-color: var(--line);
    color: var(--text);
    margin-left: auto;
}

.ps-filter-btn--ghost:hover {
    background: var(--surface-muted);
}

@media (max-width: 640px) {
    .ps-filter-check-grid--2 {
        grid-template-columns: 1fr;
    }

    .ps-filter-drawer-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ps-filter-btn--ghost {
        margin-left: 0;
    }
}

.ps-add-billing-block {
    padding: 18px 22px;
}

.ps-add-billing-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
}

.ps-add-billing-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.ps-add-billing-controls {
    display: flex;
    flex: 1 1 420px;
    justify-content: flex-end;
    gap: 10px;
    min-width: 260px;
}

.ps-add-billing-input {
    width: min(100%, 520px);
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
}

.ps-add-billing-input:focus {
    outline: 2px solid rgba(123, 44, 191, 0.18);
    border-color: #7b2cbf;
}

.ps-add-billing-btn {
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: #7b2cbf;
    color: #fff;
    padding: 0 18px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ps-add-billing-btn:hover {
    background: #6923a4;
}

.ps-add-billing-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

.ps-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ps-bottom-row > .ps-block,
.ps-bottom-col-aside {
    min-width: 0;
}

.ps-bottom-col-aside {
    display: grid;
    gap: 20px;
    align-content: start;
}

.ps-reservations-block {
    padding: 0;
}

.ps-reservations-title {
    margin: 0;
    padding: 18px 22px 14px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.ps-reservations-shimmer,
.ps-reservations-content {
    padding: 16px 22px 20px;
}

.ps-reservations-block.is-loading .ps-reservations-content {
    display: none;
}

.ps-reservations-block:not(.is-loading) .ps-reservations-shimmer {
    display: none;
}

.ps-create-ps-home-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 40px;
}

.ps-create-ps-home-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.ps-limits-block {
    padding: 0;
}

.ps-limits-title {
    margin: 0;
    padding: 18px 22px 14px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.ps-limits-list {
    padding: 16px 22px 20px;
}

.ps-limits-state {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ps-limits-state--error {
    color: #b91c1c;
}

.ps-limits-item + .ps-limits-item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.ps-limits-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 12px;
}

.ps-limits-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
}

.ps-limits-item-stats {
    flex: 0 0 auto;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text);
    white-space: nowrap;
}

.ps-limits-remain {
    font-weight: 700;
}

.ps-limits-remain--success {
    color: #16a34a;
}

.ps-limits-remain--warning {
    color: #ea580c;
}

.ps-limits-remain--danger {
    color: #dc2626;
}

.ps-limits-remain--muted {
    color: var(--text-muted);
}

.ps-limits-total {
    font-weight: 700;
    color: var(--text);
}

.ps-limits-bar-wrap {
    padding-top: 2px;
}

.ps-limits-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: #eceff3;
    overflow: visible;
}

.ps-limits-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 0;
    border-radius: 3px 0 0 3px;
    background: #4b5563;
    transition: width 0.35s ease;
    overflow: visible;
}

.ps-limits-bar-badge {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #4b5563;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Потенциальные продажи: форма создания */
.ps-create-drawer {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.ps-create-head {
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ps-create-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.ps-create-stepsbar {
    flex-shrink: 0;
    padding: 10px 20px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.ps-create-stepbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ps-create-stepbar-item {
    font-weight: 600;
    color: var(--text-muted);
}

.ps-create-stepbar-item.is-current {
    font-weight: 800;
    color: var(--text);
}

.ps-create-stepbar-arrow {
    color: var(--text-muted);
    font-weight: 600;
}

.ps-create-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ps-create-form .ps-float-field {
    position: relative;
    display: block;
    margin-bottom: 4px;
}

.ps-create-form .ps-float-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    background: transparent;
    padding: 22px 0 10px;
    min-height: auto;
    font: inherit;
    color: var(--text);
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.ps-create-form .ps-float-input:hover {
    border-bottom-color: #94a3b8;
}

.ps-create-form .ps-float-input:focus {
    border-bottom-width: 2px;
    border-bottom-color: var(--accent);
    padding-bottom: 9px;
}

.ps-create-form .ps-float-field label {
    position: absolute;
    left: 0;
    top: 26px;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    pointer-events: none;
    transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
    transform-origin: left top;
}

.ps-create-form .ps-float-input:focus + label,
.ps-create-form .ps-float-input:not(:placeholder-shown) + label,
.ps-create-form .ps-float-field.is-filled label {
    top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.ps-create-form .ps-float-field--select .ps-float-input {
    padding-right: 28px;
    cursor: pointer;
}

.ps-create-form .ps-float-field--select.is-open .ps-float-input {
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
    padding-bottom: 9px;
}

.ps-create-form .ps-float-field-chevron {
    position: absolute;
    right: 2px;
    top: 30px;
    pointer-events: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: transform 0.16s ease, color 0.16s ease, top 0.16s ease;
}

.ps-create-form .ps-float-field--select:has(.ps-float-input:not(:placeholder-shown)) .ps-float-field-chevron,
.ps-create-form .ps-float-field--select.is-open .ps-float-field-chevron {
    top: 18px;
}

.ps-create-form .ps-float-field--select.is-open .ps-float-field-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.ps-create-form .ps-float-field--textarea .ps-float-input:focus + label,
.ps-create-form .ps-float-field--textarea .ps-float-input:not(:placeholder-shown) + label,
.ps-create-form .ps-float-field--textarea.is-filled label {
    top: 4px;
}

.ps-create-form .ps-float-field--textarea .ps-float-input {
    min-height: 96px;
    resize: vertical;
    padding-top: 28px;
}

.ps-create-form .ps-float-field--textarea label {
    top: 30px;
}

.ps-create-step {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 18px 44px;
}

.ps-create-section {
    margin-bottom: 18px;
}

.ps-create-section-title {
    font-weight: 800;
    margin: 0 0 12px;
}

.ps-create-section-subtitle {
    font-weight: 700;
}

.ps-create-help {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 12px 14px;
    border-radius: 10px;
    color: #b45309;
    font-size: 0.9rem;
    margin: 10px 0 16px;
    overflow: hidden;
    max-height: 96px;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.28s ease,
        opacity 0.22s ease,
        transform 0.22s ease,
        padding 0.28s ease,
        margin 0.28s ease,
        border-color 0.22s ease;
}

.ps-create-help.is-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-left-color: transparent;
    pointer-events: none;
}

.ps-create-temp-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.ps-create-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: var(--text);
}

.ps-create-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-create-radio-dot {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    opacity: 0.85;
}

.ps-create-radio input:checked + .ps-create-radio-dot {
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(123, 44, 191, 0.14);
}

.ps-create-radio-label {
    white-space: nowrap;
}

.ps-create-product-field {
    margin-bottom: 16px;
}

.ps-create-product-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-left: -34px;
}

.ps-create-product-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 22px;
    margin-left: 4px;
    object-fit: contain;
}

.ps-create-product-icon[hidden] {
    display: block !important;
    visibility: hidden;
}

.ps-create-product-input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ps-create-product-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.ps-create-product-result {
    padding: 10px 14px;
    cursor: pointer;
}

.ps-create-product-result:hover,
.ps-create-product-result:focus {
    background: #f8fafc;
}

.ps-create-product-result-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.ps-create-product-result-hint {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ps-create-product-mark {
    background: #fef08a;
    color: inherit;
    padding: 0;
}

.ps-create-product-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ps-create-product-result--add {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2px;
}

.ps-create-product-result--add:hover,
.ps-create-product-result--add:focus {
    background: var(--accent-soft);
}

.ps-create-product-result-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.ps-create-product-result-divider {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ps-create-source-wrap {
    margin-bottom: 12px;
}

.ps-create-contact-section {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ps-create-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-create-contact-card + .ps-create-contact-card {
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.ps-create-contact-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ps-create-contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.ps-create-contact-details[hidden] {
    display: none !important;
}

.ps-create-contact-name-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ps-create-form .ps-float-field--contact-wide {
    width: 24em;
    max-width: 100%;
    flex: 0 0 auto;
}

.ps-create-contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    transition: margin-bottom 0.28s ease;
}

.ps-create-contact-section:has(.ps-create-help.is-collapsed) .ps-create-contact-header {
    margin-bottom: 16px;
}

.ps-create-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--accent);
    font-weight: 700;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.ps-create-inline-action:hover {
    color: var(--accent-hover, var(--accent));
    text-decoration: underline;
}

.ps-create-inline-action--repeatable {
    margin-bottom: 10px;
}

.ps-js-create-contact-add[hidden] {
    display: none !important;
}

.ps-create-inline-action--remove {
    color: #dc2626;
}

.ps-create-inline-action--remove:hover {
    color: #b91c1c;
}

.ps-create-repeatable-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-create-repeatable-extra-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ps-create-repeatable-extra-list:empty {
    display: none;
}

.ps-create-repeatable-row,
.ps-create-email-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ps-create-form .ps-float-field--email {
    width: 24em;
    max-width: 100%;
    flex: 0 0 auto;
}

.ps-create-repeatable-row .ps-create-phone-inline {
    width: auto;
}

.ps-create-phone-inline {
    display: inline-flex;
    align-items: flex-end;
    gap: 14px;
    width: auto;
}

.ps-create-form .ps-float-field--phone {
    width: 12em;
    flex: 0 0 auto;
}

.ps-create-form .ps-float-field--phone-ext {
    width: 11em;
    flex: 0 0 auto;
}

.ps-create-manager-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.ps-create-manager-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.ps-create-manager-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.ps-create-manager-option-row--picker {
    align-items: flex-end;
}

.ps-create-manager-option-row input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-create-manager-option-row .ps-create-manager-radio-dot {
    flex-shrink: 0;
}

.ps-create-manager-radio-hit {
    display: inline-flex;
    flex-shrink: 0;
    margin-bottom: 12px;
    cursor: pointer;
}

.ps-create-manager-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    box-shadow: none;
    opacity: 1;
}

.ps-create-manager-option-row input[type="radio"]:checked + .ps-create-manager-radio-dot,
.ps-create-manager-option-row input[type="radio"]:checked + .ps-create-manager-radio-hit .ps-create-manager-radio-dot {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
}

.ps-create-manager-option-label {
    font-weight: 600;
    color: var(--text);
}

.ps-create-manager-picker {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 24em;
    cursor: text;
    user-select: text;
}

.ps-create-form .ps-float-field--hint-hide .ps-float-input {
    padding: 8px 0;
    min-height: 0;
}

.ps-create-form .ps-float-field--hint-hide .ps-float-input:focus {
    padding-bottom: 7px;
}

.ps-create-form .ps-float-field--hint-hide label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 500;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.ps-create-form .ps-float-field--hint-hide .ps-float-input:focus + label,
.ps-create-form .ps-float-field--hint-hide .ps-float-input:not(:placeholder-shown) + label,
.ps-create-form .ps-float-field--hint-hide.is-filled label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
}

.ps-create-manager-option-row--picker .ps-create-manager-radio-hit {
    margin-bottom: 12px;
}

.ps-create-org-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
}

.ps-create-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 16px 44px;
    border-top: 1px solid var(--line);
}

.ps-create-footer .ps-create-back,
.ps-create-footer .ps-create-next {
    min-width: 160px;
}

.ps-create-footer .ps-create-submit {
    min-width: 220px;
}

.ps-create-footer .ps-create-back:disabled,
.ps-create-footer .ps-create-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Создание ПП из карточки клиента */
.ps-client-create-drawer .ps-client-create-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 18px 44px;
}

.ps-client-create-section {
    margin-bottom: 20px;
}

.ps-client-create-type-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ps-client-create-type-option {
    min-height: 44px;
    padding: 4px 0;
    font-weight: 600;
}

.ps-client-create-type-row--renewal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 44px;
}

.ps-client-create-type-row--connection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 44px;
}

.ps-client-create-type-row--renewal .ps-client-create-type-option {
    flex: 0 0 auto;
    min-height: 0;
    padding: 4px 0;
}

.ps-client-create-type-row--connection .ps-client-create-type-option {
    flex: 0 0 auto;
    min-height: 0;
    padding: 4px 0;
}

.ps-client-create-renewal-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ps-client-create-renewal-end[hidden] {
    display: none !important;
}

.ps-client-create-connection-limit {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
}

.ps-client-create-connection-limit[hidden] {
    display: none !important;
}

.ps-client-create-connection-limit-label {
    font-weight: 400;
    color: var(--muted);
}

.ps-client-create-connection-limit-value {
    font-size: 0.9rem;
}

.ps-client-create-renewal-end-label {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--muted);
    white-space: nowrap;
}

.ps-client-create-renewal-date-root {
    position: relative;
}

.ps-client-create-renewal-date-root .ps-date-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 80;
    min-width: 280px;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ps-client-create-renewal-date-root.is-cal-open .ps-date-picker {
    z-index: 80;
}

.ps-client-create-empty-contacts {
    margin: 8px 0 0;
    font-size: 0.9rem;
}

.ps-client-create-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 16px 44px;
    border-top: 1px solid var(--line);
}

.ps-client-create-footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ps-client-create-submit {
    min-width: 140px;
    min-height: 40px;
    box-shadow: none;
}

.ps-client-create-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.ps-client-create-cancel {
    border: 0;
    background: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.ps-client-create-cancel:hover {
    text-decoration: underline;
}

.ps-client-create-hint {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    text-align: right;
}

.ps-client-create-hint[hidden] {
    display: none;
}


/* ПП: список по дате отложения */
.ps-list-page {
    gap: 14px;
}

.ps-list-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: calc(var(--radius) - 1px);
    border-top-right-radius: calc(var(--radius) - 1px);
}

.ps-list-header-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.ps-list-home {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--text-muted);
    background: #fff;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-list-home:hover {
    background: var(--surface-muted);
    color: var(--text);
    border-color: #cbd5e1;
}

.ps-list-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 10px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    position: relative;
    z-index: 4;
    overflow: visible;
}

.ps-list-actions-normal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    width: 100%;
}

.ps-list-actions-normal[hidden] {
    display: none;
}

.ps-list-actions-mode {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.ps-list-actions-mode[hidden] {
    display: none;
}

.ps-list-actions-assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
}

.ps-list-actions-assign[hidden] {
    display: none;
}

.ps-list-mode-assign,
.ps-list-mode-postpone,
.ps-list-mode-refuse {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.ps-list-mode-assign[hidden],
.ps-list-mode-postpone[hidden],
.ps-list-mode-refuse[hidden] {
    display: none;
}

.ps-list-postpone-title,
.ps-list-refuse-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.ps-list-postpone-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ps-list-refuse-setup-wrap {
    display: inline-flex;
}

.ps-list-refuse-setup-wrap .ps-list-refuse-setup:disabled {
    pointer-events: none;
}

.ps-list-refuse-setup {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 14px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.ps-list-refuse-setup:hover:not(:disabled),
.ps-list-refuse-setup:focus-visible:not(:disabled) {
    border-color: #b91c1c;
    color: #b91c1c;
}

.ps-list-refuse-setup:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ps-list-refuse-modal-body .ps-refuse-field:last-of-type {
    margin-bottom: 0;
}

.ps-list-refuse-modal-summary {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-muted, #64748b);
}

.ps-list-refuse-modal-progress {
    margin-top: 4px;
}

.ps-list-refuse-modal-progress[hidden] {
    display: none;
}

.ps-list-refuse-progress-label {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

.ps-list-refuse-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.ps-list-refuse-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);
    transition: width 0.2s ease;
}

.ps-list-refuse-modal.is-refuse-running .ps-refuse-field,
.ps-list-refuse-modal.is-refuse-running .ps-list-refuse-modal-summary,
.ps-list-refuse-modal.is-refuse-running .ps-js-list-refuse-error {
    display: none;
}

.ps-list-refuse-modal.is-refuse-running .ps-js-list-refuse-modal-close,
.ps-list-refuse-modal.is-refuse-running .ps-js-list-refuse-modal-cancel {
    visibility: hidden;
    pointer-events: none;
}

.ps-list-postpone-date-root {
    position: relative;
}

.ps-list-postpone-date-root .ps-date-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 280px;
    margin-bottom: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ps-list-postpone-date-root.is-cal-open .ps-date-picker {
    z-index: 60;
}

.ps-list-assign-master-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ps-list-row-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ps-list-check-box {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
}

.ps-list-row-check-input:checked + .ps-list-check-box {
    background: #0f172a;
    border-color: #0f172a;
}

.ps-list-row-check-input:checked + .ps-list-check-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ps-list-row-check-input:indeterminate + .ps-list-check-box {
    background: #0f172a;
    border-color: #0f172a;
}

.ps-list-row-check-input:indeterminate + .ps-list-check-box::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: none;
    border: none;
}

.ps-list-assign-select-wrap {
    position: relative;
    flex-shrink: 0;
}

.ps-list-assign-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ps-list-assign-select-btn i {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.ps-list-assign-select-btn:hover,
.ps-list-assign-select-btn[aria-expanded="true"] {
    background: var(--surface-muted);
    border-color: #cbd5e1;
}

.ps-list-assign-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 180px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.ps-list-assign-select-menu[hidden] {
    display: none;
}

.ps-list-assign-select-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
}

.ps-list-assign-select-item:hover {
    background: var(--surface-muted);
}

.ps-list-assign-mgr-wrap {
    position: relative;
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 260px;
}

.ps-list-assign-mgr-search {
    margin-bottom: 0;
}

.ps-list-assign-mgr-wrap .ps-mgr-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
}

.ps-list-assign-submit-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ps-list-assign-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: help;
}

.ps-list-assign-info:hover,
.ps-list-assign-info:focus-visible {
    color: var(--text);
}

.ps-list-assign-submit {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ps-list-assign-submit:hover:not(:disabled) {
    background: var(--accent-hover);
}

.ps-list-assign-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ps-list-assign-add-mgr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ps-list-assign-add-mgr:hover:not(:disabled) {
    background: var(--surface-muted);
    border-color: #cbd5e1;
}

.ps-list-assign-add-mgr:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.55;
}

body.ps-assign-mgr-modal-open {
    overflow: hidden;
}

.ps-assign-mgr-modal {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ps-assign-mgr-modal[hidden] {
    display: none;
}

.ps-assign-mgr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.ps-assign-mgr-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.ps-assign-mgr-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.ps-assign-mgr-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.ps-assign-mgr-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.ps-assign-mgr-modal-close:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.ps-assign-mgr-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ps-assign-mgr-modal-summary {
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-assign-mgr-modal-count-input {
    width: 72px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

.ps-assign-mgr-modal-count-input:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

.ps-assign-mgr-modal-search-wrap {
    position: relative;
    margin-bottom: 8px;
}

.ps-assign-mgr-modal-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.ps-assign-mgr-modal-search {
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.ps-assign-mgr-modal-search:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

.ps-assign-mgr-modal-results {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.ps-assign-mgr-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-assign-mgr-modal-list:empty {
    display: none;
}

.ps-assign-mgr-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.ps-assign-mgr-modal-row-label {
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text);
    word-break: break-word;
}

.ps-assign-mgr-modal-row-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.ps-assign-mgr-modal-row-count {
    width: 64px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

.ps-assign-mgr-modal-row-count:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

.ps-assign-mgr-modal-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ps-assign-mgr-modal-row-remove:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.ps-assign-mgr-modal-error {
    margin: 12px 0 0;
    font-size: 0.86rem;
    color: #b91c1c;
}

.ps-assign-mgr-modal-error[hidden] {
    display: none;
}

.ps-assign-mgr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}

.ps-assign-mgr-modal-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ps-assign-mgr-modal-redistribute {
    min-height: 38px;
    padding: 0 16px;
    margin-left: auto;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ps-assign-mgr-modal-redistribute:hover:not(:disabled) {
    background: var(--surface-muted);
    border-color: #cbd5e1;
}

.ps-assign-mgr-modal-redistribute:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.55;
}

.ps-assign-mgr-modal-cancel {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.ps-assign-mgr-modal-cancel:hover {
    background: var(--surface-muted);
}

.ps-list-assign-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-list-assign-close:hover {
    background: var(--surface-muted);
    color: var(--text);
    border-color: #cbd5e1;
}

.ps-list-row-line {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e2e8f0;
}

.ps-list-row-line:last-child {
    border-bottom: none;
}

.ps-list-row-check {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    padding-left: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

.ps-list-wrap.is-assign-mode .ps-list-row-check,
.ps-list-wrap.is-list-action-mode .ps-list-row-check {
    display: inline-flex;
}

.ps-list-row-check--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.ps-list-row-check-input:disabled + .ps-list-check-box {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.ps-list-row-line .ps-list-row {
    flex: 1;
    min-width: 0;
    border-bottom: none;
}

.ps-list-actions-wrap {
    position: relative;
    flex-shrink: 0;
}

.ps-list-actions-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.ps-list-online-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ps-list-online-check-label {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.ps-list-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-list-actions-btn i {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.ps-list-actions-btn:hover,
.ps-list-actions-btn[aria-expanded="true"] {
    background: var(--surface-muted);
    border-color: #cbd5e1;
}

.ps-list-actions-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.ps-list-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 80;
    min-width: 220px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.ps-list-actions-menu[hidden] {
    display: none;
}

.ps-list-actions-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
}

.ps-list-actions-menu-item:hover:not(:disabled) {
    background: var(--surface-muted);
}

.ps-list-actions-menu-item:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

.ps-list-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.ps-list-wrap > .ps-list-row-line:last-child,
.ps-list-wrap > .ps-list-date-group:last-child,
.ps-list-wrap > .ps-list-empty:last-child,
.ps-list-wrap > .ps-list-inline-alert:last-child {
    border-bottom-left-radius: calc(var(--radius) - 1px);
    border-bottom-right-radius: calc(var(--radius) - 1px);
}

.ps-list-date-group {
    padding: 6px 16px 5px;
    background: linear-gradient(
        90deg,
        #dde4ed 0%,
        #e8edf3 14%,
        #f1f5f9 42%,
        #f8fafc 100%
    );
    border-bottom: 1px solid #e2e8f0;
    box-shadow: inset 2px 1px 4px rgba(15, 23, 42, 0.09);
}

.ps-list-date-group + .ps-list-date-group {
    border-top: 1px solid #e2e8f0;
}

.ps-list-date-group-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.ps-list-wrap .ps-list-inline-alert {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.ps-list-empty {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.ps-list-row {
    display: grid;
    /* Колонки списка ПП: продукт | дата | ИНН-КПП | организация | статус | бронь/счета | менеджер. */
    grid-template-columns: minmax(120px, 0.8fr) minmax(128px, 0.92fr) minmax(88px, 1.3fr) minmax(0, 1.75fr) minmax(72px, 1.03fr) calc(18ch + 36px) minmax(88px, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    font-size: 0.86rem;
    line-height: 1.35;
    transition: background 0.12s ease;
}

.ps-list-row-line:last-child .ps-list-row {
    border-bottom: none;
}

.ps-list-row:hover {
    background: #f8fafc;
}

.ps-list-row--new {
    font-weight: 700;
}

.ps-list-row--new .ps-list-type,
.ps-list-row--new .ps-list-cell--org,
.ps-list-row--new .ps-list-cell--when,
.ps-list-row--new .ps-list-inn,
.ps-list-row--new .ps-list-cell--mgr {
    font-weight: 700;
}

.ps-list-cell {
    min-width: 0;
}

.ps-list-cell--product {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-list-product-icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    cursor: default;
}

.ps-list-product-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.ps-list-product-icon--empty {
    display: inline-block;
    background: #f1f5f9;
}

.ps-list-type {
    font-weight: 500;
    color: var(--text);
}

.ps-list-cell--when {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    color: #475569;
    white-space: nowrap;
}

.ps-list-when--online-until {
    white-space: normal;
    line-height: 1.3;
    font-weight: 400;
}

.ps-list-cell--when:has(.ps-list-when--online-until) {
    white-space: normal;
    align-items: flex-start;
}

.ps-list-tz {
    flex-shrink: 0;
    font-size: 0.82em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

.ps-list-cell--idline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.ps-list-temp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}

.ps-list-temp-dot.ps-list-temp--1 {
    background: #ef4444;
}

.ps-list-temp-dot.ps-list-temp--2 {
    background: #f9ad01;
}

.ps-list-temp-dot.ps-list-temp--3 {
    background: #3b82f6;
}

.ps-list-inn {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}

.ps-list-cell--org {
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.ps-list-cell--status {
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-list-status-ico {
    color: #94a3b8;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ps-list-statuscell--new {
    font-weight: 700;
    text-transform: uppercase;
    color: #0f172a;
}

.ps-list-statuscell--work {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ps-list-statuscell--online-channel {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.ps-list-cell--bills {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ps-list-reservation {
    flex: 0 0 18ch;
    width: 18ch;
    max-width: 18ch;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    color: #64748b;
    white-space: nowrap;
}

.ps-list-reservation--loading {
    position: relative;
    display: inline-block;
    flex: 0 0 18ch;
    width: 18ch;
    max-width: 18ch;
    height: 0.95em;
    color: transparent;
    user-select: none;
    pointer-events: none;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.ps-list-reservation--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: ps-list-reservation-shimmer 1.35s ease-in-out infinite;
}

@keyframes ps-list-reservation-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-list-reservation--loading::after {
        animation: none;
        transform: none;
        opacity: 0.35;
    }
}

.ps-list-reservation--expired {
    color: #b91c1c;
}

.ps-list-billtag-slot {
    flex: 0 0 32px;
    width: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.ps-list-billtag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: #fff;
}

.ps-list-billtag--paid {
    border-color: #94a3b8;
}

.ps-list-billtag--paid.ps-list-billtag--full {
    background: #ecfdf5;
    border-color: #86efac;
    color: #15803d;
}

.ps-list-billtag--paid.ps-list-billtag--partial {
    background: #fefce8;
    border-color: #fde047;
    color: #a16207;
}

.ps-list-billcur {
    font-weight: 700;
}

.ps-list-cell--mgr {
    text-align: right;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-list-pagination,
.app-list-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 0;
    font-size: inherit;
    flex-wrap: wrap;
}

.app-list-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.app-list-footer,
.payments-footer,
.ps-list-footer,
.app-search-page-footer,
.news-list-footer,
.clients-ps-footer,
.clients-bookings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.app-list-footer-nav {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.app-list-footer-total {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-list-page-link,
.ps-list-pagelink {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: #4e5570;
    text-decoration: none;
    font-weight: 600;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

button.app-list-page-link {
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.app-list-page-link:hover,
.ps-list-pagelink:hover {
    border-color: #b9c2f7;
    color: #3642b8;
}

.app-list-page-link.is-current,
.ps-list-pagelink.is-current {
    border-color: #ced6ff;
    background: #eef2ff;
    color: #3f4bd1;
    cursor: default;
}

.app-list-page-gap,
.ps-list-pagegap {
    color: #8e94a6;
    padding: 0 2px;
    user-select: none;
}

.app-list-page-next,
.ps-list-pagenext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    margin-left: 2px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: #4e5570;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

button.app-list-page-next {
    margin: 0 0 0 2px;
    font: inherit;
    cursor: pointer;
}

button.app-list-page-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.app-list-page-next:hover,
.ps-list-pagenext:hover {
    border-color: #b9c2f7;
    color: #3642b8;
    text-decoration: none;
}

.app-list-page-next i,
.ps-list-pagenext i {
    font-size: 0.72rem;
}

.ps-calendar-cell--day:not(a) {
    cursor: default;
}

@media (max-width: 960px) {
    .app-grid-3,
    .app-grid-2 {
        grid-template-columns: 1fr;
    }

    .home-charts-grid {
        grid-template-columns: 1fr;
    }

    .db-schema-layout {
        grid-template-columns: 1fr;
    }

    .db-schema-toc {
        position: static;
        max-height: none;
    }

    .app-main {
        padding: 18px;
    }

    .app-main-clients {
        padding: 18px 18px 18px;
    }

    .app-main-ps {
        padding: 18px 16px 20px;
    }

    .ps-calendar-body {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .ps-calendar-nav {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .ps-add-billing-form,
    .ps-add-billing-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .ps-add-billing-controls {
        flex-basis: auto;
        min-width: 0;
    }

    .ps-add-billing-input {
        width: 100%;
    }

    .ps-bottom-row {
        grid-template-columns: 1fr;
    }

    .ps-limits-item-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ps-limits-item-stats {
        white-space: normal;
    }
}

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

.app-nav-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    color: var(--sidebar-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.app-nav-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.app-nav-trigger.is-active {
    background: rgba(99, 102, 241, 0.18);
    color: var(--sidebar-active);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25);
}

body.app-global-search-open {
    overflow: hidden;
}

.app-global-search {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 56px 16px 24px;
}

.app-global-search[hidden] {
    display: none;
}

.app-global-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.app-global-search-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.app-global-search-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 18px 10px 20px;
}

.app-global-search-input-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-global-search-input-icon {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 1rem;
}

.app-global-search-input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--text);
}

.app-global-search-input::placeholder {
    color: #94a3b8;
}

.app-global-search-input::-webkit-search-cancel-button,
.app-global-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.app-global-search-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.app-global-search-close:hover {
    background: #f1f5f9;
    color: var(--text);
}

.app-global-search-toolbar {
    padding: 0 20px 12px;
}

.app-global-search-filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.app-global-search-filter {
    appearance: none;
    margin: 0;
    padding: 6px 30px 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
}

.app-global-search-filter:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.app-global-search-filter-chevron {
    position: absolute;
    right: 11px;
    pointer-events: none;
    font-size: 0.68rem;
    color: #94a3b8;
}

.app-global-search-results-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border-top: 1px solid #f1f5f9;
}

.app-global-search-status {
    padding: 28px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.app-global-search-status--loading {
    padding: 0;
    text-align: left;
}

.app-global-search-results-wrap:has(.app-global-search-result) .app-global-search-status--loading {
    border-top: 1px solid #f1f5f9;
}

.app-global-search-results-wrap:not(:has(.app-global-search-result)) .app-global-search-status--loading {
    padding: 6px 0;
}

.app-global-search-loading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
}

.app-global-search-loading-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-global-search-shimmer {
    display: block;
    border-radius: 4px;
    background: #eef2f7;
    position: relative;
    overflow: hidden;
}

.app-global-search-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: app-global-search-shimmer 1.35s ease-in-out infinite;
}

.app-global-search-shimmer--title {
    width: 58%;
    height: 12px;
}

.app-global-search-shimmer--subtitle {
    width: 42%;
    height: 10px;
}

.app-global-search-shimmer--tag {
    flex-shrink: 0;
    width: 36px;
    height: 10px;
    margin-top: 2px;
}

@keyframes app-global-search-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-global-search-shimmer::after {
        animation: none;
        transform: none;
        opacity: 0.35;
    }
}

.app-global-search-results-wrap:has(.app-global-search-result) .app-global-search-status:not(.app-global-search-status--loading) {
    padding: 10px 20px 14px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.85rem;
}

.app-global-search-results {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.app-global-search-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.app-global-search-result:hover,
.app-global-search-result.is-active {
    background: #f8fafc;
}

.app-global-search-result-body {
    flex: 1 1 auto;
    min-width: 0;
}

.app-global-search-result-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-global-search-result-subtitle {
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-global-search-result-tag {
    flex-shrink: 0;
    padding-top: 2px;
    font-size: 0.78rem;
    color: #94a3b8;
}

.app-global-search-result--more .app-global-search-result-title {
    font-weight: 400;
    color: var(--text-muted);
}

.app-global-search-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding: 12px 20px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fcfdff;
}

.app-global-search-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #94a3b8;
    white-space: nowrap;
}

.app-global-search-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1;
    color: #64748b;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.app-global-search-kbd i {
    font-size: 0.58rem;
}

.app-global-search-result--related .app-global-search-result-title {
    font-weight: 400;
}

.app-global-search-result--related .app-global-search-result-subtitle {
    color: #94a3b8;
}

.app-instant-tip--search-preview {
    z-index: 10070;
    width: min(320px, calc(100vw - 24px));
    max-width: 320px;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.app-instant-tip--ps-product {
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
}

.ps-product-tip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-product-tip-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.ps-product-tip-icon--empty {
    display: inline-block;
    background: #e2e8f0;
    border-radius: 4px;
}

.ps-product-tip-name {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
}

.app-search-tip {
    display: flex;
    flex-direction: column;
}

.app-search-tip-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7;
}

.app-search-tip-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.9rem;
}

.app-search-tip-avatar--client {
    background: #ecfeff;
    color: #0891b2;
}

.app-search-tip-avatar--ps {
    background: #fff7ed;
    color: #ea580c;
}

.app-search-tip-head-copy {
    min-width: 0;
}

.app-search-tip-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.app-search-tip-subtitle {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.app-search-tip-body {
    display: grid;
    gap: 6px;
    padding: 10px 14px 12px;
}

.app-search-tip-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #334155;
}

.app-search-tip-line i {
    width: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    color: #94a3b8;
    text-align: center;
}

.app-search-tip-section {
    padding: 0 14px 12px;
}

.app-search-tip-section-title {
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.app-search-tip-card + .app-search-tip-card {
    margin-top: 6px;
}

.app-search-tip-card {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.app-search-tip-card-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
}

.app-search-tip-card-subtitle {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.app-main-search {
    padding: 20px 28px 28px;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 0;
}

.app-search-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(920px, 100%);
    margin: 0 auto;
    min-height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
}

.app-search-page--empty {
    min-height: auto;
    max-height: none;
    justify-content: center;
}

.app-search-page-empty-card {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 28px 24px;
}

.app-search-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    flex-shrink: 0;
}

.app-search-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.app-search-page-meta {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.app-search-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.app-search-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.app-global-search-results--page {
    padding: 6px 0;
}

.app-search-page-footer {
    flex-shrink: 0;
    padding-top: 4px;
}

.app-search-page-empty,
.app-search-page-alert {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .app-global-search {
        padding-top: 12px;
        align-items: stretch;
    }

    .app-global-search-dialog {
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }

    .app-global-search-footer {
        display: none;
    }
}

/* Планы выручки */
.revenue-plans-page {
    max-width: 1080px;
}

.revenue-plans-migration-hint {
    margin-top: 12px;
}

.revenue-plans-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.revenue-plans-period-card,
.revenue-plans-users-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.revenue-plans-period-card {
    padding: 20px 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.revenue-plans-period-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.revenue-plans-period-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f0ff;
    color: #2563eb;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.revenue-plans-period-title,
.revenue-plans-users-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.revenue-plans-period-copy,
.revenue-plans-users-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.revenue-plans-period-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.revenue-plans-date-field {
    min-width: 180px;
    margin: 0;
}

.revenue-plans-date-field input[type="date"] {
    min-height: 42px;
}

.revenue-plans-period-sep {
    align-self: center;
    padding-top: 24px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.revenue-plans-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.revenue-plans-summary-item {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
}

.revenue-plans-summary-item--accent {
    border-color: #c7d9fb;
    background: #f4f8ff;
}

.revenue-plans-summary-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.revenue-plans-summary-value {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--text);
}

.revenue-plans-users-card {
    padding: 0;
    overflow: hidden;
}

.revenue-plans-users-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.revenue-plans-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 320px);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text-muted);
}

.revenue-plans-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font: inherit;
    color: var(--text);
}

.revenue-plans-search input:focus {
    outline: none;
}

.revenue-plans-table-wrap {
    border: 0;
    border-radius: 0;
}

.revenue-plans-table th,
.revenue-plans-table td {
    vertical-align: middle;
}

.revenue-plans-col-amount {
    width: 220px;
    text-align: right;
}

.revenue-plans-table thead th.revenue-plans-col-amount {
    text-align: right;
}

.revenue-plans-row.is-inactive {
    opacity: 0.72;
}

.revenue-plans-user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.revenue-plans-user-name {
    font-weight: 600;
    color: var(--text);
}

.revenue-plans-user-email {
    font-size: 0.86rem;
    color: var(--text-muted);
}

.revenue-plans-inactive-badge {
    align-self: flex-start;
    margin-top: 4px;
}

.revenue-plans-code {
    font-size: 0.9rem;
}

.revenue-plans-role {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.revenue-plans-amount-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.revenue-plans-amount-input {
    width: 100%;
    max-width: 150px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    text-align: right;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.revenue-plans-amount-input:focus {
    outline: none;
    border-color: #93b4f7;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.revenue-plans-amount-suffix {
    color: var(--text-muted);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.revenue-plans-empty-filter {
    margin: 0;
    padding: 16px 22px 20px;
    color: var(--text-muted);
}

.revenue-plans-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.revenue-plans-status {
    font-size: 0.92rem;
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .revenue-plans-summary {
        grid-template-columns: 1fr;
    }

    .revenue-plans-col-amount,
    .revenue-plans-table thead th.revenue-plans-col-amount {
        width: auto;
        text-align: left;
    }

    .revenue-plans-amount-field {
        justify-content: flex-start;
    }

    .revenue-plans-amount-input {
        max-width: none;
        text-align: left;
    }
}

/* Главная — персональная статистика */
.app-shimmer {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: 12px;
}

.app-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: app-global-search-shimmer 1.35s ease-in-out infinite;
}

.home-stats {
    display: grid;
    gap: 22px;
    width: 100%;
}

@media (min-width: 2200px) {
    .home-stats {
        max-width: 1920px;
        margin-inline: auto;
    }
}

.home-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
}

.home-stats-intro {
    flex: 1 1 auto;
    min-width: 0;
}

.home-stats-greeting {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.home-stats-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.home-stats-body {
    display: grid;
    gap: 20px;
}

.home-stats-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
}

.home-stats-period-wrap {
    position: relative;
}

.home-stats-period-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-stats-period-btn:hover:not(:disabled) {
    border-color: #c5d4f5;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.home-stats-period-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.home-stats-period-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f4f8ff;
    color: #2563eb;
    flex-shrink: 0;
}

.home-stat-calendar-glyph {
    display: block;
    background-color: currentColor;
    -webkit-mask-image: url('stat-icons/stat-calendar.svg');
    mask-image: url('stat-icons/stat-calendar.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.home-stat-calendar-glyph--period {
    width: 18px;
    height: 18px;
}

.home-stat-calendar-glyph--today {
    width: 22px;
    height: 22px;
}

.home-stats-period-btn-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.home-stats-period-btn-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.home-stats-period-btn-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.home-stats-period-btn-chevron {
    color: var(--text-muted);
    font-size: 1rem;
}

.home-stats-period-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(360px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.home-stats-period-popover-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 650;
}

.home-stats-period-popover-copy {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.home-stats-period-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin-bottom: 16px;
}

.home-stats-period-field {
    flex: 1 1 140px;
    margin: 0;
}

.home-stats-period-sep {
    align-self: center;
    padding-bottom: 10px;
    color: var(--text-muted);
}

.home-stats-period-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.home-stats-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
}

.home-stats-refresh-btn .las {
    font-size: 1.05rem;
}

.home-stats-block {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.home-stats-block.is-loading [data-home-plan-content],
.home-stats-block.is-loading [data-home-sales-content],
.home-stats-block.is-loading [data-home-ps-content],
.home-stats-block.is-loading [data-home-managers-content],
[data-home-plan-shimmer][hidden],
[data-home-sales-shimmer][hidden],
[data-home-ps-shimmer][hidden],
[data-home-managers-shimmer][hidden],
[data-home-plan-content][hidden],
[data-home-sales-content][hidden],
[data-home-ps-content][hidden],
[data-home-managers-content][hidden] {
    display: none !important;
}

.home-stats-block.is-ready [data-home-plan-shimmer],
.home-stats-block.is-ready [data-home-sales-shimmer],
.home-stats-block.is-ready [data-home-ps-shimmer],
.home-stats-block.is-ready [data-home-managers-shimmer] {
    display: none !important;
}

.home-stats-block-title {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.home-stats-plan-layout {
    display: grid;
    grid-template-columns: minmax(253px, 322px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.home-stats-plan-ring-wrap {
    position: relative;
    width: min(100%, 276px);
    margin: 0 auto;
    aspect-ratio: 1;
}

.home-stats-plan-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.home-stats-plan-ring-bg,
.home-stats-plan-ring-progress {
    fill: none;
    stroke-width: 6;
}

.home-stats-plan-ring-bg {
    stroke: #edf2f7;
}

.home-stats-plan-ring-progress {
    stroke: #2563eb;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s ease, stroke 0.35s ease;
}

.home-stats-plan-ring-wrap.is-complete .home-stats-plan-ring-progress {
    stroke: #16a34a;
}

.home-stats-plan-ring-center {
    position: absolute;
    inset: 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
}

.home-stats-plan-percent {
    font-size: clamp(1.8rem, 4vw, 2.35rem);
    font-weight: 750;
    color: var(--text);
}

.home-stats-plan-ring-wrap.is-complete .home-stats-plan-percent {
    color: #16a34a;
}

.home-stats-plan-fact {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--text);
}

.home-stats-drill-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.home-stats-drill-link:hover,
.home-stats-drill-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.home-stats-drill-link.home-sales-cell-amount,
.home-stats-drill-link.home-mgr-sales-cell-amount,
.home-stats-drill-link.home-mgr-fact-amount,
.home-stats-drill-link.home-sales-row-total {
    font-weight: inherit;
}

.home-stats-plan-target {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}

.home-stats-plan-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-stats-metric-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 16px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafbfd;
}

.home-stats-metric-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-stats-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
}

.home-stats-metric-icon-glyph {
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: var(--home-metric-icon);
    mask-image: var(--home-metric-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.home-stats-metric-icon--plan {
    color: #2563eb;
    background: #eef4ff;
    --home-metric-icon: url('stat-icons/stat-plan-target.svg');
}

.home-stats-metric-icon--fact {
    color: #16a34a;
    background: #ecfdf5;
    --home-metric-icon: url('stat-icons/stat-fact-ruble.svg');
}

.home-stats-metric-icon--payments {
    color: #7c3aed;
    background: #f5f3ff;
    --home-metric-icon: url('stat-icons/stat-payments-doc.svg');
}

.home-stats-metric-icon--avg {
    color: #ea580c;
    background: #fff7ed;
    --home-metric-icon: url('stat-icons/stat-average-check.svg');
}

.home-stats-metric-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    min-width: 0;
}

.home-stats-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    padding-top: 8px;
    color: var(--text);
}

.home-stats-metric-hint {
    margin-top: -2px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.home-stats-metric-today {
    margin-top: auto;
    padding-top: 14px;
    padding-left: 8px;
}

.home-stats-metric-today-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #16a34a;
}

.home-stats-metric-today-label {
    margin-top: 2px;
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--text-muted);
}

.home-stats-plan-shimmer-layout {
    display: grid;
    grid-template-columns: minmax(253px, 322px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.home-stats-plan-shimmer-ring {
    width: min(100%, 253px);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 999px;
}

.home-stats-plan-shimmer-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-stats-metric-shimmer {
    min-height: 118px;
}

@media (max-width: 1100px) {
    .home-stats-plan-metrics,
    .home-stats-plan-shimmer-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-stats-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .home-stats-toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .home-stats-plan-layout,
    .home-stats-plan-shimmer-layout {
        grid-template-columns: 1fr;
    }

    .home-stats-period-popover {
        left: 0;
        right: auto;
    }
}

@media (max-width: 640px) {
    .home-stats-header {
        gap: 16px;
    }

    .home-stats-toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .home-stats-period-wrap,
    .home-stats-period-btn,
    .home-stats-refresh-btn {
        width: auto;
        max-width: 100%;
    }

    .home-stats-plan-metrics,
    .home-stats-plan-shimmer-metrics {
        grid-template-columns: 1fr;
    }
}

/* Главная — ряд «Продажи» + «Потенциальные продажи» */
.home-stats-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

.home-stats-block--sales,
.home-stats-block--ps,
.home-stats-col-aside {
    min-width: 0;
}

.home-stats-col-aside {
    display: grid;
    gap: 20px;
    align-content: start;
}

.home-sales-shimmer {
    display: grid;
    gap: 18px;
}

.home-sales-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-sales-summary--shimmer .home-sales-summary-card {
    min-height: 108px;
    border: 0;
    background: transparent;
}

.home-sales-summary-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 14px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent, #cbd5e1);
    border-radius: 14px;
    background: #fff;
}

.home-sales-summary-main {
    min-width: 0;
}

.home-sales-summary-card--connections {
    --accent: #22c55e;
}

.home-sales-summary-card--renewals {
    --accent: #2563eb;
}

.home-sales-summary-card--upsells {
    --accent: #f97316;
}

.home-sales-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #475569;
    text-transform: uppercase;
}

.home-sales-summary-value {
    display: block;
    margin-top: 10px;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 750;
    line-height: 1.15;
    color: var(--text);
}

.home-sales-summary-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.home-sales-summary-today {
    flex-shrink: 0;
    text-align: right;
}

.home-sales-summary-today-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #16a34a;
}

.home-sales-summary-today-label {
    margin-top: 2px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.home-sales-content {
    display: grid;
    gap: 18px;
}

.home-sales-table-shimmer {
    min-height: 280px;
    border-radius: 14px;
}

.home-sales-table-wrap {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.home-sales-table {
    margin: 0;
}

.home-sales-table th,
.home-sales-table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.home-sales-table thead th {
    background: #f8fafc;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: var(--text);
}

.home-sales-col-product {
    min-width: 160px;
}

.home-sales-col-type {
    min-width: 130px;
}

.home-sales-col-total {
    min-width: 120px;
    text-align: right;
}

.home-sales-table thead th.home-sales-col-product {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
}

.home-sales-col-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.home-sales-col-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: lowercase;
}

.home-sales-table thead th.home-sales-col-total,
.home-sales-table tbody td.home-sales-col-total,
.home-sales-table tfoot td.home-sales-col-total {
    text-align: right;
}

.home-sales-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 100%;
}

.home-sales-product-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
}

.home-sales-product-icon--empty {
    display: inline-block;
    background: #e2e8f0;
}

.home-sales-product-name {
    font-weight: 600;
    color: var(--text);
}

.home-sales-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 100%;
}

.home-sales-cell-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.home-sales-cell-amount {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.home-sales-cell-today {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    color: #16a34a;
}

.home-sales-total-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 100%;
}

.home-sales-row-total {
    display: inline-flex;
    align-items: center;
    min-height: 100%;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.home-sales-table tbody td.home-sales-col-total,
.home-sales-table tfoot td.home-sales-col-total {
    vertical-align: middle;
}

.home-sales-table tfoot td {
    background: #f8fafc;
    border-top: 1px solid var(--line);
    font-weight: 600;
    vertical-align: middle;
}

.home-sales-totals-row .home-sales-cell-amount,
.home-sales-totals-row .home-sales-row-total {
    font-size: 0.95rem;
}

.home-sales-empty {
    margin: 0;
    padding: 8px 2px 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Главная — блок «Потенциальные продажи» */
.home-ps-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.home-ps-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.home-ps-all-link {
    flex: 0 0 auto;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}

.home-ps-all-link:hover {
    text-decoration: underline;
}

.home-ps-shimmer {
    display: grid;
    gap: 16px;
}

.home-ps-content {
    display: grid;
    gap: 16px;
}

.home-ps-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-ps-types--shimmer .home-ps-type-card {
    min-height: 168px;
    border: 0;
    background: transparent;
}

.home-ps-type-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    padding: 14px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.home-ps-type-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.home-ps-type-card--connections .home-ps-type-title {
    color: #16a34a;
}

.home-ps-type-card--renewals .home-ps-type-title {
    color: #2563eb;
}

.home-ps-type-card--upsells .home-ps-type-title {
    color: #ea580c;
}

.home-ps-type-metrics {
    margin: 0;
    display: grid;
    gap: 8px;
    flex: 1 1 auto;
}

.home-ps-type-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.home-ps-type-metric dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

.home-ps-type-metric dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--text);
    text-align: right;
}

.home-ps-metric-value--danger {
    color: #dc2626;
}

.home-ps-metric-value--success {
    color: #16a34a;
}

.home-ps-type-link {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.home-ps-type-link:hover {
    text-decoration: underline;
}

.home-ps-today-shimmer {
    min-height: 72px;
    border-radius: 14px;
}

.home-ps-today {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #eff6ff;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.home-ps-today:hover {
    background: #dbeafe;
}

.home-ps-today-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    flex: 0 0 auto;
}

.home-ps-today-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-ps-today-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #2563eb;
}

.home-ps-today-value {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: #1d4ed8;
}

/* Главная — заканчивается бронирование */
.home-stats-block--reservations {
    margin-top: 0;
}

.home-reservations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-reservations-grid--shimmer .home-reservations-card {
    min-height: 118px;
    border: 0;
    background: transparent;
}

.home-reservations-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.home-reservations-card:hover {
    transform: translateY(-1px);
}

.home-reservations-card--expired {
    background: #fff5f5;
    border-color: #f5c2c2;
}

.home-reservations-card--expired:hover {
    background: #ffecec;
}

.home-reservations-card--expired .home-reservations-card-label {
    color: #e11d48;
}

.home-reservations-card--today {
    background: #fff8f1;
    border-color: #f5d0a9;
}

.home-reservations-card--today:hover {
    background: #fff1e4;
}

.home-reservations-card--today .home-reservations-card-label {
    color: #ea580c;
}

.home-reservations-card--soon {
    background: #f3faf5;
    border-color: #b7e0c2;
}

.home-reservations-card--soon:hover {
    background: #e8f7ed;
}

.home-reservations-card--soon .home-reservations-card-label {
    color: #16a34a;
}

.home-reservations-card-label {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-reservations-card-value {
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

@media (max-width: 1280px) {
    .home-stats-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .home-reservations-grid {
        grid-template-columns: 1fr;
    }
}

/* Главная — показатели менеджеров (РОП) */
.home-stats-block--managers {
    margin-top: 4px;
}

.home-managers-shimmer-table {
    min-height: 280px;
    border-radius: 14px;
}

.home-managers-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.home-managers-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}

.home-managers-table thead th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    line-height: 1.25;
}

.home-managers-table thead .home-mgr-col-name {
    text-align: left;
}

.home-mgr-th-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: #94a3b8;
}

.home-mgr-col-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
}

.home-mgr-col-type {
    min-width: 108px;
}

.home-mgr-sales-cell-wrap {
    vertical-align: middle;
}

.home-mgr-fact-cell-wrap {
    vertical-align: middle;
}

.home-mgr-fact-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 100%;
}

.home-mgr-fact-amount {
    font-weight: 700;
    color: var(--text);
}

.home-mgr-sales-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 100%;
}

.home-mgr-sales-cell-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.home-mgr-sales-cell-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.home-mgr-col-group--connections {
    border-top: 3px solid #22c55e;
}

.home-mgr-col-group--renewals {
    border-top: 3px solid #2563eb;
}

.home-mgr-col-group--upsells {
    border-top: 3px solid #f97316;
}

.home-mgr-col-group--ps {
    border-top: 3px solid #8b5cf6;
}

.home-managers-table tbody td,
.home-managers-table tfoot td {
    padding: 12px 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.home-managers-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.home-managers-row:hover td {
    background: #f8fafc;
}

.home-managers-row.is-expanded td {
    background: #f8fbff;
    border-bottom-color: transparent;
}

.home-managers-row.is-expanded:hover td {
    background: #f8fbff;
}

.home-managers-row:focus {
    outline: none;
}

.home-managers-row:focus-visible td:first-child {
    box-shadow: inset 3px 0 0 #2563eb;
}

.home-mgr-col-name {
    min-width: 170px;
    text-align: left;
}

.home-managers-name {
    display: inline-block;
    color: var(--text);
    font-weight: 650;
}

.home-mgr-num {
    text-align: center;
    white-space: nowrap;
    color: var(--text);
}

.home-mgr-money strong {
    font-weight: 700;
}

.home-mgr-col-progress {
    min-width: 120px;
}

.home-mgr-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.home-mgr-progress {
    flex: 1 1 auto;
    min-width: 64px;
    max-width: 88px;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.home-mgr-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.35s ease;
}

.home-mgr-progress.is-complete .home-mgr-progress-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.home-mgr-progress-label {
    min-width: 34px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2563eb;
    text-align: right;
}

.home-mgr-progress-label.is-complete {
    color: #16a34a;
}

.home-mgr-ps-overdue--danger strong {
    color: #dc2626;
}

.home-mgr-ps-overdue--success strong {
    color: #16a34a;
}

.home-mgr-col-today-val strong {
    color: #1d4ed8;
    font-size: 0.95rem;
}

.home-mgr-col-toggle {
    width: 36px;
    text-align: center;
    color: #94a3b8;
}

.home-managers-chevron {
    display: inline-flex;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

.home-managers-chevron.is-open {
    transform: rotate(180deg);
    color: #2563eb;
}

.home-managers-row.is-expanded .home-managers-chevron {
    color: #2563eb;
}

.home-managers-detail-row td {
    padding: 0 !important;
    border-bottom: none;
    background: #f8fbff;
}

.home-managers-detail-row.is-open td {
    border-bottom: 1px solid var(--line);
}

.home-managers-detail-anim {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-managers-detail-row.is-open .home-managers-detail-anim {
    grid-template-rows: 1fr;
}

.home-managers-detail-inner {
    overflow: hidden;
    min-height: 0;
}

.home-managers-detail-pad {
    padding: 12px 14px 16px;
}

.home-managers-detail-pad > .home-managers-products-table,
.home-managers-detail-pad > .home-managers-products-empty {
    margin: 0;
}

.home-managers-products-empty {
    padding: 16px 4px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.home-managers-products-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    font-size: 0.82rem;
}

.home-managers-products-table thead th {
    padding: 10px 12px;
    background: #eff6ff;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #dbeafe;
}

.home-managers-products-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.home-managers-products-table .home-mgr-sales-cell {
    gap: 4px;
    min-height: 42px;
}

.home-managers-products-table .home-mgr-sales-cell-count,
.home-managers-products-table .home-mgr-sales-cell-amount {
    line-height: 1.3;
}

.home-managers-products-table tbody tr:last-child td {
    border-bottom: 0;
}

.home-mgr-prod-col-type {
    min-width: 108px;
}

.home-mgr-prod-col-name {
    min-width: 180px;
    text-align: left !important;
}

.home-managers-products-table .home-mgr-prod-col-name {
    padding-left: 16px;
}

.home-managers-products-table thead .home-mgr-prod-col-name {
    text-align: left !important;
}

.home-mgr-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 10px;
}

.home-mgr-product-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

.home-mgr-product-icon--empty {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #e2e8f0;
}

.home-mgr-prod-col-total {
    min-width: 100px;
}

.home-mgr-prod-col-today {
    min-width: 72px;
}

.home-managers-totals-row td {
    background: #f1f5f9;
    border-top: 2px solid var(--line);
    border-bottom: 0;
    font-weight: 600;
}

.home-managers-empty {
    margin: 12px 2px 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    .home-sales-summary {
        grid-template-columns: 1fr;
    }

    .home-sales-table-wrap {
        overflow-x: auto;
    }

    .home-sales-table {
        min-width: 720px;
    }
}

/* Раздел «Новости» */
.app-main-news {
    width: 100%;
    max-width: none;
    padding: 20px 28px 28px;
    box-sizing: border-box;
}

body.app-page-news:has(.news-layout) {
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

body.app-page-news:has(.news-layout) .app-shell {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

body.app-page-news:has(.news-layout) .app-main-news {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.news-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 16px;
}

.news-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

.news-page-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.news-page-tabs {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}

.news-page-tab {
    position: relative;
    padding-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
}

.news-page-tab.is-active {
    color: var(--accent);
    font-weight: 600;
}

.news-page-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.news-page-add-btn {
    flex-shrink: 0;
    margin-top: 4px;
}

.news-page-alert {
    flex-shrink: 0;
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.news-list-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.news-list-search {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.news-list-search-field {
    display: flex;
    align-items: center;
    position: relative;
}

.news-list-search-field input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.news-list-search-field input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.news-list-search-icon {
    position: absolute;
    right: 14px;
    font-size: 1.05rem;
    color: #94a3b8;
    pointer-events: none;
}

.news-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-list-item {
    border-bottom: 1px solid var(--line);
}

.news-list-item:last-child {
    border-bottom: none;
}

.news-list-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 22px 24px 28px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.news-list-link:hover {
    background: #f8fafc;
}

.news-list-link.is-selected {
    background: #eff6ff;
}

.news-list-link-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.news-list-link-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    width: 100%;
    margin: 0 0 12px;
}

.news-list-link-title {
    position: relative;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.news-list-link-date {
    justify-self: end;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-muted);
    white-space: nowrap;
}

.news-list-unread-dot {
    position: absolute;
    right: calc(100% + 10px);
    top: 0.72em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    transform: translateY(-50%);
}

.news-list-link.is-selected .news-list-unread-dot {
    box-shadow: 0 0 0 2px #dbeafe;
}

.news-list-link-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.news-list-link-chevron {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #cbd5e1;
}

.news-list-empty {
    padding: 28px 18px;
}

.news-list-footer {
    flex-shrink: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--line);
}

.news-detail-pane {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.news-detail,
.news-detail-placeholder {
    padding: 24px 32px 32px;
}

.news-detail-back {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}

.news-detail-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.news-detail-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.news-detail-menu-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.news-detail-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.news-detail-menu-btn:hover,
.news-detail-menu-btn[aria-expanded="true"] {
    background: var(--surface-muted);
    border-color: var(--line);
    color: #0f172a;
}

.news-detail-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 168px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.news-detail-menu[hidden] {
    display: none;
}

.news-detail-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
}

.news-detail-menu-item:hover {
    background: var(--surface-muted);
}

.news-detail-menu-item--danger {
    color: var(--danger);
}

.news-detail-menu-item--danger:hover {
    background: var(--danger-soft);
}

.news-detail-back:hover {
    text-decoration: underline;
}

.news-detail-meta {
    margin: 0 0 20px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.news-detail-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text);
}

.news-detail-body p {
    margin: 0 0 14px;
}

.news-detail-body p:last-child {
    margin-bottom: 0;
}

.news-detail-list {
    margin: 0 0 14px;
    padding-left: 1.2rem;
}

.news-detail-list li {
    margin-bottom: 6px;
}

.news-detail-list li:last-child {
    margin-bottom: 0;
}

.news-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

@media (max-width: 960px) {
    .news-page-header {
        flex-wrap: wrap;
    }

    .news-detail-back {
        display: inline-flex;
    }
}

/* Редактор новостей (Quill) */
body.news-editor-modal-open {
    overflow: hidden;
}

.news-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.news-editor-modal[hidden] {
    display: none;
}

.news-editor-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.news-editor-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(90vh, 860px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.news-editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.news-editor-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.news-editor-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
}

.news-editor-modal-close:hover {
    background: var(--surface-muted);
    color: #0f172a;
}

.news-editor-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px 22px;
    overflow: auto;
}

.news-editor-modal-body .app-field {
    margin: 0;
}

.news-editor-modal-body .app-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
}

.news-editor-modal-body .app-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    font: inherit;
    font-size: 0.95rem;
}

.news-editor-quill-wrap {
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.news-editor-quill-wrap .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.news-editor-quill-wrap .ql-container.ql-snow {
    border: none;
    font: inherit;
    font-size: 0.94rem;
}

.news-editor-quill-wrap .ql-editor {
    min-height: 220px;
    max-height: 42vh;
    overflow-y: auto;
    line-height: 1.6;
}

.news-editor-error {
    margin: 0;
    font-size: 0.84rem;
    color: var(--danger);
}

.news-editor-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 4px;
}

.news-detail-body--rich p {
    margin: 0 0 14px;
}

.news-detail-body--rich p:last-child {
    margin-bottom: 0;
}

.news-detail-body--rich ul,
.news-detail-body--rich ol {
    margin: 0 0 14px;
    padding-left: 1.35rem;
}

.news-detail-body--rich li {
    margin-bottom: 6px;
}

.news-detail-body--rich h2,
.news-detail-body--rich h3 {
    margin: 0 0 12px;
    line-height: 1.35;
}

.news-detail-body--rich h2 {
    font-size: 1.2rem;
}

.news-detail-body--rich h3 {
    font-size: 1.05rem;
}

.news-detail-body--rich blockquote {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.news-detail-body--rich a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-detail-body--rich a:hover {
    color: var(--accent-hover);
}

/* Телефония */
.telephony-settings-page {
    max-width: 72rem;
}

.telephony-settings-form {
    max-width: none;
}

.telephony-module-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.telephony-module-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
}

.telephony-module-toggle-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.telephony-module-toggle-title {
    font-size: 0.98rem;
    color: var(--text, #0f172a);
}

.telephony-module-toggle-desc {
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-module-state {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.telephony-module-state.is-on {
    background: #dcfce7;
    color: #166534;
}

.telephony-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.telephony-provider-nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.telephony-provider-panels {
    min-height: 420px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.telephony-provider-panel {
    display: none;
}

.telephony-provider-panel.is-active {
    display: block;
    animation: telephony-panel-in 0.22s ease;
}

@keyframes telephony-panel-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.telephony-provider-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #e8edf5;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.telephony-provider-panel-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.telephony-provider-panel-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    color: var(--text-muted, #64748b);
}

.telephony-provider-panel-enable {
    flex-shrink: 0;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid #dbe3f0;
    border-radius: 999px;
    background: #fff;
    font-size: 0.82rem;
    white-space: nowrap;
}

.telephony-provider-panel-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.telephony-provider-panel-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.telephony-provider-panel-note {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.telephony-provider-panel-note-text {
    margin: 0 0 0.75rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.telephony-provider-panel-note--proxy {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.telephony-provider-panel-note-label {
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.telephony-provider-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f7;
}

.telephony-enabled-field {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.telephony-section-head {
    margin-bottom: 0.85rem;
}

.telephony-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.telephony-section-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted, #64748b);
}

.telephony-provider-section,
.telephony-credentials-section {
    margin-bottom: 1.5rem;
}

.telephony-credentials-section .app-field:first-of-type {
    margin-top: 0;
}

.telephony-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.telephony-provider-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: 108px;
    margin: 0;
    padding: 0.9rem 0.95rem 0.85rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.telephony-provider-card:hover {
    border-color: #bfd0f6;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.telephony-provider-card.is-selected {
    border-color: #5b8def;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14), 0 10px 24px rgba(37, 99, 235, 0.1);
}

.telephony-provider-card.is-enabled:not(.is-selected) {
    border-color: #b9dfc8;
    background: linear-gradient(180deg, #fff 0%, #f6fcf8 100%);
}

.telephony-provider-card--soon {
    cursor: default;
    opacity: 0.72;
    background: #f8fafc;
}

.telephony-provider-card--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line, #e2e8f0);
}

.telephony-provider-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.telephony-provider-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: transparent;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.telephony-provider-card.is-selected .telephony-provider-card-check {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.telephony-provider-card-logo {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 0.55rem;
    padding-right: 1.5rem;
}

.telephony-provider-card-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 32px;
    object-fit: contain;
    object-position: left center;
}

.telephony-provider-card-logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border-radius: 10px;
    background: #e8edf5;
    color: #64748b;
    font-size: 1.05rem;
}

.telephony-provider-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.telephony-provider-card-desc {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.telephony-provider-card-status {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.telephony-provider-card-status.is-on {
    background: #dcfce7;
    color: #166534;
}

.telephony-provider-card-status.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.telephony-provider-card-status.is-off {
    background: #f1f5f9;
    color: #64748b;
}

.telephony-provider-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .telephony-provider-grid {
        grid-template-columns: 1fr;
    }

    .telephony-layout {
        grid-template-columns: 1fr;
    }

    .telephony-provider-panels {
        min-height: 0;
    }

    .telephony-provider-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .telephony-provider-panel-fields {
        grid-template-columns: 1fr;
    }

    .telephony-module-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

.telephony-settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
}

.telephony-settings-status {
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
}

.telephony-settings-status.is-ok {
    color: #15803d;
}

.telephony-settings-status.is-error {
    color: #b91c1c;
}

.telephony-provider-test-status {
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-provider-test-status.is-ok {
    color: #15803d;
}

.telephony-provider-test-status.is-error {
    color: #b91c1c;
}

.telephony-webhook-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.telephony-webhook-url code {
    font-size: 0.82rem;
    word-break: break-all;
}

.app-user-telephony {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.app-user-telephony-head {
    margin-bottom: 1rem;
}

.app-user-telephony-head h2 {
    margin: 0 0 0.35rem;
}

.app-user-telephony-head p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 42rem;
}

.app-user-telephony-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.app-user-telephony-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.app-user-telephony-card--novofon {
    border-color: #c7d8fa;
    background: linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
}

.app-user-telephony-card--yeastar {
    border-color: #c9e3d3;
    background: linear-gradient(180deg, #fff 0%, #f4fbf7 100%);
}

.app-user-telephony-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-user-telephony-card-brand {
    min-width: 0;
    flex: 1;
}

.app-user-telephony-card-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 30px;
    object-fit: contain;
    object-position: left center;
}

.app-user-telephony-card-logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    border-radius: 10px;
    background: #e8edf5;
    color: #64748b;
    font-size: 1rem;
}

.app-user-telephony-card-status {
    flex-shrink: 0;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.app-user-telephony-card-status.is-configured {
    background: #dcfce7;
    color: #166534;
}

.app-user-telephony-card--novofon .app-user-telephony-card-status.is-configured {
    background: #dbeafe;
    color: #1d4ed8;
}

.app-user-telephony-card-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
}

.app-user-telephony-card-fields {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.app-user-telephony-card-fields .app-field {
    margin: 0;
}

.app-user-telephony-card-fields label {
    font-size: 0.84rem;
}

.app-user-telephony-card-fields input {
    font-size: 0.92rem;
}

@media (max-width: 720px) {
    .app-user-telephony-grid {
        grid-template-columns: 1fr;
    }
}

.clients-contact-phone-field {
    position: relative;
}

.clients-contact-phone-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.35rem;
}

.clients-contact-phone-field .app-telephony-call-wrap {
    position: relative;
}

.ps-org-contact-phone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.ps-org-contact-phone-row .app-telephony-call-wrap {
    position: relative;
}

.app-telephony-call-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.app-telephony-call-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.app-telephony-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--accent, #2563eb);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
}

.app-telephony-call-provider {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.app-telephony-call-wrap--multi .app-telephony-call-provider {
    background: #f1f5f9;
    color: #334155;
}

.app-telephony-call-btn:hover:not(:disabled) {
    border-color: var(--accent, #2563eb);
    background: #f8fafc;
}

.app-telephony-call-btn.is-disabled,
.app-telephony-call-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: #64748b;
}

.app-hint-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 140;
    display: none;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text, #0f172a);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    pointer-events: none;
    white-space: normal;
    text-align: center;
}

.app-hint-tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #e2e8f0;
}

.app-hint-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -1px);
    border: 5px solid transparent;
    border-top-color: #fff;
}

.app-telephony-call-wrap:hover .app-hint-tooltip,
.app-telephony-call-wrap:focus-within .app-hint-tooltip {
    display: block;
}

.app-telephony-call-wrap--dynamic .app-hint-tooltip[hidden] {
    display: none !important;
}

.app-telephony-call-wrap--dynamic:hover .app-hint-tooltip:not([hidden]),
.app-telephony-call-wrap--dynamic:focus-within .app-hint-tooltip:not([hidden]) {
    display: block;
}

/* Payments page */
.ps-filter-period-slot {
    margin-top: 14px;
}

.ps-filter-check-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payments-filters-page {
    width: 100%;
}

.payments-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.payments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    flex-wrap: wrap;
}

.payments-head-copy .ps-list-home {
    margin-right: 2px;
}

.payments-head-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.payments-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}

.payments-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.payments-total-badge-count {
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #334155;
    letter-spacing: 0.01em;
}

.payments-total-badge-word {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
}

.payments-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.payments-list-wrap {
    overflow: hidden;
}

.payments-list-date-group-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payments-list-date-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid #dce3ec;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

.payments-list-row {
    grid-template-columns:
        minmax(120px, 0.85fr)
        minmax(72px, 0.6fr)
        minmax(88px, 0.75fr)
        minmax(96px, 0.65fr)
        minmax(88px, 1.2fr)
        minmax(0, 1.65fr)
        minmax(88px, 0.95fr);
}

.payments-list-cell--bill {
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payments-list-cell--amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #15803d;
    white-space: nowrap;
}

.payments-empty {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    background: #fff;
}

/* SMTP */
.smtp-settings-page {
    max-width: 56rem;
}

.smtp-settings-form {
    max-width: none;
}

.smtp-module-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.smtp-module-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
}

.smtp-module-toggle-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.smtp-module-toggle-title {
    font-size: 0.98rem;
    color: var(--text, #0f172a);
}

.smtp-module-toggle-desc {
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.smtp-module-state {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.smtp-module-state.is-on {
    background: #dcfce7;
    color: #166534;
}

.smtp-settings-grid {
    display: grid;
    gap: 1rem;
}

.smtp-settings-panel {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
}

.smtp-settings-panel-title {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.smtp-settings-panel-desc {
    margin: -0.35rem 0 1rem;
    font-size: 0.86rem;
    color: var(--text-muted, #64748b);
}

.smtp-settings-fields {
    gap: 14px;
}

.smtp-field-wide {
    grid-column: 1 / -1;
}

.smtp-clear-password {
    margin-top: 8px;
    font-size: 0.84rem;
}

.smtp-test-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.smtp-test-email-field {
    flex: 1 1 220px;
    margin: 0;
}

.smtp-settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 1.25rem;
}

.smtp-settings-status {
    font-size: 0.88rem;
    color: var(--text-muted, #64748b);
}

.smtp-settings-status.is-ok {
    color: #166534;
}

.smtp-settings-status.is-error {
    color: #b91c1c;
}

@media (max-width: 720px) {
    .smtp-module-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

.app-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 18px 18px;
}

.app-theme-picker-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    padding: 12px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-theme-picker-option i {
    font-size: 1.25rem;
}

.app-theme-picker-option:hover {
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--text);
}

.app-theme-picker-option.is-active {
    border-color: rgba(99, 102, 241, 0.55);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12);
}

.app-profile-card--appearance .app-profile-card-head {
    border-bottom: none;
    padding-bottom: 0;
}

.app-profile-theme-note {
    margin: 0;
    padding: 0 18px 14px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
}

[data-theme="dark"] .app-global-search-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .app-global-search-close {
    background: var(--surface-muted);
    color: var(--text-muted);
}

[data-theme="dark"] .app-global-search-close:hover {
    background: var(--line);
    color: var(--text);
}

[data-theme="dark"] .app-global-search-filter {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .app-global-search-result:hover,
[data-theme="dark"] .app-global-search-result.is-active {
    background: var(--surface-muted);
}

[data-theme="dark"] .app-drawer-panel--profile {
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .app-profile-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .home-kpi-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .app-table th {
    background: var(--surface-muted);
}

[data-theme="dark"] .app-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .app-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.08);
}

[data-theme="dark"] .app-login-mode-btn {
    background: var(--surface-muted);
    color: var(--text-muted);
}

[data-theme="dark"] .app-login-mode-btn.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] .app-login-steps li {
    background: var(--surface-muted);
    color: var(--text-muted);
}

[data-theme="dark"] .app-login-steps li.is-active,
[data-theme="dark"] .app-login-steps li.is-done {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] .clients-contact-parser-card,
[data-theme="dark"] .clients-contact-drawer-panel,
[data-theme="dark"] .app-drawer-panel--clients-contact,
[data-theme="dark"] .app-drawer-panel--clients-contact-parser {
    background: var(--surface);
}

[data-theme="dark"] .clients-contact-parser-chip {
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .app-alert-error {
    background: var(--danger-soft);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

[data-theme="dark"] .app-alert-success {
    background: var(--success-soft);
    border-color: rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
}

[data-theme="dark"] .app-badge,
[data-theme="dark"] .app-tag {
    border-color: var(--line);
}

@media (max-width: 520px) {
    .app-theme-picker {
        grid-template-columns: 1fr;
    }

    .app-theme-picker-option {
        flex-direction: row;
        min-height: 52px;
        justify-content: flex-start;
        padding: 12px 14px;
    }
}

/*
 * Dark theme compatibility layer.
 * Older components below still use literal light colors instead of the
 * design tokens. Keep the light theme untouched and normalize those surfaces
 * only while the dark theme is active.
 */
[data-theme="dark"] .clients-contact-drawer,
[data-theme="dark"] .clients-contact-parser,
[data-theme="dark"] .clients-contact-link-drawer,
[data-theme="dark"] .ps-filter-drawer,
[data-theme="dark"] .ps-create-drawer,
[data-theme="dark"] .app-user-link-panel,
[data-theme="dark"] .app-user-link-panel-head,
[data-theme="dark"] .app-user-link-card,
[data-theme="dark"] .clients-bookings-table-wrap,
[data-theme="dark"] .clients-bills-table-wrap,
[data-theme="dark"] .clients-ps-list-wrap,
[data-theme="dark"] .db-preview-modal-dialog,
[data-theme="dark"] .ps-list-wrap,
[data-theme="dark"] .ps-list-actions-bar,
[data-theme="dark"] .ps-assign-mgr-modal-dialog,
[data-theme="dark"] .app-search-page-body,
[data-theme="dark"] .home-stats-block,
[data-theme="dark"] .home-sales-summary-card,
[data-theme="dark"] .home-managers-table-wrap,
[data-theme="dark"] .revenue-plans-table-wrap {
    background: var(--surface);
    color: var(--text);
}

[data-theme="dark"] .clients-list-pane,
[data-theme="dark"] .clients-detail-frame,
[data-theme="dark"] .ps-block,
[data-theme="dark"] .app-search-page-shell,
[data-theme="dark"] .news-layout,
[data-theme="dark"] .news-reader,
[data-theme="dark"] .payments-layout {
    background: var(--panel-bg);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .clients-contact-parser-textarea:focus,
[data-theme="dark"] .clients-contact-parser-drop,
[data-theme="dark"] .clients-contact-parser-chip,
[data-theme="dark"] .ps-bill-input,
[data-theme="dark"] .ps-refuse-select,
[data-theme="dark"] .ps-refuse-comment,
[data-theme="dark"] .ps-mgr-search-input,
[data-theme="dark"] .ps-date-input,
[data-theme="dark"] .ps-time-input,
[data-theme="dark"] .ps-add-billing-input,
[data-theme="dark"] .ps-filter-period-date,
[data-theme="dark"] .ps-list-refuse-setup,
[data-theme="dark"] .ps-calendar-select,
[data-theme="dark"] .revenue-plans-amount-input,
[data-theme="dark"] .clients-contact-link-org-search,
[data-theme="dark"] .clients-contact-link-contact-input,
[data-theme="dark"] .app-input,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .ps-date-popover,
[data-theme="dark"] .ps-date-popover--header::before,
[data-theme="dark"] .ps-date-popover--aside::before,
[data-theme="dark"] .ps-date-popover--tab::before,
[data-theme="dark"] .ps-date-field-tooltip,
[data-theme="dark"] .ps-date-picker,
[data-theme="dark"] .ps-mgr-results,
[data-theme="dark"] .ps-filter-mgr-results,
[data-theme="dark"] .ps-create-product-results,
[data-theme="dark"] .ps-create-product-result--add,
[data-theme="dark"] .ps-client-create-renewal-date-root .ps-date-picker,
[data-theme="dark"] .ps-list-postpone-date-root .ps-date-picker,
[data-theme="dark"] .clients-contact-link-suggest,
[data-theme="dark"] .clients-ps-product-popover,
[data-theme="dark"] .ps-calendar-month-popover,
[data-theme="dark"] .ps-calendar-product-filter:not(.ps-calendar-mgr-filter) .clients-ps-product-popover-footer,
[data-theme="dark"] .ps-calendar-mgr-popover::before,
[data-theme="dark"] .ps-saved-filters-floater,
[data-theme="dark"] .ps-saved-filters-floater-cell,
[data-theme="dark"] .ps-saved-filters-menu,
[data-theme="dark"] .ps-list-assign-select-menu,
[data-theme="dark"] .ps-list-actions-menu,
[data-theme="dark"] .home-stats-period-popover {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .ps-date-field-tooltip::after {
    border-right-color: var(--surface);
}

[data-theme="dark"] .ps-date-field-tooltip::before {
    border-right-color: var(--line);
}

[data-theme="dark"] .ps-date-cancel,
[data-theme="dark"] .ps-partner-comment-action:hover,
[data-theme="dark"] .ps-partner-comment-action:focus-visible,
[data-theme="dark"] .ps-comment-md-btn:hover,
[data-theme="dark"] .ps-org-contact-action,
[data-theme="dark"] .ps-history-event-info-btn,
[data-theme="dark"] .clients-ps-product-filter-btn,
[data-theme="dark"] .clients-ps-tab,
[data-theme="dark"] .db-schema-preview-btn,
[data-theme="dark"] .ps-calendar-month-trigger,
[data-theme="dark"] .ps-calendar-nav,
[data-theme="dark"] .ps-filter-btn--ghost,
[data-theme="dark"] .ps-list-home,
[data-theme="dark"] .ps-list-assign-select-btn,
[data-theme="dark"] .ps-list-assign-add-mgr,
[data-theme="dark"] .ps-assign-mgr-modal-redistribute,
[data-theme="dark"] .ps-assign-mgr-modal-cancel,
[data-theme="dark"] .ps-list-assign-close,
[data-theme="dark"] .ps-list-actions-btn,
[data-theme="dark"] .app-list-page-link,
[data-theme="dark"] .app-list-page-next,
[data-theme="dark"] .ps-list-pagelink,
[data-theme="dark"] .ps-list-pagenext,
[data-theme="dark"] .home-stats-period-btn,
[data-theme="dark"] .revenue-plans-search,
[data-theme="dark"] .contact-products-item:hover,
[data-theme="dark"] .entity-tag {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .clients-contact-parser-clear:hover,
[data-theme="dark"] .ps-mgr-results-item:hover,
[data-theme="dark"] .ps-mgr-results-item.is-active,
[data-theme="dark"] .ps-date-popover-close:hover,
[data-theme="dark"] .ps-date-cal-toggle:hover,
[data-theme="dark"] .ps-date-cancel:hover,
[data-theme="dark"] .ps-btn--ghost:disabled,
[data-theme="dark"] .ps-history-day,
[data-theme="dark"] .home-quick-card:hover,
[data-theme="dark"] .clients-bookings-table thead th,
[data-theme="dark"] .clients-bookings-table tbody tr:hover,
[data-theme="dark"] .clients-bills-table thead th,
[data-theme="dark"] .clients-bills-row:hover:not(.clients-bills-row--paid),
[data-theme="dark"] .clients-bills-row:focus-visible:not(.clients-bills-row--paid),
[data-theme="dark"] .clients-ps-product-filter-btn:hover,
[data-theme="dark"] .clients-ps-product-filter-btn:focus-visible,
[data-theme="dark"] .clients-ps-tab:not(:disabled):hover,
[data-theme="dark"] .clients-ps-tab:not(:disabled):focus-visible,
[data-theme="dark"] .clients-ps-row:hover,
[data-theme="dark"] .db-schema-toc,
[data-theme="dark"] .db-schema-placeholder,
[data-theme="dark"] .db-schema-index-def,
[data-theme="dark"] .db-preview-modal-close:hover,
[data-theme="dark"] .clients-list-search-clear:hover,
[data-theme="dark"] .clients-list-row:hover,
[data-theme="dark"] .ps-calendar-wd,
[data-theme="dark"] .ps-calendar-cell--day:hover,
[data-theme="dark"] .ps-saved-filters-menu-item:hover,
[data-theme="dark"] .ps-filter-period-trigger,
[data-theme="dark"] .ps-filter-chip,
[data-theme="dark"] .ps-create-product-result:hover,
[data-theme="dark"] .ps-create-product-result:focus,
[data-theme="dark"] .ps-list-row:hover,
[data-theme="dark"] .app-global-search-footer,
[data-theme="dark"] .app-search-tip-card,
[data-theme="dark"] .telephony-provider-card--soon,
[data-theme="dark"] .app-telephony-call-btn:hover:not(:disabled),
[data-theme="dark"] .smtp-settings-status {
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .app-drawer-body--profile {
    background: linear-gradient(180deg, var(--surface-muted) 0%, var(--bg) 120px);
}

[data-theme="dark"] .app-profile-subsection--password,
[data-theme="dark"] .app-profile-recovery-panel,
[data-theme="dark"] .entity-card,
[data-theme="dark"] .entity-card-client,
[data-theme="dark"] .entity-admin-card,
[data-theme="dark"] .clients-bookings-empty-state,
[data-theme="dark"] .revenue-plans-period-card,
[data-theme="dark"] .telephony-module-bar,
[data-theme="dark"] .telephony-provider-card,
[data-theme="dark"] .app-user-telephony-card,
[data-theme="dark"] .smtp-module-bar,
[data-theme="dark"] .smtp-settings-card {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .app-placeholder {
    background: linear-gradient(180deg, var(--surface), var(--surface-muted));
    border-color: var(--line);
}

[data-theme="dark"] .clients-list-search {
    background: linear-gradient(180deg, var(--surface-muted), var(--surface));
}

[data-theme="dark"] .clients-list-search-field {
    background: var(--input-bg);
    border-color: var(--line);
    box-shadow: none;
}

[data-theme="dark"] .clients-copy-btn,
[data-theme="dark"] .ps-history-event-info-btn {
    background: var(--surface-muted);
}

[data-theme="dark"] .ps-calendar-grid {
    background: var(--line);
    border-color: var(--line);
}

[data-theme="dark"] .ps-calendar-cell--empty,
[data-theme="dark"] .ps-calendar-cell--day {
    background: var(--surface);
}

[data-theme="dark"] .ps-calendar-cell--has,
[data-theme="dark"] .ps-saved-filters-link--all {
    background: rgba(245, 158, 11, 0.14);
}

[data-theme="dark"] .ps-calendar-cell--has:hover,
[data-theme="dark"] .ps-saved-filters-link--all:hover {
    background: rgba(245, 158, 11, 0.22);
}

[data-theme="dark"] .ps-calendar-month-option.is-selected,
[data-theme="dark"] .clients-ps-tab.is-active,
[data-theme="dark"] .contact-products-item.is-checked,
[data-theme="dark"] .entity-tag--product,
[data-theme="dark"] .revenue-plans-summary-item--accent,
[data-theme="dark"] .app-list-page-link.is-current,
[data-theme="dark"] .ps-list-pagelink.is-current {
    background: var(--accent-soft);
    border-color: rgba(129, 140, 248, 0.45);
    color: var(--accent);
}

[data-theme="dark"] .ps-calendar-month-option.is-current:not(.is-selected),
[data-theme="dark"] .app-search-tip-avatar--ps,
[data-theme="dark"] .home-stats-metric-icon--avg {
    background: var(--warning-soft);
    color: #fb923c;
}

[data-theme="dark"] .clients-contact-parser-card-delete:hover,
[data-theme="dark"] .ps-shell-aside--refused,
[data-theme="dark"] .ps-saved-filters-menu-item--danger:hover,
[data-theme="dark"] .ps-assign-mgr-modal-row-remove:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

[data-theme="dark"] .ps-shell-aside--completed,
[data-theme="dark"] .app-profile-card-icon--security,
[data-theme="dark"] .entity-card-client .entity-card-type,
[data-theme="dark"] .entity-detail-hero-client .entity-detail-kicker,
[data-theme="dark"] .ps-list-billtag--paid.ps-list-billtag--full,
[data-theme="dark"] .home-stats-metric-icon--fact {
    background: var(--success-soft);
    color: var(--success);
}

[data-theme="dark"] .ps-shell-aside--online,
[data-theme="dark"] .home-stats-metric-icon--payments {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

[data-theme="dark"] .app-profile-badge--role {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

[data-theme="dark"] .app-profile-badge--2fa.is-on {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
}

[data-theme="dark"] .ps-comment-source--billing,
[data-theme="dark"] .ps-comment-source--local,
[data-theme="dark"] .ps-comment-source--kontur,
[data-theme="dark"] .ps-history-event-info-btn {
    background: var(--surface);
}

[data-theme="dark"] .ps-calendar-count,
[data-theme="dark"] .ps-saved-filters-link,
[data-theme="dark"] .ps-saved-filters-link:hover,
[data-theme="dark"] .ps-saved-filters-floater .ps-saved-filters-link,
[data-theme="dark"] .ps-saved-filters-period-value,
[data-theme="dark"] .ps-saved-filters-count,
[data-theme="dark"] .ps-saved-filters-menu-btn[aria-expanded="true"],
[data-theme="dark"] .ps-saved-filters-menu-item,
[data-theme="dark"] .ps-filter-check-label,
[data-theme="dark"] .ps-filter-period-option-label,
[data-theme="dark"] .ps-filter-period-date,
[data-theme="dark"] .ps-filter-radio-label,
[data-theme="dark"] .ps-list-type,
[data-theme="dark"] .ps-list-cell--mgr,
[data-theme="dark"] .app-search-tip-title {
    color: var(--text);
}

[data-theme="dark"] .ps-saved-filters-params,
[data-theme="dark"] .ps-saved-filters-period-label,
[data-theme="dark"] .ps-saved-filters-menu-btn,
[data-theme="dark"] .ps-list-cell--status,
[data-theme="dark"] .ps-list-billtag--paid,
[data-theme="dark"] .app-global-search-kbd {
    color: var(--text-muted);
}

[data-theme="dark"] .ps-filter-check-input:checked + .ps-filter-check-box,
[data-theme="dark"] .ps-list-row-check-input:checked + .ps-list-check-box,
[data-theme="dark"] .ps-list-row-check-input:indeterminate + .ps-list-check-box {
    background: var(--accent);
    border-color: var(--accent);
}

[data-theme="dark"] .ps-filter-period-radio:checked + .ps-filter-period-radio-mark,
[data-theme="dark"] .ps-filter-radio input:checked + .ps-filter-radio-mark {
    border-color: var(--accent);
}

[data-theme="dark"] .app-badge-muted,
[data-theme="dark"] .entity-chip-muted,
[data-theme="dark"] .clients-list-fl {
    background: var(--surface-muted);
    color: var(--text-muted);
}

[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
    border-color: var(--line);
}

[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-editor,
[data-theme="dark"] .ql-picker-options,
[data-theme="dark"] .ql-tooltip {
    background: var(--input-bg);
    color: var(--text);
}

[data-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--text-muted);
}

[data-theme="dark"] .ql-snow .ql-fill,
[data-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--text-muted);
}

[data-theme="dark"] .ql-snow .ql-picker,
[data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    color: var(--text);
}

[data-theme="dark"] .ps-shell-aside,
[data-theme="dark"] .ps-list-header,
[data-theme="dark"] .home-stats-metric-card,
[data-theme="dark"] .revenue-plans-summary-item,
[data-theme="dark"] .news-list-pane,
[data-theme="dark"] .news-detail-pane,
[data-theme="dark"] .news-editor-modal-dialog,
[data-theme="dark"] .news-editor-quill-wrap,
[data-theme="dark"] .news-detail-menu {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .ps-filter-input,
[data-theme="dark"] .ps-filter-select,
[data-theme="dark"] .ps-filter-period-select,
[data-theme="dark"] .ps-filter-mgr-search,
[data-theme="dark"] .ps-assign-mgr-modal-count-input,
[data-theme="dark"] .ps-assign-mgr-modal-search,
[data-theme="dark"] .ps-assign-mgr-modal-row-count,
[data-theme="dark"] .news-list-search-field input {
    background: var(--input-bg);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .ps-filter-drawer-footer,
[data-theme="dark"] .ps-create-product-results,
[data-theme="dark"] .ps-create-product-result--add {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .ps-filter-period-trigger,
[data-theme="dark"] .ps-filter-mgr-chip,
[data-theme="dark"] .ps-filter-check-box,
[data-theme="dark"] .ps-list-check-box,
[data-theme="dark"] .ps-stage-check,
[data-theme="dark"] .ps-list-row-check-input:disabled + .ps-list-check-box {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .ps-date-popover--filter::before {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .ps-filter-period-radio:checked + .ps-filter-period-radio-mark::after,
[data-theme="dark"] .ps-filter-radio input:checked + .ps-filter-radio-mark::after {
    background: var(--accent);
}

[data-theme="dark"] .news-list-link:hover {
    background: var(--surface-muted);
}

[data-theme="dark"] .news-list-link.is-selected {
    background: var(--accent-soft);
}

[data-theme="dark"] .news-detail-menu-btn,
[data-theme="dark"] .news-editor-modal-close {
    color: var(--text-muted);
}

[data-theme="dark"] .news-detail-menu-btn:hover,
[data-theme="dark"] .news-detail-menu-btn[aria-expanded="true"],
[data-theme="dark"] .news-editor-modal-close:hover {
    background: var(--surface-muted);
    color: var(--text);
}

[data-theme="dark"] .news-editor-quill-wrap .ql-toolbar.ql-snow {
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .revenue-plans-summary-item {
    background: var(--surface);
}

[data-theme="dark"] .revenue-plans-period-icon,
[data-theme="dark"] .home-stats-period-btn-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="dark"] .home-stats-plan-ring-bg {
    stroke: var(--line);
}

[data-theme="dark"] .telephony-provider-card.is-selected {
    background: linear-gradient(180deg, var(--surface), var(--accent-soft));
    border-color: rgba(129, 140, 248, 0.5);
}

[data-theme="dark"] .telephony-provider-card.is-enabled:not(.is-selected) {
    background: linear-gradient(180deg, var(--surface), var(--success-soft));
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .payments-list-date-badge {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--text-muted);
}

[data-theme="dark"] .app-shimmer,
[data-theme="dark"] .app-global-search-shimmer {
    background: var(--surface-muted);
}

[data-theme="dark"] .app-shimmer::after,
[data-theme="dark"] .app-global-search-shimmer::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 55%,
        transparent 100%
    );
}

[data-theme="dark"] .ps-list-statuscell--new,
[data-theme="dark"] .ps-filter-period-trigger,
[data-theme="dark"] .ps-filter-btn--secondary:not(:disabled) {
    color: var(--text);
}

[data-theme="dark"] .ps-comment-source--event,
[data-theme="dark"] .ps-comment-source--event i,
[data-theme="dark"] .ps-list-statuscell--online-channel,
[data-theme="dark"] .ps-list-reservation,
[data-theme="dark"] .ps-list-billtag--paid,
[data-theme="dark"] .ps-list-cell--mgr,
[data-theme="dark"] .app-search-tip-line,
[data-theme="dark"] .home-sales-summary-label,
[data-theme="dark"] .home-managers-table thead th,
[data-theme="dark"] .home-mgr-col-title,
[data-theme="dark"] .home-managers-products-table thead th,
[data-theme="dark"] .telephony-module-state,
[data-theme="dark"] .telephony-provider-card-logo--placeholder,
[data-theme="dark"] .telephony-provider-card-status.is-off,
[data-theme="dark"] .telephony-provider-soon-badge,
[data-theme="dark"] .app-user-telephony-card-logo--placeholder,
[data-theme="dark"] .app-user-telephony-card-status,
[data-theme="dark"] .app-telephony-call-wrap--multi .app-telephony-call-provider,
[data-theme="dark"] .payments-total-badge-count,
[data-theme="dark"] .payments-list-cell--bill,
[data-theme="dark"] .smtp-module-state {
    color: var(--text-muted);
}

[data-theme="dark"] .home-managers-table thead th,
[data-theme="dark"] .home-managers-products-table thead th,
[data-theme="dark"] .telephony-module-state,
[data-theme="dark"] .telephony-provider-card-logo--placeholder,
[data-theme="dark"] .telephony-provider-card-status.is-off,
[data-theme="dark"] .telephony-provider-soon-badge,
[data-theme="dark"] .app-user-telephony-card-logo--placeholder,
[data-theme="dark"] .app-user-telephony-card-status,
[data-theme="dark"] .app-telephony-call-wrap--multi .app-telephony-call-provider,
[data-theme="dark"] .smtp-module-state {
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .home-managers-products-table {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .telephony-provider-card-status.is-pending {
    background: var(--warning-soft);
    color: #fb923c;
}

[data-theme="dark"] .app-instant-tip,
[data-theme="dark"] .app-hint-tooltip {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .app-instant-tip[data-placement="left"]::before {
    border-left-color: var(--line);
}

[data-theme="dark"] .app-instant-tip[data-placement="left"]::after {
    border-left-color: var(--surface);
}

[data-theme="dark"] .app-instant-tip[data-placement="right"]::before {
    border-right-color: var(--line);
}

[data-theme="dark"] .app-instant-tip[data-placement="right"]::after {
    border-right-color: var(--surface);
}

[data-theme="dark"] .app-instant-tip[data-placement="top"]::before {
    border-top-color: var(--line);
}

[data-theme="dark"] .app-instant-tip[data-placement="top"]::after {
    border-top-color: var(--surface);
}

[data-theme="dark"] .app-instant-tip[data-placement="bottom"]::before {
    border-bottom-color: var(--line);
}

[data-theme="dark"] .app-instant-tip[data-placement="bottom"]::after {
    border-bottom-color: var(--surface);
}

[data-theme="dark"] .ps-comment-popover::before {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .ps-comment-editor-input {
    background: var(--input-bg);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .ps-date-picker-day.is-valid:not(.is-selected) {
    background: rgba(16, 185, 129, 0.16);
}

[data-theme="dark"] .ps-date-picker-day.is-valid:hover:not(.is-selected) {
    background: rgba(16, 185, 129, 0.26);
}

[data-theme="dark"] .ps-date-picker-day.is-selected {
    background: var(--accent);
    color: #ffffff;
}

[data-theme="dark"] .ps-list-date-group {
    background: linear-gradient(
        90deg,
        var(--line) 0%,
        var(--surface-muted) 45%,
        var(--surface) 100%
    );
    border-color: var(--line);
    box-shadow: inset 2px 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .ps-list-cell--when {
    color: var(--text-muted);
}

[data-theme="dark"] .home-sales-table thead th,
[data-theme="dark"] .home-sales-table tfoot td,
[data-theme="dark"] .home-ps-type-card,
[data-theme="dark"] .home-managers-row:hover td,
[data-theme="dark"] .home-managers-row.is-expanded td,
[data-theme="dark"] .home-managers-row.is-expanded:hover td {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .home-ps-today {
    background: var(--accent-soft);
    border-color: rgba(129, 140, 248, 0.35);
}

[data-theme="dark"] .home-ps-today:hover {
    background: rgba(99, 102, 241, 0.24);
}

[data-theme="dark"] .home-reservations-card--expired {
    background: rgba(225, 29, 72, 0.12);
    border-color: rgba(225, 29, 72, 0.35);
}

[data-theme="dark"] .home-reservations-card--today {
    background: rgba(234, 88, 12, 0.12);
    border-color: rgba(234, 88, 12, 0.35);
}

[data-theme="dark"] .home-reservations-card--soon {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
}

[data-theme="dark"] .home-mgr-progress {
    background: var(--line);
}

[data-theme="dark"] .telephony-provider-panels {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .telephony-provider-panel-head {
    background: var(--card-head-bg);
    border-color: var(--line);
}

[data-theme="dark"] .telephony-provider-panel-enable {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .telephony-provider-panel-note {
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .telephony-module-state.is-on {
    background: var(--success-soft);
    color: var(--success);
}

[data-theme="dark"] .payments-total-badge,
[data-theme="dark"] .payments-empty {
    background: var(--surface-muted);
    border-color: var(--line);
    box-shadow: none;
}

[data-theme="dark"] .payments-empty {
    color: var(--text-muted);
}

/*
 * Comment, contact and relation cards share the same source-based styles.
 * Preserve their color coding without carrying light gradients into dark UI.
 */
[data-theme="dark"] .ps-partner-comment--billing,
[data-theme="dark"] .ps-history-item--billing {
    background: linear-gradient(
        120deg,
        rgba(99, 102, 241, 0.2) 0%,
        rgba(99, 102, 241, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(129, 140, 248, 0.3);
    border-left-color: var(--accent);
    box-shadow: none;
}

[data-theme="dark"] .ps-partner-comment--local,
[data-theme="dark"] .ps-history-item--local {
    background: linear-gradient(
        120deg,
        rgba(13, 148, 136, 0.2) 0%,
        rgba(13, 148, 136, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(45, 212, 191, 0.28);
    border-left-color: #2dd4bf;
    box-shadow: none;
}

[data-theme="dark"] .ps-history-item--kontur {
    background: linear-gradient(
        120deg,
        rgba(234, 88, 12, 0.2) 0%,
        rgba(234, 88, 12, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(251, 146, 60, 0.28);
    border-left-color: #fb923c;
    box-shadow: none;
}

[data-theme="dark"] .ps-history-item--event {
    background: linear-gradient(
        120deg,
        rgba(148, 163, 184, 0.14) 0%,
        rgba(148, 163, 184, 0.05) 46%,
        transparent 100%
    );
    border-color: rgba(148, 163, 184, 0.24);
    border-left-color: var(--text-muted);
    box-shadow: none;
}

[data-theme="dark"] .ps-comment-source--billing,
[data-theme="dark"] .ps-comment-source--local,
[data-theme="dark"] .ps-comment-source--kontur {
    background: var(--surface-muted);
    box-shadow: none;
}

[data-theme="dark"] .ps-comment-source--local {
    color: #5eead4;
}

[data-theme="dark"] .ps-comment-source--kontur {
    color: #fdba74;
}

[data-theme="dark"] .ps-org-contact-action--transfer,
[data-theme="dark"] .ps-contact-transfer-btn {
    background: var(--surface);
    border-color: var(--line);
}

/* --- In-app notifications (bottom-right cards) --- */
.app-notification-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 360;
    width: min(400px, calc(100vw - 40px));
    pointer-events: none;
}

.app-notification-stack-wrap {
    position: relative;
    max-height: 50vh;
    min-height: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 0 16px;
}

.app-notification-stack-viewport {
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
}

.app-notification-fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.app-notification-fade--top {
    top: 0;
    background: linear-gradient(
        180deg,
        var(--bg, #f4f6fb) 0%,
        color-mix(in srgb, var(--bg, #f4f6fb) 72%, transparent) 52%,
        transparent 100%
    );
}

.app-notification-fade--bottom {
    bottom: 0;
    background: linear-gradient(
        0deg,
        var(--bg, #f4f6fb) 0%,
        color-mix(in srgb, var(--bg, #f4f6fb) 72%, transparent) 52%,
        transparent 100%
    );
}

.app-notification-stack-viewport.show-top-fade .app-notification-fade--top,
.app-notification-stack-viewport.show-bottom-fade .app-notification-fade--bottom {
    opacity: 1;
}

.app-notification-stack {
    max-height: calc(50vh - 48px);
    min-height: 0;
    overflow-y: auto;
    display: block;
    padding: 8px 0 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-notification-stack::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.app-notification-stack > .app-notification-card + .app-notification-card {
    margin-top: 12px;
}

.app-notification-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid #64748b;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    animation: app-notification-enter 0.28s ease forwards;
    pointer-events: auto;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.app-notification-card--success {
    border-color: rgba(34, 197, 94, 0.16);
    border-left-color: #22c55e;
    background:
        linear-gradient(120deg, rgba(236, 253, 245, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%),
        #fff;
    box-shadow: 0 1px 0 rgba(34, 197, 94, 0.05), 0 3px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-notification-card--warning {
    border-color: rgba(245, 158, 11, 0.18);
    border-left-color: #f59e0b;
    background:
        linear-gradient(120deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%),
        #fff;
    box-shadow: 0 1px 0 rgba(245, 158, 11, 0.06), 0 3px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-notification-card--info {
    border-color: rgba(59, 130, 246, 0.16);
    border-left-color: #3b82f6;
    background:
        linear-gradient(120deg, rgba(239, 246, 255, 0.98) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 100%),
        #fff;
    box-shadow: 0 1px 0 rgba(59, 130, 246, 0.05), 0 3px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.app-notification-card:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.app-notification-card--success:hover {
    border-color: rgba(34, 197, 94, 0.24);
    border-left-color: #22c55e;
}

.app-notification-card--warning:hover {
    border-color: rgba(245, 158, 11, 0.28);
    border-left-color: #f59e0b;
}

.app-notification-card--info:hover {
    border-color: rgba(59, 130, 246, 0.24);
    border-left-color: #3b82f6;
}

.app-notification-card.is-leaving {
    animation: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

@keyframes app-notification-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-notification-inner {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 40px 14px 14px;
}

.app-notification-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.app-notification-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 14px;
    color: #fff;
    background: #64748b;
}

.app-notification-card--success .app-notification-icon {
    background: #22c55e;
}

.app-notification-card--warning .app-notification-icon {
    background: #f59e0b;
}

.app-notification-card--info .app-notification-icon {
    background: #3b82f6;
}

.app-notification-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-notification-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.app-notification-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}

.app-notification-time {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    flex: 0 0 auto;
}

.app-notification-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 44px;
}

.app-notification-line {
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
    word-break: break-word;
}

.app-notification-line--amount {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
    margin-top: 2px;
}

.app-notification-line--muted {
    color: #64748b;
    font-size: 12px;
}

.app-notification-line--call-time {
    color: #d97706;
    font-weight: 600;
    margin-top: 2px;
}

.app-notification-line--admin-text {
    white-space: pre-wrap;
}

.app-notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.app-notification-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.app-notification-clear-all {
    flex: 0 0 auto;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
}

.app-notification-clear-all:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #c7d2e0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.app-notification-clear-all:disabled {
    opacity: 0.65;
    cursor: default;
}

.ps-date-notify-call {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    user-select: none;
}

.ps-date-notify-call.is-disabled {
    opacity: 0.55;
}

.ps-date-notify-call.is-disabled .ps-date-notify-toggle {
    pointer-events: none;
}

.ps-date-notify-call-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex: 0 0 24px;
    color: #64748b;
    font-size: 17px;
}

.ps-date-notify-call-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    line-height: 1.3;
}

.ps-date-notify-toggle {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.ps-date-notify-toggle input:focus-visible + .ps-date-notify-toggle-track {
    outline: 2px solid var(--accent, #4f46e5);
    outline-offset: 2px;
}

.ps-date-notify-toggle-track {
    display: block;
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}

.ps-date-notify-toggle input:checked + .ps-date-notify-toggle-track {
    background: var(--accent, #4f46e5);
}

.ps-date-notify-toggle input:disabled + .ps-date-notify-toggle-track {
    cursor: not-allowed;
}

.ps-date-notify-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s ease;
}

.ps-date-notify-toggle input:checked + .ps-date-notify-toggle-track .ps-date-notify-toggle-thumb {
    transform: translateX(18px);
}

/* Модалка «Отправить сообщение» (список пользователей) */
body.app-user-notify-modal-open {
    overflow: hidden;
}

.app-user-notify-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.app-user-notify-modal[hidden] {
    display: none;
}

.app-user-notify-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.app-user-notify-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.app-user-notify-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.app-user-notify-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line, #e2e8f0);
    flex-shrink: 0;
}

.app-user-notify-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.app-user-notify-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
}

.app-user-notify-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.app-user-notify-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    overflow: auto;
}

.app-user-notify-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.app-user-notify-recipient-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

.app-user-notify-recipient-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}

.app-user-notify-datetime {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.app-user-notify-modal-body .app-field {
    margin: 0;
}

.app-user-notify-modal-body .app-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.app-user-notify-modal-body .app-field input,
.app-user-notify-modal-body .app-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text, #0f172a);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-user-notify-modal-body .app-field input::placeholder,
.app-user-notify-modal-body .app-field textarea::placeholder {
    color: #94a3b8;
}

.app-user-notify-modal-body .app-field input:hover,
.app-user-notify-modal-body .app-field textarea:hover {
    border-color: #c7d2e0;
}

.app-user-notify-modal-body .app-field input:focus,
.app-user-notify-modal-body .app-field textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.app-user-notify-text-field textarea {
    min-height: 148px;
    resize: vertical;
    line-height: 1.5;
}

.app-user-notify-text-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.app-user-notify-text-head label {
    margin: 0 !important;
}

.app-user-notify-counter {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

.app-user-notify-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.88rem;
    line-height: 1.4;
}

.app-user-notify-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--line, #e2e8f0);
    background: #fafbfd;
}

.app-user-notify-modal-actions .app-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 560px) {
    .app-user-notify-datetime {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .app-user-notify-modal-dialog {
    background: var(--surface, #1f2937);
}

[data-theme="dark"] .app-user-notify-modal-header,
[data-theme="dark"] .app-user-notify-modal-actions {
    border-color: var(--line, rgba(255, 255, 255, 0.08));
    background: rgba(15, 23, 42, 0.35);
}

[data-theme="dark"] .app-user-notify-recipient {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--line, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .app-user-notify-recipient-name,
[data-theme="dark"] .app-user-notify-modal-title,
[data-theme="dark"] .app-user-notify-modal-body .app-field label {
    color: #f8fafc;
}

[data-theme="dark"] .app-user-notify-modal-body .app-field input,
[data-theme="dark"] .app-user-notify-modal-body .app-field textarea {
    background: var(--bg, #111827);
    border-color: var(--line, rgba(255, 255, 255, 0.12));
    color: #f8fafc;
}

[data-theme="dark"] .app-user-notify-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

[data-theme="dark"] .app-notification-clear-all {
    background: var(--surface, #1f2937);
    border-color: var(--line, rgba(255, 255, 255, 0.12));
    color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .app-notification-clear-all:hover:not(:disabled) {
    background: #273449;
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .app-notification-card {
    background: var(--surface, #1f2937);
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: #64748b;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .app-notification-card--success {
    border-color: rgba(34, 197, 94, 0.28);
    border-left-color: #22c55e;
    background:
        linear-gradient(120deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 46%, transparent 100%),
        var(--surface, #1f2937);
}

[data-theme="dark"] .app-notification-card--warning {
    border-color: rgba(245, 158, 11, 0.28);
    border-left-color: #f59e0b;
    background:
        linear-gradient(120deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.06) 46%, transparent 100%),
        var(--surface, #1f2937);
}

[data-theme="dark"] .app-notification-card--info {
    border-color: rgba(59, 130, 246, 0.28);
    border-left-color: #3b82f6;
    background:
        linear-gradient(120deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.06) 46%, transparent 100%),
        var(--surface, #1f2937);
}

[data-theme="dark"] .app-notification-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .app-notification-card--success:hover {
    border-color: rgba(34, 197, 94, 0.36);
    border-left-color: #22c55e;
}

[data-theme="dark"] .app-notification-card--warning:hover {
    border-color: rgba(245, 158, 11, 0.36);
    border-left-color: #f59e0b;
}

[data-theme="dark"] .app-notification-card--info:hover {
    border-color: rgba(59, 130, 246, 0.36);
    border-left-color: #3b82f6;
}

[data-theme="dark"] .app-notification-title {
    color: #f8fafc;
}

[data-theme="dark"] .app-notification-line {
    color: #e2e8f0;
}

[data-theme="dark"] .app-notification-line--muted {
    color: #94a3b8;
}

[data-theme="dark"] .ps-date-notify-call-icon {
    color: #94a3b8;
}

[data-theme="dark"] .ps-date-notify-call-label {
    color: #e2e8f0;
}

[data-theme="dark"] .ps-date-notify-toggle-track {
    background: #475569;
}

[data-theme="dark"] .ps-shell-meta-call-reminder {
    color: #fbbf24;
}

/* Журнал звонков в карточке клиента / ПП */
.telephony-calls-empty {
    margin: 0;
    padding: 0.25rem 0;
}

.telephony-entity-calls-wrap {
    margin: 0;
}

.telephony-entity-calls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.telephony-entity-calls-table thead th {
    font-weight: 600;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
    white-space: nowrap;
}

.telephony-entity-calls-table tbody td {
    padding: 0.7rem 0.55rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
    vertical-align: middle;
    color: var(--text, #0f172a);
}

.telephony-entity-calls-table tbody tr:last-child td {
    border-bottom: none;
}

.telephony-entity-col-dir {
    width: 2rem;
    text-align: center;
    padding-left: 0.25rem !important;
    padding-right: 0.15rem !important;
}

.telephony-entity-dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.95rem;
}

.telephony-entity-dir--out {
    color: #16a34a;
    background: #f0fdf4;
}

.telephony-entity-dir--in {
    color: #2563eb;
    background: #eff6ff;
}

.telephony-entity-dir--out .las {
    transform: rotate(45deg);
}

.telephony-entity-dir--in .las {
    transform: rotate(-45deg);
}

.telephony-entity-col-time {
    white-space: nowrap;
    color: var(--text, #0f172a);
}

.telephony-entity-col-manager {
    white-space: nowrap;
}

.telephony-entity-col-phone {
    white-space: nowrap;
}

.telephony-entity-col-phone .telephony-call-ps-chip {
    margin-left: 0.45rem;
    vertical-align: middle;
}

.telephony-entity-phone-link {
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.telephony-entity-phone-link:hover {
    text-decoration: underline;
}

.telephony-call-ps-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 12rem;
    padding: 0.15rem 0.55rem 0.15rem 0.28rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #334155;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}

.telephony-call-ps-chip:hover {
    border-color: rgba(79, 70, 229, 0.35);
    color: #312e81;
    background: #fff;
}

.telephony-call-ps-chip-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
}

.telephony-call-ps-chip-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.7rem;
}

.telephony-call-ps-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telephony-entity-col-duration {
    white-space: nowrap;
    color: var(--text-muted, #475569);
}

.telephony-entity-col-rec {
    min-width: 12rem;
}

.telephony-entity-col-rec .telephony-rec-player--compact .telephony-rec-audio {
    width: 160px;
}

.telephony-entity-col-status {
    white-space: nowrap;
}

.telephony-entity-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telephony-entity-status--completed,
.telephony-entity-status--answered {
    border-color: #86efac;
    background: #dcfce7;
    color: #15803d;
}

.telephony-entity-status--no_answer,
.telephony-entity-status--busy,
.telephony-entity-status--cancel,
.telephony-entity-status--failed {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.telephony-entity-status--ringing,
.telephony-entity-status--initiated {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

[data-theme="dark"] .telephony-entity-status {
    border-color: #334155;
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .telephony-entity-status--completed,
[data-theme="dark"] .telephony-entity-status--answered {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(22, 163, 74, 0.22);
    color: #86efac;
}

[data-theme="dark"] .telephony-entity-status--no_answer,
[data-theme="dark"] .telephony-entity-status--busy,
[data-theme="dark"] .telephony-entity-status--cancel,
[data-theme="dark"] .telephony-entity-status--failed {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(185, 28, 28, 0.22);
    color: #fca5a5;
}

[data-theme="dark"] .telephony-entity-status--ringing,
[data-theme="dark"] .telephony-entity-status--initiated {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(180, 83, 9, 0.22);
    color: #fcd34d;
}

.telephony-entity-col-tx {
    white-space: nowrap;
}

.telephony-entity-col-comment {
    width: 2.4rem;
    text-align: center;
}

.telephony-entity-comment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
}

.telephony-entity-comment-btn i {
    font-size: 1.05rem;
}

.telephony-entity-comment-btn.is-filled {
    color: #475569;
}

.telephony-entity-comment-btn:hover:not(:disabled) {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.telephony-entity-comment-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.telephony-calls-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.telephony-call-item {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.telephony-call-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
}

.telephony-call-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--accent, #2563eb);
    font-size: 0.82rem;
    font-weight: 600;
}

.telephony-call-phone {
    font-weight: 600;
    color: var(--text, #0f172a);
}

.telephony-call-status {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

.telephony-call-item--completed .telephony-call-status,
.telephony-call-item--answered .telephony-call-status {
    color: #15803d;
}

.telephony-call-item--no_answer .telephony-call-status,
.telephony-call-item--busy .telephony-call-status,
.telephony-call-item--cancel .telephony-call-status,
.telephony-call-item--failed .telephony-call-status {
    color: #b45309;
}

.telephony-call-provider {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.telephony-call-item-meta {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
}

.telephony-call-sep {
    opacity: 0.55;
}

.telephony-call-ps-link {
    color: var(--accent, #2563eb);
    text-decoration: none;
}

.telephony-call-ps-link:hover {
    text-decoration: underline;
}

.telephony-call-comment {
    margin-top: 0.45rem;
    font-size: 0.88rem;
    color: var(--text, #0f172a);
    white-space: pre-wrap;
}

.clients-org-calls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ps-tab-calls {
    padding-top: 0.25rem;
}

.ps-tab-calls-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.telephony-calls-view-toggle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: var(--surface-muted, #f8fafc);
    gap: 2px;
}

.telephony-calls-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.telephony-calls-view-btn i {
    font-size: 1rem;
    line-height: 1;
}

.telephony-calls-view-btn:hover {
    color: var(--text, #0f172a);
    background: rgba(255, 255, 255, 0.85);
}

.telephony-calls-view-btn.is-active,
.telephony-calls-view-btn[aria-pressed="true"] {
    color: var(--accent, #4f46e5);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.telephony-entity-calls[data-view="cards"] [data-telephony-calls-panel="table"],
.telephony-entity-calls[data-view="table"] [data-telephony-calls-panel="cards"] {
    display: none;
}

.telephony-call-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.telephony-call-card {
    margin: 0;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(13, 148, 136, 0.16);
    border-left: 3px solid #0d9488;
    border-radius: 12px;
    background:
        linear-gradient(120deg, rgba(240, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.62) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(13, 148, 136, 0.05);
}

.telephony-call-card--in {
    border-color: rgba(37, 99, 235, 0.16);
    border-left-color: #2563eb;
    background:
        linear-gradient(120deg, rgba(239, 246, 255, 0.98) 0%, rgba(255, 255, 255, 0.62) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(37, 99, 235, 0.05);
}

.telephony-call-card--missed {
    border-color: rgba(185, 28, 28, 0.14);
    border-left-color: #dc2626;
    background:
        linear-gradient(120deg, rgba(254, 242, 242, 0.96) 0%, rgba(255, 255, 255, 0.62) 44%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(185, 28, 28, 0.04);
}

.telephony-call-card-primary {
    display: flex;
    align-items: center;
    gap: 0.55rem 0.7rem;
    min-width: 0;
    flex-wrap: nowrap;
}

.telephony-call-card-dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    flex-shrink: 0;
    border-radius: 999px;
    font-size: 0.9rem;
}

.telephony-call-card-dir--out {
    color: #16a34a;
    background: rgba(220, 252, 231, 0.9);
}

.telephony-call-card-dir--in {
    color: #2563eb;
    background: rgba(219, 234, 254, 0.95);
}

.telephony-call-card-dir--out .las {
    transform: rotate(45deg);
}

.telephony-call-card-dir--in .las {
    transform: rotate(-45deg);
}

.telephony-call-card-when {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text, #0f172a);
    white-space: nowrap;
}

.telephony-call-card-manager {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text, #0f172a);
}

.telephony-call-card-primary .telephony-entity-status {
    flex-shrink: 0;
}

.telephony-call-card-duration {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted, #475569);
    white-space: nowrap;
}

.telephony-call-card-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    margin-top: 0.65rem;
    padding-left: 2rem;
    min-width: 0;
}

.telephony-call-card-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
}

.telephony-call-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
}

.telephony-call-card-tx {
    display: inline-flex;
    align-items: center;
}

.telephony-call-card-recording {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-left: 2rem;
    min-width: 0;
}

.telephony-call-card-recording .telephony-rec-player {
    width: 100%;
    max-width: 28rem;
}

.telephony-call-card-recording .telephony-rec-audio {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 720px) {
    .telephony-call-card-secondary,
    .telephony-call-card-recording {
        padding-left: 0;
    }

    .telephony-call-card-actions {
        margin-left: 0;
    }

    .telephony-call-card-recording .telephony-rec-player {
        max-width: none;
    }
}

[data-theme="dark"] .telephony-call-ps-chip {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--text);
    box-shadow: none;
}

[data-theme="dark"] .telephony-call-ps-chip:hover {
    border-color: rgba(165, 180, 252, 0.45);
    color: #c7d2fe;
    background: rgba(30, 41, 59, 0.85);
}

[data-theme="dark"] .telephony-call-ps-chip-fallback {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

[data-theme="dark"] .telephony-calls-view-toggle {
    background: var(--surface-muted, #151c2f);
    border-color: var(--line);
}

[data-theme="dark"] .telephony-calls-view-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

[data-theme="dark"] .telephony-calls-view-btn.is-active,
[data-theme="dark"] .telephony-calls-view-btn[aria-pressed="true"] {
    background: var(--surface, #1a2235);
    color: #a5b4fc;
    box-shadow: none;
}

[data-theme="dark"] .telephony-call-card,
[data-theme="dark"] .telephony-call-card--out {
    background: linear-gradient(
        120deg,
        rgba(13, 148, 136, 0.2) 0%,
        rgba(13, 148, 136, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(45, 212, 191, 0.28);
    border-left-color: #2dd4bf;
    box-shadow: none;
}

[data-theme="dark"] .telephony-call-card--in {
    background: linear-gradient(
        120deg,
        rgba(37, 99, 235, 0.22) 0%,
        rgba(37, 99, 235, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(96, 165, 250, 0.28);
    border-left-color: #60a5fa;
    box-shadow: none;
}

[data-theme="dark"] .telephony-call-card--missed {
    background: linear-gradient(
        120deg,
        rgba(220, 38, 38, 0.2) 0%,
        rgba(220, 38, 38, 0.08) 46%,
        transparent 100%
    );
    border-color: rgba(248, 113, 113, 0.28);
    border-left-color: #f87171;
    box-shadow: none;
}

[data-theme="dark"] .telephony-call-card-dir--out {
    color: #4ade80;
    background: rgba(22, 163, 74, 0.2);
}

[data-theme="dark"] .telephony-call-card-dir--in {
    color: #93c5fd;
    background: rgba(37, 99, 235, 0.25);
}

.telephony-call-rec-link {
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.telephony-call-rec-link:hover {
    text-decoration: underline;
}

.telephony-call-rec {
    margin-top: 0.55rem;
}

.telephony-call-rec--denied {
    margin-top: 0.45rem;
}

.telephony-call-rec-denied {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
}

.telephony-call-rec-denied .las {
    font-size: 0.95rem;
    opacity: 0.85;
}

.telephony-rec-player {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
}

.telephony-rec-audio {
    display: block;
    width: 220px;
    max-width: 100%;
    height: 32px;
}

.telephony-rec-player--compact .telephony-rec-audio {
    width: 190px;
    height: 30px;
}

.telephony-rec-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    flex-shrink: 0;
    background: #f1f5f9;
}

.telephony-rec-open:hover {
    color: var(--accent, #2563eb);
    background: #e2e8f0;
}

.telephony-admin-col-rec {
    min-width: 230px;
    vertical-align: middle;
}

.telephony-admin-calls-table .app-muted {
    padding-left: 8px;
}

.telephony-admin-col-tx {
    width: 7.5rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.telephony-admin-col-raw {
    width: 2.2rem;
    text-align: center;
    vertical-align: middle;
    padding-left: 0.25rem;
    padding-right: 0.35rem;
}

.telephony-admin-raw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    line-height: 1;
}

.telephony-admin-raw-btn i {
    font-size: 0.95rem;
}

.telephony-admin-raw-btn:hover {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.telephony-raw-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.telephony-raw-modal[hidden] {
    display: none;
}

.telephony-raw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.telephony-raw-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(860px, calc(100vw - 2rem));
    max-height: min(84vh, 760px);
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.telephony-raw-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
    flex-shrink: 0;
}

.telephony-raw-modal-title {
    font-size: 0.95rem;
    color: var(--text, #0f172a);
}

.telephony-raw-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.telephony-raw-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 7px;
    background: #f8fafc;
    color: var(--text, #0f172a);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.telephony-raw-copy:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.telephony-raw-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

.telephony-raw-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.telephony-raw-modal-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.75rem 0.9rem 1rem;
    background: #0b1220;
}

.telephony-raw-json {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #e2e8f0;
}

.telephony-raw-error {
    margin: 0.5rem 0 0;
    color: #fca5a5;
    font-size: 0.85rem;
}

[data-theme="dark"] .telephony-admin-raw-btn:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .telephony-raw-modal-dialog {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .telephony-raw-modal-head {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .telephony-raw-modal-title {
    color: #f8fafc;
}

[data-theme="dark"] .telephony-raw-copy {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-raw-modal-close:hover {
    background: rgba(148, 163, 184, 0.12);
    color: #f8fafc;
}

.telephony-tx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
}

.telephony-tx-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    max-width: 9.5rem;
}

.telephony-tx-pipeline-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.telephony-tx-icon--pipeline {
    width: auto;
    min-width: 1.85rem;
    padding: 0 0.4rem;
    color: #1d4ed8;
}

.telephony-tx-icon--pipeline-llm {
    color: #6d28d9;
}

.telephony-tx-icon--pipeline:hover {
    color: #1e40af;
    border-color: #93c5fd;
    background: #eff6ff;
}

.telephony-tx-icon--pipeline-llm:hover {
    color: #5b21b6;
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.telephony-tx-icon i {
    font-size: 1.05rem;
}

.telephony-tx-icon:hover {
    color: var(--accent, #2563eb);
    border-color: #cbd5e1;
    background: #f8fafc;
}

.telephony-tx-icon:disabled {
    opacity: 0.55;
    cursor: wait;
}

.telephony-tx-icon--pending {
    cursor: default;
    color: #ca8a04;
    background: #fefce8;
    border-color: #fde68a;
}

.telephony-tx-icon--pending i {
    animation: telephony-tx-spin 0.9s linear infinite;
}

.telephony-tx-icon--done {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.telephony-tx-icon--done:hover {
    color: #14532d;
    background: #dcfce7;
}

.telephony-tx-icon--failed {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
    cursor: default;
}

.telephony-tx-icon--failed:hover {
    color: #991b1b;
    background: #fee2e2;
}

.telephony-tx-icon--start:hover {
    color: #1d4ed8;
}

.telephony-tx-bubble {
    --telephony-tx-arrow-left: 24px;
    position: absolute;
    z-index: 10001;
    width: 440px;
    max-width: calc(100vw - 24px);
    max-height: min(78vh, 540px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
}

.telephony-tx-bubble[hidden] {
    display: none;
}

.telephony-tx-bubble.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.telephony-tx-bubble.is-above {
    transform-origin: bottom center;
}

.telephony-tx-bubble-arrow {
    position: absolute;
    top: -6px;
    left: var(--telephony-tx-arrow-left);
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid var(--line, #e2e8f0);
    border-top: 1px solid var(--line, #e2e8f0);
    transform: translateX(-50%) rotate(45deg);
}

.telephony-tx-bubble.is-above .telephony-tx-bubble-arrow {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid var(--line, #e2e8f0);
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.telephony-tx-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
    flex-shrink: 0;
}

.telephony-tx-bubble-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.telephony-tx-bubble-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    flex-shrink: 0;
}

.telephony-tx-bubble-close:hover {
    background: #f1f5f9;
    color: var(--text, #0f172a);
}

.telephony-tx-bubble-body {
    overflow: auto;
    padding: 0.75rem 0.8rem 0.9rem;
    min-height: 2.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 48px);
}

.telephony-tx-bubble-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem 0.7rem;
    border-top: 1px solid var(--line, #e2e8f0);
    flex-shrink: 0;
    background: #fff;
}

.telephony-tx-retry-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.telephony-tx-bubble-foot[hidden] {
    display: none;
}

.telephony-tx-retry {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text, #0f172a);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.telephony-tx-retry i {
    font-size: 0.95rem;
    color: var(--text-muted, #64748b);
}

.telephony-tx-retry:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.telephony-tx-retry:hover i {
    color: #1d4ed8;
}

.telephony-tx-retry--llm:hover {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #6d28d9;
}

.telephony-tx-retry--llm:hover i {
    color: #6d28d9;
}

.telephony-tx-retry:disabled {
    opacity: 0.55;
    cursor: wait;
}

.telephony-tx-dialogue {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.telephony-tx-dialogue-loading,
.telephony-tx-dialogue-empty {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-tx-dialogue-plain {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text, #0f172a);
}

.telephony-tx-turn {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    max-width: 92%;
}

.telephony-tx-turn--continued {
    gap: 0;
    margin-top: -0.25rem;
}

.telephony-tx-turn--client {
    align-self: flex-start;
    align-items: flex-start;
}

.telephony-tx-turn--operator {
    align-self: flex-end;
    align-items: flex-end;
}

.telephony-tx-turn--other {
    align-self: stretch;
    align-items: stretch;
    max-width: 100%;
}

.telephony-tx-turn-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.2rem;
}

.telephony-tx-turn-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.telephony-tx-turn--client .telephony-tx-turn-label {
    color: #475569;
}

.telephony-tx-turn--operator .telephony-tx-turn-label {
    color: #1d4ed8;
}

.telephony-tx-turn-bubble {
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text, #0f172a);
}

.telephony-tx-turn--client .telephony-tx-turn-bubble {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.telephony-tx-turn--operator .telephony-tx-turn-bubble {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-bottom-right-radius: 4px;
    color: #0f172a;
}

.telephony-tx-turn--other .telephony-tx-turn-bubble {
    background: #fff;
    border: 1px dashed #cbd5e1;
}

.telephony-tx-bubble-error {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8rem;
}

@keyframes telephony-tx-spin {
    to { transform: rotate(360deg); }
}

[data-theme="dark"] .telephony-tx-icon {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .telephony-tx-icon:hover {
    background: #1e293b;
    color: #93c5fd;
}

[data-theme="dark"] .telephony-tx-icon--pending {
    background: #422006;
    border-color: #854d0e;
    color: #facc15;
}

[data-theme="dark"] .telephony-tx-icon--done {
    background: #052e16;
    border-color: #166534;
    color: #86efac;
}

[data-theme="dark"] .telephony-tx-icon--failed {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .telephony-tx-icon--pipeline {
    color: #93c5fd;
}

[data-theme="dark"] .telephony-tx-icon--pipeline-llm {
    color: #c4b5fd;
}

[data-theme="dark"] .telephony-tx-bubble,
[data-theme="dark"] .telephony-tx-bubble-arrow {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .telephony-tx-bubble-head {
    border-color: #334155;
}

[data-theme="dark"] .telephony-tx-bubble-title {
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-tx-bubble-close:hover {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-tx-bubble-body {
    background: linear-gradient(180deg, #0b1220 0%, #111827 48px);
}

[data-theme="dark"] .telephony-tx-bubble-foot {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .telephony-tx-retry {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-tx-retry:hover {
    background: #172554;
    border-color: #1e40af;
    color: #dbeafe;
}

[data-theme="dark"] .telephony-tx-retry:hover i {
    color: #93c5fd;
}

[data-theme="dark"] .telephony-tx-dialogue-plain,
[data-theme="dark"] .telephony-tx-turn-bubble {
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-tx-turn--client .telephony-tx-turn-bubble {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .telephony-tx-turn--operator .telephony-tx-turn-bubble {
    background: #172554;
    border-color: #1e40af;
    color: #dbeafe;
}

[data-theme="dark"] .telephony-tx-turn--other .telephony-tx-turn-bubble {
    background: #0f172a;
    border-color: #475569;
}

[data-theme="dark"] .telephony-tx-turn--client .telephony-tx-turn-label {
    color: #94a3b8;
}

[data-theme="dark"] .telephony-tx-turn--operator .telephony-tx-turn-label {
    color: #93c5fd;
}

[data-theme="dark"] .telephony-tx-bubble-error {
    background: rgba(185, 28, 28, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .telephony-rec-open {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .telephony-rec-open:hover {
    background: #334155;
    color: #93c5fd;
}

/* Админ: телефония */
.telephony-admin-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    padding: 0.4rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.telephony-admin-tabs--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 28rem;
}

.telephony-admin-tab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 64px;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.telephony-admin-tab:hover {
    color: var(--text, #0f172a);
    background: rgba(15, 23, 42, 0.04);
}

.telephony-admin-tab.is-active {
    color: var(--text, #0f172a);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.06);
}

.telephony-admin-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.telephony-admin-tab.is-active .telephony-admin-tab-icon {
    background: color-mix(in srgb, var(--accent, #2563eb) 16%, #fff);
    color: var(--accent, #2563eb);
}

.telephony-admin-tab-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.telephony-admin-tab-title {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.2;
}

.telephony-admin-tab-hint {
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telephony-admin-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.telephony-admin-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 55%, #eef6ff 100%);
}

.telephony-admin-hero-title {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.telephony-admin-hero-text {
    margin: 0;
    max-width: 46rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.telephony-admin-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.telephony-admin-hero-stat-value {
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.1;
    color: var(--text, #0f172a);
}

.telephony-admin-hero-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}

.telephony-admin-filters {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
}

.telephony-admin-filters-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(130px, 0.65fr)
        minmax(120px, 0.55fr)
        auto
        auto;
    gap: 0.75rem 0.85rem;
    align-items: end;
}

.telephony-admin-filters-grid--webhooks {
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) auto;
}

.telephony-admin-field {
    margin: 0;
    min-width: 0;
}

.telephony-admin-field > label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text, #0f172a);
}

.telephony-admin-field input,
.telephony-admin-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    background: var(--input-bg, #fff);
    color: var(--text, #0f172a);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.telephony-admin-field input:hover,
.telephony-admin-field select:hover {
    border-color: #cbd5e1;
}

.telephony-admin-field input:focus,
.telephony-admin-field select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent, #2563eb) 55%, #94a3b8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}

.telephony-admin-field--check {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.55rem;
}

.telephony-admin-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.84rem;
    color: var(--text, #0f172a);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.telephony-admin-filter-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--accent, #2563eb);
}

.telephony-admin-filters-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0;
}

.telephony-admin-filters-actions .app-button,
.telephony-admin-filters-actions .app-button-secondary {
    min-height: 44px;
    white-space: nowrap;
}

.telephony-admin-meta-inline,
.telephony-admin-pager-info {
    margin-left: auto;
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-admin-rebind-hint {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-admin-rebind-hint.is-ok {
    color: #166534;
}

.telephony-admin-rebind-hint.is-error {
    color: #b91c1c;
}

.telephony-admin-empty {
    border: 1px dashed var(--line, #e2e8f0);
    border-radius: 16px;
    background: #f8fafc;
}

.telephony-admin-table-card {
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.telephony-admin-table-card .app-table-wrap {
    margin: 0;
}

.telephony-admin-table {
    margin: 0;
}

.telephony-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid var(--line, #e2e8f0);
    white-space: nowrap;
}

.telephony-admin-table tbody tr:hover td {
    background: #f8fbff;
}

.telephony-admin-table td,
.telephony-admin-table th {
    padding: 0.85rem 1rem;
}

.telephony-admin-calls-table td {
    vertical-align: middle;
}

.telephony-admin-phone {
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text, #0f172a);
    white-space: nowrap;
}

.telephony-admin-col-phone {
    white-space: nowrap;
    min-width: 9.5rem;
    width: 1%;
}

.telephony-admin-col-manager {
    max-width: 7.5rem;
    width: 7.5rem;
    font-size: 0.86rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telephony-admin-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.telephony-admin-status--completed,
.telephony-admin-status--answered {
    background: #dcfce7;
    color: #166534;
}

.telephony-admin-status--ringing,
.telephony-admin-status--initiated {
    background: #e0e7ff;
    color: #3730a3;
}

.telephony-admin-status--no_answer,
.telephony-admin-status--busy,
.telephony-admin-status--cancel,
.telephony-admin-status--failed {
    background: #ffedd5;
    color: #9a3412;
}

.telephony-admin-col-time,
.telephony-admin-col-session,
.telephony-admin-col-duration {
    white-space: nowrap;
    font-size: 0.86rem;
}

.telephony-admin-col-session code {
    display: inline-block;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.75rem;
}

.telephony-admin-col-links {
    max-width: 280px;
    min-width: 160px;
}

.telephony-admin-binds {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.telephony-admin-bind {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.2rem 0.45rem 0.2rem 0.25rem;
    border-radius: 999px;
    text-decoration: none;
    background: #f1f5f9;
    color: var(--text, #0f172a);
    transition: background 0.12s ease, color 0.12s ease;
}

.telephony-admin-bind:hover {
    background: #e2e8f0;
    color: var(--accent, #2563eb);
}

.telephony-admin-bind-kind {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #fff;
    color: #475569;
}

.telephony-admin-bind--client .telephony-admin-bind-kind {
    background: #dbeafe;
    color: #1d4ed8;
}

.telephony-admin-bind--ps .telephony-admin-bind-kind {
    background: #ede9fe;
    color: #6d28d9;
}

.telephony-admin-bind-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
}

.telephony-admin-link {
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.telephony-admin-link:hover {
    text-decoration: underline;
}

.telephony-admin-link-sep {
    opacity: 0.5;
    margin: 0 0.15rem;
}

.telephony-admin-unbound {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 500;
}

.telephony-admin-unbound-btn {
    border: 0;
    margin: 0;
    font-family: inherit;
    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.telephony-admin-unbound-btn:hover {
    background: #e2e8f0;
    color: var(--accent, #2563eb);
}

/* Bubble привязки звонка */
.telephony-bind-bubble {
    --telephony-bind-arrow-left: 24px;
    position: absolute;
    z-index: 10000;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 480px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
}

.telephony-bind-bubble[hidden] {
    display: none;
}

.telephony-bind-bubble.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.telephony-bind-bubble.is-above {
    transform-origin: bottom center;
}

.telephony-bind-bubble.is-above.is-open {
    transform: translateY(0) scale(1);
}

.telephony-bind-bubble-arrow {
    position: absolute;
    top: -6px;
    left: var(--telephony-bind-arrow-left);
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid var(--line, #e2e8f0);
    border-top: 1px solid var(--line, #e2e8f0);
    transform: translateX(-50%) rotate(45deg);
}

.telephony-bind-bubble.is-above .telephony-bind-bubble-arrow {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid var(--line, #e2e8f0);
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.telephony-bind-bubble-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem 0.55rem;
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.telephony-bind-bubble-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.telephony-bind-bubble-phone {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

.telephony-bind-bubble-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    flex-shrink: 0;
}

.telephony-bind-bubble-close:hover {
    background: #f1f5f9;
    color: var(--text, #0f172a);
}

.telephony-bind-bubble-body {
    overflow: auto;
    padding: 0.7rem 0.8rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 2.5rem;
}

.telephony-bind-bubble-error {
    margin: 0 0.8rem 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8rem;
}

.telephony-bind-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.telephony-bind-empty {
    margin: 0.15rem 0 0;
    font-size: 0.84rem;
    color: var(--text-muted, #64748b);
}

.telephony-bind-skeleton-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.telephony-bind-skeleton-title {
    display: block;
    width: 5.5rem;
    height: 0.72rem;
    border-radius: 999px;
}

.telephony-bind-skeleton-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
}

.telephony-bind-skeleton-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.telephony-bind-skeleton-line {
    display: block;
    height: 0.62rem;
    border-radius: 999px;
}

.telephony-bind-skeleton-line--inn {
    width: 42%;
}

.telephony-bind-skeleton-line--name {
    width: 78%;
    height: 0.72rem;
}

.telephony-bind-skeleton-line--addr {
    width: 92%;
}

.telephony-bind-skeleton-action {
    display: block;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.telephony-bind-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--accent, #2563eb);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.telephony-bind-action:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.telephony-bind-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.telephony-bind-section-title {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
}

.telephony-bind-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.telephony-bind-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #f8fafc;
}

.telephony-bind-candidate-main {
    min-width: 0;
    flex: 1;
}

.telephony-bind-candidate-inn {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.telephony-bind-candidate-name {
    margin-top: 0.1rem;
    font-size: 0.84rem;
    font-weight: 650;
    color: var(--text, #0f172a);
}

.telephony-bind-candidate-product {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}

.telephony-bind-candidate-product .ps-list-product-icon,
.telephony-bind-candidate-product .ps-list-product-icon--empty {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.telephony-bind-candidate-product-link {
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 650;
    color: var(--accent, #2563eb);
    text-decoration: none;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telephony-bind-candidate-product-link:hover {
    text-decoration: underline;
}

.telephony-bind-candidate-org {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1.3;
}

.telephony-bind-candidate-address {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
}

.telephony-bind-candidate-product + .telephony-bind-candidate-org + .telephony-bind-candidate-inn,
.telephony-bind-candidate-org + .telephony-bind-candidate-inn {
    margin-top: 0.18rem;
}

[data-theme="dark"] .telephony-bind-bubble,
[data-theme="dark"] .telephony-bind-bubble-arrow {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .telephony-bind-bubble-head {
    border-color: #334155;
}

[data-theme="dark"] .telephony-bind-candidate,
[data-theme="dark"] .telephony-bind-skeleton-card {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .telephony-bind-action {
    background: #0f172a;
    border-color: #334155;
    color: #93c5fd;
}

[data-theme="dark"] .telephony-bind-action:hover {
    background: #1e293b;
    border-color: #475569;
    color: #bfdbfe;
}

[data-theme="dark"] .telephony-bind-candidate-org {
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-bind-candidate-product-link {
    color: #93c5fd;
}

[data-theme="dark"] .telephony-bind-bubble-close:hover {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-bind-bubble-error {
    background: rgba(185, 28, 28, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .telephony-admin-unbound-btn:hover {
    background: #334155;
    color: #93c5fd;
}

.telephony-admin-provider {
    display: inline-flex;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 650;
}

.telephony-admin-pager {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.telephony-admin-row-link {
    color: inherit;
    text-decoration: none;
}

.telephony-admin-row-link:hover {
    color: var(--accent, #2563eb);
}

.telephony-admin-notif-name {
    display: block;
    font-weight: 600;
}

.telephony-admin-direction {
    display: inline-flex;
    margin-top: 0.2rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
}

.telephony-admin-handle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.telephony-admin-call-id {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.telephony-webhook-note {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    word-break: break-word;
}

.telephony-webhooks-layout {
    display: block;
}

.telephony-webhooks-layout.has-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.telephony-webhooks-detail {
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    padding: 1rem 1.05rem 1.1rem;
    position: sticky;
    top: 0.75rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.telephony-webhooks-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.telephony-webhooks-detail-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}

.telephony-webhooks-detail-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.telephony-webhooks-detail-meta {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
}

.telephony-webhooks-detail-meta > div {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.35rem;
    font-size: 0.86rem;
}

.telephony-webhooks-detail-meta dt {
    margin: 0;
    color: var(--text-muted, #64748b);
}

.telephony-webhooks-detail-meta dd {
    margin: 0;
    word-break: break-word;
}

.telephony-webhooks-json {
    margin: 0;
    max-height: 70vh;
    overflow: auto;
    padding: 0.85rem;
    border-radius: 12px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.telephony-admin-webhooks-table tr.is-active td {
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, #fff);
}

.telephony-admin-webhooks-table tr.is-active:hover td {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, #fff);
}

@media (max-width: 1100px) {
    .telephony-admin-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .telephony-admin-field--search {
        grid-column: 1 / -1;
    }

    .telephony-admin-filters-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 960px) {
    .telephony-webhooks-layout.has-detail {
        grid-template-columns: 1fr;
    }

    .telephony-webhooks-detail {
        position: static;
    }
}

@media (max-width: 720px) {
    .telephony-admin-tabs {
        grid-template-columns: 1fr;
    }

    .telephony-admin-hero {
        flex-direction: column;
    }

    .telephony-admin-hero-stat {
        align-items: flex-start;
        align-self: stretch;
    }

    .telephony-admin-filters-grid,
    .telephony-admin-filters-grid--webhooks {
        grid-template-columns: 1fr;
    }

    .telephony-admin-field--check {
        padding-bottom: 0;
    }

    .telephony-admin-meta-inline,
    .telephony-admin-pager-info {
        margin-left: 0;
        width: 100%;
    }
}

[data-theme="dark"] .telephony-admin-tabs,
[data-theme="dark"] .telephony-admin-hero,
[data-theme="dark"] .telephony-admin-filters,
[data-theme="dark"] .telephony-admin-table-card,
[data-theme="dark"] .telephony-webhooks-detail {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .telephony-admin-hero {
    background: linear-gradient(135deg, #111827 0%, #0f172a 60%, #172554 100%);
}

[data-theme="dark"] .telephony-admin-tab:hover {
    background: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .telephony-admin-tab.is-active {
    background: #1e293b;
    box-shadow: none;
    color: #f8fafc;
}

[data-theme="dark"] .telephony-admin-tab-icon {
    background: #1e293b;
    color: #93c5fd;
}

[data-theme="dark"] .telephony-admin-hero-stat,
[data-theme="dark"] .telephony-admin-empty {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .telephony-webhooks-detail-meta {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .telephony-admin-filter-check {
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-admin-table thead th {
    background: #0f172a;
}

[data-theme="dark"] .telephony-admin-table tbody tr:hover td {
    background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .telephony-admin-field input,
[data-theme="dark"] .telephony-admin-field select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-admin-bind {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .telephony-admin-bind:hover {
    background: #334155;
    color: #93c5fd;
}

[data-theme="dark"] .telephony-admin-bind--client .telephony-admin-bind-kind {
    background: rgba(37, 99, 235, 0.28);
    color: #93c5fd;
}

[data-theme="dark"] .telephony-admin-bind--ps .telephony-admin-bind-kind {
    background: rgba(109, 40, 217, 0.28);
    color: #c4b5fd;
}

[data-theme="dark"] .telephony-admin-col-session code,
[data-theme="dark"] .telephony-admin-provider,
[data-theme="dark"] .telephony-admin-unbound,
[data-theme="dark"] .telephony-admin-status {
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .telephony-admin-status--completed,
[data-theme="dark"] .telephony-admin-status--answered {
    background: rgba(22, 101, 52, 0.35);
    color: #86efac;
}

[data-theme="dark"] .telephony-admin-status--no_answer,
[data-theme="dark"] .telephony-admin-status--busy,
[data-theme="dark"] .telephony-admin-status--cancel,
[data-theme="dark"] .telephony-admin-status--failed {
    background: rgba(154, 52, 18, 0.35);
    color: #fdba74;
}

[data-theme="dark"] .telephony-call-item {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .telephony-call-provider {
    background: #1e293b;
    color: #cbd5e1;
}

[data-theme="dark"] .telephony-webhooks-detail {
    background: #111827;
    border-color: #334155;
}

/* Bills admin list + drawer */
.app-drawer-panel--bill {
    width: min(1120px, calc(100vw - 16px));
    max-width: 100vw;
    display: flex;
    flex-direction: column;
}

.app-drawer-body--bill {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.bills-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.bills-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bills-head-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.bills-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}

.bills-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    white-space: nowrap;
}

.bills-total-badge-count {
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

.bills-total-badge-word {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
}

.bills-head-note {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.bills-empty {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    background: #fff;
}

.bills-list-wrap {
    overflow: hidden;
}

.bills-list-header,
.bills-list-row {
    display: grid;
    grid-template-columns:
        minmax(88px, 0.85fr)
        minmax(88px, 0.7fr)
        minmax(110px, 0.85fr)
        minmax(72px, 0.65fr)
        minmax(0, 1.6fr)
        minmax(64px, 0.55fr)
        minmax(96px, 0.75fr);
    gap: 10px 14px;
    align-items: center;
}

.bills-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 11px 16px;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .bills-list-header {
    color: #94a3b8;
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
    border-bottom-color: #334155;
    box-shadow: none;
}

[data-theme="dark"] .bills-empty {
    background: #111827;
    border-color: #334155;
    color: #94a3b8;
}

.bills-list-header > span {
    display: block;
    min-width: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bills-list-row {
    text-decoration: none;
    color: inherit;
}

.bills-list-cell--number {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bills-list-cell--amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #15803d;
    white-space: nowrap;
}

.bills-list-cell--product,
.bills-list-cell--partner,
.bills-list-cell--date {
    font-size: 0.9rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bills-list-cell--payer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bills-payer-name {
    font-size: 0.92rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bills-payer-inn {
    font-size: 0.78rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.bills-state-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.76rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bills-state-pill.is-paid {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.bills-state-pill.is-unpaid {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.bills-state-pill.is-new {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.bills-state-pill.is-autoship {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

.bills-state-pill.is-autoship-done {
    border-color: #86efac;
    background: #dcfce7;
    color: #15803d;
}

.bills-state-pill.is-conditional {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.bills-state-pill.is-act-accepted {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

.clients-bills-table tbody td.clients-bills-cell-pdf {
    position: relative;
    width: 52px;
    max-width: 52px;
    padding: 0;
    vertical-align: top;
}

.clients-bills-filters-row th.clients-bills-cell-pdf {
    width: 52px;
    max-width: 52px;
    padding: 0;
}

.clients-bills-pdf-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px; /* не перекрывать горизонтальный border-bottom ячейки */
    left: 0;
}

.clients-bills-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}

.clients-bills-pdf-btn:hover,
.clients-bills-pdf-btn:focus-visible {
    background: var(--surface-muted);
    color: #0f172a;
    outline: none;
}

.clients-bills-shipping-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.clients-bills-act-accepted {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #0f172a;
}

.bill-drawer {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #f8fafc;
}

.bill-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.bill-drawer-head-main {
    min-width: 0;
    flex: 1;
}

.bill-drawer-head-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bill-drawer-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.bill-drawer-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
}

.bill-drawer-product-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
}

.bill-drawer-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bill-drawer-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    word-break: break-word;
}

.bill-drawer-copy-btn.clients-copy-btn {
    position: static;
    flex-shrink: 0;
    opacity: 1;
    width: 32px;
    height: 32px;
    top: auto;
    right: auto;
    transform: none;
}

.bill-drawer-amount {
    margin: 10px 0 0;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #15803d;
    line-height: 1.15;
}

.bill-drawer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.bill-drawer-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 500;
    color: #64748b;
}

.bill-drawer-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
    width: fit-content;
    max-width: 100%;
}

.bill-drawer-head-meta-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 16px;
}

.bill-drawer-head-meta-item:first-child {
    padding-left: 0;
}

.bill-drawer-head-meta-item:not(:first-child) {
    border-left: 1px solid #e2e8f0;
}

.bill-drawer-head-meta-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.2;
    white-space: nowrap;
}

.bill-drawer-head-meta-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bill-drawer-close {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

.bill-drawer-close:hover {
    color: #0f172a;
}

.bill-drawer-body {
    padding: 20px 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bill-drawer-comments {
    margin: 0;
}

.bill-drawer-comments .ps-comment-create-block {
    margin-bottom: 0;
}

.bill-drawer-comments .ps-partner-comments-block {
    margin-top: 0;
}

.bill-drawer-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.bill-drawer-card-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bill-drawer-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.bill-drawer-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.bill-drawer-facts--issuer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bill-drawer-facts--payer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bill-drawer-fact {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bill-drawer-fact-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.2;
}

.bill-drawer-fact-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.35;
}

.bill-drawer-fact-value.is-empty {
    color: #94a3b8;
    font-weight: 400;
}

.bill-drawer-fact-value.is-mono,
.bill-drawer-table td.is-mono,
.bill-drawer-pkg-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748b;
}

.bill-drawer-payer-name {
    display: inline-block;
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--accent);
    text-decoration: none;
    line-height: 1.3;
    word-break: break-word;
}

.bill-drawer-payer-name:hover {
    text-decoration: underline;
}

.bill-drawer-payer-name.is-static {
    color: #0f172a;
}

.bill-drawer-comment {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #334155;
}

.bill-drawer-comment .md-body {
    color: inherit;
}

.bill-drawer-table--tariffs th:nth-child(2),
.bill-drawer-table--tariffs th:nth-child(3),
.bill-drawer-table--tariffs th:nth-child(4),
.bill-drawer-table--tariffs th:nth-child(5),
.bill-drawer-table--tariffs th:nth-child(6),
.bill-drawer-table--tariffs td.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bill-drawer-table--tariffs th:first-child,
.bill-drawer-table--tariffs td:first-child {
    min-width: 220px;
}

.bill-drawer-tariff-title {
    font-size: 0.92rem;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.35;
}

.bill-drawer-tariff-service {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.35;
}

.bill-drawer-tariffs-total td {
    border-bottom: 0;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-weight: 650;
    color: #0f172a;
    padding-top: 11px;
    padding-bottom: 11px;
}

[data-theme="dark"] .bill-drawer-tariff-title {
    color: var(--text);
}

[data-theme="dark"] .bill-drawer-tariff-service {
    color: #94a3b8;
}

[data-theme="dark"] .bill-drawer-tariffs-total td {
    border-top-color: #334155;
    background: #1e293b;
    color: var(--text);
}


.bill-drawer-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.bill-drawer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bill-drawer-table th,
.bill-drawer-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

.bill-drawer-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.74rem;
    white-space: nowrap;
}

.bill-drawer-table tr:last-child td {
    border-bottom: 0;
}

.bill-drawer-pkg-name {
    font-weight: 550;
    color: #0f172a;
}

.bill-drawer-pkg-id {
    margin-top: 2px;
}

[data-theme="dark"] .bill-drawer {
    background: #0b1220;
}

[data-theme="dark"] .bill-drawer-head,
[data-theme="dark"] .bill-drawer-card,
[data-theme="dark"] .bill-drawer-meta-chip {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] .bill-drawer-product-chip {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .bill-drawer-amount {
    color: #4ade80;
}

[data-theme="dark"] .bill-drawer-head-meta-label,
[data-theme="dark"] .bill-drawer-fact-label {
    color: #94a3b8;
}

[data-theme="dark"] .bill-drawer-head-meta-item:not(:first-child) {
    border-left-color: #334155;
}

[data-theme="dark"] .bill-drawer-card-title,
[data-theme="dark"] .bill-drawer-head-meta-value,
[data-theme="dark"] .bill-drawer-fact-value,
[data-theme="dark"] .bill-drawer-tariff-title,
[data-theme="dark"] .bill-drawer-pkg-name,
[data-theme="dark"] .bill-drawer-payer-name.is-static,
[data-theme="dark"] .bill-drawer-comment,
[data-theme="dark"] .bill-drawer-close:hover {
    color: var(--text);
}

[data-theme="dark"] .bill-drawer-card-count {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .bill-drawer-table th {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .bill-drawer-table th,
[data-theme="dark"] .bill-drawer-table td {
    border-bottom-color: #334155;
}

[data-theme="dark"] .bills-state-pill.is-act-accepted {
    border-color: #475569;
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .bills-state-pill.is-conditional {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(180, 83, 9, 0.22);
    color: #fbbf24;
}

@media (max-width: 900px) {
    .bill-drawer-facts,
    .bill-drawer-facts--issuer,
    .bill-drawer-facts--payer {
        grid-template-columns: 1fr;
    }

    .bill-drawer-head-meta {
        width: 100%;
    }

    .bill-drawer-head,
    .bill-drawer-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bills-list-header {
        display: none;
    }

    .bills-list-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .bills-list-cell--payer {
        grid-column: 1 / -1;
    }
}