:root {
      --shell: #f5f8f7;
      --surface: #ffffff;
      --surface-soft: #f8faf9;
      --chat-bg: #edf2f0;
      --line: #e1e9e6;
      --line-strong: #cbdad5;
      --text: #17201e;
      --muted: #66736f;
      --subtle: #97a39f;
      --brand: #0e7b6d;
      --brand-deep: #07564d;
      --brand-soft: #e5f5f0;
      --ai: #d9f3c9;
      --manual: #e8f3ff;
      --manual-accent: #4e7fc5;
      --manual-text: #183f73;
      --red: #e54848;
      --red-soft: #fff1f1;
      --amber: #b45309;
      --amber-soft: #fff7ed;
      --green: #047857;
      --green-soft: #ecfdf5;
      --shadow: 0 18px 44px rgba(18, 47, 40, .09);
      --shadow-soft: 0 4px 14px rgba(18, 47, 40, .055);
      --topbar-h: 64px;
      --rail-w: 64px;
      --composer-h: 128px;
      --radius-lg: 22px;
      --radius: 14px;
      --radius-sm: 10px;
    }
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
    body {
      color: var(--text);
      background: var(--shell);
      font-family: Inter, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      letter-spacing: .01em;
    }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    button, input, select, textarea { font: inherit; }
    button {
      height: 34px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 0 13px;
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      white-space: nowrap;
    }
    button:hover { background: #f8fbfa; }
    button:disabled { opacity: .55; cursor: not-allowed; }
    button.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
    button.primary:hover { background: var(--brand-deep); }
    button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text);
      outline: none;
    }
    input, select { height: 40px; padding: 0 12px; }
    textarea { min-height: 112px; padding: 12px; line-height: 1.55; resize: vertical; }
    small { color: var(--muted); }
    code { font-family: Consolas, ui-monospace, monospace; font-size: 12px; background: #f2f4f7; padding: 2px 5px; border-radius: 5px; }
    .hidden, .page.hidden, .tab-badge.hidden { display: none !important; }

    .app {
      position: fixed;
      inset: 0;
      display: grid;
      grid-template-rows: var(--topbar-h) minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      background: var(--shell);
    }
    .topbar {
      min-width: 0;
      height: var(--topbar-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 clamp(18px, 2.4vw, 42px);
      background: rgba(255, 255, 255, .78);
      border-bottom: 1px solid rgba(205, 220, 215, .72);
      overflow: hidden;
    }
    .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .mark {
      display: grid;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      place-items: center;
      color: #fff;
      background: var(--brand);
      font-weight: 900;
      font-size: 18px;
    }
    .brand h1 { margin: 0; color: var(--text); font-size: 19px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
    .brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
    .nav-btn, .help-link { height: 36px; border-radius: 10px; padding: 0 16px; font-weight: 800; }
    .nav-btn.active { color: var(--brand); background: var(--brand-soft); border-color: #a8ded4; box-shadow: none; }
    .help-link { display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: var(--brand-soft); border: 1px solid #a8ded4; box-shadow: none; text-decoration: none; white-space: nowrap; }
    .help-link:hover { color: var(--brand-deep); background: #dff7f0; }
    .account-pill { max-width: 220px; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.86); color: #344054; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; }
    .account-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .status, .duty-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .duty-pill { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #344054; }
    .duty-pill.on { background: var(--brand-soft); color: var(--brand-deep); border-color: #9bd8ca; }
    .duty-pill.off { background: var(--amber-soft); color: var(--amber); border-color: #fed7aa; }
    .duty-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
    .status-dot { color: var(--green); background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

    .page { min-width: 0; min-height: 0; }
    .workspace {
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-columns: var(--rail-w) minmax(270px, 340px) minmax(0, 1fr) minmax(270px, 340px);
      gap: clamp(10px, 1vw, 16px);
      padding: 0 clamp(14px, 1.8vw, 28px) clamp(12px, 1.4vw, 20px);
      overflow: hidden;
      background: var(--shell);
    }
    .desk-rail {
      grid-column: 1;
      align-self: stretch;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 20px 0;
      background: var(--brand-deep);
      border-radius: 0 0 24px 24px;
      box-shadow: 0 18px 36px rgba(7, 86, 77, .16);
    }
    .rail-btn {
      position: relative;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 15px;
      box-shadow: none;
      font-weight: 900;
    }
    .rail-btn { color: #dff7f0; background: rgba(255,255,255,.07); padding: 0; font-size: 13px; letter-spacing: .04em; }
    .rail-btn:hover { color: #fff; background: rgba(255,255,255,.14); }
    .rail-btn.active { color: var(--brand-deep); background: #e9fbf5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); }
    .rail-badge {
      position: absolute;
      right: -5px;
      top: -4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border: 2px solid var(--brand-deep);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: var(--red);
      font-size: 11px;
      line-height: 1;
      font-weight: 900;
    }
    html[data-workspace-view="chat"] #chatRailBtn,
    html[data-workspace-view="aftersale"] #aftersaleRailBtn,
    html[data-workspace-view="stores"] #accountStoresRailBtn,
    html[data-workspace-view="dropship"] #dropshipRailBtn,
    html[data-workspace-view="price-change"] #priceChangeRailBtn,
    html[data-workspace-view="compensation"] #compensationRailBtn,
    html[data-workspace-view="tickets"] #ticketRailBtn {
      color: var(--brand-deep);
      background: #e9fbf5;
    }
    html[data-workspace-view="aftersale"] #chatRailBtn.active,
    html[data-workspace-view="stores"] #chatRailBtn.active,
    html[data-workspace-view="dropship"] #chatRailBtn.active,
    html[data-workspace-view="price-change"] #chatRailBtn.active,
    html[data-workspace-view="compensation"] #chatRailBtn.active,
    html[data-workspace-view="tickets"] #chatRailBtn.active {
      color: #dff7f0;
      background: rgba(255,255,255,.08);
    }
    .workspace.aftersale-mode,
    .workspace.dropship-mode,
    .workspace.price-change-mode,
    .workspace.compensation-mode,
    .workspace.ticket-mode,
    .workspace.account-stores-mode {
      grid-template-columns: var(--rail-w) minmax(0, 1fr);
    }
    html[data-workspace-view="aftersale"] .workspace,
    html[data-workspace-view="dropship"] .workspace,
    html[data-workspace-view="price-change"] .workspace,
    html[data-workspace-view="compensation"] .workspace,
    html[data-workspace-view="tickets"] .workspace,
    html[data-workspace-view="stores"] .workspace {
      grid-template-columns: var(--rail-w) minmax(0, 1fr);
    }
    .workspace.aftersale-mode > .sidebar,
    .workspace.aftersale-mode > .chat,
    .workspace.aftersale-mode > .detail,
    .workspace.aftersale-mode > .resize-handle,
    .workspace.dropship-mode > .sidebar,
    .workspace.dropship-mode > .chat,
    .workspace.dropship-mode > .detail,
    .workspace.dropship-mode > .resize-handle,
    .workspace.price-change-mode > .sidebar,
    .workspace.price-change-mode > .chat,
    .workspace.price-change-mode > .detail,
    .workspace.price-change-mode > .resize-handle,
    .workspace.compensation-mode > .sidebar,
    .workspace.compensation-mode > .chat,
    .workspace.compensation-mode > .detail,
    .workspace.compensation-mode > .resize-handle,
    .workspace.ticket-mode > .sidebar,
    .workspace.ticket-mode > .chat,
    .workspace.ticket-mode > .detail,
    .workspace.ticket-mode > .resize-handle,
    .workspace.account-stores-mode > .sidebar,
    .workspace.account-stores-mode > .chat,
    .workspace.account-stores-mode > .detail,
    .workspace.account-stores-mode > .resize-handle {
      display: none;
    }
    html[data-workspace-view="aftersale"] .workspace > .sidebar,
    html[data-workspace-view="aftersale"] .workspace > .chat,
    html[data-workspace-view="aftersale"] .workspace > .detail,
    html[data-workspace-view="aftersale"] .workspace > .resize-handle,
    html[data-workspace-view="dropship"] .workspace > .sidebar,
    html[data-workspace-view="dropship"] .workspace > .chat,
    html[data-workspace-view="dropship"] .workspace > .detail,
    html[data-workspace-view="dropship"] .workspace > .resize-handle,
    html[data-workspace-view="compensation"] .workspace > .sidebar,
    html[data-workspace-view="compensation"] .workspace > .chat,
    html[data-workspace-view="compensation"] .workspace > .detail,
    html[data-workspace-view="compensation"] .workspace > .resize-handle,
    html[data-workspace-view="price-change"] .workspace > .sidebar,
    html[data-workspace-view="price-change"] .workspace > .chat,
    html[data-workspace-view="price-change"] .workspace > .detail,
    html[data-workspace-view="price-change"] .workspace > .resize-handle,
    html[data-workspace-view="tickets"] .workspace > .sidebar,
    html[data-workspace-view="tickets"] .workspace > .chat,
    html[data-workspace-view="tickets"] .workspace > .detail,
    html[data-workspace-view="tickets"] .workspace > .resize-handle,
    html[data-workspace-view="stores"] .workspace > .sidebar,
    html[data-workspace-view="stores"] .workspace > .chat,
    html[data-workspace-view="stores"] .workspace > .detail,
    html[data-workspace-view="stores"] .workspace > .resize-handle {
      display: none;
    }
    html[data-workspace-view="aftersale"] #aftersalePage.hidden,
    html[data-workspace-view="stores"] #accountStoresPage.hidden,
    html[data-workspace-view="dropship"] #dropshipPage.hidden,
    html[data-workspace-view="price-change"] #priceChangePage.hidden,
    html[data-workspace-view="compensation"] #compensationPage.hidden,
    html[data-workspace-view="tickets"] #ticketPage.hidden {
      display: block !important;
    }

    .sidebar, .detail, .chat {
      min-width: 0;
      min-height: 0;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--surface);
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(26, 56, 49, .04);
    }
    .sidebar, .detail { display: grid; grid-template-rows: 74px minmax(0, 1fr) 76px; }
    .detail { grid-template-rows: 74px minmax(0, 1fr); }
    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      height: 74px;
      padding: 0 18px;
      background: #fff;
      border-bottom: 1px solid #eef2f0;
    }
    .panel-title { min-width: 0; display: grid; gap: 5px; }
    .panel-heading-line { min-width: 0; display: flex; align-items: center; gap: 8px; }
    .panel-title strong { font-size: 18px; line-height: 1.15; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
    .panel-title > span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .panel-count {
      min-width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      padding: 0 7px;
      border: 1px solid #c9e4dc;
      border-radius: 8px 8px 8px 3px;
      color: var(--brand-deep);
      background: var(--brand-soft);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }
    .conversation-list, .handoff-list { min-height: 0; overflow: auto; }
    .detail-scroll { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
    .conversation-list { padding: 0 14px 12px; }
    .handoff-list { padding: 0 14px 14px; }
    .history-search-wrap {
      min-height: 76px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px;
      gap: 8px;
      align-items: center;
      padding: 14px;
      background: #fff;
      border-top: 1px solid var(--line);
    }
    .history-search-input {
      width: 100%;
      min-width: 0;
      height: 40px;
      border: 1px solid #cfe3de;
      border-radius: 12px;
      padding: 0 12px;
      color: var(--text);
      background: #fff;
      outline: none;
      box-shadow: none;
    }
    .history-search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 148, 136, .12); }
    .history-search-btn {
      height: 40px;
      color: var(--brand);
      background: var(--brand-soft);
      border-color: #bfe2dc;
      box-shadow: none;
      font-weight: 900;
    }
    .aftersale-workspace {
      grid-column: 2;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      padding: 22px 24px 28px;
      scrollbar-width: thin;
      overscroll-behavior: contain;
    }
    .aftersale-workspace::-webkit-scrollbar {
      width: 10px;
    }
    .aftersale-workspace::-webkit-scrollbar-thumb {
      background: #c8d0dc;
      border-radius: 999px;
    }
    .aftersale-workspace::-webkit-scrollbar-track {
      background: #f1f3f6;
      border-radius: 999px;
    }
    .after-list-view {
      position: relative;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
      padding-bottom: 58px;
    }
    .after-list-view.workflow-settings-open {
      min-height: 100%;
      height: auto;
      overflow: visible;
      grid-template-rows: auto auto auto auto auto auto auto auto auto;
    }
    .aftersale-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 46px;
      margin-bottom: 12px;
      border-bottom: 1px solid #e8edf0;
    }
    .aftersale-head h2 { margin: 0; font-size: 22px; line-height: 1.2; }
    .aftersale-head p { margin: 6px 0 0; color: var(--muted); }
    .aftersale-section-tabs {
      align-self: stretch;
      display: flex;
      align-items: stretch;
      gap: 32px;
    }
    .aftersale-section-tabs button {
      position: relative;
      height: 46px;
      padding: 0 4px;
      border: 0;
      border-radius: 0;
      color: #475467;
      background: transparent;
      box-shadow: none;
      font-size: 15px;
      font-weight: 800;
    }
    .aftersale-section-tabs button.active { color: #047f70; }
    .aftersale-section-tabs button.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: #0f9f91;
    }
    .aftersale-sync-status {
      color: #667085;
      font-size: 12px;
      font-weight: 700;
    }
    .aftersale-search-row {
      display: grid;
      grid-template-columns: minmax(300px, 384px) minmax(360px, 450px) 72px 60px;
      gap: 12px;
      align-items: center;
      justify-content: start;
      margin-bottom: 10px;
    }
    .after-detail-page {
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
      padding-bottom: 28px;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .after-detail-page::-webkit-scrollbar {
      width: 10px;
    }
    .after-detail-page::-webkit-scrollbar-thumb {
      background: #c8d0dc;
      border-radius: 999px;
    }
    .after-detail-page::-webkit-scrollbar-track {
      background: #f1f3f6;
      border-radius: 999px;
    }
    .aftersale-filters {
      display: grid;
      grid-template-columns: repeat(7, minmax(136px, 1fr));
      gap: 14px;
      margin-bottom: 12px;
    }
    .after-filter {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      height: 36px;
      border: 1px solid #e4e7ec;
      border-radius: 6px;
      background: #fff;
      overflow: hidden;
    }
    .after-filter label {
      padding: 0 9px;
      color: #667085;
      font-weight: 700;
      border-right: 1px solid #eef1f5;
      white-space: nowrap;
    }
    .after-filter input,
    .after-filter select {
      height: 34px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      color: #344054;
    }
    .aftersale-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 4px 0 22px;
    }
    .aftersale-toolbar .left-actions,
    .aftersale-toolbar .right-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .aftersale-query {
      width: 100%;
      height: 36px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 900;
      border-color: #eef1f5;
      background: #f7f8fa;
      box-shadow: none;
    }
    .aftersale-workflow-settings {
      display: block;
      margin: 16px 0 22px;
      padding: 0;
      border: 1px solid #d9e8e5;
      border-top: 4px solid #0f9f91;
      border-radius: 12px;
      background: #f8fafc;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
      overflow: hidden;
    }
    .aftersale-workflow-settings.hidden { display: none; }
    .aftersale-workflow-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid #e5e7eb;
      background: #eefaf7;
    }
    .aftersale-workflow-title {
      display: grid;
      gap: 4px;
    }
    .aftersale-workflow-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .aftersale-workflow-title strong {
      color: #101828;
      font-size: 16px;
    }
    .aftersale-workflow-title span,
    .aftersale-workflow-scope {
      color: #667085;
      font-size: 13px;
      font-weight: 800;
    }
    .aftersale-workflow-title .aftersale-workflow-hint {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 10px;
      border: 1px solid #b9e8df;
      border-radius: 999px;
      background: #ecfdf5;
      color: #0f766e;
      font-size: 12px;
      font-weight: 900;
    }
    .aftersale-workflow-title .aftersale-workflow-warning {
      color: #d92d20;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.45;
    }
    .aftersale-workflow-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .aftersale-workflow-actions button {
      height: 36px;
      box-shadow: none;
      font-weight: 900;
    }
    .aftersale-workflow-grid {
      display: block;
      min-width: 0;
      overflow-x: auto;
      margin: 14px 16px 0;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .workflow-rule-list {
      min-width: 1380px;
      background: #fff;
    }
    .workflow-rule-list-head,
    .workflow-rule-list-row {
      display: grid;
      grid-template-columns: minmax(200px, 1.2fr) minmax(210px, 1.3fr) minmax(190px, 1.1fr) minmax(190px, 1.1fr) minmax(130px, .75fr) minmax(96px, .55fr) minmax(120px, .65fr) minmax(180px, .9fr);
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
    }
    .workflow-rule-list-head {
      min-height: 46px;
      color: #667085;
      background: #f5f7fa;
      font-size: 13px;
      font-weight: 900;
    }
    .workflow-rule-item {
      border-top: 1px solid #eef1f4;
    }
    .workflow-rule-item.is-editing {
      background: #fff;
    }
    .workflow-rule-list-row {
      min-height: 68px;
      color: #344054;
      background: #fff;
    }
    .workflow-rule-item.is-editing .workflow-rule-list-row {
      border-left: 4px solid #0f9f91;
      border-bottom: 1px solid #e5e7eb;
      background: #f0fdfa;
      padding-left: 10px;
    }
    .workflow-rule-name {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .workflow-rule-name strong {
      color: #101828;
      font-size: 14px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workflow-rule-name span,
    .workflow-rule-cell-muted {
      color: #667085;
      line-height: 1.45;
      font-size: 12px;
      font-weight: 800;
    }
    .workflow-rule-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-rule-pill.on {
      color: #0f766e;
      background: #dcfbf5;
    }
    .workflow-rule-pill.off {
      color: #667085;
      background: #f2f4f7;
    }
    .workflow-rule-row-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .workflow-rule-row-actions button {
      height: 32px;
      min-width: 64px;
      padding: 0 12px;
      box-shadow: none;
      font-weight: 900;
    }
    .workflow-rule-item.is-editing .workflow-rule-row-actions [data-after-action="edit-workflow-rule"] {
      color: #0f766e;
      border-color: #99f6e4;
      background: #ecfdf5;
    }
    .workflow-rule-row-actions button.danger {
      color: #b42318;
      border-color: #fecaca;
      background: #fff5f5;
    }
    .workflow-preview-result {
      display: grid;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid #d1fadf;
      border-radius: 8px;
      background: #f0fdf4;
      color: #166534;
      line-height: 1.45;
      font-size: 13px;
      font-weight: 800;
    }
    .workflow-preview-result strong {
      color: #14532d;
      font-size: 14px;
    }
    .workflow-preview-list {
      display: grid;
      gap: 6px;
      margin-top: 2px;
    }
    .workflow-preview-row {
      display: grid;
      gap: 3px;
      padding: 8px 10px;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      background: #fff;
      color: #344054;
    }
    .workflow-preview-row span {
      color: #667085;
      font-size: 12px;
    }
    .workflow-rule-editor {
      display: grid;
      gap: 12px;
      margin: 14px;
      padding: 16px;
      border: 1px solid #d6e4e1;
      border-left: 4px solid #0f9f91;
      border-radius: 10px;
      background: #f8fafc;
      box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    }
    .workflow-rule-editor-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 34px;
      padding: 0 2px 8px;
      border-bottom: 1px solid #e5e7eb;
    }
    .workflow-rule-editor-title span {
      color: #667085;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-rule-editor-title strong {
      display: block;
      margin-top: 3px;
      color: #101828;
      font-size: 15px;
      font-weight: 900;
    }
    .workflow-rule-editor-title em {
      font-style: normal;
      color: #0f766e;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-editor-section {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .workflow-editor-top-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
      gap: 12px;
      align-items: stretch;
    }
    .workflow-editor-top-row .workflow-editor-section {
      min-width: 0;
    }
    .workflow-editor-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 32px;
      color: #101828;
      font-size: 13px;
      font-weight: 900;
    }
    .workflow-editor-section-head span {
      color: #667085;
      font-size: 12px;
      font-weight: 800;
    }
    .workflow-rule-editor-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .workflow-rule-editor-summary div {
      display: grid;
      gap: 5px;
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      background: #fff;
    }
    .workflow-rule-editor-summary span {
      color: #667085;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-rule-editor-summary strong {
      color: #344054;
      line-height: 1.45;
      font-size: 13px;
    }
    .workflow-rule-param-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .workflow-rule-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .workflow-rule-form-grid label,
    .workflow-condition-row label,
    .workflow-action-grid label {
      display: grid;
      gap: 6px;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-rule-form-grid input,
    .workflow-rule-form-grid textarea,
    .workflow-condition-row select,
    .workflow-condition-row input,
    .workflow-action-grid select,
    .workflow-action-grid textarea {
      min-height: 36px;
      border: 1px solid #d0d5dd;
      border-radius: 6px;
      padding: 8px 10px;
      color: #101828;
      background: #fff;
      font: inherit;
      font-weight: 800;
    }
    .workflow-rule-form-grid textarea,
    .workflow-action-grid textarea {
      min-height: 72px;
      resize: vertical;
    }
    .workflow-multi-select {
      position: relative;
      min-width: 0;
    }
    .workflow-execution-list-field.has-error .workflow-multi-trigger {
      border-color: #f04438;
      box-shadow: 0 0 0 3px rgba(240, 68, 56, .1);
    }
    .workflow-field-error,
    .workflow-editor-validation {
      color: #d92d20;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.5;
    }
    .workflow-editor-validation {
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid #fecdca;
      border-radius: 6px;
      background: #fef3f2;
    }
    .workflow-multi-trigger {
      width: 100%;
      min-height: 40px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-start;
      padding: 5px 34px 5px 8px;
      border: 1px solid #d0d5dd;
      border-radius: 6px;
      background: #fff;
      color: #101828;
      box-shadow: none;
      text-align: left;
      position: relative;
      cursor: pointer;
    }
    .workflow-multi-trigger::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #667085;
      transform: translateY(-50%);
    }
    .workflow-multi-placeholder {
      color: #667085;
      font-weight: 800;
    }
    .workflow-multi-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 180px;
      min-height: 26px;
      padding: 2px 7px 2px 9px;
      border-radius: 5px;
      background: #f2f4f7;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-multi-chip span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workflow-multi-chip-remove {
      width: 16px;
      height: 16px;
      min-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #d0d5dd;
      color: #fff;
      box-shadow: none;
      font-size: 12px;
      line-height: 1;
    }
    .workflow-multi-chip-remove:hover {
      background: #98a2b3;
    }
    .workflow-multi-menu {
      display: none;
      position: absolute;
      z-index: 20;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      bottom: auto;
      max-height: 220px;
      overflow: auto;
      padding: 6px;
      border: 1px solid #d0d5dd;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
    }
    .workflow-multi-select.is-open-up .workflow-multi-menu {
      top: auto;
      bottom: calc(100% + 4px);
    }
    .workflow-multi-select.is-open .workflow-multi-menu {
      display: grid;
      gap: 4px;
    }
    .workflow-multi-option {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-height: 32px;
      padding: 6px 8px;
      border-radius: 6px;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }
    .workflow-multi-empty {
      padding: 10px 8px;
      color: #667085;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.5;
    }
    .workflow-multi-option:has(input:checked) {
      color: #1677ff;
    }
    .workflow-multi-option-text {
      min-width: 0;
      overflow: hidden;
      line-height: 1.45;
      overflow-wrap: anywhere;
      white-space: normal;
    }
    .workflow-multi-option:hover {
      background: #f2f4f7;
    }
    .workflow-multi-option input {
      appearance: none;
      width: 18px;
      height: 18px;
      min-height: 0;
      padding: 0;
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      position: relative;
    }
    .workflow-multi-option input:checked::after {
      content: '\2713';
      position: absolute;
      inset: 0;
      color: #1677ff;
      font-size: 16px;
      font-weight: 900;
      line-height: 18px;
      text-align: center;
    }
    .workflow-multi-reason-tools {
      position: sticky;
      top: -6px;
      z-index: 2;
      display: grid;
      gap: 6px;
      margin: -6px -6px 4px;
      padding: 8px 6px 7px;
      border-bottom: 1px solid #eaecf0;
      background: #fff;
    }
    .workflow-multi-reason-search {
      width: 100%;
      height: 34px;
      min-height: 34px;
      padding: 0 9px;
      font-size: 12px;
      font-weight: 700;
    }
    .workflow-multi-reason-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .workflow-multi-group-filter {
      height: 28px;
      min-height: 28px;
      padding: 0 8px;
      border-radius: 6px;
      box-shadow: none;
      color: #475467;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-multi-group-filter.is-active {
      border-color: #0b7f70;
      color: #0b7f70;
      background: #e7f6f2;
    }
    .workflow-multi-option-group {
      display: grid;
      gap: 4px;
    }
    .workflow-multi-option-group + .workflow-multi-option-group {
      margin-top: 4px;
      padding-top: 6px;
      border-top: 1px solid #f2f4f7;
    }
    .workflow-multi-option-group-title {
      padding: 4px 8px 2px;
      color: #667085;
      font-size: 11px;
      font-weight: 900;
    }
    .workflow-multi-filter-empty {
      padding: 12px 8px;
      color: #667085;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }
    .workflow-condition-list {
      display: grid;
      gap: 8px;
    }
    .workflow-condition-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #667085;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-condition-list-head strong {
      color: #101828;
      font-size: 13px;
    }
    .workflow-condition-list-head button {
      height: 32px;
      min-width: 112px;
      box-shadow: none;
      font-weight: 900;
    }
    .workflow-condition-rows {
      display: grid;
      gap: 8px;
    }
    .workflow-condition-row {
      display: grid;
      grid-template-columns: minmax(150px, .9fr) minmax(120px, .7fr) minmax(220px, 1.4fr) 72px;
      gap: 10px;
      align-items: end;
      padding: 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .workflow-condition-row.is-external-procurement {
      grid-template-columns: minmax(140px, .8fr) minmax(150px, .9fr) minmax(120px, .65fr) minmax(180px, 1.15fr) 72px;
    }
    .workflow-condition-row .workflow-condition-remove {
      height: 36px;
      min-width: 64px;
      padding: 0 10px;
      color: #b42318;
      border-color: #fecaca;
      background: #fff5f5;
      box-shadow: none;
      font-weight: 900;
    }
    .workflow-action-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr);
      gap: 12px;
    }
    .workflow-editor-top-row .workflow-action-grid {
      grid-template-columns: 1fr;
    }
    .workflow-rule-editor > .after-inline-actions {
      margin-top: 2px;
      padding-top: 4px;
    }
    .workflow-rule-flow-editor {
      gap: 16px;
      padding: 18px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    }
    .workflow-rule-flow-editor .workflow-rule-editor-title {
      align-items: flex-start;
      padding-bottom: 12px;
    }
    .workflow-rule-title-fields {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .workflow-rule-title-input,
    .workflow-rule-description-input {
      width: min(720px, 100%);
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
    }
    .workflow-rule-title-input {
      color: #101828;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.45;
    }
    .workflow-rule-description-input {
      color: #667085;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }
    .workflow-rule-title-input:focus,
    .workflow-rule-description-input:focus {
      box-shadow: inset 0 -1px 0 #0f9f91;
    }
    .workflow-flow-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.9fr) minmax(300px, .85fr);
      gap: 18px;
      align-items: start;
    }
    .workflow-flow-main {
      display: grid;
      min-width: 0;
    }
    .workflow-flow-step {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid #d6e4e1;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 3px 10px rgba(15, 118, 110, .04);
    }
    .workflow-flow-step-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .workflow-flow-step-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .workflow-flow-step-number {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 28px;
      border-radius: 50%;
      color: #fff;
      background: #0b7f70;
      font-size: 14px;
      font-weight: 900;
    }
    .workflow-flow-step-title strong {
      color: #0b7f70;
      font-size: 15px;
      font-weight: 900;
    }
    .workflow-flow-step-title em {
      color: #667085;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
    }
    .workflow-flow-step-badge,
    .workflow-condition-source-badge {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 3px 9px;
      border: 1px solid #d0d5dd;
      border-radius: 6px;
      color: #667085;
      background: #fff;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }
    .workflow-flow-scope-field {
      display: grid;
      gap: 7px;
      padding-left: 38px;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-flow-scope-fixed {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid #d0d5dd;
      border-radius: 7px;
      color: #344054;
      background: #f8fafc;
      font-weight: 900;
    }
    .workflow-flow-scope-count {
      color: #667085;
      font-size: 12px;
      font-weight: 800;
    }
    .workflow-flow-scope-count strong {
      color: #0b7f70;
      font-size: 15px;
    }
    .workflow-flow-connector {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-flow-connector::before,
    .workflow-flow-connector::after {
      content: '';
      position: absolute;
      left: 50%;
      width: 1px;
      height: 15px;
      background: #7ccfc4;
    }
    .workflow-flow-connector::before { top: 0; }
    .workflow-flow-connector::after { bottom: 0; }
    .workflow-flow-connector span {
      z-index: 1;
      padding: 4px 10px;
      border: 1px solid #d0d5dd;
      border-radius: 999px;
      background: #fff;
    }
    .workflow-flow-step .workflow-condition-rows {
      gap: 10px;
      padding-left: 38px;
    }
    .workflow-flow-step .workflow-condition-row {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .workflow-control-label {
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-flow-step .workflow-control-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .workflow-any-condition-shell {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }
    .workflow-any-condition-letter {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d0d5dd;
      border-radius: 50%;
      color: #344054;
      background: #fff;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-condition-or {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-left: 38px;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-condition-or::before,
    .workflow-condition-or::after {
      content: '';
      height: 1px;
      flex: 1;
      background: #d0d5dd;
    }
    .workflow-condition-remote-hint,
    .workflow-preview-remote-hint {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid #fedf89;
      border-radius: 7px;
      color: #b54708;
      background: #fffaeb;
      font-size: 12px;
      font-weight: 800;
    }
    .workflow-condition-remote-hint {
      margin-left: 38px;
    }
    .workflow-flow-add-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 14px;
    }
    .workflow-flow-add-actions button {
      min-width: 142px;
      border-style: dashed;
      color: #0b7f70;
      background: #fff;
      box-shadow: none;
      font-weight: 900;
    }
    .workflow-flow-side {
      display: grid;
      gap: 18px;
      min-width: 0;
      padding: 18px;
      border: 1px solid #d6e4e1;
      border-radius: 9px;
      background: #fff;
    }
    .workflow-live-preview {
      display: grid;
      gap: 12px;
    }
    .workflow-live-preview h3,
    .workflow-flow-actions h3 {
      margin: 0;
      color: #101828;
      font-size: 15px;
      font-weight: 900;
    }
    .workflow-live-preview-copy {
      margin: 0;
      color: #344054;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.8;
    }
    .workflow-live-preview-copy strong {
      color: #0b7f70;
    }
    .workflow-live-preview h4 {
      margin: 4px 0 0;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-preview-order {
      display: grid;
      gap: 8px;
    }
    .workflow-preview-order-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid #d6e4e1;
      border-radius: 7px;
      color: #344054;
      background: #fbfefe;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-preview-order-row strong {
      color: #0b7f70;
      font-size: 14px;
    }
    .workflow-flow-actions {
      display: grid;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid #e5e7eb;
    }
    .workflow-flow-actions .workflow-action-grid {
      grid-template-columns: 1fr;
    }
    .workflow-flow-footer {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      padding: 14px 0 0;
      border-top: 1px solid #e5e7eb;
    }
    .workflow-flow-footer button:first-child {
      color: #fff;
      border-color: #0b7f70;
      background: #0b7f70;
    }
    .after-list-view.workflow-settings-open > .aftersale-search-row,
    .after-list-view.workflow-settings-open > .aftersale-filters,
    .after-list-view.workflow-settings-open > .aftersale-toolbar,
    .after-list-view.workflow-settings-open > .after-tabs,
    .after-list-view.workflow-settings-open > .after-list-meta,
    .after-list-view.workflow-settings-open > .after-table-wrap,
    .after-list-view.workflow-settings-open > .after-table-scrollbar,
    .after-list-view.workflow-settings-open > .after-pagination {
      display: none !important;
    }
    .after-list-view.workflow-settings-open {
      display: block;
      padding-bottom: 12px;
    }
    .after-list-view.workflow-settings-open .aftersale-head {
      margin-bottom: 16px;
    }
    .after-list-view.workflow-settings-open .aftersale-workflow-settings {
      margin: 0;
      border: 1px solid #dfe9e7;
      border-top: 1px solid #dfe9e7;
      border-radius: 12px;
      background: #f7faf9;
      box-shadow: 0 16px 38px rgba(15, 80, 69, .07);
    }
    .after-list-view.workflow-settings-open .aftersale-workflow-head {
      display: none;
    }
    .after-list-view.workflow-settings-open .aftersale-workflow-grid {
      margin: 0;
      border: 0;
      border-radius: 0;
      overflow: visible;
      background: transparent;
    }
    .workflow-studio {
      display: grid;
      grid-template-columns: 286px minmax(0, 1fr);
      min-height: 690px;
      background: #f7faf9;
    }
    .workflow-library-panel {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      border-right: 1px solid #e1e9e7;
      background: #fff;
    }
    .workflow-library-head {
      display: grid;
      gap: 12px;
      padding: 18px 14px 14px;
      border-bottom: 1px solid #edf1f0;
    }
    .workflow-library-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #102a2e;
      font-size: 14px;
      font-weight: 900;
    }
    .workflow-library-title span {
      color: #7a8a94;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-library-new {
      width: 100%;
      height: 40px;
      color: #fff;
      border-color: #078b7d;
      background: #078b7d;
      box-shadow: none;
      font-size: 13px;
      font-weight: 900;
    }
    .workflow-library-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 14px;
      color: #7a8a94;
      font-size: 12px;
      font-weight: 800;
    }
    .workflow-library-refresh {
      height: 28px;
      min-width: 52px;
      padding: 0 8px;
      color: #667085;
      border-color: #e0e7e5;
      background: #fff;
      box-shadow: none;
      font-size: 11px;
      font-weight: 900;
    }
    .workflow-library-list {
      min-height: 0;
      overflow: auto;
      padding: 0 8px 10px;
      scrollbar-width: thin;
    }
    .workflow-library-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-height: 70px;
      margin-bottom: 4px;
      padding: 10px 9px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
    }
    .workflow-library-item.is-active {
      border-color: #b9ddd7;
      background: #ecf8f6;
      box-shadow: inset 3px 0 0 #078b7d;
    }
    .workflow-library-select {
      min-width: 0;
      display: grid;
      gap: 5px;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: #23343b;
      background: transparent;
      box-shadow: none;
      text-align: left;
    }
    .workflow-library-select strong {
      overflow: hidden;
      color: #1d3036;
      font-size: 13px;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workflow-library-select span {
      overflow: hidden;
      color: #7a8a94;
      font-size: 11px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workflow-library-tools {
      display: grid;
      justify-items: end;
      gap: 6px;
    }
    .workflow-library-toggle,
    .workflow-library-delete {
      min-width: 48px;
      height: 26px;
      padding: 0 8px;
      border-radius: 999px;
      box-shadow: none;
      font-size: 10px;
      font-weight: 900;
    }
    .workflow-library-toggle.is-on {
      color: #067568;
      border-color: #a7ded5;
      background: #ddf7f2;
    }
    .workflow-library-toggle.is-off {
      color: #7a8a94;
      border-color: #d8dfe3;
      background: #f4f6f7;
    }
    .workflow-library-delete {
      color: #b42318;
      border-color: transparent;
      background: transparent;
    }
    .workflow-library-foot {
      padding: 12px 14px;
      border-top: 1px solid #edf1f0;
      color: #7a8a94;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-studio-main {
      min-width: 0;
      padding: 0;
      background: #f7faf9;
    }
    .workflow-studio-empty {
      min-height: 690px;
      display: grid;
      place-items: center;
      padding: 32px;
      color: #7a8a94;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }
    .workflow-studio-editor {
      min-width: 0;
      min-height: 690px;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .workflow-studio-rule-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px 15px;
      border-bottom: 1px solid #e1e9e7;
      background: #fff;
    }
    .workflow-studio-rule-title {
      min-width: 0;
      display: grid;
      gap: 7px;
    }
    .workflow-studio-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .workflow-studio-title-row input {
      min-width: 220px;
      width: min(520px, 46vw);
      padding: 0;
      border: 0;
      border-radius: 0;
      color: #102a2e;
      background: transparent;
      box-shadow: none;
      font-size: 18px;
      font-weight: 900;
    }
    .workflow-studio-title-row input:focus {
      box-shadow: inset 0 -1px 0 #078b7d;
    }
    .workflow-studio-rule-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
      color: #82909a;
      font-size: 11px;
      font-weight: 700;
    }
    .workflow-studio-rule-description {
      width: min(720px, 64vw);
      padding: 0;
      border: 0;
      border-radius: 0;
      color: #667085;
      background: transparent;
      box-shadow: none;
      font-size: 12px;
      font-weight: 700;
    }
    .workflow-studio-rule-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .workflow-studio-rule-actions button {
      height: 34px;
      min-width: 92px;
      box-shadow: none;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-studio-rule-actions .danger {
      color: #d92d20;
      border-color: #fecdca;
      background: #fff;
    }
    .workflow-studio-rule-body {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(520px, 1fr) minmax(300px, 35%);
      gap: 16px;
      padding: 16px 20px;
      align-items: start;
      background: #f7faf9;
      box-shadow: none;
    }
    .workflow-studio-builder {
      min-width: 0;
      display: grid;
      gap: 14px;
    }
    .workflow-studio-editor .workflow-rule-editor {
      display: contents;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .workflow-studio-editor .workflow-flow-main {
      gap: 14px;
    }
    .workflow-studio-editor .workflow-flow-connector {
      display: none;
    }
    .workflow-studio-editor .workflow-flow-step {
      padding: 14px;
      border-color: #dfe8e6;
      border-radius: 9px;
      box-shadow: none;
    }
    .workflow-studio-editor .workflow-flow-step-title strong {
      color: #102a2e;
    }
    .workflow-studio-editor .workflow-flow-step-number {
      background: #078b7d;
    }
    .workflow-studio-editor .workflow-flow-side {
      position: sticky;
      top: 8px;
      gap: 14px;
      padding: 14px;
      border-color: #dfe8e6;
      border-radius: 9px;
      box-shadow: none;
    }
    .workflow-result-card {
      display: grid;
      gap: 12px;
    }
    .workflow-result-card h3 {
      margin: 0;
      color: #102a2e;
      font-size: 15px;
      font-weight: 900;
    }
    .workflow-result-summary {
      padding: 12px;
      border: 1px solid #cfe4df;
      border-radius: 8px;
      color: #31545a;
      background: #f1faf8;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.75;
    }
    .workflow-result-summary strong {
      color: #078b7d;
    }
    .workflow-result-list {
      display: grid;
      border: 1px solid #e3e9e8;
      border-radius: 8px;
      overflow: hidden;
    }
    .workflow-result-row {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 11px;
      border-bottom: 1px solid #edf1f0;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-result-row:last-child { border-bottom: 0; }
    .workflow-result-row strong {
      color: #3a5058;
      font-size: 12px;
      text-align: right;
    }
    .workflow-result-warning {
      padding: 10px 11px;
      border: 1px solid #fedf89;
      border-radius: 8px;
      color: #b54708;
      background: #fffaeb;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
    }
    .workflow-result-preview-btn {
      width: 100%;
      height: 36px;
      color: #078b7d;
      border-color: #8dd0c6;
      background: #fff;
      box-shadow: none;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-result-preview-btn:disabled {
      cursor: not-allowed;
      opacity: .55;
    }
    .workflow-run-history {
      display: grid;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid #e5e7eb;
    }
    .workflow-run-history-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #102a2e;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-run-history-head button {
      height: 26px;
      min-width: 48px;
      padding: 0 8px;
      box-shadow: none;
      font-size: 10px;
    }
    .workflow-run-history-list {
      max-height: 220px;
      overflow: auto;
      display: grid;
      gap: 7px;
    }
    .workflow-run-history-item {
      display: grid;
      gap: 3px;
      padding: 8px 9px;
      border: 1px solid #e3e9e8;
      border-radius: 7px;
      color: #667085;
      background: #fff;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.45;
    }
    .workflow-run-history-item strong {
      color: #344054;
      font-size: 11px;
    }
    .workflow-studio-savebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 20px;
      border-top: 1px solid #e1e9e7;
      background: #fff;
      box-shadow: 0 -8px 22px rgba(15, 80, 69, .04);
    }
    .workflow-studio-save-state {
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }
    .workflow-studio-save-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .workflow-studio-save-actions button {
      min-width: 128px;
      height: 38px;
      box-shadow: none;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-studio-save-actions .primary {
      color: #fff;
      border-color: #078b7d;
      background: #078b7d;
    }
    .after-list-view.workflow-settings-open #aftersaleWorkflowSettingsStatus {
      min-height: 0;
      margin: 0;
      padding: 0 20px 12px;
      border: 0;
      background: #fff;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }
    @media (max-width: 1500px) {
      .workflow-studio { grid-template-columns: 250px minmax(0, 1fr); }
      .workflow-studio-rule-body { grid-template-columns: minmax(460px, 1fr) minmax(280px, 34%); }
      .workflow-condition-row { grid-template-columns: minmax(118px, .9fr) minmax(94px, .65fr) minmax(150px, 1.2fr) 58px; }
      .workflow-condition-row.is-external-procurement { grid-template-columns: minmax(110px, .8fr) minmax(120px, .85fr) minmax(92px, .6fr) minmax(140px, 1fr) 58px; }
    }
    @media (max-width: 1180px) {
      .workflow-studio { grid-template-columns: 220px minmax(0, 1fr); }
      .workflow-studio-rule-body { grid-template-columns: 1fr; }
      .workflow-studio-editor .workflow-flow-side { position: static; }
      .workflow-studio-rule-header { align-items: stretch; flex-direction: column; }
      .workflow-studio-rule-actions { justify-content: flex-start; }
    }
    .after-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin-bottom: 10px;
    }
    .after-tab-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .after-tab {
      height: 34px;
      border: 0;
      border-radius: 6px;
      padding: 0 14px;
      color: #344054;
      background: transparent;
      box-shadow: none;
      font-weight: 800;
    }
    .after-tab.active {
      color: #0f9f91;
      background: #dcfbf5;
    }
    .after-tab.strong {
      color: #b42318;
      background: #fff1f1;
    }
    .after-tab.badge {
      color: #92400e;
      background: #fffbeb;
    }
    .after-alert-clear {
      height: 30px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 0 10px;
      color: #667085;
      background: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: none;
    }
    .after-alert-clear:hover:not(:disabled) {
      color: #0f766e;
      border-color: #99e7dd;
      background: #f0fdfa;
    }
    .after-alert-clear:disabled {
      cursor: not-allowed;
      opacity: .45;
    }
    .after-list-meta {
      display: none;
      justify-content: space-between;
      align-items: center;
      color: #667085;
      margin: 4px 0 16px;
      gap: 12px;
    }
    .after-list-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-left: auto;
    }
    .after-table-wrap {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius: 6px;
      scrollbar-width: none;
      scroll-padding-bottom: 76px;
    }
    .after-list-view.workflow-settings-open .after-table-wrap {
      overflow-y: visible;
    }
    .after-table-wrap::-webkit-scrollbar {
      display: none;
    }
    .after-table-scrollbar::-webkit-scrollbar {
      height: 10px;
    }
    .after-table-scrollbar::-webkit-scrollbar-thumb {
      background: #c8d0dc;
      border-radius: 999px;
    }
    .after-table-scrollbar::-webkit-scrollbar-track {
      background: #f1f3f6;
      border-radius: 999px;
    }
    .after-table-scrollbar {
      overflow-x: auto;
      overflow-y: hidden;
      height: 22px;
      margin: 14px 0 0;
      padding: 6px 0;
      scrollbar-width: thin;
    }
    .after-table-scrollbar.hidden {
      display: none;
    }
    .after-table-scrollbar-inner {
      height: 1px;
    }
    .after-table {
      min-width: 1360px;
      border-top: 1px solid #edf0f3;
    }
    .after-table-head,
    .after-row-main {
      display: grid;
      grid-template-columns: minmax(280px, 1.456fr) minmax(108px, .581fr) minmax(108px, .551fr) minmax(300px, 1.793fr) minmax(210px, 1.119fr) minmax(185px, .979fr) minmax(105px, .517fr);
      align-items: stretch;
    }
    .after-table-head {
      position: sticky;
      top: 0;
      z-index: 5;
      min-height: 44px;
      height: 44px;
      align-items: center;
      color: #667085;
      background: #f7f8fa;
      font-weight: 900;
      box-shadow: 0 1px 0 #edf0f3;
    }
    .after-table-head > div {
      padding: 0 12px;
      line-height: 1.2;
    }
    .after-table-status-filter {
      display: grid;
      gap: 6px;
      align-content: start;
    }
    .after-table-status-filter span {
      line-height: 1.2;
    }
    .after-table-status-filter select {
      width: 100%;
      height: 28px;
      min-height: 28px;
      padding: 0 24px 0 8px;
      border: 1px solid #d9e1ea;
      border-radius: 6px;
      background: #fff;
      color: #344054;
      font-size: 12px;
      font-weight: 700;
      outline: none;
      box-shadow: none;
    }
    .after-row-card {
      border-bottom: 1px solid #e8ebef;
      background: #fff;
    }
    .after-row-card.alert-strong { box-shadow: inset 4px 0 0 #ef4444; }
    .after-row-card.alert-badge { box-shadow: inset 4px 0 0 #f59e0b; }
    .after-row-card.alert-none { opacity: 1; }
    .after-row-strip {
      display: flex;
      gap: 28px;
      align-items: center;
      min-height: 46px;
      padding: 0 18px;
      color: #8a95a3;
      background: #f8f8f9;
      font-weight: 700;
    }
    .after-row-main { min-height: 146px; }
    .after-cell {
      min-width: 0;
      padding: 14px 12px;
      color: #344054;
      border-left: 1px solid #f0f2f4;
    }
    .after-cell:first-child { border-left: 0; }
    .after-work-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      color: #0f766e;
      background: #dcfbf5;
      font-size: 12px;
      font-weight: 900;
    }
    .after-work-pill.strong { color: #b42318; background: #fff1f1; }
    .after-work-pill.badge { color: #92400e; background: #fffbeb; }
    .after-process-pill {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      color: #155eef;
      background: #eaf1ff;
      font-size: 12px;
      font-weight: 900;
    }
    .after-process-pill.auto {
      color: #047857;
      background: #dff8eb;
    }
    .after-process-pill.manual {
      color: #344054;
      background: #eef1f5;
    }
    .after-next-action,
    .after-risk-line {
      display: block;
      margin-top: 8px;
      color: #667085;
      line-height: 1.45;
      font-size: 12px;
      font-weight: 800;
    }
    .after-risk-line { color: #b42318; }
    .after-copy {
      min-width: 0;
      height: 24px;
      padding: 0 8px;
      border: 0;
      box-shadow: none;
      color: #5b73a8;
      background: rgba(91,115,168,.08);
      font-size: 12px;
      font-weight: 900;
    }
    .after-product-cell { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
    .after-product-cell img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 6px;
      background: #eef1f5;
    }
    .after-product-empty {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      color: #98a2b3;
      background: #eef1f5;
      font-weight: 900;
    }
    .after-product-title {
      max-width: 100%;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .after-product-sub { margin-top: 6px; color: #667085; line-height: 1.5; }
    .after-product-code { margin-top: 8px; color: #667085; font-weight: 700; }
    .after-product-ids { display: grid; gap: 5px; margin-top: 10px; color: #667085; font-size: 12px; }
    .after-product-id-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .after-product-id-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .after-money strong { color: #344054; font-size: 14px; }
    .after-money span, .after-muted { display: block; margin-top: 7px; color: #8a95a3; }
    .after-buyer-info strong { display: block; color: #344054; font-weight: 900; }
    .after-buyer-info span { display: block; margin-top: 6px; color: #667085; line-height: 1.45; }
    .after-buyer-address { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .after-order-notes { display: grid; gap: 8px; align-content: start; min-width: 0; }
    .after-order-note-line { min-width: 0; color: #667085; line-height: 1.45; }
    .after-order-note-line strong { display: inline; color: #344054; font-weight: 900; }
    .after-order-note-line span {
      display: inline-block;
      max-width: 100%;
      vertical-align: bottom;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .after-note-preview { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal !important; overflow: hidden; }
    .after-note-edit-link { width: fit-content; margin-top: 3px; color: #0f8f80; font-size: 12px; }
    .after-countdown { color: #ff4d4f; }
    .after-status-danger { display: block; margin-top: 8px; color: #ff5b6b; font-weight: 800; line-height: 1.5; }
    .after-logistics-cell { position: relative; overflow: visible; }
    .after-logistics-lines { display: grid; gap: 12px; }
    .after-logistics-line { position: relative; display: inline-grid; gap: 7px; justify-self: start; }
    .after-logistics-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
    .after-logistics-trigger strong { color: #344054; }
    .after-logistics-jump { display: inline-block; width: fit-content; color: inherit; text-decoration: none; }
    .after-logistics-jump:hover strong,
    .after-logistics-jump:focus strong { color: #5b73a8; }
    .after-logistics-arrow { color: #8a95a3; font-size: 18px; line-height: 1; }
    .after-logistics-waybill {
      display: inline-block;
      width: fit-content;
      margin-top: 0;
      cursor: default;
      color: #8a95a3;
    }
    .after-logistics-waybill:hover,
    .after-logistics-waybill:focus { color: #5b73a8; }
    .after-actions-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 8px;
    }
    .after-link {
      height: auto;
      min-height: 24px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #5b73a8;
      font-weight: 900;
    }
    .after-actions-list .after-link { color: #087f71; text-align: left; }
    .after-actions-list .after-link:disabled { color: #98a2b3; cursor: not-allowed; }
    .after-archive-action {
      min-height: 30px;
      padding: 0 12px;
      border: 1px solid #b9dfd8;
      border-radius: 6px;
      color: #087f71;
      background: #fff;
    }
    .after-external-summary { display: grid; gap: 8px; align-content: start; color: #667085; font-size: 12px; line-height: 1.35; }
    .after-external-summary div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
    .after-external-summary span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; }
    .after-buyer-logistics { display: grid; grid-template-columns: minmax(90px, .72fr) minmax(150px, 1.25fr); gap: 12px; }
    .after-buyer-logistics .after-buyer-info,
    .after-buyer-logistics .after-logistics-cell { padding: 0; border: 0; }
    .after-buyer-logistics .after-logistics-lines { gap: 10px; }
    .after-buyer-logistics .after-logistics-line { gap: 3px; }
    .after-note-modal {
      width: min(390px, calc(100vw - 32px));
      height: min(500px, calc(100vh - 40px));
      max-height: min(520px, calc(100vh - 40px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 20px 56px rgba(15, 23, 42, .22);
      overflow: hidden;
    }
    .after-note-modal .after-head { min-height: 52px; padding: 0 18px; }
    .after-note-modal .after-head strong { font-size: 15px; }
    .after-note-modal .after-close { width: 30px; height: 30px; }
    .after-note-modal-body { display: grid; gap: 14px; padding: 14px 18px; overflow-y: auto; }
    .after-note-modal-field { position: relative; display: grid; gap: 7px; }
    .after-note-modal-field label { color: #101828; font-size: 13px; font-weight: 900; }
    .after-note-modal-field label span { margin-left: 6px; color: #98a2b3; font-size: 11px; font-weight: 700; }
    .after-note-modal-field textarea { min-height: 112px; padding: 10px 12px 28px; resize: none; border-radius: 6px; font-size: 12px; line-height: 1.55; }
    .after-note-modal-field textarea[readonly] { color: #667085; background: #f8fafc; }
    .after-note-count { position: absolute; right: 10px; bottom: 8px; color: #98a2b3; font-size: 11px; font-weight: 700; pointer-events: none; }
    .after-note-modal-status { min-height: 18px; color: #667085; font-size: 11px; }
    .after-note-modal-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 18px; border-top: 1px solid #e8edf0; background: #fbfcfd; }
    .after-note-modal-footer button { width: 100%; min-width: 0; height: 36px; border-radius: 6px; }
    .aftersale-empty {
      padding: 72px 20px;
      text-align: center;
      color: #667085;
      border: 1px dashed #d0d5dd;
      border-radius: 8px;
      background: #fbfcfd;
    }
    .aftersale-pagination {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 34px;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 0 10px;
      color: #667085;
      font-size: 13px;
      font-weight: 800;
      background: linear-gradient(180deg, rgba(255, 255, 255, .72), #fff 40%);
      pointer-events: none;
    }
    .aftersale-pagination > * {
      pointer-events: auto;
    }
    .aftersale-pagination button {
      height: 32px;
      min-width: 72px;
      box-shadow: none;
    }
    .aftersale-pagination button:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }
    .after-detail-page {
      display: grid;
      gap: 18px;
      background: #f5f5f6;
      margin: -22px -24px -28px;
      padding: 28px 36px 42px;
      box-sizing: border-box;
      min-height: 0;
      height: calc(100% + 50px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
    }
    .after-breadcrumb { color: #98a2b3; font-size: 18px; font-weight: 800; }
    .after-breadcrumb strong { color: #344054; }
    .after-detail-status,
    .after-detail-card {
      background: #fff;
      border-radius: 8px;
      padding: 26px 30px;
    }
    .after-detail-status {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(420px, auto);
      gap: 32px;
      align-items: start;
      position: relative;
    }
    .after-detail-status.alert-strong { border-left: 5px solid #ef4444; }
    .after-detail-status.alert-badge { border-left: 5px solid #f59e0b; }
    .after-detail-status h3 { margin: 0 0 10px; font-size: 20px; }
    .after-detail-status-main {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .after-detail-work-panel {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      color: #344054;
      font-weight: 800;
      line-height: 1.45;
    }
    .after-detail-actions-shell {
      position: relative;
      display: grid;
      justify-items: end;
      gap: 10px;
      min-width: min(760px, 100%);
    }
    .after-detail-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
      max-width: 860px;
    }
    .after-detail-actions button { min-width: 112px; height: 40px; box-shadow: none; border-color: #edf0f3; background: #f7f8fa; font-weight: 900; border-radius: 8px; }
    .after-detail-actions button.primary { background: #10b8aa; border-color: #10b8aa; }
    .after-action-popover {
      position: absolute;
      top: 50px;
      right: 0;
      z-index: 50;
      width: min(560px, calc(100vw - 96px));
      max-height: min(720px, calc(100vh - 140px));
      overflow-y: auto;
      padding: 18px 20px 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 18px 48px rgba(16, 24, 40, 0.14);
      color: #344054;
      text-align: left;
    }
    .after-action-popover::before {
      content: "";
      position: absolute;
      top: -8px;
      right: 86px;
      width: 14px;
      height: 14px;
      background: #fff;
      border-left: 1px solid #e5e7eb;
      border-top: 1px solid #e5e7eb;
      transform: rotate(45deg);
    }
    .after-action-popover-title {
      margin: 0 0 14px;
      color: #101828;
      font-size: 15px;
      font-weight: 900;
    }
    .after-action-popover-tip {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 8px;
      margin-bottom: 14px;
      color: #344054;
      line-height: 1.55;
      font-weight: 800;
    }
    .after-action-popover-tip span:first-child {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: 1px solid #98a2b3;
      border-radius: 50%;
      color: #667085;
      font-size: 12px;
    }
    .after-action-popover-row {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 10px;
      margin: 10px 0;
      line-height: 1.55;
    }
    .after-action-popover-row span:first-child { color: #667085; }
    .after-action-popover-row strong {
      color: #101828;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .after-action-address {
      display: grid;
      gap: 7px;
      min-width: 0;
    }
    .after-action-address select {
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 1px solid #d0d5dd;
      border-radius: 7px;
      background: #fff;
      color: #101828;
    }
    .after-action-address-tools {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #667085;
      font-size: 12px;
      line-height: 1.4;
    }
    .after-action-address-tools span { min-width: 0; word-break: break-word; }
    .after-action-address-buttons {
      display: flex;
      flex: 0 0 auto;
      gap: 6px;
    }
    .after-action-address-tools button {
      flex: 0 0 auto;
      height: 28px;
      padding: 0 8px;
      box-shadow: none;
    }
    .after-action-new-address {
      margin-top: 2px;
      border-radius: 8px;
    }
    .after-action-new-address textarea,
    .after-action-new-address input { width: 100%; min-width: 0; }
    .after-action-new-address textarea { min-height: 72px; }
    .after-action-new-address .parse-row {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
    }
    .after-action-new-address button { min-height: 34px; box-shadow: none; }
    .after-action-popover-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }
    .after-action-popover-buttons button {
      min-width: 96px;
      height: 36px;
      box-shadow: none;
    }
    .after-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
      gap: 18px;
      align-items: start;
    }
    .after-detail-stack { display: grid; gap: 18px; }
    .after-detail-card h3 { margin: 0 0 22px; font-size: 18px; }
    .after-info-rows { display: grid; gap: 14px; }
    .after-info-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; color: #344054; }
    .after-info-row span:first-child { color: #667085; }
    .after-detail-product {
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border-radius: 6px;
      background: #f7f8fa;
    }
    .after-detail-product img, .after-detail-product .after-product-empty { width: 62px; height: 62px; border-radius: 4px; }
    .after-logistics-block {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      background: #f7f8fa;
    }
    .after-logistics-block strong.ok { color: #10b981; }
    .after-history {
      display: grid;
      gap: 0;
      border-left: 1px solid #e5e7eb;
      margin-left: 7px;
      padding-left: 22px;
    }
    .after-history-item {
      position: relative;
      padding: 0 0 24px;
      color: #667085;
      line-height: 1.55;
    }
    .after-history-item::before {
      content: "";
      position: absolute;
      left: -27px;
      top: 5px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .after-history-item strong { display: block; color: #344054; margin-bottom: 4px; }
    .after-history-meta {
      color: #667085;
      font-size: 13px;
      margin-bottom: 10px;
    }
    .after-history-extra {
      margin-top: 10px;
      padding: 14px 16px;
      border-radius: 8px;
      background: #f5f6f8;
      color: #344054;
    }
    .after-history-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 12px;
      margin: 0 0 8px;
      align-items: start;
    }
    .after-history-row:last-child { margin-bottom: 0; }
    .after-history-label {
      color: #667085;
      white-space: nowrap;
    }
    .after-history-value {
      min-width: 0;
      color: #101828;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .after-history-images {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .after-history-images img {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      background: #fff;
    }
    .after-meta-list {
      display: grid;
      gap: 12px;
      color: #344054;
    }
    .after-meta-empty {
      padding: 16px;
      border: 1px dashed #d0d5dd;
      border-radius: 6px;
      color: #667085;
      font-weight: 800;
      text-align: center;
    }
    .after-note-input {
      width: 100%;
      min-height: 84px;
      margin-top: 14px;
      resize: vertical;
      box-sizing: border-box;
    }
    .after-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
    }
    .after-inline-actions button {
      min-width: 88px;
      height: 36px;
      box-shadow: none;
      font-weight: 900;
    }
    .after-note-item,
    .after-log-item,
    .after-pending-card,
    .workflow-rule-card {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      background: #f9fafb;
    }
    .after-note-item strong,
    .after-log-item strong,
    .after-pending-card strong,
    .workflow-rule-card strong {
      color: #101828;
    }
    .after-log-item.failed { border-color: #fecaca; background: #fff7f7; }
    .after-log-item.success { border-color: #bbf7d0; background: #f0fdf4; }
    .after-pending-card.pending { border-color: #fde68a; background: #fffbeb; }
    .after-pending-card.completed { border-color: #bbf7d0; background: #f0fdf4; }
    .workflow-rule-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }
    .workflow-rule-switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
    }
    .workflow-rule-params {
      display: grid;
      gap: 10px;
    }
    .workflow-rule-param {
      display: grid;
      gap: 6px;
      color: #667085;
      font-size: 12px;
      font-weight: 900;
    }
    .workflow-rule-param input,
    .workflow-rule-param textarea {
      width: 100%;
      box-sizing: border-box;
      font-size: 13px;
    }
    .workflow-rule-param textarea {
      min-height: 70px;
      resize: vertical;
    }
    .after-sim-result {
      color: #667085;
      font-size: 13px;
      font-weight: 800;
    }
    .aftersale-workflow-settings .after-sim-result {
      padding: 12px 16px 16px;
    }
    .after-detail-back {
      width: fit-content;
      border: 0;
      box-shadow: none;
      background: transparent;
      color: #5b73a8;
      padding: 0;
      font-weight: 900;
    }
    .conversation {
      width: 100%;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      min-height: 94px;
      margin: 0 0 10px;
      padding: 14px 13px;
      border: 1px solid transparent;
      border-radius: 18px 18px 8px 18px;
      box-shadow: none;
      text-align: left;
      background: #fff;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .conversation:hover { border-color: #d7e9e4; background: #f8fbfa; transform: translateY(-1px); }
    .conversation.active { border-color: #b8dfd5; background: #dff3ed; box-shadow: inset 4px 0 0 var(--brand), 0 8px 20px rgba(14, 123, 109, .08); }
    .conversation.unread { background: #eef9f6; }
    .conversation.marked .avatar {
      background: #f59e0b;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
    }
    .marked-badge {
      color: #9a4d08 !important;
      background: #fff5df !important;
      border-color: #f4c98f !important;
      font-weight: 900 !important;
    }
    .conversation-virtual-spacer { flex: 0 0 auto; pointer-events: none; }
    .conversation-list.virtualized { padding-top: 0; }
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: #def3ff;
      color: #0b6095;
      font-size: 14px;
      font-weight: 900;
    }
    .conv-main { min-width: 0; }
    .conv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; min-width: 0; align-items: start; }
    .conv-top strong { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; font-size: 15px; line-height: 1.3; font-weight: 900; letter-spacing: -.01em; }
    .conv-time { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; color: var(--subtle); font-size: 12px; white-space: nowrap; }
    .conv-top .unread-badge { grid-column: 2; grid-row: 1; justify-self: end; }
    .conv-user-id { grid-column: 1 / -1; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; color: var(--muted); font-size: 11px; }
    .conv-preview { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .badges, .conv-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
    .badge, .conv-tags span, .handoff-inline-set, .handoff-inline-clear {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }
    .session-badge {
      color: var(--red);
      background: var(--red-soft);
      border-color: #ffb4b4;
      font-weight: 800;
    }
    #handoffList .pending-badge {
      color: var(--red);
      background: var(--red-soft);
      border-color: #ffb4b4;
      font-weight: 900;
      box-shadow: 0 4px 12px rgba(239, 68, 68, .18);
    }
    #handoffList .conversation {
      height: 104px;
      min-height: 104px;
      margin-bottom: 12px;
      padding: 12px 12px;
      align-items: center;
      overflow: hidden;
    }
    #handoffList .avatar {
      width: 44px;
      height: 44px;
    }
    #handoffList .conv-main {
      display: grid;
      grid-template-rows: 22px 18px 24px;
      gap: 4px;
      min-height: 0;
      overflow: hidden;
    }
    #handoffList .conv-top {
      align-items: center;
      gap: 2px 8px;
      overflow: hidden;
    }
    #handoffList .conv-top strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      line-height: 22px;
    }
    #handoffList .conv-user-id,
    #handoffList .conv-preview {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #handoffList .conv-user-id {
      line-height: 14px;
    }
    #handoffList .conv-preview {
      margin-top: 0;
      line-height: 18px;
    }
    #handoffList .conv-tags {
      flex-wrap: nowrap;
      gap: 5px;
      margin-top: 0;
      overflow: hidden;
    }
    #handoffList .conv-tags span {
      flex: 0 0 auto;
      min-height: 22px;
      padding: 1px 8px;
      white-space: nowrap;
    }
    .handoff-inline-set, .handoff-inline-clear {
      color: var(--brand);
      background: var(--brand-soft);
      border-color: #a8ded4;
      font-weight: 800;
    }
    .tab-badge, .unread-badge {
      min-width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      padding: 0 5px;
      color: #fff;
      background: var(--red);
      font-size: 11px;
      font-weight: 900;
    }

    .chat {
      position: relative;
      display: grid;
      grid-template-rows: 72px minmax(0, 1fr) var(--composer-h);
      background: var(--chat-bg);
      border-color: #d7e2de;
    }
    .chat.composer-compact { grid-template-rows: 72px minmax(0, 1fr) 132px; }
    .chat-head {
      min-width: 0;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 22px;
      background: #fff;
      border-bottom: 0;
      border-radius: 22px 22px 14px 14px;
      box-shadow: 0 8px 20px rgba(15,23,42,.025);
      z-index: 2;
    }
    .chat-title { min-width: 0; display: flex; align-items: center; gap: 14px; }
    .chat-title strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 900; }
    .chat-title span { display: block; min-width: 0; margin-top: 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .chat-tools { display: flex; align-items: center; gap: 10px; }
    .previous-conversation-btn { color: var(--brand); background: #fff; border-color: #b7d9d2; box-shadow: none; font-weight: 800; }
    .previous-conversation-btn:not(:disabled):hover { background: var(--brand-soft); border-color: #8fc9be; }
    .handoff-clear-btn { color: var(--brand); background: var(--brand-soft); border-color: #a8ded4; box-shadow: none; font-weight: 800; }
    .notice.chat-action-status {
      position: absolute;
      left: 50%;
      top: calc(var(--topbar-h) + 14px);
      transform: translateX(-50%);
      z-index: 30;
      max-width: min(520px, 70vw);
      box-shadow: var(--shadow-soft);
    }
    .callback-config-alert {
      position: absolute;
      top: 92px;
      left: 60%;
      z-index: 28;
      width: min(420px, calc(100% - 32px));
      display: grid;
      grid-template-columns: 40px minmax(0,1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 15px 16px;
      transform: translateX(-50%);
      border: 1px solid #f4b5ad;
      border-radius: 14px;
      background: rgba(255, 250, 248, .98);
      box-shadow: 0 18px 46px rgba(120, 43, 35, .18);
      backdrop-filter: blur(10px);
    }
    .callback-config-alert-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #b42318;
      background: #fee4e2;
      font-size: 22px;
      font-weight: 900;
    }
    .callback-config-alert-content { min-width: 0; display: grid; gap: 5px; }
    .callback-config-alert-content strong { color: #7a271a; font-size: 14px; }
    .callback-config-alert-content p { margin: 0; color: #69413a; font-size: 12px; line-height: 1.55; }
    .callback-config-alert-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .callback-config-alert-actions button { height: 32px; padding: 0 11px; box-shadow: none; font-size: 12px; }
    .callback-config-alert-actions .primary { border-color: #b42318; background: #b42318; }
    .callback-config-alert-close { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #8a5c55; font-size: 20px; }
    .performance-bar, .composer-resize { display: none !important; }
    .message-area {
      min-width: 0;
      min-height: 0;
      overflow: auto;
      padding: 30px clamp(24px, 3.5vw, 58px) 28px;
      background: var(--chat-bg);
      box-shadow: inset 1px 0 0 rgba(209, 221, 217, .52), inset -1px 0 0 rgba(209, 221, 217, .52);
    }
    .empty, .chat-empty-state {
      height: 100%;
      min-height: 220px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      padding: 24px;
    }
    .empty-card, .chat-empty-inner { max-width: 380px; display: grid; justify-items: center; gap: 8px; }
    .empty-card { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,.72); }
    .chat-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #dff3ef; color: var(--brand); font-weight: 900; }
    .load-earlier-messages {
      display: block;
      min-width: 150px;
      height: 36px;
      margin: 0 auto 22px;
      color: var(--brand);
      background: rgba(255,255,255,.78);
      border-color: #bfe2dc;
      box-shadow: none;
      font-weight: 900;
    }
    .load-earlier-messages:disabled { opacity: .65; }

    .msg-row { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 28px; }
    .msg-row.outbound { justify-content: flex-end; }
    .msg-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px 12px 5px 12px; background: #dfe8ef; color: #234; font-weight: 900; box-shadow: 0 5px 12px rgba(42, 68, 62, .08); }
    .msg-row.ai .msg-avatar, .msg-row.outbound .msg-avatar { color: #17533b; background: #bfe8a5; }
    .msg-row.manual .msg-avatar { color: var(--manual-text); background: #d8eaff; box-shadow: 0 0 0 1px #b9d4f4, 0 5px 14px rgba(78, 127, 197, .13); }
    .bubble {
      position: relative;
      max-width: min(620px, 58vw);
      padding: 14px 18px;
      border: 1px solid #e4e9e7;
      border-radius: 18px 18px 18px 7px;
      background: #fff;
      color: #111827;
      line-height: 1.62;
      word-break: break-word;
      box-shadow: 0 8px 24px rgba(34, 61, 55, .07);
    }
    .msg-row.outbound .bubble { border-radius: 18px 18px 7px 18px; background: var(--ai); border-color: #b5df9f; }
    .msg-row.manual .bubble { background: var(--manual); border-color: #bdd5f2; border-right: 3px solid var(--manual-accent); color: #172f4f; box-shadow: 0 10px 26px rgba(78, 127, 197, .10); }
    .msg-row.manual .bubble-meta { color: var(--manual-text); }
    .bubble-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 8px; color: #667085; font-size: 11px; font-weight: 700; }
    .message-send-status { margin-top: 8px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #667085; font-size: 12px; }
    .message-send-status.sending { color: #0f766e; }
    .message-send-status.failed { color: #b42318; }
    .message-send-status.sent { color: #15803d; }
    .retry-send {
      height: 26px;
      min-width: 56px;
      padding: 0 8px;
      border-radius: 8px;
      border-color: #fecaca;
      color: #b42318;
      background: #fff1f2;
      box-shadow: none;
      font-size: 12px;
    }
    .new-message-jump {
      position: absolute;
      left: 50%;
      bottom: calc(var(--composer-h) + 18px);
      z-index: 18;
      transform: translateX(-50%);
      height: 34px;
      padding: 0 14px;
      border-color: rgba(13, 138, 117, .25);
      border-radius: 999px;
      background: #e7fbf5;
      color: #075f55;
      box-shadow: var(--shadow);
      font-weight: 900;
    }

    .chat-composer {
      min-width: 0;
      min-height: 0;
      height: var(--composer-h);
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: 56px 40px;
      align-content: center;
      gap: 8px;
      padding: 12px 22px;
      background: #f4f7f6;
      border-top: 1px solid #d6e1dd;
      position: relative;
      z-index: 24;
    }
    #replyText {
      grid-column: 1 / -1;
      width: 100%;
      height: 56px;
      min-height: 56px;
      max-height: 56px;
      margin: 0;
      padding: 16px 20px;
      resize: none;
      overflow-y: auto;
      border: 1px solid #dbe5e2;
      border-radius: 16px 16px 8px 16px;
      box-shadow: 0 8px 24px rgba(30, 58, 51, .06);
      background: #fff;
      color: var(--text);
      line-height: 1.5;
    }
    #replyText::placeholder { color: #788480; font-weight: 600; }
    .reply-media-preview {
      position: absolute;
      left: 22px;
      bottom: calc(100% + 8px);
      z-index: 22;
      width: min(520px, calc(100% - 44px));
      min-width: 0;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid #b8d8d3;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .reply-media-preview.hidden { display: none; }
    .reply-media-thumb {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 10px;
      background: #eef8f5;
      color: var(--brand-deep);
      font-size: 13px;
      font-weight: 900;
    }
    .reply-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .reply-media-info { min-width: 0; }
    .reply-media-info strong,
    .reply-media-info span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .reply-media-info strong { color: var(--text); font-size: 14px; font-weight: 900; }
    .reply-media-info span { margin-top: 5px; color: var(--muted); font-size: 12px; }
    .reply-media-remove {
      width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 50%;
      background: #fff;
      color: #667085;
      box-shadow: none;
      font-size: 18px;
    }
    .composer-actions {
      grid-column: 1 / -1;
      min-width: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 4px 2px 0;
      white-space: nowrap;
      scrollbar-width: none;
    }
    .composer-actions::-webkit-scrollbar { height: 0; }
    .composer-actions button { flex: 0 0 auto; height: 38px; min-width: 64px; padding: 0 13px; border-radius: 11px 11px 5px 11px; font-weight: 800; box-shadow: var(--shadow-soft); }
    .composer-actions #sendBtn {
      position: sticky;
      right: 0;
      z-index: 2;
      min-width: 70px;
      margin-left: auto;
      color: #fff;
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: -10px 0 12px rgba(238, 248, 246, .92), var(--shadow-soft);
    }
    .chat.composer-compact .chat-composer { padding-inline: 16px; }
    .chat.composer-compact .composer-actions { padding-bottom: 2px; }
    .chat.composer-compact .composer-actions button {
      max-width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat.composer-compact .composer-actions #sendBtn { max-width: none; }
    .quick-reply-bar, .emoji-panel {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: calc(100% + 8px);
      z-index: 20;
      max-height: 220px;
      overflow: auto;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .quick-reply-bar:empty { display: none; }
    .quick-reply-bar button { margin: 3px 6px 3px 0; height: 32px; }
    .quick-reply-search-item {
      display: block;
      width: 100%;
      height: auto;
      min-height: 42px;
      margin: 0 0 6px;
      padding: 8px 10px;
      text-align: left;
      white-space: normal;
      box-shadow: none;
    }
    .quick-reply-bar .quick-reply-search-item {
      box-sizing: border-box;
      height: auto;
      min-height: 56px;
      margin: 0 0 8px;
      line-height: 1.4;
    }
    .quick-reply-search-item strong { display: block; margin-bottom: 2px; }
    .quick-reply-search-item span { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .emoji-panel { display: none; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
    .emoji-panel.open:not(:empty) { display: grid; }
    .emoji-panel button { height: 34px; }

    .wx-card, .product-card, .order-card {
      width: min(360px, 70vw);
      overflow: hidden;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }
    .wx-card-head, .order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #eef0f3; color: #475467; font-size: 12px; }
    .wx-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: #fef3c7; color: #92400e; font-weight: 900; }
    .wx-card-title, .product-card-title, .order-product-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .wx-card-foot, .product-card-shop { padding: 9px 12px; color: var(--muted); border-top: 1px solid #eef0f3; background: #fafafa; }
    .product-card { width: min(420px, 70vw); }
    .product-card-media { overflow: hidden; margin: 14px 14px 0; border-radius: 10px; background: #f2f4f7; }
    .product-card-media > a { display: block; }
    .bubble .product-card-media img { width: 100%; max-width: none; max-height: none; aspect-ratio: 4/3; display: block; object-fit: cover; background: #f2f4f7; border-radius: 0; cursor: zoom-in; }
    .product-card-placeholder { width: auto; aspect-ratio: 4/3; display: grid; place-items: center; margin: 14px 14px 0; border-radius: 10px; background: #f2f4f7; color: #98a2b3; font-size: 40px; font-weight: 900; }
    .product-card-body { padding: 14px; }
    .product-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #101828; font-size: 15px; font-weight: 800; line-height: 1.45; }
    .product-card-price { margin-top: 10px; color: #e5483f; font-size: 26px; font-weight: 900; line-height: 1; }
    .product-card-price small { margin-right: 2px; color: #667085; font-size: 14px; }
    .product-card-price del { margin-left: 6px; color: #9ca3af; font-size: 14px; font-weight: 400; }
    .product-card-price.is-empty { color: #667085; font-size: 13px; font-weight: 700; }
    .product-card-identifiers { display: grid; gap: 3px; margin-top: 10px; color: #667085; font-size: 12px; line-height: 1.45; word-break: break-all; }
    .product-card-skus { margin-top: 12px; border-top: 1px solid #eef0f3; }
    .product-card-sku-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; border-bottom: 1px solid #eef0f3; color: #344054; font-size: 12px; }
    .product-card-sku-row span { min-width: 0; }
    .product-card-sku-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
    .product-card-sku-row span:last-child { flex: 0 0 auto; color: #667085; }
    .product-card-sku-more summary { min-height: 38px; color: #0b7f70; cursor: pointer; font-size: 12px; font-weight: 900; line-height: 38px; list-style-position: inside; }
    .product-card-sku-more summary::marker { color: #0b7f70; }
    .product-card-sku-more[open] summary { border-bottom: 1px solid #eef0f3; }
    .product-card-sku-note { padding: 9px 0; color: #667085; font-size: 12px; }
    .product-card-shop { display: flex; align-items: center; gap: 6px; background: #fafafa; font-size: 12px; }
    .product-card-shop span { color: #98a2b3; }
    .order-product { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 10px; padding: 12px; }
    .order-product img, .order-product-placeholder { width: 66px; height: 66px; border-radius: 8px; object-fit: cover; background: #f2f4f7; }
    .order-product-sub, .order-rows { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .order-rows { display: grid; gap: 5px; padding: 0 12px 10px; }
    .order-rows div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 8px; }
    .order-price { padding: 10px 12px; border-top: 1px solid #eef0f3; color: #e5483f; font-size: 20px; font-weight: 900; }
    .order-aftersale { padding: 10px 12px; border-top: 1px solid #fde7e9; background: #fff7ed; color: #7c2d12; font-size: 12px; }
    .order-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .order-actions button { height: 30px; padding: 0 9px; font-size: 12px; box-shadow: none; }
    .order-card.return-refund-order-card { width: min(580px, calc(58vw - 36px)); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,24,40,.08); }
    .return-refund-order-card .order-card-head { justify-content: flex-start; gap: 28px; padding: 10px 14px; color: #344054; }
    .return-refund-order-card .order-product { grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
    .return-refund-order-card .order-product img,
    .return-refund-order-card .order-product-placeholder { width: 58px; height: 58px; }
    .return-refund-order-card .order-product-title { color: #101828; font-size: 15px; font-weight: 900; line-height: 1.4; }
    .return-refund-order-card .order-product-sub { margin-top: 3px; }
    .return-refund-price { color: #e5483f; font-size: 20px; font-weight: 900; white-space: nowrap; }
    .return-refund-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 14px; border-block: 1px solid #f7dfc4; background: #fff7ed; color: #7c2d12; font-size: 13px; }
    .return-refund-status-bar strong { color: #b45309; font-size: 14px; }
    .return-refund-time { color: #b45309; white-space: nowrap; }
    .return-refund-time strong { margin-left: 5px; color: #e5483f; }
    .return-refund-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); padding: 14px 14px 0; }
    .return-refund-panel { min-width: 0; padding: 0 16px 12px 0; }
    .return-refund-panel + .return-refund-panel { padding: 0 0 12px 18px; border-left: 1px solid #eef0f3; }
    .return-refund-panel h4 { margin: 0 0 9px; color: var(--brand); font-size: 13px; }
    .return-refund-logistics-section + .return-refund-logistics-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f3; }
    .return-refund-info { display: grid; gap: 8px; }
    .return-refund-info-row { display: grid; grid-template-columns: 94px minmax(0,1fr); align-items: start; gap: 8px; color: #344054; font-size: 12px; line-height: 1.5; }
    .return-refund-info-row > span:first-child { color: #667085; }
    .return-refund-info-row strong { min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
    .return-refund-copy { height: auto; min-width: 40px; margin-left: 5px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--brand); font-size: 12px; vertical-align: baseline; }
    .return-refund-actions { position: relative; display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 12px; border-top: 1px solid #eef0f3; }
    .return-refund-actions > button,
    .return-refund-actions summary { min-width: 126px; height: 38px; display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 0 14px; border: 1px solid #8fcfc5; border-radius: 8px; color: var(--brand); background: #fff; box-shadow: none; cursor: pointer; font-size: 13px; font-weight: 900; list-style: none; }
    .return-refund-actions > button.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
    .return-refund-actions summary::-webkit-details-marker { display: none; }
    .return-refund-actions summary::after { content: '\25BE'; margin-left: 8px; }
    .return-refund-more { position: relative; }
    .return-refund-more[open] summary { background: var(--brand-soft); }
    .return-refund-more-menu { position: absolute; z-index: 5; right: 0; bottom: 44px; width: 156px; display: grid; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(16,24,40,.12); }
    .return-refund-more-menu button { height: 34px; padding: 0 12px; border: 0; border-bottom: 1px solid #f2f4f7; border-radius: 0; background: #fff; box-shadow: none; color: #344054; text-align: left; font-size: 12px; }
    .return-refund-more-menu button:last-child { border-bottom: 0; }
    .return-refund-more-menu button:hover { color: var(--brand); background: var(--brand-soft); }
    .return-refund-merchant-note { margin: 0 14px 14px; padding: 9px 11px; border-radius: 8px; background: #f8fafc; color: #475467; font-size: 12px; line-height: 1.5; }
    .return-refund-merchant-note strong { margin-right: 10px; color: #344054; }
    .order-card.editorial-order-card { width: min(580px, calc(58vw - 36px)); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,24,40,.08); }
    .editorial-order-card .order-card-head { justify-content: flex-start; gap: 28px; padding: 10px 14px; color: #344054; }
    .editorial-order-card .order-product { grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
    .editorial-order-card .order-product img,
    .editorial-order-card .order-product-placeholder { width: 58px; height: 58px; }
    .editorial-order-card .order-product-title { color: #101828; font-size: 15px; font-weight: 900; line-height: 1.4; }
    .editorial-order-card .order-product-sub { margin-top: 3px; }
    .editorial-product-meta { min-width: 126px; display: grid; justify-items: end; gap: 10px; }
    .editorial-shipping-badge { max-width: 190px; overflow: hidden; padding: 5px 8px; border-radius: 6px; background: #ecfdf8; color: #087f6d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .editorial-price { color: #e5483f; font-size: 20px; font-weight: 900; white-space: nowrap; }
    .editorial-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 14px; border-block: 1px solid #f7dfc4; background: #fff7ed; color: #7c2d12; font-size: 13px; }
    .editorial-status-bar strong { color: #b45309; font-size: 14px; }
    .editorial-status-time { color: #b45309; white-space: nowrap; }
    .editorial-status-time strong { margin-left: 5px; color: #e5483f; }
    .refund-only-summary { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(110px,.75fr) minmax(100px,.55fr); gap: 12px; padding: 13px 14px; border-bottom: 1px solid #eef0f3; }
    .editorial-summary-item { min-width: 0; display: grid; gap: 5px; color: #344054; font-size: 12px; line-height: 1.45; }
    .editorial-summary-item span { color: #667085; }
    .editorial-summary-item strong { min-width: 0; overflow: hidden; color: #101828; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .editorial-summary-item strong.price { color: #e5483f; font-size: 16px; }
    .editorial-info-stack { display: grid; }
    .editorial-info-line { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #eef0f3; color: #475467; font-size: 12px; line-height: 1.5; }
    .editorial-info-line > strong { flex: 0 0 auto; color: #344054; }
    .editorial-info-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .editorial-info-line .editorial-info-grow { flex: 1 1 auto; }
    .editorial-info-line .editorial-info-accent { color: var(--brand); font-weight: 800; }
    .editorial-info-separator { flex: 0 0 auto; color: #d0d5dd; }
    .editorial-inline-button { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid #8fcfc5; background: #fff; box-shadow: none; color: var(--brand); font-size: 12px; }
    .editorial-order-actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
    .editorial-order-actions > button,
    .editorial-order-actions summary { flex: 1 1 0; min-width: 0; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #8fcfc5; border-radius: 8px; background: #fff; box-shadow: none; color: var(--brand); cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; }
    .editorial-order-actions > button.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
    .editorial-order-actions summary::-webkit-details-marker { display: none; }
    .editorial-order-actions summary::after { content: '\25BE'; margin-left: 7px; }
    .editorial-order-more { position: relative; flex: 1 1 0; min-width: 0; }
    .editorial-order-more[open] summary { background: var(--brand-soft); }
    .editorial-order-more-menu { position: absolute; z-index: 5; right: 0; bottom: 42px; width: 156px; display: grid; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(16,24,40,.12); }
    .editorial-order-more-menu button { height: 34px; padding: 0 12px; border: 0; border-bottom: 1px solid #f2f4f7; border-radius: 0; background: #fff; box-shadow: none; color: #344054; text-align: left; font-size: 12px; }
    .editorial-order-more-menu button:last-child { border-bottom: 0; }
    .editorial-order-more-menu button:hover { color: var(--brand); background: var(--brand-soft); }
    .editorial-order-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 14px 14px; }
    .editorial-order-note { min-width: 0; display: flex; gap: 9px; padding: 9px 11px; border-radius: 8px; background: #f8fafc; color: #475467; font-size: 12px; line-height: 1.5; }
    .editorial-order-note strong { flex: 0 0 auto; color: #344054; }
    .editorial-order-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .media-image, .bubble img { max-width: min(280px, 66vw); max-height: 360px; border-radius: 10px; object-fit: contain; cursor: zoom-in; }
    .video-lazy {
      width: min(340px, 70vw);
      min-height: 128px;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 18px;
      border-radius: 10px;
      background: #101828;
      color: #fff;
    }
    .video-lazy button { height: 34px; border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.12); box-shadow: none; }
    .voice-player {
      display: grid;
      gap: 8px;
      min-width: min(320px, 68vw);
      max-width: 420px;
    }
    .voice-player audio { width: 100%; height: 38px; }
    .voice-player .voice-text { color: #475467; font-size: 12px; line-height: 1.5; word-break: break-word; }
    .voice-player .voice-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #667085; font-size: 12px; }

    .store-page { min-height: 0; height: 100%; overflow: auto; padding: 24px; background: #f5f8fb; }
    .store-layout { max-width: 1480px; margin: 0 auto; display: grid; gap: 18px; }
    .store-layout { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-main { display: grid; gap: 18px; min-width: 0; }
    .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-soft); min-width: 0; }
    .admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
    .admin-stat { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
    .admin-stat span { display: block; color: var(--muted); margin-bottom: 8px; }
    .admin-stat strong { font-size: 28px; }
    .admin-tools { display: grid; grid-template-columns: minmax(240px,1fr) minmax(180px,240px) auto auto; gap: 12px; align-items: end; margin-bottom: 14px; }
    .store-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .field { display: grid; gap: 6px; min-width: 0; }
    .field label, .label { color: #475467; font-size: 13px; font-weight: 800; }
    .field.wide, .store-form-actions, .actions { grid-column: 1 / -1; }
    .store-form-actions, .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .aftersale-popup-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .aftersale-popup-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: #344054; font-size: 13px; font-weight: 800; cursor: pointer; }
    .aftersale-popup-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
    .aftersale-popup-option.disabled { opacity: .55; cursor: not-allowed; }
    .mini-program-token-box { grid-column: 1 / -1; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
    .mini-program-token-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
    .mini-program-token-status { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 999px; color: #667085; background: #eef2f6; font-size: 12px; font-weight: 800; }
    .mini-program-token-status.active { color: #067647; background: #dcfae6; }
    .mini-program-token-status.disabled { color: #b54708; background: #fef0c7; }
    .mini-program-token-value { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; overflow-wrap: anywhere; border: 1px dashed #98a2b3; border-radius: 10px; color: #101828; background: #fff; font: 700 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
    .mini-program-token-meta { color: var(--muted); font-size: 12px; line-height: 1.7; }
    .store-list, .admin-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
    .admin-table th, .admin-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .admin-table th { background: #f8fafc; color: #475467; font-weight: 900; }
    .store-card { padding: 14px; border-bottom: 1px solid var(--line); background: #fff; }
    .store-card.active { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
    .admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; color: var(--muted); }
    .quick-reply-editor { display: grid; gap: 10px; }
    .quick-reply-row { display: grid; grid-template-columns: 180px minmax(0,1fr) auto; gap: 10px; align-items: start; }
    .quick-reply-row textarea { min-height: 70px; }
    .rule-enabled {
      display: grid;
      place-items: start center;
      min-height: 40px;
      padding-top: 5px;
    }
    .rule-enabled-input {
      -webkit-appearance: none;
      appearance: none;
      display: grid;
      place-content: center;
      width: 22px;
      height: 22px;
      margin: 0;
      border: 2px solid var(--line-strong);
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .rule-enabled-input::after {
      content: "";
      width: 6px;
      height: 11px;
      border: solid #fff;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg) scale(0);
      transform-origin: center;
      transition: transform .12s ease;
    }
    .rule-enabled-input:checked {
      border-color: var(--brand);
      background: var(--brand);
    }
    .rule-enabled-input:checked::after { transform: rotate(45deg) scale(1); }
    .rule-enabled-input:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(11, 127, 112, .18);
    }

    .modal-mask {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 42, .48);
    }
    .after-modal, .price-diff-modal, .return-refund-accept-modal, .logistics-modal, .external-procurement-modal, .image-preview-modal, .video-preview-modal, .quick-reply-modal, .bulk-store-modal, .integration-doc-modal, .dropship-auto-modal, .dropship-supplier-modal, .dropship-unbind-modal, .price-change-modal, .callback-config-issue-modal {
      width: min(960px, calc(100vw - 48px));
      max-height: min(86vh, 820px);
      overflow: auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 24px 80px rgba(0,0,0,.24);
    }
    .price-diff-modal { width: min(720px, calc(100vw - 48px)); }
    .return-refund-accept-modal { width: min(900px, calc(100vw - 48px)); }
    .return-refund-accept-body { min-height: 430px; }
    .return-refund-address-editor { min-width: 0; padding: 24px; }
    .return-refund-address-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
    .return-refund-address-toolbar select { min-width: 0; }
    .return-refund-address-toolbar button { min-width: 92px; box-shadow: none; }
    .return-refund-address-status { min-height: 20px; margin: 8px 0 16px; color: #667085; font-size: 12px; }
    .return-refund-address-paste { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid #eef0f3; }
    .return-refund-address-paste label { color: #344054; font-size: 13px; font-weight: 900; }
    .return-refund-address-paste textarea { min-height: 88px; resize: vertical; }
    .return-refund-address-paste-actions { display: flex; justify-content: flex-end; gap: 8px; }
    .return-refund-address-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .return-refund-address-fields .wide { grid-column: 1 / -1; }
    .return-refund-accept-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #eef0f3; }
    .return-refund-accept-footer button { min-width: 118px; }
    .external-procurement-modal { width: min(860px, calc(100vw - 48px)); }
    .quick-reply-modal, .bulk-store-modal, .integration-doc-modal { width: min(720px, calc(100vw - 48px)); }
    .callback-config-issue-modal { width: min(760px, calc(100vw - 48px)); overflow: hidden; }
    .callback-config-issue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid #f0d5d1; background: #fff8f7; }
    .callback-config-issue-head > div { min-width: 0; display: grid; gap: 6px; }
    .callback-config-issue-head strong { color: #7a271a; font-size: 18px; }
    .callback-config-issue-head span { color: #69413a; font-size: 13px; line-height: 1.6; }
    .callback-config-issue-head button { width: 34px; height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #69413a; font-size: 26px; }
    .callback-config-issue-warning { margin: 16px 24px 0; padding: 12px 14px; border: 1px solid #fedf89; border-radius: 10px; color: #7a2e0e; background: #fffaeb; font-size: 12px; line-height: 1.65; }
    .callback-config-issue-list { max-height: min(52vh, 520px); display: grid; gap: 12px; padding: 16px 24px 22px; overflow: auto; }
    .callback-config-issue-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid #ead9d6; border-radius: 12px; background: #fff; }
    .callback-config-issue-main { min-width: 0; display: grid; gap: 6px; }
    .callback-config-issue-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .callback-config-issue-title strong { color: #344054; font-size: 14px; }
    .callback-config-issue-code { padding: 2px 7px; border-radius: 999px; color: #b42318; background: #fee4e2; font-size: 11px; font-weight: 800; }
    .callback-config-issue-reason { color: #475467; font-size: 13px; line-height: 1.55; }
    .callback-config-issue-meta { color: #98a2b3; font-size: 11px; }
    .callback-config-issue-actions { display: flex; align-items: center; gap: 8px; }
    .callback-config-issue-actions button, .callback-config-issue-actions a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 8px; color: #344054; background: #fff; box-shadow: none; text-decoration: none; font-size: 12px; font-weight: 800; }
    .callback-config-issue-actions .danger { color: #b42318; border-color: #fda29b; background: #fff5f4; }
    .callback-config-issue-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid #eaecf0; background: #f9fafb; }
    .callback-config-issue-footer span { color: #667085; font-size: 12px; }
    .dropship-auto-modal { width: min(1120px, calc(100vw - 48px)); min-height: min(620px, calc(100vh - 72px)); }
    .dropship-supplier-modal { width: min(860px, calc(100vw - 48px)); }
    .dropship-unbind-modal { width: min(700px, calc(100vw - 48px)); min-height: 520px; position: relative; }
    .price-change-modal { width: min(1580px, calc(100vw - 44px)); height: min(880px, calc(100dvh - 36px)); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; }
    .price-change-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; padding: 24px 28px 18px; background: #fff; }
    .price-change-bulk-head { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 12px; }
    .price-change-bulk-head button { height: 46px; min-width: 128px; border: 0; background: #f7f8f8; box-shadow: none; color: #344054; font-size: 18px; font-weight: 900; }
    .price-change-bulk-head .price-change-bulk { width: min(260px, 42vw); }
    .price-change-close { grid-column: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #344054; font-size: 32px; line-height: 1; }
    .price-change-toolbar { display: grid; grid-template-columns: 220px 260px 220px 170px 128px 128px minmax(0,1fr); gap: 18px; align-items: center; padding: 0 40px 20px; background: #fff; }
    .price-change-toolbar select, .price-change-toolbar input { height: 46px; border-color: #e5e7eb; border-radius: 8px; font-weight: 800; }
    .price-change-bulk { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
    .price-change-bulk span { padding: 0 14px; color: #98a2b3; border-right: 1px solid #eef0f3; font-weight: 900; }
    .price-change-bulk input { border: 0; box-shadow: none; }
    .price-change-toolbar button { height: 46px; min-width: 128px; border: 0; background: #f7f8f8; box-shadow: none; color: #344054; font-size: 16px; font-weight: 900; }
    .price-change-status { margin-right: 0; color: #667085; font-weight: 800; text-align: right; }
    .price-change-status.error { color: #b42318; }
    .price-change-table-wrap { min-height: 0; overflow: auto; padding: 0 40px; background: #fff; }
    .price-change-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 980px; }
    .price-change-table th { height: 72px; padding: 0 24px; color: #8a8f98; background: #f7f7f7; text-align: left; font-size: 17px; font-weight: 500; }
    .price-change-table td { height: 98px; padding: 16px 24px; border-bottom: 1px solid #eceff1; color: #1f2937; font-size: 16px; font-weight: 900; vertical-align: middle; }
    .price-change-table .color-cell { width: 180px; border-right: 1px solid #eceff1; }
    .price-change-table .old-price { color: #1f2937; font-weight: 500; }
    .price-change-input { display: grid; grid-template-columns: 34px minmax(0,1fr); width: min(260px, 100%); height: 50px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
    .price-change-input span { display: grid; place-items: center; color: #b8bec6; border-right: 1px solid #eef0f3; font-weight: 900; }
    .price-change-input input { height: 48px; border: 0; border-radius: 0; box-shadow: none; }
    .price-change-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #eef4f2; }
    .price-change-empty { padding: 96px 18px; color: #667085; text-align: center; }
    .price-change-footer { display: flex; justify-content: flex-end; gap: 18px; padding: 24px 40px; border-top: 1px solid #eef0f3; background: #fff; }
    .price-change-footer button { min-width: 132px; height: 52px; border: 0; border-radius: 10px; box-shadow: none; font-size: 20px; font-weight: 900; }
    .price-change-footer .primary { background: #14b8a6; }
    .compensation-modal { width: min(640px, calc(100vw - 36px)); max-height: calc(100vh - 48px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.18); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
    .compensation-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #eef0f3; }
    .compensation-modal-head strong { color: var(--text); font-size: 20px; font-weight: 900; }
    .compensation-modal-head button { width: 34px; padding: 0; border-radius: 50%; box-shadow: none; }
    .compensation-modal-body { min-height: 0; overflow: auto; padding: 22px 24px; }
    .compensation-paste-zone { display: grid; place-items: center; min-height: 260px; border: 1.5px dashed #b8d8d3; border-radius: 12px; background: #f8fffd; color: #667085; text-align: center; cursor: text; outline: none; }
    .compensation-paste-zone:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.12); }
    .compensation-paste-zone img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; }
    .compensation-paste-hint strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 18px; font-weight: 900; }
    .compensation-amount-field { display: grid; gap: 8px; margin-top: 18px; color: var(--text); font-weight: 900; }
    .compensation-amount-field input { height: 48px; border-radius: 10px; font-size: 18px; font-weight: 900; }
    .compensation-modal-status { min-height: 22px; margin-top: 12px; color: #667085; font-weight: 800; }
    .compensation-modal-status.error { color: #b42318; }
    .compensation-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 24px; border-top: 1px solid #eef0f3; background: #fff; }
    .compensation-modal-footer button { min-width: 112px; height: 44px; border-radius: 10px; font-weight: 900; }
    .withdraw-modal { width: min(680px, calc(100vw - 36px)); max-height: calc(100vh - 48px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.2); display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
    .withdraw-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #eef0f3; }
    .withdraw-modal-head strong { color: var(--text); font-size: 22px; font-weight: 900; }
    .withdraw-modal-head button { width: 34px; padding: 0; border-radius: 50%; box-shadow: none; }
    .withdraw-modal-body { min-height: 0; overflow: auto; padding: 24px; }
    .withdraw-account-card { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 18px; padding: 18px; border-radius: 12px; background: #f7f8fa; color: var(--text); font-weight: 800; }
    .withdraw-account-card span { color: #667085; line-height: 1.6; }
    .withdraw-field { display: grid; gap: 10px; margin-top: 22px; color: var(--text); font-weight: 900; }
    .withdraw-amount-input { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; border-bottom: 1px solid #d9dee5; }
    .withdraw-amount-input span { color: #111827; font-size: 34px; font-weight: 900; line-height: 1; }
    .withdraw-amount-input input { height: 58px; border: 0; border-radius: 0; box-shadow: none; font-size: 28px; font-weight: 900; }
    .withdraw-balance-line { display: flex; align-items: center; gap: 12px; color: #667085; font-weight: 800; }
    .withdraw-balance-line button { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; color: #315f9c; font-weight: 900; }
    .withdraw-remark { height: 50px; border: 0; border-radius: 8px; background: #f7f7f7; font-weight: 800; }
    .withdraw-status { min-height: 22px; margin-top: 14px; color: #667085; font-weight: 800; }
    .withdraw-status.error { color: #b42318; }
    .withdraw-qr-box { display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding: 18px; border: 1px solid #e6f3f0; border-radius: 12px; background: #fbfffd; }
    .withdraw-qr-box.hidden { display: none; }
    .withdraw-qr-box img { width: 180px; height: 180px; object-fit: contain; border: 1px solid #edf1f5; border-radius: 8px; background: #fff; }
    .withdraw-event-list { display: grid; gap: 8px; margin-top: 16px; }
    .withdraw-event-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #f7faf9; color: #344054; font-weight: 800; }
    .withdraw-event-item.success { background: #ecfdf3; color: #027a48; }
    .withdraw-event-item.error { background: #fef3f2; color: #b42318; }
    .withdraw-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 24px; border-top: 1px solid #eef0f3; background: #fff; }
    .withdraw-modal-footer button { min-width: 128px; height: 46px; border-radius: 10px; font-size: 18px; font-weight: 900; }
    .withdraw-modal-footer .primary { background: #14b8a6; }
    .compensation-workspace { grid-column: 2; min-width: 0; min-height: 0; height: 100%; overflow: auto; padding: 20px; background: #eef8f6; }
    .compensation-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
    .compensation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .compensation-head h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 900; }
    .compensation-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
    .compensation-total { min-width: 220px; padding: 14px 18px; border-radius: 12px; background: #ecfdf8; color: var(--brand-deep); text-align: right; }
    .compensation-total span { display: block; color: #667085; font-size: 12px; font-weight: 800; }
    .compensation-total strong { font-size: 28px; font-weight: 900; }
    .compensation-filters { display: grid; grid-template-columns: 160px 180px 180px 1fr 110px 90px; gap: 12px; align-items: center; margin-bottom: 16px; }
    .compensation-filters select, .compensation-filters input { height: 42px; border-radius: 8px; font-weight: 800; }
    .compensation-filters button { height: 42px; border-radius: 8px; font-weight: 900; }
    .compensation-table { border: 1px solid #edf1f5; border-radius: 12px; overflow: hidden; }
    .compensation-row, .compensation-head-row { display: grid; grid-template-columns: 240px 130px 160px 1fr 120px 90px; gap: 12px; align-items: center; padding: 14px 16px; }
    .compensation-head-row { background: #f7f8fa; color: #667085; font-weight: 900; }
    .compensation-row { border-top: 1px solid #edf1f5; color: var(--text); font-weight: 800; }
    .compensation-image-slot { min-height: 64px; color: #98a2b3; font-size: 12px; font-weight: 800; }
    .compensation-row img { width: 92px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid #edf1f5; background: #f7f8fa; }
    .compensation-delete-btn { min-width: 64px; height: 32px; border-radius: 8px; box-shadow: none; color: #b42318; font-weight: 900; }
    .compensation-empty { padding: 80px 16px; color: #667085; text-align: center; }
    .compensation-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; color: #667085; font-weight: 900; }
    .compensation-pagination button { min-width: 86px; height: 34px; border-radius: 8px; box-shadow: none; font-weight: 900; }
    .ticket-workspace { grid-column: 2; min-width: 0; min-height: 0; height: 100%; overflow: auto; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
    .ticket-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .ticket-head h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 900; }
    .ticket-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
    .ticket-filters { display: grid; grid-template-columns: 180px 160px 160px 180px 180px 1fr 110px 90px; gap: 12px; align-items: center; margin-bottom: 16px; }
    .ticket-filters select, .ticket-filters input, .ticket-filters button { height: 42px; border-radius: 8px; font-weight: 800; }
    .ticket-tabs { display: flex; gap: 18px; margin: 8px 0 12px; }
    .ticket-tabs button { border: 0; background: transparent; box-shadow: none; padding: 0 0 8px; border-bottom: 2px solid transparent; font-weight: 900; }
    .ticket-tabs button.active { border-color: var(--brand-deep); color: var(--brand-deep); }
    .ticket-table { border: 1px solid #edf1f5; border-radius: 12px; overflow: auto; }
    .ticket-row, .ticket-head-row { display: grid; grid-template-columns: minmax(320px,1.6fr) 160px 160px 120px; gap: 12px; align-items: center; padding: 14px 16px; min-width: 820px; }
    .ticket-head-row { background: #f7f8fa; color: #667085; font-weight: 900; }
    .ticket-row { border-top: 1px solid #edf1f5; color: var(--text); font-weight: 800; }
    .ticket-product { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 12px; align-items: center; }
    .ticket-product img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f7f8fa; }
    .ticket-product strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ticket-sub { display: block; margin-top: 4px; color: #667085; font-size: 12px; }
    .ticket-empty { padding: 80px 16px; color: #667085; text-align: center; }
    .ticket-status-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #eef4f2; color: var(--brand-deep); font-weight: 900; }
    .ticket-status-pill.wait { background: var(--red-soft); color: var(--red); }
    .ticket-detail-modal { width: min(920px, calc(100vw - 44px)); max-height: min(820px, calc(100dvh - 36px)); overflow: auto; padding: 30px 38px; border-radius: 12px; background: #fff; }
    .ticket-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .ticket-detail-grid { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 18px 24px; }
    .ticket-detail-label { font-weight: 900; }
    .ticket-detail-value { font-weight: 800; line-height: 1.7; }
    .ticket-operate-box { display: grid; gap: 10px; margin-top: 24px; }
    .ticket-operate-box textarea { min-height: 96px; }
    .ticket-detail-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
    .after-head, .quick-reply-modal-head, .image-preview-head {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 22px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }
    .after-head strong, .quick-reply-modal-head strong { font-size: 20px; font-weight: 900; }
    .after-close, .quick-reply-modal-head button, .image-preview-head button { width: 34px; padding: 0; border-radius: 50%; box-shadow: none; }
    .dropship-auto-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 12px; align-items: start; padding: 24px 28px 12px; background: #fff; }
    .dropship-auto-title { text-align: center; }
    .dropship-auto-title strong { display: block; color: var(--text); font-size: 22px; font-weight: 900; }
    .dropship-auto-title span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; font-weight: 800; }
    .dropship-auto-close { grid-column: 3; width: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #667085; font-size: 28px; line-height: 1; }
    .dropship-auto-body { padding: 18px 28px 28px; }
    .dropship-auto-modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
    .dropship-auto-mode { min-height: 76px; padding: 18px; border: 1px solid transparent; border-radius: 8px; background: #f7f8f8; text-align: left; box-shadow: none; }
    .dropship-auto-mode strong { display: block; color: #344054; font-size: 17px; font-weight: 900; }
    .dropship-auto-mode span { display: block; margin-top: 8px; color: #667085; font-size: 13px; font-weight: 800; line-height: 1.4; }
    .dropship-auto-mode.active { border-color: #b7ece2; background: #e5f8f5; }
    .dropship-auto-mode.active strong, .dropship-auto-mode.active span { color: #13b8a6; }
    .dropship-auto-field { margin-top: 34px; max-width: 660px; }
    .dropship-auto-field label { display: block; margin-bottom: 14px; color: var(--text); font-size: 17px; font-weight: 900; }
    .dropship-auto-field select { width: 100%; height: 46px; border: 1px solid #99e3d7; border-radius: 8px; padding: 0 14px; color: #344054; background: #fff; font-weight: 800; box-shadow: 0 0 0 3px rgba(19, 184, 166, .08); }
    .dropship-auto-preview { margin-top: 0; border: 1px solid #e8f4f2; border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(16, 24, 40, .08); }
    .dropship-auto-preview div { padding: 14px 16px; color: #344054; font-weight: 900; }
    .dropship-auto-preview div:first-child { background: #def7f3; color: #13b8a6; }
    .dropship-auto-products { display: grid; gap: 18px; margin-top: 30px; }
    .dropship-auto-product-filters { display: grid; grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) minmax(160px,.55fr) auto auto; gap: 12px; align-items: center; }
    .dropship-auto-product-filters .dropship-filter { margin: 0; }
    .dropship-auto-product-tabs { display: flex; align-items: center; gap: 12px; }
    .dropship-auto-product-tab { height: 40px; min-width: 86px; box-shadow: none; }
    .dropship-auto-product-tab.active { color: #13b8a6; background: #def7f3; border-color: #b7ece2; }
    .dropship-auto-product-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .dropship-auto-product-head, .dropship-auto-product-row { display: grid; grid-template-columns: minmax(260px,1.5fr) 120px 130px minmax(180px,1fr) 150px; gap: 14px; align-items: center; padding: 14px 16px; }
    .dropship-auto-product-head { color: #667085; background: #f5f6f7; font-weight: 900; }
    .dropship-auto-product-row { min-height: 72px; border-top: 1px solid var(--line); }
    .dropship-auto-product-name strong { display: block; color: var(--text); line-height: 1.45; }
    .dropship-auto-product-name span, .dropship-auto-product-row small { display: block; margin-top: 4px; color: var(--muted); }
    .dropship-auto-product-name img { width: 54px; height: 54px; margin-right: 10px; border-radius: 6px; object-fit: cover; float: left; background: #eef4f2; }
    .dropship-auto-product-row select { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; }
    .dropship-auto-product-empty { padding: 54px 18px; color: var(--muted); text-align: center; }
    .dropship-auto-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
    .dropship-auto-footer button { min-width: 108px; }
    .dropship-supplier-body { padding: 20px 22px 24px; display: grid; gap: 16px; }
    .dropship-supplier-invite { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: center; }
    .dropship-supplier-invite input { height: 42px; }
    .dropship-supplier-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .dropship-supplier-row { display: grid; grid-template-columns: minmax(0,1fr) 140px 150px 160px; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
    .dropship-supplier-row:last-child { border-bottom: 0; }
    .dropship-supplier-row.head { color: #667085; background: #f8fafc; font-weight: 900; }
    .dropship-supplier-name { color: var(--text); font-weight: 900; }
    .dropship-supplier-appid { margin-top: 4px; color: #667085; font-size: 12px; word-break: break-all; }
    .dropship-supplier-page { display: grid; gap: 18px; }
    .dropship-supplier-page .dropship-card { min-height: 620px; }
    .dropship-supplier-page-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
    .dropship-supplier-page-head h2 { margin: 0; color: var(--text); font-size: 22px; font-weight: 900; }
    .dropship-supplier-page-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; font-weight: 800; }
    .dropship-supplier-page-head button { min-width: 124px; height: 46px; }
    .dropship-supplier-tabs { display: flex; align-items: center; gap: 38px; margin-top: 24px; }
    .dropship-supplier-tab { border: 0; border-radius: 0; padding: 0 0 14px; color: #344054; background: transparent; box-shadow: none; font-size: 16px; font-weight: 900; }
    .dropship-supplier-tab.active { color: var(--text); border-bottom: 3px solid #111827; }
    .dropship-supplier-page-table { margin-top: 28px; border: 0; border-radius: 0; overflow: visible; }
    .dropship-supplier-page-table .dropship-supplier-row { grid-template-columns: minmax(220px,1.2fr) minmax(220px,1.1fr) minmax(140px,.7fr) minmax(170px,.8fr) minmax(120px,.6fr); min-height: 78px; }
    .dropship-supplier-action { border: 0; padding: 0; color: #4d6f9f; background: transparent; box-shadow: none; font-weight: 900; }
    .dropship-supplier-action:disabled { opacity: .45; cursor: not-allowed; }
    .dropship-supplier-invite-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }
    .dropship-unbind-close { position: absolute; top: 28px; right: 28px; width: 38px; height: 38px; border: 0; background: transparent; box-shadow: none; color: #98a2b3; font-size: 40px; line-height: 1; }
    .dropship-unbind-body { min-height: 520px; padding: 92px 58px 42px; display: grid; grid-template-rows: auto auto 1fr auto; }
    .dropship-unbind-title { color: #1f2937; text-align: center; font-size: 25px; font-weight: 500; }
    .dropship-unbind-subtitle { margin-top: 22px; color: #1f2937; text-align: center; font-size: 20px; font-weight: 500; }
    .dropship-unbind-checks { display: grid; gap: 28px; margin-top: 36px; }
    .dropship-unbind-check { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 14px; align-items: start; }
    .dropship-unbind-icon { width: 22px; height: 22px; border: 2px solid #22c55e; border-radius: 50%; color: #22c55e; display: grid; place-items: center; font-size: 15px; line-height: 1; }
    .dropship-unbind-check strong { display: block; color: #1f2937; font-size: 20px; font-weight: 500; }
    .dropship-unbind-check span { display: block; margin-top: 10px; color: #7a7f87; font-size: 18px; line-height: 1.55; }
    .dropship-unbind-actions { display: flex; justify-content: flex-end; }
    .dropship-unbind-actions button { min-width: 156px; height: 56px; border-radius: 10px; font-size: 22px; }
    .account-stores-workspace {
      grid-column: 2;
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      overflow: hidden;
    }
    .account-stores-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
    }
    .account-stores-head h2 { margin: 0; color: var(--text); font-size: 24px; line-height: 1.15; font-weight: 900; }
    .account-stores-count { margin-left: 10px; color: var(--brand); font-size: 24px; font-weight: 900; }
    .account-stores-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
    .account-store-body {
      min-height: 0;
      overflow: auto;
      display: grid;
      align-content: start;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
    }
    .account-store-item { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: start; min-height: 112px; padding: 14px; border: 1px solid #dbe7e3; border-radius: 12px; background: #fbfdfc; }
    .account-store-item.active { border-color: #9bd8ca; background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
    .account-store-avatar { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--brand); font-weight: 900; font-size: 16px; overflow: hidden; }
    .account-store-main { min-width: 0; display: grid; gap: 6px; }
    .account-store-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; font-size: 17px; font-weight: 900; }
    .account-store-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #667085; font-size: 13px; }
    .account-store-funds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; margin-top: 6px; color: #ef4444; font-size: 14px; font-weight: 900; }
    .account-store-funds span { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
    .account-store-funds strong { font-size: 15px; }
    .account-store-withdraw-btn { height: 28px; min-width: 54px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #ef4444; box-shadow: none; font-weight: 900; }
    .account-store-withdraw-btn:hover { background: #fee2e2; }
    .account-store-withdraw-btn:disabled { color: #98a2b3; background: transparent; cursor: not-allowed; }
    .account-store-delete-btn { justify-self: end; align-self: start; height: 28px; min-width: 52px; padding: 0 10px; border: 1px solid #fecaca; border-radius: 8px; background: #fff7f7; color: #ef4444; font-size: 12px; font-weight: 900; box-shadow: none; cursor: pointer; }
    .account-store-delete-btn:hover { border-color: #fca5a5; background: #fff1f2; }
    .account-store-delete-btn:disabled { color: #cbd5e1; border-color: #e5e7eb; background: #f8fafc; cursor: not-allowed; }
    .account-store-empty { grid-column: 1 / -1; padding: 48px 18px; color: var(--muted); text-align: center; border: 1px dashed #cfe3de; border-radius: 14px; background: #fbfdfc; }
    .account-store-pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 12px 18px;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 20px 20px;
      background: #fff;
      color: #667085;
      font-size: 13px;
    }
    .account-store-pagination button { height: 34px; padding: 0 14px; box-shadow: none; font-weight: 800; }
    .account-store-pagination button:disabled { opacity: .45; cursor: not-allowed; }
    .account-store-body + .account-store-pagination { margin-top: -14px; }
    .dropship-workspace {
      grid-column: 2;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: auto;
      display: grid;
      align-content: start;
      gap: 18px;
      padding-right: 4px;
    }
    .dropship-crumb { color: #98a2b3; font-size: 22px; font-weight: 800; }
    .dropship-crumb strong { color: var(--text); }
    .dropship-crumb button { border: 0; padding: 0; color: inherit; background: transparent; box-shadow: none; font: inherit; cursor: pointer; }
    .dropship-crumb button:hover { color: var(--brand); }
    .dropship-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 22px; }
    .dropship-supplier { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; }
    .dropship-supplier h2, .dropship-board h2, .dropship-detail-card h3 { margin: 0; color: var(--text); font-size: 22px; font-weight: 900; }
    .dropship-supplier p, .dropship-board-sub, .dropship-muted { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
    .dropship-tabs { display: flex; align-items: center; gap: 30px; margin-top: 18px; }
    .dropship-tab { border: 0; border-radius: 0; padding: 0 0 12px; color: #344054; background: transparent; box-shadow: none; font-size: 16px; font-weight: 900; }
    .dropship-tab.active { color: var(--text); border-bottom: 3px solid #111827; }
    .dropship-board-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
    .dropship-board-actions { display: grid; justify-items: end; gap: 10px; color: var(--muted); font-weight: 800; }
    .dropship-filters { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px 14px; margin-top: 20px; }
    .dropship-filter { display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .dropship-filter label { flex: none; color: #667085; font-weight: 900; }
    .dropship-filter input, .dropship-filter select { min-width: 0; width: 100%; height: 36px; border: 0; padding: 0; box-shadow: none; }
    .dropship-filter.wide { grid-column: span 2; }
    .dropship-date-trigger { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; height: 36px; border: 0; padding: 0; background: transparent; box-shadow: none; color: var(--text); font-weight: 800; text-align: left; }
    .dropship-date-trigger:hover { background: transparent; box-shadow: none; }
    .dropship-date-trigger .muted { color: #98a2b3; font-weight: 800; }
    .dropship-date-trigger .calendar-icon { color: #667085; font-size: 14px; }
    .dropship-date-popover { position: fixed; z-index: 80; width: min(860px, calc(100vw - 32px)); border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.18); }
    .dropship-date-popover::before { content: ''; position: absolute; top: -8px; left: var(--arrow-left, 40px); width: 14px; height: 14px; border-left: 1px solid #d0d5dd; border-top: 1px solid #d0d5dd; background: #fff; transform: rotate(45deg); }
    .dropship-date-panel { display: grid; grid-template-columns: 1fr 1fr; }
    .dropship-date-month { padding: 22px 24px 24px; }
    .dropship-date-month + .dropship-date-month { border-left: 1px solid #e5e7eb; }
    .dropship-date-head { display: grid; grid-template-columns: 34px 34px minmax(0,1fr) 34px 34px; align-items: center; gap: 4px; margin-bottom: 18px; }
    .dropship-date-head strong { grid-column: 3; text-align: center; font-size: 20px; color: #5b626b; }
    .dropship-date-head button { width: 34px; min-width: 34px; height: 34px; border: 0; padding: 0; color: #4b5563; background: transparent; box-shadow: none; font-size: 22px; }
    .dropship-date-week, .dropship-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
    .dropship-date-week span { height: 34px; color: #5b626b; text-align: center; font-weight: 800; }
    .dropship-date-day { display: grid; place-items: center; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #4b5563; font-size: 16px; }
    .dropship-date-day:hover { color: #1677ff; background: #eef6ff; box-shadow: none; }
    .dropship-date-day.outside { color: #b8c0cc; }
    .dropship-date-day.in-range { border-radius: 0; background: #eaf3ff; color: #1677ff; }
    .dropship-date-day.active { position: relative; z-index: 1; border-radius: 999px; background: #1677ff; color: #fff; box-shadow: 0 0 0 5px #e7f1ff; }
    .dropship-actions { display: flex; align-items: center; gap: 12px; }
    .dropship-actions button { min-width: 116px; }
    .dropship-table { margin-top: 22px; min-width: 980px; }
    .dropship-table-wrap { overflow: auto; }
    .dropship-table-head, .dropship-row { display: grid; grid-template-columns: 180px 170px 210px minmax(280px,1fr) 120px 140px; gap: 16px; align-items: center; }
    .dropship-table-head { min-height: 58px; padding: 0 18px; color: #667085; background: #f5f6f7; font-weight: 900; }
    .dropship-row { padding: 18px; border-bottom: 1px solid var(--line); }
    .dropship-id { color: #344054; font-weight: 900; word-break: break-all; }
    .dropship-link { color: #4d6f9f; font-weight: 900; }
    .dropship-product { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; align-items: center; }
    .dropship-product img, .dropship-product-empty { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: #eef4f2; display: grid; place-items: center; color: var(--brand); font-weight: 900; }
    .dropship-product-title { color: var(--text); font-weight: 900; line-height: 1.45; }
    .dropship-product-sku { margin-top: 4px; color: #667085; line-height: 1.45; }
    .dropship-product-tag { margin-top: 6px; color: #f59e0b; font-weight: 900; }
    .dropship-status { display: grid; justify-items: end; gap: 8px; font-weight: 900; }
    .dropship-status button { height: auto; border: 0; padding: 0; color: #4d6f9f; background: transparent; box-shadow: none; }
    .dropship-row-actions { display: grid; justify-items: end; gap: 7px; }
    .dropship-row-actions button, .dropship-detail-actions button { height: auto; border: 0; padding: 0; color: #4d6f9f; background: transparent; box-shadow: none; font-weight: 900; }
    .dropship-row-actions button.danger, .dropship-detail-actions button.danger { color: #b42318; }
    .dropship-detail-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
    .dropship-empty { padding: 72px 18px; color: var(--muted); text-align: center; }
    .dropship-detail-top { min-height: 110px; display: grid; align-content: center; }
    .dropship-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
    .dropship-detail-card { min-height: 180px; }
    .dropship-detail-product { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 14px; align-items: center; margin-top: 28px; }
    .dropship-detail-product img, .dropship-detail-product .dropship-product-empty { width: 74px; height: 74px; }
    .dropship-detail-rows { display: grid; gap: 14px; margin-top: 28px; }
    .dropship-detail-row { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 18px; color: #344054; }
    .dropship-detail-row span:first-child { color: #667085; font-weight: 900; }
    .dropship-detail-back { width: fit-content; }
    .after-form, .bulk-store-body, .integration-doc-body { padding: 22px; }
    .after-form { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 16px 18px; align-items: start; }
    .after-label { color: #344054; font-weight: 900; padding-top: 8px; }
    .after-options {
      display: grid;
      grid-template-columns: repeat(3, 104px);
      gap: 18px 22px;
      align-items: start;
      justify-content: start;
      width: fit-content;
      max-width: 100%;
    }
    .after-options-two { grid-template-columns: repeat(2, 104px); }
    .after-options label {
      display: grid;
      justify-items: center;
      gap: 8px;
      color: #111827;
      line-height: 1.2;
      white-space: nowrap;
    }
    .after-options input[type="radio"] {
      width: 30px;
      height: 30px;
      margin: 0;
      accent-color: #0b7cff;
    }
    .after-row { display: grid; gap: 8px; }
    .after-help { color: var(--muted); font-size: 12px; }
    .after-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; }
    .price-diff-intro { margin: -4px 0 2px; color: #667085; line-height: 1.6; }
    .price-diff-intro a { color: #5b73a8; font-weight: 800; }
    .price-diff-form { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 16px 18px; align-items: start; padding: 0 22px 22px; }
    .price-diff-label { color: #344054; font-weight: 900; padding-top: 8px; }
    .price-diff-product { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 10px; align-items: center; border-radius: 10px; background: #f7f8fa; padding: 12px; }
    .price-diff-product img, .price-diff-product .after-product-empty { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
    .price-diff-product-title { font-weight: 900; line-height: 1.45; }
    .price-diff-product-sku { margin-top: 4px; color: #667085; line-height: 1.45; }
    .price-diff-product-meta { text-align: right; color: #344054; white-space: nowrap; }
    .price-diff-row { display: grid; gap: 8px; }
    .price-diff-amount-field { position: relative; }
    .price-diff-amount-field input { padding-right: 56px; }
    .price-diff-amount-field input::-webkit-outer-spin-button,
    .price-diff-amount-field input::-webkit-inner-spin-button { margin: 0; appearance: none; }
    .price-diff-amount-unit {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #667085;
      font-weight: 800;
      pointer-events: none;
      z-index: 1;
    }
    .price-diff-row textarea { min-height: 96px; }
    .price-diff-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; }
    .price-diff-actions button { min-width: 112px; }
    .after-product {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
    }
    .after-product-title { font-weight: 800; line-height: 1.5; }
    .after-product-sku { margin-top: 4px; color: var(--muted); line-height: 1.5; }
    .after-product-price { white-space: nowrap; text-align: right; font-weight: 800; }
    .after-address, .after-new-address { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
    .after-new-address { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
    .after-new-address .wide { grid-column: 1 / -1; }
    .logistics-modal #logisticsContent { padding: 22px; }
    .external-procurement-modal #externalProcurementContent { padding: 22px; }
    .external-procurement-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; color: #667085; font-size: 13px; }
    .external-procurement-summary span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #f2f4f7; }
    .external-procurement-list { display: grid; gap: 12px; }
    .external-procurement-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
    .external-procurement-card h3 { margin: 0; padding: 12px 14px; border-bottom: 1px solid #eef0f3; background: #f8fafb; font-size: 15px; }
    .external-procurement-grid { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 0; }
    .external-procurement-grid div { padding: 10px 14px; border-bottom: 1px solid #f1f3f5; color: #344054; word-break: break-word; }
    .external-procurement-grid div:nth-child(odd) { color: #667085; background: #fbfcfd; font-weight: 800; }
    .external-procurement-empty { padding: 42px 18px; color: #667085; text-align: center; border: 1px dashed #d0d5dd; border-radius: 8px; background: #fbfcfd; }
    .external-procurement-raw { max-height: 360px; overflow: auto; padding: 14px; border-radius: 8px; background: #101828; color: #e5e7eb; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
    .image-preview-modal { width: min(92vw, 1100px); height: min(88vh, 820px); display: grid; grid-template-rows: auto minmax(0,1fr); }
    .image-preview-body { display: grid; place-items: center; min-height: 0; background: #111; }
    .image-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-out; }
    .video-preview-modal {
      width: min(92vw, 1100px);
      height: min(86vh, 780px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
      background: #0b1220;
    }
    .video-preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 20px;
      color: #fff;
      background: #111827;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .video-preview-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
    .video-preview-head button { width: 36px; min-width: 36px; padding: 0; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: #fff; box-shadow: none; border-radius: 50%; }
    .video-preview-body { position: relative; display: grid; place-items: center; min-height: 0; padding: 18px; background: #050914; }
    .video-preview-body video { display: block; width: 100%; height: 100%; max-height: calc(86vh - 150px); object-fit: contain; background: #000; border-radius: 10px; }
    .video-preview-loading { position: absolute; inset: 18px; display: grid; place-items: center; color: #d0d5dd; pointer-events: none; }
    .video-preview-loading.hidden { display: none; }
    .video-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 18px; color: #d0d5dd; background: #111827; border-top: 1px solid rgba(255,255,255,.12); }
    .video-preview-status { min-width: 0; font-size: 13px; line-height: 1.5; }
    .video-preview-status.error { color: #fda29b; }
    .video-preview-actions { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; }
    .video-preview-actions a, .video-preview-actions button { height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; box-shadow: none; }
    .media-context-menu {
      position: fixed;
      z-index: 1600;
      display: grid;
      min-width: 168px;
      padding: 6px;
      border: 1px solid #d0d5dd;
      border-radius: 10px;
      background: rgba(255,255,255,.99);
      box-shadow: 0 16px 42px rgba(15,23,42,.22);
    }
    .media-context-menu.hidden { display: none; }
    .media-context-menu button, .media-context-menu a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 34px;
      padding: 0 11px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      box-shadow: none;
      color: #101828;
      font: inherit;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }
    .media-context-menu button:hover, .media-context-menu a:hover { background: #eef7f5; color: var(--brand-deep); }
    .quick-reply-picker { display: grid; gap: 10px; padding: 18px; }
    .quick-reply-choice { height: auto; min-height: 54px; text-align: left; display: grid; gap: 4px; padding: 10px 12px; }
    .toast-stack { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 1200; display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); }
    .toast-stack:empty { display: none; }
    .toast {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border: 1px solid #bfe2dc;
      border-radius: 12px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 14px 36px rgba(15,23,42,.18);
      cursor: pointer;
    }
    .toast strong {
      color: #101828;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.35;
    }
    .toast span {
      color: #475467;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .aftersale-toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: none; box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-height: min(430px, calc(100vh - 32px)); overflow: hidden; border: 1px solid #dfd8cc; border-radius: 20px 20px 8px 20px; background: rgba(255,253,249,.98); box-shadow: 0 24px 64px rgba(43,39,32,.18), 0 2px 8px rgba(43,39,32,.08); }
    .aftersale-toast-stack.has-items { display: block; }
    .aftersale-toast-stack.floating-position { right: auto; bottom: auto; }
    .aftersale-toast-stack.dragging { box-shadow: 0 28px 70px rgba(43,39,32,.27); }
    .aftersale-toast-stack.resized { max-width: calc(100vw - 16px); max-height: min(430px, calc(100vh - 16px)); }
    .aftersale-toast-stack.resizing { outline: 2px solid rgba(14,123,109,.34); outline-offset: 2px; box-shadow: 0 28px 70px rgba(43,39,32,.27); user-select: none; }
    .aftersale-toast-list { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: calc(100% - 18px); max-height: min(412px, calc(100vh - 50px)); margin: 8px 10px 10px 8px; overflow: hidden; padding: 4px 6px 6px 4px; }
    .aftersale-toast-stack.resized .aftersale-toast-list { height: calc(100% - 16px); max-height: none; }
    .aftersale-toast-collapsed-list { min-height: 0; display: none; flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
    .aftersale-toast-list.has-collapsed-items .aftersale-toast-collapsed-list { display: grid; }
    .aftersale-toast-collapsed-list::-webkit-scrollbar { width: 8px; }
    .aftersale-toast-collapsed-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .aftersale-toast-resize-handle { position: absolute; z-index: 5; display: block; box-sizing: border-box; background: transparent; touch-action: none; }
    .aftersale-toast-resize-handle[data-resize-direction="n"] { top: 0; left: 22px; right: 22px; height: 10px; cursor: ns-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="s"] { bottom: 0; left: 22px; right: 22px; height: 12px; cursor: ns-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="e"] { top: 22px; right: 0; bottom: 22px; width: 12px; cursor: ew-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="w"] { top: 22px; bottom: 22px; left: 0; width: 10px; cursor: ew-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="nw"], .aftersale-toast-resize-handle[data-resize-direction="se"] { width: 26px; height: 26px; cursor: nwse-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="ne"], .aftersale-toast-resize-handle[data-resize-direction="sw"] { width: 26px; height: 26px; cursor: nesw-resize; }
    .aftersale-toast-resize-handle[data-resize-direction="nw"] { top: 0; left: 0; }
    .aftersale-toast-resize-handle[data-resize-direction="ne"] { top: 0; right: 0; }
    .aftersale-toast-resize-handle[data-resize-direction="se"] { right: 0; bottom: 0; }
    .aftersale-toast-resize-handle[data-resize-direction="sw"] { bottom: 0; left: 0; }
    .aftersale-toast-resize-handle::after { content: ""; position: absolute; opacity: .52; transition: opacity .16s ease, border-color .16s ease, background .16s ease; }
    .aftersale-toast-resize-handle[data-resize-direction="n"]::after, .aftersale-toast-resize-handle[data-resize-direction="s"]::after { left: 50%; width: 42px; height: 3px; border-radius: 999px; background: #91a49e; transform: translateX(-50%); }
    .aftersale-toast-resize-handle[data-resize-direction="n"]::after { top: 3px; }
    .aftersale-toast-resize-handle[data-resize-direction="s"]::after { bottom: 4px; }
    .aftersale-toast-resize-handle[data-resize-direction="e"]::after, .aftersale-toast-resize-handle[data-resize-direction="w"]::after { top: 50%; width: 3px; height: 42px; border-radius: 999px; background: #91a49e; transform: translateY(-50%); }
    .aftersale-toast-resize-handle[data-resize-direction="e"]::after { right: 4px; }
    .aftersale-toast-resize-handle[data-resize-direction="w"]::after { left: 3px; }
    .aftersale-toast-resize-handle[data-resize-direction="nw"]::after, .aftersale-toast-resize-handle[data-resize-direction="ne"]::after, .aftersale-toast-resize-handle[data-resize-direction="se"]::after, .aftersale-toast-resize-handle[data-resize-direction="sw"]::after { width: 10px; height: 10px; }
    .aftersale-toast-resize-handle[data-resize-direction="nw"]::after { top: 6px; left: 6px; border-top: 2px solid #91a49e; border-left: 2px solid #91a49e; }
    .aftersale-toast-resize-handle[data-resize-direction="ne"]::after { top: 6px; right: 6px; border-top: 2px solid #91a49e; border-right: 2px solid #91a49e; }
    .aftersale-toast-resize-handle[data-resize-direction="se"]::after { right: 6px; bottom: 6px; border-right: 2px solid #91a49e; border-bottom: 2px solid #91a49e; }
    .aftersale-toast-resize-handle[data-resize-direction="sw"]::after { bottom: 6px; left: 6px; border-bottom: 2px solid #91a49e; border-left: 2px solid #91a49e; }
    .aftersale-toast-stack:hover .aftersale-toast-resize-handle::after, .aftersale-toast-stack.resizing .aftersale-toast-resize-handle::after { opacity: .96; border-color: var(--brand); }
    .aftersale-toast-stack:hover .aftersale-toast-resize-handle[data-resize-direction="n"]::after, .aftersale-toast-stack:hover .aftersale-toast-resize-handle[data-resize-direction="s"]::after, .aftersale-toast-stack:hover .aftersale-toast-resize-handle[data-resize-direction="e"]::after, .aftersale-toast-stack:hover .aftersale-toast-resize-handle[data-resize-direction="w"]::after, .aftersale-toast-stack.resizing .aftersale-toast-resize-handle[data-resize-direction="n"]::after, .aftersale-toast-stack.resizing .aftersale-toast-resize-handle[data-resize-direction="s"]::after, .aftersale-toast-stack.resizing .aftersale-toast-resize-handle[data-resize-direction="e"]::after, .aftersale-toast-stack.resizing .aftersale-toast-resize-handle[data-resize-direction="w"]::after { background: var(--brand); }
    .aftersale-toast { width: 100%; overflow: hidden; border: 1px solid #e7dfd3; border-radius: 17px 17px 7px 17px; background: #fffdfa; box-shadow: 0 8px 22px rgba(62,51,37,.08); transition: border-color .16s ease, box-shadow .16s ease; }
    .aftersale-toast.is-expanded { flex: 0 0 auto; }
    .aftersale-toast.is-collapsed { box-shadow: 0 4px 12px rgba(62,51,37,.06); }
    .aftersale-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eee7dc; color: #4c4439; font-size: 12px; font-weight: 800; cursor: grab; user-select: none; touch-action: none; }
    .aftersale-toast-stack.dragging .aftersale-toast-head { cursor: grabbing; }
    .aftersale-toast-heading { min-width: 0; display: inline-flex; align-items: center; gap: 9px; }
    .aftersale-toast-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #332f2a; font-size: 14px; }
    .aftersale-toast-symbol { width: 26px; height: 26px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 9px 9px 3px 9px; color: #9a4d08; background: #ffedd2; font-size: 12px; font-weight: 900; }
    .aftersale-toast-head-tools { display: inline-flex; align-items: center; gap: 7px; }
    .aftersale-toast-drag-hint { color: #8c8981; font-size: 11px; font-weight: 700; }
    .aftersale-toast-toggle { min-width: 42px; height: 24px; padding: 0 8px; border: 1px solid #d9e6e1; border-radius: 8px 8px 3px 8px; box-shadow: none; color: #087f71; background: #f4fbf8; font-size: 11px; font-weight: 800; }
    .aftersale-toast-close { width: 24px; min-width: 24px; height: 24px; padding: 0; border: 0; box-shadow: none; background: transparent; color: #98a2b3; font-size: 18px; line-height: 1; }
    .aftersale-toast-product { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; padding: 14px; }
    .aftersale-toast-product img, .aftersale-toast-placeholder { width: 76px; height: 76px; border-radius: 13px 13px 5px 13px; object-fit: cover; background: #f1eee8; }
    .aftersale-toast-placeholder { display: grid; place-items: center; color: #98a2b3; font-size: 24px; font-weight: 900; }
    .aftersale-toast-title { color: #272c2a; font-weight: 900; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aftersale-toast-meta { margin-top: 7px; color: #756f66; font-size: 12px; line-height: 1.45; }
    .aftersale-toast-reference { margin-top: 7px; color: #756f66; font-size: 11px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aftersale-toast-status { width: fit-content; margin-top: 9px; padding: 4px 8px; border-radius: 8px 8px 3px 8px; color: #a54728; background: #fff0e7; font-size: 12px; font-weight: 900; }
    .aftersale-toast-deadline { margin-top: 7px; color: #756f66; font-size: 12px; }
    .aftersale-toast-deadline strong { color: #d14932; font-weight: 900; }
    .aftersale-toast-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px 13px; border-top: 1px solid #eee7dc; background: #faf7f1; }
    .aftersale-toast-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #756f66; font-size: 11px; }
    .aftersale-toast-actions { display: inline-flex; align-items: center; gap: 8px; }
    .aftersale-toast-foot button { height: 34px; min-width: 76px; border-radius: 10px 10px 4px 10px; box-shadow: none; font-weight: 900; }
    .aftersale-toast-foot button[data-after-toast-action="later"] { color: #5f5a52; background: #fffdfa; border-color: #d9d1c5; }
    .aftersale-toast-foot button[data-after-toast-action="open"] { color: #fff; background: var(--brand); border-color: var(--brand); }
    .aftersale-toast.is-collapsed .aftersale-toast-head { padding-top: 10px; padding-bottom: 10px; border-bottom: 0; }
    .aftersale-toast.is-collapsed .aftersale-toast-product,
    .aftersale-toast.is-collapsed .aftersale-toast-foot { display: none; }
    .notice { padding: 10px 12px; border: 1px solid #a8ded4; border-radius: 10px; background: var(--brand-soft); color: var(--brand-deep); }
    .notice.error { border-color: #fecaca; background: var(--red-soft); color: #b42318; }

    .mobile-section-tabs { display: none; }
    .resize-handle { display: none; }

    @media (max-width: 1380px) {
      :root { --rail-w: 58px; --composer-h: 132px; }
      .workspace { grid-template-columns: var(--rail-w) minmax(250px, 300px) minmax(0, 1fr) minmax(240px, 290px); gap: 10px; padding-inline: 10px; }
      .chat-composer { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60px 40px; align-content: center; padding-inline: 16px; }
      #replyText { grid-column: 1; }
      .composer-actions { grid-column: 1; width: 100%; justify-content: flex-start; padding-bottom: 2px; }
      .composer-actions button { min-width: 52px; padding: 0 10px; }
      .bubble { max-width: min(560px, 62vw); }
    }

    @media (max-width: 760px) {
      :root { --topbar-h: auto; --composer-h: 126px; --rail-w: 0px; }
      html, body { overflow: hidden; background: #fff; }
      .app { inset: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; grid-template-rows: auto minmax(0,1fr); }
      .topbar { height: auto; min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px 14px 12px; border-bottom: 1px solid var(--line); }
      .brand { gap: 12px; }
      .mark { width: 46px; height: 46px; background: var(--brand); color: #fff; border-radius: 12px; }
      .brand h1 { font-size: 20px; }
      .brand p { font-size: 13px; white-space: normal; }
      .top-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
      .account-pill { max-width: none; justify-content: center; }
      .nav-btn { width: 100%; height: 44px; padding: 0 8px; font-size: 16px; }
      .duty-pill { grid-column: 1 / 3; height: 42px; justify-content: center; padding: 0 10px; }
      .status { grid-column: 3 / 5; height: 42px; align-items: center; }
      .workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 0; padding: 0; overflow: hidden; background: #fff; }
      .desk-rail, .resize-handle { display: none; }
      .mobile-section-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); background: #fff; }
      .mobile-section-tabs button { height: 48px; border-radius: 14px; font-size: 18px; font-weight: 900; box-shadow: none; }
      .mobile-section-tabs button.active { color: var(--brand); background: var(--brand-soft); border-color: #a8ded4; }
      .sidebar, .detail, .chat { grid-column: 1; grid-row: 2; display: none; height: 100%; border: 0; border-radius: 0; }
      .workspace.mobile-view-list .sidebar,
      .workspace.mobile-view-chat .chat,
      .workspace.mobile-view-handoff .detail { display: grid; }
      .account-stores-workspace { grid-column: 1; grid-row: 2; border-radius: 0; padding: 12px; }
      .dropship-workspace { grid-column: 1; grid-row: 2; padding: 12px; }
      .compensation-workspace { grid-column: 1; grid-row: 2; padding: 12px; }
      .workspace.account-stores-mode .account-stores-workspace { display: grid; }
      .workspace.dropship-mode .dropship-workspace { display: grid; }
      .workspace.compensation-mode .compensation-workspace { display: block; }
      .account-stores-head { border-radius: 14px; padding: 14px; }
      .account-store-body { border-radius: 14px; grid-template-columns: 1fr; padding: 12px; }
      .dropship-filters { grid-template-columns: 1fr; }
      .dropship-filter.wide { grid-column: span 1; }
      .dropship-board-head, .dropship-supplier { align-items: stretch; flex-direction: column; }
      .dropship-detail-grid { grid-template-columns: 1fr; }
      .dropship-auto-modes { grid-template-columns: 1fr; }
      .dropship-auto-head { grid-template-columns: 36px minmax(0,1fr) 36px; padding: 18px 16px 8px; }
      .dropship-auto-body { padding: 14px 16px 18px; }
      .dropship-supplier-invite, .dropship-supplier-row { grid-template-columns: 1fr; }
      .dropship-supplier-page-head { flex-direction: column; align-items: stretch; }
      .dropship-supplier-tabs { gap: 18px; overflow-x: auto; }
      .dropship-supplier-page-table .dropship-supplier-row { grid-template-columns: 1fr; }
      .account-store-pagination { justify-content: center; border-radius: 14px; border-top: 1px solid var(--line); margin-top: 0; }
      .sidebar, .detail { grid-template-rows: minmax(0,1fr) 64px; }
      .panel-head { display: none; }
      .conversation-list, .handoff-list { padding: 12px; }
      .conversation { min-height: 92px; border-radius: 18px; box-shadow: 0 1px 6px rgba(15,23,42,.06); }
      .chat { grid-template-rows: 56px minmax(0,1fr) var(--composer-h); background: #ededed; }
      .callback-config-alert { top: 68px; left: 50%; width: calc(100% - 20px); grid-template-columns: 34px minmax(0,1fr) auto; padding: 12px; }
      .callback-config-alert-icon { width: 34px; height: 34px; }
      .callback-config-issue-item { grid-template-columns: 1fr; }
      .callback-config-issue-actions { justify-content: flex-end; }
      .chat.composer-compact { grid-template-rows: 56px minmax(0,1fr) var(--composer-h); }
      .chat-head { height: 56px; border-radius: 0; padding: 0 14px; }
      .chat-title strong { font-size: 16px; }
      .chat-title span { font-size: 12px; }
      .chat-tools { display: none; }
      .message-area { padding: 14px 12px 18px; background: #ededed; }
      .bubble { max-width: calc(100vw - 96px); border-radius: 10px; padding: 10px 12px; }
      .msg-row { margin-bottom: 16px; gap: 8px; }
      .msg-avatar { width: 34px; height: 34px; }
      .order-card.return-refund-order-card { width: min(100%, calc(100vw - 122px)); }
      .return-refund-order-card .order-product { grid-template-columns: 52px minmax(0,1fr); padding: 11px; }
      .return-refund-order-card .order-product img,
      .return-refund-order-card .order-product-placeholder { width: 52px; height: 52px; }
      .return-refund-price { grid-column: 1 / -1; font-size: 18px; }
      .return-refund-status-bar { align-items: flex-start; flex-direction: column; }
      .return-refund-main { grid-template-columns: 1fr; padding: 12px 12px 0; }
      .return-refund-panel { padding: 0 0 12px; }
      .return-refund-panel + .return-refund-panel { padding: 12px 0; border-top: 1px solid #eef0f3; border-left: 0; }
      .return-refund-actions { flex-wrap: wrap; padding-inline: 12px; }
      .return-refund-actions > button,
      .return-refund-actions summary { flex: 1 1 120px; min-width: 0; }
      .return-refund-merchant-note { margin-inline: 12px; }
      .order-card.editorial-order-card { width: min(100%, calc(100vw - 122px)); }
      .editorial-order-card .order-product { grid-template-columns: 52px minmax(0,1fr); padding: 11px; }
      .editorial-order-card .order-product img,
      .editorial-order-card .order-product-placeholder { width: 52px; height: 52px; }
      .editorial-product-meta { grid-column: 1 / -1; width: 100%; grid-template-columns: minmax(0,1fr) auto; align-items: center; justify-items: start; }
      .editorial-product-meta .editorial-price { justify-self: end; }
      .editorial-status-bar { align-items: flex-start; flex-direction: column; }
      .refund-only-summary { grid-template-columns: 1fr 1fr; padding-inline: 12px; }
      .refund-only-summary .editorial-summary-item:first-child { grid-column: 1 / -1; }
      .editorial-info-line { flex-wrap: wrap; padding-inline: 12px; }
      .editorial-info-line .editorial-info-grow { flex-basis: calc(100% - 72px); }
      .editorial-order-actions { flex-wrap: wrap; padding-inline: 12px; }
      .editorial-order-actions > button,
      .editorial-order-actions > .editorial-order-more { flex: 1 1 120px; }
      .editorial-order-notes { grid-template-columns: 1fr; margin-inline: 12px; }
      .chat-composer {
        height: var(--composer-h);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 48px 42px;
        align-content: center;
        padding: 10px;
        gap: 8px;
        background: #f7f7f7;
        border-top: 1px solid #ddd;
      }
      #replyText { height: 48px; min-height: 48px; max-height: 48px; padding: 12px 14px; border-radius: 12px; }
      .composer-actions { grid-column: 1; width: 100%; gap: 6px; overflow-x: auto; justify-content: flex-start; max-width: none; padding-bottom: 2px; }
      .composer-actions button { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 0; }
      .composer-actions #emojiBtn::before { content: "\8868"; font-size: 13px; }
      .composer-actions #orderCardBtn::before { content: "\5feb"; font-size: 13px; }
      .composer-actions #sendBtn { width: 58px; min-width: 58px; border-radius: 12px; font-size: 15px; }
      .reply-media-preview { left: 10px; width: calc(100% - 20px); }
      .quick-reply-bar, .emoji-panel { left: 10px; right: 10px; bottom: calc(100% + 6px); max-height: 42vh; }
      .product-card, .order-card, .wx-card { width: min(82vw, 360px); }
      .store-page { padding: 12px; }
      .store-layout { grid-template-columns: 1fr; }
      .admin-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .admin-tools, .store-form, .quick-reply-row, .aftersale-popup-options { grid-template-columns: 1fr; }
      .after-form, .price-diff-form { grid-template-columns: 1fr; }
      .aftersale-workflow-head { align-items: stretch; flex-direction: column; }
      .aftersale-workflow-actions { justify-content: flex-start; }
      .workflow-rule-editor-summary,
      .workflow-editor-top-row,
      .workflow-flow-layout,
      .workflow-rule-param-grid,
      .workflow-rule-form-grid,
      .workflow-condition-row,
      .workflow-action-grid { grid-template-columns: 1fr; }
      .workflow-condition-row.is-external-procurement { grid-template-columns: 1fr; }
      .price-diff-product { grid-template-columns: 56px minmax(0,1fr); }
      .price-diff-product-meta { grid-column: 2; text-align: left; }
      .after-label { padding-top: 0; }
      .after-options { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 10px; }
      .after-options-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .after-options label { font-size: 14px; white-space: normal; }
      .after-actions { grid-column: 1; }
      .after-detail-status { grid-template-columns: minmax(0, 1fr); gap: 18px; }
      .after-detail-actions-shell { width: 100%; min-width: 0; justify-items: stretch; }
      .after-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
        max-width: none;
        gap: 8px;
      }
      .after-detail-actions button { width: 100%; min-width: 0; padding: 0 8px; }
      .after-action-popover {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 16px;
      }
      .after-action-popover::before { display: none; }
      .after-action-popover-row { grid-template-columns: 72px minmax(0, 1fr); }
      .after-action-popover-address-row { grid-template-columns: minmax(0, 1fr); }
      .after-action-address-tools { align-items: flex-start; flex-direction: column; }
      .after-action-address-buttons { width: 100%; }
      .after-action-address-buttons button { flex: 1 1 0; }
      .after-action-new-address { grid-template-columns: minmax(0, 1fr); }
      .after-action-new-address .wide { grid-column: 1; }
      .after-detail-grid { grid-template-columns: minmax(0, 1fr); }
      .modal-mask { padding: 10px; }
      .after-modal, .price-diff-modal, .return-refund-accept-modal, .logistics-modal, .external-procurement-modal, .image-preview-modal, .video-preview-modal, .quick-reply-modal, .bulk-store-modal, .integration-doc-modal, .dropship-auto-modal, .dropship-supplier-modal, .dropship-unbind-modal, .price-change-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
      .return-refund-accept-body { overflow: auto; }
      .return-refund-address-toolbar, .return-refund-address-fields { grid-template-columns: 1fr; }
      .return-refund-address-fields .wide { grid-column: auto; }
      .video-preview-modal { height: calc(100dvh - 20px); }
      .video-preview-footer { align-items: stretch; flex-direction: column; }
      .video-preview-actions { width: 100%; }
      .video-preview-actions a, .video-preview-actions button { flex: 1 1 0; }
      .price-change-toolbar { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 10px; }
      .price-change-table-wrap { padding: 0 16px; }
      .price-change-footer { padding: 16px; }
      .compensation-filters { grid-template-columns: 1fr; }
      .compensation-head { display: grid; }
      .compensation-total { text-align: left; }
      .compensation-row, .compensation-head-row { grid-template-columns: 1fr; }
      .ticket-filters { grid-template-columns: 1fr; }
      .ticket-row, .ticket-head-row { grid-template-columns: 1fr; min-width: 0; }
      .ticket-detail-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 22px; }
      .ticket-detail-grid { grid-template-columns: 1fr; }
    }

    /* Third-direction customer-service visual system. Keep this block last so
       the selected mock remains the desktop visual source of truth. */
    .app-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      flex: 0 0 auto;
      color: inherit;
      background: currentColor;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
    .app-icon-messages { -webkit-mask-image: url("/assets/icons/tabler/messages.svg"); mask-image: url("/assets/icons/tabler/messages.svg"); }
    .app-icon-shield-check { -webkit-mask-image: url("/assets/icons/tabler/shield-check.svg"); mask-image: url("/assets/icons/tabler/shield-check.svg"); }
    .app-icon-coins { -webkit-mask-image: url("/assets/icons/tabler/coins.svg"); mask-image: url("/assets/icons/tabler/coins.svg"); }
    .app-icon-clipboard-text { -webkit-mask-image: url("/assets/icons/tabler/clipboard-text.svg"); mask-image: url("/assets/icons/tabler/clipboard-text.svg"); }
    .app-icon-shopping-bag { -webkit-mask-image: url("/assets/icons/tabler/shopping-bag.svg"); mask-image: url("/assets/icons/tabler/shopping-bag.svg"); }
    .app-icon-hexagon-filled { -webkit-mask-image: url("/assets/icons/tabler/hexagon-filled.svg"); mask-image: url("/assets/icons/tabler/hexagon-filled.svg"); }
    .app-icon-mood-smile { -webkit-mask-image: url("/assets/icons/tabler/mood-smile.svg"); mask-image: url("/assets/icons/tabler/mood-smile.svg"); }
    .app-icon-message-circle { -webkit-mask-image: url("/assets/icons/tabler/message-circle.svg"); mask-image: url("/assets/icons/tabler/message-circle.svg"); }
    .app-icon-clipboard-heart { -webkit-mask-image: url("/assets/icons/tabler/clipboard-heart.svg"); mask-image: url("/assets/icons/tabler/clipboard-heart.svg"); }
    .app-icon-alert-circle-filled { -webkit-mask-image: url("/assets/icons/tabler/alert-circle-filled.svg"); mask-image: url("/assets/icons/tabler/alert-circle-filled.svg"); }
    .app-icon-bookmark-filled { -webkit-mask-image: url("/assets/icons/tabler/bookmark-filled.svg"); mask-image: url("/assets/icons/tabler/bookmark-filled.svg"); }
    .app-icon-triangle-filled { -webkit-mask-image: url("/assets/icons/tabler/triangle-filled.svg"); mask-image: url("/assets/icons/tabler/triangle-filled.svg"); }
    .app-icon-arrows-move { -webkit-mask-image: url("/assets/icons/tabler/arrows-move.svg"); mask-image: url("/assets/icons/tabler/arrows-move.svg"); }
    .app-icon-send { -webkit-mask-image: url("/assets/icons/tabler/send.svg"); mask-image: url("/assets/icons/tabler/send.svg"); }
    .composer-actions #emojiBtn::before,
    .composer-actions #orderCardBtn::before { content: none; }

    @media (min-width: 761px) {
      :root {
        --topbar-h: clamp(62px, 3vw, 68px);
        --rail-w: 4.3vw;
        --composer-h: 132px;
        --shell: #f7faf9;
        --chat-bg: #f8fbfa;
        --line: #e4ece9;
        --line-strong: #cdded9;
        --text: #14211f;
        --muted: #667a75;
        --subtle: #91a39e;
        --brand: #087f71;
        --brand-deep: #045c53;
        --brand-soft: #e8f7f3;
        --ai: #eff9e9;
        --manual: #eef7ff;
        --manual-accent: #1976c9;
      }
      body { font-size: clamp(13px, .82vw, 17px); letter-spacing: 0; }
      .app { background: #f7faf9; }
      .topbar {
        position: relative;
        height: var(--topbar-h);
        padding: 0 16px;
        background-color: #fff;
        background-image:
          radial-gradient(ellipse 290px 76px at 350px -12px, rgba(8,127,113,.12), transparent 72%),
          radial-gradient(ellipse 220px 62px at 520px 8px, rgba(103,207,177,.13), transparent 70%),
          linear-gradient(108deg, rgba(229,248,242,.45), transparent 42%);
        border-bottom-color: #e5eeeb;
      }
      .topbar > * { position: relative; z-index: 1; }
      .brand { gap: 11px; }
      .mark {
        width: 42px;
        height: 42px;
        border-radius: 12px 12px 5px 12px;
        background: #087f71;
        box-shadow: 0 7px 18px rgba(8,127,113,.18);
        font-size: 18px;
      }
      .brand h1 { font-size: clamp(19px, 1.12vw, 23px); letter-spacing: -.03em; }
      .brand p { margin-top: 3px; color: #748782; font-size: clamp(11px, .65vw, 13px); }
      .top-actions { gap: 9px; }
      .nav-btn, .help-link, .account-pill, .duty-pill {
        height: 36px;
        border-radius: 10px;
        box-shadow: none;
      }
      .nav-btn.active {
        position: relative;
        color: #087f71;
        background: #effaf7;
        border-color: #c6e9e1;
      }
      .nav-btn.active::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -1px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #087f71;
      }
      .help-link { color: #087f71; background: #f0faf7; border-color: #caebe4; }
      .account-pill { background: rgba(255,255,255,.92); border-color: #e2ebe8; }
      .duty-pill.on { color: #065e54; background: #eef9f6; border-color: #c4e7df; }

      html[data-workspace-view="chat"] .workspace {
        grid-template-columns: var(--rail-w) 19.25vw minmax(0, 1fr) 19.7vw;
        gap: .75vw;
        padding: 0 .75vw .9vw 0;
        background: #f7faf9;
      }
      .desk-rail {
        gap: clamp(6px, .48vw, 10px);
        padding: clamp(18px, 1.18vw, 24px) max(5px, .42vw) 12px;
        border-radius: 0 0 18px 0;
        background: #045f56;
        box-shadow: 8px 18px 30px rgba(4,95,86,.13);
      }
      .rail-btn {
        width: calc(var(--rail-w) - max(10px, .84vw));
        height: clamp(66px, 4.35vw, 90px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(5px, .34vw, 7px);
        padding: 0;
        border-radius: 14px 14px 5px 14px;
        color: #e2faf4;
        background: rgba(255,255,255,.055);
        font-size: clamp(12px, .72vw, 15px);
        letter-spacing: .02em;
      }
      .rail-icon-wrap {
        width: clamp(36px, 2.2vw, 46px);
        height: clamp(36px, 2.2vw, 46px);
        display: grid;
        place-items: center;
        border-radius: 12px 12px 4px 12px;
        background: rgba(255,255,255,.08);
      }
      .rail-btn .app-icon { width: clamp(24px, 1.45vw, 30px); height: clamp(24px, 1.45vw, 30px); }
      .rail-btn .rail-label { line-height: 1; }
      .rail-btn:hover { color: #fff; background: rgba(255,255,255,.11); }
      .rail-btn.active,
      html[data-workspace-view="chat"] #chatRailBtn,
      html[data-workspace-view="aftersale"] #aftersaleRailBtn,
      html[data-workspace-view="compensation"] #compensationRailBtn,
      html[data-workspace-view="tickets"] #ticketRailBtn,
      html[data-workspace-view="stores"] #accountStoresRailBtn {
        color: #fff;
        background: rgba(21,164,149,.42);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,49,44,.18);
      }
      .rail-btn.active .rail-icon-wrap,
      html[data-workspace-view="chat"] #chatRailBtn .rail-icon-wrap,
      html[data-workspace-view="aftersale"] #aftersaleRailBtn .rail-icon-wrap,
      html[data-workspace-view="compensation"] #compensationRailBtn .rail-icon-wrap,
      html[data-workspace-view="tickets"] #ticketRailBtn .rail-icon-wrap,
      html[data-workspace-view="stores"] #accountStoresRailBtn .rail-icon-wrap {
        color: #05675d;
        background: #e9faf5;
      }
      .rail-badge { right: 0; top: 2px; border-color: #045f56; }

      html[data-workspace-view="chat"] .sidebar,
      html[data-workspace-view="chat"] .detail,
      html[data-workspace-view="chat"] .chat {
        height: auto;
        margin-top: 12px;
        margin-bottom: 14px;
        border-color: #e3ebe8;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(27,67,59,.045);
      }
      html[data-workspace-view="chat"] .sidebar,
      html[data-workspace-view="chat"] .detail { grid-template-rows: 60px minmax(0,1fr) 62px; }
      html[data-workspace-view="chat"] .detail { grid-template-rows: 60px minmax(0,1fr); }
      html[data-workspace-view="chat"] .panel-head {
        height: 60px;
        padding: 0 clamp(16px, 1vw, 21px);
        border-bottom-color: #edf2f0;
      }
      html[data-workspace-view="chat"] .sidebar .panel-head,
      html[data-workspace-view="chat"] .detail .panel-head { padding-inline: 20px; }
      .panel-title { gap: 4px; }
      .panel-heading-line { gap: 7px; }
      .panel-title strong { font-size: clamp(17px, 1.06vw, 22px); line-height: 1.15; letter-spacing: -.02em; }
      .panel-title > span { color: #7b8d88; font-size: clamp(11px, .7vw, 14px); }
      .panel-symbol {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 15px;
        height: 15px;
      }
      .panel-symbol .app-icon { width: 15px; height: 15px; }
      .panel-symbol-ai { color: #087f71; }
      .panel-symbol-manual { color: #ef5c52; }
      .panel-count {
        min-width: clamp(22px, 1.45vw, 30px);
        height: clamp(21px, 1.36vw, 28px);
        padding: 0 clamp(6px, .4vw, 8px);
        border: 0;
        border-radius: 7px 7px 7px 2px;
        color: #0d665c;
        background: #e2f3ee;
        font-size: clamp(11px, .68vw, 14px);
      }
      .detail .panel-count { color: #a94039; background: #ffe9e7; }
      #refreshBtn {
        height: clamp(34px, 2.2vw, 46px);
        padding: 0 clamp(13px, .85vw, 18px);
        border-radius: 10px 10px 4px 10px;
        border-color: #d7e5e1;
        box-shadow: none;
        font-size: clamp(12px, .76vw, 15px);
      }

      .conversation-list, .handoff-list { scrollbar-width: thin; scrollbar-color: #b7c4c0 transparent; }
      .conversation-list { padding: 0 14px 10px; }
      .handoff-list { padding: 18px 14px 12px; }
      .conversation {
        position: relative;
        grid-template-columns: 44px minmax(0,1fr);
        gap: 12px;
        height: 88px;
        min-height: 88px;
        margin: 0 0 4px;
        padding: 7px 12px;
        border: 1px solid transparent;
        border-radius: 12px 12px 4px 12px;
        overflow: hidden;
        background: #fff;
        transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
      }
      .conversation:hover { transform: none; border-color: #dceae6; background: #f9fcfb; }
      .conversation.active {
        height: 88px;
        min-height: 88px;
        padding: 7px 12px;
        border-color: #b7ded4;
        background: #f1fbf8;
        box-shadow: inset 4px 0 0 #087f71, 0 7px 18px rgba(8,127,113,.065);
      }
      .conversation.unread { background: #f3fbf8; }
      .conversation .avatar.avatar-hex {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .avatar-hex .app-icon {
        position: absolute;
        inset: 0;
        width: 44px;
        height: 44px;
        color: #dff1ff;
      }
      .avatar-hex .avatar-letter {
        position: relative;
        z-index: 1;
        color: #17659a;
        font-size: clamp(14px, .86vw, 18px);
        font-weight: 900;
      }
      .conversation.marked .avatar.avatar-hex { background: transparent; box-shadow: none; }
      .conversation.marked .avatar-hex .app-icon { color: #ffdfb0; }
      .conversation.marked .avatar-hex .avatar-letter { color: #9b4c10; }
      .conv-main { min-width: 0; overflow: hidden; }
      .conv-top { gap: 0 6px; }
      .conv-title-line { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
      .conv-title-line strong,
      .conv-top > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; font-size: 15px; line-height: 19px; }
      .conv-user-id { overflow: hidden; color: #738681; text-overflow: ellipsis; font-size: 11px; line-height: 15px; }
      .conv-time { padding-top: 1px; font-size: 11px; line-height: 17px; }
      .conv-preview { height: 17px; margin-top: 1px; font-size: 12px; line-height: 17px; }
      .badges, .conv-tags { min-width: 0; flex-wrap: nowrap; gap: 5px; margin-top: 2px; overflow: hidden; }
      .badge, .conv-tags span, .handoff-inline-set, .handoff-inline-clear {
        min-height: 18px;
        padding: 0 7px;
        border-radius: 8px 8px 3px 8px;
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
      }
      .marked-badge { min-height: 17px !important; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 5px !important; border: 1px solid #ffc983; color: #ad5313 !important; background: #fff0db !important; border-color: #ffc983 !important; font-size: 10px !important; line-height: 15px !important; }
      .marked-badge .app-icon { width: 10px; height: 10px; margin-right: 3px; }
      .marked-corner {
        position: absolute;
        right: -9px;
        bottom: -9px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        color: #087f71;
        pointer-events: none;
      }
      .marked-corner .app-icon { width: 30px; height: 30px; transform: rotate(135deg); }
      .handoff-inline-set, .handoff-inline-clear { color: #087f71; background: #eefaf7; border-color: #c3e7de; }
      .history-search-wrap { min-height: 62px; padding: 10px; grid-template-columns: minmax(0,1fr) 58px; }
      .history-search-input, .history-search-btn { height: 40px; }
      .history-search-input { border-radius: 10px 10px 4px 10px; font-size: clamp(11px, .7vw, 14px); }
      .history-search-btn { border-radius: 10px 10px 4px 10px; }

      #handoffList .conversation {
        position: relative;
        height: 106px;
        min-height: 106px;
        margin-bottom: 10px;
        padding: 8px 10px;
        align-items: start;
        overflow: hidden;
        border-color: transparent;
        background: #fff;
      }
      #handoffList .conversation.attention {
        padding-left: 14px;
        border-color: #edf0ef;
        background: #f8fbfa;
        box-shadow: 0 7px 18px rgba(26,49,45,.045);
      }
      #handoffList .conversation.attention::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: #ff625b;
      }
      #handoffList .avatar { width: clamp(42px, 2.42vw, 50px); height: clamp(42px, 2.42vw, 50px); }
      #handoffList .conv-main {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 3px;
        overflow: hidden;
      }
      #handoffList .conv-top strong { line-height: 18px; }
      #handoffList .conv-user-id { line-height: 13px; }
      #handoffList .conv-preview { line-height: 17px; }
      #handoffList .conv-tags { margin-top: 3px; overflow: visible; }
      #handoffList .pending-badge {
        color: #e04b43;
        background: #fff1f0;
        border-color: #ffc8c3;
        box-shadow: none;
      }
      #handoffList .unread-badge { display: none; }

      html[data-workspace-view="chat"] .chat {
        grid-template-rows: 60px minmax(0,1fr) var(--composer-h);
        background: #fff;
      }
      html[data-workspace-view="chat"] .chat-head {
        height: 60px;
        padding: 0 clamp(16px, 1vw, 21px);
        border-radius: 17px 17px 0 0;
        border-bottom: 1px solid #eaf0ee;
        box-shadow: none;
      }
      .chat-title { gap: 11px; }
      .chat-title .avatar { width: clamp(42px, 2.42vw, 50px); height: clamp(42px, 2.42vw, 50px); }
      .chat-title .chat-avatar-hex {
        position: relative;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .chat-avatar-hex .app-icon {
        position: absolute;
        inset: 0;
        width: clamp(42px, 2.42vw, 50px);
        height: clamp(42px, 2.42vw, 50px);
        color: #dff1ff;
      }
      .chat-avatar-hex .avatar-letter { position: relative; z-index: 1; color: #17659a; font-weight: 900; }
      .chat-title strong { font-size: clamp(16px, .98vw, 20px); }
      .chat-title span { margin-top: 3px; font-size: clamp(11px, .68vw, 14px); }
      .previous-conversation-btn, .handoff-clear-btn {
        height: clamp(34px, 2.15vw, 44px);
        border-radius: 10px 10px 4px 10px;
        font-size: clamp(11px, .7vw, 14px);
      }
      .message-area {
        padding: 11px 27px 20px 14px;
        background: #f8fbfa;
        box-shadow: inset 1px 0 0 #edf2f0, inset -1px 0 0 #edf2f0;
      }
      .msg-row { position: relative; gap: clamp(10px, .58vw, 12px); margin-bottom: 14px; }
      .msg-row.inbound { gap: 6px; }
      .msg-avatar {
        position: relative;
        width: clamp(38px, 2.2vw, 46px);
        height: clamp(38px, 2.2vw, 46px);
        border-radius: 10px 10px 4px 10px;
        background: #e8f3fb;
        box-shadow: none;
      }
      .msg-avatar .app-icon {
        position: absolute;
        inset: 0;
        width: clamp(38px, 2.2vw, 46px);
        height: clamp(38px, 2.2vw, 46px);
        color: #d9ecff;
      }
      .msg-avatar-label { position: relative; z-index: 1; }
      .msg-row.ai .msg-avatar { display: none; }
      .bubble {
        max-width: min(35.2vw, 720px);
        padding: 10px clamp(16px, .9vw, 19px);
        border-color: #e1e9e6;
        border-radius: 12px 12px 12px 4px;
        line-height: 1.5;
        box-shadow: 0 7px 20px rgba(28,66,58,.055);
        font-size: 13px;
      }
      .msg-row.outbound .bubble {
        border-radius: 12px 12px 4px 12px;
        background: #f0f9eb;
        border-color: #b8dda2;
      }
      .msg-row.inbound .bubble { font-size: 13px; }
      .msg-row.inbound:not(.business-card-message) .bubble { border-left: 4px solid #1976c9; }
      .msg-row.manual .bubble {
        width: min(32vw, 660px);
        background: #eef7ff;
        border-color: #9bc6ee;
        border-right: 4px solid #1976c9;
        color: #183b61;
        box-shadow: 0 8px 22px rgba(25,118,201,.08);
      }
      .bubble-meta { margin-bottom: clamp(7px, .42vw, 9px); font-size: clamp(10px, .64vw, 13px); }
      .message-source-flag {
        position: absolute;
        right: -7px;
        top: -8px;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        color: #fff;
      }
      .message-source-flag .app-icon {
        position: absolute;
        inset: 0;
        width: 34px;
        height: 34px;
        color: #087f71;
        transform: rotate(45deg);
      }
      .message-source-flag b { position: relative; z-index: 1; font-size: 9px; letter-spacing: -.02em; }

      .chat-composer {
        height: var(--composer-h);
        grid-template-rows: clamp(48px, 3vw, 62px) clamp(36px, 2.25vw, 46px);
        gap: clamp(6px, .46vw, 9px);
        padding: clamp(8px, .6vw, 12px) clamp(14px, .9vw, 19px) clamp(10px, .7vw, 14px);
        align-content: center;
        background: #fff;
        border-top-color: #e5ece9;
      }
      #replyText {
        height: clamp(48px, 3vw, 62px);
        min-height: clamp(48px, 3vw, 62px);
        max-height: clamp(48px, 3vw, 62px);
        padding: clamp(12px, .72vw, 15px) clamp(14px, .9vw, 19px);
        border: 1px solid #dce7e3;
        border-radius: 10px 10px 4px 10px;
        box-shadow: 0 5px 14px rgba(24,62,54,.04);
        font-size: clamp(12px, .74vw, 15px);
      }
      .composer-actions { height: clamp(36px, 2.25vw, 46px); gap: clamp(7px, .45vw, 9px); }
      .composer-actions button {
        height: clamp(34px, 2.1vw, 44px);
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 clamp(11px, .7vw, 15px);
        border-radius: 9px 9px 3px 9px;
        border-color: #dce7e3;
        background: #fff;
        box-shadow: 0 4px 12px rgba(25,62,54,.04);
        color: #2d4540;
        font-size: clamp(11px, .7vw, 14px);
      }
      .composer-actions button .app-icon { width: 17px; height: 17px; color: #087f71; }
      .composer-actions #sendBtn {
        min-width: clamp(88px, 5.4vw, 112px);
        margin-left: auto;
        border-radius: 10px 10px 4px 10px;
        color: #fff;
        background: #087f71;
        border-color: #087f71;
        box-shadow: 0 7px 16px rgba(8,127,113,.15);
      }
      .composer-actions #sendBtn .app-icon { width: 15px; height: 15px; color: #fff; }

      .aftersale-toast-stack {
        right: clamp(22px, 2.1vw, 36px);
        bottom: clamp(22px, 3vw, 50px);
        width: min(340px, calc(100vw - 32px));
        max-height: min(430px, calc(100vh - 32px));
        overflow: hidden;
        border: 1px solid #c9ded8;
        border-radius: 14px 14px 5px 14px;
        background: #fff;
        box-shadow: 0 22px 56px rgba(15,61,53,.18), 0 3px 10px rgba(15,61,53,.08);
      }
      .aftersale-toast-list {
        gap: 12px;
        width: calc(100% - 20px);
        max-height: min(412px, calc(100vh - 50px));
        margin: 8px 12px 10px 8px;
        padding: 4px 8px 8px 4px;
        overflow: hidden;
      }
      .aftersale-toast-collapsed-list { gap: 10px; scrollbar-gutter: stable; }
      .aftersale-toast-stack.resized .aftersale-toast-list { height: calc(100% - 18px); max-height: none; }
      .aftersale-toast { border: 1px solid #e4efeb; border-radius: 14px 14px 5px 14px; background: #fff; box-shadow: 0 10px 24px rgba(15,61,53,.08); }
      .aftersale-toast.is-collapsed { box-shadow: 0 5px 14px rgba(15,61,53,.06); }
      .aftersale-toast-head { padding: 12px 14px; border-bottom-color: #e8efec; color: #1e4a43; }
      .aftersale-toast-symbol {
        width: 24px;
        height: 24px;
        border-radius: 0;
        color: #ef554c;
        background: transparent;
      }
      .aftersale-toast-symbol .app-icon { width: 22px; height: 22px; }
      .aftersale-toast-heading strong { color: #154c43; font-size: 14px; }
      .aftersale-toast-drag-hint { display: inline-flex; align-items: center; gap: 4px; color: #6e827d; }
      .aftersale-toast-drag-hint .app-icon { width: 14px; height: 14px; }
      .aftersale-toast-toggle { border-color: #cfe4dd; color: #087f71; background: #f3fbf8; }
      .aftersale-toast-product { grid-template-columns: 80px minmax(0,1fr); padding: 15px 16px; }
      .aftersale-toast-product img, .aftersale-toast-placeholder { width: 80px; height: 80px; border-radius: 10px 10px 3px 10px; }
      .aftersale-toast-status { color: #d9473f; background: #fff0ee; }
      .aftersale-toast-deadline strong { color: #e14940; }
      .aftersale-toast-foot { padding: 19px 16px 22px; background: #fff; border-top-color: #e8efec; }
      .aftersale-toast-foot > span:first-child { display: none; }
      .aftersale-toast-actions { width: 100%; gap: 18px; }
      .aftersale-toast-foot button { flex: 1 1 0; height: 40px; border-radius: 9px 9px 3px 9px; }
      .aftersale-toast-resize-handle::after { opacity: .92; }
      .aftersale-toast-resize-handle[data-resize-direction="n"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="s"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="e"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="w"]::after { background: #159a8a; }
      .aftersale-toast-resize-handle[data-resize-direction="nw"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="ne"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="se"]::after,
      .aftersale-toast-resize-handle[data-resize-direction="sw"]::after { border-color: #159a8a; }
    }

    @media (min-width: 761px) and (max-width: 1380px) {
      html[data-workspace-view="chat"] .workspace {
        grid-template-columns: 62px minmax(270px, 296px) minmax(0,1fr) minmax(260px, 292px);
        gap: 9px;
        padding-right: 9px;
      }
      .desk-rail { padding-inline: 4px; }
      .rail-btn { width: 52px; }
      .conversation { grid-template-columns: 38px minmax(0,1fr); padding-inline: 8px; }
      .conversation .avatar.avatar-hex,
      .avatar-hex .app-icon { width: 38px; height: 38px; }
      .message-area { padding-inline: 24px; }
    }