/* Taktora Control: shared components for operator and administration views. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/roboto-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/roboto-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Tokens ---------- */
:root {
    --bar-top: #44484c;
    --bar-bottom: #353739;
    --nav-link: #d0edfd;
    --link: #54a4c7;
    --link-legacy: #55a9dd;
    --green: #96ba43;
    --green-hover: #89ab3a;
    --green-step: #9fc356;
    --green-text: #7f9d38;
    --text: #1f1f1f;
    --text-label: #404040;
    --text-muted: #a8a8a8;
    --border: #d9d9d9;
    --line: #f0f0f0;
    --thead: #fafafa;
    --danger: #c0392b;
    --font-new: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-legacy: Arial, Helvetica, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--panel); color: var(--text); font: 14px/1.4 var(--font-legacy); min-width: 320px; }
[hidden] { display: none !important; }
a { color: var(--link-legacy); }
img, svg { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--panel); padding: 8px 12px; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }
.wrap { width: 950px; margin: 0 auto; }
.ui-new { font-family: var(--font-new); color: var(--text); }
.ui-new a { color: var(--link); text-decoration: none; }
.ui-new a:hover { text-decoration: underline; }
.ui-legacy { font-family: var(--font-legacy); color: var(--text); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.right { margin-left: auto; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-fill { fill: currentColor; stroke: none; }

/* ---------- 3. Top bar ---------- */
.topbar { height: 72px; background: linear-gradient(var(--bar-top), var(--bar-bottom)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); position: relative; z-index: 20; }
.topbar-in { height: 72px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: 24px; color: var(--text-muted); text-decoration: none; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(220, 252, 230, .28); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font: 700 15px var(--font-new); letter-spacing: -.2px; }
.brand-text small { font: 600 9px var(--font-new); letter-spacing: .9px; text-transform: uppercase; color: #9fd8b5; margin-top: 2px; }
.topnav { display: flex; align-items: center; height: 72px; }
.topnav a { position: relative; margin-right: 15px; color: var(--nav-link); font-size: 14px; text-decoration: underline; white-space: nowrap; }
.topnav a:hover { color: var(--text-muted); }
.topnav a.is-active { color: var(--text-muted); text-decoration: none; }
.topnav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: -22px; margin-left: -11px; border: 11px solid transparent; border-top: 0; border-bottom: 10px solid var(--border); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.topsearch { position: relative; }
.topsearch input { width: 185px; height: 24px; padding: 0 26px 0 6px; background: var(--wash); border: 1px solid var(--border); border-bottom-color: var(--border); border-radius: 2px; color: var(--text-muted); font: 12px var(--font-legacy); outline: none; }
.topsearch input::placeholder { color: var(--text-muted); opacity: .95; }
.topsearch input:focus { background: var(--wash); }
.topsearch input { -webkit-appearance: none; appearance: none; }
.topsearch input::-webkit-search-cancel-button, .topsearch input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.topsearch button { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.usermenu { position: relative; padding-left: 18px; border-left: 1px dotted var(--border); height: 24px; display: flex; align-items: center; }
.usermenu-toggle { display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--nav-link); font-size: 14px; }
.usermenu-toggle .avatar { width: 18px; height: 18px; border-radius: 50%; background: #f5dc93; color: #5a4a12; font: 700 10px/18px var(--font-legacy); text-align: center; }
.usermenu-toggle .name { text-decoration: underline; }
.caret { display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; margin-left: 4px; }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); z-index: 60; padding: 4px 0; text-align: left; }
.dropdown.is-open > .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: 0; color: var(--text); font: 14px var(--font-legacy); text-align: left; text-decoration: none; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--panel); text-decoration: none; color: var(--text); }
.dropdown-menu form { margin: 0; }
.dropdown-menu .sep { height: 1px; background: var(--panel); margin: 4px 0; }
.dropdown-left .dropdown-menu { right: auto; left: 0; }
.ui-new .dropdown-menu a, .ui-new .dropdown-menu button { font: 14px var(--font-new); color: var(--text); }

