:root {
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#17233b;
    background:#f5f7fb
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
button,input,select,textarea {
    font:inherit
}
button {
    cursor:pointer
}
.layout {
    display:flex;
    min-height:100vh
}
.sidebar {
    width:240px;
    background:#111e35;
    color:#e9eef9;
    padding:25px 15px;
    flex-shrink:0
}
.brand {
    font-size:23px;
    font-weight:800;
    letter-spacing:-.8px;
    padding:0 13px 32px
}
.brand span {
    color:#70a8ff
}
.nav {
    display:block;
    width:100%;
    padding:13px 15px;
    text-align:left;
    border:0;
    border-radius:10px;
    background:none;
    color:#b7c5de;
    margin:4px 0
}
.nav.active,.nav:hover {
    background:#263b60;
    color:#fff
}
.sidefoot {
    font-size:12px;
    color:#9eb0d0;
    margin:35px 13px
}
.main {
    flex:1;
    min-width:0
}
.topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 34px;
    background:white;
    border-bottom:1px solid #e7ebf2
}
.topbar h1 {
    margin:0;
    font-size:24px
}
.sub {
    color:#8490a6;
    font-size:13px;
    margin-top:5px
}
.content {
    padding:27px 34px;
    max-width:1500px
}
.topactions,.actions {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap
}
.btn {
    border:1px solid #dfe5ef;
    background:white;
    color:#243550;
    border-radius:9px;
    padding:10px 14px;
    font-weight:600;
    font-size:13px
}
.btn.primary {
    background:#3269e9;
    color:white;
    border-color:#3269e9
}
.btn.danger {
    color:#c53b48;
    border-color:#f0cbd0
}
.btn:hover {
    filter:brightness(.96)
}
.cards {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:23px
}
.card,.panel {
    background:white;
    border:1px solid #e7ebf2;
    border-radius:13px;
    box-shadow:0 4px 15px #1e325008
}
.card {
    padding:19px
}
.card .label {
    color:#8995aa;
    font-size:13px
}
.card .value {
    font-size:29px;
    font-weight:750;
    margin-top:8px
}
.panel {
    overflow:hidden
}
.panelhead {
    padding:20px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}
