:root {
      --black: #121015;
      --black-2: #1c1722;
      --purple: #261635;
      --purple-2: #3b2354;
      --white: #fffaf1;
      --paper: #fff6df;
      --gold: #d6ac42;
      --yellow: #f4d35e;
      --muted: #817669;
      --wall: #151219;
      --wall-soft: #44364f;
      --floor: #f1dfc5;
      --floor-2: #ead0a9;
      --corridor: #d8d0c6;
      --green: #43b86c;
      --blue: #4b91d9;
      --red: #d76250;
      --gray: #a9a39b;
      --shadow: 0 18px 45px rgba(18, 16, 21, 0.2);
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      background: radial-gradient(circle at top left, rgba(214,172,66,.22), transparent 32%), linear-gradient(135deg, #fffaf1, #ded3c3);
      color: var(--black);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    button { font: inherit; }
    .app { height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(960px, 1fr) 360px; gap: 14px; padding: 14px; }
    .app.sidebar-hidden { grid-template-columns: minmax(960px, 1fr); }
    .app.sidebar-hidden .sidebar { display: none; }
    .main { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
    .topbar, .tabs, .side-card, .map { border: 3px solid var(--black); background: rgba(255,250,241,.96); box-shadow: var(--shadow); }

    .topbar { border-radius: 20px; min-height: 72px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .brand { display: flex; align-items: center; gap: 12px; }
    .logo { width: 44px; height: 44px; border: 3px solid var(--black); background: linear-gradient(135deg, var(--black) 0 45%, var(--purple) 45% 63%, var(--gold) 63%); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
    h1 { margin: 0; font-size: 19px; line-height: 1.1; }
    .subtitle { margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .top-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .pill { border: 2px solid var(--black); border-radius: 999px; padding: 8px 10px; background: var(--black); color: var(--white); font-size: 12px; font-weight: 950; white-space: nowrap; }
    .pill.gold { background: var(--gold); color: var(--black); }
    .pill.purple { background: var(--purple); color: var(--white); }

    .tabs { position: relative; z-index: 30; border-radius: 14px; padding: 5px; display: flex; gap: 4px; overflow-x: auto; align-items: center; }
    .app:not(.sidebar-hidden) .tabs { width: calc(100% + 374px); }
    .tab { border: 0; border-radius: 10px; padding: 7px 9px; background: transparent; color: #4d4440; font-size: 13px; line-height: 1.1; font-weight: 850; white-space: nowrap; cursor: pointer; }
    .tab.active { background: var(--black); color: var(--white); box-shadow: inset 0 -4px 0 var(--gold); }
    .nav-dropdown { position: absolute; z-index: 80; top: 54px; left: 0; min-width: 250px; border: 3px solid var(--black); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); padding: 8px; display: grid; gap: 6px; }
    .nav-dropdown[hidden] { display: none; }
    .nav-dropdown button { border: 0; border-radius: 11px; background: #f3eee6; padding: 10px 12px; text-align: left; font-weight: 950; cursor: pointer; }
    .nav-dropdown button:hover, .nav-dropdown button.active { background: var(--gold); color: var(--black); }
    .badge { margin-left: 3px; padding: 1px 5px; border-radius: 7px; background: var(--gold); color: var(--black); font-size: 10px; }

    .map { min-height: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), #d7cbb9; background-size: 28px 28px; padding: 14px; }
    .map-grid { position: relative; height: 100%; display: grid; grid-template-columns: 290px 76px minmax(660px, 1fr); grid-template-rows: minmax(560px, 1fr) 210px; gap: 10px; }

    .building { position: relative; border: 5px solid var(--wall); border-radius: 14px; box-shadow: 0 8px 0 rgba(0,0,0,.24); overflow: hidden; }
    .building::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: linear-gradient(#3f304c, var(--black)); border-bottom: 3px solid #070608; z-index: 2; }
    .building-title { position: absolute; top: 8px; left: 10px; z-index: 5; padding: 4px 8px; border: 2px solid var(--black); border-radius: 8px; background: var(--gold); color: var(--black); font-size: 11px; font-weight: 950; box-shadow: 0 3px 0 rgba(0,0,0,.18); }

    .office { grid-row: 1 / span 2; background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), var(--black-2); background-size: 24px 24px; padding: 50px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; align-content: start; }
    .agent-desk { min-height: 118px; border: 3px solid #070608; border-radius: 10px; background: #c69052; box-shadow: inset 0 -14px 0 #7b4d2e, 0 4px 0 rgba(0,0,0,.25); position: relative; padding: 8px; cursor: pointer; }
    .agent-desk::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 46px; height: 30px; border: 3px solid #070608; background: #e9f0f3; box-shadow: inset 0 -9px 0 #8aa5b7; }
    .agent-desk.empty { opacity: .45; filter: grayscale(.4); }
    .desk-label { position: absolute; left: 7px; right: 7px; bottom: 7px; border: 2px solid #070608; border-radius: 7px; background: var(--white); padding: 4px 5px; font-size: 10px; line-height: 1.15; font-weight: 950; text-align: center; }
    .dot { position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; border: 3px solid #070608; border-radius: 50%; background: var(--green); }
    .dot.needs-human { background: var(--yellow); }
    .dot.chatting { background: var(--blue); }
    .dot.paused { background: var(--gray); }

    .corridor { grid-row: 1 / span 2; border: 5px solid var(--wall); border-radius: 14px; background: repeating-linear-gradient(0deg, #ded7cf 0 28px, #c9c0b6 28px 30px); position: relative; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
    .corridor-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; white-space: nowrap; border: 2px solid var(--black); border-radius: 8px; background: var(--white); padding: 5px 9px; font-size: 11px; font-weight: 950; }
    .walking-agent { position: absolute; width: 36px; height: 54px; left: 50%; top: 36%; transform: translateX(-50%); border: 3px solid #070608; border-radius: 12px 12px 7px 7px; background: linear-gradient(#e4b391 0 34%, var(--purple-2) 34% 70%, #242024 70%); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
    .walking-agent::after { content: "передаёт\A инфо"; white-space: pre; position: absolute; left: 32px; top: -18px; width: 72px; border: 2px solid var(--black); border-radius: 8px; background: #fff; padding: 4px; font-size: 10px; line-height: 1.05; font-weight: 900; }

    .branch1 { background: var(--floor); padding: 50px 12px 12px; display: grid; grid-template-columns: 1.05fr 1.2fr 1fr; grid-template-rows: 180px 150px 210px; gap: 10px; }
    .branch2 { background: #efe2f7; padding: 50px 12px 12px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .branch2 .room { max-width: 520px; margin: 0 auto; width: 100%; }

    .room { position: relative; min-height: 0; border: 4px solid var(--wall-soft); border-radius: 10px; background: linear-gradient(90deg, rgba(80,50,20,.07) 1px, transparent 1px), linear-gradient(rgba(80,50,20,.07) 1px, transparent 1px), var(--floor-2); background-size: 22px 22px; padding: 32px 9px 9px; overflow: hidden; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
    .room:hover, .agent-desk:hover, .service-card:hover, .client-card:hover, .resting-master-card:hover { transform: translateY(-1px); box-shadow: 0 7px 0 rgba(0,0,0,.18); border-color: var(--gold); }
    .room.selected, .agent-desk.selected { outline: 4px solid rgba(214,172,66,.42); border-color: var(--gold); }
    .room h3 { position: absolute; left: 8px; top: 6px; margin: 0; padding: 4px 7px; border: 2px solid var(--black); border-radius: 7px; background: var(--black); color: var(--white); font-size: 11px; line-height: 1; font-weight: 950; z-index: 4; }
    .room h3 .count { color: var(--gold); }
    .door { position: absolute; z-index: 8; background: var(--white); border: 2px solid #876f57; color: #4f4034; font-size: 9px; font-weight: 950; text-align: center; display: grid; place-items: center; }
    .door.left { left: -4px; top: 45%; width: 10px; height: 54px; writing-mode: vertical-rl; }

    .reception { grid-column: 1; grid-row: 1 / span 2; }
    .manicure { grid-column: 2; grid-row: 1 / span 2; }
    .pedicure { grid-column: 3; grid-row: 1; }
    .breakroom { grid-column: 3; grid-row: 2; }
    .lash { grid-column: 1; grid-row: 3; }
    .haircut { grid-column: 2; grid-row: 3; }
    .cosmetology { grid-column: 3; grid-row: 3; }

    .cards { display: grid; gap: 8px; height: 100%; }
    .cards.two { grid-template-columns: 1fr 1fr; }
    .cards.three { grid-template-columns: repeat(3, 1fr); }
    .cards.four { grid-template-columns: 1fr 1fr; }
    .service-card, .note { border: 3px solid var(--black); border-radius: 10px; background: var(--white); padding: 8px; box-shadow: 0 3px 0 rgba(0,0,0,.14); font-size: 10px; line-height: 1.22; font-weight: 850; }
    .service-card strong { display: block; margin-bottom: 3px; font-size: 11px; }
    .service-card .sub { color: var(--muted); font-size: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .note { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .master-chip { display: block; margin-top: 5px; padding: 3px 5px; border-radius: 7px; background: var(--black); color: var(--white); font-size: 9px; font-weight: 950; }
    .master-chip.free { background: var(--green); color: var(--black); }
    .master-chip.busy { background: var(--gold); color: var(--black); }
    .status-chip { display: inline-block; margin-top: 6px; padding: 3px 6px; border: 2px solid var(--black); border-radius: 999px; background: var(--gray); color: var(--black); font-size: 9px; font-weight: 950; }
    .status-chip.busy { background: var(--gold); }
    .status-chip.free { background: var(--green); }
    .status-chip.soon { background: var(--blue); color: var(--white); }
    .status-chip.client_waiting { background: var(--yellow); }
    .status-chip.no_master { background: var(--gray); }
    .status-chip.free_until_next { background: var(--purple-2); color: var(--white); }
    .appointment-line { display: block; margin-top: 5px; font-size: 9px; color: var(--black); font-weight: 950; }
    .waiting-queue { grid-column: 1 / span 2; display: grid; gap: 6px; min-height: 0; }
    .queue-title { font-size: 10px; font-weight: 950; color: var(--black); }
    .client-card { border: 3px solid var(--black); border-radius: 10px; background: var(--paper); padding: 7px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.14); }
    .client-card strong { display: block; font-size: 11px; margin-bottom: 2px; }
    .client-card small { display: block; color: var(--muted); font-size: 9px; font-weight: 850; }
    .client-card .route { margin-top: 4px; color: var(--purple); font-size: 9px; font-weight: 950; }
    .client-card.waiting { background: #fff0b8; }
    .client-card.called_soon { background: #dcecff; }
    .client-flow-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
    .flow-route { position: absolute; height: 16px; border: 2px solid rgba(18,16,21,.58); border-radius: 999px; background: rgba(255, 250, 241, .66); box-shadow: 0 2px 0 rgba(0,0,0,.12); display: flex; align-items: center; gap: 4px; padding: 1px 5px; font-size: 8px; font-weight: 950; color: var(--black); pointer-events: auto; cursor: pointer; opacity: .48; transition: opacity .14s ease, height .14s ease, transform .14s ease, background .14s ease; }
    .flow-route::before { content: ""; flex: 1; min-width: 18px; border-top: 2px dashed var(--purple); }
    .flow-route::after { content: "➜"; color: var(--gold); font-size: 11px; line-height: 1; }
    .flow-route.waiting { background: rgba(255,240,184,.62); }
    .flow-route.called_soon { background: rgba(220,236,255,.62); }
    .flow-route:hover, .flow-route.selected { height: 20px; opacity: 1; background: rgba(255, 250, 241, .96); transform: translateY(-1px); }
    .flow-label { order: -1; border: 1px solid var(--black); border-radius: 999px; background: var(--purple); color: var(--white); padding: 1px 5px; white-space: nowrap; }
    .flow-steps { position: absolute; top: 22px; left: 6px; right: 6px; display: none; justify-content: space-between; gap: 4px; color: var(--purple); font-size: 8px; text-shadow: 0 1px 0 var(--white); }
    .flow-route:hover .flow-steps, .flow-route.selected .flow-steps { display: flex; }
    .flow-step { padding: 1px 4px; border: 1px solid rgba(18,16,21,.25); border-radius: 999px; background: rgba(255,250,241,.86); white-space: nowrap; }
    .resting-masters { grid-column: 1 / span 1; display: grid; gap: 6px; }
    .resting-master-card { border: 3px solid var(--black); border-radius: 10px; background: #f3e8ff; padding: 7px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.14); }
    .resting-master-card strong { display: block; font-size: 11px; margin-bottom: 2px; }
    .resting-master-card small { display: block; color: var(--muted); font-size: 9px; font-weight: 850; }
    .resting-master-card .route { margin-top: 4px; color: var(--purple); font-size: 9px; font-weight: 950; }
    .service-card.dark { background: var(--purple); color: var(--white); }
    .service-card.gold { background: var(--gold); color: var(--black); }
    .service-card.sofa { border-radius: 18px 18px 9px 9px; background: #c8925f; }
    .service-card.bed { min-height: 76px; display: grid; place-items: center; text-align: center; }
    .service-card.device { background: #ece8ff; color: #27163a; }
    .flash { color: #1bb7d4; text-shadow: 0 0 12px rgba(27,183,212,.55); font-weight: 950; }

    .admin-zone { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 74px 82px 1fr; gap: 8px; height: 100%; }
    .admin-table { grid-column: 1 / span 2; }
    .waiting-note { grid-column: 1 / span 2; align-self: end; border-style: dashed; }

    .mani-station { border: 3px solid var(--black); border-radius: 10px; background: var(--white); display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 6px; padding: 6px; min-height: 86px; box-shadow: 0 3px 0 rgba(0,0,0,.14); }
    .seat { border: 2px solid var(--black); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-size: 9px; font-weight: 950; background: #eec19b; }
    .seat.master { background: #fff; }
    .nail-table { min-height: 42px; border: 3px solid var(--black); border-radius: 8px; background: #d9a46f; display: grid; place-items: center; text-align: center; font-size: 9px; font-weight: 950; box-shadow: inset 0 -8px 0 rgba(90,55,30,.28); }
    .station-caption { grid-column: 1 / span 3; font-size: 10px; color: #5d5045; font-weight: 900; text-align: center; }

    .person-row { position: absolute; right: 8px; bottom: 7px; display: flex; gap: 5px; }
    .person { width: 22px; height: 34px; border: 2px solid var(--black); border-radius: 10px 10px 5px 5px; background: linear-gradient(#e9b28e 0 38%, var(--purple-2) 38% 72%, #242024 72%); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
    .person.master { background: linear-gradient(#b57654 0 38%, #fff 38% 72%, #444 72%); }
    .person.client { background: linear-gradient(#dfb28f 0 38%, var(--gold) 38% 72%, #4d405c 72%); }

    .sidebar { min-height: 0; max-height: calc(100vh - 28px); overflow-y: auto; padding-right: 4px; display: grid; grid-auto-rows: max-content; gap: 12px; scrollbar-color: var(--gold) rgba(18,16,21,.14); }
    .app:not(.sidebar-hidden) .sidebar { margin-top: 56px; max-height: calc(100vh - 84px); }
    .side-card { border-radius: 18px; padding: 14px; }
    .agent-card { background: var(--black); color: var(--white); }
    .agent-card h2 { margin: 0 0 5px; font-size: 18px; }
    .agent-card p { margin: 0; color: #dbc9a8; font-weight: 750; font-size: 12px; }
    .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .metric { border-radius: 12px; background: rgba(255,255,255,.08); padding: 9px; }
    .metric b { display: block; color: var(--gold); font-size: 20px; }
    .metric span { font-size: 10px; color: #dbc9a8; font-weight: 850; }
    .title { margin-bottom: 9px; font-size: 14px; font-weight: 950; display: flex; justify-content: space-between; gap: 10px; }
    .rule, .details { border: 2px solid #dfcaa4; border-radius: 12px; background: #fff2cf; padding: 10px; font-size: 12px; line-height: 1.35; font-weight: 800; }
    .details { background: #fffaf1; }
    .details h3 { margin: 0 0 6px; font-size: 15px; }
    .details ul { margin: 8px 0 0; padding-left: 18px; }
    .tasks { display: grid; gap: 8px; }
    .task { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; border: 2px solid #dfd0b8; border-radius: 12px; background: #fff8eb; padding: 8px; }
    .task.critical { border-color: var(--gold); background: #fff0b8; }
    .task.ok { background: #effff4; }
    .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--black); color: var(--gold); display: grid; place-items: center; font-size: 10px; font-weight: 950; }
    .task strong { display: block; font-size: 12px; }
    .task small { color: var(--muted); font-size: 10px; font-weight: 800; }
    .section-note { margin: -4px 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.3; }
    .agent-tool { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; border: 2px solid #dfd0b8; border-radius: 12px; background: #fff8eb; padding: 9px; }
    .agent-tool strong { display: block; font-size: 12px; }
    .agent-tool small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; margin-top: 2px; }
    .tool-status { border: 2px solid var(--black); border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 950; background: var(--green); color: var(--black); white-space: nowrap; }
    .tool-status.watch { background: var(--yellow); }
    .tool-status.pause { background: var(--gray); }
    .integration-list { display: grid; gap: 7px; }
    .integration-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; border: 2px solid #dfd0b8; border-radius: 12px; background: #fff8eb; padding: 8px; cursor: pointer; }
    .integration-item strong { display: block; font-size: 12px; }
    .integration-item small { color: var(--muted); font-size: 10px; font-weight: 800; }
    .integration-dot { width: 18px; height: 18px; border: 3px solid var(--black); border-radius: 50%; background: var(--gray); }
    .integration-dot.connected { background: var(--green); }
    .integration-dot.attention { background: var(--yellow); }
    .integration-dot.paused { background: var(--gray); }
    .integration-dot.planned { background: var(--blue); }
    .launch-checklist { display: grid; gap: 7px; }
    .launch-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; border: 2px solid #dfd0b8; border-radius: 12px; background: #fff8eb; padding: 8px; cursor: pointer; }
    .launch-item.done { background: #effff4; opacity: .78; }
    .launch-box { width: 22px; height: 22px; border: 3px solid var(--black); border-radius: 7px; background: var(--white); display: grid; place-items: center; font-size: 13px; font-weight: 950; }
    .launch-item.done .launch-box { background: var(--green); }
    .launch-item strong { display: block; font-size: 12px; }
    .launch-item small { color: var(--muted); font-size: 10px; font-weight: 800; }
    .analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .analytics-tile { border: 2px solid #dfd0b8; border-radius: 12px; background: #fff8eb; padding: 9px; }
    .analytics-tile b { display: block; color: var(--black); font-size: 18px; line-height: 1; }
    .analytics-tile span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 850; }
    .agent-tool.resolved, .task.resolved { opacity: .55; filter: grayscale(.35); }
    .tool-actions, .notice-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
    .mini-btn { border: 2px solid var(--black); border-radius: 999px; background: var(--white); padding: 4px 7px; font-size: 9px; font-weight: 950; cursor: pointer; }
    .mini-btn.active, .mini-btn.gold { background: var(--gold); color: var(--black); }
    .mini-btn.dark { background: var(--black); color: var(--white); }
    .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn { min-height: 40px; border: 2px solid var(--black); border-radius: 12px; background: var(--white); font-weight: 950; cursor: pointer; }
    .btn.gold { background: var(--gold); }
    .btn.dark { background: var(--black); color: var(--white); }
    .toast { position: sticky; bottom: 0; z-index: 20; border: 3px solid var(--black); border-radius: 14px; background: var(--gold); color: var(--black); padding: 9px 10px; font-size: 12px; font-weight: 950; box-shadow: var(--shadow); }
    .settings-page { min-height: 0; border: 3px solid var(--black); border-radius: 22px; background: rgba(255,250,241,.97); box-shadow: var(--shadow); padding: 18px; overflow-y: auto; }
    .settings-page[hidden] { display: none; }
    .settings-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
    .settings-header h2 { margin: 0; font-size: 28px; }
    .settings-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .settings-tab { border: 0; border-radius: 12px; padding: 10px 12px; background: #eee8df; color: #625a52; font-weight: 950; cursor: pointer; }
    .settings-tab.active { background: var(--black); color: var(--white); box-shadow: inset 0 -4px 0 var(--gold); }
    .settings-studio-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
    .settings-studio-tab { border: 1px solid #d5d6dc; border-radius: 999px; background: #fff; color: #4d505b; padding: 9px 13px; font-size: 12px; font-weight: 900; cursor: pointer; }
    .settings-studio-tab.active { border-color: var(--green); background: #f1faf2; color: #2f7e36; }
    .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .settings-card { border: 2px solid #dfd0b8; border-radius: 18px; background: #fff8eb; padding: 14px; }
    .settings-card h3 { margin: 0 0 10px; font-size: 18px; }
    .channel-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 2px solid #dfd0b8; border-radius: 14px; background: #fffaf1; margin-bottom: 8px; cursor: pointer; }
    .channel-row.active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,172,66,.2); }
    .channel-row small { display: block; color: var(--muted); font-weight: 800; margin-top: 2px; }
    .settings-form { display: grid; gap: 12px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .field { display: grid; gap: 5px; }
    .field label { font-size: 12px; font-weight: 950; }
    .field input, .field select, .field textarea { width: 100%; border: 2px solid #dfd0b8; border-radius: 12px; background: var(--white); padding: 10px; font: inherit; font-weight: 800; }
    .field input[type=password] { letter-spacing: .08em; }
    .settings-status { border: 2px solid var(--black); border-radius: 14px; background: #fff2cf; padding: 10px; font-weight: 950; }
    .settings-status.ready { background: #effff4; }
    .toggle-row, .stoplist-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eadfce; font-weight: 850; }
    .toggle { width: 46px; height: 25px; border: 2px solid var(--black); border-radius: 999px; background: #ddd; position: relative; cursor: pointer; flex: 0 0 auto; }
    .toggle::before { content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--white); left: 2px; top: 2px; border: 1px solid #c8c0b8; transition: left .12s ease; }
    .toggle.on { background: var(--green); }
    .toggle.on::before { left: 23px; }
    .secret-note { color: var(--muted); font-size: 12px; font-weight: 850; line-height: 1.35; }
    .settings-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
    .primary-action, .secondary-action { border: 2px solid var(--black); border-radius: 12px; padding: 10px 14px; font-weight: 950; cursor: pointer; }
    .primary-action { background: var(--gold); }
    .secondary-action { background: var(--white); }
    .settings-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
    .settings-subtab { border: 0; border-radius: 999px; background: #eee8df; padding: 7px 10px; font-size: 11px; font-weight: 950; }

    .dialogs-page { min-height: 0; border: 1px solid #e1e2e6; border-radius: 22px; background: #fff; box-shadow: 0 14px 35px rgba(18,16,21,.08); overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); }
    .dialogs-page[hidden] { display: none; }
    .dialogs-top { min-height: 76px; padding: 14px 18px; border-bottom: 1px solid #eceef2; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .dialogs-top-left { display: flex; gap: 28px; align-items: center; }
    .dialogs-back { border: 0; border-radius: 18px; background: #f2f2f3; padding: 14px 22px; font-weight: 850; color: #101b27; }
    .dialogs-tabs { display: flex; gap: 28px; align-items: center; font-size: 20px; font-weight: 850; }
    .dialogs-tabs span { color: #747783; padding: 21px 0; }
    .dialogs-tabs .active { color: #101b27; border-bottom: 3px solid #43d982; }
    .dialogs-top-actions { display: flex; align-items: center; gap: 14px; font-weight: 850; color: #747783; }
    .dialog-avatar-small { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 950; }
    .dialog-avatar-small.orange { background: #ff7b55; } .dialog-avatar-small.red { background: #d24b43; }
    .dialogs-layout { min-height: 0; height: 100%; display: grid; grid-template-columns: 380px minmax(480px, 1fr) 340px; background: #fff; }
    .dialogs-left { min-height: 0; border-right: 1px solid #eceef2; padding: 18px 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
    .dialogs-search-row { display: grid; grid-template-columns: minmax(0,1fr) 42px 42px; gap: 10px; align-items: center; }
    .dialogs-search { border: 1px solid #d7d8de; border-radius: 14px; background: #fff; padding: 13px 14px; font-size: 14px; font-weight: 650; }
    .dialogs-icon-btn { border: 0; background: transparent; color: #a4a7ae; font-size: 26px; cursor: pointer; }
    .dialog-groups { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding-right: 4px; }
    .dialog-group-head { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; }
    .dialog-group-pill { border: 0; border-radius: 12px; background: #f2f2f3; padding: 11px 14px; color: #101b27; font-size: 14px; font-weight: 850; cursor: pointer; }
    .dialog-group-pill.active { background: #bafad6; }
    .dialog-group-count { color: #43d982; font-size: 12px; font-weight: 850; text-decoration: underline; }
    .dialog-group-toggle { border: 0; border-radius: 12px; background: #f2f2f3; color: #20232a; width: 38px; height: 38px; font-size: 22px; cursor: pointer; }
    .dialog-list { min-height: 0; display: grid; align-content: start; gap: 6px; padding: 6px 0 10px; }
    .dialog-list[hidden] { display: none; }
    .dialog-chat-row { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 0; border-radius: 14px; background: transparent; padding: 10px; text-align: left; cursor: pointer; }
    .dialog-chat-row.active { background: #f2f2f3; }
    .dialog-chat-meta { min-width: 0; display: grid; gap: 2px; }
    .dialog-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #e8e9ec; display: grid; place-items: center; color: #fff; font-size: 22px; }
    .dialog-channel-badge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 950; border: 2px solid #fff; }
    .dialog-channel-badge.telegram { background: #2aabee; } .dialog-channel-badge.max { background: #6246ff; } .dialog-channel-badge.whatsapp { background: #20a64a; } .dialog-channel-badge.vk { background: #1578ff; }
    .dialog-chat-name { font-size: 14px; font-weight: 850; color: #101b27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dialog-chat-phone { color: #909198; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dialog-chat-time { color: #747783; font-size: 11px; font-weight: 850; }
    .dialogs-center { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto auto auto; background: #fff; overflow: hidden; }
    .dialog-head { grid-row: 1; padding: 16px 22px; border-bottom: 1px solid #eceef2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .dialog-contact { display: flex; align-items: center; gap: 12px; }
    .dialog-contact h3 { margin: 0; font-size: 21px; }
    .dialog-contact small { display: block; color: #909198; font-size: 15px; font-weight: 700; }
    .dialog-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .dialog-head { flex-wrap: wrap; }
    .dialog-head [data-dialog-controls] { display: contents; }
    .dialog-head-actions [aria-label="Режим ответа"] { order: 1; display: flex; gap: 6px; }
    .dialog-head-actions [data-dialog-client-open] { order: 2; }
    .dialog-head-actions [aria-label="Очередь диалога"] { order: 3; display: flex; gap: 4px; }
    .dialog-head-actions [data-dialog-controls-refresh] { order: 4; }
    .dialog-head-actions [role="status"] { order: 5; flex-basis: 100%; font-size: 12px; }
    .dialog-head-actions .dialog-header-icon { border: 0; border-radius: 8px; padding: 5px; font-size: 22px; cursor: pointer; }
    .dialog-head-actions [data-dialog-status] { border: 1px solid #e1e2e6; border-radius: 8px; padding: 5px; background: #fff; }
    .dialog-head [aria-pressed="true"] { background: #eafff0; color: #19844a; border-radius: 8px; }
    .dialog-client-modal { box-sizing: border-box; width: min(680px, 94vw); max-height: 90vh; overflow-y: auto; border: 1px solid #e1e2e6; border-radius: 18px; padding: 20px; background: #fff; color: #262b38; }
    .dialog-client-modal::backdrop { background: rgba(16,18,23,.6); }
    .dialog-client-modal [data-dialog-client-close] { float: right; border: 0; background: transparent; font-size: 26px; cursor: pointer; }
    .dialog-client-modal .client-card-edit-form { display: grid; gap: 10px; }
    .dialog-client-modal label { display: grid; gap: 4px; }
    .dialog-client-modal input, .dialog-client-modal select { min-width: 0; padding: 8px; font: inherit; }
    .dialog-client-modal .client-card-field { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; overflow-wrap: anywhere; }
    .dialog-work-btn, .dialog-finish-btn { border: 0; border-radius: 14px; background: #f2f2f3; padding: 13px 18px; color: #101b27; font-weight: 850; cursor: pointer; }
    .dialog-finish-btn { background: #eafff0; color: #19844a; }
    .dialog-head-icon { border: 0; background: transparent; color: #a4a7ae; font-size: 26px; cursor: pointer; }
    .dialog-search-panel { grid-row: 2; padding: 8px 20px; border-bottom: 1px solid #eceef2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
    .dialog-search-panel[hidden] { display: none; }
    .dialog-search-panel input { min-height: 42px; border: 1px solid #43d982; border-radius: 14px; padding: 9px 14px; font-size: 15px; outline: none; }
    .dialog-subtabs { grid-row: 3; min-height: 52px; padding: 10px 22px 0; display: flex; align-items: end; gap: 28px; border-bottom: 1px solid #eceef2; }
    .dialog-subtabs span { padding-bottom: 12px; color: #747783; font-size: 18px; font-weight: 850; }
    .dialog-subtabs .active { color: #101b27; border-bottom: 3px solid #43d982; }
    .dialog-messages { grid-row: 4; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; min-width: 0; min-height: 0; width: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; background: #f3f3f4; padding: 28px; display: grid; align-content: start; gap: 18px; }
    .dialog-date { justify-self: center; border-radius: 12px; background: #fff; padding: 7px 14px; color: #747783; font-weight: 800; }
    .dialog-bubble { min-width: 0; min-height: max-content; max-width: 72%; box-sizing: border-box; overflow: hidden; border-radius: 20px; padding: 14px 16px; font-size: 17px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
    .dialog-bubble.has-reply { width: 72%; max-width: calc(100% - 16px); }
    .dialog-bubble.agent { justify-self: end; background: #e2e2e4; }
    .dialog-bubble.client { justify-self: start; background: #fff; }
    .dialog-message-reply-quote { display: block; width: 100%; min-width: 0; max-width: 100%; margin-bottom: 8px; border-left: 3px solid rgba(38,97,221,.55); border-radius: 5px; background: rgba(255,255,255,.34); padding: 5px 8px; box-sizing: border-box; color: #647086; font-size: 11px; font-style: italic; font-weight: 750; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dialog-message-text { min-width: 0; max-width: 100%; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
    .dialog-bubble small.dialog-message-meta { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 5px 14px; margin-top: 8px; color: #747783; font-size: 13px; font-style: italic; }
    .dialog-message-author { margin-left: auto; color: #596273; font-size: 10px; font-style: normal; font-weight: 850; line-height: 1.2; text-align: right; white-space: nowrap; opacity: .78; }
    .dialog-bubble.focused { outline: 3px solid rgba(67,217,130,.55); box-shadow: 0 0 0 6px rgba(67,217,130,.14); }
    .dialog-reply-preview { margin: 0 20px 10px; border-left: 4px solid #43d982; border-radius: 12px; background: #f4fff8; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #101b27; font-weight: 750; }
    .dialog-reply-preview small { display: block; margin-top: 3px; color: #747783; font-weight: 650; }
    .dialog-reply-close { border: 0; background: transparent; color: #a4a7ae; font-size: 20px; cursor: pointer; }
    .dialog-edit-preview { margin: 0 20px 10px; border-left: 4px solid #8a8d94; border-radius: 12px; background: #fff; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: start; color: #101b27; font-weight: 750; }
    .dialog-edit-preview b { color: #8a8d94; }
    .dialog-edit-preview small { display: block; margin-top: 3px; color: #101b27; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
    .dialog-edit-action { border: 0; background: transparent; color: #666a72; font-size: 26px; cursor: pointer; }
    .dialog-attachment-preview { margin: 0; padding: 10px 24px 12px; min-height: 50px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 8px; border-top: 1px solid #f0f1f3; background: #fff; }
    .dialog-file-chip { min-width: 0; border-radius: 10px; background: #f0f1f3; padding: 6px 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; max-width: none; }
    .dialog-file-thumb { width: 24px; height: 24px; border-radius: 6px; background: #d8eadb; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
    .dialog-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .dialog-send-btn.ready { color: #43bfa1; }
    .dialog-subtab-button { border: 0; background: transparent; padding: 0 0 12px; color: #747783; font-size: 18px; font-weight: 850; cursor: pointer; }
    .dialog-subtab-button.active { color: #101b27; border-bottom: 3px solid #43d982; }
    .dialog-empty-pins { justify-self: center; align-self: center; border-radius: 16px; background: #fff; padding: 18px 22px; color: #747783; font-weight: 850; }
    .dialog-context-menu { position: fixed; z-index: 260; min-width: 292px; border-radius: 20px; background: #fff; padding: 16px; display: grid; gap: 2px; box-shadow: 0 24px 70px rgba(16,18,23,.18); }
    .dialog-context-menu button { border: 0; background: transparent; padding: 13px 16px; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; text-align: left; color: #101b27; font-size: 20px; font-weight: 800; cursor: pointer; border-radius: 12px; }
    .dialog-context-menu button:hover { background: #f4f5f7; }
    .dialog-context-menu .context-icon { color: #b7bac1; font-size: 22px; line-height: 1; }
    .dialog-context-menu .danger { color: #ef4f4f; }
    .dialog-context-title { padding: 8px 16px 10px; color: #747783; font-size: 15px; font-weight: 900; }
    .dialog-list-modal-backdrop { position: fixed; inset: 0; z-index: 320; background: rgba(16,18,23,.62); display: grid; place-items: center; }
    .dialog-list-modal { width: min(520px, 92vw); border-radius: 28px; background: #fff; padding: 32px; display: grid; gap: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
    .dialog-list-modal h2 { margin: 0; font-size: 32px; }
    .dialog-list-modal label { display: grid; gap: 8px; color: #747783; font-weight: 850; }
    .dialog-list-modal input { border: 1px solid #d7d8de; border-radius: 18px; padding: 18px; font-size: 18px; font-weight: 700; }
    .dialog-list-color-grid { display: grid; grid-template-columns: repeat(6, 28px); grid-auto-rows: 28px; gap: 8px; align-items: center; }
    .dialog-list-color-swatch { width: 28px; height: 28px; border: 2px solid transparent; border-radius: 7px; cursor: pointer; display: grid; place-items: center; color: #6f737b; font-size: 17px; font-weight: 950; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
    .dialog-list-color-swatch.selected { border-color: #101b27; box-shadow: 0 0 0 3px rgba(67,217,130,.22), inset 0 0 0 1px rgba(0,0,0,.06); }
    .dialog-list-color-swatch.no-color { background: #f4f5f7; }
    .dialog-list-modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
    .dialog-delete-confirm { color: #ef4f4f; font-weight: 900; line-height: 1.35; }
    .danger-action { border-color: #ef4f4f; background: #ffecec; color: #ef4f4f; }
    .dialog-composer { grid-row: 7; position: relative; padding: 14px 20px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 12px; align-items: center; border-top: 1px solid #eceef2; }
    .dialog-composer-preview { grid-column: 1 / -1; min-width: 0; }
    .dialog-composer-preview:empty { display: none; }
    [data-dialog-quick-replies] { min-width: 0; box-sizing: border-box; }
    .dialog-quick-header { flex-wrap: wrap; gap: 8px; }
    .dialog-quick-header b { flex-basis: 100%; }
    .dialog-quick-grid button { min-width: 0; overflow-wrap: anywhere; }
    .dialog-quick-modal { width: min(600px, 90vw); max-height: 85vh; overflow: auto; box-sizing: border-box; border: 1px solid #d7d8de; border-radius: 16px; padding: 20px; }
    .dialog-quick-modal::backdrop { background: rgb(0 0 0 / 25%); }
    .dialog-quick-modal form { display: grid; gap: 12px; min-width: 0; }
    .dialog-quick-modal h2 { margin: 0; font-size: 20px; }
    .dialog-quick-modal form > label { display: grid; gap: 6px; min-width: 0; }
    .dialog-quick-modal input:not([type=radio]):not([type=checkbox]), .dialog-quick-modal textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #d7d8de; border-radius: 8px; font: inherit; }
    .dialog-quick-modal textarea { min-height: 100px; resize: vertical; }
    .dialog-quick-modal fieldset { display: grid; grid-template-columns: repeat(10, minmax(20px, 1fr)); gap: 6px; min-width: 0; border: 1px solid #d7d8de; }
    .dialog-quick-modal fieldset label { display: grid; place-items: center; min-height: 28px; border-radius: 6px; }
    .dialog-quick-modal [data-quick-file-name] { overflow-wrap: anywhere; }
    .dialog-quick-modal button { padding: 8px; border: 1px solid #d7d8de; border-radius: 8px; }
    .dialog-composer input, .dialog-composer textarea { min-width: 0; border: 1px solid #d7d8de; border-radius: 14px; padding: 14px; font: inherit; font-size: 14px; }
    .dialog-composer textarea { resize: vertical; max-height: 160px; }
    [data-dialog-quick-replies] { max-height: 180px; overflow-y: auto; padding: 10px 20px; }
    .dialog-quick-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    [data-dialog-quick-replies] .dialog-quick-grid { grid-template-columns: minmax(0, 1fr) 32px; }
    .dialogs-center > .connection-empty { grid-row: 6; padding: 8px 20px; }
    .dialog-template-btn { border: 0; border-radius: 14px; background: #f2f2f3; padding: 14px 18px; font-weight: 850; }
    .dialog-emoji-menu { position: absolute; right: 56px; bottom: 74px; z-index: 180; width: 360px; max-height: 430px; border-radius: 22px; background: #fff; padding: 14px; box-shadow: 0 24px 70px rgba(16,18,23,.18); display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; }
    .dialog-emoji-menu[hidden] { display: none; }
    .dialog-emoji-search { border: 2px solid #69a9ff; border-radius: 18px; background: #f5f6f8; padding: 12px 14px; font-size: 16px; outline: none; }
    .dialog-emoji-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 4px; }
    .dialog-emoji-grid button { border: 0; background: transparent; border-radius: 12px; min-height: 42px; font-size: 30px; cursor: pointer; }
    .dialog-emoji-grid button:hover { background: #f0f1f3; }
    .dialog-emoji-cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; border-top: 1px solid #eef0f3; padding-top: 8px; }
    .dialog-emoji-cats button { border: 0; background: transparent; display: grid; place-items: center; border-radius: 10px; color: #747783; font-size: 22px; cursor: pointer; padding: 8px 0; }
    .dialog-emoji-cats button.active, .dialog-emoji-cats button:hover { background: #f0f1f3; }
    .dialogs-right { min-height: 0; max-height: 100%; overflow-y: auto; border-left: 1px solid #eceef2; padding: 16px; display: grid; gap: 14px; align-content: start; background: #fbfbfc; }
    .dialog-side-block { border: 1px solid #e1e2e6; border-radius: 16px; background: #fff; padding: 14px; display: grid; gap: 9px; min-width: 0; }
    .dialog-side-block h3 { margin: 0; font-size: 18px; }
    [data-dialog-task-scope], [data-dialog-task-editor] { display: grid; gap: 9px; min-width: 0; }
    [data-dialog-task-list] { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
    [data-dialog-task-list] button { display: grid; gap: 3px; text-align: left; overflow-wrap: anywhere; }
    [data-dialog-tasks] button { border: 1px solid #d9dde6; border-radius: 8px; padding: 8px; background: #f7f8fb; color: #262b38; cursor: pointer; }
    [data-dialog-tasks] button:disabled { opacity: .5; cursor: default; }
    [data-dialog-task-editor] { border-top: 1px solid #e1e2e6; padding-top: 12px; }
    [data-dialog-task-editor] h4, [data-dialog-tasks] p { margin: 0; overflow-wrap: anywhere; }
    [data-dialog-task-editor] label { display: grid; gap: 4px; font-size: 12px; }
    [data-dialog-task-editor] input, [data-dialog-task-editor] textarea, [data-dialog-task-editor] select { box-sizing: border-box; min-width: 0; width: 100%; border: 1px solid #d9dde6; border-radius: 7px; padding: 8px; font: inherit; color: #262b38; background: white; }
    [data-dialog-task-editor] textarea { resize: vertical; }
    [data-dialog-task-editor] pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
    .dialog-task-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .client-card-field { display: grid; gap: 3px; overflow-wrap: anywhere; }
    .client-card-field b { font-size: 12px; color: #697386; }
    .client-card-record { border-top: 1px solid #e1e2e6; padding-top: 9px; display: grid; gap: 8px; }
    [data-dialog-client-card] p, [data-dialog-client-card] h4 { margin: 0; }
    [data-dialog-client-card] small { color: #697386; line-height: 1.5; }
    .dialog-tag { border: 1px solid #bfead0; border-radius: 999px; background: #eafff0; color: #19844a; padding: 7px 10px; font-size: 13px; font-weight: 850; width: max-content; }
    .dialog-tag-list { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; overflow: hidden; }
    .dialog-tag-toggle { border: 1px solid #d7d8de; border-radius: 999px; background: #fff; color: #747783; padding: 6px 9px; font-size: 11px; font-weight: 850; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .dialog-tag-toggle.active { border-color: #43d982; background: #eafff0; color: #19844a; }
    .dialog-tag-note { color: #747783; font-size: 12px; font-weight: 750; line-height: 1.35; }
    .dialog-comment-field { min-height: 104px; border: 1px solid #d7d8de; border-radius: 16px; padding: 11px 13px; resize: vertical; font-size: 13px; line-height: 1.4; font-weight: 650; }
    .dialog-comment-field:disabled { background: #f6f7f9; color: #747783; }
    .dialog-comment-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .dialog-comment-actions button { font-size: 13px; padding: 9px 10px; }
    .dialog-comment-actions button:disabled { opacity: .45; cursor: default; }
    .dialog-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .dialog-side-heading h3 { margin: 0; font-size: 18px; }
    .dialog-side-heading small { font-size: 12px; white-space: nowrap; }
    .dialog-mini-gear { border: 0; border-radius: 10px; background: #f2f2f3; width: 32px; height: 32px; cursor: pointer; color: #747783; font-weight: 900; }
    .agent-workflow-panel { border-color: #bfead0; background: #f7fffa; }
    .agent-workflow-state { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 12px; font-weight: 850; color: #747783; }
    .agent-workflow-state b { color: #20232a; }
    .agent-workflow-status { border-radius: 999px; padding: 4px 8px; background: #eafff0; color: #19844a; font-size: 11px; font-weight: 950; }
    .agent-workflow-status.error { background: #fde6e6; color: #a52a26; }
    .agent-workflow-modes, .agent-workflow-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .agent-workflow-actions { grid-template-columns: 1fr 1fr; }
    .agent-workflow-modes button, .agent-workflow-actions button, .agent-workflow-refresh { border: 0; border-radius: 11px; background: #f2f2f3; padding: 8px 9px; font-size: 12px; font-weight: 900; cursor: pointer; }
    .agent-workflow-modes button.active { background: #43d982; color: #fff; }
    .agent-workflow-actions button:first-child { background: #43d982; color: #fff; }
    .agent-workflow-actions button:last-child { background: #fde6e6; color: #a52a26; }
    .agent-workflow-modes button:disabled, .agent-workflow-actions button:disabled { opacity: .42; cursor: default; }
    .agent-workflow-note { margin: 0; color: #747783; font-size: 11px; font-weight: 750; line-height: 1.35; }
    .dialog-quick-grid { display: grid; gap: 8px; }
    .quick-reply { border: 0; border-radius: 12px; background: #f2f2f3; padding: 10px 11px; text-align: left; font-size: 13px; font-weight: 750; cursor: pointer; }
    .quick-reply:hover { background: #eafff0; color: #19844a; }
    .dialog-quick-settings-list { display: grid; gap: 8px; max-height: 220px; overflow-y: auto; }
    .dialog-quick-settings-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; border: 1px solid #eceef2; border-radius: 14px; padding: 10px 12px; }
    .dialog-quick-settings-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dialog-list-modal textarea { min-height: 120px; border: 1px solid #d7d8de; border-radius: 18px; padding: 18px; font-size: 16px; font-weight: 650; resize: vertical; }

    .dialog-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(16,18,23,.68); display: grid; place-items: center; }
    .dialog-modal { width: min(520px, 92vw); border-radius: 28px; background: #fff; padding: 32px; display: grid; gap: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
    .dialog-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .dialog-modal h2 { margin: 0; font-size: 32px; }
    .dialog-modal-close { border: 0; background: transparent; color: #b7bac1; font-size: 42px; cursor: pointer; }
    .dialog-modal-select, .dialog-modal input, .dialog-channel-select { border: 1px solid #d7d8de; border-radius: 18px; padding: 18px; font-size: 18px; font-weight: 700; }
    .dialog-channel-picker { position: relative; z-index: 5; }
    .dialog-channel-select { width: 100%; min-height: 72px; background: #fff; color: #20232a; cursor: pointer; outline-offset: 3px; padding: 18px 58px 18px 22px; text-align: left; position: relative; }
    .dialog-channel-select::after { content: '⌄'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #a4a7ae; font-size: 24px; line-height: 1; }
    .dialog-channel-select.open::after { content: '⌃'; }
    .dialog-channel-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 6px; border: 1px solid #d7d8de; border-radius: 18px; background: #fff; padding: 8px; box-shadow: 0 18px 45px rgba(16,18,23,.14); }
    .dialog-channel-menu[hidden] { display: none; }
    .dialog-channel-option { border: 0; border-radius: 14px; background: transparent; padding: 14px 16px; text-align: left; color: #20232a; font-size: 18px; font-weight: 800; cursor: pointer; }
    .dialog-channel-option.active, .dialog-channel-option:hover { background: #f0f7ff; }
    .dialog-channel-select:focus, .dialog-modal input:focus { border-color: #83b7ff; outline: 4px solid rgba(131,183,255,.35); }
    .dialog-modal-select.open { border-color: #43d982; }
    .dialog-channel-choice { border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left; }
    .dialog-channel-choice.active { background: #eafff0; outline: 2px solid #43d982; }
    .dialog-channel-choice:hover { background: #f4f5f7; }
    .dialog-add-status { color: #747783; font-size: 14px; font-weight: 850; min-height: 18px; }
    .dialog-add-status.ready { color: #19844a; }
    .dialog-channel-list { border-radius: 18px; background: #fff; box-shadow: 0 16px 34px rgba(32,35,42,.12); padding: 16px; max-height: 260px; overflow-y: auto; display: grid; gap: 10px; }
    .dialog-channel-choice { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px; }
    .dialog-modal-actions { display: flex; justify-content: flex-end; }
    .dialog-start-btn { border: 0; border-radius: 16px; background: #43d982; color: #fff; padding: 16px 20px; font-weight: 850; }
    .notifications-page, .agents-page { min-height: 0; border: 3px solid var(--black); border-radius: 22px; background: rgba(255,250,241,.97); box-shadow: var(--shadow); padding: 18px; overflow-y: auto; }
    .notifications-page[hidden], .agents-page[hidden] { display: none; }
    .notifications-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
    .notifications-toolbar h2 { margin: 0; font-size: 28px; }
    .notifications-select { min-width: 260px; border: 2px solid var(--black); border-radius: 14px; background: var(--white); padding: 11px 14px; font: inherit; font-weight: 950; }
    .yc-shell { border-radius: 24px; background: #fff; padding: 22px; box-shadow: 0 14px 35px rgba(18,16,21,.08); }
    .yc-title { margin: 0 0 26px; font-size: 25px; }
    .yc-center-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: 22px auto 0; max-width: 760px; }
    .yc-cascade-priority-row { width: 100%; max-width: none; margin: 0 0 18px; }
    .yc-toggle-line { display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-size: 16px; font-weight: 950; }
    button.yc-toggle-line { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; }
    .yc-switch { width: 54px; height: 30px; border: 2px solid #c7cad1; border-radius: 999px; background: #e2e4e8; position: relative; display: inline-block; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
    .yc-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: left .14s ease; }
    .yc-switch.on { background: #43a047; border-color: #43a047; }
    .yc-switch.on::after { left: 27px; }
    .yc-cascade { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
    .yc-cascade h3 { margin: 0 0 8px; text-align: center; font-size: 24px; }
    .yc-channel { display: grid; grid-template-columns: 42px 34px 1fr auto; gap: 14px; align-items: center; border: 1px solid #e1e2e6; border-radius: 14px; background: #fff; padding: 12px 14px; font-size: 18px; font-weight: 900; transition: transform .12s ease, box-shadow .12s ease; }
    .yc-channel.dragging { opacity: .72; transform: scale(.995); box-shadow: 0 12px 28px rgba(32,35,42,.14); }
    .yc-channel.can-drop { outline: 2px solid rgba(67,160,71,.26); }
    .yc-drag { width: 34px; height: 34px; border: 1px solid #d5d6dc; border-radius: 10px; background: #f7f8f9; color: #9da0a9; letter-spacing: 1px; display: grid; place-items: center; cursor: grab; user-select: none; }
    .yc-drag:active { cursor: grabbing; }
    .yc-icon { width: 22px; height: 22px; border-radius: 8px; background: #c9c9c9; color: white; display: grid; place-items: center; font-size: 10px; font-weight: 950; }
    .yc-search-row { display: grid; grid-template-columns: minmax(260px, 520px) 1fr auto auto; gap: 18px; align-items: center; margin-top: 28px; }
    .yc-search { border: 2px solid #d8d8d8; border-radius: 18px; background: #fff; padding: 15px 18px; font: inherit; font-weight: 850; }
    .yc-template-card { border: 2px solid #e5ddcf; border-radius: 18px; background: #fff8eb; padding: 14px; margin-top: 12px; display: grid; gap: 6px; }
    .yc-template-card strong { font-size: 15px; }
    .yc-template-card small { color: var(--muted); font-weight: 850; }
    .templates-shell { border-radius: 24px; background: #fff; padding: 24px; box-shadow: 0 14px 35px rgba(18,16,21,.08); }
    .templates-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 22px; }
    .templates-title { margin: 0; font-size: 44px; line-height: 1; letter-spacing: -.04em; }
    .templates-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .video-action { border: 2px solid #b9bac3; border-radius: 999px; background: #fff; color: #4f4f5a; padding: 10px 16px; font-size: 15px; font-weight: 950; }
    .new-template-action { border: 0; border-radius: 999px; background: #43a047; color: #fff; padding: 14px 22px; font-size: 16px; font-weight: 950; box-shadow: 0 8px 18px rgba(67,160,71,.24); }
    .template-tabs { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 44px; }
    .template-tab { border: 0; background: transparent; color: #2f7e36; padding: 0 0 10px; font-size: 15px; font-weight: 500; }
    .template-tab.active { border-bottom: 4px solid #2f7e36; color: #1f1f25; }
    .template-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 24px; }
    .template-card { position: relative; min-height: 238px; border: 2px solid #d8d8df; border-radius: 10px; background: #fff; overflow: visible; display: grid; grid-template-rows: 1fr auto; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
    .template-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px rgba(18,16,21,.16); border-color: #b8bac4; }
    .template-card.warn { border-color: #ff6d00; }
    .template-card-body { padding: 18px 20px; }
    .template-card-top { display: flex; justify-content: space-between; align-items: center; color: #4e4e5a; font-size: 15px; margin-bottom: 20px; }
    .template-card-title { margin: 0 0 12px; font-size: 20px; line-height: 1.12; }
    .template-card-text { color: #24242b; font-size: 15px; line-height: 1.32; }
    .template-card-meta { color: #777783; font-size: 14px; line-height: 1.35; margin-top: 18px; }
    .template-risk { border-top: 2px solid #d8d8df; background: #f4faf5; padding: 12px 20px; color: #565766; font-size: 13px; font-weight: 850; }
    .template-risk.high { background: #fde6e6; }
    .risk-dots { margin-right: 12px; letter-spacing: 3px; color: #59b867; }
    .template-risk.high .risk-dots { color: #c93832; }
    .template-card.inactive { opacity: .58; filter: grayscale(.2); }
    .template-card-id { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; }
    .template-switch { position: relative; width: 48px; height: 28px; border: 0; border-radius: 999px; background: #e8e9ee; cursor: pointer; padding: 0; vertical-align: middle; transition: background .16s ease; }
    .template-switch::after { content: ''; position: absolute; width: 24px; height: 24px; left: 2px; top: 2px; border: 2px solid #b3b5bf; border-radius: 50%; background: #f7f8fb; box-sizing: border-box; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
    .template-switch.on { background: #abd8b0; }
    .template-switch.on::after { transform: translateX(20px); border-color: #2f7e36; background: #eef8ef; }
    .template-more { border: 0; background: transparent; color: #4e4e5a; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
    .template-card-menu { position: absolute; z-index: 90; right: 14px; top: 48px; min-width: 210px; border: 2px solid var(--black); border-radius: 12px; background: #fff; box-shadow: var(--shadow); padding: 7px; display: grid; gap: 5px; }
    .template-card-menu[hidden] { display: none; }
    .template-card-menu button { border: 0; border-radius: 9px; background: #f3eee6; padding: 9px 10px; text-align: left; font-weight: 850; cursor: pointer; }
    .template-card-menu button.danger { background: #fde6e6; color: #a52a26; }
    .template-empty { grid-column: 1 / -1; border: 1px dashed #cfd1d8; border-radius: 16px; background: #fbfbfc; color: #747783; padding: 34px; text-align: center; font-weight: 700; }
    .template-form { display: grid; gap: 14px; }
    .template-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .template-form .field textarea { min-height: 180px; resize: vertical; }
    .template-form-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .template-editor-shell { display: grid; gap: 28px; }
    .template-risk-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 12px; background: #f2faf3; color: #5e6170; padding: 14px 18px; font-size: 15px; font-weight: 850; }
    .template-risk-banner.high { background: #fdeaea; }
    .template-risk-banner a { color: #747783; font-weight: 500; text-decoration: underline; }
    .template-editor-head { display: grid; gap: 8px; }
    .template-editor-title { margin: 0; color: #20232a; font-size: 44px; line-height: 1; letter-spacing: -.05em; }
    .template-editor-number { color: #747783; font-size: 20px; }
    .template-editor-active { display: flex; align-items: center; gap: 18px; margin: 10px 0 22px; }
    .template-editor-active .secondary-action { margin-left: auto; }
    .template-editor-active strong { display: block; font-size: 19px; }
    .template-editor-active span { display: block; color: #747783; font-size: 14px; }
    .template-editor-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); gap: 34px; align-items: start; }
    .template-editor-main { display: grid; gap: 24px; }
    .template-required-note { color: #4d505b; font-size: 16px; }
    .template-required-note b { color: #f05b5b; }
    .template-editor-main .field label { color: #000; font-size: 19px; font-weight: 850; }
    .template-editor-main .field input, .template-editor-main .field select, .template-editor-main .field textarea { border: 1px solid #b9bac3; border-radius: 8px; padding: 12px 14px; color: #20232a; font-size: 16px; font-weight: 500; }
    .template-send-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
    .template-send-dynamic { display: grid; gap: 12px; }
    .template-send-panel { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
    .template-send-panel[hidden] { display: none; }
    .template-send-panel select { width: 100%; }
    .template-send-panel label { font-size: 16px; font-weight: 500; color: #20232a; }
    .template-send-panel input[type=number] { width: 96px; }
    .template-send-panel input[type=time] { width: 150px; }
    .template-send-line, .template-send-time-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; }
    .template-send-line select { flex: 1; }
    .template-message-box { border: 1px solid #d5d6dc; border-radius: 12px; padding: 18px; display: grid; gap: 20px; }
    .template-message-tabs { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
    .template-message-tab { display: inline-flex; gap: 12px; align-items: center; border: 0; border-radius: 8px; background: transparent; padding: 14px 18px; color: #15171d; font-size: 18px; font-weight: 850; cursor: pointer; }
    .template-message-tab.active { background: #eef8ef; }
    .template-message-tab .remove-message { width: 34px; height: 34px; border: 1px solid #b9bac3; border-radius: 8px; background: #fff; color: #555967; font-size: 18px; cursor: pointer; }
    .template-message-tab[data-template-add-message] { border: 1px solid #d5d6dc; background: #fff; color: #4d505b; font-weight: 800; }
    .template-message-tab[disabled] { opacity: .48; cursor: not-allowed; }
    .template-message-panel[hidden] { display: none; }
    .template-message-editor { position: relative; border: 2px solid #3d3e48; border-radius: 12px; padding: 14px 14px 64px; background: #fff; }
    .template-message-editor [data-template-message-text] { min-height: 150px; border: 0 !important; padding: 0 !important; width: 100%; resize: none; outline: none; overflow: hidden; display: block; line-height: 1.45; white-space: pre-wrap; word-break: break-word; font-size: 16px; font-weight: 500; color: #20232a; }
    .template-formatbar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 52px; border-top: 1px solid #e1e2e6; border-radius: 0 0 10px 10px; background: #fff; padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; color: #8b8c94; font-size: 20px; font-weight: 900; }
    .template-format-btn { border: 0; border-radius: 8px; background: transparent; color: #555967; min-width: 28px; height: 28px; font: inherit; cursor: pointer; }
    .template-format-btn:hover, .template-format-btn.active { background: #eef8ef; color: #2f7e36; }
    .template-format-btn.bold { font-weight: 950; }
    .template-format-btn.italic { font-style: italic; }
    .template-format-btn.strike { text-decoration: line-through; }
    .template-emoji-wrap { position: relative; }
    .template-emoji-panel { position: absolute; right: 0; bottom: 38px; z-index: 120; width: 320px; border: 1px solid #d8d9df; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(32,35,42,.16); padding: 12px; display: grid; gap: 10px; }
    .template-emoji-panel[hidden] { display: none; }
    .template-emoji-category { display: grid; gap: 6px; }
    .template-emoji-category strong { color: #4d505b; font-size: 12px; }
    .template-emoji-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .template-emoji-list button { width: 30px; height: 30px; border: 1px solid #e1e2e6; border-radius: 8px; background: #fff; font-size: 18px; cursor: pointer; }
    .template-emoji-list button:hover { background: #eef8ef; }
    .template-ai-action { border: 0; border-radius: 8px; background: linear-gradient(90deg, #e735cf, #9332c9); color: #fff; padding: 8px 14px; font-size: 15px; font-weight: 850; }
    .template-char-counter { color: #747783; font-size: 14px; margin-top: 8px; }
    .template-media-field { display: grid; gap: 10px; margin-top: 18px; }
    .template-media-field h4 { margin: 0; color: #747783; font-size: 18px; }
    .template-media-upload { border: 1px solid #bde3c0; border-radius: 12px; background: #fbfffb; color: #2f7e36; min-height: 94px; display: grid; place-items: center; font-size: 17px; font-weight: 800; cursor: pointer; }
    .template-media-preview { position: relative; border-radius: 12px; border: 1px solid #d5d6dc; background: #fbfbfc; color: #20232a; min-height: 150px; display: grid; gap: 10px; place-items: center; text-align: center; padding: 14px; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(32,35,42,.08); }
    .template-media-preview[hidden] { display: none; }
    .template-media-preview img, .template-media-preview video { max-width: 100%; max-height: 180px; border-radius: 10px; object-fit: contain; background: #eef1f4; }
    .template-media-name { color: #4d505b; font-size: 14px; word-break: break-all; }
    .template-media-preview button { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid #d5d6dc; border-radius: 50%; background: #fff; color: #4d505b; font-size: 20px; cursor: pointer; }
    .template-preview-action { width: max-content; border: 1px solid #b9bac3; border-radius: 8px; background: #fff; color: #4d505b; padding: 10px 14px; font-size: 15px; font-weight: 800; }
    .template-preview-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(32,35,42,.42); display: grid; place-items: center; padding: 28px; }
    .template-preview-modal { position: relative; width: min(640px, 92vw); max-height: 88vh; overflow: auto; border-radius: 28px; background: #fff; box-shadow: 0 28px 70px rgba(32,35,42,.24); padding: 28px 32px 34px; }
    .template-preview-modal h2 { margin: 0 48px 24px 0; color: #15171d; font-size: 32px; line-height: 1.1; }
    .template-preview-close { position: absolute; top: 22px; right: 24px; width: 38px; height: 38px; border: 0; background: transparent; color: #9da0a9; font-size: 42px; line-height: 1; cursor: pointer; }
    .template-preview-body { border-radius: 14px; background: #f7f8fb; overflow: hidden; }
    .template-preview-media { background: #eef1f4; display: grid; place-items: center; }
    .template-preview-media img, .template-preview-media video { width: 100%; max-height: 360px; object-fit: contain; background: #eef1f4; }
    .template-preview-text { padding: 24px; color: #15171d; font-size: 21px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
    .template-info-note { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; border-radius: 10px; background: #f1f5fb; color: #20232a; padding: 18px; font-size: 16px; line-height: 1.35; }
    .template-sms-block { display: grid; gap: 12px; }
    .template-sms-title { display: flex; align-items: center; gap: 8px; color: #101b27; font-size: 21px; font-weight: 850; }
    .template-sms-help { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid #c4c6cc; border-radius: 50%; color: #9da0a9; font-size: 18px; line-height: 1; }
    .template-sms-block textarea { width: 100%; min-height: 118px; border: 1px solid #39d979; border-radius: 18px; background: #fff; color: #20232a; padding: 18px 20px; font-size: 18px; font-weight: 500; line-height: 1.35; resize: vertical; outline: none; box-shadow: 0 10px 22px rgba(32,35,42,.06); }
    .template-sms-block textarea::placeholder { color: #989aa2; }
    .template-sms-block textarea:focus { border-color: #2fbd63; box-shadow: 0 0 0 4px rgba(57,217,121,.12); }
    .template-sms-note { color: #d18400; font-size: 18px; font-weight: 850; line-height: 1.35; }
    .template-send-conditions { display: grid; gap: 18px; margin-top: 6px; }
    .template-send-conditions h3 { margin: 0; color: #000; font-size: 24px; }
    .template-send-conditions h4 { margin: 0; color: #747783; font-size: 19px; }
    .template-status-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 14px 28px; }
    .template-status-option { display: flex; gap: 14px; align-items: center; border-radius: 8px; padding: 12px 14px; color: #153d18; font-size: 17px; font-weight: 750; }
    .template-status-option:has(input:checked) { background: #eef8ef; }
    .template-status-option input { width: 22px; height: 22px; accent-color: #2f7e36; }

    .template-master-picker { display: grid; gap: 18px; border: 1px solid #d5d6dc; border-radius: 12px; background: #fff; padding: 22px; }
    .template-master-picker h3 { margin: 0; color: #101b27; font-size: 24px; }
    .template-master-branch-field { display: grid; gap: 10px; position: relative; }
    .template-master-branch-field label { color: #101b27; font-size: 18px; font-weight: 850; }
    .template-branch-select { width: 100%; border: 1px solid #39d979; border-radius: 18px; background: #fff; color: #20232a; padding: 16px 48px 16px 18px; font-size: 18px; font-weight: 650; text-align: left; cursor: pointer; box-shadow: 0 10px 22px rgba(32,35,42,.06); position: relative; }
    .template-branch-select::after { content: '⌄'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #a4a7ae; font-size: 24px; }
    .template-branch-clear { position: absolute; right: 48px; bottom: 14px; border: 0; background: transparent; color: #b7bac1; font-size: 26px; line-height: 1; cursor: pointer; }
    .template-branch-menu { position: absolute; z-index: 130; left: 0; right: 0; top: calc(100% + 10px); display: grid; gap: 18px; border-radius: 24px; background: #fff; padding: 24px 28px; box-shadow: 0 18px 38px rgba(32,35,42,.14); }
    .template-branch-menu[hidden] { display: none; }
    .template-branch-option, .template-master-select-all, .template-master-option { display: flex; gap: 14px; align-items: center; color: #101b27; font-size: 18px; font-weight: 850; line-height: 1.35; }
    .template-branch-option input, .template-master-select-all input, .template-master-option input { width: 24px; height: 24px; accent-color: #43d982; }
    .template-master-list { display: grid; gap: 16px; }
    .template-master-list-head { display: flex; align-items: center; gap: 14px; }
    .template-master-chevron { color: #b7bac1; font-size: 28px; line-height: 1; }
    .template-master-items { display: grid; gap: 18px; padding-left: 44px; }
    .template-master-empty { color: #747783; font-size: 16px; font-weight: 700; padding: 8px 0 0 44px; }

    .template-list-toggle { border: 0; background: transparent; color: #b7bac1; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; transition: transform .14s ease; }
    .template-list-toggle.collapsed { transform: rotate(-90deg); }
    .template-master-items[hidden], .template-segment-items[hidden], .template-service-subcategories[hidden], .template-service-items[hidden] { display: none; }
    .template-service-category { display: grid; gap: 12px; }
    .template-service-category-head { display: flex; gap: 14px; align-items: center; color: #101b27; font-size: 18px; font-weight: 850; line-height: 1.35; }
    .template-service-category-head input, .template-service-item input { width: 24px; height: 24px; accent-color: #43d982; }
    .template-service-items { display: grid; gap: 12px; padding-left: 58px; }

    .template-service-subcategories { display: grid; gap: 14px; padding-left: 56px; }
    .template-service-subcategory { display: grid; gap: 10px; }
    .template-service-subcategory-head { display: flex; gap: 14px; align-items: center; color: #101b27; font-size: 17px; font-weight: 800; line-height: 1.35; }
    .template-service-subcategory-head input { width: 23px; height: 23px; accent-color: #43d982; }

    .template-service-item { display: flex; gap: 14px; align-items: center; color: #101b27; font-size: 17px; font-weight: 700; line-height: 1.35; }


    .template-segment-picker { display: grid; gap: 18px; border: 1px solid #d5d6dc; border-radius: 12px; background: #fff; padding: 22px; }
    .template-segment-picker h3 { margin: 0; color: #101b27; font-size: 24px; }
    .template-segment-strict { display: flex; align-items: center; gap: 14px; color: #101b27; font-size: 18px; font-weight: 850; }
    .template-segment-strict input { width: 56px; height: 30px; accent-color: #43d982; }
    .template-segment-list { display: grid; gap: 16px; }
    .template-segment-list-head { display: flex; align-items: center; gap: 14px; }
    .template-segment-chevron { color: #b7bac1; font-size: 28px; line-height: 1; }
    .template-segment-items { display: grid; gap: 18px; padding-left: 44px; }
    .template-segment-option, .template-segment-select-all { display: flex; gap: 14px; align-items: center; color: #101b27; font-size: 18px; font-weight: 850; line-height: 1.35; }
    .template-segment-option input, .template-segment-select-all input { width: 24px; height: 24px; accent-color: #43d982; }
    .template-segment-empty { color: #747783; font-size: 16px; font-weight: 700; padding: 8px 0 0 44px; }
    .template-time-limits { display: grid; gap: 16px; border: 1px solid #d5d6dc; border-radius: 12px; padding: 18px; background: #fff; }
    .template-time-limits h3 { margin: 0; color: #000; font-size: 24px; }
    .template-time-limit-row { display: grid; gap: 8px; color: #20232a; font-size: 16px; font-weight: 700; }
    .template-time-limit-row input { width: 120px; border: 1px solid #b9bac3; border-radius: 8px; padding: 12px 14px; color: #20232a; font-size: 16px; font-weight: 500; }
    .template-late-booking-limit { display: grid; gap: 12px; }
    .template-late-booking-limit label { color: #101b27; font-size: 18px; font-weight: 850; }
    .template-late-booking-limit select { width: 100%; border: 1px solid #39d979; border-radius: 18px; background: #fff; color: #20232a; padding: 18px 20px; font-size: 18px; font-weight: 650; outline: none; box-shadow: 0 10px 22px rgba(32,35,42,.06); }
    .template-late-booking-limit select:focus { border-color: #2fbd63; box-shadow: 0 0 0 4px rgba(57,217,121,.12); }
    .template-info-note b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #5a8dee; color: #fff; }
    .template-keys-card { border: 1px solid #d5d6dc; border-radius: 12px; background: #fff; padding: 24px; color: #3f424d; font-size: 15px; line-height: 1.45; }
    .template-keys-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 2px solid #555967; border-radius: 10px; margin-bottom: 18px; font-size: 18px; font-weight: 850; }
    .template-keys-card h3 { margin: 0 0 8px; color: #20232a; font-size: 23px; line-height: 1.12; }
    .template-key-list { display: grid; gap: 9px; margin: 18px 0; }
    .template-key-btn { border: 0; background: transparent; color: #3f424d; padding: 0; text-align: left; font: inherit; cursor: pointer; }
    .template-key-btn code { color: #363946; font: inherit; font-weight: 600; }
    .template-key-btn:hover code { color: #2f7e36; text-decoration: underline; }
    .template-keys-card .template-example { margin-top: 14px; color: #20232a; }
    .template-keys-card .template-article { color: #2f7e36; text-decoration: underline; }
    .template-editor-sidebar { min-width: 0; display: grid; align-content: start; gap: 20px; }
    .template-live-preview-card { border: 1px solid #d5d6dc; border-radius: 18px; background: #fff; padding: 18px; display: grid; gap: 14px; }
    .template-phone-preview { position: relative; border-radius: 52px 52px 34px 34px; background: #ededee; padding: 52px 14px 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02), 0 12px 28px rgba(32,35,42,.08); }
    .template-phone-speaker { position: absolute; top: 18px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%); border-radius: 999px; background: #fff; }
    .template-phone-screen { min-height: 280px; border-radius: 28px; background: #fff; padding: 22px; overflow: hidden; }
    .template-phone-screen h3 { margin: 0 0 20px; color: #10202c; font-size: 18px; }
    .template-live-message { color: #10202c; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
    .template-live-media { margin-top: 16px; background: #f1f3f5; overflow: hidden; }
    .template-live-media[hidden] { display: none; }
    .template-live-media img, .template-live-media video { display: block; width: 100%; max-height: 330px; object-fit: contain; }
    .template-live-media .template-media-name { display: none; }
    .template-test-send { width: 100%; border: 0; border-radius: 14px; background: #f0f0f2; color: #10202c; padding: 14px 16px; font-size: 14px; font-weight: 900; cursor: pointer; }
    .template-test-send:hover { background: #e7efff; color: #1d4ed8; }
    .template-test-phone { display: block; color: #7a8494; font-size: 10px; font-weight: 750; text-align: center; }
    @media (max-width: 900px) { .template-phone-preview { max-width: 430px; margin-inline: auto; } }

.dialog-media-view { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.dialog-media-view img, .dialog-media-view video { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }
.dialog-media-view audio { max-width: 100%; }
.dialog-media-view video { width: 320px; min-height: 180px; background: #101b27; }
.server-attachments:has([data-dialog-media-message]) { grid-template-columns: minmax(0, 1fr); }
.server-attachments .dialog-media-view { grid-column: 1 / -1; min-width: 0; align-items: flex-start; }
.server-attachments [data-dialog-media-close] { white-space: nowrap; min-width: 120px; padding: 8px 12px; border: 1px solid #d8dbe2; border-radius: 10px; background: #f0f1f3; cursor: pointer; }
.server-attachments [data-dialog-media-message] { justify-self: start; max-width: 100%; border: 1px solid #d8dbe2; cursor: pointer; }
    .agent-tabs { display: grid; gap: 10px; padding-bottom: 4px; }
    .agent-tab-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid #e1e2e6; border-radius: 16px; background: #fbfbfc; padding: 10px; }
    .agent-tab-group-title { min-width: 190px; color: var(--muted); font-size: 12px; font-weight: 900; }
    .agent-tab { border: 2px solid #d5d6dc; border-radius: 999px; background: #fff; color: #4d505b; padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 850; white-space: nowrap; cursor: pointer; }
    .agent-tab.active { border-color: var(--green); background: #f1faf2; color: #2f7e36; box-shadow: inset 0 -3px 0 var(--green); }
    .agent-copy-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 10px; align-items: end; border: 2px solid #e1e2e6; border-radius: 16px; background: #fbfbfc; padding: 12px; }
    .agent-copy-row label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .agent-copy-row select, .agent-profile-form input, .agent-profile-form select, .agent-profile-form textarea { width: 100%; border: 2px solid #d5d6dc; border-radius: 14px; background: #fff; padding: 12px; color: #20232a; font: inherit; font-size: 13px; font-weight: 750; }
    .agent-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .agent-profile-form .wide { grid-column: 1 / -1; }
    .agent-profile-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .agent-profile-form textarea { min-height: 180px; resize: vertical; line-height: 1.45; font-weight: 650; }
    .knowledge-source-list { display: grid; gap: 4px; border: 1px solid #dbe3ec; border-radius: 12px; background: #f8fafc; padding: 10px 12px; color: #596579; font-size: 11px; }
    .knowledge-source-list strong { color: #253044; font-size: 11px; }
    .knowledge-source-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .knowledge-cards-board { display: grid; gap: 12px; margin-bottom: 16px; border: 2px solid #d9e2ef; border-radius: 18px; background: #f8fbff; padding: 14px; }
    .knowledge-cards-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
    .knowledge-cards-tabs button { border: 1px solid #cdd8e7; border-radius: 999px; background: #fff; padding: 8px 12px; font-weight: 850; cursor: pointer; }
    .knowledge-cards-tabs button.active { border-color: #2563eb; background: #eaf1ff; color: #1d4ed8; }
    .knowledge-cards-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(300px, 1.25fr); gap: 12px; }
    .knowledge-card-list { display: grid; align-content: start; gap: 7px; max-height: 420px; overflow: auto; }
    .knowledge-card-item { border: 1px solid #d7e0ec; border-radius: 12px; background: #fff; padding: 10px; text-align: left; cursor: pointer; }
    .knowledge-card-item.active { border-color: #2563eb; box-shadow: 0 0 0 3px #eaf1ff; }
    .knowledge-card-item small { display: block; margin-top: 5px; color: #667085; }
    .knowledge-card-editor { display: grid; gap: 8px; }
    .knowledge-card-editor input, .knowledge-card-editor textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfd9e7; border-radius: 10px; padding: 9px; font: inherit; }
    .knowledge-card-editor textarea { min-height: 130px; resize: vertical; }
    .knowledge-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .knowledge-card-empty { border: 1px dashed #cdd8e7; border-radius: 12px; padding: 22px; color: #667085; text-align: center; }

    .knowledge-document-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; }
    .knowledge-document-toolbar select, .knowledge-document-panel textarea { border: 1px solid #d6dee8; border-radius: 10px; background: #fff; padding: 9px; font: inherit; font-size: 11px; }
    .knowledge-document-panel textarea { min-height: 220px; resize: vertical; line-height: 1.45; }
    .knowledge-document-status { color: #667085; font-size: 10px; }
    .knowledge-document-status.ok { color: #18794e; }
    .knowledge-document-status.error { color: #b4232e; }
    .knowledge-editor-grid { display: grid; gap: 14px; }
    .knowledge-editor-block { position: relative; display: grid; gap: 8px; border: 2px solid #dfe5ee; border-radius: 20px; background: #fff; padding: 15px 15px 58px; box-shadow: 0 7px 18px rgba(15,23,42,.045); transition: border-color .16s ease, box-shadow .16s ease; }
    .knowledge-editor-block.editing { border-color: #7ba8f7; box-shadow: 0 0 0 4px rgba(37,99,235,.09); }
    .knowledge-editor-block > label { color: #27364c; font-size: 13px; font-weight: 900; }
    .knowledge-editor-block textarea { width: 100%; min-height: 150px; box-sizing: border-box; resize: vertical; border: 1px solid #dce3ed; border-radius: 14px; background: #fff; padding: 12px; color: #20232a; font: inherit; font-size: 13px; font-weight: 650; line-height: 1.5; }
    .knowledge-editor-block textarea[readonly] { border-color: #edf0f4; background: #f8fafc; color: #596579; cursor: default; }
    .knowledge-editor-actions { position: absolute; right: 15px; bottom: 13px; display: flex; justify-content: flex-end; gap: 8px; }
    .knowledge-editor-actions button { border: 1px solid #cfd8e6; border-radius: 10px; background: #fff; color: #445168; padding: 7px 11px; font-size: 11px; font-weight: 900; cursor: pointer; }
    .knowledge-editor-actions .knowledge-save-button { border-color: #22a35a; background: #22a35a; color: #fff; }
    .knowledge-save-button:disabled { opacity: .45; cursor: default; }
    .agent-context-links { display: grid; gap: 13px; padding: 18px; border: 1px solid #dbe5f0; border-radius: 18px; background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%); }
    .agent-context-links-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .agent-context-links-head span { display: block; margin-bottom: 3px; color: #718096; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .agent-context-links-head h3 { margin: 0; color: #1f2f46; font-size: 18px; }
    .agent-context-links-head > strong { padding: 7px 10px; border-radius: 999px; background: #dceaff; color: #25528b; font-size: 12px; white-space: nowrap; }
    .agent-context-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .agent-context-links-grid > div { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(113, 139, 174, .2); border-radius: 13px; background: rgba(255,255,255,.78); min-width: 0; }
    .agent-context-links-grid small { color: #718096; font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .agent-context-links-grid b { color: #273b57; font-size: 13px; }
    .agent-context-links-grid span { color: #5f7087; font-size: 12px; line-height: 1.4; }
    .agent-context-links > p { margin: 0; padding: 10px 12px; border-radius: 12px; background: #1f3656; color: #f7fbff; font-size: 12px; line-height: 1.45; }
    @media (max-width: 720px) {
      .agent-context-links-grid { grid-template-columns: 1fr; }
      .agent-context-links-head { align-items: stretch; flex-direction: column; }
      .agent-context-links-head > strong { justify-self: start; }
    }
    .agent-copy-confirm { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(32,35,42,.32); padding: 24px; }
    .agent-copy-confirm[hidden] { display: none; }
    .agent-copy-dialog { width: min(520px, 100%); border: 3px solid var(--black); border-radius: 22px; background: #fff; box-shadow: 0 18px 45px rgba(18,16,21,.22); padding: 20px; }
    .agent-copy-dialog h3 { margin: 0 0 8px; font-size: 22px; }
    .agent-copy-dialog p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 700; }
    .agent-copy-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .agent-trust-box { display: grid; gap: 10px; border: 2px solid #e1e2e6; border-radius: 16px; background: #fbfbfc; padding: 12px; }
    .agent-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; }
    .agent-trusted-add-row { grid-template-columns: minmax(150px, .72fr) minmax(210px, 1fr) 46px; }
    .agent-add-row input { border: 2px solid #d5d6dc; border-radius: 14px; background: #fff; padding: 12px; font: inherit; font-size: 13px; font-weight: 750; }
    .agent-plus-btn { border: 0; border-radius: 14px; background: var(--green); color: #fff; font-size: 22px; font-weight: 950; cursor: pointer; }
    .trusted-id-list { display: grid; gap: 8px; }
    .trusted-id-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; border: 1px solid #e1e2e6; border-radius: 14px; background: #fff; padding: 9px 10px; }
    .trusted-id-person { min-width: 0; display: grid; gap: 3px; }
    .trusted-id-person strong { color: #20232a; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
    .trusted-id-row code { color: #20232a; font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
    .icon-btn { width: 34px; height: 34px; border: 1px solid #d5d6dc; border-radius: 10px; background: #fff; cursor: pointer; }
    .icon-btn.danger { background: #fff0f2; border-color: #ffc8d2; }
    .agent-actions-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
    .agent-actions-table th { text-align: left; color: var(--muted); font-size: 12px; padding: 0 10px; }
    .agent-actions-table td { background: #fff; border-top: 1px solid #e1e2e6; border-bottom: 1px solid #e1e2e6; padding: 10px; font-size: 13px; font-weight: 750; }
    .agent-actions-table td:first-child { border-left: 1px solid #e1e2e6; border-radius: 14px 0 0 14px; }
    .agent-actions-table td:last-child { border-right: 1px solid #e1e2e6; border-radius: 0 14px 14px 0; }
    .agent-action-choice { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; white-space: nowrap; color: #4d505b; font-size: 12px; font-weight: 800; }
    .logs-page, .analytics-page, .tasks-page { min-height: 0; border: 3px solid var(--black); border-radius: 22px; background: rgba(255,250,241,.97); box-shadow: var(--shadow); padding: 18px; overflow-y: auto; }
    .logs-page[hidden], .analytics-page[hidden], .tasks-page[hidden] { display: none; }
    #branch1[hidden], #branch2[hidden] { display: none !important; }
    .tasks-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 16px; align-items: start; }
    .tasks-filter-panel { position: sticky; top: 0; display: grid; gap: 12px; border: 1px solid #e1e2e6; border-radius: 20px; background: #fbfbfc; padding: 14px; }
    .tasks-filter-panel h3 { margin: 0; font-size: 14px; }
    .tasks-filter-chip { border: 1px solid #d5d6dc; border-radius: 999px; background: #fff; padding: 9px 11px; text-align: left; color: #4d505b; font-size: 12px; font-weight: 850; }
    .tasks-filter-chip.active { border-color: var(--green); background: #f1faf2; color: #2f7e36; }
    .task-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
    .task-column { display: grid; align-content: start; gap: 10px; border: 1px solid #e1e2e6; border-radius: 18px; background: #fbfbfc; padding: 12px; min-height: 420px; }
    .task-column h3 { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
    .agent-task-card { border: 1px solid #e1e2e6; border-radius: 16px; background: #fff; padding: 12px; display: grid; gap: 8px; box-shadow: 0 1px 4px rgba(32,35,42,.05); }
    .agent-task-card.urgent { border-color: #ffc8d2; background: #fff7f8; }
    .agent-task-card.warn { border-color: #f2d88c; background: #fffdf5; }
    .agent-task-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 850; }
    .agent-task-actions { display: flex; gap: 7px; flex-wrap: wrap; }
    .task-audience-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
    .task-audience-tab { border: 1px solid #d5d6dc; border-radius: 999px; background: #fff; padding: 9px 13px; font-size: 12px; font-weight: 900; }
    .task-audience-tab.active { border-color: var(--green); background: #f1faf2; color: #2f7e36; }
    .tasks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .tasks-toolbar small { display: block; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
    .tasks-toolbar h2 { margin: 2px 0 0; font-size: 25px; }
    .tasks-workspace { min-width: 0; }
    .task-agent-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px; }
    .task-agent-tab { flex: 0 0 auto; border: 1px solid #e1e2e6; border-radius: 999px; background: #fff; padding: 8px 11px; color: #5e6170; font-size: 11px; font-weight: 850; cursor: pointer; }
    .task-agent-tab.active { border-color: #2563eb; background: #eaf1ff; color: #1d4ed8; }
    .tasks-filter-chip { width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
    .tasks-filter-chip b { min-width: 24px; border-radius: 999px; background: #eef2f7; padding: 2px 7px; color: #667085; font-size: 10px; text-align: center; }
    .tasks-filter-chip.active b { background: #fff; color: #2563eb; }
    .task-column-list { display: grid; align-content: start; gap: 9px; }
    .task-empty-column { border: 1px dashed #d8e0ea; border-radius: 14px; padding: 20px 12px; color: #98a2b3; font-size: 11px; font-weight: 750; text-align: center; }
    .task-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
    .task-category-chip, .task-routed-chip { display: inline-block; border-radius: 999px; background: #eef2f7; padding: 4px 7px; color: #596579; font-size: 9px; font-weight: 900; }
    .task-routed-chip { margin-left: 5px; background: #fff0d8; color: #9a5b00; }
    .task-card-icon-actions { display: flex; gap: 4px; }
    .task-card-icon-actions button { width: 28px; height: 28px; border: 1px solid #e1e2e6; border-radius: 8px; background: #fff; color: #667085; cursor: pointer; }
    .task-card-icon-actions button:hover { border-color: #b9c9e8; background: #f4f7ff; color: #2563eb; }
    .task-card-description { margin: 0; color: #596579; font-size: 11px; line-height: 1.45; }
    .task-status-control { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; border-top: 1px solid #eef1f5; padding-top: 8px; }
    .task-status-control span { color: #7a8494; font-size: 10px; font-weight: 850; }
    .task-status-control select { min-width: 0; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; padding: 7px 9px; color: #344054; font-size: 11px; font-weight: 850; }
    .agent-task-card.task-status-working { border-color: #ecd88f; background: #fff9df; }
    .agent-task-card.task-status-postponed { border-color: #bdd7f4; background: #edf6ff; }
    .agent-task-card.task-status-done { border-color: #b9dfc7; background: #edf9f1; opacity: 1; }
    .agent-task-card.task-status-needs_employee { border-color: #efbec3; background: #fff0f1; }
    .task-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 22px; background: rgba(15,23,42,.46); backdrop-filter: blur(5px); }
    .task-editor-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid #d8e0ea; border-radius: 22px; background: #fff; box-shadow: 0 28px 75px rgba(15,23,42,.28); padding: 20px; }
    .task-editor-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #eef1f5; }
    .task-editor-head small { color: #2563eb; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
    .task-editor-head h3 { margin: 4px 0 0; font-size: 22px; }
    .task-editor-head > button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f1f5f9; color: #667085; font-size: 22px; cursor: pointer; }
    .task-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
    .task-editor-grid label { display: grid; gap: 6px; }
    .task-editor-grid label.wide { grid-column: 1 / -1; }
    .task-editor-grid label > span { color: #475467; font-size: 11px; font-weight: 900; }
    .task-editor-grid input, .task-editor-grid select, .task-editor-grid textarea, .task-category-add input { width: 100%; border: 1px solid #d8e0ea; border-radius: 11px; background: #fff; padding: 10px 11px; color: #182230; font: inherit; font-size: 12px; }
    .task-editor-grid textarea { resize: vertical; line-height: 1.45; }
    .task-editor-grid input:focus, .task-editor-grid select:focus, .task-editor-grid textarea:focus, .task-category-add input:focus { border-color: #2563eb; outline: 0; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
    .task-category-manager { display: grid; gap: 10px; margin-top: 16px; border: 1px solid #e1e2e6; border-radius: 15px; background: #f8fafc; padding: 12px; }
    .task-category-manager small { display: block; margin-top: 3px; color: #7a8494; font-size: 10px; }
    .task-category-add { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 7px; }
    .task-category-add button { border: 0; border-radius: 10px; background: #2563eb; color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; }
    .task-category-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .task-category-list > span { display: inline-flex; gap: 5px; align-items: center; border: 1px solid #d8e0ea; border-radius: 999px; background: #fff; padding: 5px 6px 5px 9px; color: #475467; font-size: 10px; font-weight: 850; }
    .task-category-list button { width: 19px; height: 19px; border: 0; border-radius: 50%; background: #eef2f7; color: #667085; cursor: pointer; }
    .task-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f5; }
    @media (max-width: 700px) { .task-editor-grid { grid-template-columns: 1fr; } .task-editor-grid label.wide { grid-column: auto; } }
    @media (max-width: 700px) { .agent-trusted-add-row { grid-template-columns: minmax(0, 1fr) 46px; } .agent-trusted-add-row input:first-child { grid-column: 1 / -1; } }
    .client-card-backdrop { position: fixed; inset: 0; z-index: 159; background: rgba(24,34,48,.28); backdrop-filter: blur(2px); pointer-events: none; }
    .client-card-backdrop[hidden] { display: none; }
    .client-card-popover { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 160; width: min(820px, calc(100vw - 48px)); max-height: calc(100vh - 64px); overflow-y: auto; border: 1px solid #e1e2e6; border-radius: 26px; background: #fff; box-shadow: 0 26px 70px rgba(18,28,43,.28); padding: 24px; box-sizing: border-box; }
    .client-card-popover[hidden] { display: none; }
    .client-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 12px; }
    .client-card-head h3 { margin: 0; font-size: 20px; }
    .client-card-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
    .client-card-tab { border: 1px solid #d5d6dc; border-radius: 999px; background: #fff; padding: 8px 12px; font-size: 12px; font-weight: 850; }
    .client-card-tab.active { background: #f1faf2; border-color: var(--green); color: #2f7e36; }
    .client-info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .client-avatar-card { display: flex; align-items: center; gap: 12px; border: 1px solid #e1e2e6; border-radius: 16px; background: linear-gradient(135deg, #f7f9fc, #eef4ff); padding: 12px; }
    .client-channel-avatar { position: relative; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: #dfe7f5; display: grid; place-items: center; color: #315b9c; font-size: 20px; font-weight: 950; overflow: visible; }
    .client-channel-avatar img, .client-channel-avatar-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; overflow: hidden; }
    .client-channel-avatar-badge { position: absolute; right: -4px; bottom: -2px; min-width: 23px; height: 23px; border: 2px solid #fff; border-radius: 999px; background: #6874ef; color: #fff; display: grid; place-items: center; padding: 0 4px; box-sizing: border-box; font-size: 9px; font-weight: 950; }
    .client-channel-avatar.whatsapp .client-channel-avatar-badge { background: #22a66a; }
    .client-channel-avatar.telegram .client-channel-avatar-badge { background: #38a8df; }
    .client-channel-avatar.max .client-channel-avatar-badge { background: #6557eb; }
    .client-avatar-copy { min-width: 0; display: grid; gap: 3px; }
    .client-avatar-copy strong { font-size: 15px; }
    .client-avatar-copy span { color: var(--muted); font-size: 11px; font-weight: 750; }
    .client-info-item, .client-notify-row { font-size: 12px; font-weight: 780; }
    .client-info-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: center; }
    .client-info-item b { display: block; margin: 0; color: var(--muted); font-size: 10px; text-align: center; text-transform: uppercase; }
    .client-editable-item input, .client-info-item > span, .client-records-list { width: 100%; min-width: 0; border: 1px solid #e1e2e6; border-radius: 14px; background: #fbfbfc; padding: 12px 14px; box-sizing: border-box; color: #182230; font: inherit; font-size: 13px; font-weight: 800; }
    .client-info-item > span { display: block; text-align: center; }
    .client-editable-item input:focus { outline: 2px solid rgba(37,99,235,.22); border-color: #2563eb; background: #fff; }
    .client-records-item { align-items: start; }
    .client-records-list { display: grid; gap: 6px; }
    .client-record-row { min-width: 0; display: grid; grid-template-columns: 92px 112px minmax(0, 1fr); gap: 8px; align-items: center; border-bottom: 1px solid #e8ebf0; padding: 3px 0 7px; }
    .client-record-row:last-child { border-bottom: 0; padding-bottom: 2px; }
    .client-record-status { border-radius: 999px; padding: 5px 7px; text-align: center; font-size: 9px; font-weight: 900; white-space: nowrap; }
    .client-record-status.waiting { background: #fff4cd; color: #8a6500; }
    .client-record-status.arrived { background: #dcf7e8; color: #187348; }
    .client-record-status.missed { background: #ffe2e2; color: #aa3434; }
    .client-record-status.confirmed { background: #e3edff; color: #315ba8; }
    .client-record-date { color: #4f5968; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .client-record-service { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .client-notify-list { display: grid; gap: 8px; }
    .client-notify-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e1e2e6; border-radius: 14px; background: #fbfbfc; padding: 10px 12px; }
    @media (max-width: 620px) {
      .client-card-popover { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 16px; }
      .client-info-item { grid-template-columns: 1fr; gap: 6px; }
      .client-record-row { grid-template-columns: 86px minmax(0, 1fr); }
      .client-record-service { grid-column: 1 / -1; padding-left: 2px; }
    }
    .analytics-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 14px 0; }
    .analytics-kpi { border: 1px solid #e1e2e6; border-radius: 18px; background: #fff; padding: 14px; }
    .analytics-kpi b { display: block; font-size: 28px; line-height: 1; }
    .analytics-kpi span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .analytics-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; }
    .analytics-card { border: 1px solid #e1e2e6; border-radius: 18px; background: #fff; padding: 16px; min-width: 0; }
    .analytics-card h3 { margin: 0 0 12px; font-size: 17px; }
    .analytics-row { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0f1f3; font-size: 12px; font-weight: 800; }
    .analytics-bar { height: 10px; border-radius: 999px; background: #edf1ed; overflow: hidden; }
    .analytics-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
    .analytics-insight { border-radius: 14px; background: #f8fbf8; padding: 10px; margin-bottom: 8px; color: #20232a; font-size: 12px; line-height: 1.4; font-weight: 750; }
    .logs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
    .logs-filter-panel { position: sticky; top: 0; display: grid; gap: 14px; border: 1px solid #e1e2e6; border-radius: 20px; background: #fbfbfc; padding: 14px; }
    .logs-filter-block { display: grid; gap: 8px; }
    .logs-filter-block h3 { margin: 0; font-size: 13px; }
    .logs-filter-block label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 850; }
    .logs-filter-block select, .logs-filter-block input { width: 100%; border: 1px solid #d5d6dc; border-radius: 12px; background: #fff; padding: 10px; color: #20232a; font: inherit; font-size: 12px; font-weight: 760; }
    .logs-agent-checks { display: grid; gap: 5px; padding-right: 0; }
    .logs-filter-block label.logs-agent-check { display: flex; flex-direction: row; align-items: center; gap: 9px; min-height: 34px; border: 1px solid #e1e2e6; border-radius: 9px; background: #fff; padding: 5px 8px; box-sizing: border-box; color: #3e4858; font-size: 13px; font-weight: 850; line-height: 1.2; }
    .logs-filter-block label.logs-agent-check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: #1478ee; }
    .logs-agent-check span { min-width: 0; font-size: 13px; font-weight: 850; }
    .logs-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .logs-content { min-width: 0; }
    .log-day { display: grid; gap: 10px; margin-bottom: 18px; }
    .log-day-title { position: sticky; top: -18px; z-index: 3; border-bottom: 1px solid #e1e2e6; background: rgba(255,255,255,.96); padding: 10px 0; font-size: 18px; font-weight: 900; }
    .agent-log-row { display: grid; grid-template-columns: 74px 120px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #e1e2e6; border-radius: 16px; background: #fff; padding: 11px 12px; box-shadow: 0 1px 4px rgba(32,35,42,.05); }
    .agent-log-time { font: 13px/1.2 "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-weight: 850; color: #20232a; }
    .agent-log-name { border-radius: 999px; background: #f1faf2; color: #2f7e36; padding: 6px 9px; font-size: 12px; font-weight: 900; text-align: center; }
    .agent-log-action { font-size: 13px; font-weight: 760; color: #20232a; }
    .agent-log-status { border-radius: 999px; background: #eef8ff; color: #2474a8; padding: 6px 9px; font-size: 11px; font-weight: 850; white-space: nowrap; }
    .agent-log-status.warn { background: #fff2cf; color: #845d00; }
    .agent-log-status.ok { background: #f1faf2; color: #2f7e36; }

    /* Yclients / Beauty Bot visual skin: структура прежняя, меняется только оформление */
    body { background: #f8f8f9; color: #1f2228; }
    :root {
      --black: #20232a;
      --white: #ffffff;
      --paper: #f8fbf8;
      --gold: #43a047;
      --green: #43a047;
      --muted: #747783;
      --wall: #d5d6dc;
      --wall-soft: #d5d6dc;
      --floor: #ffffff;
      --floor-2: #fbfbfc;
      --corridor: #f2f4f3;
      --shadow: 0 10px 24px rgba(32, 35, 42, .10);
    }
    .app { background: #f8f8f9; gap: 24px; padding: 24px; }
    .topbar, .tabs, .side-card, .map, .settings-page, .notifications-page, .agents-page {
      border: 1px solid #e1e2e6;
      background: #fff;
      box-shadow: 0 2px 8px rgba(32,35,42,.08);
    }
    .tabs { border-radius: 14px; padding: 8px; gap: 8px; }
    .tab { color: #4d505b; border-radius: 10px; font-size: 15px; font-weight: 700; padding: 12px 14px; }
    .tab:hover { background: #f1f6f1; color: #2f7e36; }
    .tab.active { background: #f1f7f1; color: #1f2228; box-shadow: inset 4px 0 0 #43a047; }
    .dialogs-nav-tab { display: inline-flex; align-items: center; gap: 10px; }
    .dialogs-nav-icon-slot { width: 24px; height: 24px; border-radius: 50%; background: #e7f1e8; box-shadow: inset 0 0 0 2px rgba(67,160,71,.18); flex: 0 0 auto; }
    .dialogs-nav-counters { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; }
    .dialogs-nav-counter { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; color: #fff; display: inline-grid; place-items: center; font-size: 12px; line-height: 1; font-weight: 900; }
    .dialogs-nav-counter.human { background: #ef4f4f; }
    .dialogs-nav-counter.agent { background: #43a047; }
    .badge { background: #43a047; color: #fff; border-radius: 999px; }
    .nav-dropdown { border: 1px solid #d8d9df; background: #fff; border-radius: 14px; box-shadow: 0 16px 34px rgba(32,35,42,.14); }
    .nav-dropdown button { background: #fff; color: #454854; font-weight: 700; }
    .nav-dropdown button:hover, .nav-dropdown button.active { background: #f0f8f1; color: #2f7e36; }

    .map { border-radius: 18px; background: #fff; padding: 18px; }
    .building, .corridor, .room, .agent-desk, .service-card, .client-card, .resting-master-card, .mani-station, .nail-table, .seat, .person {
      border-color: #d5d6dc;
      box-shadow: none;
    }
    .building::before { background: #f2f4f3; border-bottom-color: #d5d6dc; }
    .building-title, .room h3, .corridor-label, .desk-label {
      border: 0;
      background: #f3f8f4;
      color: #1f2228;
      box-shadow: none;
      border-radius: 9px;
      font-weight: 700;
    }
    .office, .branch1, .branch2, .room, .corridor { background: #fbfbfc; }
    .agent-desk, .service-card, .client-card, .resting-master-card, .mani-station, .note {
      border-width: 1px;
      background: #fff;
      color: #1f2228;
      box-shadow: 0 1px 4px rgba(32,35,42,.06);
    }
    .room:hover, .agent-desk:hover, .service-card:hover, .client-card:hover, .resting-master-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(32,35,42,.10);
      border-color: #a9d8ad;
    }
    .dot, .integration-dot, .status-chip, .tool-status, .mini-btn, .launch-box { border-color: #d5d6dc; }
    .master-chip, .ico { background: #f1f6f1; color: #2f7e36; }

    .sidebar { gap: 16px; scrollbar-color: #a7d8ab #edf2ee; }
    .side-card { border-radius: 18px; padding: 18px; }
    .agent-card { background: #fff; color: #1f2228; }
    .agent-card h2, .title { color: #1f2228; font-weight: 800; }
    .agent-card p, .metric span, .task small, .agent-tool small, .integration-item small, .launch-item small, .analytics-tile span, .section-note, .details, .service-card .sub { color: #747783; }
    .metric, .task, .agent-tool, .integration-item, .launch-item, .analytics-tile, .rule, .details {
      border: 1px solid #e1e2e6;
      background: #fff;
      box-shadow: 0 1px 4px rgba(32,35,42,.05);
      border-radius: 14px;
    }
    .metric b, .analytics-tile b { color: #1f2228; }
    .task.ok, .launch-item.done { background: #f1faf2; }
    .task.critical { border-color: #ffb36a; background: #fff8f1; }
    .btn, .mini-btn, .primary-action, .secondary-action {
      border: 1px solid #d5d6dc;
      border-radius: 999px;
      background: #fff;
      color: #4d505b;
      font-weight: 800;
      box-shadow: none;
    }
    .btn.gold, .mini-btn.active, .mini-btn.gold, .primary-action {
      border-color: #43a047;
      background: #43a047;
      color: #fff;
      box-shadow: 0 8px 18px rgba(67,160,71,.22);
    }
    .btn.dark, .mini-btn.dark { background: #4d505b; color: #fff; }
    .toast { border: 1px solid #43a047; border-radius: 14px; background: #f1faf2; color: #2f7e36; box-shadow: 0 10px 24px rgba(32,35,42,.10); }

    .settings-page, .notifications-page, .agents-page { border-radius: 18px; padding: 24px; }
    .settings-header h2, .notifications-toolbar h2, .templates-title { color: #1f2228; font-weight: 850; letter-spacing: -.04em; }
    .settings-tabs, .settings-subtabs, .yc-tabs, .template-tabs { gap: 26px; }
    .settings-tab, .settings-subtab, .yc-tab, .template-tab {
      background: transparent;
      color: #2f7e36;
      border-radius: 0;
      font-weight: 500;
      box-shadow: none;
    }
    .settings-tab.active, .settings-subtab.active, .yc-tab.active, .template-tab.active {
      background: transparent;
      color: #1f2228;
      border-bottom: 4px solid #2f7e36;
      box-shadow: none;
    }
    .settings-card, .channel-row, .settings-status, .field input, .field select, .field textarea, .notifications-select, .yc-shell, .templates-shell {
      border: 1px solid #e1e2e6;
      background: #fff;
      border-radius: 16px;
      box-shadow: none;
    }
    .templates-shell, .yc-shell { padding: 28px; }
    .video-action { border: 1px solid #b9bac3; color: #4d505b; background: #fff; border-radius: 999px; font-weight: 800; }
    .new-template-action { background: #43a047; border-radius: 999px; box-shadow: 0 10px 20px rgba(67,160,71,.25); }
    .template-grid { gap: 28px; }
    .template-card {
      border: 2px solid #d4d5db;
      border-radius: 10px;
      box-shadow: none;
      min-height: 288px;
    }
    .template-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(32,35,42,.12); border-color: #c4c6cc; }
    .template-card.warn { border-color: #ff6d00; }
    .template-card-body { padding: 24px 26px; }
    .template-card-top { color: #4f5260; font-size: 20px; }
    .template-card-title { font-size: 27px; font-weight: 850; }
    .template-card-text { font-size: 20px; color: #20232a; }
    .template-card-meta { font-size: 18px; color: #747783; }
    .template-risk { background: #f4faf5; color: #5e6170; border-top: 2px solid #d4d5db; }
    .template-risk.high { background: #fdeaea; }
    .template-card-menu { border: 1px solid #d8d9df; box-shadow: 0 16px 34px rgba(32,35,42,.14); }

    /* Global typography trim: заголовки и названия -3px */
    h1 { font-size: 16px; }
    .agent-card h2 { font-size: 15px; }
    .settings-header h2, .notifications-toolbar h2 { font-size: 25px; }
    .settings-card h3 { font-size: 15px; }
    .details h3 { font-size: 12px; }
    .title { font-size: 11px; }
    .building-title, .room h3, .corridor-label, .desk-label { font-size: 8px; }
    .yc-title { font-size: 22px; }
    .yc-cascade h3 { font-size: 21px; }
    .templates-title { font-size: 41px; }
    .template-card-title { font-size: 24px; }
    .template-editor-title { font-size: 41px; }
    .template-editor-active strong { font-size: 16px; }
    .template-editor-main .field label { font-size: 16px; }
    .template-message-tab { font-size: 15px; }
    .template-media-field h4 { font-size: 15px; }
    .template-send-conditions h3 { font-size: 21px; }
    .template-send-conditions h4 { font-size: 16px; }
    .template-keys-card h3 { font-size: 20px; }
    .task strong, .agent-tool strong, .integration-item strong, .launch-item strong { font-size: 9px; }
    .service-card strong, .client-card strong, .resting-master-card strong, .yc-template-card strong { font-size: 8px; }

    /* Adaptive visual polish — сохраняет существующий порядок и расположение элементов */
    :root {
      --ui-bg: #f4f7fb;
      --ui-surface: rgba(255,255,255,.94);
      --ui-surface-soft: #f8fafc;
      --ui-line: #e2e8f0;
      --ui-text: #182230;
      --ui-muted: #667085;
      --ui-blue: #2563eb;
      --ui-blue-soft: #eaf1ff;
      --ui-green: #22a06b;
      --ui-shadow: 0 14px 38px rgba(23,43,77,.10);
      --ui-shadow-soft: 0 5px 16px rgba(23,43,77,.07);
    }
    html { background: var(--ui-bg); }
    body {
      background:
        radial-gradient(circle at 6% 0%, rgba(37,99,235,.10), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(34,160,107,.08), transparent 24%),
        var(--ui-bg);
      color: var(--ui-text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    button, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(37,99,235,.18);
      outline-offset: 2px;
    }
    button:not(:disabled):active { transform: translateY(1px); }
    .app { gap: 12px; padding: 12px; }
    .main { gap: 10px; }
    .tabs {
      border: 1px solid rgba(226,232,240,.96);
      border-radius: 16px;
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-soft);
      padding: 6px;
      scrollbar-width: thin;
      scrollbar-color: #cbd5e1 transparent;
      backdrop-filter: blur(14px);
    }
    .tabs::-webkit-scrollbar { height: 5px; }
    .tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .tab {
      border-radius: 10px;
      color: #596579;
      padding: 8px 10px;
      letter-spacing: -.01em;
    }
    .tab:hover { background: #f1f5f9; color: var(--ui-text); }
    .tab.active {
      background: linear-gradient(135deg, #1d4ed8, var(--ui-blue));
      color: #fff;
      box-shadow: 0 7px 17px rgba(37,99,235,.24);
    }
    .badge, .dialogs-nav-counter { box-shadow: none; }
    .tab.active .badge { background: #fff; color: var(--ui-blue); }
    .nav-dropdown {
      border: 1px solid var(--ui-line);
      border-radius: 15px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 18px 42px rgba(23,43,77,.16);
      backdrop-filter: blur(16px);
    }
    .nav-dropdown button { background: transparent; color: var(--ui-text); }
    .nav-dropdown button:hover, .nav-dropdown button.active { background: var(--ui-blue-soft); color: var(--ui-blue); }

    .map, .side-card, .settings-page, .notifications-page, .agents-page, .dialogs-page,
    .tasks-page, .logs-page, .analytics-page {
      border-color: var(--ui-line);
      box-shadow: var(--ui-shadow);
    }
    .map { border-width: 1px; border-radius: 20px; }
    .sidebar { gap: 10px; }
    .side-card {
      border-width: 1px;
      border-radius: 18px;
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-soft);
    }
    .side-card h2, .side-card h3 { letter-spacing: -.025em; }
    .quick-notes-card { display: grid; gap: 10px; }
    .quick-note-date-nav { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; gap: 8px; align-items: center; }
    .quick-note-date-nav button { width: 34px; height: 34px; border: 1px solid var(--ui-line); border-radius: 10px; background: #f8fafc; color: #475467; font-size: 17px; cursor: pointer; }
    .quick-note-date-nav button:hover { border-color: #b9c9e8; background: var(--ui-blue-soft); color: var(--ui-blue); }
    .quick-note-date-nav div { min-width: 0; text-align: center; }
    .quick-note-date-nav span { display: block; color: var(--ui-text); font-size: 13px; font-weight: 900; }
    .quick-note-date-nav strong { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 10px; font-weight: 750; text-transform: capitalize; }
    #quick-note-text { width: 100%; min-height: 150px; resize: vertical; border: 1px solid #d8e0ea; border-radius: 13px; background: #fffdf5; padding: 12px; color: var(--ui-text); font: inherit; font-size: 12px; line-height: 1.45; }
    #quick-note-text:focus { border-color: var(--ui-blue); outline: 0; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
    .quick-note-save-state { color: #98a2b3; font-size: 9px; font-weight: 750; text-align: right; }
    .channel-status-card { display: grid; gap: 7px; padding: 12px; }
    .channel-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: start; }
    .channel-studio-column { min-width: 0; display: grid; align-content: start; gap: 5px; }
    .channel-studio-title { min-height: 32px; margin: 0; border-bottom: 1px solid #dbe4ef; padding: 1px 1px 6px; color: #253044; font-size: 9px; font-weight: 950; line-height: 1.2; text-align: center; }
    .channel-studio-list { display: grid; gap: 5px; }
    .channel-status-tile { min-width: 0; min-height: 36px; border: 1px solid transparent; border-radius: 9px; padding: 4px 7px; display: grid; place-items: center; text-align: center; }
    .channel-status-tile strong { color: #253044; font-size: 11px; font-weight: 900; line-height: 1.1; white-space: normal; }
    .channel-status-tile.connected { border-color: #a9ddbf; background: #e8f8ef; }
    .channel-status-tile.disconnected { border-color: #efb7bd; background: #ffebed; }
    .channel-status-tile.help { border-color: #ead28b; background: #fff7d6; }
    .channel-status-card > .title { margin-bottom: 1px; font-size: 12px; }
    .channel-status-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; color: #7a8494; font-size: 9px; font-weight: 800; }
    .channel-status-legend span { display: inline-flex; align-items: center; gap: 4px; }
    .channel-status-legend i { width: 8px; height: 8px; border-radius: 3px; }
    .channel-status-legend i.connected { background: #55b77d; }
    .channel-status-legend i.disconnected { background: #df6770; }
    .channel-status-legend i.help { background: #d9ae32; }
    .catalog-refresh-card { display: grid; gap: 8px; padding: 12px; }
    .catalog-refresh-card .catalog-refresh-title { color: #253044; font-size: 12px; font-weight: 950; }
    .catalog-refresh-card p { margin: 0; color: #7a8494; font-size: 10px; line-height: 1.35; }
    .catalog-refresh-actions { display: grid; gap: 6px; }
    .catalog-refresh-button { border: 1px solid #9bb8ee; border-radius: 9px; background: #eef4ff; color: #1d4ed8; padding: 8px 9px; font-size: 10px; font-weight: 900; cursor: pointer; }
    .catalog-refresh-button:hover { background: #dce9ff; }
    .catalog-refresh-button:disabled { cursor: wait; opacity: .65; }
    .catalog-refresh-result { min-height: 14px; color: #7a8494; font-size: 9px; font-weight: 800; }
    .catalog-refresh-result.ok { color: #18794e; }
    .catalog-refresh-result.error { color: #b4232e; }

    .settings-general-detail { min-height: 0; }
    .settings-general-detail[hidden], .settings-studio-tabs[hidden], .settings-tabs[hidden], .settings-grid[hidden] { display: none !important; }
    .general-settings-card { width: min(920px, 100%); border: 1px solid var(--ui-line); border-radius: 18px; background: #fff; box-shadow: var(--ui-shadow-soft); padding: 20px; display: grid; gap: 4px; }
    .general-settings-card h3 { margin: 0 0 12px; color: var(--ui-text); font-size: 18px; }
    .general-setting-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, 260px); gap: 18px; align-items: center; border-bottom: 1px solid #edf1f5; padding: 15px 0; }
    .general-setting-row:last-child { border-bottom: 0; }
    .general-setting-label { color: #344054; font-size: 13px; font-weight: 800; line-height: 1.35; }
    .general-setting-control { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
    .general-setting-control input, .general-setting-control select { width: 100%; border: 1px solid #d6dee8; border-radius: 10px; background: #fff; padding: 9px 11px; color: #344054; font: inherit; font-size: 12px; }
    .general-setting-control input.compact-number { width: 82px; text-align: center; }
    .general-setting-control .unit { color: #7a8494; font-size: 11px; font-weight: 800; }
    .employee-work-time { display: inline-flex; align-items: center; gap: 7px; color: #7a8494; font-size: 11px; font-weight: 800; }
    .general-setting-control .employee-work-time input { width: 104px; min-width: 104px; }
    .general-toggle { min-width: 90px; border: 1px solid #cfd8e3; border-radius: 999px; background: #f3f5f8; padding: 8px 12px; color: #667085; font-size: 11px; font-weight: 900; cursor: pointer; }
    .general-toggle.on { border-color: #9ed4b3; background: #e9f8ef; color: #18794e; }
    .notification-interval-row { margin-top: 14px; }
    .notification-interval-input { width: 72px; border: 1px solid #d6dee8; border-radius: 10px; padding: 8px 10px; text-align: center; }
    .archive-shell { display: grid; grid-template-columns: 210px minmax(760px, 1fr); min-height: 620px; border: 1px solid var(--ui-line); border-radius: 18px; overflow: hidden; background: #fff; }
    .archive-sidebar { border-right: 1px solid var(--ui-line); background: #f8fafc; padding: 18px 14px; }
    .archive-sidebar h3 { margin: 0 0 12px; font-size: 14px; }
    .archive-type-list { display: grid; gap: 7px; }
    .archive-type-btn { border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; padding: 10px; display: flex; justify-content: space-between; gap: 8px; color: #475467; font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; }
    .archive-type-btn.active { border-color: #9bb8ee; background: #eef4ff; color: #1d4ed8; }
    .archive-main { min-width: 0; padding: 18px; overflow-x: auto; }
    .archive-toolbar { display: grid; grid-template-columns: 180px 160px minmax(220px, 1fr); gap: 10px; margin-bottom: 16px; }
    .archive-toolbar input, .archive-toolbar select { border: 1px solid #d6dee8; border-radius: 10px; background: #fff; padding: 9px 11px; color: #344054; font: inherit; font-size: 11px; }
    .archive-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
    .archive-table th { background: #f8fafc; color: #667085; padding: 11px 10px; text-align: left; font-size: 10px; }
    .archive-table td { border-bottom: 1px solid #edf1f5; padding: 11px 10px; color: #344054; vertical-align: top; }
    .archive-table tr:hover td { background: #fafcff; }
    .archive-message-cell { max-width: 360px; line-height: 1.35; }
    .archive-status { display: inline-flex; border-radius: 999px; padding: 5px 8px; font-size: 9px; font-weight: 900; }
    .archive-status.sent { background: #e8f8ef; color: #18794e; }
    .archive-status.waiting { background: #fff7d6; color: #8a6100; }
    .archive-status.error { background: #ffebed; color: #b4232e; }
    .archive-empty { padding: 36px 12px; color: #98a2b3; text-align: center; }
    @media (max-width: 900px) { .general-setting-row { grid-template-columns: 1fr; gap: 9px; } .general-setting-control { justify-content: flex-start; } .archive-shell { grid-template-columns: 180px minmax(720px, 1fr); } }

    .settings-page, .notifications-page, .agents-page, .tasks-page, .logs-page, .analytics-page {
      border-width: 1px;
      border-radius: 20px;
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow);
    }
    .settings-header { padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
    .settings-header h2, .notifications-toolbar h2 { color: var(--ui-text); letter-spacing: -.035em; }
    .settings-tabs, .settings-studio-tabs { gap: 7px; }
    .settings-tab, .settings-studio-tab, .agent-tab, .client-card-tab, .task-audience-tab {
      border: 1px solid var(--ui-line);
      border-radius: 10px;
      background: #f8fafc;
      color: #596579;
      box-shadow: none;
    }
    .settings-tab:hover, .settings-studio-tab:hover, .agent-tab:hover, .client-card-tab:hover, .task-audience-tab:hover {
      border-color: #b9c9e8;
      background: var(--ui-blue-soft);
      color: var(--ui-blue);
    }
    .settings-tab.active, .settings-studio-tab.active, .agent-tab.active, .client-card-tab.active, .task-audience-tab.active {
      border-color: var(--ui-blue);
      background: var(--ui-blue-soft);
      color: #1d4ed8;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,.10);
    }
    .settings-grid { gap: 12px; }
    .settings-card, .agent-tab-group, .task-filter-panel, .logs-filter-panel,
    .analytics-card, .analytics-panel, .task-column, .agent-task-card {
      border-color: var(--ui-line);
      background: #fff;
      box-shadow: var(--ui-shadow-soft);
    }
    .channel-row {
      border-color: var(--ui-line);
      background: var(--ui-surface-soft);
      box-shadow: none;
    }
    .channel-row:hover { border-color: #b9c9e8; background: #f4f7ff; }
    .channel-row.active { border-color: var(--ui-blue); background: var(--ui-blue-soft); box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
    .field input, .field select, .field textarea, .agent-profile-form input, .agent-profile-form select,
    .agent-profile-form textarea, .logs-filter-section input, .logs-filter-section select {
      border-color: #d8e0ea;
      background: #fff;
      color: var(--ui-text);
      box-shadow: inset 0 1px 2px rgba(16,24,40,.025);
    }
    .field input:focus, .field select:focus, .field textarea:focus, .agent-profile-form input:focus,
    .agent-profile-form select:focus, .agent-profile-form textarea:focus {
      border-color: var(--ui-blue);
      box-shadow: 0 0 0 4px rgba(37,99,235,.10);
      outline: 0;
    }
    .primary-action {
      border-color: var(--ui-blue);
      background: linear-gradient(135deg, #1d4ed8, var(--ui-blue));
      color: #fff;
      box-shadow: 0 7px 16px rgba(37,99,235,.20);
    }
    .primary-action:hover { filter: brightness(1.04); transform: translateY(-1px); }
    .secondary-action { border-color: #d5deea; background: #fff; color: #475467; }
    .secondary-action:hover { border-color: #b9c9e8; background: #f8fafc; color: var(--ui-blue); }
    .settings-status { border-color: #d8e5ff; background: #f4f7ff; color: #475467; }
    .settings-status.ready { border-color: #bfe8d2; background: #edf9f3; color: #18794e; }
    .server-sync-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-left: auto; border: 1px solid #d7dee9; border-radius: 999px; background: #f8fafc; padding: 5px 10px; color: #667085; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .server-sync-badge::before { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; content: ''; }
    .server-sync-badge[data-state="connected"] { border-color: #b7e3ca; background: #edf9f3; color: #18794e; }
    .server-sync-badge[data-state="connected"]::before { background: #22a06b; }
    .server-sync-badge[data-state="syncing"] { border-color: #bdd1fa; background: #eff5ff; color: #245bb8; }
    .server-sync-badge[data-state="syncing"]::before { background: #2563eb; }
    .server-sync-badge[data-state="offline"] { border-color: #f0c2c0; background: #fff3f2; color: #b42318; }
    .server-sync-badge[data-state="offline"]::before { background: #d92d20; }

    .dialogs-page { border-width: 1px; border-radius: 20px; background: #fff; overflow: hidden; }
    .dialogs-layout { background: #fff; }
    .dialogs-left, .dialogs-right { background: #fbfcfe; }
    .dialogs-left { border-right-color: var(--ui-line); }
    .dialogs-right { border-left-color: var(--ui-line); }
    .dialog-head, .dialog-search-panel, .dialog-subtabs, .dialog-composer { border-color: var(--ui-line); }
    .dialog-head { background: rgba(255,255,255,.96); }
    .dialog-search-panel { background: #fff; }
    .dialog-search-panel input, .dialog-composer input, .dialog-composer textarea, .dialogs-search {
      border-color: #d8e0ea;
      background: #fff;
      box-shadow: 0 1px 2px rgba(16,24,40,.03);
    }
    .dialog-search-panel input:focus, .dialog-composer input:focus, .dialog-composer textarea:focus, .dialogs-search:focus {
      border-color: var(--ui-blue);
      box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    }
    .dialog-messages { background: linear-gradient(180deg, #f5f7fb, #f8fafc); }
    .dialog-bubble.client { border: 1px solid var(--ui-line); background: #fff; box-shadow: 0 5px 14px rgba(23,43,77,.06); }
    .dialog-bubble.agent { background: #e7efff; color: #183b77; box-shadow: 0 5px 14px rgba(37,99,235,.08); }
    .dialog-work-btn { background: #eef2f7; color: #344054; }
    .dialog-finish-btn { background: #eaf8f1; color: #18794e; }
    .dialog-subtab-button { color: #7a8494; }
    .dialog-subtab-button.active { color: var(--ui-blue); border-bottom-color: var(--ui-blue); }
    .dialog-chat-card { border-color: transparent; border-radius: 14px; }
    .dialog-chat-card:hover { background: #f1f5f9; }
    .dialog-chat-card.active { background: var(--ui-blue-soft); border-color: #c9d8fa; }
    .client-card-popover { border-color: var(--ui-line); box-shadow: 0 22px 55px rgba(23,43,77,.20); }

    .tasks-layout, .logs-layout { gap: 14px; }
    .task-filter-button { border-color: transparent; background: transparent; color: #596579; }
    .task-filter-button:hover { background: #f1f5f9; color: var(--ui-text); }
    .task-filter-button.active { background: var(--ui-blue-soft); color: var(--ui-blue); }
    .agent-task-card { border-radius: 16px; }
    .agent-task-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23,43,77,.11); }
    .log-row { border-color: var(--ui-line); background: #fff; box-shadow: 0 3px 12px rgba(23,43,77,.04); }
    .log-row:hover { border-color: #c9d8fa; background: #fbfdff; }
    .analytics-kpi { border-color: var(--ui-line); background: #fff; box-shadow: var(--ui-shadow-soft); }
    .analytics-kpi strong { color: var(--ui-blue); }

    @media (max-width: 1500px) {
      .app { grid-template-columns: minmax(880px, 1fr) 320px; }
      .settings-grid { grid-template-columns: minmax(0, 1fr); }
      .tab { padding-inline: 8px; font-size: 12px; }
    }
    @media (max-width: 1320px) {
      .app { height: auto; min-height: 100vh; overflow: visible; grid-template-columns: 1fr; padding: 10px; }
      .main { min-height: calc(100vh - 20px); }
      .tabs { position: sticky; top: 8px; z-index: 70; }
      .map { min-height: 860px; overflow-x: auto; }
      .map-grid { min-width: 1060px; }
      .sidebar { max-height: none; overflow-y: visible; }
      .settings-grid { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 900px) {
      .app { padding: 8px; }
      .tabs { border-radius: 14px; padding: 5px; }
      .tab { font-size: 12px; }
      .settings-page, .notifications-page, .agents-page, .tasks-page, .logs-page, .analytics-page { border-radius: 16px; padding: 14px; }
      .settings-grid { grid-template-columns: 1fr; }
      .settings-card { min-width: 0; }
      .dialogs-layout { min-width: 1040px; }
      .dialogs-page { overflow-x: auto; }
      .tasks-layout, .logs-layout { min-width: 820px; }
      .tasks-page, .logs-page { overflow-x: auto; }
      .analytics-grid, .analytics-kpis { min-width: 720px; }
      .analytics-page { overflow-x: auto; }
      .form-grid, .agent-profile-form, .client-info-grid { grid-template-columns: 1fr; }
      .agent-tab-group-title { width: 100%; min-width: 0; }
      .client-card-popover { right: 16px; left: 16px; width: auto; }
    }
    @media (max-width: 620px) {
      .app { padding: 6px; }
      .tabs { top: 4px; }
      .settings-header { align-items: flex-start; flex-wrap: wrap; }
      .settings-header h2, .notifications-toolbar h2 { font-size: 22px; }
      .primary-action, .secondary-action { min-height: 40px; }
      .settings-studio-tabs, .settings-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
      .agent-tab-group { align-items: stretch; }
      .agent-tab { flex: 1 0 auto; }
    }

    /* Agent access and actions matrix */
    .agent-access-box { border: 1px solid #dfe5ee; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 8px 22px rgba(15,23,42,.055); }
    .agent-access-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #e6eaf0; background: linear-gradient(135deg, #fff 0%, #f7faff 100%); }
    .agent-access-title span { display: block; margin-bottom: 4px; color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .agent-access-title h3 { margin: 0; color: #172033; font-size: 20px; letter-spacing: -.02em; }
    .agent-access-title small { color: #697586; font-size: 11px; font-weight: 750; }
    .agent-access-table { min-width: 820px; overflow-x: auto; }
    .agent-access-row { display: grid; grid-template-columns: minmax(250px, 1fr) repeat(3, minmax(135px, 160px)); align-items: center; min-height: 44px; border-bottom: 1px solid #edf0f4; }
    .agent-access-row:last-child { border-bottom: 0; }
    .agent-access-row:hover:not(.agent-access-header) { background: #f8faff; }
    .agent-access-header { min-height: 52px; background: #f4f7fb; color: #5f6b7c; font-size: 10px; font-weight: 900; line-height: 1.2; text-transform: uppercase; letter-spacing: .035em; }
    .agent-access-header > div { height: 100%; display: grid; place-items: center; padding: 8px 12px; text-align: center; border-left: 1px solid #e5eaf1; }
    .agent-access-header > div:first-child { place-items: center start; border-left: 0; text-align: left; }
    .agent-access-name { min-width: 0; padding: 10px 18px; color: #344054; font-size: 12px; font-weight: 780; }
    .agent-access-row.is-nested .agent-access-name { position: relative; padding-left: 38px; }
    .agent-access-row.is-nested .agent-access-name::before { content: ''; position: absolute; left: 20px; top: 50%; width: 9px; height: 1px; background: #a9b4c4; }
    .agent-access-subsection-title { padding: 11px 18px; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; background: #eef4ff; color: #2255ad; font-size: 12px; font-weight: 950; }
    .agent-access-paid-badge { display: inline-flex; margin-left: 8px; border-radius: 6px; background: #e8f7e9; color: #2b9137; padding: 2px 7px; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
    .agent-access-choice { height: 100%; display: grid; place-items: center; border-left: 1px solid #edf0f4; cursor: pointer; }
    .agent-access-choice input { appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid #cbd3df; border-radius: 50%; background: #fff; cursor: pointer; transition: .15s ease; }
    .agent-access-choice input:hover { border-color: #76a5f8; box-shadow: 0 0 0 4px rgba(37,99,235,.09); }
    .agent-access-choice input:checked { border: 6px solid #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
    .agent-access-choice input[value="full"]:checked { border-color: #22a35a; box-shadow: 0 0 0 3px rgba(34,163,90,.11); }
    .agent-access-choice input[value="none"]:checked { border-color: #d84b4b; box-shadow: 0 0 0 3px rgba(216,75,75,.10); }
    .agent-access-section-title { padding: 10px 18px; border-bottom: 1px solid #e7ecf2; background: #eef4ff; color: #2255ad; font-size: 12px; font-weight: 900; }
    .agent-access-section { border-bottom: 1px solid #dfe5ee; }
    .agent-access-section:last-child { border-bottom: 0; }
    .agent-access-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 9px 18px; background: #f8fafc; color: #27364c; font-size: 13px; font-weight: 900; cursor: pointer; list-style: none; user-select: none; }
    .agent-access-section summary::-webkit-details-marker { display: none; }
    .agent-access-section summary:hover { background: #f0f5fc; }
    .agent-access-chevron { color: #64748b; font-size: 18px; transition: transform .16s ease; }
    .agent-access-section[open] .agent-access-chevron { transform: rotate(180deg); }
    @media (max-width: 900px) {
      .agent-access-box { overflow-x: auto; }
      .agent-access-title { min-width: 820px; }
      .agent-access-title small { display: none; }
    }

    /* New connection-settings visual system */
    #settings-page.connections-view {
      --connection-blue: #2563eb;
      --connection-blue-soft: #eff6ff;
      --connection-line: #e2e8f0;
      --connection-text: #172033;
      --connection-muted: #667085;
      border: 1px solid var(--connection-line);
      border-radius: 24px;
      background: #f6f8fc;
      box-shadow: 0 18px 52px rgba(15, 23, 42, .08);
      padding: 22px;
    }
    #settings-page.connections-view .settings-header { margin-bottom: 18px; }
    #settings-page.connections-view .settings-header h2 { color: var(--connection-text); font-size: 28px; letter-spacing: -.035em; }
    #settings-page.connections-view .settings-header > .primary-action {
      border: 0; border-radius: 12px; background: var(--connection-blue); color: #fff; padding: 11px 18px;
      box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
    }
    #settings-page.connections-view .settings-studio-tabs {
      width: max-content; max-width: 100%; display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 14px;
      border: 1px solid var(--connection-line); border-radius: 14px; background: #e9eef6; padding: 4px;
    }
    #settings-page.connections-view .settings-studio-tab {
      border: 0; border-radius: 10px; background: transparent; color: #667085; padding: 9px 16px; font-size: 13px;
    }
    #settings-page.connections-view .settings-studio-tab.active {
      background: #fff; color: var(--connection-blue); box-shadow: 0 2px 7px rgba(15, 23, 42, .10);
    }
    #settings-page.connections-view .settings-tabs {
      display: flex; flex-wrap: nowrap; gap: 7px; margin: 0 0 16px; padding: 4px 2px 8px;
      overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
    }
    #settings-page.connections-view .settings-tab {
      flex: 0 0 auto; border: 1px solid var(--connection-line); border-radius: 999px; background: #fff;
      color: #526072; padding: 9px 14px; font-size: 12px; font-weight: 850; box-shadow: none;
    }
    #settings-page.connections-view .settings-tab:hover { border-color: #b8c5d7; color: var(--connection-blue); }
    #settings-page.connections-view .settings-tab.active {
      border-color: var(--connection-blue); background: var(--connection-blue); color: #fff;
      box-shadow: 0 6px 14px rgba(37, 99, 235, .20);
    }
    #settings-page.connections-view .settings-grid { display: block; }
    #settings-page.connections-view .settings-card {
      border: 1px solid var(--connection-line); border-radius: 20px; background: #fff; padding: 0;
      box-shadow: 0 8px 26px rgba(15, 23, 42, .055); overflow: hidden;
    }
    #settings-page.connections-view .settings-form { display: grid; gap: 0; }
    #settings-page.connections-view .connection-head {
      display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 24px;
      border-bottom: 1px solid var(--connection-line); background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    }
    #settings-page.connections-view .connection-title-block { min-width: 0; }
    #settings-page.connections-view .connection-eyebrow {
      display: block; margin-bottom: 6px; color: var(--connection-blue); font-size: 11px; font-weight: 900;
      letter-spacing: .08em; text-transform: uppercase;
    }
    #settings-page.connections-view .connection-title-block h3 { margin: 0; color: var(--connection-text); font-size: 22px; letter-spacing: -.025em; }
    #settings-page.connections-view .connection-title-block p { margin: 6px 0 0; color: var(--connection-muted); font-size: 13px; font-weight: 650; }
    #settings-page.connections-view .settings-status {
      flex: 0 0 min(310px, 42%); display: flex; align-items: center; gap: 10px; border: 1px solid #f3d68a;
      border-radius: 14px; background: #fffbeb; padding: 11px 13px; color: #8a5b12; box-shadow: none;
    }
    #settings-page.connections-view .settings-status.ready { border-color: #b9e5c8; background: #effcf4; color: #18733b; }
    #settings-page.connections-view .settings-status.off { border-color: #d7dce5; background: #f4f6f8; color: #667085; }
    #settings-page.connections-view .connection-status-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #e9a620; box-shadow: 0 0 0 4px rgba(233,166,32,.14); }
    #settings-page.connections-view .settings-status.ready .connection-status-dot { background: #27a458; box-shadow: 0 0 0 4px rgba(39,164,88,.14); }
    #settings-page.connections-view .settings-status.off .connection-status-dot { background: #98a2b3; box-shadow: 0 0 0 4px rgba(152,162,179,.14); }
    #settings-page.connections-view .settings-status small { display: block; margin-bottom: 2px; color: currentColor; opacity: .75; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
    #settings-page.connections-view .settings-status strong { display: block; font-size: 12px; line-height: 1.25; }
    #settings-page.connections-view .connection-fields { display: grid; gap: 14px; padding: 22px 24px; }
    #settings-page.connections-view .connection-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    #settings-page.connections-view .connection-section-head h4,
    #settings-page.connections-view .connection-options h4 { margin: 0; color: var(--connection-text); font-size: 15px; }
    #settings-page.connections-view .connection-section-head span { border-radius: 999px; background: #eef2f7; color: #667085; padding: 5px 9px; font-size: 10px; font-weight: 850; }
    #settings-page.connections-view .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    #settings-page.connections-view .field { gap: 7px; min-width: 0; }
    #settings-page.connections-view .field label { color: #475467; font-size: 11px; font-weight: 850; }
    #settings-page.connections-view .field input,
    #settings-page.connections-view .field select,
    #settings-page.connections-view .field textarea {
      min-height: 44px; border: 1px solid #d8dee8; border-radius: 11px; background: #fff; padding: 10px 12px;
      color: var(--connection-text); font-size: 13px; font-weight: 650; box-shadow: 0 1px 2px rgba(15,23,42,.03); outline: none;
    }
    #settings-page.connections-view .field input:focus,
    #settings-page.connections-view .field select:focus,
    #settings-page.connections-view .field textarea:focus { border-color: #76a5f8; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
    #settings-page.connections-view .connection-notes { display: grid; gap: 8px; padding: 0 24px 20px; }
    #settings-page.connections-view .secret-note { display: flex; gap: 8px; margin: 0; border: 1px solid #e6eaf0; border-radius: 11px; background: #f8fafc; padding: 10px 12px; color: #667085; font-size: 11px; font-weight: 650; }
    #settings-page.connections-view .connection-options { margin: 0 24px 20px; border: 1px solid var(--connection-line); border-radius: 14px; background: #fafbfc; padding: 14px; }
    #settings-page.connections-view .connection-options h4 { margin-bottom: 8px; }
    #settings-page.connections-view .connection-options .toggle-row { border-color: #e5e9f0; }
    #settings-page.connections-view .settings-actions { justify-content: flex-end; margin: 0; padding: 16px 24px; border-top: 1px solid var(--connection-line); background: #fafbfc; }
    #settings-page.connections-view .settings-actions .secondary-action { border: 1px solid #ccd5e2; border-radius: 10px; background: #fff; color: #344054; padding: 9px 14px; }
    #settings-page.connections-view .connection-empty { padding: 42px; text-align: center; color: var(--connection-muted); }
    @media (max-width: 760px) {
      #settings-page.connections-view { padding: 14px; }
      #settings-page.connections-view .settings-header { align-items: flex-start; }
      #settings-page.connections-view .connection-head { align-items: stretch; flex-direction: column; padding: 18px; }
      #settings-page.connections-view .settings-status { flex-basis: auto; width: 100%; }
      #settings-page.connections-view .connection-fields { padding: 18px; }
      #settings-page.connections-view .form-grid { grid-template-columns: minmax(0, 1fr); }
      #settings-page.connections-view .connection-notes { padding: 0 18px 18px; }
      #settings-page.connections-view .connection-options { margin-inline: 18px; }
      #settings-page.connections-view .settings-actions { padding: 14px 18px; }
    }
    .admin-user-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; border: 1px solid #d7dee9; border-radius: 999px; background: #fff; padding: 5px 10px; color: #344054; font-size: 10px; font-weight: 850; white-space: nowrap; }
    .admin-user-chip small { color: #667085; font-size: 9px; }
    .admin-logout { min-height: 30px; border: 1px solid #d7dee9; border-radius: 9px; background: #fff; padding: 5px 9px; color: #475467; font-size: 10px; font-weight: 850; cursor: pointer; }
    .admin-auth-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: linear-gradient(145deg, #eef4ff, #f7f9fc 55%, #e8f1ff); padding: 20px; }
    .admin-auth-overlay[hidden] { display: none; }
    .admin-login-card { width: min(420px, 100%); border: 1px solid #dbe4f1; border-radius: 24px; background: #fff; padding: 30px; box-shadow: 0 25px 70px rgba(23,43,77,.18); }
    .admin-login-card h1 { margin: 0; color: #172033; font-size: 28px; letter-spacing: -.035em; }
    .admin-login-card p { margin: 8px 0 22px; color: #667085; font-size: 13px; line-height: 1.5; }
    .admin-login-form { display: grid; gap: 14px; }
    .admin-login-form label { display: grid; gap: 7px; color: #475467; font-size: 11px; font-weight: 850; }
    .admin-login-form input { min-height: 46px; border: 1px solid #d8e0ea; border-radius: 12px; padding: 10px 13px; font-size: 14px; outline: 0; }
    .admin-login-form input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
    .admin-login-error { min-height: 18px; margin: 0; color: #b42318; font-size: 12px; font-weight: 750; }
    .admin-login-submit { min-height: 46px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
    .admin-users-page { border: 1px solid var(--ui-line); border-radius: 20px; background: #f8fafc; padding: 22px; }
    .admin-users-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; }
    .admin-user-form, .admin-users-list { border: 1px solid var(--ui-line); border-radius: 16px; background: #fff; padding: 18px; box-shadow: var(--ui-shadow-soft); }
    .admin-user-form { display: grid; gap: 12px; }
    .admin-user-form label { display: grid; gap: 6px; color: #475467; font-size: 11px; font-weight: 850; }
    .admin-user-form input, .admin-user-form select { min-height: 42px; border: 1px solid #d8e0ea; border-radius: 10px; padding: 9px 11px; }
    .admin-studio-checks { display: flex; gap: 12px; flex-wrap: wrap; }
    .admin-studio-checks label { display: flex; align-items: center; gap: 6px; }
    .admin-users-table-wrap { overflow-x: auto; }
    .admin-users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .admin-users-table th, .admin-users-table td { border-bottom: 1px solid #edf0f4; padding: 11px 8px; text-align: left; vertical-align: top; }
    .admin-users-table th { color: #667085; font-size: 11px; }
    .admin-users-table tr:last-child td { border-bottom: 0; }
    .admin-users-table small { display: block; margin-top: 3px; color: #667085; }
    .admin-password-reset-open, .admin-password-reset-cancel { min-height: 34px; border: 1px solid #cfd8e3; border-radius: 9px; background: #fff; color: #344054; padding: 7px 10px; font-size: 11px; font-weight: 850; cursor: pointer; }
    .admin-password-reset-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto; gap: 8px; align-items: end; border: 1px solid #dbe4ef; border-radius: 12px; background: #f8fafc; padding: 12px; }
    .admin-password-reset-form[hidden] { display: none; }
    .admin-password-reset-form label { display: grid; gap: 5px; color: #475467; font-size: 11px; font-weight: 800; }
    .admin-password-reset-form input { min-height: 38px; border: 1px solid #d8e0ea; border-radius: 9px; padding: 8px 10px; }
    .admin-password-reset-form .admin-login-error { grid-column: 1 / -1; }
    .agent-dry-run-surface { display: grid; gap: 14px; border: 1px solid #d8e0ea; border-radius: 16px; background: #f8fafc; padding: 16px; }
    .agent-dry-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .agent-dry-run-head h3, .agent-dry-run-card h4 { margin: 0; color: #172033; }
    .agent-dry-run-head p { margin: 5px 0 0; color: #667085; font-size: 12px; line-height: 1.45; }
    .agent-dry-run-badge { border-radius: 999px; background: #fff4d6; color: #8a5600; padding: 6px 10px; font-size: 11px; font-weight: 900; white-space: nowrap; }
    .agent-dry-run-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr); gap: 14px; }
    .agent-dry-run-card { min-width: 0; border: 1px solid #e4e7ec; border-radius: 13px; background: #fff; padding: 14px; }
    .agent-dry-run-form { display: grid; gap: 10px; margin-top: 12px; }
    .agent-dry-run-form label { display: grid; gap: 5px; color: #475467; font-size: 11px; font-weight: 850; }
    .agent-dry-run-form input, .agent-dry-run-form textarea { width: 100%; border: 1px solid #d8e0ea; border-radius: 9px; padding: 9px 10px; font: inherit; }
    .agent-dry-run-form textarea { min-height: 78px; resize: vertical; }
    .agent-dry-run-checks { display: flex; flex-wrap: wrap; gap: 8px 12px; }
    .agent-dry-run-checks label { display: flex; align-items: center; gap: 6px; }
    .agent-dry-run-checks input { width: auto; }
    .agent-dry-run-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .agent-dry-run-error { margin: 0; color: #b42318; font-size: 12px; font-weight: 800; }
    .agent-dry-run-list { display: grid; gap: 8px; margin-top: 12px; }
    .agent-dry-run-row { width: 100%; border: 1px solid #d8e0ea; border-radius: 10px; background: #f8fafc; padding: 10px; text-align: left; cursor: pointer; }
    .agent-dry-run-row strong, .agent-dry-run-row small { display: block; }
    .agent-dry-run-row small { margin-top: 3px; color: #667085; }
    .agent-dry-run-artifact { margin-top: 12px; border-radius: 11px; background: #172033; color: #f8fafc; padding: 12px; }
    .agent-dry-run-artifact strong { color: #f4d35e; }
    .agent-dry-run-artifact pre { max-height: 360px; overflow: auto; margin: 9px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; }
    @media (max-width: 980px) { .agent-dry-run-grid { grid-template-columns: 1fr; } }
    .app.is-read-only [data-settings-save], .app.is-read-only .settings-page input, .app.is-read-only .settings-page textarea, .app.is-read-only .settings-page select, .app.is-read-only .agents-page input, .app.is-read-only .agents-page textarea, .app.is-read-only .agents-page select { pointer-events: none; opacity: .6; }
    .app.is-employee .tabs > :not([data-employee-nav]):not(.server-sync-badge):not(.admin-logout) { display: none !important; }
    .app.is-employee .main > :not(.tabs):not(.map):not(.dialogs-page):not(.tasks-page):not(.employee-schedule-page):not(.miscellaneous-page):not(#miscellaneous-nav-menu) { display: none !important; }
    .employee-schedule-page { width: min(920px, calc(100% - 32px)); margin: 34px auto; display: grid; grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr); gap: 18px; }
    .employee-schedule-page[hidden] { display: none; }
    .employee-schedule-card { border: 1px solid #dbe4ef; border-radius: 20px; background: #fff; padding: 22px; box-shadow: var(--ui-shadow-soft); }
    .employee-schedule-card h2, .employee-schedule-card h3 { margin: 0 0 10px; color: #172033; }
    .employee-schedule-card p { color: #667085; line-height: 1.5; }
    .employee-schedule-form { display: grid; gap: 13px; margin-top: 18px; }
    .employee-schedule-form label { display: grid; gap: 6px; color: #475467; font-size: 12px; font-weight: 850; }
    .employee-schedule-form input, .employee-schedule-form select, .employee-schedule-form textarea { border: 1px solid #d8e0ea; border-radius: 11px; padding: 11px 12px; font: inherit; }
    .employee-schedule-form textarea { min-height: 120px; resize: vertical; }
    .employee-schedule-item { border: 1px solid #e4e7ec; border-radius: 13px; padding: 13px; margin-top: 10px; display: grid; gap: 5px; }
    .employee-schedule-status { width: max-content; border-radius: 999px; background: #fff4d6; color: #8a5600; padding: 4px 9px; font-size: 11px; font-weight: 900; }
    .employee-schedule-status.approved_pending_execution { background: #e8f7ed; color: #23743b; }
    .employee-schedule-status.rejected { background: #fdecec; color: #a52a26; }
    @media (max-width: 760px) { .employee-schedule-page { grid-template-columns: 1fr; } }
    @media (max-width: 900px) { .admin-users-layout { grid-template-columns: 1fr; } .admin-password-reset-form { grid-template-columns: 1fr 1fr; } }
  /* Read-only analytics: independent feature styles. */
.metrics-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.metrics-filters label { display: grid; gap: 6px; font-size: 13px; }
.metrics-filters input, .metrics-filters select { padding: 8px; border: 1px solid #d5deda; border-radius: 8px; background: white; color: #233e39; }
.metrics-chart { display: block; width: 100%; height: auto; margin: 10px 0; }
.metrics-limitation { font-size: 13px; color: #596663; }
#analytics-detail .analytics-card { min-width: 0; }
.metrics-unavailable { padding: 12px 0; border-bottom: 1px solid #dfe5e2; overflow-wrap: anywhere; }
.metrics-unavailable p { font-size: 13px; line-height: 1.5; }
.metrics-unavailable b { display: block; font-size: 13px; color: #64706c; }
#analytics-detail summary { cursor: pointer; margin: 10px 0; font-size: 13px; }
.metrics-table-wrap { overflow-x: auto; }
.metrics-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.metrics-table-wrap td, .metrics-table-wrap th { padding: 6px; text-align: left; border-bottom: 1px solid #dfe5e2; }
/* Owner report builder: separate from metrics cards. */
.analytics-subtabs { display: flex; gap: 8px; margin-bottom: 18px; }
.analytics-subtabs button { border: 1px solid #ccd8d4; border-radius: 999px; padding: 8px 14px; background: white; color: #29433e; cursor: pointer; }
.analytics-subtabs button.active { background: #dceee9; border-color: #7eaaa0; font-weight: 700; }
.report-builder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }
.report-builder > section { min-width: 0; padding: 18px; border: 1px solid #dce5e2; border-radius: 14px; background: white; }
.report-builder form { display: grid; gap: 12px; }
.report-builder label { display: grid; gap: 6px; font-size: 13px; }
.report-builder input, .report-builder select { padding: 8px; border: 1px solid #ccd8d4; border-radius: 8px; background: white; color: #233e39; }
.report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.report-metric { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 8px; border: 1px solid #e1e8e5; border-radius: 8px; }
.report-metric small { display: block; overflow-wrap: anywhere; color: #64706c; }
.report-metric.unavailable { opacity: .72; }
.report-readback article { padding: 10px 0; border-bottom: 1px solid #e1e8e5; overflow-wrap: anywhere; }
@media (max-width: 900px) { .report-builder { grid-template-columns: 1fr; } .report-metrics { grid-template-columns: 1fr; } }    .notes-workspace { display: grid; gap: 18px; }
    .note-create-form { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(260px, 2fr) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid #e1e2e6; border-radius: 18px; background: rgba(255,255,255,.9); }
    .note-create-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .note-create-form input, .note-create-form select, .note-create-form textarea { width: 100%; min-width: 0; border: 1px solid #d5d6dc; border-radius: 11px; padding: 10px; background: #fff; color: inherit; font: inherit; }
    .note-create-form textarea { min-height: 42px; max-height: 120px; resize: vertical; }
    .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .note-card { position: relative; height: 150px; min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #e1e2e6; border-radius: 14px; background: #fffdf5; padding: 14px; box-shadow: 0 4px 12px rgba(32,35,42,.07); }
    .note-card-date { display: block; margin-bottom: 10px; padding-right: 48px; color: var(--muted); font-size: 12px; font-weight: 900; }
    .note-card-text { min-width: 0; min-height: 0; max-width: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; scrollbar-gutter: stable; }
    .note-card-delete, .note-card-edit { position: absolute; top: 7px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: rgba(255,255,255,.78); cursor: pointer; font-size: 16px; line-height: 1; }
    .note-card-delete { right: 7px; color: #a33; }
    .note-card-edit { right: 35px; }
    .note-card textarea { width: 100%; height: 100%; min-width: 0; min-height: 0; resize: none; overflow: auto; overflow-wrap: anywhere; word-break: break-word; border: 1px solid #d5d6dc; border-radius: 12px; padding: 10px; font: inherit; }
    .note-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
    .notes-empty { color: var(--muted); padding: 24px 0; }
    @media (max-width: 900px) { .note-create-form { grid-template-columns: 1fr 1fr; } .note-create-text { grid-column: 1 / -1; } }
    @media (max-width: 560px) { .note-create-form { grid-template-columns: 1fr; } .note-create-text { grid-column: auto; } .notes-grid { grid-template-columns: 1fr; } }

    .payroll-page { display: grid; gap: 14px; }
    .payroll-studio-tabs { margin: 0; }
    .payroll-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; }
    .payroll-master-panel, .payroll-workspace { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 16px; }
    .payroll-master-panel { display: flex; flex-direction: column; gap: 8px; align-self: start; }
    .payroll-master-panel h3 { margin: 10px 0 4px; }
    .payroll-master, .payroll-all { border: 1px solid var(--border); background: transparent; color: var(--foreground); border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; }
    .payroll-master strong, .payroll-master small { display: block; overflow-wrap: anywhere; }
    .payroll-master small { color: var(--muted-foreground); margin-top: 3px; }
    .payroll-master.active, .payroll-all.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .payroll-empty, .payroll-source-note { color: var(--muted-foreground); }
    .payroll-workspace { display: grid; gap: 16px; min-width: 0; }
    .payroll-period-card { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
    .payroll-period-card h3 { margin: 4px 0 0; overflow-wrap: anywhere; }
    .payroll-date-fields { display: flex; align-items: end; gap: 10px; }
    .payroll-date-fields label { display: grid; gap: 4px; color: var(--muted-foreground); font-size: 12px; }
    .payroll-date-fields input { border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--foreground); padding: 8px; }
    .payroll-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .payroll-metrics article { border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-width: 0; }
    .payroll-metrics span, .payroll-metrics strong { display: block; overflow-wrap: anywhere; }
    .payroll-metrics span { color: var(--muted-foreground); font-size: 12px; margin-bottom: 6px; }
    .payroll-status { border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--muted-foreground); overflow-wrap: anywhere; }
    .payroll-status.error { color: #b42318; }
    .payroll-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .payroll-actions button:disabled { opacity: .5; cursor: not-allowed; }
    .payroll-provider-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .payroll-provider-details section { border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-width: 0; }
    .payroll-provider-details h3 { margin: 0 0 8px; }
    .payroll-provider-details ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
    .payroll-modal-backdrop { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; background: rgba(16,18,23,.62); }
    .payroll-modal { width: min(520px, 92vw); border-radius: 24px; background: var(--card); padding: 28px; display: grid; gap: 14px; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
    .payroll-modal h2 { margin: 0; }
    .payroll-modal label { display: grid; gap: 6px; color: var(--muted-foreground); font-weight: 700; }
    .payroll-modal input, .payroll-modal select, .payroll-modal textarea { border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--foreground); padding: 10px; font: inherit; }
    .payroll-modal textarea { min-height: 80px; resize: vertical; }
    .payroll-modal-error { min-height: 1.2em; margin: 0; color: #b42318; }
    .payroll-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
    @media (max-width: 900px) {
      .payroll-layout { grid-template-columns: 1fr; }
      .payroll-period-card { align-items: stretch; flex-direction: column; }
      .payroll-date-fields { width: 100%; flex-wrap: wrap; }
      .payroll-date-fields label { flex: 1; min-width: 140px; }
      .payroll-metrics, .payroll-provider-details { grid-template-columns: 1fr; }
      .payroll-actions { flex-direction: column; }
    }
    /* 17C Home: visual office shell with honest server-backed/unavailable states. */
    .office-stack { grid-column: 1; grid-row: 1 / span 2; min-height: 0; display: grid; grid-template-rows: minmax(390px, 1fr) auto; gap: 10px; }
    .office { min-height: 390px; grid-row: auto; grid-column: auto; grid-template-columns: 1fr 1fr; align-content: start; }
    .map-analytics { border: 1px solid var(--ui-line, #e2e8f0); border-radius: 14px; background: #fff; padding: 12px; box-shadow: var(--ui-shadow-soft, 0 5px 16px rgba(23,43,77,.07)); }
    .map-analytics .title { margin-bottom: 8px; }
    .map-analytics .analytics-grid { grid-template-columns: 1fr 1fr; min-width: 0; }
    .overview-unavailable { border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; padding: 9px; color: #667085; font-size: 10px; font-weight: 800; line-height: 1.35; }
    .overview-office-empty { grid-column: 1 / -1; margin-top: 32px; }
    .overview-agent-figure { position: absolute; left: 50%; top: 13px; width: 32px; height: 48px; transform: translateX(-50%); border: 2px solid #c9d4e2; border-radius: 16px 16px 9px 9px; background: linear-gradient(#d7a789 0 34%, #eaf1ff 34% 70%, #475467 70%); }
    .agent-desk[data-overview-agent="global-analyst"] .overview-agent-figure { background: linear-gradient(#c98f72 0 34%, #eee8ff 34% 70%, #6941c6 70%); }
    .agent-desk .desk-label small { color: #667085; font-size: 8px; }
    .overview-studio-status { margin: 0 4px 9px; border: 1px dashed #cbd5e1; border-radius: 9px; background: rgba(255,255,255,.86); padding: 6px; color: #667085; font-size: 9px; font-weight: 800; }
    .overview-rooms { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 8px; }
    .branch2 .overview-rooms { grid-template-columns: 1fr 1.3fr; }
    .overview-room { min-height: 105px; padding-top: 34px; cursor: default; }
    .overview-workplace { height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #e2e8f0; border-radius: 9px; background: rgba(255,255,255,.8); color: #475467; text-align: center; }
    .overview-workplace > span { width: 38px; height: 24px; border: 2px solid #cbd5e1; border-radius: 6px; background: #f8fafc; box-shadow: inset 0 -6px #e2e8f0; }
    .overview-workplace b { font-size: 9px; }
    .overview-workplace small { color: #98a2b3; font-size: 8px; }
    .overview-studio-activity { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
    .overview-studio-activity span { border-radius: 999px; background: #eef4ff; padding: 4px 7px; color: #475467; font-size: 8px; font-weight: 800; }
    .overview-route-unavailable { position: absolute; left: 30%; right: 4%; bottom: 18px; display: flex; align-items: center; gap: 7px; opacity: .78; }
    .overview-route-unavailable span { border: 1px solid #b9c9e8; border-radius: 999px; background: #fff; padding: 4px 8px; color: #344054; font-size: 9px; font-weight: 900; }
    .overview-route-unavailable i { flex: 1; min-width: 24px; border-top: 2px dashed #98a2b3; }
    .overview-route-unavailable strong { position: absolute; right: 0; top: 26px; color: #667085; font-size: 8px; }
    .walking-agent::after { content: "связь\Aнедоступна"; }
    [data-overview-notes] { display: grid; gap: 9px; }
    .quick-note-date-nav { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; gap: 8px; align-items: center; }
    .quick-note-date-nav button { width: 34px; height: 34px; border: 1px solid #d8e0ea; border-radius: 10px; background: #f8fafc; color: #475467; font-size: 17px; cursor: pointer; }
    .quick-note-date-nav label { display: grid; gap: 3px; min-width: 0; color: #1f2937; font-size: 12px; font-weight: 900; text-align: center; }
    .quick-note-date-nav input { min-width: 0; border: 0; background: transparent; color: #475467; font: inherit; font-size: 11px; font-weight: 750; text-align: center; cursor: pointer; }
    [data-overview-note-text] { width: 100%; min-height: 150px; resize: vertical; border: 1px solid #f0d8cf; border-radius: 13px; background: #fff1eb; padding: 12px; color: #1f2937; font: inherit; font-size: 12px; line-height: 1.45; }
    [data-overview-note-text]:focus { border-color: #e5a994; outline: 0; box-shadow: 0 0 0 4px rgba(229,169,148,.16); }
    .quick-note-save-state { color: #667085; font-size: 10px; font-weight: 750; text-align: right; }
    .overview-notes-card .secondary-action, .overview-payroll-card .primary-action { width: 100%; margin-top: 8px; }
    .overview-payroll-card p { margin: 0; color: #667085; font-size: 10px; line-height: 1.4; }
    .overview-payroll-actions { display: grid; gap: 6px; margin-top: 8px; }
    .overview-payroll-actions button { width: 100%; }
    .overview-payroll-actions button:disabled { opacity: .5; cursor: not-allowed; }
    .overview-payroll-actions small { color: #667085; font-size: 9px; line-height: 1.35; }
    .channel-status-grid { grid-template-columns: 1fr; }
    .channel-studio-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .channel-status-tile small { color: #667085; font-size: 8px; font-weight: 750; }
    .channel-studio-title { min-height: 36px; font-size: 13px; text-align: left; }

    @media (max-width: 1320px) {
      .office-stack { grid-template-rows: minmax(390px, 1fr) auto; }
    }
    @media (max-width: 900px) {
      .map-analytics .analytics-grid { min-width: 0; }
    }