:root{
  /* Нежно-бежевая палитра в стиле Anthropic */
  --bg:#F3F0E8;        /* тёплый беж фона */
  --panel:#FBFAF5;     /* кремовые карточки */
  --panel-2:#F6F3EB;   /* вторичный фон */
  --line:#E7E1D4;      /* тёплые границы */
  --ink:#2B2925;       /* тёплый почти-чёрный текст */
  --muted:#9A9384;     /* приглушённый */
  --brand:#C15F3C;     /* терракота — акцент Anthropic */
  --brand-soft:#EBDFD3;/* мягкая подложка акцента */
  --brand2:#A8492B;
  --accent:#C15F3C;
  --logo:#E8133E;      /* фирменный красный (знак-стрелка) */
  --green:#3E7C5A; --orange:#C8923B; --red:#C0453B;
  --radius:14px; --shadow:0 1px 2px rgba(60,50,30,.05),0 1px 1px rgba(60,50,30,.03);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,'Segoe UI',Roboto,Inter,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--red);margin-top:8px;font-size:13px;min-height:18px}
a{color:var(--accent);text-decoration:none;cursor:pointer}
button{cursor:pointer;font-family:inherit}

/* Login */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#F7F4EC 0%,#EFEBE0 100%)}
.login-card{background:var(--panel);border-radius:20px;padding:36px 40px;width:360px;
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(80,65,40,.10)}
.login-card form{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.login-card label{font-size:12px;color:var(--muted);margin-top:8px}
.login-card input{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff}
.login-card button{margin-top:16px;padding:12px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;font-size:15px}
.login-card button:hover{background:var(--brand2)}

/* Слоган */
.slogan{color:var(--muted);font-size:12px;line-height:1.5;margin:12px 0 0;text-align:center}
.slogan b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.side-slogan{text-align:left;margin:0 0 10px;padding:0 8px 12px;border-bottom:1px solid var(--line)}
.side-slogan b{font-size:13px}
.side-slogan span{font-size:11px}

/* Логотип — кистевой шрифт + фирменный знак */
.brand-lg,.brand{display:flex;align-items:center;justify-content:center;gap:8px}
.brand{justify-content:flex-start;padding:4px 8px 18px}
.logo-text{font-family:'Permanent Marker','Caveat',cursive;font-weight:400;color:var(--ink);line-height:1;letter-spacing:.5px}
.brand-lg .logo-text{font-size:40px}
.brand .logo-text{font-size:27px}
.logo-text b{color:var(--logo);font-weight:700}
.logo-mark{flex:0 0 auto;transform:rotate(-2deg)}
.brand-lg .logo-mark{width:38px;height:38px}
.brand .logo-mark{width:26px;height:26px}

/* Layout */
.app{display:flex;height:100vh;overflow:hidden}
.topbar{display:none}
.backdrop{display:none}
.sidebar{width:240px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;flex-shrink:0}
#nav{flex:1;overflow-y:auto}
.nav-group{font-size:11px;letter-spacing:.04em;color:var(--muted);font-weight:700;margin:16px 10px 6px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--ink);
  font-weight:500;font-size:14px;margin:2px 0;white-space:nowrap}
.nav-item svg{flex:0 0 auto;width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;opacity:.75}
.nav-item:hover{background:var(--panel-2)}
.nav-item.active{background:var(--brand-soft);color:var(--brand2)}
.nav-item.active svg{opacity:1;color:var(--brand2)}
.sidebar-bottom{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
main{flex:1;overflow-y:auto;padding:24px 28px}

/* Headings */
h1{font-size:24px;margin:0 0 4px}
h2{font-size:17px;margin:0 0 12px}
.subtitle{color:var(--muted);margin:0 0 18px}

/* Cards & grid */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpi{padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.kpi .label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.kpi .value{font-size:28px;font-weight:800;margin-top:6px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi.red{background:#F6EAE6} .kpi.green{background:#ECF1EA} .kpi.blue{background:#ECF0F1}
.kpi.orange{background:#F6F0E2} .kpi.violet{background:#F1ECE4}

/* Buttons / tabs */
.tabs{display:flex;gap:6px;background:var(--panel-2);padding:5px;border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.tab{flex:1;text-align:center;padding:10px 14px;border-radius:9px;font-weight:600;color:var(--muted);border:0;background:transparent;min-width:120px}
.tab.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.btn{padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-weight:600;font-size:13px;color:var(--ink)}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:var(--brand2)}
.btn.danger{color:var(--red);border-color:#e9c9c4;background:var(--panel)}

/* Filters bar */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin-bottom:16px}
.filters input,.filters select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px}

/* Панель фильтров «по рядам» */
.filterpanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:16px;
  display:flex;flex-direction:column;gap:0}
.filterpanel.loading{opacity:.6;pointer-events:none}
.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0}
.filter-row:first-child{padding-top:2px}
.filter-row:last-child{padding-bottom:2px}
.filter-row + .filter-row{border-top:1px solid var(--line)}
.filterpanel select,.filterpanel input[type=date],.filterpanel .ca-search{
  padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--panel);color:var(--ink);height:36px}
.filterpanel select:hover,.filterpanel input:hover{border-color:var(--brand-soft)}
.filterpanel select:focus,.filterpanel input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(193,95,60,.12)}
.filter-field{display:flex;flex-direction:column;gap:3px}
.filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.filter-extra{gap:8px}
.filter-search{position:relative}
.filter-search .filter-ico{position:absolute;left:14px;color:var(--muted);font-size:13px;pointer-events:none}
.filter-search .ca-search{flex:1;min-width:220px;padding-left:34px}
.filter-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.filter-count{font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:20px;padding:4px 12px;white-space:nowrap}