.softphone-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font: 12px var(--font-legacy); white-space: nowrap; cursor: default; }
.softphone-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--wash); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.softphone-status[data-state="online"] i { background: #6fd04a; }
.softphone-status[data-state="incall"] i { background: #f5b83d; }
.softphone-status[data-state="error"] i, .softphone-status[data-state="nomic"] i { background: #e5533d; }

/* ---------- 4. Notices ---------- */
.notices { padding-top: 10px; }
.notice { position: relative; margin-bottom: 8px; padding: 8px 32px 9px 10px; background: var(--panel); border: 1px solid #d6fea5; color: var(--text); font: 13px/20px var(--font-legacy); }
.notice strong { color: var(--text); }
.notice a { color: var(--link); }
.notice-error { background: var(--panel); border-color: #ffc9c2; }
.notice-warn { background: var(--panel); border-color: #fbe69a; }
.notice-close { position: absolute; right: 8px; top: 5px; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 18px; }
.notice-close:hover { color: var(--text); }
.call-strip { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 8px 12px; background: var(--panel); border: 1px solid #c9df9a; border-radius: 3px; font: 13px var(--font-legacy); color: var(--text); }
.call-strip .live { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(150, 186, 67, .28); flex: none; }
.call-strip strong { font-size: 14px; }
.call-strip a { margin-left: auto; }

/* Flash messages over a full-screen view (contact card) */
.toast { position: fixed; top: 82px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); z-index: 90; }
.toast .notices { padding-top: 0; }
.toast .notice { box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }

/* ---------- 5. Page scaffolding ---------- */
.page { padding: 34px 0 90px; }
.page-title { font: 500 38px/1.2 var(--font-new); color: var(--text); margin: 0 0 29px; letter-spacing: -.1px; }
.page-title-sm { font: 700 18.5px/1.2 var(--font-legacy); color: var(--text); margin: 0 0 22px; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 41px; }
.tabs .tab { position: relative; padding: 0 4px 13px 0; margin-right: 0; font: 14px/22px var(--font-new); color: var(--text); text-decoration: none; white-space: nowrap; }
.tabs .tab:hover { text-decoration: none; color: var(--link); }
.tabs .tab.is-active { color: var(--link); }
.tabs .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--link); }
.tabs .tab.is-disabled { color: var(--text); cursor: default; }
.tabs .tab.is-disabled:hover { color: var(--text); }
.tabs .tab .dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #f5b83d; vertical-align: 2px; }
.row-tools { display: flex; align-items: center; gap: 10px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; margin: 27px 0 27px; font: 14px var(--font-new); color: var(--text); }

/* ---------- 6. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; }
.btn:hover { text-decoration: none; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.ui-new .btn { height: 40px; padding: 0 17px; border: 1px solid transparent; border-radius: 6px; font: 400 16px/1 var(--font-new); }
.ui-new .btn-primary { background: var(--green); color: var(--text-muted); }
.ui-new .btn-primary:hover { background: var(--green-hover); color: var(--text-muted); }
.ui-new .btn-default { background: var(--panel); border-color: var(--border); color: var(--text); }
.ui-new .btn-default:hover { border-color: var(--green); color: var(--text); }
.ui-new .btn-dashed { background: var(--panel); border: 1px dashed var(--border); color: var(--text); }
.ui-new .btn-dashed:hover { border-color: var(--green); }
.ui-new .btn-sm { height: 32px; padding: 0 14px; font-size: 14px; }
.ui-new .btn-icon { width: 40px; padding: 0; }
.ui-new .btn-danger { background: var(--panel); border-color: #e3b7b2; color: var(--danger); }
.ui-legacy .btn { height: 38px; padding: 0 15px; border: 1px solid var(--border); border-radius: 3px; font: 700 13px/1 var(--font-legacy); color: var(--text); background: linear-gradient(var(--panel), var(--panel) 50%, var(--panel) 52%, var(--panel)); }
.ui-legacy .btn:hover { background: linear-gradient(var(--panel), var(--panel) 50%, var(--panel) 52%, var(--panel)); }
.ui-legacy .btn-primary { border-color: #86ae37; color: var(--text-muted); background: linear-gradient(#a6cc4e, #9ec447 48%, #85af35 52%, #82ad34 88%, #94bd3e); text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); }
.ui-legacy .btn-primary:hover { background: linear-gradient(#b0d356, #a6cc4e 48%, #8db93b 52%, #86b136 88%, #9bc543); }
.ui-legacy .btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.ui-legacy .btn-icon { padding: 0; width: 34px; }
.ui-legacy .btn-danger { color: #a33; }
.split { position: relative; display: inline-flex; }
.split .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .split-caret { width: 30px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(50, 80, 5, .45); }
.split .split-caret .caret { margin: 0; border-top-color: var(--border); }
.split .btn[disabled] { opacity: .5; }
.split .dropdown-menu { right: 0; top: calc(100% + 3px); }

/* ---------- 7. Forms ---------- */
.ui-new .input, .ui-new .select, .ui-new .textarea { width: 100%; height: 40px; padding: 0 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font: 16px var(--font-new); color: var(--text); outline: none; transition: border-color .15s; }
.ui-new .textarea { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; line-height: 1.4; }
.ui-new .input::placeholder, .ui-new .textarea::placeholder { color: var(--text-muted); }
.ui-new .input:focus, .ui-new .select:focus, .ui-new .textarea:focus { border-color: var(--green); }
.ui-new .input[readonly] { background: var(--panel); }
.ui-new .select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
.ui-new .select:disabled, .ui-new .input:disabled { background-color: var(--panel); color: var(--text-muted); cursor: not-allowed; }
.ui-new .input-sm, .ui-new .select-sm { height: 32px; font-size: 14px; border-radius: 6px; }
.ui-new .select-sm { background-position: right 9px center; padding-right: 26px; }
.ui-legacy .input, .ui-legacy .textarea { width: 100%; height: 28px; padding: 0 7px; background: var(--panel); border: 1px solid var(--border); border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); font: 14px var(--font-legacy); outline: none; }
.ui-legacy .textarea { height: auto; min-height: 48px; padding: 6px 7px; resize: vertical; }
.ui-legacy .input:focus, .ui-legacy .textarea:focus { border-color: #7fb7dc; }
.ui-legacy .select { width: 100%; font: 14px var(--font-legacy); }
.check, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 14px var(--font-new); }
.ui-new input[type="checkbox"], .ui-new input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; background: var(--panel); border: 1px solid var(--border); flex: none; cursor: pointer; position: relative; vertical-align: -3px; }
.ui-new input[type="checkbox"] { border-radius: 2px; }
.ui-new input[type="radio"] { border-radius: 50%; }
.ui-new input[type="checkbox"]:checked { background: var(--link); border-color: var(--link); }
.ui-new input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--border); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-new input[type="radio"]:checked { border-color: var(--link); }
.ui-new input[type="radio"]:checked::after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--link); }
.ui-new input[type="radio"]:disabled, .ui-new input[type="checkbox"]:disabled { background: var(--panel); cursor: not-allowed; }
.hint { color: var(--text-muted); font-size: 12px; line-height: 19px; }
.help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font: 10px/1 var(--font-new); vertical-align: 1px; cursor: help; }
.frow { display: grid; grid-template-columns: var(--label-w, 174px) 1fr; column-gap: 0; align-items: start; margin-bottom: var(--row-gap, 32px); }
.frow > label, .frow > .flabel { padding-top: 10px; font: 400 14px/20px var(--font-new); color: var(--text-label); }
.frow .fcontrol { min-width: 0; }
.frow .fcontrol.w-300 { max-width: 300px; }
.frow .fcontrol.w-300 .input, .frow .fcontrol.w-300 .select, .frow .fcontrol.w-300 .textarea { width: 300px; max-width: 100%; }
.frow .fcontrol.w-100 { max-width: 90px; }
.frow .fcontrol.w-100 .input { width: 90px; }
.form-actions { display: flex; gap: 16px; margin-top: 8px; }
.wizard-body { padding: 0 120px; }
.wizard-body .form-actions { padding-left: var(--label-w, 174px); }
.inline-error { color: var(--danger); font-size: 13px; margin-top: 4px; }
.check-list { max-height: 210px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
.check-list .check { display: flex; padding: 5px 0; }
.timerange { display: inline-flex; align-items: center; width: 172px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font: 16px var(--font-new); }
.timerange input { width: 50px; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; font: 16px var(--font-new); color: var(--text); outline: none; }
.timerange input::placeholder { color: var(--text-muted); }
.timerange .arrow { padding: 0 8px 0 4px; color: var(--text-muted); }
.timerange .icon { margin-left: auto; width: 14px; height: 14px; color: var(--text-muted); }
.timerange:focus-within { border-color: var(--green); }
.sched-row { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.sched-row .select { width: 172px; }
.sched-x { width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.sched-x:hover { color: var(--danger); }
.dropzone { position: relative; min-height: 280px; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel); display: flex; align-items: center; justify-content: center; text-align: center; }
.dropzone:hover { border-color: var(--green); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone .dz-body { pointer-events: none; padding: 20px; }
.dropzone .dz-body .icon { width: 30px; height: 30px; color: var(--link); stroke-width: 1.4; }
.dz-title { margin-top: 8px; font: 16px var(--font-new); color: var(--text); }
.dz-hint { margin-top: 10px; font: 12px/19px var(--font-new); color: var(--text-muted); }
.dz-sample { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 16px var(--font-new); color: var(--text); pointer-events: auto; position: relative; z-index: 2; }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.review-head h2 { font: 500 20px var(--font-new); color: var(--text); }
.tbl.summary th { width: 160px; height: auto; padding: 14px 16px; vertical-align: top; background: var(--panel); border-top: 1px solid var(--line); font-weight: 500; }
.tbl.summary td { padding: 14px 16px; vertical-align: top; }
.tbl.summary td.edit { width: 90px; text-align: right; white-space: nowrap; }
.tbl.summary .hint { margin-top: 2px; }

/* ---------- 8. Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font: 14px/22px var(--font-new); color: var(--text); }
.tbl th { height: 38px; padding: 0 16px; background: var(--thead); border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; color: var(--text); white-space: nowrap; }
.tbl th:first-child { border-top-left-radius: 8px; }
.tbl th:last-child { border-top-right-radius: 8px; }
.tbl td { padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--panel); }
.tbl .num { text-align: right; }
.tbl-tight th, .tbl-tight td { padding-left: 10px; padding-right: 10px; }
.tbl .empty { padding: 44px 16px; text-align: center; color: var(--text-muted); }
.tbl .empty .icon { width: 44px; height: 44px; stroke-width: 1.2; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto; }
.sorter { display: inline-flex; flex-direction: column; margin-left: 7px; vertical-align: middle; gap: 1px; color: var(--text-muted); }
.sorter i { display: block; width: 0; height: 0; border: 4px solid transparent; }
.sorter i:first-child { border-bottom: 5px solid currentColor; border-top: 0; }
.sorter i:last-child { border-top: 5px solid currentColor; border-bottom: 0; }
.th-icon { display: inline-flex; margin-left: 8px; color: var(--text-muted); vertical-align: -2px; }
.th-icon .icon { width: 12px; height: 12px; }
.badge { display: inline-block; height: 24px; padding: 0 7px; background: var(--panel); border: 1px solid #9fc356; border-radius: 2px; color: var(--green-text); font: 13px/22px var(--font-new); white-space: nowrap; }
.badge-off { background: var(--panel); border-color: var(--border); color: var(--text-muted); }
.badge-draft { background: var(--panel); border-color: #fbe69a; color: #ad8b00; }
.badge-bad { background: var(--panel); border-color: #ffc9c2; color: var(--danger); }
.chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 2px; color: var(--text); font: 12px/18px var(--font-new); white-space: nowrap; }
.chip-green { border-color: #b7dd8a; color: #52a417; background: var(--panel); }
.chips { display: flex; flex-direction: column; align-items: flex-start; }
.act-icons { display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: var(--text); }
.act-icons > a, .act-icons > button, .act-icons > .dropdown > button { color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.act-icons > a:hover, .act-icons > button:hover, .act-icons > .dropdown > button:hover { color: var(--link); text-decoration: none; }
.act-icons .icon { width: 17px; height: 17px; }
.switch { position: relative; display: inline-block; width: 44px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--wash); cursor: pointer; vertical-align: middle; transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .2s; }
.switch.is-on { background: var(--green); }
.switch.is-on::after { left: 24px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 9. Wizard steps ---------- */
.steps { display: flex; align-items: center; margin: -6px 0 45px; padding: 0; list-style: none; }
.step { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.step + .step { flex: 1 1 auto; }
.step + .step::before { content: ""; display: block; flex: 1 1 auto; min-width: 12px; height: 1px; margin: 0 14px; background: var(--line); }
.step.is-done + .step::before, .step.is-current::before { background: var(--green-step); }
.step .circle { width: 32px; height: 32px; margin-right: 8px; border: 1px solid var(--border); border-radius: 50%; color: var(--text); font: 16px/30px var(--font-new); text-align: center; flex: none; }
.step .label { font: 16px var(--font-new); color: var(--text-muted); }
.step.is-current .circle { background: var(--green-step); border-color: var(--green-step); color: var(--text-muted); }
.step.is-done .circle { border-color: var(--line); color: var(--green-step); background: var(--panel); }
.step.is-done .circle .icon { width: 16px; height: 16px; stroke-width: 2; }
.step a { display: flex; align-items: center; text-decoration: none; }
.step a:hover { text-decoration: none; }
.step a:hover .label { color: var(--text); }

/* ---------- 10. Alerts ---------- */
.alert { padding: 13px 16px; border: 1px solid #9dc9fa; border-radius: 8px; background: var(--panel); color: var(--text-label); font: 14px/22px var(--font-new); margin-bottom: 24px; }
.alert-warn { background: var(--panel); border-color: #fbe69a; }
.alert-error { background: var(--panel); border-color: #ffc9c2; }

/* ---------- 11. Modal & drawer ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .4); display: none; }
.overlay.is-open { display: block; }
.overlay-center { display: none; align-items: flex-start; justify-content: center; padding-top: 72px; overflow-y: auto; }
.overlay-center.is-open { display: flex; }
.modal { width: 500px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(0, 0, 0, .45); font: 14px var(--font-legacy); color: var(--text); }
.modal-head { position: relative; padding: 11px 44px 11px 20px; background: var(--panel); border-bottom: 1px solid var(--border); font: 700 13px var(--font-legacy); text-transform: uppercase; color: var(--text); }
.modal-close { position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; padding: 0; background: none; border: 0; color: #8bb9dc; font-size: 22px; line-height: 24px; cursor: pointer; }
.modal-close:hover { color: #4f8fbf; }
.modal-body { padding: 18px 20px 14px; }
.mrow { display: grid; grid-template-columns: 115px 1fr; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--text); }
.mrow > label { line-height: 1.35; padding-right: 8px; }
.mrow .req { font-size: 9px; vertical-align: super; }
.mrow-check { grid-template-columns: 115px 1fr; margin-top: -8px; }
.mrow-check label { font-size: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column; background: var(--panel); box-shadow: -4px 0 18px rgba(0, 0, 0, .2); }
.overlay.drawer-overlay { background: rgba(0, 0, 0, .45); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 24px; border-bottom: 1px solid var(--border); flex: none; }
.drawer-head h2 { font: 500 16px var(--font-new); color: var(--text); }
.drawer-close { width: 28px; height: 28px; padding: 0; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 22px; line-height: 28px; }
.drawer-close:hover { color: var(--text); }
.drawer-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); flex: none; }
.drow { display: grid; grid-template-columns: 161px 1fr; column-gap: 0; align-items: start; margin-bottom: 20px; }
.drow > label, .drow > .flabel { padding-top: 10px; font: 14px/20px var(--font-new); color: var(--text-label); }
.radio-block { display: block; margin-bottom: 18px; }
.radio-block .radio { align-items: flex-start; font: 14px/22px var(--font-new); }
.radio-block .radio input { margin-top: 3px; }
.radio-block .hint { margin: 2px 0 0 24px; }

/* ---------- 12. Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.pager-left { display: flex; align-items: center; gap: 12px; }
.pager .arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--border); border-radius: 3px; background: linear-gradient(var(--panel), var(--panel) 50%, var(--panel) 52%, var(--panel)); color: var(--text); text-decoration: none; }
.pager .arrow .icon { width: 14px; height: 14px; stroke-width: 3; }
.pager .arrow.is-off { opacity: .45; pointer-events: none; }
.pager .pages { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.pager .pages a, .pager .pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 4px; color: var(--text); font: 700 14px var(--font-legacy); text-decoration: none; }
.pager .pages .cur { background: linear-gradient(var(--wash), var(--wash)); color: var(--text-muted); }
.pager .pages a:hover { background: var(--panel); }
.pager .pages .gap { color: var(--text-muted); }
.pager-right { text-align: right; }
.pager-right select { height: 26px; border: 1px solid var(--border); border-radius: 2px; background: var(--panel); font: 14px var(--font-legacy); padding: 0 4px; }
.pager-total { display: block; margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.pager-ant { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 20px; font: 14px var(--font-new); }
.pager-ant a, .pager-ant span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; }
.pager-ant a:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.pager-ant .cur { border-color: var(--green); color: var(--green); font-weight: 500; }
.pager-ant .is-off { opacity: .4; pointer-events: none; }
.pager-ant .gap { border: 0; }

/* ---------- 13. Прозвон: leads list ---------- */
.lay-side { display: flex; align-items: flex-start; gap: 17px; }
.lay-main { flex: 1; min-width: 0; }
.lay-aside { width: 193px; flex: none; }
.side-card { margin-bottom: 14px; padding: 10px 10px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.side-title { display: block; margin-bottom: 7px; color: var(--text); font: 700 14.5px/1.25 var(--font-legacy); }
.side-card label.check-line { display: flex; align-items: center; gap: 6px; color: var(--text); font: 700 14.5px var(--font-legacy); cursor: pointer; }
.side-card .select, .side-card .input { width: 100%; }
.side-card .sub { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; display: block; }
.dotted { color: var(--link-legacy); border-bottom: 1px dotted var(--link-legacy); text-decoration: none; cursor: pointer; }
.leads-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 14px; }
.sortlinks { padding-left: 3px; font-size: 14px; }
.sortlinks a { margin-right: 7px; }
.sortlinks .is-cur { color: var(--text); }
.box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 3px rgba(0, 0, 0, .1); }
.leads-box { padding: 9px 10px 8px; min-height: 60px; }
.lead-row { display: flex; align-items: center; gap: 10px; min-height: 33px; padding: 0 0; }
.lead-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-name.is-org { font-weight: 700; font-size: 15.5px; color: var(--text); text-decoration: none; }
.lead-name.is-org .chev { display: inline-block; width: 10px; margin-right: 6px; font-weight: 700; }
.lead-ico { width: 20px; text-align: center; flex: none; }
.lead-ico .icon { width: 17px; height: 17px; }
.ico-ok { color: #6fae3a; }
.ico-bad { color: #b03a30; }
.lead-phone { width: 164px; height: 24px; flex: none; display: block; border: 2px solid #c6e3db; background: var(--panel); color: #2c673c; font: 700 14px/20px var(--font-legacy); text-align: center; text-decoration: none; cursor: pointer; padding: 0; }
.lead-phone:hover { background: var(--panel); text-decoration: none; }
.lead-empty { padding: 26px 10px; color: var(--text-muted); text-align: center; }
.tag-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: #4a7a99; font: 11px/16px var(--font-legacy); vertical-align: 1px; }

/* ---------- 14. Contacts / dark tables ---------- */
.ctoolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; min-width: 34px; padding: 0 7px; border: 1px solid var(--border); border-radius: 3px; background: linear-gradient(var(--panel), var(--panel) 50%, var(--panel) 52%, var(--panel)); color: var(--text); cursor: pointer; text-decoration: none; }
.tb-btn:hover { background: linear-gradient(var(--panel), var(--panel) 50%, var(--panel) 52%, var(--panel)); text-decoration: none; }
.tb-btn .icon { width: 17px; height: 17px; }
.tb-btn .tiny { width: 9px; height: 9px; stroke-width: 3; margin-left: 2px; }
.ctoolbar .push { margin-left: auto; display: flex; gap: 10px; }
.dtable { width: 100%; border-collapse: collapse; font: 14px var(--font-legacy); }
.dtable thead th { height: 30px; padding: 0 8px; background: linear-gradient(var(--wash), var(--wash)); color: var(--text-muted); font: 700 13px var(--font-legacy); text-align: left; white-space: nowrap; }
.dtable tbody td { height: 34px; padding: 0 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.dtable tbody tr:hover td { background: var(--panel); }
.dtable .trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtable .ck { width: 30px; }
.dtable input[type="checkbox"] { width: 14px; height: 14px; margin: 0 4px 0 0; vertical-align: -2px; }
.who-icon { color: var(--text); margin-right: 6px; }
.who-icon .icon { width: 15px; height: 15px; }
.side-card-lg { padding: 12px 14px 14px; }
.side-card-lg .fld { margin-bottom: 11px; }
.side-card-lg .fld .input[type="date"] { margin-bottom: 5px; }
.side-card-lg .fld > label { display: block; margin-bottom: 4px; color: var(--text); font-size: 14px; }
.side-card-lg .check-line { margin-bottom: 11px; font-weight: 400; font-size: 14px; color: var(--text); }
.side-card-lg .select, .side-card-lg .input { width: 100%; }
.btn-dark { display: block; width: 100%; height: 30px; border: 0; border-radius: 2px; background: linear-gradient(var(--wash), var(--wash)); color: var(--text-muted); font: 700 13px var(--font-legacy); cursor: pointer; }
.btn-dark:hover { background: linear-gradient(var(--wash), var(--wash)); }
.lay-contacts .lay-main { width: 673px; flex: none; }
.tb-btn input[type="checkbox"] { margin: 0; width: 14px; height: 14px; }
.lay-contacts .lay-aside { width: 245px; }
.lay-contacts .side-card { padding: 8px 16px 12px; }

/* ---------- 15. Вызовы ---------- */
.filter-box { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 32px; padding: 13px 24px 16px; background: var(--panel); border-radius: 8px; font: 14px var(--font-new); }
.filter-box .fld > label { display: block; margin-bottom: 8px; color: var(--text-label); }
.filter-box .fld { min-width: 0; }
.filter-box .input, .filter-box .select { height: 32px; font-size: 14px; border-radius: 6px; padding: 0 10px; }
.filter-box .select { padding-right: 26px; background-position: right 9px center; }
.filter-box .range { display: flex; align-items: center; gap: 8px; }
.filter-box .range .arrow { color: var(--text-muted); }
.call-dir { display: flex; align-items: center; height: 22px; color: var(--danger); }
.call-dir.ok { color: #6fae3a; }
.call-dir .icon { width: 17px; height: 17px; }

/* ---------- 16. Команда ---------- */
.team-actions { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.team-actions .select { width: 198px; height: 30px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 2px; background-color: var(--panel); }
.team-actions .select option { color: var(--text); }
.team-actions .totals { margin-left: 4px; font-size: 14px; color: var(--text); }
.team-actions .totals .dotted { margin-left: 12px; }
.team-actions .btn-primary { margin-left: auto; margin-right: 40px; }
.dark-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px 6px 4px; background: var(--wash); }
.dark-bar .icon { width: 20px; height: 20px; color: var(--text-muted); stroke-width: 2; }
.dark-bar input { flex: 1; height: 26px; padding: 0 7px; border: 1px solid var(--border); background: var(--panel); font: 13px var(--font-legacy); color: var(--text); outline: none; }
.dtable.team thead th { height: 30px; background: var(--wash); border-top: 0; }
.dtable.team tbody td { height: 33px; border-bottom: 1px solid var(--border); }
.status-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--wash); vertical-align: -2px; }
.status-dot.is-on { background: #6fae3a; }
.dotted-num { color: var(--link-legacy); border-bottom: 1px dotted var(--link-legacy); text-decoration: none; }
.pen { color: var(--text); }
.pen:hover { color: #55a9dd; }

/* ---------- 17. Телефония ---------- */
.tel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.tel-head .total { font: 14px var(--font-new); color: var(--text); }
.tbl .hint { margin-top: 0; }
.date-green { color: #6f8f2c; }
.gray-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--wash); }
.kebab { color: var(--text); }

/* ---------- 18. Login ---------- */
.login-wrap { max-width: 420px; margin: 40px auto 0; padding: 0 16px; }
.login-card .notices { padding-top: 0; margin-bottom: 14px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 28px 30px 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand .brand-mark { width: 46px; height: 46px; border-radius: 12px; }
.login-brand strong { display: block; font: 700 22px var(--font-new); color: var(--text); letter-spacing: -.3px; }
.login-brand small { display: block; margin-top: 2px; font: 600 10px var(--font-new); letter-spacing: 1px; text-transform: uppercase; color: #5b9e77; }
.login-card .frow { grid-template-columns: 1fr; margin-bottom: 18px; }
.login-card .frow > label { padding: 0 0 6px; }
.login-card .btn { width: 100%; }

/* ---------- 19. Contact card (Прозвон) ---------- */
.card-page { display: grid; grid-template-columns: 427px 1fr; height: calc(100vh - 72px); min-height: 560px; background: var(--panel); }
.card-left { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
.card-left-scroll { flex: 1; overflow-y: auto; padding: 18px 15px 6px; }
.card-name { font: 700 18px/1.25 var(--font-legacy); color: var(--text); word-break: break-word; }
.card-phone { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.card-meta { margin-top: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.4; max-width: 240px; }
.card-callrow { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; justify-content: flex-end; }
.card-callrow .btn { height: 34px; }
.card-callrow .btn-call { width: 124px; }
.card-note-link { display: block; text-align: right; margin-bottom: 12px; }
.card-tabs { display: flex; margin: 8px 0 0; border-bottom: 1px solid var(--border); }
.card-tabs a, .card-tabs span { padding: 7px 8px 9px; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; }
.card-tabs .is-cur { border-bottom: 3px solid var(--border); margin-bottom: -1px; }
.cf { display: grid; grid-template-columns: 107px 1fr; column-gap: 0; margin: 12px 0; font-size: 13.5px; align-items: start; }
.cf > label { padding-top: 6px; color: var(--text); font-size: 13.5px; }
.cf .input, .cf .textarea { width: 100%; }
.cf .textarea { min-height: 50px; }
.cf-static { padding: 5px 0; word-break: break-word; }
.card-left-foot { display: flex; align-items: center; gap: 6px; padding: 10px 10px 14px; background: var(--panel); border-top: 1px solid var(--border); }
.card-right { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.card-right-top { display: flex; align-items: flex-end; justify-content: space-between; height: 42px; padding: 0 12px 0 15px; background: var(--panel); border-bottom: 1px solid var(--border); }
.ctab { display: flex; }
.ctab a { padding: 11px 15px 9px; color: var(--text); font: 700 14px var(--font-legacy); text-decoration: none; }
.ctab a.is-cur { border-bottom: 3px solid var(--border); margin-bottom: -1px; }
.card-close { width: 30px; height: 30px; margin-bottom: 4px; color: var(--text); text-decoration: none; text-align: center; font-size: 20px; line-height: 30px; }
.card-pane { flex: 1; overflow: auto; min-height: 0; }
.card-pane[hidden] { display: none !important; }
.script-body { padding: 18px 22px; background: var(--panel); min-height: 100%; font: 15px/1.5 var(--font-legacy); white-space: pre-wrap; word-break: break-word; }
.history-tools { display: flex; margin: 0 15px; }
.history-tools a { padding: 6px 10px; border: 1px solid var(--border); border-right: 0; background: var(--panel); color: var(--text); font: 700 11px var(--font-legacy); text-transform: uppercase; text-decoration: none; }
.history-tools a:last-child { border-right: 1px solid var(--border); }
.history-tools a.is-cur { background: var(--panel); }
.history-list { padding: 8px 15px 20px; }
.hitem { display: grid; grid-template-columns: 150px 26px 250px 1fr 60px; gap: 8px; align-items: start; padding: 16px 0; font-size: 14px; }
.hitem .when { line-height: 1.5; }
.hitem .kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px; color: var(--text-muted); align-content: start; }
.hitem .kv b { color: var(--text); font-weight: 400; }
.hitem .dur { text-align: right; }
.history-recording { grid-column: 1 / -1; min-width: 0; }
.history-recording audio { display: block; width: min(100%, 420px); height: 36px; }
.hitem-sys { margin: 12px 0; padding: 12px; background: var(--panel); text-align: center; color: var(--text); }
.card-bottom { display: flex; align-items: flex-end; gap: 30px; padding: 12px 15px 13px; background: var(--panel); }
.card-bottom .note { flex: 1; }
.card-bottom textarea { width: 100%; min-height: 66px; padding: 8px; background: var(--panel); border: 1px solid var(--border); font: 14px var(--font-legacy); resize: vertical; outline: none; }
.card-bottom .result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--text); }
.card-bottom .result-row select { min-width: 220px; font: 14px var(--font-legacy); }
.card-bottom .save { margin-bottom: 4px; }
.small-input-group { display: flex; gap: 6px; }
.dial-form { display: flex; align-items: center; gap: 8px; }
.dial-form .input { width: 190px; }
.msg-empty { padding: 16px; color: var(--text-muted); }

/* ---------- 20. Responsive ---------- */
@media (max-width: 990px) {
    .wrap { width: auto; margin: 0 14px; }
    .topbar { height: auto; padding: 10px 0; }
    .topbar-in { flex-wrap: wrap; height: auto; row-gap: 8px; }
    .topnav { height: auto; flex-wrap: wrap; row-gap: 4px; }
    .topnav a.is-active::after { display: none; }
    .topbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
    .wizard-body { padding-left: 0; }
    .lay-side { flex-direction: column; }
    .lay-aside, .lay-contacts .lay-aside { width: 100%; }
    .lay-contacts .lay-main { width: 100%; }
    .page-title { font-size: 30px; }
    .steps { flex-wrap: wrap; row-gap: 10px; }
    .step + .step::before { width: 14px; margin: 0 8px; }
    .frow, .drow { grid-template-columns: 1fr; }
    .frow > label, .drow > label { padding: 0 0 6px; }
    .wizard-body .form-actions { padding-left: 0; }
    .filter-box { flex-wrap: wrap; }
    .card-page { grid-template-columns: 1fr; height: auto; }
    .tbl-scroll { overflow-x: auto; }
    .team-actions { flex-wrap: wrap; gap: 12px; }
    .team-actions .btn-primary { margin: 0; }
    .tabs { flex-wrap: wrap; gap: 4px 16px; }
    .lay-main { width: 100%; min-width: 0; }
    .lead-row { flex-wrap: wrap; padding: 6px 0; }
    .lead-name { white-space: normal; flex-basis: 100%; }
    .lead-phone { width: 100%; }
    .leads-head { flex-wrap: wrap; gap: 8px; }
    .ctoolbar { flex-wrap: wrap; }
    .ctoolbar .push { margin-left: 0; }
    .pager { flex-wrap: wrap; gap: 10px; }
    .card-bottom { flex-wrap: wrap; gap: 12px; }
    .card-bottom .note { flex-basis: 100%; }
    .hitem { grid-template-columns: 1fr; gap: 4px; }
    .sched-row { gap: 10px; flex-wrap: wrap; }
    .sched-row .select { width: 150px; }
    .wizard-body { padding: 0; }
    .drawer { width: 100vw; }
    .dropdown-menu { max-width: calc(100vw - 28px); }
}

/* in-window page swap in progress (app.js) */
html.is-navigating, html.is-navigating * { cursor: progress; }

/* Control shell and component treatment. */
:root { color-scheme:dark; --bg:#11191d; --panel:#182328; --wash:#1d2b2e; --text:#e6f0ed; --text-label:#bdcdca; --text-muted:#99aaae; --border:#2a373c; --line:#2a373c; --thead:#1d2b2e; --green:#8ee3bc; --green-hover:#a8f1ce; --green-step:#8ee3bc; --green-text:#8ee3bc; --link:#8ee3bc; --link-legacy:#8ee3bc; --nav-link:#99aaae; --danger:#ff938b; --font-legacy:var(--font-new); }
body { background:var(--bg); color:var(--text); font-family:var(--font-new); }
body.has-session { padding-left:82px; }
.wrap { width:auto; max-width:1600px; margin:0 auto; padding:0 32px; }
.topbar { height:72px; padding:0; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; }
.topbar-in { height:72px; flex-wrap:nowrap; }
.topbar-right { width:auto; margin-left:auto; gap:20px; }
.topbar .brand-text strong { font-size:18px; letter-spacing:.3px; }
.topbar .brand-mark { display:none; }
.topbar .brand-text small { color:var(--text-muted); letter-spacing:2px; }
.control-rail { position:fixed; inset:0 auto 0 0; width:82px; background:#0d1418; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; z-index:40; }
.rail-logo { margin-bottom:24px; }
.rail-logo img { width:44px; height:44px; border-radius:12px; }
.control-rail nav { display:flex; flex-direction:column; gap:8px; width:100%; }
.control-rail nav a { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 2px; border-radius:8px; color:var(--text-muted); text-decoration:none; font-size:10px; }
.control-rail nav a:hover,.control-rail nav a.is-active { color:var(--green); background:#253c35; }
.control-rail .rail-admin { margin-top:auto; }
.topsearch input { width:240px; height:36px; padding:0 34px 0 12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.topsearch input::placeholder { color:var(--text-muted); }
.topsearch button { top:9px; right:10px; }
.usermenu { border-left:1px solid var(--line); }
.usermenu-toggle .avatar { width:30px; height:30px; background:#253c35; color:var(--green); line-height:30px; }
.usermenu-toggle .name { text-decoration:none; color:var(--text); }
.page { padding:32px 0 70px; }
.page-title { font-size:25px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:25px; }
.tabs { margin-bottom:28px; }
.box,.side-card,.filter-box,.login-card,.wizard-body,.tbl-scroll { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:none; }
.wizard-body { max-width:1100px; padding:28px 40px; margin:0 auto; }
.side-card { padding:18px; }
.lay-side { gap:22px; }
.lay-aside,.lay-contacts .lay-aside { width:260px; }
.lay-contacts .lay-main { width:auto; flex:1; overflow-x:auto; }
.ui-new .btn,.ui-legacy .btn,.tb-btn,.pager .arrow,.btn-dark { background:var(--wash); color:var(--text); border:1px solid var(--line); border-radius:7px; box-shadow:none; text-shadow:none; font-weight:500; }
.ui-new .btn-primary,.ui-legacy .btn-primary { background:var(--green); color:#11251c; border-color:var(--green); font-weight:600; }
.ui-new .btn-primary:hover,.ui-legacy .btn-primary:hover { background:var(--green-hover); color:#11251c; }
.ui-new .btn-danger,.ui-legacy .btn-danger { color:var(--danger); }
.ui-new .input,.ui-new .textarea,.ui-new .select,.ui-legacy .input,.ui-legacy .textarea,.ui-legacy .select,.card-bottom textarea,.dark-bar input { background-color:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; box-shadow:none; }
.ui-legacy .input,.ui-legacy .select { min-height:34px; padding:5px 9px; }
input[type=checkbox],input[type=radio] { accent-color:var(--green); }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.tbl th,.dtable thead th,.dtable.team thead th { background:var(--wash); color:var(--text-muted); height:44px; font-weight:500; }
.tbl td,.dtable tbody td,.dtable.team tbody td { height:48px; border-bottom:1px solid var(--line); }
.tbl tbody tr:hover td,.dtable tbody tr:hover td { background:var(--wash); }
.leads-box { padding:10px 18px; }
.lead-row { min-height:48px; border-bottom:1px solid var(--line); }
.lead-row:last-child { border-bottom:0; }
.lead-phone { background:#253c35; color:var(--green); border:1px solid #385b4a; border-radius:6px; height:30px; line-height:28px; font-variant-numeric:tabular-nums; }
.tag-chip { background:#253c35; color:var(--green); border-color:#385b4a; }
.dropdown-menu,.modal,.drawer { background:var(--panel); border-color:var(--line); border-radius:10px; }
.dropdown-menu a:hover,.dropdown-menu button:hover,.modal-head { background:var(--wash); color:var(--text); }
.notice { background:#253c35; color:var(--text); border-color:#385b4a; }
.notice-error { background:#3b2729; color:#ffb4ac; border-color:#704345; }
.card-page { background:var(--bg); grid-template-columns:minmax(320px,360px) minmax(0,1fr); height:calc(100dvh - 72px); }
.card-left,.card-right { background:var(--panel); }
.card-left-scroll { padding:24px; }
.card-name { font-size:23px; }
.card-right-top { height:58px; background:var(--panel); border-color:var(--line); }
.card-tabs .is-cur,.ctab a.is-cur { color:var(--green); border-color:var(--green); }
.card-left-foot,.card-bottom { background:var(--wash); border-color:var(--line); }
.script-body { padding:28px; background:var(--panel); line-height:1.8; }
.hitem { grid-template-columns:130px 24px minmax(160px,1fr) minmax(100px,1fr) 55px; }
.login-wrap { max-width:460px; margin:8vh auto 0; }
.login-card { padding:36px; }
.login-brand strong { color:var(--text); }
.login-card .btn { margin-top:8px; }
@media(max-width:1100px) { .topsearch { display:none; } .wrap { padding:0 22px; } .wizard-body { padding:24px; } .lay-side { flex-direction:column; } .lay-aside,.lay-contacts .lay-aside { width:100%; } .hitem { grid-template-columns:1fr; } }
@media(max-width:700px) { body.has-session { padding-left:0; padding-bottom:76px; } .control-rail { inset:auto 0 0; width:100%; height:72px; padding:4px; flex-direction:row; border-top:1px solid var(--line); } .rail-logo { display:none; } .control-rail nav { flex:1; flex-direction:row; justify-content:space-around; gap:0; } .control-rail nav a { padding:8px; } .control-rail .rail-admin { margin:0; flex:0; } .rail-admin span { display:none; } .topbar-right { gap:10px; } .usermenu-toggle .name { display:none; } .wrap { padding:0 16px; margin:0; } .page-title { font-size:22px; } .card-page { grid-template-columns:1fr; height:auto; } .card-left { border-right:0; } .card-pane { min-height:240px; } .wizard-body { padding:18px; } .wizard-body .form-actions { padding-left:0; } .login-wrap { margin:24px auto; } .login-card { padding:24px; } }

@media(max-width:700px) {
    .control-rail { overflow-x:auto; }
    .control-rail nav { flex:1 0 auto; }
    .control-rail nav a { min-width:54px; }
    .control-rail .rail-admin { flex:0 0 auto; }
    .control-rail .rail-admin a { min-width:40px; }
}

/* The external sheet keeps its own formatting and scrollbars. */
.sheet-pane { display:flex; flex-direction:column; overflow:hidden; }
.sheet-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 16px; font-size:12px; flex-shrink:0; }
.sheet-toolbar span, .sheet-access-hint { color:var(--muted); }
.sheet-frame { display:block; width:100%; flex:1; min-height:0; border:0; background:#fff; color-scheme:light; }
.sheet-access-hint { padding:5px 16px; font-size:11px; flex-shrink:0; }
@media(max-width:700px) { .sheet-pane { flex:none; height:65vh; min-height:360px; } }