* { box-sizing: border-box; }
    body {
      margin: 0;
      font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      letter-spacing: 0;
    }
    button, input, textarea, select { font: inherit; }
    .shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
    }
    .shell.single-column {
      grid-template-columns: minmax(0, 1fr);
    }
    .sidebar {
      background: var(--surface);
      border-right: 1px solid var(--line);
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .brand {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
    }
    .brand strong {
      font-size: 17px;
      font-weight: 720;
    }
    .brand span {
      color: var(--muted);
      font-size: 12px;
    }
    .admin-dealer-picker {
      display: grid;
      gap: 8px;
      padding: 12px 10px;
      border-bottom: 1px solid var(--line);
      background: var(--surface-2);
    }
    .admin-dealer-picker.hidden { display: none; }
    .admin-dealer-picker input {
      width: 100%;
      min-width: 0;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 0 10px;
      background: var(--surface);
    }
    .sidebar-selected-dealer {
      border: 1px solid #c8ddd7;
      border-radius: 7px;
      background: var(--soft);
      padding: 8px 9px;
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .sidebar-selected-dealer strong {
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .sidebar-selected-dealer span {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .sidebar-dealer-results {
      display: grid;
      gap: 4px;
      max-height: 260px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .sidebar-dealer-result {
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      padding: 8px 9px;
      text-align: left;
      cursor: pointer;
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .sidebar-dealer-result:hover,
    .sidebar-dealer-result.active {
      background: #f1f5f5;
      border-color: #d4e0e0;
    }
    .sidebar-dealer-result strong {
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .sidebar-dealer-result span {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .nav-menu {
      display: grid;
      gap: 4px;
      padding: 12px 8px;
    }
    .nav-item {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 7px;
      padding: 10px 12px;
      text-align: left;
      color: var(--text);
      cursor: pointer;
      font-weight: 680;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .nav-item:hover { background: #f1f5f5; }
    .nav-item.active {
      background: var(--soft);
      border-color: #c8ddd7;
      color: #185846;
    }
    .nav-item.hidden { display: none; }
    .nav-warning {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #fff0d9;
      border: 1px solid #e7b96e;
      color: #8a5200;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 850;
      flex: 0 0 auto;
    }
    .nav-warning.hidden { display: none; }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      background: #e9eef0;
      color: #354146;
      font-size: 12px;
      font-weight: 700;
    }
    .badge.good { background: #dceee8; color: #185846; }
    .badge.warn { background: #f8eadc; color: #74410f; }
    main {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      min-height: 64px;
      background: rgba(245, 247, 248, .92);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 22px;
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
    }
    .titlebox { min-width: 0; }
    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 760;
      overflow-wrap: anywhere;
    }
    .subline {
      color: var(--muted);
      margin-top: 3px;
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .contact-menu {
      position: relative;
    }
    .contact-menu summary {
      list-style: none;
    }
    .contact-menu summary::-webkit-details-marker {
      display: none;
    }
    .contact-popover {
      position: absolute;
      right: 0;
      top: calc(100% + 7px);
      z-index: 20;
      min-width: 170px;
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }
    .contact-menu:not([open]) .contact-popover {
      display: none;
    }
    .contact-popover .btn {
      width: 100%;
      justify-content: flex-start;
    }
    .btn {
      border: 1px solid var(--line);
      border-radius: 7px;
      min-height: 36px;
      padding: 8px 12px;
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-weight: 650;
    }
    .btn.primary {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .btn:hover { filter: brightness(.98); }
    a.btn {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .content {
      width: min(1320px, 100%);
      margin: 0 auto;
      padding: 22px;
      display: grid;
      gap: 16px;
    }
    #adminContent {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #adminContent.hidden { display: none !important; }
    .admin-summary-panel { order: 1; }
    .admin-dealers-panel { order: 2; }
    .admin-logs-panel { order: 3; }
    .admin-users-panel { order: 4; }
    .hidden { display: none !important; }
    .wizard {
      width: min(920px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 16px;
    }
    .auth-content {
      width: 100%;
      min-height: 100vh;
      place-items: center;
      padding: 24px;
    }
    .auth-wrap {
      width: min(440px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 18px;
    }
    .auth-brand {
      text-align: center;
      display: grid;
      gap: 8px;
    }
    .auth-mark {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      display: inline-grid;
      place-items: center;
      margin: 0 auto 4px;
      background: var(--accent);
      color: #fff;
      font-weight: 800;
      letter-spacing: 0;
    }
    .auth-brand h1 {
      font-size: 34px;
      line-height: 1.12;
    }
    .auth-actions {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .auth-note {
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }
    .captcha-wrap {
      min-height: 100px;
      display: flex;
      align-items: center;
    }
    .local-dev .captcha-wrap {
      display: none;
    }
    .smart-captcha {
      width: 100%;
      min-width: 0;
    }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .step-pill {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: var(--surface);
      color: var(--muted);
      font-weight: 700;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .step-pill.active {
      border-color: #b9d6cd;
      background: var(--soft);
      color: #185846;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .password-field {
      position: relative;
    }
    .password-field input {
      padding-right: 42px;
    }
    .password-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .password-toggle:hover {
      background: #edf3f2;
      color: var(--text);
    }
    .password-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .password-toggle .eye-slash {
      opacity: 0;
    }
    .password-toggle.is-visible .eye-slash {
      opacity: 1;
    }
    .admin-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }
    .admin-toolbar input {
      flex: 1;
      min-width: 0;
    }
    .admin-toolbar select {
      width: auto;
      min-width: 150px;
    }
    .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      min-height: 38px;
    }
    .check-row input {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }
    .org-card {
      border: 1px solid #c8ddd7;
      border-radius: 8px;
      background: #f6fbf9;
      padding: 14px;
      display: grid;
      gap: 6px;
    }
    .new-deal-org-card {
      grid-column: 1 / -1;
    }
    .new-deal-clients,
    .deal-client-editor {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
    }
    .deal-client-input-row {
      display: grid;
      grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
    }
    .deal-client-input-row .label {
      grid-column: 1 / -1;
    }
    .contract-product-list {
      display: grid;
      gap: 8px;
      margin-bottom: 8px;
    }
    .new-deal-products {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
    }
    .new-deal-product-row {
      display: grid;
      grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto minmax(120px, .8fr) auto;
      gap: 8px;
      align-items: end;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      padding: 10px;
    }
    .deal-total-card {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: 2px 12px;
      padding: 14px 16px;
      margin: 8px 0 14px;
      border: 1px solid var(--accent-line);
      border-radius: var(--radius-sm);
      background: var(--accent-soft);
    }
    .deal-total-card span {
      grid-column: 1;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
    }
    .deal-total-card strong {
      grid-column: 2;
      grid-row: 1;
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 650;
      color: var(--accent);
      white-space: nowrap;
      text-align: right;
    }
    .deal-total-card small {
      grid-column: 1 / -1;
      color: var(--text-2);
      font-size: 12.5px;
      font-weight: 550;
    }
    .contract-product-row {
      display: grid;
      grid-template-columns: minmax(220px, 1.4fr) 76px minmax(130px, .8fr) minmax(105px, .6fr) minmax(130px, .8fr);
      gap: 8px;
      align-items: end;
    }
    #contractMakeProducts .contract-product-row {
      grid-template-columns: minmax(150px, .9fr) minmax(190px, 1.25fr) 82px minmax(130px, .75fr) minmax(105px, .6fr) minmax(130px, .75fr) auto;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
    }
    /* «Запросить договор»: 4 ячейки (Категория, Модель, Кол-во, Удалить). Базовый .contract-product-row
       рассчитан на 5 колонок и давал Модели всего 76px. Здесь Модель шире Категории (модели длиннее),
       Кол-во узкое. */
    #contractRequestProducts .contract-product-row {
      grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.6fr) 88px auto;
    }
    #addContractMakeProductBtn {
      width: 100%;
      margin: 0 0 8px;
    }
    #contractMakeModal .deal-form-card {
      /* нужна именно width (базовый .deal-form-card задаёт width:min(640px,...) — max-width его не расширял,
         и широкая таблица цен обрезалась справа) */
      width: min(1120px, calc(100vw - 32px));
      max-width: min(1120px, calc(100vw - 32px));
      display: flex;
      flex-direction: column;
      max-height: calc(100dvh - 64px);
      overflow: hidden;
    }
    /* «Запросить договор» — широкая таблица проданной продукции, расширяем окно */
    #contractRequestModal .deal-form-card {
      width: min(880px, calc(100vw - 32px));
      max-width: min(880px, calc(100vw - 32px));
    }
    /* таблицы цен/продукции: горизонтальный скролл-фолбэк на узких экранах вместо обрезки */
    #contractMakeProducts, #contractRequestProducts { overflow-x: auto; }
    #contractMakeModal .panel-head { flex: none; }
    #contractMakeModal .panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    #contractMakeForm > .actions {
      position: sticky;
      bottom: -1px;
      gap: 8px;
      margin: 4px 0 0;
      padding: 12px 0 4px;
      background: var(--surface);
      border-top: 1px solid var(--line);
      z-index: 2;
    }
    .price-readonly {
      background: var(--surface-2);
      color: var(--muted);
      cursor: default;
    }
    .price-readonly:focus { outline: none; box-shadow: none; border-color: var(--line); }
    .empty-rich {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      padding: 48px 20px;
    }
    .empty-rich .empty-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); margin-bottom: 4px; }
    .empty-rich .empty-ico .ic { width: 26px; height: 26px; }
    .empty-rich .empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
    .empty-rich .empty-sub { font-size: 13px; color: var(--muted); max-width: 44ch; line-height: 1.5; }
    .empty-rich .btn { margin-top: 6px; }
    /* ─── Design port — notifications bell + panel (prototype NotificationsPanel) ─── */
    .notif-wrap { position: relative; display: inline-flex; }
    .icon-btn.notif { position: relative; }
    .notif-dot {
      position: absolute; top: -5px; right: -5px;
      min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
      background: var(--accent); color: var(--accent-ink);
      font-size: 10px; font-weight: 700; font-family: var(--font-mono);
      display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
    }
    .notif-dot.hidden { display: none; }
    .notif-panel {
      position: fixed; z-index: 60;
      /* Якорим правым краем: браузер сам держит панель в экране при зуме/ресайзе/повороте
         (вычисляемый JS left протухал и панель вылезала вправо). JS ставит только top. */
      right: 12px; left: auto;
      width: min(380px, calc(100vw - 24px));
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow-lg); overflow: hidden;
      animation: np-in .14s ease;
    }
    @keyframes np-in { from { transform: translateY(-6px); opacity: .6; } to { transform: none; opacity: 1; } }
    .np-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .np-head strong { font-size: 14px; font-weight: 700; }
    .np-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill); }
    .np-close { margin-left: auto; width: 30px; height: 30px; min-width: 30px; }
    .np-close .ic { width: 16px; height: 16px; }
    .np-body { max-height: min(440px, 60vh); overflow-y: auto; }
    .np-item { display: flex; align-items: stretch; gap: 2px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; }
    .np-item:last-child { border-bottom: 0; }
    .np-item:hover { background: var(--surface-2); }
    /* прочитанное уведомление: остаётся в списке, но серым и не считается */
    .np-item.read .np-line, .np-item.read .np-meta { color: var(--text-3); }
    .np-item.read .np-dot { opacity: .35; }
    .np-open { flex: 1 1 auto; display: flex; gap: 11px; align-items: flex-start; min-width: 0; text-align: left; padding: 13px 6px 13px 16px; border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; }
    .np-dismiss { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 8px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-3); cursor: pointer; }
    .np-dismiss svg { width: 15px; height: 15px; }
    .np-dismiss:hover { background: var(--accent-soft); color: var(--text); }
    .np-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--accent); }
    .np-dot.bad { background: var(--bad); } .np-dot.warn { background: var(--warn); } .np-dot.info { background: var(--accent); } .np-dot.good { background: var(--good); }
    .np-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .np-line { font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
    .np-meta { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
    .np-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; color: var(--text-3); font-size: 13px; }
    .np-empty .ic { width: 26px; height: 26px; color: var(--good); }
    /* ─── Design port — help drawer + onboarding tour (help.jsx) ─── */
    #helpDrawer { place-items: stretch; justify-items: end; padding: 0; }
    #helpDrawer .help-drawer-card {
      width: min(480px, 100%); max-width: none;
      height: 100vh; height: 100dvh; max-height: none;
      border-radius: 0; margin: 0;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: var(--shadow-lg);
      animation: drawer-in .22s cubic-bezier(.3,.8,.3,1);
    }
    #helpDrawer .drawer-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
    #helpDrawer .drawer-head .dh-main { flex: 1; min-width: 0; }
    #helpDrawer .drawer-head h2 { margin: 6px 0 0; font-size: 18px; font-weight: 750; letter-spacing: -0.3px; }
    #helpDrawer .drawer-head .icon-btn { flex: none; }
    #helpDrawer .drawer-tabs { flex: none; display: flex; gap: 2px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
    #helpDrawer .dtab { border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 13px; font-weight: 600; padding: 10px 4px; margin-right: 18px; border-bottom: 2px solid transparent; white-space: nowrap; }
    #helpDrawer .dtab:hover { color: var(--text); }
    #helpDrawer .dtab.active { color: var(--text); border-bottom-color: var(--accent); }
    #helpDrawer .drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); }
    .eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
    .faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 9px; overflow: hidden; }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; cursor: pointer; font-size: 13.5px; font-weight: 650; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-chev { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform .2s; }
    .faq-item[open] summary { background: var(--surface-2); }
    .faq-item[open] .faq-chev { transform: rotate(180deg); }
    .faq-item p { margin: 0; padding: 0 15px 14px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
    .guide-lead { margin: 0 0 16px; font-size: 13px; color: var(--text-2); line-height: 1.55; }
    .guide-list { display: flex; flex-direction: column; gap: 16px; }
    .guide-row { display: flex; gap: 12px; align-items: flex-start; }
    .guide-num { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; font-family: var(--font-mono); }
    .guide-txt { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
    .guide-txt strong { font-size: 13.5px; font-weight: 650; }
    .guide-txt span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
    .btn.ghost-help { color: var(--text-2); }
    .btn.ghost-help .ic, .btn.ghost-help svg { color: var(--accent); }
    .cchip.warn { color: var(--warn); background: var(--warn-soft); }
    .cchip.info { color: var(--info); background: var(--info-soft); }
    .cchip.good { color: var(--good); background: var(--good-soft); }
    .cchip.bad { color: var(--bad); background: var(--bad-soft); }
    #onboardingTour .tour-modal { width: min(440px, 100%); }
    #onboardingTour .tour-art { flex: none; height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent) 6%, var(--surface))); border-bottom: 1px solid var(--border); }
    #onboardingTour .tour-ico { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
    #onboardingTour .tour-ico .ic { width: 34px; height: 34px; }
    #onboardingTour .panel-body { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
    .tour-title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.3px; }
    .tour-body { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 42ch; }
    .tour-dots { display: flex; gap: 7px; margin-top: 4px; }
    .tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); cursor: pointer; transition: .15s; border: 0; padding: 0; }
    .tour-dot.on { background: var(--accent); width: 22px; border-radius: var(--radius-pill); }
    @media (max-width: 560px) { #helpDrawer .help-drawer-card { width: 100%; } }

    /* ============================================================
       Design port — deal card (prototype dir-a structure)
       ============================================================ */
    .ic { width: 18px; height: 18px; flex: none; }
    .deal-head { display: flex; align-items: center; gap: 12px; }
    .deal-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
    .deal-type { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-3); white-space: nowrap; }
    .deal-type.tender { color: var(--info); border-color: color-mix(in oklab, var(--info) 35%, var(--border)); background: var(--info-soft); }
    .deal-type.direct { color: var(--good); border-color: color-mix(in oklab, var(--good) 35%, var(--border)); background: var(--good-soft); }
    .deal-time { font-size: 11.5px; color: var(--text-3); }
    .deal-head-r { margin-left: auto; display: flex; align-items: center; gap: 9px; }
    .deal-body { display: flex; flex-direction: column; gap: 13px; }
    .deal-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
    .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px; padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .facts .fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .facts .fact > span { font-size: 11px; color: var(--text-3); font-weight: 600; }
    .facts .fact > strong { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .facts .fact > strong.mono { font-family: var(--font-mono); font-size: 12px; }
    .facts .fi { width: 13px; height: 13px; flex: none; opacity: .65; color: var(--accent); }
    .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: var(--radius-pill); align-self: flex-start; white-space: nowrap; }
    .status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .status.warn { color: var(--warn); background: var(--warn-soft); }
    .status.info { color: var(--info); background: var(--info-soft); }
    .status.good { color: var(--good); background: var(--good-soft); }
    .status.bad  { color: var(--bad);  background: var(--bad-soft); }
    .cchip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
    .cchip.ghost { color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
    .tech-block { display: flex; flex-direction: column; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; }
    .tech-block .tb-label { font-size: 10.5px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
    .tech-block > strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
    .tech-block .tb-meta { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
    .client-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .pipeline { display: flex; align-items: flex-start; gap: 6px; }
    .pipeline .seg-step { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .pipeline .seg-bar { height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); }
    .pipeline .seg-step.done .seg-bar,
    .pipeline .seg-step.current .seg-bar { background: var(--accent); }
    .pipeline .seg-cap { font-size: 9.5px; font-weight: 600; color: var(--text-3); text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
    .pipeline .seg-step.done .seg-cap { color: var(--text-2); }
    .pipeline .seg-step.current .seg-cap { color: var(--accent); font-weight: 750; }
    .pipeline.rejected .seg-cap { color: var(--bad); }
    .next-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 550; line-height: 1.35; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
    .next-step .ns-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
    .next-step.warn { background: var(--warn-soft); color: var(--warn); } .next-step.warn .ns-dot { background: var(--warn); }
    .next-step.info { background: var(--info-soft); color: var(--info); } .next-step.info .ns-dot { background: var(--info); }
    .next-step.good { background: var(--good-soft); color: var(--good); } .next-step.good .ns-dot { background: var(--good); }
    .deal-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
    .deal-foot-row { display: flex; align-items: center; gap: 14px; }
    .deal-foot .deal-value { font-size: 16px; font-weight: 750; letter-spacing: -.3px; white-space: nowrap; }
    .deal-foot .deal-value .qty { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 4px; }
    .deal-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; }
    .deal-meta .m { display: inline-flex; align-items: center; gap: 4px; }
    .deal-meta .m .ic { width: 14px; height: 14px; }
    .card-action-bar { padding: 0; }
    .card-action-bar .deal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .card-action-bar .deal-actions .btn.primary { flex: 1 1 auto; justify-content: center; min-width: 132px; }
    .card-action-bar .deal-actions .icon-btn,
    .card-action-bar .deal-actions .action-menu { flex: 0 0 auto; }
    .card-action-bar .deal-actions .icon-btn .ic { width: 17px; height: 17px; }
    /* группа иконок-действий всегда прижата к правому краю (не «прыгает» при появлении primary-кнопки слева) */
    .deal-action-icons { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
    .deal-action-icons:empty { display: none; }
    /* контекстная оранжевая точка «здесь новое» на кнопках-иконках (папка/комментарий) */
    [data-open-deal-docs], [data-open-deal-chat] { position: relative; }
    .act-dot {
      position: absolute; top: -2px; right: -2px;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
      pointer-events: none;
    }
    /* topbar — section icon (prototype .section-btn) */
    .section-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); padding: 0; }
    .section-btn:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); filter: none; }
    .section-btn .ic { width: 20px; height: 20px; }
    .topbar .icon-btn .ic { width: 18px; height: 18px; }
    .segmented-btn .ic { width: 16px; height: 16px; }
    .segmented-btn { display: inline-grid; place-items: center; }
    /* deal detail → right-side drawer (prototype .drawer) */
    #dealDetailModal { place-items: stretch; justify-items: end; padding: 0; }
    #dealDetailModal .deal-detail-card {
      width: min(560px, 100%);
      max-width: none;
      height: 100vh; height: 100dvh;
      max-height: none;
      border-radius: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      animation: drawer-in .22s cubic-bezier(.3,.8,.3,1);
    }
    #dealDetailModal .drawer-head,
    #dealDetailModal #dealDetailStage,
    #dealDetailModal #dealDetailBanner,
    #dealDetailModal .drawer-tabs,
    #dealDetailModal .drawer-foot { flex: none; }
    #dealDetailModal .drawer-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    #dealDetailModal .drawer-foot { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface); display: flex; gap: 10px; }
    #dealDetailModal .drawer-foot .deal-actions { width: 100%; }
    @keyframes drawer-in { from { transform: translateX(28px); opacity: .5; } to { transform: none; opacity: 1; } }

    /* ─── Design port — deal drawer internals (prototype .drawer-*) ─── */
    #dealDetailModal .drawer-head {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    #dealDetailModal .dh-main { flex: 1; min-width: 0; }
    #dealDetailModal .dh-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
    #dealDetailModal .drawer-head h2 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 750; letter-spacing: -0.3px; overflow-wrap: anywhere; }
    #dealDetailModal .dh-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; overflow-wrap: anywhere; }
    #dealDetailModal .drawer-head .icon-btn { flex: none; }
    #dealDetailModal .drawer-stage {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2);
    }
    #dealDetailModal .drawer-stage .ds-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; }
    #dealDetailModal .drawer-stage .stage-select { min-width: 0; max-width: 220px; height: 34px; font-size: 13px; }
    #dealDetailModal .next-step.block { margin: 14px 24px 0; }
    #dealDetailModal .deal-rejection-note { margin: 14px 24px 0; }
    #dealDetailModal .drawer-tabs { display: flex; gap: 2px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #dealDetailModal .dtab {
      border: 0; background: transparent; color: var(--text-3); cursor: pointer;
      font-size: 13px; font-weight: 600; padding: 10px 4px; margin-right: 18px;
      border-bottom: 2px solid transparent; white-space: nowrap;
    }
    #dealDetailModal .dtab:hover { color: var(--text); }
    #dealDetailModal .dtab.active { color: var(--text); border-bottom-color: var(--accent); }
    #dealDetailModal .dtab .tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 3px var(--accent-soft); }
    #dealDetailModal .drawer-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 22px; }
    #dealDetailModal .detail-pane { display: flex; flex-direction: column; gap: 22px; }
    #dealDetailModal .detail-pane[hidden] { display: none; }
    #dealDetailModal .dsec h3 {
      margin: 0 0 12px; font-size: 11px; font-weight: 700; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 1px;
    }
    #dealDetailModal .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    #dealDetailModal .dbox {
      display: flex; flex-direction: column; gap: 4px; min-width: 0;
      padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    }
    #dealDetailModal .dbox span { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
    #dealDetailModal .dbox strong { font-size: 13px; font-weight: 600; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; }
    #dealDetailModal .extra-clients { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    #dealDetailModal .ec-label { font-size: 11px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
    #dealDetailModal .ec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    #dealDetailModal .ec-row strong { font-size: 13px; font-weight: 600; }
    #dealDetailModal .ec-row .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
    #dealDetailModal .stepper { display: flex; flex-direction: column; gap: 0; }
    #dealDetailModal .step { display: flex; gap: 12px; align-items: stretch; }
    #dealDetailModal .step-rail { display: flex; flex-direction: column; align-items: center; }
    #dealDetailModal .step-node {
      width: 22px; height: 22px; border-radius: 50%; flex: none;
      display: grid; place-items: center;
      border: 2px solid var(--border-strong); background: var(--surface);
      font-size: 11px; font-weight: 700; color: var(--text-3);
    }
    #dealDetailModal .step.done .step-node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
    #dealDetailModal .step.current .step-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
    #dealDetailModal .step-line { width: 2px; flex: 1; min-height: 22px; background: var(--border); }
    #dealDetailModal .step.done .step-line { background: var(--accent); }
    #dealDetailModal .step-info { flex: 1; min-width: 0; padding-bottom: 20px; }
    #dealDetailModal .step:last-child .step-info { padding-bottom: 0; }
    #dealDetailModal .step-info strong { font-size: 13.5px; font-weight: 650; line-height: 1.25; display: block; }
    #dealDetailModal .step.current .step-info strong { color: var(--accent); }
    #dealDetailModal .step-info span { font-size: 12px; color: var(--text-3); }
    #dealDetailModal .folder-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; }
    #dealDetailModal .comment-compose { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    #dealDetailModal .comment-compose .ta,
    #dealDetailModal .comment-compose textarea { min-height: 64px; }
    #dealDetailModal .mini-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
    .contract-product-row .field {
      min-width: 0;
    }
    .product-toolbar {
      flex-wrap: wrap;
    }
    .sold-product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 14px;
      padding: 16px;
    }
    .sold-product-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      padding: 16px;
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .sold-product-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .sold-product-title {
      font-size: 18px;
      line-height: 1.25;
      font-weight: 780;
      color: var(--text);
      overflow-wrap: anywhere;
    }
    .sold-product-kicker,
    .sold-product-meta,
    .sold-product-doc-meta {
      color: var(--text-3);
      font-size: 12px;
      font-weight: 650;
      overflow-wrap: anywhere;
    }
    .sold-product-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .sold-product-fact {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      padding: 10px 12px;
      min-width: 0;
    }
    .sold-product-fact span {
      display: block;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .sold-product-fact strong {
      display: block;
      color: var(--text);
      font-weight: 760;
      overflow-wrap: anywhere;
    }
    .sold-product-docs {
      border-top: 1px solid var(--border);
      padding-top: 12px;
      display: grid;
      gap: 8px;
    }
    .sold-product-doc-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .sold-product-doc {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      color: var(--text);
      text-decoration: none;
      font-weight: 700;
    }
    .sold-product-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .deal-client-lookup {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      min-height: 18px;
      overflow-wrap: anywhere;
    }
    .employee-org-card {
      margin-bottom: 14px;
    }
    .org-title {
      font-size: 18px;
      font-weight: 760;
      overflow-wrap: anywhere;
    }
    .code-box {
      border: 1px dashed #9abbb1;
      border-radius: 8px;
      background: #fbfffd;
      padding: 14px;
      display: grid;
      gap: 8px;
    }
    .code-value {
      font-size: 24px;
      line-height: 1.1;
      font-weight: 780;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }
    .error-text {
      color: var(--bad);
      font-weight: 650;
      min-height: 20px;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(5, minmax(130px, 1fr));
      gap: 12px;
    }
    .admin-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px;
      padding: 14px 16px;
    }
    .admin-summary-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--surface-2);
      min-width: 0;
    }
    .admin-summary-card strong {
      display: block;
      font-size: 22px;
      line-height: 1.1;
      margin-bottom: 6px;
      overflow-wrap: anywhere;
    }
    .admin-queues {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 0 16px 16px;
    }
    .admin-active-deals {
      padding: 0 16px 16px;
    }
    .admin-active-deals .queue-box {
      width: 100%;
    }
    .admin-active-deal {
      display: grid;
      grid-template-columns: minmax(110px, 1fr) minmax(160px, 1.4fr) minmax(130px, 1fr) minmax(110px, auto);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
    }
    .admin-active-deal:last-child { border-bottom: 0; }
    .admin-active-deal-title {
      font-weight: 760;
      overflow-wrap: anywhere;
    }