.panelhead h2 {
    font-size:17px;
    margin:0
}
.search {
    padding:10px 12px;
    border:1px solid #e0e6ef;
    border-radius:9px;
    min-width:230px;
    max-width:100%;
    background:#fff
}
select.search {
    min-width:145px
}
.tablewrap {
    overflow:auto
}
table {
    border-collapse:collapse;
    width:100%;
    font-size:13px
}
th {
    color:#8490a6;
    font-weight:600;
    background:#f9fafe;
    text-align:left
}
th,td {
    padding:15px 18px;
    border-top:1px solid #edf0f5;
    white-space:nowrap
}
tr:hover td {
    background:#fafbff
}
.name {
    font-weight:700
}
.muted {
    color:#8793a7
}
.pill {
    display:inline-block;
    border-radius:20px;
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
    background:#e9eef9;
    color:#46638b
}
.pill.green {
    background:#e0f6e9;
    color:#258650
}
.pill.orange {
    background:#fff0da;
    color:#aa721e
}
.pill.red {
    background:#fde8e8;
    color:#b7454a
}
.pill.blue {
    background:#e7efff;
    color:#3c67c2
}
.linkbtn {
    border:0;
    background:none;
    color:#3269e9;
    font-weight:700;
    padding:5px
}
.empty {
    padding:45px;
    text-align:center;
    color:#8793a7
}
.overlay {
    position:fixed;
    inset:0;
    background:#101b30a8;
    display:flex;
    justify-content:flex-end;
    z-index:10
}
.drawer {
    width:min(530px,100%);
    background:#fff;
    height:100%;
    overflow:auto;
    padding:25px 28px;
    box-shadow:-10px 0 35px #0d172030
}
.drawerhead {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px
}
.drawerhead h2 {
    margin:0;
    font-size:22px
}
.close {
    border:0;
    background:#f0f3f8;
    border-radius:8px;
    font-size:20px;
    padding:6px 12px
}
.field {
    margin:15px 0
}
.field label {
    display:block;
    font-size:13px;
    font-weight:650;
    margin-bottom:7px
}
.field input,.field select,.field textarea {
    width:100%;
    padding:11px 12px;
    border:1px solid #dfe5ef;
    border-radius:9px;
    background:white
}
.field textarea {
    min-height:85px;
    resize:vertical
}
.draweractions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px
}
.comment {
    background:#f5f7fb;
    padding:13px;
    border-radius:10px;
    margin:10px 0;
    font-size:13px
}
.comment small {
    display:block;
    color:#8793a7;
    margin-top:8px
}
.notice {
    padding:12px 15px;
    background:#edf4ff;
    color:#3b6199;
    border-radius:9px;
    font-size:13px;
    margin-bottom:20px
}
.login {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px
}
.loginbox {
    width:min(430px,100%);
    background:#fff;
    border:1px solid #e5eaf2;
    border-radius:16px;
    padding:35px;
    box-shadow:0 14px 45px #24345318
}
.loginbox h1 {
    margin:0 0 10px
}
.loginbox .btn {
    width:100%;
    margin-top:15px
}
.error {
    color:#b7454a;
    font-size:13px
}
.hint {
    font-size:12px;
    color:#8995aa;
    margin-top:17px;
    line-height:1.6
}
.statuslist {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 20px 20px
}
.statuschip {
    padding:9px 12px;
    background:#f1f4fa;
    border-radius:9px;
    font-size:13px
}
.statuschip button {
    border:0;
    background:none;
    color:#bd4b54;
    margin-left:8px
}
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
@media(max-width:850px) {
    .sidebar {
    width:72px;
    padding:18px 7px
}
.brand {
    font-size:0;
    padding:0 5px 25px
}
.brand:after {
    content:'O';
    font-size:26px
}
.nav {
    font-size:0;
    text-align:center
}
.nav:before {
    content:'●';
    font-size:16px
}
.sidefoot {
    display:none
}
.content {
    padding:17px
}
.topbar {
    padding:20px
}
.cards {
    grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:480px) {
    .sidebar {
    width:55px
}
.cards {
    gap:8px
}
.card {
    padding:12px
}
.card .value {
    font-size:23px
}
.topbar h1 {
    font-size:20px
}
.split {
    grid-template-columns:1fr
}
.panelhead {
    align-items:stretch
}
.search {
    width:100%
}
}

/* Быстрое и массовое назначение лидов */
.bulkbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 20px; background:#edf4ff; border-top:1px solid #dce6f5; border-bottom:1px solid #dce6f5; }
.bulkbar strong { font-size:14px; color:#233755; margin-right:auto; }
.bulkbar select, .inline-manager { border:1px solid #d9e1ee; border-radius:8px; background:#fff; color:#17243d; padding:9px 10px; font:inherit; max-width:230px; }
.inline-manager { width:100%; min-width:145px; }
.checkcol { width:45px; text-align:center; }
.checkcol input { width:17px; height:17px; cursor:pointer; accent-color:#3165e8; }
.selected-row { background:#f0f6ff; }
.bulkbar .btn:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:700px) { .bulkbar { align-items:stretch; } .bulkbar strong { width:100%; } .bulkbar select { max-width:none; flex:1; } }

/* Language switch and quick status editing */
.language-picker { border:1px solid #d9e1ee; background:#fff; border-radius:9px; padding:9px 11px; font:inherit; color:#17243d; cursor:pointer; }
.loginbox .language-picker { float:right; margin-top:-40px; margin-bottom:12px; }
.inline-status { min-width:125px; max-width:180px; width:100%; border:1px solid #d9e1ee; border-radius:8px; background:#f7f9fd; color:#17243d; padding:8px 9px; font:inherit; cursor:pointer; }
@media(max-width:700px) { .topactions { flex-wrap:wrap; } .inline-status { min-width:110px; } }

/* Polished, accessible three-language segmented switch */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: #eef3fb;
  border: 1px solid #dbe4f2;
  border-radius: 12px;
  flex-shrink: 0;
}
.language-option {
  min-width: 42px;
  height: 33px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #687b9c;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .4px;
  transition: background .16s, color .16s, box-shadow .16s;
}
.language-option:hover:not(.is-active) { color: #204ca6; background: #e2ebfb; }
.language-option.is-active {
  color: #2458d6;
  background: #fff;
  box-shadow: 0 1px 5px rgba(22,48,88,.13);
}
.language-option:focus-visible { outline: 3px solid #79a8ff; outline-offset: 2px; }
.loginbox .language-switch { float: right; margin-top: -40px; margin-bottom: 12px; }
@media (max-width: 700px) {
  .language-option { min-width: 37px; padding: 0 7px; }
}


/* Mobile-first refinements: full navigation, stacked lead cards, touch targets. */
@media (max-width: 850px) {
  .layout { display:block; min-height:100dvh; }
  .sidebar { width:100%; padding:12px 14px 10px; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; position:relative; }
  .sidebar::-webkit-scrollbar { display:none; }
  .brand { font-size:20px; padding:0 12px 0 2px; white-space:nowrap; flex:none; }
  .brand:after, .nav:before { content:none; }
  .nav { font-size:13px; width:auto; margin:0; padding:11px 12px; white-space:nowrap; text-align:center; flex:none; }
  .sidefoot { display:none; }
  .topbar { padding:15px 18px; gap:12px; flex-wrap:wrap; }
  .topbar h1 { font-size:21px; }
  .topactions { gap:7px; }
  .content { padding:18px; max-width:100%; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .panelhead { align-items:stretch; }
  .panelhead .actions { width:100%; }
  .panelhead .actions .search { flex:1 1 160px; min-width:0; }
  .bulkbar { gap:9px; }
  .bulkbar select { flex:1 1 170px; min-width:0; }
  button, select, input { min-height:40px; }
}
@media (max-width: 640px) {
  .sidebar { padding:10px 12px; }
  .brand { font-size:18px; padding-right:8px; }
  .nav { font-size:12px; padding:10px; }
  .topbar { padding:13px 15px; }
  .topactions { width:100%; justify-content:space-between; }
  .topactions .muted { font-size:11px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content { padding:12px; }
  .cards { margin-bottom:12px; }
  .card { padding:14px; }
  .card .label { font-size:12px; }
  .card .value { font-size:25px; }
  .panelhead { padding:15px; }
  .panelhead h2 { font-size:16px; }
  .panelhead .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panelhead .actions .search { width:100%; min-width:0; grid-column:span 2; }
  .panelhead .actions .btn { min-width:0; padding:10px 7px; }
  .bulkbar { padding:12px 14px; }
  .bulkbar strong { width:100%; }
  .bulkbar select { width:100%; flex-basis:100%; max-width:none; }
  .bulkbar .btn { flex:1 1 120px; padding:10px 7px; }
  /* Lead table becomes individually readable cards. Other tables remain scrollable. */
  .panel:has(.lead-check) .tablewrap, .panel:has(.inline-status) .tablewrap { overflow:visible; }
  .panel:has(.inline-status) table, .panel:has(.inline-status) tbody { display:block; width:100%; }
  .panel:has(.inline-status) thead { display:none; }
  .panel:has(.inline-status) tbody tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; margin:10px; padding:14px; border:1px solid #e4eaf3; border-radius:13px; background:#fff; box-shadow:0 2px 8px #1e325009; }
  .panel:has(.inline-status) tbody tr.selected-row { background:#f0f6ff; border-color:#b7cef9; }
  .panel:has(.inline-status) tbody td { display:flex; flex-direction:column; gap:5px; min-width:0; padding:0; border:0; white-space:normal; overflow-wrap:anywhere; }
  .panel:has(.inline-status) tbody td:before { content:attr(data-label); color:#8490a6; font-size:11px; font-weight:600; }
  .panel:has(.inline-status) tbody td.name { grid-column:1 / -1; font-size:16px; }
  .panel:has(.inline-status) tbody td.name:before { display:none; }
  .panel:has(.inline-status) tbody td.checkcol { grid-column:1 / -1; flex-direction:row; }
  .panel:has(.inline-status) tbody td.checkcol:before { display:none; }
  .panel:has(.inline-status) tbody td.lead-open { grid-column:1 / -1; align-items:flex-end; }
  .panel:has(.inline-status) tbody td.lead-open:before { display:none; }
  .panel:has(.inline-status) .inline-status, .panel:has(.inline-status) .inline-manager { min-width:0; max-width:none; width:100%; }
  .drawer { padding:18px 16px; }
  .drawerhead h2 { font-size:19px; }
  .split { grid-template-columns:1fr; gap:0; }
  .loginbox { padding:24px 18px; }
  .statuslist { padding:0 14px 15px; }
}
@media (max-width: 360px) {
  .panelhead .actions { grid-template-columns:1fr; }
  .panelhead .actions .search { grid-column:span 1; }
  .panel:has(.inline-status) tbody tr { grid-template-columns:1fr; }
  .panel:has(.inline-status) tbody td.name, .panel:has(.inline-status) tbody td.checkcol, .panel:has(.inline-status) tbody td.lead-open { grid-column:1; }
}

/* Cloud modal: center all modal dialogs, preserve legacy drawers separately */
.overlay:has(> .modal){position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;overflow-y:auto;}
.overlay > .modal{margin:auto;flex:0 1 700px;max-width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;}
@media(max-width:720px){.overlay:has(> .modal){padding:12px}.overlay > .modal{max-height:calc(100dvh - 24px)}}