/* Таблица менеджеров — ровные столбцы */
.mgr-table{table-layout:fixed;width:100%}
.mgr-table th,.mgr-table td{text-align:center;overflow:hidden;text-overflow:ellipsis}
.mgr-table th{cursor:pointer;user-select:none}
.mgr-table th:first-child,.mgr-table td:first-child{text-align:left;width:22%}
.mgr-table th:last-child,.mgr-table td:last-child{width:150px;text-align:right}
.seg{display:flex;background:var(--panel-2);border-radius:9px;padding:3px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-weight:600;color:var(--muted);font-size:13px}
.seg button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* Table */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 10px;font-size:13px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}

/* Score chips */
.score{font-weight:700}
.score.low{color:var(--red)} .score.mid{color:var(--orange)} .score.high{color:var(--green)}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge.green{background:#E5EEE6;color:#2F6145} .badge.gray{background:var(--panel-2);color:#6B6456}
.badge.blue{background:#E7ECEE;color:#3A5A66} .badge.red{background:#F2E2DE;color:#9A3A30}
.badge.orange{background:#F3EAD6;color:#8A6418}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.ok{color:var(--green)} .no{color:var(--red)}

/* Bars */
.bar{height:10px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px}

/* Calls split view */
.calls-layout{display:grid;grid-template-columns:380px 1fr;gap:16px;height:calc(100vh - 130px)}
.calls-list{overflow-y:auto;padding-right:4px}
.call-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer}
.call-item:hover{border-color:var(--brand)}
.call-item.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,95,60,.18)}
.call-item .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.call-item .meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}
.call-detail{overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);gap:8px}

/* Gauge */
.gauge-wrap{display:flex;align-items:center;gap:18px}
.crit-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.crit-row:last-child{border-bottom:0}
.transcript .turn{margin-bottom:10px}
.transcript .who{font-weight:700;font-size:12px;color:var(--brand)}
.transcript .who.client{color:var(--ink);opacity:.65}
.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.section-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px}

/* Раскрывающиеся аккордеоны оценки */
.acc{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;user-select:none}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:'▸';color:var(--muted);font-size:12px;transition:transform .15s;margin-right:6px}
.acc[open]>summary::before{transform:rotate(90deg)}
.acc>summary:hover{background:var(--panel-2)}
.acc .acc-title{font-weight:700;flex:1}
.acc .acc-meta{display:flex;gap:12px;align-items:center}
.acc .acc-body{padding:4px 14px 12px;border-top:1px solid var(--line)}

/* Карточки фактов и цифр */
.fact-card .fact-value{font-size:20px;font-weight:800;color:var(--brand);margin:8px 0 2px}
.fact-card .fact-quote{margin-top:8px;padding:8px 10px;background:var(--panel-2);border-left:3px solid var(--brand-soft);border-radius:6px;font-style:italic;color:#6b6657;font-size:13px}

/* Резюме / черновик письма */
.followup-body{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:8px;white-space:pre-wrap;line-height:1.55;font-size:14px}

/* Таблица квалификации лида */
.qual-table{width:100%;border-collapse:collapse}
.qual-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.qual-table tr:last-child td{border-bottom:none}

/* ── Мобильная верстка ─────────────────────────────────────────────────────── */
.menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);flex:0 0 auto}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

@media (max-width: 920px){
  .app{flex-direction:column;height:100dvh}
  /* Верхняя панель с гамбургером */
  .topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;flex-shrink:0}
  .topbar .brand{padding:0;justify-content:flex-start}
  .topbar .logo-text{font-size:22px}
  .topbar .logo-mark{width:22px;height:22px}
  /* Сайдбар — выезжающая панель */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:84vw;z-index:80;
    transform:translateX(-105%);transition:transform .25s ease;box-shadow:0 10px 40px rgba(50,40,20,.25);
    border-right:1px solid var(--line);overflow-y:auto}
  .sidebar.open{transform:translateX(0)}
  .backdrop{display:block;position:fixed;inset:0;background:rgba(43,41,37,.4);z-index:70;
    opacity:0;pointer-events:none;transition:opacity .2s}
  body.menu-open .backdrop{opacity:1;pointer-events:auto}
  .nav-item{padding:12px;font-size:15px}
  main{padding:14px;height:auto;-webkit-overflow-scrolling:touch}
  h1{font-size:20px}
  /* Списки звонков/чатов: колонки → друг под другом */
  .calls-layout{display:flex;flex-direction:column;height:auto;gap:12px}
  .calls-list{max-height:42vh;flex:0 0 auto}
  .call-detail{min-height:40vh}
  /* Таблицы и карточки не ломают экран — горизонтальный скролл внутри */
  .card{overflow-x:auto}
  table{min-width:520px}
  .mgr-table{table-layout:auto}
  /* Фильтры и кнопки */
  .filter-row{gap:8px}
  .filter-actions{margin-left:0;width:100%}
  .filterpanel select,.filterpanel input[type=date],.filterpanel .ca-search{max-width:100%}
  .filter-search .ca-search{min-width:0;width:100%}
  .filter-field{max-width:48%}
  .tabs{gap:4px}
  .tab{min-width:0;padding:9px 8px;font-size:13px}
  .kpi .value{font-size:22px}
  /* Вход */
  .login-card{width:min(92vw,360px);padding:28px 22px}
  /* Инлайн-модалки (оверлеи из app.js) — не шире экрана */
  div[style*="position:fixed"]>div{max-width:94vw!important;max-height:90vh;overflow-y:auto}
}
@media (max-width: 480px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .filter-field{max-width:100%;width:100%}
  th,td{padding:9px 7px;font-size:12.5px}
}