.admin-active-deal-meta {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.admin-active-deal-link {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.admin-active-deal-link:hover .admin-active-deal-title,
.admin-active-deal-link:focus-visible .admin-active-deal-title {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-active-deal-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: var(--radius-sm);
}
.queue-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      min-width: 0;
      overflow: hidden;
    }
    .queue-box h3 {
      margin: 0;
      padding: 10px 12px;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      background: var(--surface-2);
    }
    .queue-item {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
    }
    .queue-item:last-child { border-bottom: 0; }
    .queue-item-link { cursor: pointer; }
    .queue-item-link:hover, .queue-item-link:focus-visible { background: var(--surface-2); }
    .th-sort { cursor: pointer; user-select: none; }
    .queue-pick { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
    .queue-title { font-weight: 720; overflow-wrap: anywhere; }
    .queue-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .admin-context {
      border: 1px solid #c8ddd7;
      border-radius: 8px;
      background: #f6fbf9;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .stat {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      box-shadow: var(--shadow);
      min-width: 0;
    }
    .stat .label {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 8px;
    }
    .stat .value {
      font-size: 23px;
      line-height: 1.1;
      font-weight: 780;
      overflow-wrap: anywhere;
    }
    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
      gap: 16px;
      align-items: start;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      min-width: 0;
      overflow: hidden;
    }
    .panel-head {
      min-height: 52px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
    }
    .panel-head h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 760;
    }
    .panel-body { padding: 14px 16px; }
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      min-width: 720px;
    }
    th, td {
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
    }
    th {
      color: var(--muted);
      font-size: 12px;
      font-weight: 680;
      background: var(--surface-2);
    }
    tr:last-child td { border-bottom: 0; }
    tr[data-deal-row-open] { cursor: pointer; }
    tr[data-deal-row-open]:hover td { background: var(--surface-2); }
    .deal-table-wrap table { min-width: 760px; }
    .segmented {
      display: inline-flex;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f4f7f7;
    }
    .segmented-btn {
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      padding: 7px 9px;
      font: inherit;
      font-size: 13px;
      font-weight: 720;
      cursor: pointer;
      white-space: nowrap;
    }
    .segmented-btn.active {
      background: var(--surface);
      color: var(--accent);
      box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }
    .deal-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .deal-actions.primary-actions {
      justify-content: flex-start;
    }
    .icon-btn {
      width: 40px;
      min-width: 40px;
      padding-left: 0;
      padding-right: 0;
      justify-content: center;
    }
    .deal-folder-icon {
      position: relative;
      display: inline-block;
      width: 22px;
      height: 16px;
      border-radius: 2px 3px 3px 3px;
      background: linear-gradient(#ffd765 0%, #f9c247 48%, #e9a92c 100%);
      border: 1px solid #c48a1f;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(126,78,9,.18),
        0 1px 1px rgba(0,0,0,.08);
    }
    .deal-folder-icon::before {
      content: "";
      position: absolute;
      left: 2px;
      top: -5px;
      width: 10px;
      height: 6px;
      border-radius: 2px 2px 0 0;
      background: linear-gradient(#ffe083, #f5bd3d);
      border: 1px solid #c48a1f;
      border-bottom: 0;
    }
    .deal-folder-icon::after {
      content: "";
      position: absolute;
      left: 2px;
      right: 2px;
      top: 4px;
      height: 1px;
      background: rgba(255,255,255,.55);
    }
    .action-menu {
      position: relative;
      display: inline-block;
    }
    .action-menu > .action-menu-toggle {
      list-style: none;
      width: 40px;
      min-width: 40px;
      padding-left: 0;
      padding-right: 0;
      text-align: center;
    }
    .action-menu-popover {
      position: fixed;
      z-index: 10000;
      min-width: 210px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: var(--shadow);
      display: none;
      gap: 4px;
    }
    .action-menu.is-open .action-menu-popover,
    .action-menu-popover.is-open {
      display: grid;
    }
    .action-menu-popover .btn {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
    }
    .action-menu-popover { min-width: 248px; }
    .action-menu-popover .action-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      white-space: normal;
      line-height: 1.3;
    }
    .action-menu-popover .action-item .ai-label { font-weight: 650; }
    .action-menu-popover .action-item .ai-hint {
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
    }
    .deal-main-cell {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .deal-title-line {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-weight: 730;
    }
    .deal-new-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #d64b58;
      box-shadow: 0 0 0 3px rgba(214, 75, 88, .14);
      flex: 0 0 auto;
    }
    .deal-new-note {
      color: #8d323b;
      font-size: 12px;
      font-weight: 720;
      overflow-wrap: anywhere;
    }
    .deal-board {
      display: grid;
      grid-template-columns: repeat(4, minmax(220px, 1fr));
      gap: 12px;
      padding: 12px;
      overflow-x: auto;
      align-items: start;
    }
    .deal-column {
      min-width: 220px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      overflow: visible;
    }
    .deal-column-head {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      font-weight: 760;
      font-size: 13px;
    }
    .deal-column-body {
      display: grid;
      gap: 8px;
      padding: 10px;
    }
    .deal-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 12px;
      padding: 12px;
    }
    .deal-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      cursor: pointer;
      overflow: visible;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .deal-card:hover {
      border-color: #b9cbc6;
      box-shadow: 0 14px 30px rgba(36, 48, 54, .11);
    }
    .deal-card.confirmed {
      border-color: #78b897;
      box-shadow: 0 0 0 2px rgba(94, 159, 124, .1);
    }
    .deal-card.problematic {
      border-color: #e0a14a;
      box-shadow: 0 0 0 2px rgba(224, 161, 74, .14);
    }
    .deal-card-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: flex-start;
    }
    .deal-card-top > div:first-child {
      min-width: 0;
    }
    .deal-card-state {
      display: grid;
      justify-items: end;
      gap: 8px;
      max-width: 220px;
      min-width: 0;
    }
    .deal-card-state .status {
      max-width: 100%;
      white-space: normal;
      text-align: left;
      overflow-wrap: anywhere;
      line-height: 1.25;
    }
    .deal-card-title {
      font-weight: 780;
      line-height: 1.22;
      overflow-wrap: break-word;
    }
    .deal-card-number {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      margin-bottom: 3px;
    }
    .deal-card-meta,
    .deal-client-meta,
    .deal-next-step {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: break-word;
    }
    .deal-card-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .deal-fact {
      min-width: 0;
    }
    .deal-fact span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 720;
      margin-bottom: 2px;
    }
    .deal-fact strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      line-height: 1.25;
      overflow-wrap: break-word;
    }
    .deal-card-subject {
      display: grid;
      gap: 3px;
    }
    .deal-card-subject .label {
      font-size: 11px;
    }
    .deal-card-subject strong {
      font-size: 15px;
      line-height: 1.25;
      overflow-wrap: break-word;
    }
    .deal-card-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      cursor: default;
    }
    .stage-control {
      display: grid;
      gap: 4px;
      min-width: min(220px, 100%);
    }
    .stage-control.readonly {
      min-width: 0;
    }
    .stage-control .label {
      font-size: 11px;
    }
    .stage-select {
      width: 100%;
      min-height: 38px;
    }
    .deal-next-step {
      border-left: 3px solid #9fc5bb;
      padding-left: 8px;
      color: #334245;
      font-weight: 650;
    }
    .deal-next-step.warn {
      border-left-color: #e0a14a;
      background: #fff8ec;
      border-radius: 0 8px 8px 0;
      padding: 8px 10px;
    }
    .deal-client-list {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    .client-chip {
      display: inline-flex;
      gap: 5px;
      align-items: center;
      max-width: 100%;
      padding: 3px 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f6f8f8;
      font-size: 12px;
      font-weight: 700;
      color: #334245;
      overflow-wrap: anywhere;
    }
    .client-chip.primary {
      border-color: #78b897;
      background: #f4fbf7;
      color: #185846;
    }
    .doc-actions-inline {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      flex-wrap: wrap;
    }
    .doc-action-menu {
      position: relative;
      display: inline-block;
    }
    .doc-action-menu[open] {
      z-index: 25;
    }
    .doc-action-menu details { position: relative; }
    .doc-action-menu summary {
      list-style: none;
      cursor: pointer;
    }
    .doc-action-menu summary::-webkit-details-marker { display: none; }
    .doc-menu-list {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      z-index: 20;
      min-width: 170px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      display: grid;
      gap: 4px;
    }
    .doc-menu-list .btn,
    .doc-menu-list a.btn {
      justify-content: flex-start;
      width: 100%;
    }
    .doc-agreement {
      display: grid;
      gap: 4px;
      margin-top: 5px;
    }
    .doc-agreement-reason {
      color: var(--bad);
      font-size: 12px;
      font-weight: 650;
      overflow-wrap: anywhere;
    }
    .document-folder-list {
      display: grid;
      gap: 12px;
    }
    .document-explorer-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      margin: 0 0 12px;
    }
    .document-breadcrumbs {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
      font-size: 13px;
      font-weight: 720;
    }
    .document-breadcrumbs button {
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--accent);
      padding: 3px 4px;
      border-radius: 5px;
      font: inherit;
    }
    .document-breadcrumbs button:hover { background: var(--soft); }
    .document-breadcrumbs span { color: var(--muted); }
    .document-folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
      padding: 12px;
    }
    .document-folder-card {
      min-height: 96px;
      border: 1px solid #d5dfdf;
      border-radius: 8px;
      background: var(--surface);
      padding: 12px;
      text-align: left;
      cursor: pointer;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      color: var(--text);
    }
    .document-folder-card:hover {
      border-color: #9fc5bb;
      background: #f8fbfa;
    }
    .folder-icon {
      width: 46px;
      height: 36px;
      position: relative;
      border-radius: 4px 5px 5px 5px;
      background: linear-gradient(#ffd86b, #f0b837);
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
    }
    .folder-icon::before {
      content: "";
      position: absolute;
      left: 4px;
      top: -7px;
      width: 20px;
      height: 10px;
      border-radius: 4px 4px 0 0;
      background: #f7c64c;
    }
    .document-folder-card strong {
      display: block;
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    /* ─── Design port — documents: prototype folder cards (.folder-card) ─── */
    .document-folder-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .document-folder-card.folder-card {
      min-height: 0;
      grid-template-columns: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      align-items: stretch;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      transition: box-shadow .15s, border-color .15s, transform .15s;
    }
    .document-folder-card.folder-card:hover {
      border-color: var(--border-strong);
      background: var(--surface);
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }
    .document-folder-card.folder-card .fc-top { display: flex; align-items: center; justify-content: space-between; }
    .document-folder-card.folder-card .fc-ico { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
    .document-folder-card.folder-card .fc-ico .ic { width: 20px; height: 20px; }
    .document-folder-card.folder-card .fc-count { font-size: 22px; font-weight: 750; font-family: var(--font-mono); display: flex; align-items: center; gap: 7px; color: var(--text); }
    .document-folder-card.folder-card .fc-badge { font-size: 10px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: var(--radius-pill); }
    .document-folder-card.folder-card .fc-title { font-size: 14.5px; font-weight: 700; }
    .document-folder-card.folder-card .fc-hint { font-size: 12px; color: var(--text-3); line-height: 1.45; flex: 1; }
    .document-folder-card.folder-card .fc-go { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--accent); white-space: nowrap; }
    .document-folder-card.folder-card .fc-go .ic { width: 14px; height: 14px; transition: transform .15s; }
    .document-folder-card.folder-card:hover .fc-go .ic { transform: translateX(3px); }
    /* deal folder: per-type file groups */
    .deal-folder-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 8px; }
    .deal-folder-intro strong { display: block; font-size: 15px; font-weight: 700; }
    .deal-folder-intro span { font-size: 12.5px; color: var(--text-3); }
    .doc-group { display: grid; gap: 8px; }
    .doc-group + .doc-group { margin-top: 16px; }
    .doc-group .row-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; }
    .document-folder-body {
      display: grid;
      gap: 10px;
      padding: 12px;
    }
    .document-folder-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    .document-file-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
    }
    .document-file-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
    }
    .document-file-row:last-child { border-bottom: 0; }
    .document-file-row strong {
      display: block;
      overflow-wrap: anywhere;
    }
    .document-file-row .doc-actions-inline {
      justify-content: flex-end;
    }
    .folder-upload {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px;
      border: 1px dashed #cbdada;
      border-radius: 8px;
      background: #f7fbfb;
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
    }
    .folder-upload.dragover {
      border-color: var(--accent);
      background: var(--soft);
      color: var(--text);
    }
    .status {
      display: inline-block;
      max-width: 100%;
      padding: 4px 7px;
      border-radius: 999px;
      background: #eef2f4;
      color: #37454a;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid transparent;
    }
    .status.hot { background: #e2f0ea; color: #185846; }
    .status.warn { background: #faead8; color: #7a430e; }
    .status.bad { background: #f5e2e3; color: #8d323b; }
    .kv {
      display: grid;
      grid-template-columns: 115px minmax(0, 1fr);
      gap: 8px 12px;
    }
    .kv div:nth-child(odd) {
      color: var(--muted);
      font-size: 12px;
    }
    .employee-list {
      display: grid;
      gap: 10px;
    }
    .employee-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;
      align-items: flex-start;
      background: var(--surface-2);
    }
    .employee-card > div:first-child { flex: 1 1 280px; min-width: 0; }
    .employee-name {
      font-weight: 730;
      overflow-wrap: anywhere;
    }
    .employee-meta {
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
      overflow-wrap: anywhere;
    }
    .employee-actions {
      flex: 1 1 auto;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: flex-start;
    }
    .employee-password {
      flex: 1 1 100%;
    }
    .employee-password .code-value {
      font-size: 20px;
    }
    .btn.danger {
      border-color: #e2c4c7;
      color: var(--bad);
      background: #fff7f7;
    }
    .status.good { background: #f8fffc; color: #185846; border-color: #4fa17f; }
    .company-list {
      display: grid;
      gap: 10px;
      counter-reset: company;
    }
    .company-card {
      counter-increment: company;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--surface-2);
      display: grid;
      gap: 6px;
    }
    .company-card.warn { border-color: color-mix(in oklab, var(--warn) 40%, var(--border)); }
    .company-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .cc-fix {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 13px; border-radius: var(--radius-sm);
      background: var(--warn-soft); color: var(--warn);
      font-size: 12.5px; font-weight: 550;
    }
    .cc-fix .ic { width: 16px; height: 16px; flex: none; }
    .company-card.primary-company {
      border-color: color-mix(in oklab, var(--good) 50%, var(--border));
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--good) 16%, transparent);
      background: color-mix(in oklab, var(--good) 7%, var(--surface));
    }
    .company-card strong { overflow-wrap: anywhere; }
    .company-main {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      min-width: 0;
    }
    .company-number {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 760;
      flex: 0 0 auto;
    }
    .company-number::before {
      content: counter(company);
    }
    .company-card-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .company-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .company-card-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .company-card-btn.bad {
      border-color: color-mix(in oklab, var(--bad) 40%, var(--border));
      background: var(--bad-soft);
      color: var(--bad);
    }
    .company-card-btn.good {
      border-color: color-mix(in oklab, var(--good) 40%, var(--border));
      background: var(--good-soft);
      color: var(--good);
    }
    .icon-btn {
      width: 36px;
      min-height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .icon {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .company-subsection {
      border-top: 1px solid var(--line);
      padding-top: 10px;
      display: grid;
      gap: 8px;
    }
    .mini-list {
      display: grid;
      gap: 6px;
    }
    .mini-item {
      display: flex;
      gap: 8px;
      align-items: baseline;
      flex-wrap: wrap;
      color: var(--text);
    }
    .mini-item span {
      color: var(--muted);
      font-size: 12px;
    }
    .inline-add {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
    }
    .company-add-panel {
      margin-top: 12px;
      border-top: 1px solid var(--line);
      padding-top: 12px;
      display: grid;
      gap: 10px;
    }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      align-items: start;
    }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: grid;
      align-items: start;
      justify-items: center;
      padding: 48px 20px;
      overflow-y: auto;
      background: rgba(20, 29, 32, .36);
    }
    /* ─── Design port — modal shell (prototype .modal / .modal-head / .modal-body / .modal-foot) ─── */
    .deal-form-card {
      width: min(640px, 100%);
      max-width: none;
      max-height: calc(100dvh - 96px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: calc(var(--radius) + 2px);
      box-shadow: var(--shadow-lg);
    }
    .deal-form-card > .panel-head {
      flex: none;
      align-items: center;
      gap: 12px;
      min-height: 0;
      padding: 20px 22px 14px;
      border-bottom: 0;
    }
    .deal-form-card > .panel-head h2 { font-size: 19px; font-weight: 750; letter-spacing: -0.3px; }
    .deal-form-card > .panel-head > button:last-child { margin-left: auto; }
    .deal-form-card > .panel-head > .icon-btn { flex: none; }
    .deal-form-card > .panel-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 4px 22px 22px;
    }
    .deal-form-card .panel-foot {
      flex: none;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 22px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }
    /* pinned action row → behaves like prototype .modal-foot */
    .deal-form-card form > .actions {
      position: sticky;
      bottom: -22px;
      gap: 10px;
      margin: 8px -22px -22px;
      padding: 16px 22px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }
    /* prototype form controls (.f / .inp / .sel / .ta) — modal-scoped only */
    .deal-form-card .field label,
    .deal-form-card form > label:not(.check-row) {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-2);
    }
    .deal-form-card .panel-body input:not([type=checkbox]):not([type=radio]),
    .deal-form-card .panel-body select,
    .deal-form-card .panel-body textarea {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
    }
    .deal-form-card .panel-body input:not([type=checkbox]):not([type=radio]),
    .deal-form-card .panel-body select { height: 42px; padding: 0 13px; }
    .deal-form-card .panel-body textarea { padding: 11px 13px; min-height: 82px; line-height: 1.5; }
    .deal-form-card .panel-body input:focus,
    .deal-form-card .panel-body select:focus,
    .deal-form-card .panel-body textarea:focus {
      border-color: var(--accent-line);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .deal-detail-card { width: min(900px, 100%); }
    .detail-section {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .detail-section h3 {
      margin: 0;
      font-size: 16px;
    }
    .detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0 4px;
    }
    .deal-detail-overview {
      display: grid;
      gap: 14px;
      margin-bottom: 14px;
    }
    .deal-detail-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .deal-detail-kicker {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      margin-bottom: 4px;
    }
    .deal-detail-client {
      font-size: 21px;
      line-height: 1.2;
      font-weight: 800;
      overflow-wrap: break-word;
    }
    .deal-detail-subline {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: break-word;
    }
    .deal-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .deal-detail-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: var(--surface);
      min-width: 0;
    }
    .deal-detail-box span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 740;
      margin-bottom: 4px;
    }
    .deal-detail-box strong {
      display: block;
      font-size: 14px;
      line-height: 1.25;
      overflow-wrap: break-word;
      white-space: pre-line;
    }
    .stage-select {
      min-width: 170px;
      width: auto;
      padding: 7px 9px;
      font-size: 13px;
      font-weight: 720;
      background: var(--surface);
    }
    .inline-comment-form {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface-2);
    }
    .detail-doc-list {
      display: grid;
      gap: 8px;
    }
    .detail-doc-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface);
    }
    .detail-doc-title {
      font-weight: 720;
      overflow-wrap: anywhere;
    }
    .detail-doc-meta {
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
      overflow-wrap: anywhere;
    }
    #dealDetailModal .detail-doc-row,
    #dealDocsModal .document-file-row {
      grid-template-columns: 1fr;
      align-items: start;
    }
    #dealDetailModal .detail-doc-row > div:first-child,
    #dealDocsModal .document-file-row > div:first-child {
      min-width: 0;
      max-width: 100%;
    }
    #dealDetailModal .detail-doc-title,
    #dealDocsModal .document-file-row strong {
      line-height: 1.25;
      overflow-wrap: anywhere;
      word-break: normal;
      hyphens: auto;
    }
    #dealDetailModal .doc-actions-inline,
    #dealDocsModal .doc-actions-inline {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
    }
    #dealDetailModal .doc-actions-inline .btn,
    #dealDetailModal .doc-action-menu,
    #dealDetailModal .doc-action-menu details,
    #dealDetailModal .doc-action-menu summary,
    #dealDocsModal .doc-actions-inline .btn,
    #dealDocsModal .doc-action-menu,
    #dealDocsModal .doc-action-menu details,
    #dealDocsModal .doc-action-menu summary {
      width: 100%;
      min-width: 0;
    }
    #dealDetailModal .doc-menu-list,
    #dealDocsModal .doc-menu-list {
      left: 0;
      right: auto;
      width: min(100%, 220px);
    }
    #dealDetailModal .detail-doc-list,
    #dealDocsModal .document-file-list {
      overflow: visible;
    }
    #dealDetailModal .detail-doc-row:last-child .doc-menu-list,
    #dealDocsModal .document-file-row:last-child .doc-menu-list {
      top: auto;
      bottom: calc(100% + 6px);
    }
    #dealDetailModal .doc-agreement,
    #dealDocsModal .doc-agreement {
      margin-top: 8px;
      max-width: 100%;
    }
    .empty {
      color: var(--muted);
      padding: 18px 0;
    }
    textarea, input, select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 9px 10px;
      background: var(--surface-2);
      outline: none;
      resize: vertical;
    }
    textarea:focus, input:focus, select:focus {
      border-color: color-mix(in srgb, var(--accent-2), white 20%);
      box-shadow: 0 0 0 3px rgba(47, 95, 159, .12);
    }
    form {
      display: grid;
      gap: 10px;
    }
    .row {
      display: grid;
      grid-template-columns: 1fr 140px;
      gap: 10px;
    }
    .event {
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .event:last-child { border-bottom: 0; }
    .event-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .event-text { overflow-wrap: anywhere; }
    .deal-summary {
      display: grid;
      gap: 7px;
      margin-bottom: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }
    .deal-summary-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
    }
    .deal-summary-row span:first-child {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .comment-history {
      display: grid;
      gap: 8px;
      margin: 10px 0 12px;
    }
    .comment-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface);
    }
    .comment-meta {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .comment-text { overflow-wrap: anywhere; white-space: pre-wrap; }
    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #172124;
      color: #fff;
      padding: 10px 13px;
      border-radius: 7px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(8px);
      transition: .18s ease;
      pointer-events: none;
      max-width: min(420px, calc(100vw - 40px));
      overflow-wrap: anywhere;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    @media (max-width: 980px) {
      .shell { grid-template-columns: 1fr; }
      .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .admin-dealer-picker {
        grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr);
        align-items: start;
        padding: 8px 10px;
      }
      .admin-dealer-picker .label,
      .sidebar-dealer-results {
        grid-column: 1 / -1;
      }
      .sidebar-dealer-results {
        display: flex;
        overflow-x: auto;
        max-height: none;
      }
      .sidebar-dealer-result {
        min-width: 220px;
      }
      .nav-menu {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding: 8px 10px;
        -webkit-overflow-scrolling: touch;
      }
      .nav-item {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .admin-queues { grid-template-columns: 1fr; }
      .admin-active-deal { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
      .grid { grid-template-columns: 1fr; }
      .settings-grid { grid-template-columns: 1fr; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .actions { justify-content: flex-start; }
      .contact-popover { left: 0; right: auto; }
      .form-grid { grid-template-columns: 1fr; }
      .admin-toolbar { flex-wrap: wrap; }
      .admin-toolbar select { flex: 1; min-width: 170px; }
    }
    @media (max-width: 620px) {
      .shell { display: block; min-height: 100vh; }
      .sidebar {
        position: sticky;
        top: 0;
        z-index: 30;
      }
      .brand {
        height: auto;
        min-height: 54px;
        padding: 10px 14px;
      }
      .brand strong { font-size: 16px; }
      .admin-dealer-picker {
        grid-template-columns: 1fr;
        padding: 8px 10px;
      }
      .nav-menu { padding: 7px 10px 9px; }
      .nav-item {
        padding: 8px 10px;
        font-size: 13px;
        min-height: 34px;
      }
      .nav-warning {
        width: 18px;
        height: 18px;
        font-size: 12px;
      }
      .topbar {
        position: static;
        min-height: 0;
        padding: 12px 14px;
        gap: 10px;
      }
      .topbar .actions,
      .actions {
        width: 100%;
        justify-content: flex-start;
      }
      .content { padding: 12px; gap: 12px; }
      .auth-content { padding: 18px; }
      .auth-brand h1 { font-size: 28px; }
      .stats { grid-template-columns: 1fr; }
      .admin-summary-grid { grid-template-columns: 1fr; }
      .row { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .kv { grid-template-columns: 1fr; }
      .employee-card { grid-template-columns: 1fr; }
      .employee-actions { justify-content: flex-start; }
      .inline-add { grid-template-columns: 1fr; }
      .inline-add .btn { width: 100%; }
      .panel-head { align-items: flex-start; flex-direction: column; }
      .admin-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 12px;
      }
      .admin-toolbar input,
      .admin-toolbar select,
      .admin-toolbar .btn {
        width: 100%;
        min-width: 0;
      }
      .segmented {
        width: 100%;
        overflow-x: auto;
      }
      .segmented-btn {
        flex: 1 0 auto;
      }
      .deal-board,
      .deal-card-grid {
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px;
        overflow-x: visible;
      }
      .deal-column {
        min-width: 0;
      }
      .deal-client-input-row {
        grid-template-columns: 1fr;
      }
      .modal-backdrop {
        display: block;
        align-items: stretch;
        justify-items: stretch;
        overflow-y: auto;
        padding: 0;
        background: var(--surface);
      }
      .deal-form-card {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
      }
      .deal-form-card .panel-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
        align-items: center;
        flex-direction: row;
      }
      .deal-form-card .panel-body {
        padding: 12px 14px 24px;
      }
      .deal-card-grid {
        grid-template-columns: 1fr;
        padding: 10px;
      }
      .deal-card {
        padding: 12px;
      }
      .deal-card-facts,
      .deal-detail-grid,
      #dealDetailModal .detail-grid {
        grid-template-columns: 1fr;
      }
      .deal-card-footer,
      .deal-detail-hero {
        grid-template-columns: 1fr;
      }
      .deal-card-footer {
        align-items: stretch;
        flex-direction: column;
      }
      .stage-control {
        min-width: 0;
      }
      .action-menu-popover {
        left: auto;
        right: auto;
      }
      .deal-detail-client {
        font-size: 19px;
      }
      .deal-form-card input,
      .deal-form-card select,
      .deal-form-card textarea {
        font-size: 16px;
      }
      #newDealForm {
        gap: 8px;
      }
      .contract-product-list {
        display: grid;
        gap: 8px;
        margin-bottom: 8px;
      }
      .new-deal-product-row {
        display: grid;
        grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
        gap: 8px;
        align-items: end;
      }
      .contract-product-row {
        display: grid;
        grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) 82px auto;
        gap: 8px;
        align-items: end;
      }
      /* на мобиле request-строка — как общая (иначе десктоп-ID-правило перекрыло бы и переполняло) */
      #contractRequestProducts .contract-product-row {
        grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.3fr) 72px auto;
      }
      #newDealForm .form-grid {
        gap: 8px;
      }
      #newDealClientEquipment {
        min-height: 88px;
      }
      #newDealComment {
        min-height: 74px;
      }
      .detail-doc-row {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .detail-actions .btn,
      .detail-doc-row .btn {
        width: 100%;
      }
      .btn { min-height: 34px; padding: 7px 10px; }
      .contract-product-row,
      .new-deal-product-row {
        grid-template-columns: 1fr;
      }
      .table-wrap:not(.mobile-card-table) table {
        min-width: 860px;
        table-layout: auto;
      }
      .table-wrap:not(.mobile-card-table) th,
      .table-wrap:not(.mobile-card-table) td {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
      }
      .mobile-card-table { overflow-x: visible; }
      .mobile-card-table table,
      .mobile-card-table tbody,
      .mobile-card-table tr,
      .mobile-card-table td {
        display: block;
        width: 100%;
        min-width: 0;
      }
      .mobile-card-table table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
      }
      .mobile-card-table thead { display: none; }
      .mobile-card-table tr {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        padding: 8px 10px;
      }
      .mobile-card-table td {
        border-bottom: 0;
        padding: 6px 0;
        overflow-wrap: normal;
        word-break: normal;
      }
      .mobile-card-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 2px;
      }
      .mobile-card-table .deal-main-cell,
      .mobile-card-table .deal-title-line,
      .mobile-card-table .deal-title-line span {
        overflow-wrap: break-word;
        word-break: normal;
      }
      .mobile-card-table .deal-actions,
      .mobile-card-table .doc-actions-inline {
        justify-content: flex-start;
      }
    }
    /* ============================================================
       Dealer Hub redesign handoff overrides
       ============================================================ */
    :root {
      color-scheme: light;
      --accent:#f2620a;
      --accent-press:#d6540a;
      --accent-ink:#ffffff;
      --bg:#f3f4f6;
      --bg-grid:rgba(15,23,30,.04);
      --surface:#ffffff;
      --surface-2:#f7f8fa;
      --surface-3:#eef0f3;
      --border:#e3e6ea;
      --border-strong:#cdd2d9;
      --text:#14181c;
      --text-2:#485058;
      --text-3:#8a939c;
      --accent-soft:color-mix(in oklab, var(--accent) 12%, var(--surface));
      --accent-line:color-mix(in oklab, var(--accent) 38%, var(--border));
      --warn:#b4690e;
      --warn-soft:#fbf0db;
      --info:#2f6db0;
      --info-soft:#e6eef7;
      --good:#1f7a52;
      --good-soft:#e0f0e7;
      --bad:#b23a44;
      --bad-soft:#f8e6e7;
      --shadow-sm:0 1px 2px rgba(15,23,30,.06);
      --shadow:0 10px 24px -12px rgba(15,23,30,.20);
      --shadow-lg:0 28px 60px -28px rgba(15,23,30,.34);
      --font-ui:"Onest", system-ui, -apple-system, sans-serif;
      --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;
      --radius:14px;
      --radius-sm:9px;
      --radius-pill:999px;
      --gap:14px;
      --panel:var(--surface);
      --line:var(--border);
      --muted:var(--text-3);
      --soft:var(--accent-soft);
      --accent-2:var(--accent);
    }
    :root.theme-dark,
    body.theme-dark {
      color-scheme: dark;
      --bg:#0d1013;
      --bg-grid:rgba(255,255,255,.035);
      --surface:#161a1f;
      --surface-2:#1c2127;
      --surface-3:#232931;
      --border:#2a3038;
      --border-strong:#3a424c;
      --text:#eef1f4;
      --text-2:#aab2bc;
      --text-3:#707a85;
      --accent-soft:color-mix(in oklab, var(--accent) 22%, var(--surface));
      --accent-line:color-mix(in oklab, var(--accent) 46%, var(--border));
      --warn:#e6a444;
      --warn-soft:#2e2415;
      --info:#6aa6e6;
      --info-soft:#16222f;
      --good:#4fc78c;
      --good-soft:#13271d;
      --bad:#ef7079;
      --bad-soft:#2c1719;
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow:0 14px 30px -14px rgba(0,0,0,.6);
      --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75);
    }
    html, body { min-height: 100%; }
    body {
      font-family: var(--font-ui);
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: background .25s ease, color .25s ease;
    }
    body.theme-dark {
      background: var(--bg) !important;
      color: var(--text);
    }
    body::before {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(1100px 600px at 16% -5%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 58%),
        radial-gradient(900px 620px at 100% 0%, color-mix(in oklab, var(--accent) 4%, transparent), transparent 52%);
      z-index:0;
    }
    button, input, select, textarea { font-family: inherit; color: inherit; }
    ::selection { background: var(--accent); color: var(--accent-ink); }
    .shell {
      position:relative;
      z-index:1;
      grid-template-columns:260px minmax(0,1fr);
      background: transparent;
    }
    .shell.single-column { grid-template-columns:minmax(0,1fr); }
    main { min-width:0; }
    .sidebar {
      position:sticky;
      top:0;
      height:100vh;
      background:var(--surface);
      border-right:1px solid var(--border);
      z-index:20;
      box-shadow:none;
    }
    .brand {
      height:auto;
      align-items:flex-start;
      justify-content:flex-start;
      flex-direction:column;
      gap:10px;
      padding:22px 20px 16px;
      border-bottom:0;
    }
    .brand-logo { display:block; height:40px; width:auto; }
    body.theme-dark .brand-logo,
    :root.theme-dark .brand-logo { filter: invert(1) brightness(1.8); }
    .brand-tag {
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-family:var(--font-mono);
      font-size:9.5px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:1.3px;
      color:var(--text-3);
    }
    .brand-tag i {
      width:5px;
      height:5px;
      border-radius:50%;
      background:var(--accent);
      flex:none;
    }
    .sidebar-role-card {
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      margin-top:4px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface-2);
    }
    .avatar {
      width:34px;
      height:34px;
      border-radius:var(--radius-pill);
      display:grid;
      place-items:center;
      flex:none;
      background:var(--surface-3);
      color:var(--text);
      font-weight:700;
      font-size:13px;
    }
    .who { min-width:0; display:grid; gap:2px; }
    .who strong,
    .who span {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .who strong { font-size:13px; font-weight:650; }
    .who span { font-size:11px; color:var(--text-3); }
    .admin-dealer-picker {
      background:var(--surface-2);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:12px;
    }
    .sidebar-selected-dealer,
    .sidebar-dealer-result,
    .org-card,
    .admin-context {
      border-color:var(--accent-line);
      border-radius:var(--radius-sm);
      background:var(--accent-soft);
    }
    .nav-menu {
      flex:1;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:2px;
      padding:6px 12px 14px;
    }
    .nav-label {
      font-size:10.5px;
      font-weight:700;
      color:var(--text-3);
      text-transform:uppercase;
      letter-spacing:1.2px;
      padding:16px 10px 6px;
    }
    .nav-item {
      justify-content:flex-start;
      gap:11px;
      padding:9px 11px;
      border-radius:var(--radius-sm);
      color:var(--text-2);
      font-size:13.5px;
      font-weight:550;
      transition:background .13s, color .13s, border-color .13s;
    }
    .nav-item:hover { background:var(--surface-2); color:var(--text); }
    .nav-item.active {
      background:var(--accent-soft);
      border-color:var(--accent-line);
      color:var(--text);
      font-weight:650;
    }
    .nav-item .ico {
      width:18px;
      height:18px;
      display:block;
      flex:none;
      color:var(--text-3);
      stroke:currentColor;
      fill:none;
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nav-item.active .ico { color:var(--accent); }
    .nav-count {
      margin-left:auto;
      min-width:30px;
      height:30px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:var(--radius-pill);
      background:var(--accent);
      color:var(--accent-ink);
      font-family:var(--font-mono);
      font-size:12px;
      font-weight:700;
    }
    .nav-warning {
      margin-left:auto;
      background:var(--warn-soft);
      border-color:color-mix(in oklab, var(--warn) 35%, var(--border));
      color:var(--warn);
    }
    .topbar {
      min-height:66px;
      padding:14px 26px;
      background:color-mix(in oklab, var(--bg) 80%, transparent);
      border-bottom:1px solid var(--border);
      backdrop-filter:blur(12px);
      gap:16px;
    }
    .topbar h1 {
      font-size:19px;
      line-height:1.2;
      font-weight:700;
      letter-spacing:0;
    }
    .subline { color:var(--text-3); font-size:12.5px; }
    .actions { gap:8px; }
    .btn,
    a.btn,
    .contact-menu summary {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:38px;
      height:auto;
      padding:8px 15px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface);
      color:var(--text);
      font-size:13.5px;
      font-weight:600;
      box-shadow:none;
      transition:border-color .13s, background .13s, color .13s, transform .13s;
      white-space:nowrap;
    }
    .btn:hover,
    .contact-menu summary:hover {
      border-color:var(--border-strong);
      filter:none;
    }
    .btn.primary,
    .contact-menu summary.primary {
      background:var(--accent);
      border-color:var(--accent);
      color:var(--accent-ink);
    }
    .btn.primary:hover,
    .contact-menu summary.primary:hover {
      background:var(--accent-press);
      border-color:var(--accent-press);
    }
    .btn.danger {
      border-color:color-mix(in oklab, var(--bad) 28%, var(--border));
      color:var(--bad);
      background:var(--bad-soft);
    }
    .icon-btn {
      width:38px;
      min-width:38px;
      min-height:38px;
      padding:0;
    }
    .menu-btn { display:none; }
    .contact-popover,
    .action-menu-popover,
    .doc-menu-list {
      border-color:var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface);
      box-shadow:var(--shadow);
    }
    .content {
      width:min(1420px,100%);
      padding:22px 26px 60px;
      gap:18px;
    }
    .panel {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow-sm);
    }
    .panel-head {
      min-height:56px;
      padding:15px 18px;
      border-bottom:1px solid var(--border);
    }
    .panel-head h2 {
      font-size:15px;
      font-weight:700;
      letter-spacing:0;
    }
    .panel-body { padding:16px 18px; }
    .kpis {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:var(--gap);
    }
    .kpi {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:16px 18px;
      display:flex;
      flex-direction:column;
      gap:6px;
      box-shadow:var(--shadow-sm);
      min-width:0;
    }
    .k-label { color:var(--text-3); font-size:12px; font-weight:600; }
    .k-value {
      color:var(--text);
      font-size:26px;
      line-height:1.05;
      font-weight:750;
      letter-spacing:0;
      overflow-wrap:anywhere;
    }
    .k-meta { color:var(--text-3); font-size:12px; }
    .admin-toolbar,
    .deal-toolbar {
      border-bottom:1px solid var(--border);
      background:var(--surface);
      padding:14px 16px;
      gap:10px;
      flex-wrap:wrap;
    }
    .deal-toolbar input { min-width:260px; }
    .deal-toolbar select {
      width:auto;
      min-width:150px;
      height:34px;
      padding:0 30px 0 12px;
      border-radius:var(--radius-pill);
      background:var(--surface);
      font-size:13px;
      font-weight:550;
      color:var(--text-2);
    }
    .segmented {
      border-color:var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface-2);
      padding:3px;
    }
    .segmented-btn {
      min-height:28px;
      padding:5px 11px;
      border-radius:7px;
      color:var(--text-3);
      font-weight:600;
    }
    .segmented-btn.active {
      background:var(--surface);
      color:var(--text);
      box-shadow:var(--shadow-sm);
    }
    input, select, textarea {
      border-color:var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface);
      color:var(--text);
      font-size:14px;
    }
    textarea::placeholder,
    input::placeholder { color:var(--text-3); }
    textarea:focus,
    input:focus,
    select:focus {
      border-color:var(--accent-line);
      box-shadow:0 0 0 3px var(--accent-soft);
      outline:0;
    }
    .field label,
    .label {
      color:var(--text-2);
      font-size:12.5px;
      font-weight:600;
    }
    .badge,
    .status {
      border-radius:var(--radius-pill);
      border:1px solid transparent;
      background:var(--surface-3);
      color:var(--text-2);
      font-weight:650;
    }
    .badge.good,
    .status.good,
    .status.hot {
      background:var(--good-soft);
      color:var(--good);
      border-color:color-mix(in oklab, var(--good) 28%, var(--border));
    }
    .badge.warn,
    .status.warn {
      background:var(--warn-soft);
      color:var(--warn);
      border-color:color-mix(in oklab, var(--warn) 28%, var(--border));
    }
    .status.bad {
      background:var(--bad-soft);
      color:var(--bad);
      border-color:color-mix(in oklab, var(--bad) 28%, var(--border));
    }
    .deal-card-grid,
    .deal-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
      gap:var(--gap);
      padding:16px;
    }
    .deal-board {
      grid-template-columns:repeat(4,minmax(260px,1fr));
      gap:var(--gap);
      padding:16px;
    }
    .deal-column {
      border-color:var(--border);
      border-radius:var(--radius);
      background:var(--surface-2);
      overflow:hidden;
    }
    .deal-column-head {
      border-bottom-color:var(--border);
      color:var(--text);
      background:var(--surface);
    }
    .deal-column-body { gap:10px; }
    .deal-card {
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--surface);
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:14px;
      box-shadow:var(--shadow-sm);
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .deal-card:hover {
      border-color:var(--border-strong);
      box-shadow:var(--shadow);
    }
    .deal-card.confirmed {
      border-color:color-mix(in oklab, var(--good) 35%, var(--border));
      box-shadow:0 0 0 2px color-mix(in oklab, var(--good) 13%, transparent);
    }
    .deal-card.problematic {
      border-color:color-mix(in oklab, var(--warn) 40%, var(--border));
      box-shadow:0 0 0 2px color-mix(in oklab, var(--warn) 14%, transparent);
    }
    .deal-card-top {
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:flex-start;
      gap:12px;
    }
    .deal-card-top > div:first-child { min-width:0; }
    .deal-card-state {
      display:grid;
      justify-items:end;
      gap:8px;
      max-width:220px;
      min-width:0;
    }
    .deal-review-status {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:7px;
      max-width:100%;
    }
    .deal-review-actions {
      display:inline-flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .review-icon-btn {
      width:34px;
      height:34px;
      min-height:34px;
      padding:0;
      border-radius:999px;
      background:var(--surface);
      box-shadow:0 1px 2px rgba(17,24,39,.08);
    }
    .review-icon-btn .icon {
      width:18px;
      height:18px;
      stroke-width:2.6;
    }
    .review-icon-btn.approve {
      color:var(--good);
      border-color:color-mix(in oklab, var(--good) 34%, var(--border));
      background:var(--good-soft);
    }
    .review-icon-btn.reject {
      color:var(--bad);
      border-color:color-mix(in oklab, var(--bad) 34%, var(--border));
      background:var(--bad-soft);
    }
    .review-icon-btn:hover {
      box-shadow:0 0 0 3px color-mix(in oklab, currentColor 14%, transparent);
      transform:translateY(-1px);
    }
    .unread-dot.inline {
      position:static;
      display:inline-block;
      width:10px;
      height:10px;
      flex:0 0 auto;
      box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
    }
    .deal-rejection-note {
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:9px;
    }
    .deal-rejection-note-head {
      display:flex;
      align-items:center;
      gap:9px;
      color:var(--warn);
    }
    .deal-rejection-note .btn {
      min-height:38px;
      padding-inline:16px;
    }
    .deal-card-state .status {
      max-width:100%;
      white-space:normal;
      text-align:left;
      overflow-wrap:anywhere;
      line-height:1.25;
    }
    .deal-card-number,
    .deal-num,
    td[data-label="ИНН"],
    .stage-select,
    .code-value,
    .k-value {
      font-family:var(--font-mono);
    }
    .deal-card-number {
      color:var(--text-3);
      font-size:12px;
      font-weight:600;
      margin:0 0 4px;
    }
    .deal-card-title {
      color:var(--text);
      font-size:15.5px;
      font-weight:700;
      line-height:1.3;
    }
    .deal-card-meta,
    .deal-client-meta,
    .deal-next-step,
    .queue-meta {
      color:var(--text-3);
    }
    .deal-type {
      display:inline-flex;
      align-items:center;
      width:max-content;
      padding:3px 8px;
      border:1px solid var(--border);
      border-radius:var(--radius-pill);
      color:var(--text-3);
      font-size:10.5px;
      font-weight:700;
      letter-spacing:.5px;
      text-transform:uppercase;
    }
    .deal-type.tender {
      color:var(--info);
      border-color:color-mix(in oklab, var(--info) 35%, var(--border));
      background:var(--info-soft);
    }
    .deal-type.direct {
      color:var(--good);
      border-color:color-mix(in oklab, var(--good) 35%, var(--border));
      background:var(--good-soft);
    }
    .deal-card-facts {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    .deal-fact {
      padding:9px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface-2);
    }
    .deal-fact span {
      color:var(--text-3);
      font-size:11px;
      font-weight:650;
    }
    .deal-fact strong {
      color:var(--text);
      font-size:13px;
      font-weight:650;
    }
    .deal-card-subject .label {
      font-size:11px;
      color:var(--text-3);
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .deal-card-subject strong { font-size:15.5px; font-weight:700; }
    .client-chip {
      border-color:var(--border);
      background:var(--surface-2);
      color:var(--text-2);
    }
    .client-chip.primary {
      border-color:color-mix(in oklab, var(--accent) 35%, var(--border));
      background:var(--accent-soft);
      color:var(--text);
    }
    .deal-next-step {
      border-left:3px solid var(--accent-line);
      background:var(--surface-2);
      border-radius:0 var(--radius-sm) var(--radius-sm) 0;
      padding:9px 11px;
      color:var(--text-2);
      font-weight:650;
    }
    .deal-next-step.warn {
      border-left-color:var(--warn);
      background:var(--warn-soft);
      color:var(--warn);
    }
    .deal-card-footer {
      border-top:1px solid var(--border);
      padding-top:13px;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:12px;
      margin-top:auto;
    }
    .deal-card-footer > div:first-child {
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .deal-actions.primary-actions .btn.primary { flex:1 1 auto; min-width:132px; justify-content:center; }
    .deal-actions.primary-actions .icon-btn,
    .deal-actions.primary-actions .action-menu { flex:0 0 auto; }
    .stage-control { gap:5px; }
    .stage-select {
      min-height:38px;
      border-radius:var(--radius-sm);
      background:var(--surface);
      font-size:12.5px;
      font-weight:600;
    }
    .deal-pipeline {
      display:flex;
      align-items:center;
      gap:5px;
      width:100%;
    }
    .deal-pipeline span {
      flex:1;
      height:5px;
      border-radius:var(--radius-pill);
      background:var(--surface-3);
    }
    .deal-pipeline span.done,
    .deal-pipeline span.current { background:var(--accent); }
    .deal-value {
      font-family:var(--font-mono);
      font-size:16px;
      font-weight:650;
      white-space:nowrap;
    }
    .deal-value .qty {
      color:var(--text-3);
      font-size:12px;
      margin-left:4px;
    }
    .deal-meta-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:var(--text-3);
      font-size:12px;
    }
    .unread-dot {
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 3px var(--accent-soft);
      flex:none;
    }
    table {
      background:var(--surface);
      color:var(--text);
    }
    th {
      background:var(--surface-2);
      color:var(--text-3);
      font-size:12px;
      font-weight:650;
    }
    th, td { border-bottom-color:var(--border); }
    tr[data-deal-row-open]:hover td { background:var(--surface-2); }
    .modal-backdrop {
      background:rgba(8,11,14,.5);
      backdrop-filter:blur(3px);
    }
    #dealDetailModal {
      place-items:stretch end;
      padding:0;
      background:rgba(8,11,14,.45);
    }
    #dealDetailModal .deal-detail-card {
      width:min(560px,100%);
      max-height:none;
      height:100vh;
      border-radius:0;
      border-top:0;
      border-right:0;
      border-bottom:0;
      box-shadow:var(--shadow-lg);
      overflow:hidden;
    }
    .detail-section h3 {
      margin:0 0 12px;
      color:var(--text-3);
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .deal-detail-hero,
    .deal-detail-box,
    .inline-comment-form,
    .comment-item,
    .detail-doc-row,
    .document-file-list,
    .document-file-row,
    .document-folder-card,
    .employee-card,
    .company-card,
    .queue-box,
    .admin-summary-card,
    .stat {
      border-color:var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface);
      box-shadow:none;
    }
    .deal-detail-hero,
    .inline-comment-form,
    .queue-box h3,
    .admin-summary-card,
    .stat {
      background:var(--surface-2);
    }
    .deal-detail-kicker,
    .deal-detail-subline,
    .detail-doc-meta,
    .comment-meta,
    .event-top,
    .mini-item span,
    .employee-meta,
    .document-folder-meta {
      color:var(--text-3);
    }
    .deal-detail-client { color:var(--text); }
    #newDealModal .deal-form-card {
      width:min(680px,100%);
      border-radius:calc(var(--radius) + 2px);
      box-shadow:var(--shadow-lg);
    }
    #newDealModal .panel-head {
      border-bottom:0;
      padding:20px 22px 0;
    }
    #newDealModal .panel-body { padding:16px 22px 20px; }
    .new-deal-steps {
      display:flex;
      align-items:center;
      gap:0;
      padding:0 22px 4px;
    }
    .new-deal-step {
      display:flex;
      align-items:center;
      gap:9px;
      flex:1;
      color:var(--text-3);
      font-size:12.5px;
      font-weight:600;
    }
    .new-deal-step-node {
      width:26px;
      height:26px;
      border-radius:50%;
      display:grid;
      place-items:center;
      border:2px solid var(--border-strong);
      background:var(--surface);
      font-family:var(--font-mono);
      font-size:12px;
      font-weight:700;
      flex:none;
    }
    .new-deal-step.active { color:var(--text); }
    .new-deal-step.active .new-deal-step-node {
      border-color:var(--accent);
      color:var(--accent);
      box-shadow:0 0 0 4px var(--accent-soft);
    }
    .new-deal-step.done .new-deal-step-node {
      background:var(--accent);
      border-color:var(--accent);
      color:var(--accent-ink);
    }
    .new-deal-step-line {
      flex:1;
      height:2px;
      background:var(--border);
      margin:0 10px;
      min-width:12px;
    }
    .new-deal-step.done .new-deal-step-line { background:var(--accent); }
    .new-deal-step:last-child { flex:0 0 auto; }
    .new-deal-step:last-child .new-deal-step-line { display:none; }
    .new-deal-step-panel {
      display:grid;
      gap:12px;
    }
    .new-deal-step-panel.hidden { display:none !important; }
    .new-deal-footer {
      display:flex;
      align-items:center;
      gap:10px;
      padding:16px 22px;
      margin:10px -22px -20px;
      border-top:1px solid var(--border);
      background:var(--surface);
    }
    .new-deal-footer .btn.primary { margin-left:auto; }
    #newDealForm .form-grid { gap:12px; }

    /* ─── Мастер новой сделки — новый вид (плитки типа, степпер, сводка, успех) ─── */
    /* Тип сделки — плитки .type-grid (вместо нативного select) */
    #newDealForm .type-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    #newDealForm .type-opt {
      text-align:left; padding:13px 14px; border:2px solid var(--border);
      border-radius:var(--radius-sm); background:var(--surface);
      display:flex; flex-direction:column; gap:4px; position:relative; transition:.13s;
    }
    #newDealForm .type-opt:hover { border-color:var(--border-strong); }
    #newDealForm .type-opt.sel { border-color:var(--accent); background:var(--accent-soft); }
    #newDealForm .type-opt strong { font-size:14px; font-weight:700; padding-right:22px; color:var(--text); }
    #newDealForm .type-opt span { font-size:12px; color:var(--text-3); }
    #newDealForm .type-opt .tick { position:absolute; top:12px; right:12px; color:var(--accent); opacity:0; line-height:0; }
    #newDealForm .type-opt .tick .ic { width:16px; height:16px; }
    #newDealForm .type-opt.sel .tick { opacity:1; }

    /* Количество — степпер .qty (scoped к мастеру, чтобы не задеть .deal-value .qty) */
    #newDealForm .qty { display:inline-flex; align-items:center; height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; justify-self:start; width:max-content; }
    #newDealForm .qty button { width:38px; height:100%; flex:none; border:0; padding:0; background:var(--surface); color:var(--text-2); font-size:18px; line-height:1; cursor:pointer; }
    #newDealForm .qty button:hover { background:var(--surface-2); color:var(--text); }
    #newDealForm .qty input { width:50px; height:100%; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); border-radius:0; background:var(--surface); text-align:center; font-family:var(--font-mono); font-size:15px; padding:0; }
    #newDealForm .qty input:focus { box-shadow:none; }

    /* Сводка-проверка .review (шаг «Подтверждение») */
    .new-deal-review-block { display:grid; gap:10px; }
    #newDealReview { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
    #newDealReview .rrow { display:flex; gap:14px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; }
    #newDealReview .rrow:last-child { border-bottom:0; }
    #newDealReview .rk { color:var(--text-3); width:116px; flex:none; }
    #newDealReview .rv { font-weight:600; color:var(--text); overflow-wrap:anywhere; }
    #newDealReview .rv.mono { font-family:var(--font-mono); }
    #newDealReview .rtotal { background:var(--surface-2); }
    #newDealReview .rtotal .rv { font-family:var(--font-mono); font-size:15.5px; font-weight:700; }

    /* Экран успеха .success */
    .new-deal-success { display:flex; flex-direction:column; }
    .new-deal-success .success { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:24px 10px 8px; }
    .new-deal-success .scheck { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--good-soft); color:var(--good); }
    .new-deal-success .scheck .icon { width:28px; height:28px; }
    .new-deal-success .success h3 { margin:0; font-size:18px; font-weight:750; color:var(--text); }
    .new-deal-success .success p { margin:0; color:var(--text-2); font-size:13.5px; max-width:42ch; line-height:1.5; }
    .new-deal-success .snum { font-family:var(--font-mono); font-size:13px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 14px; color:var(--text); }
    .new-deal-success-foot { display:flex; gap:10px; justify-content:flex-end; margin:18px -22px -22px; padding:16px 22px; border-top:1px solid var(--border); background:var(--surface); }

    /* Баннер ошибки — над прикреплённым футером, текст переносится (раньше уезжал под футер и обрезался) */
    .deal-form-card .error-text { min-height:0; margin:0; }
    .deal-form-card .error-text:not(:empty) {
      margin:6px 0 8px; padding:10px 13px; border-radius:var(--radius-sm);
      background:var(--bad-soft); color:var(--bad); font-size:12.5px; font-weight:600; line-height:1.4;
      border:1px solid color-mix(in oklab, var(--bad) 32%, var(--border));
    }
    .check-row {
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--surface);
      font-size:13.5px;
      font-weight:550;
    }
    .check-row:has(input:checked) {
      border-color:var(--accent-line);
      background:var(--accent-soft);
    }
    .new-deal-clients,
    .deal-client-editor { gap:10px; }
    .deal-client-input-row {
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:12px;
      background:var(--surface-2);
    }
    .toast {
      background:var(--text);
      color:var(--surface);
      border-radius:var(--radius-sm);
      box-shadow:var(--shadow);
      z-index:10001;
    }
    @media (max-width:1080px) {
      .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .deal-board { grid-template-columns:repeat(2,minmax(260px,1fr)); }
    }
    @media (max-width:880px) {
      .shell {
        display:grid;
        grid-template-columns:1fr;
        z-index:auto;
      }
      .sidebar {
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        width:264px;
        height:100vh;
        background:var(--surface);
        transform:translateX(-100%);
        transition:transform .26s ease;
        z-index:1000;
        box-shadow:var(--shadow-lg);
      }
      .sidebar.open { transform:translateX(0); }
      .nav-menu {
        flex-direction:column;
        overflow-x:hidden;
        overflow-y:auto;
      }
      .nav-item {
        width:100%;
        flex:0 0 auto;
        white-space:normal;
      }
      .sidebar-scrim {
        display:block;
        position:fixed;
        inset:0;
        z-index:900;
        background:rgba(8,11,14,.4);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
      }
      .sidebar-scrim.open {
        opacity:1;
        pointer-events:auto;
      }
      .menu-btn { display:inline-flex; }
      .topbar { padding:12px 16px; }
      .content { padding:16px 16px 50px; }
      .deal-card-grid { grid-template-columns:1fr; }
    }
    @media (max-width:560px) {
      .kpis { grid-template-columns:1fr; }
      .topbar {
        align-items:flex-start;
        flex-wrap:wrap;
      }
      .topbar .actions,
      .actions { width:100%; justify-content:flex-start; }
      .deal-toolbar input,
      .deal-toolbar select,
      .deal-toolbar .btn,
      .segmented { width:100%; min-width:0; }
      .sold-product-grid { grid-template-columns:1fr; padding:12px; }
      .sold-product-card { padding:14px; }
      .sold-product-top,
      .sold-product-actions { flex-direction:column; align-items:stretch; }
      .sold-product-facts { grid-template-columns:1fr; }
      .deal-card-grid,
      .deal-board { padding:12px; grid-template-columns:1fr; }
      .deal-card { padding:14px; }
      .deal-card-facts,
      .deal-detail-grid,
      #newDealForm .form-grid,
      .deal-client-input-row,
      .new-deal-product-row { grid-template-columns:1fr; }
      #newDealModal,
      .modal-backdrop { padding:0; }
      #newDealModal .deal-form-card,
      .deal-form-card {
        min-height:100vh;
        min-height:100dvh;
        max-height:none;
        border-radius:0;
        border:0;
      }
      .new-deal-step span:not(.new-deal-step-node) { display:none; }
      .new-deal-step:not(:last-child) { flex:1; }
      .new-deal-footer { flex-wrap:wrap; }
      .new-deal-footer .btn { flex:1 1 auto; }
      .deal-card-footer { flex-direction:column; align-items:stretch; }
      .deal-card-top { grid-template-columns:1fr; }
      .deal-card-state { justify-items:start; max-width:100%; }
      .deal-review-status { justify-content:flex-start; flex-wrap:wrap; }
      .detail-doc-row { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
      }
    }

    /* Keyboard focus ring for elements that otherwise have none (buttons, nav,
       segmented controls, summary, links). Inputs keep their own box-shadow. */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: inherit;
    }
    :focus:not(:focus-visible) {
      outline: none;
    }

