:root {
      --bg: #f4f7fb;
      --surface: #fff;
      --surface-soft: #f8fbff;
      --text: #101828;
      --muted: #667085;
      --border: #e4eaf2;
      --blue: #1d5fd1;
      --blue-soft: #eaf2ff;
      --green: #22a06b;
      --green-soft: #e7f7ef;
      --yellow: #f5a524;
      --yellow-soft: #fff4db;
      --red: #e5484d;
      --red-soft: #ffebed;
      --purple: #7c3aed;
      --purple-soft: #f1e9ff;
      --shadow: 0 18px 45px rgba(18, 32, 51, .08);
      --radius: 24px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
      background:
        radial-gradient(circle at 15% 0%, rgba(29, 95, 209, .12), transparent 30%),
        radial-gradient(circle at 95% 8%, rgba(34, 160, 107, .10), transparent 28%),
        var(--bg);
    }

    .app {
      display: grid;
      grid-template-columns: 284px minmax(0, 1fr);
      min-height: 100vh;
    }

    .sidebar {
      padding: 24px 16px;
      background: rgba(255,255,255,.9);
      border-right: 1px solid rgba(228,234,242,.9);
      backdrop-filter: blur(18px);
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 264px;
      flex: 0 0 264px;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 0 8px 20px;
      border-bottom: 1px solid var(--border);
    }

    .crest {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(145deg, #102b62, #1d5fd1);
      display: grid;
      place-items: center;
      color: white;
      font-weight: 900;
      font-size: 15px;
      box-shadow: 0 8px 20px rgba(29,95,209,.22);
    }

    .brand b { display:block; font-size:15px; line-height:1.1; letter-spacing:-.01em; }
    .brand span { display:block; color:var(--muted); font-size:12px; margin-top:3px; }

    .nav {
      display: grid;
      gap: 2px;
    }

    .nav-section {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      padding: 14px 12px 6px;
    }

    .nav-item {
      position: relative;
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 10px;
      color: #3d4b63;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s ease, color .15s ease;
    }

    .nav-item:hover {
      background: var(--surface-soft);
      color: var(--text);
    }

    .nav-item.active {
      background: var(--blue-soft);
      color: var(--blue);
    }

    .nav-item.active::before {
      content: "";
      position: absolute;
      left: -16px;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--blue);
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
      flex: 0 0 auto;
      opacity: .85;
    }

    .nav-item.active svg { opacity: 1; }

    .nav-badge {
      margin-left: auto;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: grid;
      place-items: center;
    }

    .nav-badge.grey { background: #d0d5dd; color: #475467; }

    .sidebar-card {
      margin-top: auto;
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(145deg, #122b5e, #1d5fd1);
      color: #fff;
      box-shadow: var(--shadow);
    }

    .sidebar-card small { display:block; opacity:.76; margin-bottom:9px; }
    .sidebar-card strong { display:block; font-size:22px; line-height:1.1; margin-bottom:12px; }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      font-size: 12px;
      font-weight: 800;
    }

    .main { padding: 30px; min-width: 0; }

    .page { display:none; }
    .page.active { display:block; }

    .topbar {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:24px;
      margin-bottom:24px;
    }

    .title h1 {
      margin:0;
      font-size: clamp(28px, 3vw, 42px);
      letter-spacing:-.045em;
      line-height:1.05;
    }

    .title p {
      margin:10px 0 0;
      color:var(--muted);
      font-size:15px;
      max-width: 920px;
      line-height:1.5;
    }

    .controls { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }

    .button,
    .button-secondary,
    .control {
      border:1px solid var(--border);
      background:rgba(255,255,255,.86);
      padding:12px 14px;
      border-radius:14px;
      box-shadow:0 8px 25px rgba(19,39,75,.04);
      color:#26364d;
      font-weight:800;
      font-size:13px;
      display:inline-flex;
      align-items:center;
      gap:9px;
      white-space:nowrap;
      text-decoration:none;
    }

    .button {
      border-color:transparent;
      background:var(--blue);
      color:#fff;
    }

    input.control {
      min-width: 150px;
      color: var(--text);
      font-family: inherit;
    }

    .stack { display:grid; gap:18px; }

    .grid {
      display:grid;
      grid-template-columns: repeat(12, minmax(0,1fr));
      gap:18px;
      align-items:stretch;
    }

    .kpi-row {
      display:grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap:18px;
      align-items:stretch;
    }

    .dash-row {
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:18px;
      align-items:stretch;
    }

    .card {
      background:rgba(255,255,255,.92);
      border:1px solid rgba(228,234,242,.9);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      min-width:0;
    }

    .card-inner { padding:20px; }

    .card-head {
      padding:20px 20px 0;
      margin-bottom:14px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      min-width:0;
    }

    .card-head h2 {
      margin:0;
      font-size:18px;
      letter-spacing:-.02em;
      overflow-wrap:anywhere;
    }

    .kpi {
      position:relative;
      min-height:126px;
    }

    .kpi .card-inner { padding:18px 16px; }

    .kpi .label {
      color:var(--muted);
      font-size:12px;
      line-height:1.25;
      font-weight:850;
      padding-right:46px;
      overflow-wrap:anywhere;
    }

    .kpi .value {
      margin-top:9px;
      font-size:clamp(22px,2vw,34px);
      line-height:1.05;
      font-weight:900;
      letter-spacing:-.055em;
      white-space:nowrap;
    }

    .kpi .delta {
      margin-top:9px;
      font-size:12px;
      font-weight:850;
      padding-right:46px;
      line-height:1.25;
    }

    .kpi-icon {
      position:absolute;
      right:16px;
      top:18px;
      width:40px;
      height:40px;
      border-radius:13px;
      display:grid;
      place-items:center;
      font-weight:900;
      background:var(--blue-soft);
      color:var(--blue);
    }

    .kpi.yellow .kpi-icon { background:var(--yellow-soft); color:#a86400; }
    .kpi.red .kpi-icon { background:var(--red-soft); color:var(--red); }
    .kpi.green .kpi-icon { background:var(--green-soft); color:var(--green); }
    .kpi.purple .kpi-icon { background:var(--purple-soft); color:var(--purple); }

    .good { color: var(--green); }
    .warn { color: var(--yellow); }
    .bad { color: var(--red); }

    .span-12 { grid-column: span 12; }
    .span-8 { grid-column: span 8; }
    .span-7 { grid-column: span 7; }
    .span-6 { grid-column: span 6; }
    .span-5 { grid-column: span 5; }
    .span-4 { grid-column: span 4; }
    .span-3 { grid-column: span 3; }

    .chart-card {
      display:flex;
      flex-direction:column;
      min-height:455px;
    }

    .info-card {
      display:flex;
      flex-direction:column;
      min-height:390px;
    }

    .chart-card .card-inner,
    .info-card .card-inner { flex:1; min-height:0; }

    .visual {
      height:340px;
      min-height:340px;
    }

    .map {
      height:100%;
      border:1px solid var(--border);
      border-radius:20px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 48% 50%, rgba(229,72,77,.88) 0 7%, transparent 8%),
        radial-gradient(circle at 48% 50%, rgba(229,72,77,.42) 0 16%, transparent 17%),
        radial-gradient(circle at 57% 38%, rgba(245,165,36,.58) 0 13%, transparent 14%),
        radial-gradient(circle at 35% 65%, rgba(245,165,36,.48) 0 14%, transparent 15%),
        radial-gradient(circle at 25% 28%, rgba(34,160,107,.35) 0 18%, transparent 19%),
        linear-gradient(135deg, #eef6ff, #f9fbff);
    }

    .map:before {
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(90deg, rgba(29,95,209,.06) 1px, transparent 1px),
        linear-gradient(rgba(29,95,209,.06) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image: radial-gradient(circle at center, black, transparent 92%);
    }

    .city {
      position:absolute;
      left:49%;
      top:51%;
      transform:translate(-50%,-50%);
      padding:7px 12px;
      background:rgba(18,32,51,.9);
      color:#fff;
      border-radius:999px;
      font-weight:900;
      box-shadow:0 10px 30px rgba(18,32,51,.22);
    }

    .place {
      position:absolute;
      color:rgba(18,32,51,.68);
      font-size:12px;
      font-weight:800;
    }

    .p1 { left:15%; top:22%; }
    .p2 { left:66%; top:25%; }
    .p3 { left:23%; top:70%; }
    .p4 { left:70%; top:66%; }
    .p5 { left:52%; top:77%; }

    .legend {
      position:absolute;
      left:16px;
      bottom:16px;
      background:rgba(255,255,255,.92);
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 12px;
      display:grid;
      gap:7px;
      font-size:12px;
      color:#344054;
      font-weight:700;
    }

    .legend div { display:flex; align-items:center; gap:8px; }

    .dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; }
    .dot.green { background:var(--green); }
    .dot.yellow { background:var(--yellow); }
    .dot.orange { background:#ff7a1a; }
    .dot.red { background:var(--red); }
    .dot.blue { background:var(--blue); }
    .dot.purple { background:var(--purple); }

    .chart {
      height:100%;
      padding:8px 8px 12px;
    }

    .chart svg { width:100%; height:100%; overflow:visible; }
    .axis { stroke:#dce4ef; stroke-width:1; }
    .area { fill:rgba(29,95,209,.16); }
    .area-green { fill:rgba(34,160,107,.16); }
    .line { fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
    .line-green { stroke:var(--green); }
    .point { fill:var(--blue); stroke:#fff; stroke-width:3; }
    .point-green { fill:var(--green); }

    .donut-wrap {
      height:100%;
      min-height:0;
      display:grid;
      grid-template-columns: minmax(145px, 180px) minmax(0,1fr);
      gap:16px;
      align-items:center;
      align-content:center;
    }

    .donut {
      width:170px;
      height:170px;
      border-radius:50%;
      margin:auto;
      background:conic-gradient(#22a06b 0 59%, #f5a524 59% 87%, #e5484d 87% 100%);
      position:relative;
    }

    /* Центр donut задаётся inline в шаблоне (реальное число) */

    .list { display:grid; gap:12px; }

    .legend-list { display:grid; gap:12px; }
    .legend-list div {
      display:flex;
      justify-content:space-between;
      gap:12px;
      min-width:0;
      color:#344054;
      font-weight:800;
      font-size:13px;
      overflow-wrap:anywhere;
    }
    .legend-list span:first-child { display:flex; align-items:center; gap:8px; min-width:0; }

    .badge {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      white-space:normal;
      text-align:center;
      line-height:1.15;
    }

    .badge.green { background:var(--green-soft); color:var(--green); }
    .badge.yellow { background:var(--yellow-soft); color:#a86400; }
    .badge.red { background:var(--red-soft); color:var(--red); }
    .badge.blue { background:var(--blue-soft); color:var(--blue); }
    .badge.purple { background:var(--purple-soft); color:var(--purple); }
    .badge.gray { background:#f2f4f7; color:#475467; }

    .analysis-summary {
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:10px;
      margin-bottom:8px;
    }

    .analysis-tile {
      padding:13px;
      border-radius:16px;
      background:var(--surface-soft);
      border:1px solid var(--border);
      min-width:0;
    }
    .analysis-tile b { display:block; font-size:22px; letter-spacing:-.04em; overflow-wrap:anywhere; }
    .analysis-tile small { display:block; margin-top:4px; color:var(--muted); font-weight:750; overflow-wrap:anywhere; }

    .sentiment { display:grid; gap:16px; }
    .sent-row {
      display:grid;
      grid-template-columns:34px minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      min-width:0;
    }

    .emoji {
      width:34px;
      height:34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-weight:900;
    }
    .emoji.green { background:var(--green-soft); color:var(--green); }
    .emoji.yellow { background:var(--yellow-soft); color:#a86400; }
    .emoji.red { background:var(--red-soft); color:var(--red); }
    .emoji.blue { background:var(--blue-soft); color:var(--blue); }
    .emoji.purple { background:var(--purple-soft); color:var(--purple); }

    .sent-row b { font-size:14px; overflow-wrap:anywhere; }
    .sent-row small { display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:700; overflow-wrap:anywhere; }

    .progress { height:9px; background:#edf2f7; border-radius:999px; overflow:hidden; margin-top:8px; }
    .progress i { display:block; height:100%; border-radius:inherit; }
    .progress .green { background:var(--green); width:59%; }
    .progress .yellow { background:var(--yellow); width:28%; }
    .progress .red { background:var(--red); width:13%; }
    .progress .blue { background:var(--blue); width:54%; }
    .progress .purple { background:var(--purple); width:72%; }

    .signal {
      display:grid;
      grid-template-columns:42px minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      padding:12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:var(--surface-soft);
      min-width:0;
    }

    .sig-icon {
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      font-weight:900;
    }
    .sig-icon.green { background:var(--green-soft); color:var(--green); }
    .sig-icon.yellow { background:var(--yellow-soft); color:#a86400; }
    .sig-icon.red { background:var(--red-soft); color:var(--red); }
    .sig-icon.blue { background:var(--blue-soft); color:var(--blue); }
    .sig-icon.purple { background:var(--purple-soft); color:var(--purple); }

    .signal b, .signal small { overflow-wrap:anywhere; }
    .signal b { display:block; font-size:14px; }
    .signal small { display:block; margin-top:4px; color:var(--muted); font-weight:700; }

    .signal-meta {
      min-width:90px;
      display:grid;
      gap:8px;
      justify-items:end;
      text-align:right;
      color:var(--muted);
      font-size:12px;
      font-weight:750;
    }

    .tree {
      display:grid;
      gap:10px;
    }

    details {
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--surface-soft);
      overflow:hidden;
    }

    summary {
      list-style:none;
      cursor:pointer;
      display:grid;
      grid-template-columns:minmax(230px, 1fr) repeat(4, minmax(92px, auto));
      gap:14px;
      align-items:center;
      padding:14px 16px;
      font-weight:850;
    }

    summary::-webkit-details-marker { display:none; }

    .tree-title { display:flex; align-items:center; gap:10px; min-width:0; overflow-wrap:anywhere; }
    .chev { width:24px; height:24px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:0 0 auto; }
    details[open] > summary .chev { transform:rotate(90deg); }
    .tree-meta { color:var(--muted); font-size:12px; font-weight:850; white-space:nowrap; }
    .tree-children { padding:0 12px 12px 42px; display:grid; gap:8px; }
    .chat-leaf {
      border:1px solid var(--border);
      background:#fff;
      border-radius:16px;
      padding:12px 14px;
      display:grid;
      grid-template-columns:minmax(230px,1fr) minmax(120px,auto) minmax(110px,auto) minmax(110px,auto) minmax(100px,auto);
      gap:12px;
      align-items:center;
      font-size:13px;
      font-weight:800;
      min-width:0;
    }

    .mono { font-family:"SFMono-Regular", Consolas, monospace; font-size:12px; }
    .muted { color:var(--muted); font-weight:750; }
    .nowrap { white-space:nowrap; }

    .table-wrap {
      width:100%;
      overflow-x:auto;
      border-radius:16px;
      -webkit-overflow-scrolling:touch;
    }

    table {
      width:100%;
      min-width:760px;
      border-collapse:collapse;
    }

    .compact-table { min-width:560px; }

    th, td {
      text-align:left;
      padding:13px 12px 13px 0;
      border-top:1px solid var(--border);
      vertical-align:middle;
      overflow-wrap:anywhere;
    }

    th {
      color:var(--muted);
      font-size:12px;
      font-weight:900;
      border-top:0;
      white-space:nowrap;
    }

    td { font-size:14px; font-weight:750; }
    td:last-child, th:last-child { text-align:right; padding-right:0; }

    .filters {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:16px;
    }

    .filter {
      border:1px solid var(--border);
      background:#fff;
      border-radius:999px;
      padding:9px 12px;
      color:#344054;
      font-size:13px;
      font-weight:850;
    }

    .form-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:14px;
    }

    .field { display:grid; gap:8px; }
    .field label { color:var(--muted); font-size:13px; font-weight:900; }
    .input {
      border:1px solid var(--border);
      background:#fff;
      border-radius:14px;
      min-height:46px;
      padding:12px 14px;
      font:inherit;
      color:var(--text);
      font-weight:750;
      width:100%;
    }

    textarea.input { min-height:118px; resize:vertical; }

    .switch-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      padding:14px 0;
      border-top:1px solid var(--border);
    }
    .switch-row:first-child { border-top:0; padding-top:0; }

    .switch {
      width:52px;
      height:30px;
      border-radius:999px;
      background:var(--blue);
      padding:4px;
      display:flex;
      justify-content:flex-end;
      flex:0 0 auto;
    }
    .switch:before {
      content:"";
      width:22px;
      height:22px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 4px 10px rgba(0,0,0,.12);
    }

    .note {
      margin-bottom:18px;
      padding:14px 16px;
      border-radius:18px;
      background:linear-gradient(145deg, rgba(29,95,209,.1), rgba(34,160,107,.1));
      color:#26415f;
      font-weight:800;
      line-height:1.45;
    }

    .tag-grid {
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:12px;
    }

    .tag-card {
      padding:14px;
      border-radius:18px;
      border:1px solid var(--border);
      background:var(--surface-soft);
      display:grid;
      gap:8px;
      min-width:0;
    }

    .tag-card b { overflow-wrap:anywhere; }
    .tag-card small { color:var(--muted); font-weight:750; overflow-wrap:anywhere; }

    .link-row {
      margin-top:14px;
      display:flex;
      justify-content:flex-end;
    }
    .link-row a {
      color:var(--blue);
      text-decoration:none;
      font-weight:900;
      font-size:13px;
    }

    @media (max-width: 1380px) {
      .dash-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .dash-row .chart-card:first-child { grid-column:1 / -1; }
      .tag-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

    @media (max-width: 1120px) {
      .app { grid-template-columns:1fr; }
      .sidebar {
        position:sticky;
        top:0;
        z-index:10;
        flex-direction:row;
        align-items:center;
        overflow:auto;
        padding:14px 18px;
      }
      .brand { min-width:240px; }
      .nav { display:flex; flex:0 0 auto; }
      .nav button { white-space:nowrap; }
      .sidebar-card { display:none; }
      .kpi-row { grid-template-columns:1fr; }
      .grid > * { grid-column:1 / -1 !important; }
      summary { grid-template-columns:minmax(220px,1fr) repeat(2, minmax(92px,auto)); }
      summary .hide-md { display:none; }
      .chat-leaf { grid-template-columns:1fr 1fr; }
    }

    @media (max-width: 820px) {
      .main { padding:20px 14px; }
      .topbar { display:grid; }
      .controls { justify-content:flex-start; }
      .dash-row { grid-template-columns:1fr; }
      .dash-row .chart-card:first-child { grid-column:auto; }
      .chart-card, .info-card { min-height:auto; }
      .visual { height:auto; min-height:300px; }
      .map, .chart { height:300px; }
      .donut-wrap { grid-template-columns:1fr; height:auto; }
      .analysis-summary, .form-grid, .tag-grid { grid-template-columns:1fr; }
      .signal { grid-template-columns:42px 1fr; }
      .signal-meta { grid-column:2; justify-items:start; text-align:left; }
      summary { grid-template-columns:1fr; }
      .tree-children { padding-left:12px; }
      .chat-leaf { grid-template-columns:1fr; }
    }

    /* v2 fixes: page "Чаты" */
    .chats-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .chats-kpi-row .kpi {
      min-width: 0;
      width: 100%;
      grid-column: auto !important;
    }

    .chats-kpi-row .kpi .label {
      padding-right: 0;
      max-width: calc(100% - 54px);
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }

    .chats-kpi-row .kpi .delta {
      padding-right: 0;
      max-width: calc(100% - 54px);
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }

    .chats-kpi-row .kpi .value {
      font-size: clamp(28px, 3vw, 38px);
      letter-spacing: -.055em;
    }

    .tree-clean summary {
      grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(110px, auto));
    }

    .tree-clean .chat-leaf {
      grid-template-columns: minmax(250px, 1fr) minmax(150px, auto) minmax(120px, auto) minmax(120px, auto) minmax(110px, auto);
    }

    @media (max-width: 1280px) {
      .chats-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .chats-kpi-row {
        grid-template-columns: 1fr;
      }

      .tree-clean summary,
      .tree-clean .chat-leaf {
        grid-template-columns: 1fr;
      }
    }


    /* v3: аккуратное дерево чатов без технических chat_id */
    .tree-panel {
      padding: 0;
    }

    .tree-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .tree-toolbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .tree-toolbar-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .tree-clean {
      gap: 8px;
    }

    .tree-clean details {
      background: #fff;
      border-color: #e7edf6;
      border-radius: 18px;
      box-shadow: 0 6px 18px rgba(18, 32, 51, .035);
    }

    .tree-clean details details {
      background: #fbfdff;
      box-shadow: none;
    }

    .tree-clean summary {
      min-height: 58px;
      padding: 13px 16px;
      grid-template-columns: minmax(360px, 1fr) 120px 145px 145px;
      column-gap: 18px;
    }

    .tree-clean .tree-title {
      font-size: 15px;
      line-height: 1.25;
    }

    .tree-clean .tree-meta {
      justify-self: end;
      text-align: right;
      color: #51627a;
      line-height: 1.2;
    }

    .tree-clean .tree-meta strong {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .tree-clean .tree-meta small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .tree-children {
      border-top: 1px solid rgba(228, 234, 242, .75);
      margin-top: 0;
      padding-top: 10px;
    }

    .chat-leaf {
      grid-template-columns: minmax(300px, 1fr) 130px 130px 150px 115px !important;
      background: #fff;
      box-shadow: 0 4px 14px rgba(18, 32, 51, .035);
    }

    .chat-main b {
      display: block;
      font-size: 14px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .chat-main small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      overflow-wrap: anywhere;
    }

    .chat-stat {
      text-align: right;
      color: var(--text);
      font-weight: 900;
      line-height: 1.2;
    }

    .chat-stat small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .chat-link {
      justify-self: end;
      color: var(--blue);
      background: var(--blue-soft);
      border-radius: 999px;
      padding: 8px 11px;
      text-decoration: none;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    @media (max-width: 1200px) {
      .tree-clean summary {
        grid-template-columns: minmax(260px, 1fr) 110px 130px;
      }

      .tree-clean summary .hide-md {
        display: none;
      }

      .chat-leaf {
        grid-template-columns: 1fr 110px 110px 105px !important;
      }

      .chat-leaf .chat-link {
        display: none;
      }
    }

    @media (max-width: 760px) {
      .tree-clean summary,
      .chat-leaf {
        grid-template-columns: 1fr !important;
      }

      .tree-clean .tree-meta,
      .chat-stat {
        justify-self: start;
        text-align: left;
      }

      .chat-link {
        justify-self: start;
      }
    }


    /* v4: usability refinements for Chats page */
    #page-chats .topbar {
      align-items: flex-end;
    }

    #page-chats .title p {
      max-width: 1040px;
    }

    .tree-toolbar-left {
      flex-wrap: wrap;
    }

    .tree-clean {
      gap: 10px;
    }

    .tree-clean details {
      overflow: visible;
    }

    .tree-clean details > summary {
      border-radius: 18px;
    }

    .tree-clean summary {
      min-height: 54px;
      padding: 12px 16px;
      grid-template-columns: minmax(380px, 1fr) 112px 138px 138px;
      column-gap: 16px;
    }

    .tree-clean .tree-title {
      min-width: 0;
    }

    .tree-clean .tree-meta {
      min-width: 0;
      align-self: center;
    }

    .tree-clean .tree-meta strong {
      font-size: 13px;
      line-height: 1.15;
    }

    .tree-clean .tree-meta small {
      font-size: 10px;
      line-height: 1.15;
    }

    .tree-clean .tree-children {
      padding: 10px 10px 10px 18px;
    }

    .chat-leaf {
      grid-template-columns: minmax(320px, 1fr) 118px 118px 120px 150px !important;
      align-items: center;
      padding: 14px 16px;
      gap: 14px;
      border-radius: 16px;
    }

    .chat-main {
      min-width: 0;
    }

    .chat-main b {
      font-size: 15px;
    }

    .chat-stat {
      min-width: 0;
      justify-self: end;
    }

    .chat-link {
      justify-self: end;
      color: var(--blue);
      background: transparent;
      border-radius: 0;
      padding: 0;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      text-decoration: none;
    }

    .chat-link:hover {
      text-decoration: underline;
    }

    @media (max-width: 1360px) {
      .tree-clean summary {
        grid-template-columns: minmax(260px, 1fr) 110px 130px 130px;
      }

      .chat-leaf {
        grid-template-columns: minmax(240px, 1fr) 108px 108px 110px 136px !important;
      }
    }

    @media (max-width: 1200px) {
      .tree-clean summary {
        grid-template-columns: minmax(250px, 1fr) 105px 120px;
      }

      .tree-clean summary .hide-md {
        display: none;
      }

      .chat-leaf {
        grid-template-columns: minmax(220px, 1fr) 100px 100px 120px !important;
      }

      .chat-leaf .chat-link {
        justify-self: start;
      }

      .chat-leaf > span:last-child {
        justify-self: start;
      }
    }

    @media (max-width: 820px) {
      .tree-toolbar {
        align-items: flex-start;
      }

      .tree-toolbar-actions {
        width: 100%;
      }

      .tree-clean .tree-children {
        padding-left: 10px;
      }

      .chat-leaf {
        grid-template-columns: 1fr !important;
      }

      .chat-stat,
      .chat-link {
        justify-self: start;
        text-align: left;
      }
    }


    /* v5: fixes for page "Инциденты" */
    .incidents-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .incidents-kpi-row .kpi {
      min-width: 0;
      width: 100%;
      grid-column: auto !important;
      min-height: 126px;
    }

    .incidents-kpi-row .kpi .label,
    .incidents-kpi-row .kpi .delta {
      padding-right: 48px;
      max-width: none;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      line-height: 1.25;
    }

    .incidents-kpi-row .kpi .value {
      font-size: clamp(28px, 3vw, 38px);
      letter-spacing: -.055em;
      line-height: 1.05;
    }

    .incidents-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(340px, .55fr);
      gap: 18px;
      align-items: stretch;
    }

    .incidents-layout .card {
      height: 100%;
    }

    .incident-list {
      display: grid;
      gap: 12px;
    }

    .incident-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 150px;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface-soft);
      min-width: 0;
    }

    .incident-card-main {
      min-width: 0;
    }

    .incident-card-main b {
      display: block;
      font-size: 15px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .incident-card-main small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .incident-card-meta {
      display: grid;
      justify-items: end;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      text-align: right;
    }

    .status-funnel {
      display: grid;
      gap: 18px;
    }

    .status-funnel-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 42px;
      gap: 12px;
      align-items: center;
      min-width: 0;
    }

    .status-funnel-row b,
    .status-funnel-row small {
      overflow-wrap: anywhere;
    }

    .status-funnel-row small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .status-funnel-row .progress {
      margin-top: 9px;
    }

    @media (max-width: 1280px) {
      .incidents-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .incidents-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .incidents-kpi-row {
        grid-template-columns: 1fr;
      }

      .incident-card {
        grid-template-columns: 44px minmax(0, 1fr);
      }

      .incident-card-meta {
        grid-column: 2;
        justify-items: start;
        text-align: left;
      }
    }


    /* v6: fixes for page "Рассылки" */
    .mailings-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .mailings-kpi-row .kpi {
      min-width: 0;
      width: 100%;
      grid-column: auto !important;
      min-height: 126px;
    }

    .mailings-kpi-row .kpi .label,
    .mailings-kpi-row .kpi .delta {
      padding-right: 48px;
      max-width: none;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      line-height: 1.25;
    }

    .mailings-kpi-row .kpi .value {
      font-size: clamp(28px, 3vw, 38px);
      letter-spacing: -.055em;
      line-height: 1.05;
    }

    .mailings-layout {
      display: grid;
      grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr);
      gap: 18px;
      align-items: stretch;
    }

    .mailings-layout .card {
      height: 100%;
    }

    .mailing-form-card .form-grid {
      grid-template-columns: 1fr 1fr;
    }

    .mailing-form-card textarea.input {
      min-height: 132px;
      line-height: 1.45;
    }

    .recipient-tree-card .tree-panel {
      padding: 20px;
    }

    .recipient-tree-card .tree-toolbar {
      margin-bottom: 14px;
    }

    .recipient-tree-card .tree-clean summary {
      grid-template-columns: minmax(260px, 1fr) 100px 125px 125px 130px;
      min-height: 56px;
      padding: 12px 14px;
      column-gap: 12px;
    }

    .recipient-tree-card .tree-clean .tree-meta {
      text-align: right;
      justify-self: end;
      min-width: 0;
    }

    .recipient-row {
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 16px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 100px 125px 125px 130px;
      gap: 12px;
      align-items: center;
      min-width: 0;
      font-size: 13px;
      font-weight: 850;
      box-shadow: 0 4px 14px rgba(18, 32, 51, .03);
    }

    .recipient-row b {
      display: block;
      overflow-wrap: anywhere;
    }

    .recipient-row .tree-meta {
      text-align: right;
      justify-self: end;
    }

    .recipient-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .mailing-journal-card {
      margin-top: 18px;
    }

    @media (max-width: 1380px) {
      .mailings-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1280px) {
      .mailings-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .recipient-tree-card .tree-clean summary,
      .recipient-row {
        grid-template-columns: 1fr;
      }

      .recipient-tree-card .tree-clean .tree-meta,
      .recipient-row .tree-meta {
        text-align: left;
        justify-self: start;
      }
    }

    @media (max-width: 720px) {
      .mailings-kpi-row,
      .mailing-form-card .form-grid {
        grid-template-columns: 1fr;
      }
    }


    /* v7: recipient selector with checkboxes */
    .recipient-tree-card .tree-clean summary {
      grid-template-columns: minmax(300px, 1fr) 105px 135px;
      min-height: 56px;
      padding: 12px 14px;
      column-gap: 14px;
    }

    .recipient-tree-card .tree-clean .tree-title {
      gap: 10px;
    }

    .recipient-checkbox {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      accent-color: var(--blue);
      flex: 0 0 auto;
      cursor: pointer;
    }

    .recipient-check-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .recipient-check-label b,
    .recipient-check-label span {
      overflow-wrap: anywhere;
    }

    .recipient-row {
      grid-template-columns: minmax(300px, 1fr) 105px 135px 105px;
    }

    .recipient-row .recipient-check-label {
      font-weight: 900;
    }

    .recipient-row .chat-link {
      justify-self: end;
      background: transparent;
      padding: 0;
      border-radius: 0;
      color: var(--blue);
      text-decoration: none;
    }

    .recipient-row .chat-link:hover {
      text-decoration: underline;
    }

    .recipient-help {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.4;
    }

    @media (max-width: 900px) {
      .recipient-tree-card .tree-clean summary,
      .recipient-row {
        grid-template-columns: 1fr;
      }

      .recipient-row .chat-link {
        justify-self: start;
      }
    }


    /* v8: mailings modal wizard */
    .mailings-page-layout {
      display: grid;
      gap: 18px;
    }



    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(16, 24, 40, .48);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-backdrop.is-open {
      display: flex;
    }

    .modal {
      width: min(1080px, 100%);
      max-height: min(860px, calc(100vh - 48px));
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 30px 90px rgba(16, 24, 40, .28);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border: 1px solid rgba(228, 234, 242, .95);
    }

    .modal-head {
      padding: 22px 24px 18px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
      border-bottom: 1px solid var(--border);
    }

    .modal-head h2 {
      margin: 0;
      font-size: 24px;
      letter-spacing: -.03em;
    }

    .modal-head p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
      line-height: 1.45;
    }

    .modal-close {
      border: 1px solid var(--border);
      background: var(--surface-soft);
      border-radius: 14px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      color: var(--muted);
    }

    .wizard-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      background: #fbfdff;
    }

    .wizard-step {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid var(--border);
      color: var(--muted);
      font-weight: 900;
      font-size: 13px;
      min-width: 0;
    }

    .wizard-step span {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: #eef3fa;
      color: var(--muted);
      flex: 0 0 auto;
    }

    .wizard-step.is-active {
      border-color: rgba(29, 95, 209, .35);
      background: var(--blue-soft);
      color: var(--blue);
    }

    .wizard-step.is-active span {
      background: var(--blue);
      color: #fff;
    }

    .wizard-body {
      padding: 24px;
      overflow: auto;
      min-height: 420px;
    }

    .wizard-page {
      display: none;
    }

    .wizard-page.is-active {
      display: block;
    }

    .modal .recipient-tree-card {
      box-shadow: none;
      border-radius: 22px;
    }

    .modal .recipient-tree-card .card-inner {
      padding: 18px;
    }

    .confirm-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .confirm-message {
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface-soft);
      line-height: 1.55;
      font-weight: 750;
    }

    .modal-foot {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      background: #fff;
    }

    .modal-foot-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }




    @media (max-width: 1120px) {
      .wizard-steps,
      .confirm-grid {
        grid-template-columns: 1fr;
      }
    }


    /* v11: fixes for modal step 2 */
    .wizard-page[data-wizard-page="2"] .recipient-tree-card {
      border: 1px solid var(--border);
      border-radius: 24px;
      background: #fff;
      box-shadow: none;
      overflow: hidden;
    }

    .wizard-page[data-wizard-page="2"] .card-head {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 18px 18px 14px;
      margin: 0;
      border-bottom: 1px solid var(--border);
    }

    .wizard-page[data-wizard-page="2"] .card-head h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -.02em;
    }

    .wizard-page[data-wizard-page="2"] .recipient-tree-card .card-inner {
      padding: 18px;
    }

    .wizard-page[data-wizard-page="2"] .tree-toolbar {
      margin-bottom: 14px;
    }

    .wizard-page[data-wizard-page="2"] .recipient-row {
      grid-template-columns: minmax(260px, 1fr) 110px;
      gap: 14px;
      align-items: center;
    }

    .wizard-page[data-wizard-page="2"] .recipient-row .tree-meta {
      justify-self: end;
      text-align: right;
    }

    .wizard-page[data-wizard-page="2"] .recipient-row .hide-md,
    .wizard-page[data-wizard-page="2"] .recipient-row .chat-link {
      display: none !important;
    }

    .wizard-page[data-wizard-page="2"] .recipient-check-label {
      min-width: 0;
    }

    @media (max-width: 900px) {
      .wizard-page[data-wizard-page="2"] .recipient-row {
        grid-template-columns: 1fr;
      }

      .wizard-page[data-wizard-page="2"] .recipient-row .tree-meta {
        justify-self: start;
        text-align: left;
      }
    }


    /* v12: Organizations modal */
    .org-modal .modal {
      width: min(900px, 100%);
    }

    .org-rights {
      display: grid;
      gap: 0;
      margin-top: 16px;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
      background: var(--surface-soft);
    }

    .org-rights-title {
      margin: 0 0 12px;
      font-size: 18px;
      letter-spacing: -.02em;
    }


    /* v13: Settings cleanup */
    .settings-layout {
      display: grid;
      grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.1fr);
      gap: 18px;
      align-items: start;
    }

    .api-key-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: end;
    }

    .api-key-note {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.45;
    }

    .tags-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .tag-list-simple {
      display: grid;
      gap: 10px;
    }

    .tag-row-simple {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px 14px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      border-radius: 16px;
      min-width: 0;
    }

    .tag-row-simple b {
      overflow-wrap: anywhere;
      font-size: 14px;
    }

    .tag-remove {
      border: 1px solid var(--red-soft);
      background: var(--red-soft);
      color: var(--red);
      border-radius: 999px;
      padding: 8px 11px;
      font-weight: 900;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }

    .add-tag-inline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      margin-top: 16px;
    }

    @media (max-width: 1180px) {
      .settings-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .api-key-row,
      .add-tag-inline {
        grid-template-columns: 1fr;
      }
    }