:root {
  --ink: #17233b;
  --muted: #7b8598;
  --canvas: #f5f7fb;
  --surface: #ffffff;
  --line: #e9edf5;
  --nav: #0b1020;
  --nav-soft: #171f34;
  --brand: #6856e7;
  --brand-dark: #5140ca;
  --brand-pale: #f0eeff;
  --green: #19a779;
  --green-pale: #e7f8f1;
  --orange: #e78b2c;
  --orange-pale: #fff3e6;
  --red: #e35e6f;
  --red-pale: #ffedf0;
  --blue: #3c88e7;
  --shadow: 0 12px 32px rgba(27, 39, 70, .07);
  --font: "Manrope", Arial, sans-serif;
  --display: "Unbounded", "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font); font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(104, 86, 231, .25); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; display: flex; }
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.auth-gate-card { width: min(390px, 100%); padding: 30px; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.auth-gate-mark { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 17px; color: #fff; border-radius: 14px; background: var(--brand); font: 700 24px var(--display); }
.auth-gate h1 { margin: 0; font: 600 19px var(--display); letter-spacing: -.7px; }.auth-gate p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.auth-gate.error .auth-gate-mark { background: var(--red); }
.telegram-mini-app { min-height: var(--tg-viewport-stable-height, 100vh); padding-top: var(--tg-safe-area-inset-top, 0px); padding-bottom: var(--tg-safe-area-inset-bottom, 0px); }
.sidebar { width: 258px; background: var(--nav); color: #d9e0f2; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; padding: 30px 16px 18px; z-index: 15; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; color: #fff; font: 600 19px var(--display); letter-spacing: -1.5px; }
.brand > span:last-child span { color: #a89dff; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 22px; height: 25px; }
.brand-mark i { display: block; width: 5px; border-radius: 5px; background: #a89dff; transform-origin: bottom; animation: mark-rise 2.8s ease-in-out infinite alternate; }
.brand-mark i:nth-child(1) { height: 12px; animation-delay: -.8s; }.brand-mark i:nth-child(2) { height: 21px; background: #fff; animation-delay: -.25s; }.brand-mark i:nth-child(3) { height: 16px; animation-delay: -1.2s; }
@keyframes mark-rise { to { transform: scaleY(.7); } }
.navigation { display: grid; gap: 6px; margin-top: 55px; }
.nav-link { min-height: 45px; display: flex; align-items: center; gap: 13px; padding: 0 12px; border-radius: 10px; color: #9ca8c0; transition: color .2s, background .2s, transform .2s; font-weight: 600; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }.nav-link.active { color: #fff; background: var(--brand); box-shadow: 0 7px 20px rgba(104,86,231,.25); }.nav-link b { margin-left: auto; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.13); color: #fff; font-size: 11px; }.nav-link:not(.active) b:empty { display: none; }
.sidebar-bottom { margin-top: auto; }.help-card { margin: 20px 5px 19px; padding: 14px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); color: #fff; }.help-card > div:nth-child(2) { display: grid; gap: 1px; font-size: 10px; }.help-card strong { font-size: 11px; }.help-card span { color: #8290ab; }.help-icon { color: #a79cff; }.help-card .icon-button { margin-left: auto; color: #a79cff; }
.profile-card { border-top: 1px solid rgba(255,255,255,.09); padding: 17px 8px 2px; display: flex; gap: 10px; align-items: center; }.profile-card .profile-info { display: grid; gap: 1px; min-width: 0; }.profile-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12px; }.profile-card span { color: #8290ab; font-size: 10px; text-transform: capitalize; }.avatar { width: 33px; height: 33px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 50%; font-size: 10px; font-weight: 800; background: linear-gradient(140deg, #9e91f5, #6654d8); }.profile-card .avatar { background: linear-gradient(140deg, #a8d5d1, #3e8c89); }

.main-content { width: calc(100% - 258px); min-height: 100vh; margin-left: 258px; }.topbar { min-height: 102px; display: flex; align-items: center; padding: 23px 42px 18px; gap: 24px; background: rgba(245,247,251,.88); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(15px); }.breadcrumb { min-width: 0; }.breadcrumb > span, .section-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 800; }.breadcrumb h1 { margin: 4px 0 0; letter-spacing: -.55px; font-size: 21px; line-height: 1.2; }.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }.icon-button { width: 36px; height: 36px; padding: 0; border: 0; color: var(--muted); display: inline-grid; place-items: center; background: transparent; border-radius: 10px; transition: .2s; }.icon-button:hover { color: var(--brand); background: var(--brand-pale); }.notification-button { position: relative; }.notification-button i { width: 6px; height: 6px; position: absolute; top: 7px; right: 8px; border-radius: 50%; background: var(--red); border: 1px solid var(--canvas); }.demo-role { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 9px; color: var(--brand); border: 1px solid #dfdbff; border-radius: 9px; background: #f8f7ff; }.demo-role svg { width: 15px; }.demo-role select { padding: 0 2px; appearance: none; color: #4d3cb6; background: transparent; border: 0; outline: 0; font-size: 11px; font-weight: 800; cursor: pointer; }.primary-button, .secondary-button { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 9px; transition: transform .2s, box-shadow .2s, background .2s; font-size: 12px; font-weight: 800; }.primary-button { color: #fff; background: var(--brand); box-shadow: 0 7px 16px rgba(104,86,231,.21); }.primary-button:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(104,86,231,.28); }.primary-button span { font-size: 20px; line-height: 0; font-weight: 500; }.secondary-button { color: #525f76; border: 1px solid var(--line); background: #fff; }.secondary-button:hover { color: var(--brand); border-color: #d8d2ff; background: #faf9ff; }
.mobile-menu { display: none; }.offline-banner { margin: 0 42px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; color: #945c1d; background: #fff5e9; border-radius: 9px; font-size: 12px; font-weight: 700; }.offline-banner[hidden] { display: none; }.offline-banner svg { width: 17px; }.view-container { padding: 20px 42px 45px; max-width: 1710px; margin: auto; }

.view-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 3px 0 19px; }.view-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.4px; }.view-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.view-actions { display: flex; gap: 8px; align-items: center; }.soft-label { padding: 6px 9px; border-radius: 6px; color: #7568d5; background: var(--brand-pale); font-size: 10px; font-weight: 800; }.live-dot { display: inline-flex; align-items: center; gap: 6px; color: #6e788d; font-size: 11px; font-weight: 700; }.live-dot::before { width: 6px; height: 6px; display: block; content: ""; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-pale); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }.stat-card { min-height: 131px; padding: 19px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); animation: rise-in .45s both; }.stat-card:nth-child(2) { animation-delay: .05s }.stat-card:nth-child(3) { animation-delay: .1s }.stat-card:nth-child(4) { animation-delay: .15s }@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }.stat-card::after { width: 52px; height: 52px; position: absolute; right: -14px; bottom: -19px; content: ""; border-radius: 50%; opacity: .5; background: var(--brand-pale); }.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }.stat-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--brand); background: var(--brand-pale); }.stat-card.green .stat-icon { color: var(--green); background: var(--green-pale); }.stat-card.orange .stat-icon { color: var(--orange); background: var(--orange-pale); }.stat-value { margin-top: 13px; font-size: 24px; font-weight: 800; letter-spacing: -1px; }.stat-bottom { margin-top: 5px; color: var(--muted); font-size: 10px; }.change { color: var(--green); font-weight: 800; }.change.warn { color: var(--orange); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(320px, .85fr); gap: 15px; margin-top: 15px; }.card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }.card-head { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 19px; border-bottom: 1px solid var(--line); }.card-head h3 { margin: 0; font-size: 13px; letter-spacing: -.15px; }.card-head a, .text-button { padding: 0; color: var(--brand); border: 0; background: none; font-size: 11px; font-weight: 800; }.funnel-card { padding-bottom: 15px; }.funnel-list { padding: 15px 19px 1px; }.funnel-row { display: grid; grid-template-columns: 160px 1fr 32px; align-items: center; gap: 10px; margin: 11px 0; font-size: 11px; font-weight: 700; }.funnel-row > span:first-child { color: #56637b; }.funnel-track { height: 7px; overflow: hidden; border-radius: 50px; background: #eef1f7; }.funnel-value { height: 100%; min-width: 5px; border-radius: inherit; background: linear-gradient(90deg, #8b7df2, #6856e7); animation: fill-width .8s cubic-bezier(.23,1,.32,1) both; transform-origin: left; }@keyframes fill-width { from { transform: scaleX(0); } }.funnel-row:nth-child(2) .funnel-value { background: linear-gradient(90deg, #54a5ee, #3989e3); }.funnel-row:nth-child(3) .funnel-value { background: linear-gradient(90deg, #58caa2, #19a779); }.funnel-row:nth-child(4) .funnel-value { background: linear-gradient(90deg, #f5af61, #e78b2c); }.funnel-row:nth-child(5) .funnel-value { background: linear-gradient(90deg, #e995ac, #e35e6f); }.funnel-row strong { text-align: right; font-size: 11px; }.insight-card { min-height: 238px; padding: 21px; position: relative; overflow: hidden; color: #fff; border: 0; background: radial-gradient(circle at 88% 18%, #8576f2 0, transparent 34%), linear-gradient(145deg,#191e40,#30296d); }.insight-card::before, .insight-card::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }.insight-card::before { width: 230px; height: 230px; top: -130px; right: -87px; }.insight-card::after { width: 150px; height: 150px; bottom: -115px; left: -25px; }.insight-card > * { position: relative; z-index: 1; }.insight-card .section-kicker { color: #aea8e8; }.insight-card h3 { max-width: 260px; margin: 11px 0 8px; font: 600 17px/1.4 var(--display); letter-spacing: -1px; }.insight-card p { max-width: 290px; margin: 0; color: #c9c7e8; font-size: 11px; }.insight-bottom { margin-top: 24px; display: flex; align-items: end; gap: 18px; }.insight-number { font-size: 27px; font-weight: 800; letter-spacing: -1px; }.insight-bottom span { color: #b9b5de; font-size: 10px; }.urgent-card { margin-top: 15px; }.lead-mini-list { padding: 0 19px 7px; }.lead-mini { min-height: 60px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eff2f6; cursor: pointer; transition: background .2s; }.lead-mini:last-child { border: 0; }.lead-mini:hover { margin: 0 -7px; padding: 0 7px; border-radius: 8px; background: #fafaff; }.lead-mini .lead-name { display: grid; gap: 1px; min-width: 0; }.lead-mini .lead-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.lead-mini .lead-name span { color: var(--muted); font-size: 10px; }.mini-status { margin-left: auto; padding: 4px 7px; border-radius: 5px; white-space: nowrap; font-size: 9px; font-weight: 800; }

.table-card { overflow: hidden; }.toolbar { display: flex; gap: 8px; align-items: center; }.search-field { min-width: 210px; height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.search-field svg { width: 15px; color: #9fa8b9; }.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 11px; }.select-control { height: 35px; padding: 0 25px 0 10px; color: #59667e; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 11px; outline: 0; }.leads-table { width: 100%; border-collapse: collapse; text-align: left; }.leads-table th { height: 42px; padding: 0 18px; color: #9aa3b4; background: #fbfcfe; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 800; }.leads-table td { padding: 13px 18px; border-bottom: 1px solid #eff1f6; font-size: 11px; }.leads-table tr { transition: background .18s; cursor: pointer; }.leads-table tbody tr:hover { background: #fafaff; }.leads-table tr:last-child td { border-bottom: 0; }.lead-person { display: flex; align-items: center; gap: 9px; }.lead-person .avatar { width: 29px; height: 29px; font-size: 9px; background: #e1ddff; color: #6856e7; }.lead-person strong { display: block; font-size: 11px; }.lead-person span { display: block; margin-top: 2px; color: #8c96a8; font-size: 9px; }.assigned { display: inline-flex; align-items: center; gap: 5px; color: #657087; }.assigned .avatar { width: 20px; height: 20px; font-size: 7px; }.empty-table { text-align: center; padding: 45px !important; color: var(--muted); }
.stage { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; white-space: nowrap; font-size: 9px; font-weight: 800; }.stage::before { width: 5px; height: 5px; content: ""; border-radius: 50%; background: currentColor; }.stage-new, .stage-contacted { color: #64748b; background: #f0f3f7; }.stage-documents { color: #8b6bcb; background: #f1edff; }.stage-processing { color: #397fd2; background: #e9f3ff; }.stage-bank { color: #148d68; background: #e6f8f1; }.stage-action-required { color: #c77920; background: #fff1e0; }.stage-won { color: #108c66; background: #e4f7ee; }.stage-lost { color: #d25969; background: #ffedf0; }.status-pill { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 5px; color: #526079; background: #f0f3f7; font-size: 9px; font-weight: 800; }.status-pill.high { color: #d76748; background: #ffede6; }.status-pill.done { color: #148d68; background: #e6f8f1; }

.pipeline-scroll { overflow-x: auto; padding-bottom: 3px; }.pipeline-board { min-width: 1000px; display: grid; grid-template-columns: repeat(5, minmax(182px,1fr)); gap: 12px; }.pipeline-column { min-height: 350px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f9fafe; }.pipeline-head { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; padding: 2px 2px 8px; color: #46536a; font-size: 11px; font-weight: 800; }.pipeline-head .stage { padding: 0; background: transparent; }.pipeline-head b { margin-left: auto; color: #939db0; font-size: 10px; }.pipeline-lead { margin-bottom: 8px; padding: 12px; border: 1px solid #ecedf4; border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgba(25, 42, 70, .03); cursor: pointer; transition: transform .2s, box-shadow .2s; }.pipeline-lead:hover { transform: translateY(-2px); box-shadow: 0 10px 16px rgba(25,42,70,.09); }.pipeline-lead h4 { margin: 0; font-size: 11px; }.pipeline-lead p { margin: 4px 0 10px; color: #8791a5; font-size: 9px; }.pipeline-foot { display: flex; align-items: center; justify-content: space-between; color: #7b879b; font-size: 9px; }.pipeline-foot .avatar { width: 19px; height: 19px; font-size: 6px; }.pipeline-empty { padding: 18px 4px; color: #a3acbb; text-align: center; font-size: 10px; }

.tasks-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 15px; }.task-list { padding: 4px 18px 15px; }.task-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 120px 110px; align-items: center; gap: 10px; min-height: 67px; border-bottom: 1px solid #eef1f5; }.task-row:last-child { border: 0; }.task-check { width: 18px; height: 18px; appearance: none; border: 1.5px solid #cbd3df; border-radius: 6px; background: #fff; transition: .2s; }.task-check:checked { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 4px #fff; }.task-name { min-width: 0; }.task-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.task-name span { display: block; margin-top: 2px; color: #8993a5; font-size: 9px; }.due { color: #778297; font-size: 10px; font-weight: 700; }.due.overdue { color: var(--red); }.task-side { padding: 17px; }.task-side h3 { margin: 0; font-size: 12px; }.task-progress { margin: 20px 0; }.circle-progress { width: 106px; height: 106px; margin: 0 auto 12px; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--brand) var(--progress), #efeffa 0); }.circle-progress::before { width: 82px; height: 82px; content: ""; position: absolute; border-radius: inherit; background: #fff; }.circle-progress strong, .circle-progress span { position: relative; z-index: 1; }.circle-progress strong { font-size: 19px; letter-spacing: -.8px; }.circle-progress span { margin-top: 31px; margin-left: -35px; color: #8b94a6; font-size: 9px; }.task-progress p { margin: 0; color: #8993a5; text-align: center; font-size: 10px; }.priority-list { display: grid; gap: 8px; margin-top: 14px; }.priority-key { display: flex; align-items: center; justify-content: space-between; color: #657087; font-size: 10px; }.priority-key i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--red); }.priority-key:nth-child(2) i { background: var(--orange); }.priority-key:nth-child(3) i { background: var(--blue); }

.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 15px; }.chart-card { padding-bottom: 17px; }.chart-area { height: 260px; padding: 19px 19px 0; position: relative; }.chart-lines { height: 205px; display: grid; grid-template-rows: repeat(5, 1fr); border-left: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }.chart-lines i { border-top: 1px dashed #edf0f5; }.line-chart { position: absolute; inset: 19px 19px 36px 19px; width: calc(100% - 38px); height: calc(100% - 55px); overflow: visible; }.chart-labels { display: flex; justify-content: space-around; padding-left: 24px; color: #9099aa; font-size: 9px; }.legend { display: flex; gap: 13px; padding: 0 19px; color: #7f899c; font-size: 10px; }.legend i { width: 8px; height: 8px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--brand); }.legend i.alt { background: #60c5a4; }.bank-list { padding: 9px 19px; }.bank-row { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; min-height: 51px; border-bottom: 1px solid #eef1f5; }.bank-row:last-child { border-bottom: 0; }.bank-logo { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; border-radius: 7px; background: #ee3948; font-size: 9px; font-weight: 800; }.bank-logo.tink { color: #3e3212; background: #fedc2c; }.bank-logo.sber { background: #23ac74; }.bank-row strong { display: block; font-size: 10px; }.bank-row span { color: #8b95a7; font-size: 9px; }.bank-row b { color: #4d596e; font-size: 11px; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px,.75fr); gap: 15px; }.integration-list, .rule-list { padding: 5px 19px 12px; }.integration-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf0f5; }.integration-row:last-child { border-bottom: 0; }.integration-icon { width: 37px; height: 37px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg,#3fc5f1,#3087d8); }.integration-icon.rko { color: #fff; background: linear-gradient(145deg,#8a7bf3,#5545c6); }.integration-row strong { display: block; font-size: 11px; }.integration-row span { display: block; margin-top: 2px; color: #8490a4; font-size: 9px; }.integration-row .status-text { color: var(--green); font-weight: 700; }.integration-row .status-text.muted { color: var(--orange); }.switch { width: 34px; height: 20px; padding: 2px; border: 0; border-radius: 20px; background: #dce1eb; transition: .2s; }.switch i { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .2s; }.switch.on { background: var(--brand); }.switch.on i { transform: translateX(14px); }.rule-row { padding: 14px 0; border-bottom: 1px solid #edf0f5; }.rule-row:last-child { border-bottom: 0; }.rule-row-top { display: flex; align-items: center; gap: 10px; }.rule-row strong { font-size: 11px; }.rule-row p { margin: 5px 0 0 44px; color: #8792a6; font-size: 9px; }.rule-badge { width: 31px; height: 31px; display: grid; place-items: center; color: var(--orange); border-radius: 8px; background: var(--orange-pale); }.rule-row .switch { margin-left: auto; }.security-list { padding: 11px 19px; }.security-item { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: #627087; border-bottom: 1px solid #edf0f5; font-size: 10px; }.security-item:last-child { border: 0; }.security-item svg { color: var(--green); width: 16px; }

.team-list { padding: 5px 19px 12px; }.team-row { display: grid; grid-template-columns: 29px minmax(0,1fr) auto minmax(92px,.55fr) 27px; align-items: center; gap: 8px; min-height: 59px; border-bottom: 1px solid #edf0f5; }.team-row:last-child { border-bottom: 0; }.team-row .avatar { width: 28px; height: 28px; color: #6856e7; background: #e9e6ff; font-size: 8px; }.team-person { min-width: 0; }.team-person strong, .team-person span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.team-person strong { font-size: 10px; }.team-person span { margin-top: 2px; color: #8893a6; font-size: 8px; }.team-role { max-width: 76px; padding: 5px 2px; color: #6555c8; border: 0; border-radius: 5px; background: #f2f0ff; outline: 0; font-size: 9px; font-weight: 800; }.telegram-field { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px 6px; color: #449ed5; border: 1px solid #e4e8f0; border-radius: 6px; }.telegram-field svg { flex: 0 0 auto; width: 13px; }.telegram-field input { min-width: 0; width: 100%; padding: 0; color: #607088; border: 0; outline: 0; background: transparent; font-size: 9px; }.save-member { width: 27px; height: 27px; color: var(--green); background: var(--green-pale); }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(11,16,32,.48); opacity: 0; animation: fade-in .2s forwards; }.modal { width: min(560px, calc(100% - 28px)); max-height: calc(100vh - 40px); overflow-y: auto; position: fixed; z-index: 31; top: 50%; left: 50%; padding: 27px; border-radius: 16px; background: #fff; box-shadow: 0 25px 65px rgba(12,18,38,.28); animation: modal-in .25s forwards; }.modal[hidden], .modal-backdrop[hidden], .lead-drawer[hidden] { display: none; }@keyframes fade-in { to { opacity: 1; } }@keyframes modal-in { from { opacity: 0; transform: translate(-50%,-46%) scale(.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }.close-button { width: 28px; height: 28px; position: absolute; top: 16px; right: 17px; color: #8791a4; border: 0; border-radius: 7px; background: #f4f5f8; font-size: 20px; line-height: 1; }.modal-heading h2 { margin: 4px 0; letter-spacing: -.5px; font-size: 20px; }.modal-heading p { max-width: 390px; margin: 0; color: var(--muted); font-size: 11px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 22px; }.form-grid label, .drawer-form label { display: grid; gap: 5px; color: #5e6a80; font-size: 10px; font-weight: 800; }.form-grid input, .form-grid select, .form-grid textarea, .drawer-form input, .drawer-form select, .drawer-form textarea { width: 100%; padding: 9px 10px; color: var(--ink); outline: 0; border: 1px solid #e1e5ed; border-radius: 7px; background: #fff; font-size: 11px; transition: border .2s, box-shadow .2s; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .drawer-form input:focus, .drawer-form select:focus, .drawer-form textarea:focus { border-color: #a79df2; box-shadow: 0 0 0 3px #f0eeff; }.form-grid textarea, .drawer-form textarea { resize: vertical; }.full-field { grid-column: 1 / -1; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.lead-drawer { width: min(480px, 100%); height: 100%; position: fixed; z-index: 31; inset: 0 0 0 auto; overflow-y: auto; background: #fff; box-shadow: -18px 0 48px rgba(20,30,53,.14); animation: drawer-in .3s cubic-bezier(.2,.8,.25,1); }.lead-drawer::before { position: fixed; z-index: -1; inset: 0 480px 0 0; content: ""; background: rgba(11,16,32,.35); }@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }.drawer-head { padding: 23px 24px 19px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(130deg,#161e3a,#41358a); }.drawer-head::after { width: 160px; height: 160px; position: absolute; top: -95px; right: -27px; content: ""; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }.drawer-head > * { position: relative; z-index: 1; }.drawer-head .close-button { color: #fff; background: rgba(255,255,255,.13); }.drawer-label { color: #bcb7eb; font-size: 10px; font-weight: 800; }.drawer-person { display: flex; align-items: center; gap: 11px; margin-top: 14px; }.drawer-person .avatar { width: 42px; height: 42px; font-size: 12px; background: rgba(255,255,255,.18); }.drawer-person h2 { margin: 0; font-size: 18px; letter-spacing: -.5px; }.drawer-person p { margin: 2px 0 0; color: #cac7ed; font-size: 10px; }.drawer-body { padding: 19px 24px 35px; }.lead-stage-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -3px; padding: 11px; border: 1px solid #e8e5fc; border-radius: 9px; background: #faf9ff; }.lead-stage-panel span { color: #737e94; font-size: 10px; font-weight: 700; }.lead-stage-panel select { padding: 5px; color: #5d4ac9; border: 0; outline: 0; border-radius: 5px; background: #f0eeff; font-size: 10px; font-weight: 800; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 18px 0; border-bottom: 1px solid #eef0f5; }.detail-grid div { min-width: 0; }.detail-grid span { display: block; color: #929bad; text-transform: uppercase; letter-spacing: .05em; font-size: 8px; font-weight: 800; }.detail-grid strong, .detail-grid a { display: block; overflow: hidden; margin-top: 3px; color: #455166; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.detail-grid a { color: var(--brand); }.drawer-section { padding-top: 19px; }.drawer-section h3 { margin: 0 0 11px; font-size: 12px; }.timeline { position: relative; padding-left: 17px; }.timeline::before { width: 1px; position: absolute; top: 4px; bottom: 5px; left: 4px; content: ""; background: #e5e9f1; }.timeline-item { position: relative; padding-bottom: 13px; }.timeline-item::before { width: 9px; height: 9px; position: absolute; top: 3px; left: -17px; content: ""; border: 2px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px #dcd7fb; }.timeline-item:nth-child(2n)::before { background: var(--green); box-shadow: 0 0 0 1px #c9f0e0; }.timeline-item p { margin: 0; color: #4d5970; font-size: 10px; }.timeline-item span { display: block; margin-top: 3px; color: #9aa3b3; font-size: 9px; }.drawer-form { display: grid; gap: 10px; }.drawer-actions { display: flex; gap: 8px; margin-top: 5px; }.tracking-link { display: flex; align-items: center; gap: 7px; padding: 10px; color: #5e4acb; border: 1px solid #dfdbfa; border-radius: 8px; background: #f8f7ff; font-size: 10px; font-weight: 800; }.tracking-link svg { width: 14px; }
.form-help { margin: -2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.chat-link { display: inline-flex; align-items: center; justify-content: center; }.application-list { display: grid; gap: 7px; }.application-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #e9edf5; border-radius: 8px; background: #fafbfe; }.application-row strong, .application-row span { display: block; }.application-row strong { color: #455166; font-size: 10px; }.application-row span { margin-top: 2px; color: var(--muted); font-size: 9px; }.application-actions { display: flex; align-items: center; gap: 7px; }.application-row a { color: var(--brand); }.application-row svg { width: 15px; }.application-action { padding: 5px 7px; color: #5e4acb; border: 1px solid #dfdbfa; border-radius: 6px; background: #f8f7ff; font-size: 9px; font-weight: 800; white-space: nowrap; }.application-action:hover { background: #f0eeff; }.automation-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding: 10px; color: #795814; border: 1px solid #f2dfb3; border-radius: 8px; background: #fff9ea; font-size: 10px; }.automation-note svg { flex: 0 0 auto; width: 15px; }.automation-note.sent { color: #28785e; border-color: #c5ecde; background: #edf9f4; }.toast-stack { display: grid; gap: 8px; position: fixed; z-index: 50; right: 20px; bottom: 20px; width: min(340px,calc(100% - 40px)); }.toast { display: flex; align-items: center; gap: 9px; padding: 12px; color: #415168; border: 1px solid #e4e8f0; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(17,32,58,.15); font-size: 11px; font-weight: 700; animation: toast-in .25s both; }.toast.success svg { color: var(--green); }.toast.error svg { color: var(--red); }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }.empty-state { padding: 55px 15px; color: var(--muted); text-align: center; }.empty-orbit { width: 50px; height: 50px; display: grid; place-items: center; margin: auto; color: var(--brand); border: 1px solid #dfdbff; border-radius: 50%; background: var(--brand-pale); box-shadow: 0 0 0 8px #faf9ff; }.empty-state h3 { margin: 17px 0 4px; color: #4c586d; font-size: 13px; }.empty-state p { margin: 0; font-size: 11px; }
.chat-workspace { min-height: 570px; display: grid; grid-template-columns: minmax(255px, .8fr) minmax(0, 1.7fr); overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }.chat-sidebar { min-width: 0; border-right: 1px solid var(--line); background: #fbfcff; }.chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; min-height: 61px; padding: 0 18px; border-bottom: 1px solid var(--line); }.chat-sidebar-head strong { font-size: 12px; }.chat-sidebar-head span { min-width: 21px; padding: 2px 6px; color: #6250ce; border-radius: 12px; background: var(--brand-pale); text-align: center; font-size: 9px; font-weight: 800; }.chat-list { display: grid; }.chat-list-item { width: 100%; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 12px 14px; color: var(--ink); border: 0; border-bottom: 1px solid #edf0f5; background: transparent; text-align: left; }.chat-list-item:hover, .chat-list-item.active { background: #f1efff; }.chat-list-item.active { box-shadow: inset 3px 0 0 var(--brand); }.chat-list-item .avatar { width: 30px; height: 30px; color: #5e4acb; background: #e8e5ff; font-size: 9px; }.chat-list-copy { min-width: 0; }.chat-list-copy strong, .chat-list-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chat-list-copy strong { font-size: 10px; }.chat-list-copy span { margin-top: 2px; color: var(--muted); font-size: 8px; }.chat-list-item time { align-self: start; color: #9aa3b3; font-size: 8px; }.chat-list-item i { width: 6px; height: 6px; grid-column: 3; margin-left: auto; border-radius: 50%; background: var(--green); }.chat-panel { min-width: 0; display: flex; flex-direction: column; }.chat-panel-head { min-height: 61px; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); }.chat-panel-head .avatar { width: 34px; height: 34px; color: #fff; background: var(--brand); font-size: 10px; }.chat-panel-head h3 { margin: 0; font-size: 12px; }.chat-panel-head p { max-width: 270px; overflow: hidden; margin: 2px 0 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }.chat-panel-actions { margin-left: auto; }.chat-panel-actions .primary-button, .chat-panel-actions .secondary-button { min-height: 31px; padding: 0 9px; font-size: 9px; }.chat-history { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 20px; background: linear-gradient(135deg,#fafbff,#f6f4ff); }.chat-message { max-width: min(78%, 480px); padding: 9px 11px; border-radius: 10px 10px 10px 3px; background: #fff; box-shadow: 0 2px 7px rgba(30,45,80,.06); }.chat-message.outgoing { align-self: flex-end; color: #fff; border-radius: 10px 10px 3px 10px; background: var(--brand); }.chat-message p { margin: 0; font-size: 10px; line-height: 1.5; }.chat-message span { display: block; margin-top: 4px; color: #95a0b4; font-size: 8px; }.chat-message.outgoing span { color: #d9d4ff; }.chat-empty, .chat-loading { display: grid; place-content: center; min-height: 190px; padding: 25px; color: var(--muted); text-align: center; font-size: 10px; }.chat-empty h3 { margin: 17px 0 4px; color: #4c586d; font-size: 13px; }.chat-empty p { margin: 0; }.chat-sidebar .chat-empty { min-height: 160px; }

@media (max-width: 1120px) { .sidebar { width: 220px; }.main-content { width: calc(100% - 220px); margin-left: 220px; }.topbar, .view-container { padding-left: 27px; padding-right: 27px; }.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid, .analytics-grid { grid-template-columns: 1fr; }.tasks-layout { grid-template-columns: 1fr; }.task-side { display: none; } }
@media (max-width: 780px) { .sidebar { width: 250px; transform: translateX(-100%); transition: transform .25s; box-shadow: 20px 0 45px rgba(4,8,18,.3); }.sidebar.open { transform: none; }.main-content { width: 100%; margin-left: 0; }.topbar { min-height: 79px; padding: 15px 17px; gap: 12px; }.mobile-menu { width: 31px; height: 31px; padding: 7px; display: grid; align-content: center; gap: 4px; border: 0; border-radius: 7px; background: #eeeefe; }.mobile-menu span { height: 2px; display: block; background: var(--brand); border-radius: 3px; }.breadcrumb > span { display: none; }.breadcrumb h1 { font-size: 15px; }.notification-button, .demo-role { display: none; }.topbar-actions { min-width: 0; gap: 4px; }.primary-button { min-height: 35px; padding: 0 10px; font-size: 10px; }.view-container { padding: 15px; }.offline-banner { margin: 0 15px; }.view-header { align-items: start; flex-direction: column; }.view-actions { width: 100%; }.view-actions .toolbar { width: 100%; }.search-field { min-width: 0; flex: 1; }.stat-grid { gap: 9px; }.stat-card { min-width: 0; min-height: 112px; padding: 13px; }.stat-value { margin-top: 9px; font-size: 20px; }.dashboard-grid { gap: 10px; margin-top: 10px; }.funnel-row { grid-template-columns: 118px 1fr 23px; font-size: 9px; }.card-head { min-height: 53px; padding: 0 13px; }.leads-table th:nth-child(3), .leads-table td:nth-child(3), .leads-table th:nth-child(4), .leads-table td:nth-child(4) { display: none; }.leads-table th, .leads-table td { padding-left: 11px; padding-right: 11px; }.task-row { grid-template-columns: 22px minmax(0,1fr) 70px; }.task-row .assigned { display: none; }.form-grid { grid-template-columns: 1fr; }.full-field { grid-column: auto; }.modal { padding: 22px; }.lead-drawer::before { display: none; }.drawer-head { padding: 20px; }.drawer-body { padding: 17px 20px 28px; } }

.confirm-backdrop { position: fixed; z-index: 45; inset: 0; background: rgba(11, 16, 32, .42); backdrop-filter: blur(3px); animation: overlay-in .18s both; }
.confirm-modal { width: min(420px, calc(100% - 32px)); position: fixed; z-index: 46; top: 50%; left: 50%; padding: 25px; border: 1px solid #e7e4fb; border-radius: 18px; background: #fff; box-shadow: 0 26px 70px rgba(14, 20, 43, .25); transform: translate(-50%, -50%); animation: modal-pop .24s cubic-bezier(.2, .8, .2, 1) both; }
.confirm-modal h2 { margin: 5px 0 8px; color: #354158; font-size: 19px; letter-spacing: -.5px; }.confirm-modal p { margin: 0; color: #69758a; font-size: 11px; line-height: 1.6; }.confirm-actions { display: flex; justify-content: end; gap: 9px; margin-top: 22px; }.danger-button { min-height: 36px; padding: 0 13px; color: #b63d51; border: 1px solid #f1c7d0; border-radius: 8px; background: #fff4f6; font-size: 10px; font-weight: 800; transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }.danger-button:hover { color: #fff; border-color: #d84e64; background: #d84e64; box-shadow: 0 8px 18px rgba(216, 78, 100, .24); transform: translateY(-1px); }.danger-button:disabled { cursor: wait; opacity: .62; transform: none; }
.view-container > * { animation: view-enter .34s cubic-bezier(.2, .8, .2, 1) both; }.stat-card, .status-overview-card, .workflow-card { animation: card-enter .42s cubic-bezier(.2, .8, .2, 1) both; }.stat-card:nth-child(2), .status-overview-card:nth-child(2) { animation-delay: .04s; }.stat-card:nth-child(3), .status-overview-card:nth-child(3) { animation-delay: .08s; }.stat-card:nth-child(4), .status-overview-card:nth-child(4) { animation-delay: .12s; }.stat-card:nth-child(5) { animation-delay: .16s; }.workflow-card:nth-child(2) { animation-delay: .08s; }.workflow-lead { transition: background .2s, padding-left .2s; }.workflow-lead:hover { padding-left: 17px; }.card { transition: border-color .2s, box-shadow .2s; }.card:hover { border-color: #e1ddfb; box-shadow: 0 15px 38px rgba(31, 40, 77, .09); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes view-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 780px) { .confirm-modal { padding: 21px; border-radius: 15px; }.confirm-actions { flex-direction: column-reverse; }.confirm-actions > * { width: 100%; } }

.auth-gate[hidden] { display: none; }