/* ============================================================
   Раздел «Ваша скидка» (геймификация). Порт design_handoff_discount.
   ВНИМАНИЕ: .dh-main скоуплен как «.disc-hero .dh-main» — bare .dh-main
   уже занят drawer'ом сделки/справки (#dealDetailModal, #helpDrawer).
   ============================================================ */

/* ---------- Статус-герой ---------- */
.disc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
}
.dir-b .disc-hero { border-radius: var(--radius-sm); }

.disc-hero .dh-main {
  padding: 22px 24px 24px;
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 55%);
}
.dh-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent);
}
.dh-eyebrow svg { width: 15px; height: 15px; }
.dir-b .dh-eyebrow { font-family: var(--font-mono); }

.dh-level {
  font-size: 30px; font-weight: 800; letter-spacing: -0.6px;
  margin: 8px 0 14px; color: var(--text); line-height: 1;
}

.dh-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dh-sum {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px 13px 5px 10px;
  font-size: 12.5px; color: var(--text-2); font-weight: 600;
}
.dir-b .dh-sum { border-radius: 4px; }
.dh-sum b {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--accent);
}

/* progress */
.dh-progress { margin: 6px 0 20px; }
.dh-track {
  position: relative; height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-3); border: 1px solid var(--border);
  margin: 0 0 38px;
}
.dir-b .dh-track { border-radius: 3px; }
.dh-fill {
  position: absolute; inset: -1px auto -1px -1px; left: -1px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 78%, #000), var(--accent));
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  min-width: 8px;
}
.dir-b .dh-fill { border-radius: 3px; }

