:root {
    --bg: #f4f6f5;
    --panel: #fff;
    --text: #25332d;
    --muted: #68766f;
    --line: #e2e8e4;
    --primary: #107856;
    --primary-strong: #086343;
    --success: #107856;
    --warning: #9c650e;
    --danger: #bc3450;
    --radius: 8px;
    --shadow: 0 4px 16px rgb(26 54 40 / 5%);
    --font: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    --accent: #107856;
    --tint: #eaf6ef;
}
[hidden] { display: none !important; }
.contact-head h1 { margin-top: 10px; }
.contact-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; background: var(--tint); color: var(--accent); font-size: 12px; font-weight: 650; }
.contact-badge svg { width: 15px; height: 15px; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 14px 0; border-block: 1px solid var(--line); color: var(--muted); }
.contact-strip a,.contact-strip span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.contact-strip svg { color: var(--accent); }
.contact-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.contact-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 600; }
.contact-tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.contact-tabs button:hover { background: #edf5f0; }
.contact-resource { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.contact-task { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-task.overdue { border-left: 3px solid var(--danger); padding-left: 14px; }
.contact-task .full { grid-column: 1 / -1; }
.contact-task p,.contact-task strong { overflow-wrap: anywhere; }
.contact-add { margin-bottom: 20px; }
.contact-add summary { display: flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; cursor: pointer; }
details > form { margin-top: 16px; }
.document-line { display: grid; grid-template-columns: minmax(160px,2fr) repeat(3,minmax(85px,1fr)) 38px; align-items: start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.document-line textarea { min-height: 80px; }
.document-line .icon-btn { margin-top: 24px; }
.document-total-preview { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; padding: 20px 0; font-variant-numeric: tabular-nums; }
.document-total-preview span { display: grid; gap: 4px; color: var(--muted); }
.document-total-preview strong { color: var(--text); font-size: 18px; }
.document-total-preview span:last-child strong { color: var(--primary); }
.document-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 12px 0 28px; }
.document-facts span { color: var(--muted); }
.document-facts strong { display: block; margin-top: 6px; color: var(--text); overflow-wrap: anywhere; }
.document-overdue { color: var(--danger); font-weight: 650; }
.document-save { margin-top: 20px; }
.email-test-envelope { display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 10px 16px; padding: 14px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.email-test-envelope span { color: var(--muted); }
.email-test-envelope strong { font-size: 14px; overflow-wrap: anywhere; }
.email-test-fields { margin-top: 12px; }
.email-history-summary { display: grid; grid-template-columns: repeat(3,minmax(0,.8fr)) repeat(2,minmax(0,1.3fr)); gap: 20px; padding: 4px 0 24px; border-bottom: 1px solid var(--line); }
.email-history-summary > div { display: flex; gap: 10px; align-items: flex-start; min-width: 0; color: var(--muted); font-size: 12px; }
.email-history-summary svg { color: var(--accent); margin-top: 3px; }
.email-history-summary strong { display: block; font-size: 23px; color: var(--text); margin-top: 3px; }
.email-history-summary .email-history-date { font-size: 14px; overflow-wrap: anywhere; }
.form-grid.email-history-filters { margin-block: 24px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.email-events { margin-bottom: 20px; }
.email-event { display: grid; grid-template-columns: 34px minmax(0,1fr) 38px; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.email-event-icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--tint); color: var(--accent); border-radius: 6px; }
.email-event-main { min-width: 0; }
.email-event h3 { margin-top: 9px; overflow-wrap: anywhere; }
.email-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 12px; }
.email-event-meta > span { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.email-event-meta svg { width: 14px; height: 14px; }
.email-event-address { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.email-event-address svg { width: 14px; height: 14px; }
.email-event-excerpt { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.email-event-error { color: var(--danger); overflow-wrap: anywhere; }
.email-event[data-tone="amber"] .email-event-error { color: var(--muted); }
.email-detail-facts { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 8px 20px; margin: 0 0 24px; }
.email-detail-facts dt { color: var(--muted); }
.email-detail-facts dd { margin: 0; overflow-wrap: anywhere; }
.email-history-body { white-space: normal; overflow-wrap: anywhere; line-height: 1.7; }
.message > small { display: block; margin-block: 4px 12px; color: var(--muted); }
.email-preview.email-history-preview { height: 380px; margin-top: 14px; }
.email-history-attachments { margin-top: 22px; }
.email-conversation-row { display: flex; align-items: center; gap: 12px; padding: 14px 10px; border-top: 1px solid var(--line); }
.email-conversation-row.selected { background: #edf7f2; }
.email-conversation-row > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.email-conversation-row small { display: block; color: var(--muted); margin-top: 3px; }
@media (max-width: 1100px) {
    .email-history-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .form-grid.email-history-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .email-history-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
    .email-history-summary > div:last-child { grid-column: 1 / -1; }
    .form-grid.email-history-filters { grid-template-columns: minmax(0,1fr); }
    .email-event { grid-template-columns: 28px minmax(0,1fr) 30px; gap: 8px; }
    .email-event-icon { width: 28px; height: 28px; }
    .email-event > .icon-btn { width: 30px; min-width: 30px; height: 32px; }
    .email-detail-facts { grid-template-columns: 76px minmax(0,1fr); gap: 8px 12px; }
}
button:disabled { cursor: default; opacity: .45; }
@media (max-width: 800px) {
    .document-line { grid-template-columns: repeat(3,minmax(0,1fr)) 34px; gap: 8px; }
    .document-line > label:first-child { grid-column: 1 / -1; }
    .document-line label { font-size: 11px; }
    .document-line input { padding-inline: 6px; }
    .document-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .contact-tabs button { padding-inline: 10px; font-size: 12px; }
    .contact-tabs .count-badge { min-width: 20px; }
}
[data-tone="blue"] { --accent: #316ac5; --tint: #edf3ff; }
[data-tone="teal"] { --accent: #087c85; --tint: #e7f6f6; }
[data-tone="violet"] { --accent: #7958b6; --tint: #f3eefa; }
[data-tone="amber"] { --accent: #a36a16; --tint: #fff4df; }
[data-tone="green"] { --accent: #107856; --tint: #eaf6ef; }
[data-tone="rose"] { --accent: #bc3450; --tint: #fceef1; }
[data-tone="neutral"] { --accent: #67766e; --tint: #f0f3f1; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; letter-spacing: 0; line-height: 1.3; }
h1 { font-size: 26px; font-weight: 750; }
h2 { font-size: 16px; margin-bottom: 18px; font-weight: 650; }
h3 { font-size: 14px; }
p { margin: 8px 0 0; }
svg.lucide { width: 19px; height: 19px; flex: 0 0 auto; stroke-width: 1.8; }
:focus-visible { outline: 3px solid #72bfab; outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid #d6dfd9; border-radius: 6px; background: #fff; padding: 10px 12px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #a9bcb0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #e2f2eb; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; padding: 0; min-width: 17px; accent-color: var(--primary); vertical-align: middle; cursor: pointer; }
input[type="file"] { padding: 6px; background: #f8faf9; }
input::file-selector-button { border: 0; background: #eaf2ed; color: var(--primary); border-radius: 4px; padding: 6px 10px; margin-right: 10px; cursor: pointer; font-weight: 600; }
textarea { min-height: 120px; resize: vertical; }
label { display: grid; gap: 7px; color: #55635b; font-size: 13px; font-weight: 600; }
label input, label select, label textarea { font-size: 14px; font-weight: 400; }
label.check { display: flex; align-items: center; align-self: center; }
.muted { color: var(--muted); }
.skip-link { position: fixed; left: 16px; top: -60px; padding: 12px; background: #fff; z-index: 100; border: 1px solid var(--primary); }
.skip-link:focus { top: 12px; }
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 26px 14px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 13px 32px; flex: 0 0 auto; }
.brand-mark { position: relative; display: grid; place-items: center; width: 39px; height: 42px; border-radius: 8px; background: #107856; color: #fff; font-size: 26px; font-weight: 850; }
.brand-dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 3px; border: 2px solid #fff; background: #e9ae3d; }
.brand-name { display: flex; align-items: baseline; gap: 5px; font-weight: 850; font-size: 23px; color: #183d2d; }
.brand-name > span { font-size: 11px; color: #6e7c74; font-weight: 650; }
.nav { display: grid; gap: 20px; }
.nav-group { display: grid; gap: 3px; }
.nav-label { padding: 0 13px 7px; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #68796d; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; min-height: 41px; border-radius: 6px; color: #617067; font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: background .15s; }
.nav-link > svg { color: var(--accent); width: 18px; height: 18px; }
.nav-link:hover { background: #f3f7f4; color: #233b2e; }
.nav-link.active { background: var(--tint); color: var(--accent); font-weight: 650; border-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-link .nav-chevron { margin-left: auto; width: 14px; height: 14px; }
.sidebar-footer { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 18px 12px 0; margin-top: auto; color: #718077; font-size: 11px; }
.sidebar-footer > svg { color: var(--primary); }
.sidebar-footer span span { display: block; color: #929e96; font-size: 10px; }
.sidebar-footer { min-height: 66px; }
.main { min-width: 0; }
.topbar { min-height: 74px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 12px 30px; position: sticky; top: 0; z-index: 20; }
.topbar-location { display: flex; gap: 10px; align-items: center; min-width: 0; }
.location-icon { display: grid; place-items: center; color: var(--accent); width: 28px; height: 28px; }
.location-icon svg { width: 18px; height: 18px; }
.location-label { font-size: 12px; font-weight: 650; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.top-actions form { display: flex; }
.user-pill { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; background: #f8ecdc; color: #896025; border: 1px solid #efdfc8; border-radius: 50%; flex: 0 0 auto; }
.user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { position: relative; width: min(340px, 35%); margin-left: auto; }
.search > input { font-size: 12px; background: #f7f9f8; border: 1px solid #edf0ee; padding: 10px 12px 10px 37px; }
.search-icon { position: absolute; left: 12px; top: 12px; color: #87958c; width: 16px !important; height: 16px !important; }
.search-results { position: absolute; top: 46px; left: 0; right: 0; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 30px #233a2e18; display: none; max-height: 340px; overflow-y: auto; z-index: 50; }
.search-results.is-open { display: block; }
.search-results a { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search-results a:hover { background: #f0f7f3; }
.search-results a span { color: var(--muted); font-size: 12px; }
.search-message { padding: 16px; color: var(--muted); font-size: 12px; }
.content { padding: 30px; display: grid; align-content: start; gap: 22px; max-width: 1800px; margin-inline: auto; }
.page-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 2px; min-width: 0; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.page-head h1 .page-symbol { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: var(--tint); color: var(--accent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.page-head h1 .page-symbol svg { width: 23px; height: 23px; }
.page-head p { margin: 9px 0 0; font-size: 13px; }
.page-head .actions { flex-shrink: 0; }
.panel, .workspace-section { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px; min-width: 0; }
.grid { display: grid; gap: 22px; min-width: 0; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; display: flex; align-items: center; gap: 9px; }
.section-heading h2 > svg { color: #5e7c6a; width: 18px; height: 18px; }
.panel > h2 { display: flex; align-items: center; gap: 9px; }
.panel > h2 > svg { color: var(--accent); width: 18px; height: 18px; }
.text-link { display: inline-flex; gap: 6px; align-items: center; color: var(--primary); font-size: 12px; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.text-link svg { width: 15px; height: 15px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 24px; padding: 0 6px; background: #f0f4f1; color: #6e7d74; border-radius: 5px; font-size: 11px; font-weight: 600; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; padding: 17px 18px; min-width: 0; }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 35px; }
.metric-top > span:first-child { color: #607168; font-size: 12px; font-weight: 600; }
.metric-icon, .stat-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); background: var(--tint); border-radius: 7px; flex: 0 0 auto; }
.metric-icon svg { width: 18px; height: 18px; }
.metric > strong { display: block; font-size: 34px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-caption { display: block; margin-top: 8px; color: #6b7b71; font-size: 11px; }
.primary-metrics .metric { background: color-mix(in srgb, var(--tint) 35%, #fff); }
.commercial-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.compact-stat { display: grid; grid-template-columns: 29px 1fr; align-items: center; gap: 8px; padding: 6px 17px; border-right: 1px solid var(--line); min-width: 0; }
.compact-stat:first-child { padding-left: 0; }
.compact-stat:last-child { border-right: 0; }
.compact-stat .stat-icon { width: 27px; height: 27px; border-radius: 6px; }
.compact-stat svg { width: 15px; height: 15px; }
.compact-stat strong { font-size: 23px; line-height: 1.3; font-weight: 650; }
.compact-stat > span:last-child { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.operations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); background: #fff; }
.operation { display: flex; gap: 12px; align-items: center; padding: 17px 20px; border-right: 1px solid var(--line); min-width: 0; }
.operation:last-child { border: 0; }
.operation:hover { background: var(--tint); }
.operation > span:nth-child(2) { font-size: 11px; color: var(--muted); }
.operation strong { display: block; color: var(--text); font-size: 19px; line-height: 1.2; margin-top: 3px; }
.operation-arrow { margin-left: auto; color: #9bad9f; width: 15px !important; }
.btn, .icon-btn { border: 1px solid #d7e1da; background: #fff; color: #52655a; border-radius: 6px; padding: 9px 13px; font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 38px; line-height: 1.3; transition: background .15s, border-color .15s; }
.btn:hover, .icon-btn:hover { background: #eef5f0; border-color: #a4bcad; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-strong); }
.btn.danger { color: var(--danger); border-color: #f1d4db; background: #fff8fa; }
.btn.danger:hover { background: #fceaf0; }
.btn:disabled, .icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 35px; height: 35px; min-height: 35px; padding: 0; flex: 0 0 auto; }
.topbar .icon-btn { border-color: transparent; background: transparent; }
.topbar .icon-btn:hover { background: #eef5f0; }
.icon-btn svg { width: 18px; height: 18px; }
.form-stack { display: grid; gap: 16px; }
.form-stack > .btn { justify-self: start; }
.remark-filter { margin-bottom: 18px; }
.remark-internal { margin: 10px 0; border-left: 3px solid #14806b; padding-left: 12px; }
.remark-internal summary { color: #176b5a; }
.remark-internal p { white-space: normal; overflow-wrap: anywhere; }
.remark-row { min-width: 0; }
.remark-heading .check { min-width: 0; overflow-wrap: anywhere; }
.remark-catalog td { vertical-align: top; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid > .btn { justify-self: start; }
.form-section { min-width: 0; border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin: 0; }
.form-section legend { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: 13px; font-weight: 650; padding-right: 15px; }
.form-section legend svg { width: 17px; height: 17px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.rate-stat > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.rate-stat strong { color: var(--accent); font-size: 23px; }
.rate-stat progress { width: 100%; height: 7px; border: 0; border-radius: 3px; overflow: hidden; appearance: none; }
.rate-stat progress::-webkit-progress-bar { background: var(--tint); }
.rate-stat progress::-webkit-progress-value { background: var(--accent); }
.rate-stat progress::-moz-progress-bar { background: var(--accent); }
.period-filter { align-items: end; }
.period-filter input { max-width: 160px; }
.inline-form, .filters, .bulkbar, .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form input, .filters input, .filters select { width: auto; min-width: 180px; flex: 1 1 180px; }
.inline-form > .btn, .filters > .btn { flex: 0 0 auto; }
.bulkbar { padding: 0 0 18px; }
.bulkbar select { width: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-scroll { overflow-x: auto; max-width: 100%; margin-top: 16px; scrollbar-width: thin; scrollbar-color: #c2d4c9 #f3f7f4; }
.panel > .table-scroll:first-child { margin-top: 0; }
th, td { padding: 14px 13px; border-bottom: 1px solid #eaf0ec; text-align: left; vertical-align: middle; }
th { background: #f5f8f6; color: #6e8074; font-size: 10px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
td { overflow-wrap: anywhere; }
td .muted { font-size: 11px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f8fbf9; }
tbody tr:last-child td { border-bottom: 0; }
td a:not(.btn) { color: #27744e; }
td a:not(.btn):hover { text-decoration: underline; }
td input[type="checkbox"] { display: block; }
td .actions { flex-wrap: nowrap; }
.table-empty td { padding: 30px; text-align: center; color: var(--muted); background: #fff; font-size: 12px; }
.table-empty svg { vertical-align: middle; margin-right: 8px; color: #92a69a; }
.badge { display: inline-flex; gap: 6px; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 5px; background: #eef2f0; color: #617268; font-weight: 600; font-size: 11px; line-height: 1.35; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex: 0 0 auto; }
.status-new, .status-pending, .status-draft { background: #edf3ff; color: #316ac5; }
.status-sequence_active, .status-quote_sent { background: #f2ebfb; color: #7958b6; }
.status-reply_received, .status-interested { background: #e5f6f5; color: #087c85; }
.status-won, .status-active, .status-completed, .status-healthy { background: #e8f6ec; color: #107856; }
.status-call_back, .status-paused, .status-warning { background: #fff3dc; color: #9c650e; }
.status-lost, .status-bounce, .status-do_not_contact, .status-invalid_email, .status-stopped, .status-error { background: #fceaf0; color: #bc3450; }
.list { display: grid; }
.list-row { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.list-row > div { display: grid; gap: 5px; min-width: 0; }
.list-row span { color: var(--muted); font-size: 12px; }
.list-row strong { font-size: 13px; }
.list-row:last-child { border: 0; }
.list-row:hover { color: var(--primary); }
.task-row { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.task-row time { font-size: 11px; color: var(--muted); }
.task-check { color: #aac6b5; }
.notification-row { grid-template-columns: 8px minmax(0, 1fr) 16px; align-items: center; gap: 12px; }
.notification-dot { width: 6px; height: 6px; border-radius: 50%; background: #4693bc; }
.notification-row > svg { width: 15px; color: #a0b0a5; }
.empty-state { display: grid; justify-items: center; text-align: center; padding: 24px 14px; gap: 8px; color: var(--muted); }
.empty-state strong { font-size: 13px; font-weight: 550; color: #65766b; }
.empty-state p { font-size: 12px; margin: 0; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--accent); background: var(--tint); margin-bottom: 2px; }
.empty-icon svg { width: 22px; height: 22px; }
.note { border-top: 1px solid var(--line); padding: 14px 0; }
.note p { margin: 0 0 8px; }
.note span, .message span, .timeline span { color: var(--muted); font-size: 11px; }
.thread { display: grid; gap: 12px; max-height: 520px; overflow: auto; }
.message { border: 1px solid #e2e9e5; border-left: 3px solid #74a5bf; border-radius: 6px; padding: 16px; background: #f7fafc; }
.message.out { background: #f1f8f3; border-left-color: #6ba885; margin-left: 24px; }
.timeline { display: grid; gap: 0; }
.timeline div { display: grid; grid-template-columns: 155px 80px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.mapping-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 264px; gap: 16px; overflow-x: auto; min-width: 0; padding-bottom: 16px; scrollbar-color: #bbcebf #e9efeb; scrollbar-width: thin; }
.kanban-col { --stage: #5b87bd; border-top: 3px solid var(--stage); background: #edf2ef; padding: 14px 10px; min-height: 470px; }
.kanban-col[data-status="sequence_active"], .kanban-col[data-status="quote_sent"] { --stage: #9779bf; }
.kanban-col[data-status="reply_received"], .kanban-col[data-status="interested"] { --stage: #4aa9a6; }
.kanban-col[data-status="call_back"] { --stage: #d5a044; }
.kanban-col[data-status="won"] { --stage: #55a47b; }
.kanban-col[data-status="lost"], .kanban-col[data-status="bounce"], .kanban-col[data-status="do_not_contact"], .kanban-col[data-status="invalid_email"] { --stage: #cb7a8a; }
.kanban-col h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #5d7163; padding: 0 3px; margin-bottom: 17px; }
.kanban-label { display: flex; align-items: center; gap: 7px; }
.kanban-label::before { content: ""; width: 7px; height: 7px; background: var(--stage); border-radius: 50%; flex: 0 0 auto; }
.kanban-col .count-badge { background: #fff; }
.kanban-empty { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 80px; margin: 0 4px; border: 1px dashed #d3dfd6; border-radius: 6px; color: #788d7f; font-size: 11px; }
.kanban-empty[hidden] { display: none; }
.kanban-empty svg { width: 15px; height: 15px; }
.kanban-card { background: #fff; border: 1px solid #dce6de; border-radius: 7px; padding: 16px 14px; margin-bottom: 12px; display: grid; gap: 8px; cursor: grab; box-shadow: 0 2px 4px #294b3510; overflow-wrap: anywhere; }
.kanban-card:hover { border-color: var(--stage); }
.kanban-card.dragging { opacity: .5; }
.kanban-col.drag-over { background: #dfebe3; }
.kanban-card strong { font-size: 13px; }
.kanban-card > span, .kanban-card small { color: var(--muted); font-size: 11px; }
.kanban-card .text-link { padding-top: 8px; margin-top: 2px; border-top: 1px solid #edf1ee; }
.steps-builder { display: grid; gap: 12px; }
.step-line { display: grid; grid-template-columns: 100px minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 13px; background: #f7faf8; border-left: 3px solid #ae96d2; }
.step-line > span { color: #7958b6; font-size: 12px; font-weight: 650; }
.sequence { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.sequence .badge { justify-self: start; color: #7958b6; background: #f3eefa; }
.reply-box { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
.toast { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1px solid #d3e5d8; border-radius: 6px; background: #f2faf5; color: #247145; }
.toast.error { border-color: #efc9d2; background: #fff0f4; color: var(--danger); }
.auth-body { display: grid; place-items: center; min-height: 100vh; padding-block: 30px; background: #edf3ef; border-top: 5px solid var(--primary); }
.auth-shell { width: min(440px, calc(100vw - 32px)); display: grid; gap: 16px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 35px #17442a0b; padding: 32px; display: grid; gap: 22px; }
.login-card h1 { font-size: 23px; }
.auth-brand { color: #183d2d; margin: 0; font-size: 19px; font-weight: 750; }
.login-card .form-stack > .btn { width: 100%; margin-top: 6px; }
.menu-toggle, .sidebar-scrim { display: none; }
@media (min-width: 1450px) { .content { padding: 36px 42px; } .primary-metrics .metric { padding: 22px; } }
@media (max-width: 1200px) {
    .shell { grid-template-columns: 218px minmax(0, 1fr); }
    .sidebar { padding-inline: 10px; }
    .content { padding: 24px; gap: 20px; }
    .topbar { padding-inline: 24px; gap: 14px; }
    .location-label { display: none; }
    .search { width: min(340px, 50%); }
    .commercial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 0; }
    .compact-stat:nth-child(3) { border: 0; }
    .compact-stat:nth-child(4) { padding-left: 0; }
    .metric-grid { gap: 12px; }
    .metric { padding: 14px; }
    .metric-caption { font-size: 10px; }
}
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; width: 236px; inset: 0 auto 0 0; transform: translateX(-100%); visibility: hidden; transition: transform .2s; }
    .menu-toggle { display: inline-flex; }
    body.nav-open .sidebar { transform: translateX(0); visibility: visible; }
    body.nav-open .sidebar-scrim { display: block; position: fixed; inset: 0; border: 0; background: #172d2380; z-index: 25; }
    .topbar-location { gap: 4px; }
    .search { width: min(400px, 50%); }
    .grid.two { grid-template-columns: 1fr; }
    .dashboard-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-caption { font-size: 11px; }
}
@media (max-width: 680px) {
    .topbar { min-height: 64px; padding: 10px 16px; gap: 8px; }
    .location-icon, .user-name, .top-actions > a { display: none; }
    .search { width: auto; flex: 1; min-width: 0; }
    .search-results { min-width: 0; width: min(310px, calc(100vw - 90px)); }
    .top-actions { gap: 4px; }
    .user-pill { padding-left: 0; border: 0; }
    .avatar { width: 29px; height: 29px; font-size: 11px; }
    .content { padding: 20px 16px; gap: 18px; }
    h1 { font-size: 22px; }
    .page-head { align-items: start; flex-direction: column; gap: 14px; }
    .page-head h1 .page-symbol { width: 34px; height: 34px; }
    .page-head h1 .page-symbol svg { width: 20px; height: 20px; }
    .page-head .actions { flex-wrap: wrap; width: 100%; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric { padding: 13px; }
    .metric-top > span:first-child { font-size: 11px; }
    .metric-icon { width: 28px; height: 28px; }
    .metric > strong { font-size: 29px; }
    .metric-caption { min-height: 28px; font-size: 10px; }
    .panel, .workspace-section { padding: 18px 15px; }
    .section-heading h2 { font-size: 14px; }
    .section-heading { flex-wrap: wrap; }
    .commercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
    .compact-stat { padding: 0 13px; }
    .compact-stat:nth-child(3) { border-right: 1px solid var(--line); padding-left: 0; }
    .compact-stat:nth-child(4) { padding-left: 13px; }
    .compact-stat:nth-child(5) { padding-left: 0; }
    .compact-stat:nth-child(even) { border: 0; }
    .operations-grid { grid-template-columns: 1fr; }
    .operation { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 16px; }
    .operation > span:nth-child(2) { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .operation strong { margin: 0; font-size: 19px; }
    .dashboard-bottom, .form-grid, .mapping-grid, .field-grid, .rate-grid { grid-template-columns: 1fr; }
    .inline-form input, .filters input, .filters select { width: 100%; min-width: 0; flex-basis: 100%; }
    .bulkbar select { width: 100%; }
    .table-scroll table { min-width: 560px; }
    .timeline div { grid-template-columns: 1fr; gap: 4px; }
    .step-line { grid-template-columns: 1fr 90px; }
    .step-line > span { grid-column: 1 / -1; }
    .step-line input { width: 90px; }
    .login-card { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.pagination,.section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.pagination { font-size:13px; color:var(--muted); }
.health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.health-item { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-left:15px; border-left:3px solid #269e89; min-width:0; }
.health-item small { overflow-wrap:anywhere; }
.task-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.task-row.overdue { border-left:3px solid #d54761; padding-left:12px; }
.task-row details { width:100%; }
details { margin-top:12px; }
summary { cursor:pointer; color:#347a66; font-size:13px; font-weight:600; padding:8px 0; }
details .form-grid,details .form-stack { margin-top:12px; }
.inbox-layout { display:grid; grid-template-columns:minmax(260px,0.8fr) minmax(0,1.6fr); gap:20px; }
.inbox-list .list-row.selected { background:#eef8f4; border-left:3px solid #107856; }
.inbox-list .list-row.unread strong { color:#185cc7; }
.thread { max-height:600px; overflow-y:auto; }
.email-preview { width:100%; height:440px; border:1px solid var(--line); background:white; }
.email-text,.message { overflow-wrap:anywhere; }
.amount { display:block; font-size:24px; padding-top:8px; color:#107856; }
.bar-chart { display:flex; align-items:flex-end; gap:12px; min-height:210px; overflow-x:auto; padding:16px 0; }
.bar-column { flex:0 0 42px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; }
.bar-column>div { width:28px; background:#38a591; border-radius:3px 3px 0 0; }
.bulkbar { margin-bottom:15px; }
.bulkbar>input:not([type=checkbox]),.bulkbar>select { width:auto; max-width:220px; }
.btn:disabled,.icon-btn:disabled { opacity:.55; cursor:wait; }
.sidebar .nav { overflow-y:auto; min-height:0; }
.pipeline-status { font-size:12px; padding:6px; margin-top:8px; }
.step-line { grid-template-columns:75px minmax(0,1fr) 80px repeat(3,38px); gap:8px; }
@media(max-width:720px) {
    .health-grid,.inbox-layout { grid-template-columns:minmax(0,1fr); }
    .step-line { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .step-line>select { grid-column:1 / 3; }
    .step-line>input { width:100%; min-width:0; padding-inline:6px; }
    .step-line>.icon-btn { grid-row:3; }
    .bulkbar>input:not([type=checkbox]),.bulkbar>select { max-width:100%; width:100%; }
    .filters>.check { width:auto; }
    .filters input[type=checkbox] { width:16px; flex:0 0 16px; }
    .page-head { flex-wrap:wrap; }
}