:root {
    --air-sidebar: #001a4a;
    --air-sidebar-2: #0b2a62;
    --air-active: rgba(47, 198, 246, 0.18);
    --air-cyan: #2fc6f6;
    --air-cyan-hover: #11a9d9;
    --air-link: #0b66c3;
    --air-text: #333333;
    --air-text-2: #6a737c;
    --air-border: #e2e5e9;
    --air-bg: #eef2f4;
    --air-white: #ffffff;
    --air-danger: #ff5752;
    --air-warning: #ffa900;
    --air-success: #9dcf00;
    --air-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --menu-w: 72px;
    --topbar-h: 60px;
    --radius: 10px;
    --font: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.4;
    color: var(--air-text);
    background: var(--air-bg);
}

body.app-body {
    overflow: hidden;
}

button, input, select { font: inherit; }

a { color: var(--air-link); text-decoration: none; }
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    background: #ecf2f4;
    color: #333;
    white-space: nowrap;
}
.btn:hover { filter: brightness(0.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--air-cyan); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--air-cyan-hover); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; }
.btn-light { background: #fff; border: 1px solid var(--air-border); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 12px; color: var(--air-text-2); }
.field input, .field select {
    height: 40px;
    border: 1px solid #c6cdd3;
    border-radius: 6px;
    padding: 0 12px;
    outline: none;
    background: #fff;
}
.field input:focus { border-color: var(--air-cyan); box-shadow: 0 0 0 3px rgba(47,198,246,.2); }

.login-error {
    background: #ffe8e7;
    color: #c21f17;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.login-note {
    background: #e8f8ef;
    color: #0f7a3a;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.login-forgot-row { text-align: right; margin: -6px 0 14px; }
.login-forgot-row a { font-size: 13px; color: var(--air-link); text-decoration: none; }
.login-forgot-row a:hover { text-decoration: underline; }
.login-forgot-row a[aria-disabled="true"] { pointer-events: none; opacity: .55; }

/* Login */
.login-page {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 600px at 10% -10%, #2a6dff 0%, transparent 50%),
        radial-gradient(900px 500px at 110% 110%, #7a3cff 0%, transparent 46%),
        linear-gradient(160deg, #071433 0%, #12306c 52%, #0a1b44 100%);
}
.login-wrap { width: min(420px, calc(100% - 32px)); }
.login-brand {
    display: flex; align-items: center; gap: 12px;
    color: #fff; margin-bottom: 20px;
}
.login-logo {
    height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
.login-card .btn-primary {
    height: 42px;
}
.login-product { font-size: 22px; font-weight: 700; }
.login-tagline { opacity: .75; font-size: 13px; }
.login-card {
    background: #fff; border-radius: 18px; padding: 28px 26px 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.login-card h1 { margin: 0 0 18px; font-size: 22px; }

/* App chrome */
.app-body { display: flex; height: 100%; min-height: 0; background: var(--air-bg); }

.left-menu {
    width: var(--menu-w);
    flex: 0 0 var(--menu-w);
    height: 100%;
    background: linear-gradient(180deg, var(--air-sidebar) 0%, var(--air-sidebar-2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 12px;
    color: #fff;
    z-index: 20;
}
.left-menu__logo {
    width: 44px; height: 44px; border-radius: 12px;
    background: transparent;
    display: grid; place-items: center;
    margin-bottom: 12px;
    text-decoration: none;
}
.left-menu__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.left-menu__logo:hover { text-decoration: none; }
.left-menu__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; width: 100%; align-items: center; }
.left-menu__item {
    width: 56px; height: 52px;
    border: 0; background: transparent; color: #d5e6ff;
    border-radius: 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; font-size: 9px; letter-spacing: .02em;
}
.left-menu__item svg { width: 22px; height: 22px; fill: currentColor; }
.left-menu__item span { display: none; }
.left-menu__item:hover,
.left-menu__item.is-active { background: var(--air-active); color: #fff; text-decoration: none; }
.left-menu__profile { margin-top: auto; }
.left-menu .avatar { width: 28px; height: 28px; font-size: 11px; }

.workspace {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.screen {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.crm-grid tr.is-inactive td { color: #8a939c; }
.user-own,
.user-profile {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #eef2f4;
    padding: 16px 20px 24px;
}
.user-own .lead-section,
.user-profile .lead-section { max-width: 640px; }
.user-readonly {
    max-width: 640px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fff8e6;
    border: 1px solid #f0e0b0;
    border-radius: 10px;
    color: #6a5a20;
}
.color-value { display: inline-flex; align-items: center; gap: 8px; }
.color-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12); flex: 0 0 16px;
}
.lf-color { width: 42px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    max-height: var(--topbar-h);
    flex: 0 0 var(--topbar-h);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid var(--air-border);
}
.topbar__title { display: flex; align-items: center; gap: 10px; }
.topbar__title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}
.counter {
    background: #ecf2f4; color: #525c69;
    border-radius: 10px; padding: 0 8px;
    font-size: 13px; line-height: 20px; height: 20px;
    display: inline-flex; align-items: center;
}
.view-switch {
    display: flex; background: #edf1f3; border-radius: 18px; padding: 3px;
}
.view-switch__btn {
    border: 0; background: transparent; height: 30px; padding: 0 14px;
    border-radius: 15px; cursor: pointer; color: #525c69;
}
.view-switch__btn.is-active { background: #fff; color: #333; box-shadow: var(--air-shadow); }
.topbar__actions { margin-left: auto; }

.icon-btn {
    width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer; position: relative; color: #525c69;
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-btn:hover { background: #edf1f3; }
.badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--air-danger); color: #fff;
    border-radius: 8px; font-size: 10px; display: grid; place-items: center;
    font-style: normal;
}

.toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 20px 8px;
}
.search {
    position: relative; flex: 1 1 260px; min-width: 220px; max-width: 420px;
}
.search svg {
    position: absolute; left: 10px; top: 9px; width: 18px; height: 18px;
    fill: none; stroke: #99a2ad; stroke-width: 2;
}
.search input {
    width: 100%; height: 36px; border: 1px solid var(--air-border);
    border-radius: 18px; padding: 0 12px 0 34px; background: #fff; outline: none;
}
.search input:focus { border-color: var(--air-cyan); }
.search input:-webkit-autofill { animation: search-autofill 0.01s; }
@keyframes search-autofill { from {} to {} }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { position: relative; }
.filter__btn {
    height: 36px; padding: 0 12px; border-radius: 18px;
    border: 1px solid var(--air-border); background: #fff; cursor: pointer; color: #525c69;
}
.filter.is-on .filter__btn { background: #e5f9ff; border-color: #b7e9f8; color: #00789e; }
.filter__drop {
    position: absolute; top: 40px; left: 0; z-index: 30;
    min-width: 240px; max-height: 320px; overflow: auto;
    background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16);
    padding: 8px 0;
}
.filter__drop label {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; cursor: pointer;
}
.filter__drop label:hover { background: #f5f7f8; }
.filter__drop .empty { padding: 12px 14px; color: var(--air-text-2); }
.filter__drop .pick { cursor: pointer; display: block; padding: 8px 14px; }
.filter__drop .pick:hover { background: #f5f7f8; }

.massbar {
    position: relative; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    margin: 0 20px 8px; padding: 8px 12px;
    background: #e5f9ff; border-radius: 10px;
}

.grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0 20px 8px;
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--air-shadow); border: 1px solid #e8ecf0;
}
.crm-grid {
    width: 100%; border-collapse: collapse; min-width: 1100px;
}
.crm-grid th {
    position: sticky; top: 0; z-index: 2;
    background: #f8f9fb; color: #6a737c;
    font-weight: 600; font-size: 13px; text-align: left;
    padding: 10px 12px; border-bottom: 1px solid var(--air-border);
    white-space: nowrap; cursor: pointer; user-select: none;
}
.crm-grid th.col-check { width: 44px; cursor: default; }
.crm-grid th.is-sorted::after {
    content: " ▾"; font-size: 11px; color: var(--air-cyan);
}
.crm-grid th.is-sorted.asc::after { content: " ▴"; }
.crm-grid td {
    padding: 10px 12px; border-bottom: 1px solid #f0f2f4;
    vertical-align: middle; height: 48px; line-height: 20px;
}
.crm-grid tbody tr:hover { background: #f6fbfe; }
.crm-grid .placeholder td { text-align: center; color: var(--air-text-2); padding: 40px 12px; }

.col-check { width: 44px; }
.check { display: inline-grid; place-items: center; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check span {
    width: 16px; height: 16px; border: 2px solid #c6cdd3; border-radius: 3px; background: #fff;
}
.check input:checked + span {
    background: var(--air-cyan); border-color: var(--air-cyan);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/%3E%3C/svg%3E");
}

.lead-name {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--air-link);
    cursor: pointer;
    text-align: left;
}
.lead-name:hover { text-decoration: underline; }

.status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.25;
    font-size: 13px;
    white-space: nowrap;
}

.user-cell { display: flex; align-items: center; gap: 8px; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700;
    flex: 0 0 28px; text-transform: uppercase;
    background-repeat: no-repeat;
}
.avatar.has-photo {
    background-size: cover;
    background-position: center;
    color: transparent;
}
.avatar-field { display: flex; align-items: center; gap: 12px; }
.avatar-field .avatar { width: 48px; height: 48px; flex-basis: 48px; font-size: 16px; }

.tasks-cell { color: #6a737c; white-space: nowrap; }
.tasks-cell .overdue { color: var(--air-danger); }

.muted { color: var(--air-text-2); }
.seg { color: #525c69; }

.pager {
    display: flex; align-items: center; gap: 16px;
    flex-shrink: 0;
    padding: 4px 20px 12px; color: #525c69;
}
.pager__nav { display: flex; gap: 8px; }
.pager__size { margin-left: auto; }
.pager__size select {
    height: 32px; border-radius: 8px; border: 1px solid var(--air-border); background: #fff;
}

/* Kanban */
.kanban-note {
    margin: 0 20px 8px;
    color: #525c69;
    font-size: 13px;
}
.kanban {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 20px 12px;
    align-items: stretch;
}
.kanban-state {
    margin: auto;
    color: var(--air-text-2);
    padding: 40px 16px;
}
.kanban-col {
    flex: 0 0 230px;
    width: 230px;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}
.kanban-col.is-over {
    background: rgba(47, 198, 246, 0.14);
    box-shadow: inset 0 0 0 2px var(--air-cyan);
}
.kanban-col__head {
    flex: 0 0 auto;
    margin: 4px 4px 8px;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}
.kanban-col__title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.kanban-col__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-col__count {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}
.kanban-col.is-dark .kanban-col__count { background: rgba(0, 0, 0, 0.08); }
.kanban-col__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kanban-col__list::-webkit-scrollbar { width: 8px; }
.kanban-col__list::-webkit-scrollbar-thumb { background: #c5ced6; border-radius: 4px; }
.kanban-empty {
    margin: 12px 8px;
    text-align: center;
    color: #8a939c;
    font-size: 13px;
}
.kanban-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 12px 8px;
    box-shadow: 0 1px 2px rgba(0, 26, 74, 0.06), 0 4px 14px rgba(0, 26, 74, 0.05);
    cursor: grab;
}
.kanban-card.is-static { cursor: default; }
.tasks-board .kanban-col--overdue .kanban-col__head { background: var(--air-danger); color: #fff; }
.tasks-board .kanban-col--today .kanban-col__head { background: var(--air-success); color: #1e252c; }
.tasks-board .kanban-col--none .kanban-col__head { background: #c5ced6; color: #1e252c; }
.tasks-board .kanban-col--future .kanban-col__head { background: #2f80ed; color: #fff; }
.kanban-card:hover { box-shadow: 0 6px 18px rgba(0, 26, 74, 0.1); }
.kanban-card.is-dragging { opacity: 0.45; }
body.is-card-drag, body.is-card-drag * { cursor: grabbing !important; }
.k-title-row { display: flex; align-items: flex-start; gap: 8px; }
.k-title {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e252c;
    text-align: left;
    word-break: break-word;
    cursor: pointer;
    min-width: 0;
}
.k-title:hover { color: var(--air-link); }
.k-seg {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-top: 1px;
    padding: 0 6px;
    border-radius: 9px;
    background: #e8eef3;
    color: #525c69;
    font-size: 11px;
    font-weight: 700;
}
.k-user { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.k-user .avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }
.k-field { margin-top: 8px; }
.k-field__label { font-size: 12px; line-height: 1.2; color: #a0a8b0; }
.k-field__value { font-size: 12px; font-weight: 600; line-height: 1.35; color: #555; word-break: break-word; }
.k-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.k-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--air-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.k-badge--ok { background: #b6e34a; color: #243000; }
.k-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f4;
}
.k-task { font-size: 13px; font-weight: 600; color: #525c69; }
.k-task.is-overdue { color: var(--air-danger); }
.k-task-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--air-link);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.k-task-btn:hover { text-decoration: underline; }
.k-icons { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.k-icons .k-icon + .k-icon { margin-left: -5.5px; }
.k-icon {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a939c;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}
.k-icon svg { width: 16px; height: 16px; fill: currentColor; }
.k-icon:hover { background: #f0f4f7; color: #525c69; }

.menu {
    position: fixed; left: 80px; bottom: 16px; z-index: 40;
    width: 240px; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 8px;
}
.menu__who { display: flex; gap: 10px; align-items: center; padding: 8px; }
.menu button {
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.menu button:hover { background: #f4f6f8; }

.modal {
    position: fixed; inset: 0; background: rgba(0,20,50,.45);
    display: grid; place-items: center; z-index: 50;
}
.modal[hidden], .menu[hidden], .filter__drop[hidden], .massbar[hidden], .badge[hidden], .notify-panel[hidden] { display: none !important; }
.modal__card {
    width: min(420px, calc(100% - 24px));
    background: #fff; border-radius: 16px; padding: 22px;
    box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
.modal__card h2 { margin: 0 0 8px; font-size: 20px; }
.lead-create-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lead-create__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
}
.lead-create__wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .lead-create__grid { grid-template-columns: 1fr; }
}
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.toast-stack {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    min-width: 280px; max-width: 420px;
    background: #fff; border-radius: 10px; padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    border-left: 4px solid var(--air-cyan);
}
.toast.is-error { border-left-color: var(--air-danger); }

.notify-dock {
    position: fixed;
    top: 11px;
    right: 18px;
    z-index: 46;
}
.notify-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 24px));
    max-height: min(480px, calc(100vh - 80px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.notify-panel__title {
    padding: 14px 16px 8px;
    font-size: 16px;
    font-weight: 600;
}
.notify-panel__list {
    overflow: auto;
    padding: 0 8px 8px;
}
.notify-empty {
    margin: 8px 8px 16px;
    color: var(--air-text-2);
    font-size: 14px;
}
.notify-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    border-radius: 8px;
}
.notify-item:hover { background: #f4f6f8; }
.notify-item__body {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 8px;
    cursor: pointer;
}
.notify-item__text {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: var(--air-text);
}
.notify-item__time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--air-text-2);
}
.notify-item__delete {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8a939c;
    cursor: pointer;
}
.notify-item__delete svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.notify-item__delete:hover { background: #edf1f3; color: var(--air-text); }

@media (max-width: 900px) {
    .left-menu { width: 56px; flex-basis: 56px; }
    .topbar { padding: 0 12px; }
    .toolbar, .pager { padding-left: 12px; padding-right: 12px; }
    .grid-wrap, .massbar, .kanban-note { margin-left: 12px; margin-right: 12px; }
    .kanban { padding-left: 12px; padding-right: 12px; }
    .kanban-col { flex-basis: 230px; width: 230px; }
    .topbar__title h1 { font-size: 20px; }
}

/* Lead card */
.lead-overlay {
    position: absolute;
    inset: 0;
    z-index: 35;
    display: flex;
    justify-content: flex-end;
    padding: 12px 12px 0 12px;
    background: rgba(8, 22, 48, 0.45);
}
.lead-sheet-wrap {
    position: relative;
    flex: 0 0 90%;
    width: 90%;
    max-width: 90%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: lead-in 0.16s ease-out;
}
.lead-close {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 0;
    width: 36px;
    height: 36px;
    transform: translateX(-100%);
    padding: 0;
    border: 0;
    border-radius: 18px 0 0 18px;
    background: rgb(47, 198, 246);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: -2px 1px 6px rgba(0, 26, 74, 0.16);
}
.lead-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.lead-close:hover { background: #11a9d9; }
.lead-sheet {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
@keyframes lead-in {
    from { transform: translateY(8px); opacity: 0.7; }
    to { transform: none; opacity: 1; }
}
.lead-sheet__head {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px 8px 16px;
    background: #f4f7f8;
}
.lead-sheet__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.lead-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lead-title-wrap h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
    cursor: text;
}
.lead-title-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #c6cdd3;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    padding: 0 0 2px;
    outline: none;
}
.lead-title-input:focus { border-bottom-color: rgb(47, 198, 246); }
.lead-title-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lead-title-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.lead-title-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.lead-title-btn--save { border: 0; background: rgb(47, 198, 246); color: #fff; }
.lead-title-btn--save:hover { background: #11a9d9; }
.lead-title-btn--cancel { border: 1px solid #e1e5e8; background: #fff; color: #828b95; }
.lead-title-btn--cancel:hover { background: #f5f7f8; }
.lead-title-btn:disabled { opacity: 0.55; cursor: default; }
.lead-pipeline {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 16px 10px;
    flex: 0 0 auto;
    background: #f4f7f8;
}
.lead-pipeline::-webkit-scrollbar { height: 6px; }
.lead-pipeline::-webkit-scrollbar-thumb { background: #d5dde3; border-radius: 3px; }
.stage {
    border: 0;
    background: #eef2f4;
    color: #525c69;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}
.stage.is-current,
.stage.is-passed { cursor: pointer; }
.stage.is-current { cursor: default; }
.stage:hover:not(.is-current):not(.is-passed):not(:disabled) { background: #e4eaee; }
.stage.is-passed:hover:not(:disabled) { filter: brightness(0.96); }
.stage:disabled { cursor: default; }
.lead-tabs {
    display: flex;
    gap: 18px;
    padding: 0 16px;
    border-bottom: 1px solid var(--air-border);
    flex: 0 0 auto;
    background: #f4f7f8;
}
.lead-tab {
    border: 0;
    background: transparent;
    padding: 8px 0 10px;
    margin-bottom: -1px;
    cursor: pointer;
    color: #525c69;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.lead-tab.is-active { color: #333; border-bottom-color: var(--air-cyan); }
.lead-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.lead-col { min-width: 0; min-height: 0; }
.lead-col--info {
    flex: 0 0 42%;
    max-width: 520px;
    overflow: auto;
    border-right: 1px solid var(--air-border);
    background: #eef2f4;
    padding: 12px;
}
.lead-col--feed {
    flex: 1 1 auto;
    overflow: auto;
    background: #f4f7f8;
}
.lead-history {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
}
.lead-section {
    margin: 0 0 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.lead-section__head {
    padding: 13px 16px 11px;
    border-bottom: 1px solid #eef1f4;
}
.lead-section h3 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #525c69;
    font-weight: 600;
}
.lead-section__body { padding: 12px 16px 4px; }
.lf { margin-bottom: 14px; }
.lf__label { font-size: 12px; color: #a8b0b8; margin-bottom: 2px; }
.lf__value { font-size: 14px; font-weight: normal; color: #333; word-break: break-word; }
.lf__value.is-empty { color: #b0b7bf; }
.lf__value.is-text { white-space: pre-wrap; }
.lf__value.is-editable {
    cursor: text;
    border-radius: 4px;
    margin: 0 -4px;
    padding: 1px 4px;
}
.lf__value.is-pre { white-space: pre-wrap; word-break: break-word; }
.lf__value.is-editable:hover { background: #f4f7f8; }
.lf__value.is-editable:focus-visible {
    outline: 2px solid rgba(47, 198, 246, 0.7);
    outline-offset: 1px;
}
.lf__edit { display: flex; align-items: center; gap: 8px; }
.lf__edit--contacts, .lf__edit--users { align-items: flex-start; }
.lf-users {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}
.lf-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.lf-user input { margin: 0; }
.lf-contact-inputs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-contact-inputs .lf-input { width: 100%; flex: none; }
.lf-password {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lf-password label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #8a939c;
}
.lf-password .lf-input { width: 100%; flex: none; }
.lf-password__hint { margin: 0; font-size: 12px; color: #8a939c; }
.lf__edit.is-multiline { align-items: flex-start; }
.lf__edit.is-multiline .lead-title-actions { margin-top: 2px; }
.lf-input, .lf-select {
    flex: 1;
    min-width: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #c6cdd3;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.35;
    color: #333;
    padding: 2px 0;
    outline: none;
}
.lf-select { height: 32px; cursor: pointer; }
.lf-textarea {
    min-height: 88px;
    resize: vertical;
    border: 1px solid #d5dde3;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}
.lf-input:focus, .lf-select:focus { border-bottom-color: rgb(47, 198, 246); }
.lf-textarea:focus { border-color: rgb(47, 198, 246); box-shadow: 0 0 0 3px rgba(47, 198, 246, 0.15); }
.lf-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lf-link, .lf-site {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--air-link);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}
.lf-link:hover, .lf-site:hover { text-decoration: underline; }
.lf-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background: #e5f9ff;
    color: #00789e;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}
.lead-empty {
    padding: 28px 16px;
    text-align: center;
    color: #8a939c;
}
.feed-compose {
    margin: 12px 16px 8px;
    padding: 12px 14px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 26, 74, 0.06);
}
.feed-compose__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.feed-mode {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dfe3e6;
    border-radius: 16px;
    background: #fff;
    color: #828b95;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 1;
}
.feed-mode:hover { border-color: #c4cdd4; color: #525c69; }
.feed-mode.is-active {
    border-color: #2fc6f6;
    color: #2067b0;
}
.feed-compose__comment textarea {
    width: 100%;
    min-height: 68px;
    resize: vertical;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 4px;
    outline: none;
    background: transparent;
    font: inherit;
}
.feed-compose__comment textarea:focus { border-color: transparent; box-shadow: none; }
.feed-compose__bar,
.feed-task__bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 10px;
}
.feed-submit {
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.feed-task__box {
    border: 1px solid #d5dde3;
    border-radius: 10px;
    padding: 10px 12px 8px;
    background: #fff;
}
.feed-task__title {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 0 6px;
    color: #333;
}
.feed-task__text {
    width: 100%;
    min-height: 52px;
    resize: vertical;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    padding: 4px 0;
    color: #333;
}
.feed-task__due {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid #d5dde3;
    border-radius: 8px;
    color: #525c69;
}
.feed-task__due svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 16px; }
.feed-task__when {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: #333;
}
.feed-task__cancel {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #828b95;
}
.feed-task__cancel:hover { color: #525c69; }
.feed-label {
    margin: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a939c;
}
.feed-item {
    display: flex;
    gap: 12px;
    margin: 0 16px 10px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 26, 74, 0.05);
}
.feed-item--task,
.feed-item--incoming,
.feed-item.is-pinned { background: #fff8df; }
.feed-item.is-done { background: #fff; }
.feed-item--task.is-overdue { box-shadow: inset 0 0 0 1px #ffc9c7; }
.feed-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    background: #e8f4ff;
    color: #0b66c3;
}
.feed-item__icon svg { width: 18px; height: 18px; fill: currentColor; }
.feed-item--comment .feed-item__icon,
.feed-item--service_comment .feed-item__icon { background: #e8f6fc; color: #1aa9d4; }
.feed-item--call .feed-item__icon { background: #e7f9ee; color: #1f9d55; }
.feed-item--email .feed-item__icon { background: #eef2ff; color: #3d5afe; }
.feed-item--message .feed-item__icon { background: #e7fbf4; color: #008f6b; }
.feed-item--status_change .feed-item__icon { background: #fff4e5; color: #e08a00; }
.feed-item--assigned_change .feed-item__icon { background: #f3e8ff; color: #7b4fd1; }
.feed-item--task .feed-item__icon { background: #eef2f4; color: #525c69; }
.feed-item--task.is-overdue .feed-item__icon,
.feed-item.is-missed .feed-item__icon,
.feed-item.is-failed .feed-item__icon { background: #ffe8e7; color: #ff5752; }
.feed-item--task.is-done .feed-item__icon { background: #e7f9ee; color: #1f9d55; }
.feed-item__main { flex: 1; min-width: 0; }
.feed-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.feed-item__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.feed-item__head b { font-size: 14px; }
.feed-item__date { color: #8a939c; font-size: 12px; white-space: nowrap; }
.feed-call__label { color: #8a939c; }
.feed-call__value { color: var(--air-text); font-size: 14px; }
.feed-call__value .lf-link { font-size: 14px; }
.call-player {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    max-width: 560px;
}
.call-player audio { display: none; }
.call-player__play {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--air-cyan);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.call-player__play:hover { background: var(--air-cyan-hover); }
.call-player__play svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.call-player__main { flex: 1; min-width: 0; }
.call-player__rail {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}
.call-player__bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 999px;
    background: #c5eefb;
    pointer-events: none;
}
.call-player__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #7ad8f7;
}
.call-player__seek {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.call-player__seek::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: 0;
}
.call-player__seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(47, 198, 246, 0.45), 0 1px 3px rgba(0, 26, 74, 0.25);
    cursor: pointer;
}
.call-player__seek::-moz-range-track {
    height: 6px;
    background: transparent;
    border: 0;
}
.call-player__seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(47, 198, 246, 0.45), 0 1px 3px rgba(0, 26, 74, 0.25);
    cursor: pointer;
}
.call-player__times {
    display: flex;
    justify-content: space-between;
    margin-top: -4px;
    color: #8a939c;
    font-size: 12px;
    line-height: 1;
}
.call-player__speed-wrap { position: relative; flex: 0 0 auto; }
.call-player__speed {
    height: 28px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #6a737c;
    font-size: 13px;
    line-height: 28px;
    cursor: pointer;
}
.call-player__speed:hover { color: var(--air-link); }
.call-player__menu {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 72px;
    padding: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 26, 74, 0.16);
}
.call-player__menu[hidden] { display: none; }
.feed-item.is-speed { position: relative; z-index: 4; }
.call-player__rate {
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--air-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.call-player__rate:hover,
.call-player__rate.is-active { background: #e8f7fc; color: var(--air-link); }
.call-player__play:focus-visible,
.call-player__speed:focus-visible,
.call-player__seek:focus-visible,
.call-player__rate:focus-visible {
    outline: 2px solid var(--air-cyan);
    outline-offset: 2px;
}
.feed-item__date.is-overdue { color: var(--air-danger); font-weight: 700; }
.feed-pinflag {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #6a737c;
    font-size: 11px;
    font-weight: 700;
}
.feed-item__user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    flex: 0 1 auto;
    max-width: 46%;
    font-size: 13px;
}
.feed-item__user span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-item__user .avatar { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
.feed-item__subject { font-weight: 600; margin-bottom: 4px; }
.feed-item__text { white-space: pre-wrap; word-break: break-word; line-height: 1.8; }
.feed-comment-text { position: relative; }
.feed-comment-text .feed-item__text {
    line-height: 1.8;
    max-height: calc(1.8em * 4);
    overflow: hidden;
}
.feed-comment-text.is-open .feed-item__text { max-height: none; }
.feed-comment-text.is-clamped:not(.is-open) { margin-bottom: 14px; }
.feed-comment-text.is-clamped:not(.is-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.1em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 78%);
    pointer-events: none;
}
.feed-item.is-pinned .feed-comment-text.is-clamped:not(.is-open)::after,
.feed-item--incoming .feed-comment-text.is-clamped:not(.is-open)::after {
    background: linear-gradient(rgba(255, 248, 223, 0), #fff8df 78%);
}
.feed-mail-line { line-height: 1.8; }
.feed-mail-line--empty { height: 1.8em; }
.feed-comment-text:not(.is-open) .feed-mail-line--empty { display: none; }
.feed-expand { display: none; }
.feed-comment-text.is-clamped .feed-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border: 1px solid #d5dde3;
    border-radius: 13px;
    background: #fff;
    color: #525c69;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 26, 74, 0.08);
}
.feed-comment-text.is-clamped:not(.is-open) .feed-expand {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    transform: translate(-50%, 45%);
}
.feed-comment-text.is-clamped.is-open {
    display: flex;
    flex-direction: column;
}
.feed-comment-text.is-clamped.is-open .feed-expand {
    align-self: center;
    margin-top: 10px;
}
.feed-comment-text.is-clamped .feed-expand:hover { background: #f7f9fb; }
.feed-item__meta { margin-top: 4px; color: #6a737c; font-size: 13px; }
.feed-task-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.feed-task-done,
.feed-task-edit {
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
}
.feed-mail-plan { white-space: nowrap; }
.feed-task-done { background: var(--air-cyan); color: #fff; }
.feed-task-done:hover { background: var(--air-cyan-hover); }
.feed-task-edit { background: #e3e8ee; color: #525c69; }
.feed-task-edit:hover { background: #d5dde3; }
.feed-confirm__text { margin: 0 0 16px; font-size: 15px; color: #333; }
.feed-confirm-actions { justify-content: flex-start; }
.feed-confirm-yes {
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    background: var(--air-danger);
    color: #fff;
}
.feed-confirm-yes:hover { background: #e14b46; }
.feed-moretext, .feed-pin {
    display: inline-block;
    margin-top: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.feed-moretext { color: var(--air-link); margin-right: 12px; }
.feed-pin { color: #6a737c; font-size: 13px; }
.feed-pin:hover, .feed-moretext:hover { text-decoration: underline; }
.feed-more { display: flex; margin: 4px auto 18px; }
.history-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 18px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f4;
}
.history-row__main { flex: 1; min-width: 0; }
.history-row__title { font-weight: 600; }
.history-row__field { color: #8a939c; font-size: 12px; margin-top: 2px; }
.history-row__change { margin-top: 4px; word-break: break-word; }
.history-row__date { color: #8a939c; font-size: 12px; white-space: nowrap; }

@media (max-width: 900px) {
    .lead-overlay { padding: 0; }
    .lead-sheet-wrap { flex: 1 1 auto; width: auto; max-width: none; }
    .lead-close { top: 10px; left: 0; transform: none; }
    .lead-sheet { border-radius: 0; }
    .lead-sheet__head { padding: 14px 16px 8px 40px; }
    .lead-sheet__heading { flex-direction: column; align-items: flex-start; gap: 4px; }
    .lead-pipeline, .lead-tabs { padding-left: 16px; }
    .lead-body { flex-direction: column; overflow: auto; }
    .lead-col--info {
        flex: 0 0 auto;
        max-width: none;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--air-border);
    }
    .lead-col--feed { flex: 0 0 auto; overflow: visible; }
}

.call-plan-modal,
.mail-modal {
    position: absolute;
    z-index: 55;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 12px 12px 0;
    background: rgba(8, 22, 48, 0.45);
}
.side-sheet-wrap {
    position: relative;
    flex: 0 0 75%;
    width: 75%;
    max-width: 75%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: lead-in 0.16s ease-out;
}
.call-plan {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: #f4f6f8;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.call-plan__head {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px 18px 8px;
}
.call-plan__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e7f8ff;
    color: #2fc6f6;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
}
.call-plan__icon svg { width: 18px; height: 18px; fill: currentColor; }
.call-plan__head h2 {
    margin: 0;
    flex: 1;
    font-size: 22px;
    font-weight: 600;
}
.call-plan__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 18px 18px;
}
.call-plan__panel {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
}
.call-plan__quick {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #f4f6f8;
}
.call-plan__quick button {
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 6px 12px;
    color: #525c69;
    cursor: pointer;
}
.call-plan__quick button.is-active {
    background: #d9f3ff;
    color: #1a6fb5;
}
.call-plan__ruler-label {
    margin: 12px 0 6px;
    color: #8a939c;
    font-size: 12px;
}
.call-plan__scroll {
    overflow-x: auto;
    background: #f7f9fb;
    border-radius: 8px;
}
.call-plan__track {
    position: relative;
    width: 2880px;
    height: 64px;
    cursor: pointer;
}
.call-plan__hour {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    border-left: 1px solid #e3e8ee;
    padding: 4px 0 0 4px;
    color: #a0a8b0;
    font-size: 11px;
    pointer-events: none;
}
.call-plan__slot {
    position: absolute;
    top: 22px;
    height: 28px;
    border-radius: 3px;
    background: #c5ced6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.call-plan__slot.is-call { background: #3bc8f5; }
.call-plan__slot svg { width: 12px; height: 12px; fill: #fff; }
.call-plan__plan {
    position: absolute;
    top: 22px;
    height: 28px;
    border-radius: 3px;
    background: #bbed21;
    border: 1px solid #8fb800;
    pointer-events: none;
    z-index: 1;
}
.call-plan__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 16px 0 4px;
}
.call-plan__label {
    display: block;
    margin-bottom: 6px;
    color: #8a939c;
    font-size: 13px;
}
.call-plan__when { display: flex; gap: 8px; }
.call-plan__when input,
.call-plan__subject,
.call-plan__phone,
.call-plan__text,
.call-plan__duration {
    border: 1px solid #d5dde3;
    border-radius: 4px;
    background: #fff;
}
.call-plan__when input {
    height: 38px;
    padding: 0 10px;
}
.call-plan__duration {
    display: inline-flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
}
.call-plan__duration input {
    width: 72px;
    height: 36px;
    border: 0;
    padding: 0 10px;
    background: transparent;
}
.call-plan__duration span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    border-left: 1px solid #e6ebf0;
    color: #333;
}
.call-plan__field { display: block; margin-top: 14px; }
.call-plan__subject,
.call-plan__phone,
.call-plan__text {
    display: block;
    width: 100%;
    padding: 8px 10px;
}
.call-plan__subject,
.call-plan__phone { height: 38px; }
.call-plan__text { min-height: 96px; resize: vertical; }
.call-plan input:focus,
.call-plan select:focus,
.call-plan textarea:focus {
    outline: none;
    border-color: #2fc6f6;
}
.call-plan__duration:focus-within { border-color: #2fc6f6; }
.mail-editor .call-plan__phone:focus { outline: none; border-color: #2fc6f6; }
.call-plan__foot {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 16px;
    background: #fff;
    border-top: 1px solid #eef1f4;
}
.call-plan__save {
    min-width: 148px;
    height: 40px;
    border-radius: 4px;
    background: #bbed21;
    color: #535c69;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.call-plan__save:hover { background: #d2f95f; }
.call-plan__cancel {
    background: transparent;
    color: #535c69;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.call-plan__cancel:hover { background: transparent; color: #333; }

@media (max-width: 900px) {
    .call-plan-modal,
    .mail-modal { padding: 0; }
    .side-sheet-wrap { flex: 1 1 auto; width: auto; max-width: none; }
    .call-plan-modal .lead-close,
    .mail-modal .lead-close { top: 10px; left: 0; transform: none; }
    .call-plan,
    .mail-editor { border-radius: 0; }
    .call-plan__grid { gap: 14px; }
}

.mail-editor {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: #f4f6f8;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.mail-editor__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 16px 18px 8px;
}
.mail-editor__row { display: block; margin-bottom: 14px; }
.mail-editor__static,
.mail-editor__subject {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid #d5dde3;
    border-radius: 4px;
    background: #fff;
    color: var(--air-text);
    font-size: 14px;
}
.mail-editor__static { flex-wrap: wrap; background: #f7f9fb; word-break: break-word; }
.mail-editor__subject { height: 38px; }
.mail-editor__subject:focus { outline: none; border-color: #2fc6f6; }
.mail-editor__sheet {
    flex: 1 0 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d5dde3;
    border-radius: 4px;
    overflow: hidden;
}
.mail-editor__tools {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid #eef1f4;
}
.mail-editor__tools button {
    width: 32px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    color: #525c69;
    font-size: 14px;
}
.mail-editor__tools button:hover,
.mail-editor__tools button.is-on { background: #e8f6fc; }
.mail-editor__text {
    flex: 1 1 auto;
    min-height: 140px;
    overflow: auto;
    padding: 10px 12px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.mail-editor__sign {
    flex: 0 0 auto;
    padding: 10px 12px 12px;
    border-top: 1px solid #eef1f4;
    color: #6a737c;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.mail-editor__sign[hidden] { display: none !important; }
.files-upload { margin-left: auto; margin-right: 48px; }
.files-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--air-bg);
}
.files-folders {
    width: 280px;
    flex: 0 0 280px;
    background: #fff;
    border-right: 1px solid var(--air-border);
    padding: 12px;
    overflow: auto;
}
.files-folder {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--air-text);
    font-size: 14px;
}
.files-folder svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 20px; }
.files-folder.is-active,
.files-folder:hover { background: #e8f6fc; }
.files-folder.is-active { color: var(--air-link); }
.files-pane {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 16px 20px 24px;
}
.files-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    margin-bottom: 8px;
}
.files-row__name {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--air-link);
    cursor: pointer;
    text-align: left;
    font: inherit;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.files-row__name:hover { text-decoration: underline; }
.files-row__meta { color: var(--air-text-2); font-size: 13px; white-space: nowrap; }
.files-empty { color: var(--air-text-2); padding: 48px 16px; text-align: center; }
.mail-files { flex: 0 0 auto; margin-top: 12px; }
.mail-files__head { display: flex; align-items: center; gap: 12px; }
.mail-files__head .call-plan__label { margin: 0; }
.mail-attached { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mail-attached:empty { display: none; }
.mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px;
    background: #eef2f4;
    border-radius: 12px;
    font-size: 13px;
}
.mail-chip span,
.mail-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-chip__name {
    min-width: 0;
    max-width: 280px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.mail-chip__name:hover { text-decoration: underline; }
.mail-editor__text[contenteditable="false"] { background: #f7f9fb; }
.template-readonly {
    color: #8a939c;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}
.mail-chip__remove {
    border: 0;
    background: none;
    cursor: pointer;
    color: #6a737c;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
}
.mail-pick {
    margin-top: 8px;
    border: 1px solid var(--air-border);
    border-radius: 8px;
    background: #fff;
    max-height: 220px;
    overflow: auto;
}
.mail-pick__folder { padding: 8px 12px 4px; font-size: 12px; color: #8a939c; }
.mail-pick__file {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    color: var(--air-text);
}
.mail-pick__file:hover,
.mail-pick__file.is-on { background: #e8f6fc; }
.mail-pick__empty { padding: 6px 12px 10px; color: var(--air-text-2); font-size: 13px; }
.feed-files { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.feed-file {
    border: 0;
    background: none;
    padding: 0;
    color: var(--air-link);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.feed-file:hover { text-decoration: underline; }
.feed-item__text--bbcode img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.feed-item__text--bbcode a { color: var(--air-link); }
.feed-item__text--html { white-space: normal; }
.feed-item__text--html b { font-weight: 700; }
.feed-item__text--html i { font-style: italic; }
.feed-item__text--html u { text-decoration: underline; }