.dh-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.dh-mark.end { transform: translate(-100%, -50%); }
.dh-mark-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--border-strong);
  box-shadow: 0 0 0 3px var(--surface);
}
.dh-mark-dot.hit { border-color: var(--accent); background: var(--accent); }
.dh-mark-cap {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--text-2); line-height: 1.25;
}
.dh-mark.end .dh-mark-cap { left: auto; right: 0; transform: none; text-align: right; }
.dh-mark-cap em {
  display: block; font-style: normal; font-weight: 600;
  font-size: 10.5px; color: var(--text-3); letter-spacing: 0.2px;
}
.dh-scale { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }

.dh-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-2); line-height: 1.4;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.dh-status svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.dh-status strong { color: var(--text); font-weight: 750; }
.dh-status.max { background: var(--good-soft); border-color: color-mix(in oklab, var(--good) 30%, var(--border)); }
.dh-status.max svg { color: var(--good); }

/* side */
.dh-side {
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.dh-side-row { display: flex; flex-direction: column; gap: 3px; }
.dh-side-k {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3);
}
.dir-b .dh-side-k { font-family: var(--font-mono); }
.dh-side-v { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.dh-side-v.sm { font-size: 14px; font-weight: 650; }
.dh-side-v em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-3); }
.dh-side-demo {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 11.5px; color: var(--text-2); line-height: 1.35;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--info-soft); border: 1px solid color-mix(in oklab, var(--info) 22%, var(--border));
  margin-top: -6px;
}
.dh-side-demo svg { width: 14px; height: 14px; color: var(--info); flex: none; margin-top: 1px; }
.dh-keep {
  display: flex; gap: 8px; align-items: flex-start; margin-top: auto;
  font-size: 12px; color: var(--text-2); line-height: 1.4;
  padding-top: 14px; border-top: 1px dashed var(--border);
}
.dh-keep svg { width: 16px; height: 16px; color: var(--good); flex: none; margin-top: 1px; }
.dh-keep strong { color: var(--text); font-weight: 700; }

/* ---------- Группы категорий ---------- */
.disc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
}
.disc-group {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 13px;
}
.dir-b .disc-group { border-radius: var(--radius-sm); }
.dg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dg-titles { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-width: 0; }
.dg-title { font-size: 15.5px; font-weight: 750; letter-spacing: -0.2px; }
.dg-rate { text-align: right; flex: none; }
.dg-rate-val {
  display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.dg-rate-cap { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.dg-lead { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

/* ladder */
.disc-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dl-step {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 9px 10px 8px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.dl-step.reached { background: var(--accent-soft); border-color: var(--accent-line); }
.dl-step.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.dl-step.muted { opacity: 0.55; }
.dl-step-top { display: flex; align-items: center; gap: 5px; }
.dl-pct { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }
.dl-step.reached .dl-pct, .dl-step.current .dl-pct { color: var(--accent); }
.dl-now {
  align-self: stretch; text-align: center; margin-top: 3px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 2px 0;
}
.dl-lock { width: 13px; height: 13px; color: var(--text-3); margin-left: auto; }
.dl-step-label { font-size: 10.5px; color: var(--text-3); font-weight: 600; }

.dg-next {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2); font-weight: 600;
}
.dg-next svg { width: 14px; height: 14px; color: var(--accent); }
.dg-next strong { color: var(--accent); font-family: var(--font-mono); }

.dg-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: auto; }
.dg-cat {
  font-size: 11.5px; color: var(--text-2); font-weight: 600; white-space: nowrap;
  background: var(--surface-3); border-radius: var(--radius-pill); padding: 3px 9px;
}
.dir-b .dg-cat { border-radius: 3px; font-family: var(--font-mono); font-size: 10.5px; }

/* ---------- Правила ---------- */
.disc-rules {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px 22px 18px;
}
.dir-b .disc-rules { border-radius: var(--radius-sm); }
.disc-rules ol { list-style: none; margin: 0; padding: 0; }
.disc-rules li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.disc-rules li:last-child { border-bottom: none; }
.disc-rules li div { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.disc-rules strong { color: var(--text); font-weight: 700; }
.disc-rules b { color: var(--text); font-weight: 700; }
.dr-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  border: 1px solid var(--accent-line);
}

/* ---------- admin-бар floor (только для админа) ---------- */
.disc-admin {
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.dir-b .disc-admin { border-radius: var(--radius-sm); }
.disc-admin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.disc-admin .da-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-3);
}
.disc-admin #discountFloorSelect { max-width: 320px; }
.disc-admin .da-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.4; }

/* ---------- Адаптив ---------- */
@media (max-width: 760px) {
  .disc-hero { grid-template-columns: 1fr; }
  .dh-side { border-left: none; border-top: 1px solid var(--border); }
  .dh-keep { margin-top: 4px; }
}
@media (max-width: 560px) {
  .dh-level { font-size: 25px; }
  .disc-rules { padding: 6px 16px 14px; }
}

/* Telegram Mini App: вход — через Telegram, прячем веб-логин и смену пароля */
html.tg-webapp #logoutBtn,
html.tg-webapp #themeToggleBtn,
html.tg-webapp section.panel:has(#passwordForm) {
  display: none !important;
}

/* ─── Онбординг-тур: футер (десктоп) ─── */
.tour-foot-left { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tour-foot-right { display: flex; gap: 10px; margin-left: auto; align-items: center; }

/* ─── Онбординг-тур на мобиле: компактная карточка, НЕ фуллскрин (в отличие от форм) ─── */
@media (max-width: 560px) {
  #onboardingTour { padding: 16px; align-items: center; }
  #onboardingTour .tour-modal {
    min-height: 0;
    max-height: calc(100dvh - 32px);
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid var(--border);
  }
  #onboardingTour .tour-art { height: 104px; }
  #onboardingTour .tour-ico { width: 54px; height: 54px; }
  #onboardingTour .tour-ico .ic { width: 26px; height: 26px; }
  #onboardingTour .panel-foot { flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; }
  #onboardingTour .tour-foot-right { flex: 1 1 100%; order: 1; margin-left: 0; }
  #onboardingTour .tour-foot-right .btn { flex: 1 1 auto; }
  #onboardingTour .tour-foot-left { flex: 1 1 100%; order: 2; justify-content: center; }
}

/* Подтверждение заявки — строки сроков поставки */
.deal-approve-products { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.deal-approve-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deal-approve-row .dap-title { font-weight: 600; line-height: 1.3; }
.deal-approve-row .dap-term { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.deal-approve-row .dap-days { width: 88px; text-align: right; }
.deal-approve-row .dap-unit { color: var(--muted); font-size: 13px; }

/* INN lock note (admin only) */
.inn-lock-slot:empty { display: none; }
.inn-lock-note { font-size: 13px; line-height: 1.35; padding: 8px 10px; border-radius: var(--radius-sm); margin-top: 8px; }
.inn-lock-note.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 35%, var(--border)); }
.inn-lock-note.muted { background: var(--surface-2); color: var(--text-3); }
[data-extra-client-lookup] .inn-lock-note { margin-top: 4px; }
.deal-inn-warn { margin-left: 6px; font-size: 14px; line-height: 1; }

/* ─── Админка: рабочие разделы и центр действий ─── */
#adminContent > .admin-section-nav { order: 0; }
#adminContent > .admin-section-panel { order: 1 !important; }
#adminContent > .admin-logs-panel { order: 2 !important; }

.admin-section-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.admin-section-tab {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.admin-section-tab > span { color: var(--text); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.admin-section-tab > small { color: var(--text-3); font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.admin-section-tab:hover { background: var(--surface); }
.admin-section-tab.active {
  border-color: var(--accent-line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.admin-section-tab.active > span { color: var(--accent); }
.admin-section-tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-kicker {
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .8px;
  line-height: 1.1;
  text-transform: uppercase;
}
.admin-summary-panel .admin-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-summary-panel .admin-summary-card { min-height: 102px; }
.admin-action-list {
  margin: 0 16px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.admin-action-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.admin-action-list-head h3 { margin: 0 0 8px; font-size: 14px; }
.admin-action-types { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-action-type {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .35px;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.admin-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.admin-action-row:last-of-type { border-bottom: 0; }
.admin-action-main {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.admin-action-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.admin-action-controls .btn { min-height: 38px; white-space: nowrap; }
.admin-action-list-foot,
.admin-action-bulk {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.admin-action-bulk { justify-content: flex-start; }
.admin-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 168px;
  margin: 0 16px 16px;
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.admin-empty-state strong { color: var(--text); font-size: 15px; }
.admin-empty-state span { max-width: 560px; color: var(--text-3); font-size: 13px; line-height: 1.45; }

@media (max-width: 760px) {
  .admin-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-summary-panel .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-action-list-head { flex-direction: column; }
  .admin-action-row { grid-template-columns: 1fr; gap: 12px; }
  .admin-action-main { grid-template-columns: 1fr; gap: 8px; }
  .admin-action-controls { justify-content: flex-start; flex-wrap: wrap; }
  .admin-action-controls .btn { flex: 1 1 210px; }
}