:root {
      --bg: #f4f6fb;
      --card: #ffffff;
      --ink: #111827;
      --muted: #6b7280;
      --line: #e5e7eb;
      --nav: #0f172a;
      --nav-ink: #e5e7eb;
      --btn: #0f172a;
      --ok: #166534;
      --bad: #b91c1c;
    }

    .dashboard-crm-layout .dashboard-crm-wide-block {
      grid-column: 1 / -1;
    }
    .dashboard-calendar-grid .crm-followup-day {
      min-height: 112px;
    }
    .dashboard-calendar-grid .crm-followup-chip {
      text-align: left;
    }
    .crm-followup-time-picker {
      width: 100%;
      min-height: 30px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 7px;
      cursor: pointer;
    }
    .crm-followup-time-picker:hover,
    .crm-followup-time-picker:focus-visible {
      border-color: #2563eb;
      outline: none;
    }
    .crm-followup-time-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }
    .crm-followup-time-controls .btn-ghost {
      min-height: 28px;
      padding: 4px 8px;
      font-size: 11px;
    }
    * { box-sizing: border-box; }
    html, body { max-width: 100%; overflow-x: hidden; height: 100%; }
    body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--ink); }
    body:not(.locked) {
      overflow: hidden;
    }
    body.modal-open {
      overflow: hidden;
    }
    .bootstrap-splash { display: none; min-height: 100vh; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
    body.auth-restoring .bootstrap-splash { display: flex; }
    .bootstrap-splash-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #0f172a; color: #fff; font-size: 22px; font-weight: 700; }
    .bootstrap-splash-title { font-size: 20px; font-weight: 700; }
    .bootstrap-splash-status { margin-top: 3px; color: var(--muted); font-size: 14px; }
    body.auth-restoring #app-shell { display: none; }
    .auth-screen { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 16px; }
    .auth-shell { width: min(920px, 96vw); }
    body.locked .auth-screen { display: flex; }
    body.locked.auth-restoring .auth-screen { display: none; }
    body.locked .layout { display: none; }
    body:not(.locked) .auth-screen { display: none; }
    .layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; width: 100%; }
    .sidebar {
      background: var(--nav);
      color: var(--nav-ink);
      padding: 14px;
      border-right: 1px solid rgba(255,255,255,0.08);
      overflow: auto;
    }
    .brand { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
    .nav-label {
      color: #94a3b8;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 14px 8px 8px;
    }
    .nav-link {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      color: var(--nav-ink);
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 15px;
    }
    .nav-link:hover { background: rgba(255,255,255,0.08); }
    .nav-link.active { background: rgba(255,255,255,0.14); font-weight: 700; }
    .nav-link.child { padding-left: 34px; font-size: 14px; color: #d1d5db; }
    .nav-section { margin-bottom: 6px; border-radius: 10px; }
    .nav-section-head {
      width: 100%;
      border: 0;
      background: transparent;
      color: #e5e7eb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 700;
    }
    .nav-section-head:hover { background: rgba(255,255,255,0.08); }
    .nav-section-body { display: none; padding: 2px 0 8px; }
    .nav-section.open .nav-section-body { display: block; }
    .chev {
      font-size: 12px;
      color: #94a3b8;
      transition: transform 180ms ease;
    }
    .nav-section.open .chev { transform: rotate(180deg); }
    .content { padding: 18px; min-width: 0; }
    .panel { display: none; }
    .panel.active { display: block; }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
    h1, h2, h3 { margin: 0 0 10px; }
    input, select, textarea, button { padding: 9px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 14px; }
    button.action { cursor: pointer; background: var(--btn); color: #fff; border: none; }
    a.action { display: inline-block; cursor: pointer; background: var(--btn); color: #fff; border: none; text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
    pre { background: #f8fafc; color: #111827; border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; white-space: pre-wrap; }
    .ok { color: var(--ok); }
    .bad { color: var(--bad); }
    .muted { color: var(--muted); }
    .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
    .tier-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px;
      background: #fff;
      cursor: pointer;
    }
    .tier-card.active {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
      background: #f8fafc;
    }
    .tier-name { font-weight: 700; margin-bottom: 4px; }
    .tier-price { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
    .module-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
    .module-row {
      display: grid;
      grid-template-columns: 34px 1.2fr 1fr 120px;
      gap: 8px;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }
    .module-row:last-child { border-bottom: 0; }
    .chip {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      background: #eef2ff;
      color: #1e3a8a;
    }
    .modal {
      position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
      background: rgba(15, 23, 42, 0.45); z-index: 50;
      padding: 12px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }
    .modal.show {
      display: flex;
      pointer-events: auto;
      z-index: 120;
    }
    .modal-card {
      width: min(520px, 96vw);
      max-height: calc(100dvh - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      background: #fff;
      border-radius: 12px;
      border: 1px solid var(--line);
      padding: 16px;
      touch-action: pan-y;
    }
    .customer-comms-modal-card textarea {
      width: 100%;
      min-height: 130px;
      resize: vertical;
    }
    .customer-comms-modal-card input {
      width: 100%;
    }
    .customer-comms-char-counter {
      font-size: 12px;
      color: #64748b;
    }
    .customer-comms-char-counter.warn {
      color: #92400e;
    }
    .customer-comms-char-counter.bad {
      color: #b91c1c;
    }
    .bar { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
    .bar > span { display: block; height: 100%; width: 0%; background: #0f172a; transition: width 200ms ease; }
    .topbar {
      display: none;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      transition: opacity 160ms ease, filter 160ms ease;
    }
    .topbar.show { display: flex; }
    body.modal-open .topbar {
      opacity: 0.34;
      filter: saturate(0.55);
      pointer-events: none;
    }
    .topbar-left {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .topbar-panel-picker {
      display: none;
      min-width: 0;
      width: min(380px, 72vw);
      max-width: 100%;
      background: #fff;
      border: 1px solid var(--line);
    }
    .avatar-wrap { position: relative; }
    .avatar-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #0f172a;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }
    .avatar-menu {
      position: absolute;
      right: 0;
      top: 44px;
      min-width: 220px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
      padding: 8px;
      display: none;
      z-index: 20;
    }
    .avatar-menu.show { display: block; }
    .avatar-email { padding: 8px 8px 4px; color: var(--muted); font-size: 13px; }
    .avatar-runtime-version {
      padding: 4px 8px 8px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--line);
      color: #64748b;
      font: 500 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
      overflow-wrap: anywhere;
    }
    .avatar-item {
      width: 100%;
      text-align: left;
      background: #fff;
      border: 1px solid var(--line);
      margin: 4px 0;
      cursor: pointer;
    }
    .avatar-item.logout { color: #b91c1c; }
    .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    table { border-collapse: collapse; width: 100%; min-width: 860px; }
    th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    th { background: #f8fafc; font-size: 12px; text-transform: uppercase; color: var(--muted); }
    .card-help-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .card-help-head h2,
    .card-help-head h3,
    .card-help-head h4 {
      margin: 0;
      min-width: 0;
    }
    .inline-help-wrap {
      position: relative;
      flex: 0 0 auto;
    }
    .inline-help-wrap.is-open {
      z-index: 6;
    }
    .inline-help-btn {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }
    .inline-help-btn:hover,
    .inline-help-wrap.is-open .inline-help-btn,
    .inline-help-wrap:focus-within .inline-help-btn {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    }
    .inline-help-btn:focus-visible {
      outline: none;
    }
    .inline-help-popover {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(320px, calc(100vw - 40px));
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #dbe3ee;
      background: rgba(255, 255, 255, 0.98);
      color: #475569;
      font-size: 13px;
      line-height: 1.45;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-2px);
      pointer-events: none;
      transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
    }
    .inline-help-wrap:hover .inline-help-popover,
    .inline-help-wrap:focus-within .inline-help-popover,
    .inline-help-wrap.is-open .inline-help-popover {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .ops-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .ops-page-copy {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1 1 420px;
    }
    .ops-page-copy h2,
    .ops-page-copy h3 {
      margin: 0;
      color: #0f172a;
    }
    .ops-page-subtitle {
      color: var(--muted);
      line-height: 1.45;
      max-width: 90ch;
    }
    .ops-page-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }
    .ops-page-actions.has-inline-help,
    .ops-surface-head.has-inline-help {
      position: relative;
    }
    .ops-summary-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 12px;
    }
    .ops-summary-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fbff;
      color: #475569;
      font-size: 13px;
      line-height: 1.2;
    }
    .ops-summary-pill strong {
      color: #0f172a;
      font-size: 14px;
    }
    .ops-summary-status {
      font-size: 13px;
      line-height: 1.35;
      color: var(--muted);
    }
    .ops-workspace-grid {
      display: grid;
      gap: 14px;
      align-items: start;
    }
    .ops-workspace-grid.campaigns {
      grid-template-columns: minmax(0, 1fr);
    }
    .ops-workspace-stack {
      display: grid;
      gap: 12px;
    }
    .campaigns-sidebar {
      align-content: start;
      min-width: 0;
    }
    .campaign-page-head {
      margin-bottom: 6px;
    }
    .campaign-actions {
      align-items: center;
    }
    #panel-b2b-campaigns .ops-surface {
      min-width: 0;
      padding: 12px;
    }
    .campaign-run-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      min-width: 0;
    }
    .campaign-run-column {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .campaign-run-block {
      min-width: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid #e2e8f0;
    }
    .campaign-run-block:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
    .campaign-run-block .campaign-pane-head {
      margin-bottom: 8px;
    }
    .campaign-library-block .campaign-list-stack {
      max-height: 560px;
    }
    .campaign-preview-live-check {
      margin-top: 8px;
    }
    .campaign-pane-head {
      gap: 10px;
      margin-bottom: 12px;
    }
    .campaign-pane-head .ops-surface-copy {
      gap: 3px;
    }
    .campaign-pane-name {
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
      color: #0f172a;
      word-break: break-word;
    }
    .campaign-pane-name--compact {
      font-size: 14px;
      font-weight: 700;
    }
    .campaign-pane-meta {
      color: #64748b;
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .campaign-pane-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }
    .campaign-pane-actions .action,
    .campaign-pane-actions .btn-danger,
    .campaign-pane-actions .btn-ghost {
      min-height: 34px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 13px;
    }
    .campaign-overview-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-bottom: 10px;
    }
    .campaign-overview-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      padding: 14px 16px;
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .campaign-overview-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }
    .campaign-overview-value {
      font-size: 20px;
      line-height: 1.15;
      font-weight: 800;
      color: #0f172a;
    }
    .campaign-status-row {
      margin: 0 0 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      min-height: 22px;
    }
    .campaign-primary-fields,
    .campaign-checkout-fields,
    .campaign-two-col,
    .campaign-crm-advanced-grid,
    .campaign-run-control-grid {
      display: grid;
      gap: 10px;
      align-items: end;
      min-width: 0;
    }
    .campaign-primary-fields {
      grid-template-columns: minmax(170px, 220px) minmax(260px, 1fr) minmax(170px, 210px);
      margin-bottom: 6px;
    }
    .campaign-checkout-fields {
      grid-template-columns: minmax(260px, 1fr) minmax(170px, 220px);
      margin: 0 0 10px;
    }
    .campaign-two-col,
    .campaign-crm-advanced-grid {
      grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
    .campaign-action-intro-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 10px;
      align-items: end;
      min-width: 0;
    }
    .campaign-action-intro-grid .full {
      grid-column: 1 / -1;
    }
    .campaign-run-control-grid {
      grid-template-columns: minmax(220px, 1.25fr) minmax(180px, 0.9fr) minmax(180px, 0.9fr);
      margin-bottom: 8px;
    }
    .campaign-inline-helper {
      margin: -2px 0 10px;
    }
    .campaign-disclosure {
      margin: 0 0 12px;
      border: 1px solid #dbe3ee;
      border-radius: 12px;
      background: #fbfdff;
      overflow: hidden;
    }
    .campaign-disclosure > summary {
      min-height: 38px;
      padding: 9px 12px;
      cursor: pointer;
      color: #0f172a;
      font-size: 13px;
      font-weight: 800;
      list-style-position: inside;
      user-select: none;
    }
    .campaign-disclosure > summary:hover,
    .campaign-disclosure > summary:focus-visible {
      background: #f1f5f9;
      outline: none;
    }
    .campaign-disclosure-body {
      display: grid;
      gap: 10px;
      padding: 0 12px 12px;
    }
    .campaign-disclosure--compact {
      margin-bottom: 10px;
      background: #ffffff;
    }
    .campaign-disclosure--compact > summary {
      min-height: 34px;
      padding: 8px 10px;
      font-size: 12px;
    }
    .campaign-toggle-body {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
    }
    .campaign-schedule-block {
      margin: 0 0 14px;
      padding: 10px 12px;
      border: 1px solid #dbe3ee;
      border-radius: 12px;
      background: #f8fbff;
    }
    .campaign-schedule-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 280px);
      align-items: end;
      margin-bottom: 8px;
    }
    .campaign-list-toolbar {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: start;
      margin-bottom: 10px;
    }
    .campaign-list-search {
      margin: 0;
    }
    .campaign-list-stack {
      display: grid;
      gap: 8px;
      max-height: 340px;
      overflow: auto;
      padding-right: 2px;
    }
    .campaign-list-item {
      width: 100%;
      display: grid;
      gap: 5px;
      text-align: left;
      padding: 10px 12px;
      border: 1px solid #dbe3ee;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      color: #0f172a;
      cursor: pointer;
    }
    .campaign-list-item-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 4px;
    }
    .campaign-list-item-actions .btn-ghost,
    .campaign-list-item-actions .btn-danger {
      min-height: 30px;
      padding: 6px 9px;
      border-radius: 8px;
      font-size: 12px;
    }
    .campaign-list-item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .campaign-list-item-title {
      font-size: 14px;
      line-height: 1.25;
      font-weight: 800;
      color: inherit;
      word-break: break-word;
    }
    .campaign-list-item-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      min-width: 0;
      color: #64748b;
      font-size: 11px;
      line-height: 1.3;
    }
    .campaign-list-item-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 11px;
      line-height: 1.3;
      color: #475569;
    }
    .campaign-list-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 22px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #eef4ff;
      color: #1d4ed8;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .campaign-list-pill--neutral {
      background: #f8fafc;
      color: #475569;
    }
    .campaign-list-pill--success {
      background: #ecfdf3;
      color: #047857;
    }
    .campaign-list-pill--warn {
      background: #fff7ed;
      color: #c2410c;
    }
    .campaign-list-item:hover,
    .campaign-list-item:focus-visible {
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
      outline: none;
    }
    .campaign-list-item--active {
      background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
      color: #0f172a;
    }
    .campaign-list-item--active .muted,
    .campaign-list-item--active .campaign-list-item-meta,
    .campaign-list-item--active .campaign-list-item-stats {
      color: #334155;
    }
    .ops-surface,
    .ops-toolbar-surface {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    }
    .ops-surface {
      padding: 14px;
    }
    .ops-toolbar-surface {
      padding: 12px 14px;
    }
    .ops-surface-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .ops-surface-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .ops-surface-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      color: #0f172a;
      margin: 0;
    }
    .ops-helper {
      color: var(--muted);
      line-height: 1.4;
      font-size: 13px;
    }
    .campaign-placeholder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 6px;
    }
    .campaign-placeholder-grid--actions {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .campaign-placeholder-chip {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 34px;
      padding: 7px 9px;
      border: 1px solid #dbe3ee;
      border-radius: 999px;
      background: #f8fbff;
      color: #0f172a;
      text-align: center;
      cursor: pointer;
    }
    .campaign-placeholder-chip code {
      font-size: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    }
    .campaign-placeholder-chip--action {
      background: #f3f8ff;
    }
    .campaign-placeholder-chip--muted {
      background: #fbfcfe;
    }
    .campaign-placeholder-chip strong {
      font-size: 12px;
      line-height: 1.2;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    }
    .campaign-placeholder-chip span {
      display: none;
    }
    .campaign-placeholder-chip:hover,
    .campaign-placeholder-chip:focus-visible {
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
      background: #ffffff;
      outline: none;
    }
    .campaign-rich-editor-shell {
      border: 1px solid #dbe3ee;
      border-radius: 14px;
      background: #ffffff;
      overflow: visible;
    }
    .campaign-rich-toolbar.ql-toolbar {
      border: 0;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 6px 8px;
      position: relative;
      z-index: 2;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-picker {
      color: #0f172a;
      font-size: 12px;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-header,
    .campaign-rich-toolbar.ql-toolbar .ql-font {
      min-width: 112px;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-picker-label,
    .campaign-rich-toolbar.ql-toolbar .ql-picker-item {
      color: inherit;
      font-size: 12px;
      line-height: 1.2;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-picker-label {
      padding: 3px 22px 3px 8px;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-picker-options {
      z-index: 12;
      border-radius: 10px;
      padding: 4px 0;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    }
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-label::before,
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-item::before {
      content: "Paragraph";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-label[data-value="1"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-item[data-value="1"]::before {
      content: "Heading 1";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-label[data-value="2"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-item[data-value="2"]::before {
      content: "Heading 2";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-label[data-value="3"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-header .ql-picker-item[data-value="3"]::before {
      content: "Heading 3";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-label::before,
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-item::before {
      content: "Email Sans";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-label[data-value="Helvetica Neue, Arial, Helvetica, sans-serif"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-item[data-value="Helvetica Neue, Arial, Helvetica, sans-serif"]::before {
      content: "Modern Sans";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-label[data-value="Trebuchet MS, Arial, sans-serif"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-item[data-value="Trebuchet MS, Arial, sans-serif"]::before {
      content: "Compact Sans";
    }
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-label[data-value="Georgia, Times New Roman, serif"]::before,
    .campaign-rich-toolbar.ql-toolbar .ql-font .ql-picker-item[data-value="Georgia, Times New Roman, serif"]::before {
      content: "Editorial Serif";
    }
    .campaign-rich-toolbar.ql-toolbar button {
      width: 24px;
      height: 24px;
      padding: 2px;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-formats {
      margin-right: 4px;
    }
    .campaign-rich-toolbar.ql-toolbar button svg {
      width: 14px;
      height: 14px;
    }
    .campaign-rich-toolbar.ql-toolbar .ql-stroke {
      stroke-width: 1.7;
    }
    .campaign-rich-editor.ql-container {
      border: 0;
      min-height: 260px;
      color: #0f172a;
      font-size: 14px;
      background: #ffffff;
    }
    .campaign-rich-editor .ql-editor {
      min-height: 260px;
      padding: 16px 18px;
      font-size: 14px;
      line-height: 1.65;
      font-family: Arial, Helvetica, sans-serif;
      color: #0f172a;
      white-space: normal;
      word-break: break-word;
    }
    .campaign-rich-editor .ql-editor h1,
    .campaign-rich-editor .ql-editor h2,
    .campaign-rich-editor .ql-editor h3 {
      margin: 0 0 14px;
      color: #0f172a;
      line-height: 1.15;
    }
    .campaign-rich-editor .ql-editor h1 {
      font-size: 36px;
      font-family: Georgia, "Times New Roman", serif;
    }
    .campaign-rich-editor .ql-editor h2 {
      font-size: 28px;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    .campaign-rich-editor .ql-editor h3 {
      font-size: 21px;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    .campaign-rich-editor .ql-editor.ql-blank::before {
      color: #94a3b8;
      font-style: normal;
      left: 18px;
      right: 18px;
    }
    .campaign-rich-editor .ql-editor a {
      color: #1d4ed8;
      text-decoration: underline;
    }
    .campaign-rich-editor .ql-editor ul,
    .campaign-rich-editor .ql-editor ol {
      margin: 0 0 12px 22px;
      padding: 0;
    }
    .campaign-rich-editor .ql-editor blockquote {
      margin: 0 0 14px;
      padding: 12px 16px;
      border-left: 4px solid #d4aa63;
      background: #fff9ef;
      color: #1f2937;
      border-radius: 10px;
    }
    .campaign-rich-editor .ql-editor p {
      margin: 0 0 12px;
    }
    .campaign-rich-editor .ql-editor p:last-child {
      margin-bottom: 0;
    }
    .campaign-preview-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .campaign-preview-row input {
      width: 100%;
    }
    .campaign-send-progress {
      display: grid;
      gap: 8px;
      margin: 0 0 12px;
      padding: 10px 12px;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      background: #eff6ff;
    }
    .campaign-send-progress.hidden {
      display: none;
    }
    .campaign-send-progress-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #0f172a;
      font-size: 13px;
      line-height: 1.25;
    }
    .campaign-send-progress-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #dbeafe;
    }
    .campaign-send-progress-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: #2563eb;
      transition: width 0.2s ease;
    }
    #panel-b2b-campaigns .table-wrap {
      max-width: 100%;
    }
    #b2b-campaigns-analytics-grid.crm-kpi-grid {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
    }
    #b2b-campaigns-analytics-grid .crm-kpi-card {
      padding: 10px;
      border-radius: 12px;
    }
    #b2b-campaigns-analytics-grid .crm-kpi-card .value {
      margin-top: 4px;
      font-size: 15px;
    }
    .ops-surface-head > .inline-help-wrap {
      margin-left: auto;
    }
    .ops-field-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      align-items: end;
    }
    .ops-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .ops-field-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.2;
    }
    .ops-toggle-stack {
      display: grid;
      gap: 8px;
    }
    .ops-checkbox-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #475569;
      line-height: 1.35;
    }
    .ops-inline-grid-head {
      display: grid;
      grid-template-columns: minmax(240px, 2.4fr) minmax(90px, 0.7fr) 84px;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .ops-filter-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .ops-filter-grow {
      flex: 1 1 260px;
    }
    .ops-filter-status {
      margin-left: auto;
      font-size: 12px;
      color: var(--muted);
    }
    .ops-table-section {
      display: grid;
      gap: 8px;
    }
    .klaviyo-environment-guard {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      margin-bottom: 10px;
      border: 1px solid #f59e0b;
      border-radius: 8px;
      background: #fffbeb;
    }
    .klaviyo-environment-badge {
      flex: 0 0 auto;
      padding: 3px 7px;
      border: 1px solid #d97706;
      border-radius: 999px;
      color: #92400e;
      font-size: 11px;
      font-weight: 800;
    }
    .klaviyo-test-account-confirmation {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0 0 10px;
      color: #7c2d12;
      font-weight: 700;
    }
    .klaviyo-test-account-confirmation input {
      flex: 0 0 auto;
      margin-top: 2px;
    }
    .klaviyo-matrix table {
      width: 1760px;
      min-width: 1760px;
      table-layout: fixed;
    }
    .klaviyo-matrix th:first-child,
    .klaviyo-matrix td:first-child {
      width: 190px;
      min-width: 190px;
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }
    .klaviyo-matrix th:nth-child(2),
    .klaviyo-matrix td:nth-child(2),
    .klaviyo-matrix th:nth-child(3),
    .klaviyo-matrix td:nth-child(3),
    .klaviyo-matrix th:nth-child(4),
    .klaviyo-matrix td:nth-child(4) {
      width: 235px;
    }
    .klaviyo-cell {
      min-height: 36px;
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #111827;
      outline: none;
    }
    .klaviyo-cell[contenteditable="true"] {
      background: #f8fafc;
      border-color: #dbe3ee;
      cursor: text;
    }
    .klaviyo-cell[contenteditable="true"]:focus {
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
      background: #fff;
    }
    .klaviyo-cell.is-readonly {
      background: #f8fafc;
      color: #374151;
      border-color: #eef2f7;
    }
    .klaviyo-cell[contenteditable="true"]:empty::before {
      content: attr(data-placeholder);
      color: #9ca3af;
      pointer-events: none;
    }
    .row-selectable { cursor: pointer; }
    .row-selectable:hover { background: #f8fafc; }
    .row-selected { background: #eef2ff; }
    .kpi { font-size: 12px; color: var(--muted); }
    .kpi strong { color: var(--ink); font-size: 16px; }
    .hidden { display: none; }
    .integration-detail-readiness {
      --readiness-accent: #64748b;
      --readiness-background: #f8fafc;
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--readiness-accent);
      border-radius: 6px;
      background: var(--readiness-background);
      color: #0f172a;
      margin: 8px 0 10px;
      padding: 9px 11px;
    }
    .integration-detail-readiness.is-ready {
      --readiness-accent: #16a34a;
      --readiness-background: #f0fdf4;
    }
    .integration-detail-readiness.is-partial {
      --readiness-accent: #d97706;
      --readiness-background: #fffbeb;
    }
    .integration-detail-readiness.is-not-configured {
      --readiness-accent: #dc2626;
      --readiness-background: #fef2f2;
    }
    .integration-detail-readiness.is-loading,
    .integration-detail-readiness.is-unavailable {
      --readiness-accent: #64748b;
      --readiness-background: #f8fafc;
      color: #475569;
    }
    .integration-detail-readiness-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .integration-detail-readiness-head > div {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }
    .integration-detail-readiness-head .action {
      flex: 0 0 auto;
      min-height: 30px;
      padding: 5px 9px;
    }
    .integration-detail-readiness-status {
      color: var(--readiness-accent);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .integration-detail-readiness-label {
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
    }
    .integration-detail-readiness-copy,
    .integration-detail-readiness-next {
      font-size: 13px;
      line-height: 1.4;
    }
    .integration-detail-readiness-next {
      color: #475569;
    }
    .integrations-hub {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }
    .integrations-list {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fafc;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: sticky;
      top: 8px;
    }
    .integration-item {
      width: 100%;
      border: 1px solid #dbe3ee;
      border-radius: 10px;
      padding: 10px;
      background: #fff;
      cursor: pointer;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .integration-item.active {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
      background: #f3f6fb;
    }
    .integration-item-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .integration-item-state {
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background: #fff;
      color: #374151;
    }
    .integration-item-state.on {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }
    .integration-item-state.saved {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .integration-item-state.ready {
      border-color: #cbd5e1;
      background: #f8fafc;
      color: #334155;
    }
    .integration-item-state.off {
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }
    .integration-item-state.unknown {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .integrations-detail {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      min-height: 540px;
    }
    .integration-detail { display: none; }
    .integration-detail.active { display: block; }
    .integration-prep-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: #475569;
      font-size: 13px;
      line-height: 1.35;
    }
    .integration-prep-inline code {
      padding: 3px 8px;
      border: 1px solid #dbe3ee;
      border-radius: 999px;
      background: #f8fafc;
      color: #0f172a;
      font-size: 12px;
      word-break: break-all;
    }
    .integration-prep-card {
      padding: 12px 14px;
    }
    .webhook-inventory-list {
      display: grid;
      gap: 10px;
    }
    .webhook-inventory-item {
      padding: 14px;
    }
    .webhook-inventory-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
    }
    .webhook-inventory-item p {
      margin: 8px 0 10px;
      color: #334155;
      line-height: 1.45;
    }
    .webhook-inventory-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }
    .webhook-inventory-details > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .webhook-inventory-details strong {
      overflow-wrap: anywhere;
      font-size: 13px;
    }

    .shopify-environment-line,
    .shopify-sync-options {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .environment-badge {
      border: 1px solid currentColor;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
    }
    .environment-badge.is-safe {
      color: #067647;
      background: #ecfdf3;
    }
    .environment-badge.is-warning {
      color: #b54708;
      background: #fffaeb;
    }
    .shopify-sync-section {
      border-top: 1px solid var(--border);
      margin-top: 12px;
      padding-top: 12px;
    }
    .shopify-sync-options {
      margin: 8px 0 10px;
    }
    .integration-prep-list {
      color: #64748b;
      line-height: 1.55;
      font-size: 14px;
    }
    @media (max-width: 720px) {
      .integration-detail-readiness-head {
        align-items: stretch;
        flex-direction: column;
      }
      .integration-detail-readiness-head > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
      }
      .integration-detail-readiness-head .action {
        align-self: flex-start;
      }
    }
    .dispatch-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }
    .dispatch-day {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }
    .dispatch-head {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .dispatch-head-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
    }
    .dispatch-head-pill {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 3px 8px;
      background: #fff;
      color: #334155;
    }
    .dispatch-item { padding: 10px; border-bottom: 1px solid var(--line); }
    .dispatch-item:last-child { border-bottom: 0; }
    .order-row { border-top: 1px solid var(--line); }
    .order-row:first-child { border-top: 0; }
    .order-row.is-focused {
      box-shadow: inset 0 0 0 2px #0f172a;
      background: #f8fbff;
    }
    .order-row-main {
      width: 100%;
      border: 0;
      background: #fff;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 110px 26px;
      gap: 8px;
      align-items: center;
      cursor: pointer;
      padding: 10px 12px;
    }
    .order-row-main:hover { background: #f8fafc; }
    .order-main-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }
    .order-main-sub {
      margin-top: 2px;
      font-size: 12px;
      color: #64748b;
    }
    .order-main-qty {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 4px 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #1f2937;
      background: #fff;
      justify-self: end;
      white-space: nowrap;
    }
    .order-row-details {
      display: none;
      padding: 10px 12px 12px;
      border-top: 1px dashed var(--line);
      background: #fcfdff;
    }
    .order-row.open .order-row-details { display: block; }
    .order-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      font-size: 13px;
      margin-bottom: 8px;
      color: #334155;
    }
    .crm-order-link {
      appearance: none;
      border: 0;
      padding: 0;
      background: transparent;
      color: #0f172a;
      font: inherit;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    .crm-order-link:hover {
      color: #1d4ed8;
    }
    .crm-order-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .crm-order-subline {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      word-break: break-word;
    }
    .crm-order-detail-row {
      display: none;
    }
    .crm-order-detail-row.open {
      display: table-row;
    }
    .crm-order-detail-row > td {
      padding: 0;
      background: #f8fbff;
      border-top: 0;
    }
    .crm-order-detail-card {
      padding: 12px 14px 14px;
      border-top: 1px dashed var(--line);
    }
    .crm-order-detail-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }
    .crm-order-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .crm-order-lines-preview {
      display: grid;
      gap: 8px;
    }
    .crm-order-line-preview {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }
    .crm-order-line-name {
      font-weight: 600;
      color: #0f172a;
    }
    .crm-order-line-sku {
      margin-top: 3px;
      font-size: 12px;
      color: var(--muted);
    }
    .crm-order-line-qty {
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
    }
    .crm-credit-note-panel {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 10px;
    }
    .crm-credit-note-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px;
    }
    .crm-credit-note-heading {
      font-weight: 700;
      color: #0f172a;
    }
    .crm-credit-note-list {
      display: grid;
      gap: 6px;
    }
    .crm-credit-note-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      gap: 10px;
      align-items: start;
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }
    .crm-credit-note-row:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .crm-credit-note-title {
      font-weight: 700;
      color: #0f172a;
    }
    .crm-credit-note-meta,
    .crm-credit-note-reason {
      margin-top: 3px;
      font-size: 12px;
      color: var(--muted);
    }
    .crm-credit-note-amount {
      font-weight: 800;
      color: #991b1b;
      white-space: nowrap;
    }
    .crm-credit-note-form {
      display: grid;
      grid-template-columns: 110px minmax(220px, 1fr) 150px minmax(180px, 1fr) auto;
      gap: 8px;
      align-items: center;
      border-top: 1px dashed var(--line);
      margin-top: 10px;
      padding-top: 10px;
    }
    .order-issue {
      margin-bottom: 8px;
      border: 1px solid #fca5a5;
      border-radius: 8px;
      padding: 6px 8px;
      background: #fef2f2;
      color: #991b1b;
      font-size: 12px;
      font-weight: 600;
    }
    .order-lines {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }
    .order-line-item {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 84px;
      gap: 8px;
      padding: 7px 10px;
      border-top: 1px solid var(--line);
      align-items: center;
      font-size: 13px;
    }
    .order-line-item:first-child { border-top: 0; }
    .order-line-item .qty {
      text-align: right;
      font-weight: 700;
      color: #0f172a;
    }
    .order-arrow {
      color: var(--muted);
      text-align: right;
      transition: transform 150ms ease;
      font-size: 12px;
    }
    .order-row.open .order-arrow { transform: rotate(90deg); }
    .line-list { margin-top: 8px; }
    .line-list div { padding: 2px 0; }
    @media (max-width: 760px) {
      .crm-order-detail-top {
        flex-direction: column;
      }
      .crm-order-actions {
        justify-content: flex-start;
      }
      .crm-order-line-preview {
        grid-template-columns: 1fr;
      }
      .crm-order-line-qty {
        text-align: left;
      }
      .crm-credit-note-row,
      .crm-credit-note-form {
        grid-template-columns: 1fr;
      }
      .crm-credit-note-amount {
        white-space: normal;
      }
      .integrations-hub {
        grid-template-columns: 1fr;
      }
      .integrations-list {
        position: static;
      }
      .integrations-detail {
        min-height: 0;
      }
      .order-row-main {
        grid-template-columns: minmax(180px, 1fr) 88px 24px;
        padding: 9px 10px;
      }
      .order-main-title { font-size: 14px; }
      .order-main-sub { font-size: 11px; }
      .order-main-qty { padding: 3px 6px; font-size: 11px; }
      .dispatch-head { padding: 9px 10px; }
      .order-row-details { padding: 9px 10px 10px; }
      .order-line-item {
        grid-template-columns: minmax(140px, 1fr) 74px;
        padding: 6px 8px;
        font-size: 12px;
      }
    }
    .ol-board { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
    .ol-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
    .ol-head {
      display: grid;
      grid-template-columns: minmax(360px, 1.2fr) minmax(420px, 1fr);
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
    }
    .ol-head-main { cursor: pointer; }
    .ol-title { font-weight: 700; font-size: 15px; }
    .ol-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .ol-actions button.action { padding: 6px 10px; font-size: 12px; border-radius: 6px; }
    .ol-actions button.action.secondary { background: #374151; }
    .ol-actions button.action.success { background: #166534; }
    .ol-actions button.action.warn { background: #4b5563; }
    .ol-actions button.action:disabled { opacity: 0.55; cursor: not-allowed; }
    .ol-actions select { padding: 6px 8px; font-size: 12px; border-radius: 6px; min-width: 210px; }
    .ol-shipment-state { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .ol-live-card .ol-head {
      grid-template-columns: minmax(360px, 1fr) auto;
      align-items: center;
    }
    .ol-live-card .ol-head-main {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      min-width: 0;
      cursor: pointer;
    }
    .ol-live-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .ol-live-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      background: #fff;
      line-height: 1;
      white-space: nowrap;
    }
    .ol-live-chip.primary {
      border-color: #94a3b8;
      color: #0f172a;
      font-weight: 700;
    }
    .ol-live-chip.delivery {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
    }
    .ol-live-chip.payment {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .ol-live-chip.warn {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .ol-live-meta {
      font-size: 12px;
      color: #64748b;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .ol-live-card .ol-actions {
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .ol-live-card .ol-actions select {
      min-width: 210px;
    }
    .ol-live-toggle {
      margin-left: 2px;
      color: #64748b;
      font-size: 12px;
      transition: transform 140ms ease;
      display: inline-block;
      line-height: 1;
    }
    .ol-live-card.open .ol-live-toggle {
      transform: rotate(90deg);
    }
    .ol-details { padding: 10px; background: #fff; }
    .ol-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr); gap: 10px; }
    .ol-address-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fcfdff; }
    .ol-address-box.compact {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 10px;
    }
    .ol-address-line {
      margin: 0;
      line-height: 1.35;
      word-break: break-word;
    }
    .ol-mini { font-size: 12px; color: var(--muted); }
    .ol-labels-edit td input { width: 100%; }
    .ol-extra-row { display: grid; grid-template-columns: minmax(180px, 1fr) 70px minmax(220px, 1.8fr) 90px; gap: 6px; margin-top: 8px; }
    .ol-extra-list { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .ol-extra-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); }
    .ol-extra-item:last-child { border-bottom: 0; }
    .ol-empty { padding: 10px; color: var(--muted); }
    .ol-warning { color: #b45309; font-size: 12px; margin-top: 4px; }
    .ol-dispatch-nav { display: inline-flex; align-items: center; gap: 6px; }
    .ol-routing-details {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 8px 10px;
    }
    .ol-routing-details > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      list-style: none;
      font-size: 13px;
      color: var(--muted);
    }
    .ol-routing-details > summary::-webkit-details-marker { display: none; }
    .ol-routing-details > summary strong {
      color: #0f172a;
      font-size: 13px;
      font-weight: 800;
      text-align: right;
    }
    .ol-routing-details[open] > summary { margin-bottom: 8px; }
    .ol-dispatch-nav .nav-btn {
      height: 34px;
      min-width: 34px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
      font-weight: 700;
      color: #111827;
    }
    .ol-dispatch-nav .nav-btn:hover { background: #f8fafc; }
    .ol-labels-edit td .ol-edit-cell {
      width: 100%;
      min-height: 30px;
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      white-space: pre-wrap;
      word-break: break-word;
      outline: none;
    }
    .ol-labels-edit td .ol-edit-cell:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
    }
    @media (max-width: 1260px) {
      .ol-live-card .ol-head {
        grid-template-columns: 1fr;
      }
      .ol-live-card .ol-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-x: visible;
      }
      .ol-live-card .ol-actions select {
        min-width: 180px;
      }
      .ol-details-grid {
        grid-template-columns: 1fr;
      }
    }
    .products-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
    .products-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); margin: 10px 0 14px; }
    .products-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 9px 10px; font-weight: 800; cursor: pointer; }
    .products-tab:hover { color: var(--ink); }
    .products-tab.active { color: #0f172a; border-bottom-color: #2563eb; }
    .products-tab-panel { display: none; }
    .products-tab-panel.active { display: block; }
    .products-toolbar,
    .products-metrics,
    .products-setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
    .products-toolbar input { min-width: min(360px, 100%); flex: 1 1 260px; }
    .products-catalog-layout { display: block; }
    .products-list-pane,
    .products-detail-pane { min-width: 0; }
    .products-list-table { max-height: min(720px, calc(100vh - 260px)); overflow: auto; }
    .products-list-table table { min-width: 860px; }
    .products-empty-list,
    .products-empty-detail { border: 1px dashed rgba(148, 163, 184, .65); border-radius: 8px; padding: 18px; color: var(--muted); background: #f8fafc; }
    .products-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .products-section-head h3 { margin: 0; }
    .catalog-migration-target { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-left: 4px solid #2563eb; background: #f8fafc; }
    .catalog-migration-target-label { color: var(--muted); font-weight: 700; }
    .catalog-migration-draft-badge,
    .catalog-migration-status { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid #94a3b8; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; }
    .catalog-migration-draft-badge { border-color: #d97706; color: #92400e; background: #fffbeb; }
    .catalog-migration-status-created,
    .catalog-migration-status-mapped_existing { border-color: #16a34a; color: #166534; background: #f0fdf4; }
    .catalog-migration-status-conflict,
    .catalog-migration-status-invalid,
    .catalog-migration-status-failed { border-color: #dc2626; color: #991b1b; background: #fef2f2; }
    .catalog-migration-status-running,
    .catalog-migration-status-queued { border-color: #d97706; color: #92400e; background: #fffbeb; }
    .catalog-migration-metrics { margin-top: 12px; }
    .catalog-migration-progress { padding: 10px 0; font-weight: 700; }
    .catalog-migration-table { max-height: min(560px, calc(100vh - 340px)); overflow: auto; }
    .catalog-migration-table table { min-width: 760px; }
    .product-create-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 10px; align-items: end; }
    .product-create-grid label,
    .product-editor-grid label,
    .product-key-value-row label,
    .product-component-row label { display: grid; gap: 5px; min-width: 0; font-weight: 700; color: #475569; }
    .product-create-grid label span,
    .product-editor-grid label span,
    .product-key-value-row label span,
    .product-component-row label span { font-size: 12px; line-height: 1.2; }
    .product-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
    .product-editor-grid textarea { min-height: 92px; resize: vertical; }
    .product-main-row { cursor: pointer; }
    .product-main-row:hover,
    .product-main-row.active { background: #eef6ff; }
    .product-row-subtitle { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
    .product-inline-toggle { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 700; color: #475569; }
    .product-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .product-detail-header h3 { margin: 0 0 3px; }
    .product-detail-section,
    .product-food-panel,
    .product-calculated-nutrition,
    .product-components-editor,
    .product-key-value-editor,
    .product-list-editor,
    .product-source-ingredient-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .product-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .product-id-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; }
    .product-list-editor-row,
    .product-key-value-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .7fr) auto; gap: 8px; align-items: end; padding: 8px 0; border-top: 1px solid #e5e7eb; }
    .product-list-editor-row { grid-template-columns: minmax(260px, 1fr) auto; }
    .product-key-value-row:first-child { border-top: 0; }
    .product-list-editor-row:first-child { border-top: 0; }
    .product-list-editor-row input,
    .product-key-value-row input,
    .product-source-ingredient-row input,
    .product-component-row input { width: 100%; }
    .product-list-editor-row .action,
    .product-key-value-row .action,
    .product-source-ingredient-row .action,
    .product-component-row .action { white-space: nowrap; }
    .product-key-value-summary { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 8px; }
    .product-key-value-summary > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #f8fafc; min-width: 0; }
    .product-key-value-summary span,
    .product-key-value-summary strong { display: block; overflow-wrap: anywhere; }
    .product-key-value-summary span { color: var(--muted); font-size: 12px; }
    .product-key-value-summary.empty { display: block; color: var(--muted); border: 1px dashed rgba(148, 163, 184, .65); border-radius: 8px; padding: 10px; background: #f8fafc; }
    .product-components-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .product-source-ingredient-head,
    .product-source-ingredient-row,
    .product-component-head,
    .product-component-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .9fr) minmax(78px, .45fr) minmax(72px, .4fr) minmax(88px, .5fr) auto; gap: 8px; align-items: center; }
    .product-source-ingredient-head,
    .product-source-ingredient-row { grid-template-columns: minmax(220px, 1.5fr) minmax(130px, .8fr) minmax(78px, .45fr) minmax(72px, .4fr) auto; }
    .product-source-ingredient-head,
    .product-component-head { color: var(--muted); font-size: 12px; font-weight: 800; padding-bottom: 6px; }
    .product-source-ingredient-row,
    .product-component-row { padding: 8px 0; border-top: 1px solid #e5e7eb; }
    .product-source-ingredient-row:first-child,
    .product-component-row:first-child { border-top: 0; }
    .product-component-resolved { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; }
    .product-calculator-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d7deea; }
    .product-calculator-history { margin-top: 12px; }
    .product-calculator-run-list { display: grid; gap: 8px; }
    .product-calculator-run-row { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(220px, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
    .pl-main-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(150px, 1fr));
      gap: 8px;
      align-items: end;
    }
    .pl-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .pl-field.span-2 { grid-column: span 2; }
    .pl-main-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .pl-main-actions #pl-status {
      min-height: 20px;
      line-height: 1.3;
    }
    .pl-sku-empty {
      margin-top: 8px;
      padding: 10px;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pl-preview-shell { margin-top: 10px; }
    .pl-preview-caption { margin-bottom: 6px; }
    .pl-field-label {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.01em;
    }
    .pl-field-help {
      font-size: 11px;
      color: #475569;
      line-height: 1.2;
      min-height: 13px;
    }
    .pl-selected-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .pl-meta-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      line-height: 1;
      padding: 5px 9px;
    }
    .pl-meta-chip.warn {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #92400e;
    }
    .pl-meta-chip.info {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
    }
    .pl-preview-viewport {
      width: min(100%, 570px);
      height: 250px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      padding: 6px;
    }
    .pl-label-preview {
      width: 1181px;
      min-height: 472px;
      transform: scale(0.47);
      transform-origin: top left;
      font-size: 15px;
      line-height: 1.35;
      color: var(--ink);
    }
    .pl-label-card {
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }
    .pl-label-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
    .pl-label-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
    .pl-label-lines { margin: 0; padding-left: 18px; }
    .pl-label-lines li { margin-bottom: 2px; }
    .pl-label-nutrition { margin-top: 8px; font-size: 12px; border-top: 1px dashed #cbd5e1; padding-top: 6px; }
    .pl-label-nutrition div { margin-bottom: 2px; }
    .pl-advanced {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }
    .pl-advanced > summary {
      list-style: none;
      cursor: pointer;
      padding: 8px 10px;
      font-weight: 700;
      color: #334155;
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
    }
    .pl-advanced > summary::-webkit-details-marker { display: none; }
    .pl-advanced-body { padding: 10px; }
    .pl-warning { margin-top: 8px; color: #92400e; font-size: 12px; }
    .pl-main-grid input,
    .pl-main-grid select {
      width: 100%;
      min-width: 0;
    }
    @media (max-width: 1160px) {
      .pl-main-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
      .pl-field.span-2 { grid-column: span 1; }
    }
    @media (max-width: 720px) {
      .pl-main-grid { grid-template-columns: 1fr; }
      .pl-field.span-2 { grid-column: span 1; }
      .pl-preview-viewport {
        width: 100%;
        height: 210px;
      }
      .pl-label-preview { transform: scale(0.29); }
    }
    .lookup-card { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px; }
    .lookup-file-list { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; max-height: 180px; overflow: auto; }
    .lookup-file-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 120px; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); align-items: center; font-size: 13px; }
    .lookup-file-row:last-child { border-bottom: 0; }
    .price-list-wrap {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }
    .price-list-presentation-settings {
      margin: 10px 0 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background: #f8fafc;
    }
    .price-list-presentation-settings textarea,
    .price-list-presentation-settings input {
      width: 100%;
      margin-top: 4px;
    }
    .price-list-presentation-preview {
      margin-top: 10px;
      border-left: 3px solid #93c5fd;
      padding: 8px 10px;
      background: #fff;
      color: #334155;
      white-space: pre-line;
      overflow-wrap: anywhere;
    }
    .price-list-row {
      border-top: 1px solid var(--line);
      padding: 10px;
    }
    .price-list-row:first-child { border-top: 0; }
    .price-list-section {
      display: grid;
      gap: 8px;
    }
    .price-list-summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: minmax(240px, 1.2fr) auto auto;
      align-items: center;
      gap: 10px;
      user-select: none;
    }
    .price-list-summary::-webkit-details-marker { display: none; }
    .price-list-summary::marker { content: ""; }
    .price-list-summary::after {
      content: "▾";
      color: #64748b;
      font-size: 12px;
      transition: transform 0.15s ease;
      flex: 0 0 auto;
    }
    .price-list-section:not([open]) .price-list-summary::after {
      transform: rotate(-90deg);
    }
    .price-list-summary-hint {
      color: #64748b;
      font-size: 12px;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .price-list-summary-metrics {
      display: inline-grid;
      grid-template-columns: minmax(210px, 260px) auto;
      gap: 10px;
      align-items: center;
      justify-items: start;
    }
    .price-list-metric {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 7px 10px;
      background: #fff;
      font-size: 12px;
      color: var(--muted);
    }
    .price-list-metric input {
      border: 0;
      padding: 0;
      background: transparent;
      width: 90px;
      color: #0f172a;
      font-size: 16px;
      font-weight: 700;
      outline: none;
    }
    .price-list-metric .currency {
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .price-list-metric strong {
      color: #0f172a;
      font-size: 14px;
      font-weight: 700;
    }
    .price-list-summary-actions {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-right: 18px;
    }
    .price-list-summary-actions .action,
    .price-list-summary-actions .btn-danger {
      padding: 6px 10px;
      font-size: 13px;
    }
    .price-list-summary-actions [aria-pressed="true"] {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      font-weight: 700;
    }
    .price-list-main {
      display: grid;
      grid-template-columns: minmax(200px, 280px);
      gap: 8px;
      align-items: end;
    }
    .price-list-product { min-width: 0; }
    .price-list-product-title { font-weight: 700; }
    .price-list-product-meta { color: var(--muted); font-size: 12px; }
    .price-list-base {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .price-list-base input {
      max-width: 160px;
    }
    .price-tier-block {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      background: #f8fafc;
    }
    .price-tier-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 6px;
    }
    .price-tier-title {
      font-weight: 700;
      color: #0f172a;
    }
    .price-tier-help {
      font-size: 12px;
      color: var(--muted);
    }
    .tier-grid-head,
    .tier-grid-row {
      display: grid;
      grid-template-columns: 0.8fr 1fr 0.8fr auto;
      gap: 6px;
      align-items: center;
    }
    .tier-grid-head {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
      font-weight: 700;
      padding: 0 2px;
      margin-bottom: 4px;
    }
    .tier-grid-body {
      display: grid;
      gap: 6px;
    }
    .tier-grid-row {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px;
    }
    .tier-grid-row input { min-width: 0; }
    .tier-grid-empty {
      border: 1px dashed var(--line);
      border-radius: 8px;
      padding: 8px;
      color: var(--muted);
      font-size: 13px;
      background: #fff;
    }
    .tier-grid-draft {
      background: #eef4ff;
      border-style: dashed;
    }
    .tier-remove-btn {
      justify-self: end;
      border: 1px solid #fecaca;
      color: #b91c1c;
      background: #fff;
      border-radius: 8px;
      padding: 6px 8px;
      cursor: pointer;
      font-size: 12px;
    }
    .price-list-row-error {
      border: 1px solid #f2c8c5;
      background: #fff6f5;
      color: #b42318;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
    }
    .inline-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .btn-ghost {
      background: #fff;
      color: #0f172a;
      border: 1px solid var(--line);
      cursor: pointer;
    }
    .btn-danger {
      background: #fff;
      color: #b91c1c;
      border: 1px solid #fecaca;
      cursor: pointer;
    }
    .compact-input {
      min-width: 0;
      width: 100%;
    }
    @media (max-width: 1100px) {
      .price-list-summary {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .price-list-summary-actions {
        margin-right: 0;
        justify-content: flex-start;
      }
      .price-list-summary-metrics {
        grid-template-columns: 1fr;
      }
      .price-list-main {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .tier-grid-head,
      .tier-grid-row {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
    }
    .customer-override-head {
      display: grid;
      grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1fr;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
      font-size: 12px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
    }
    .customer-override-row {
      display: grid;
      grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1fr;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }
    .customer-override-row:last-child { border-bottom: 0; }
    .customer-address-head {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr 1.2fr 1fr 1fr 120px;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
      font-size: 12px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
    }
    .customer-address-row {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr 1.2fr 1fr 1fr 120px;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }
    .customer-address-row:last-child { border-bottom: 0; }
    .customer-address-row .group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .customer-detail-save-row {
      position: sticky;
      bottom: 0;
      z-index: 5;
      background: #fff;
      border-top: 1px solid var(--line);
      padding: 10px 0 2px;
    }
    .customer-matrix th.vertical {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      text-align: center;
      white-space: nowrap;
      min-width: 28px;
      width: 28px;
      padding: 8px 4px;
    }
    .customer-matrix td.matrix-check {
      text-align: center;
      width: 28px;
    }
    .customer-matrix td.matrix-check input {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .b2b-customers-shell {
      display: grid;
      grid-template-columns: minmax(190px, 228px) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }
    .b2b-customers-page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .b2b-customers-rail {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: sticky;
      top: 12px;
      max-height: calc(100vh - 160px);
      overflow: auto;
    }
    .b2b-customers-stage {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 14px;
      min-width: 0;
    }
    .b2b-customers-rail-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }
    .b2b-customers-rail-label {
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 2px;
    }
    .b2b-customers-segments {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .sales-customers-segments {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .sales-customers-search-surface {
      padding: 10px 12px;
    }
    .sales-customers-search-bar {
      align-items: flex-end;
    }
    .sales-customers-search-bar .ops-filter-status {
      align-self: center;
      padding-bottom: 8px;
    }
    .sales-customers-result-filters {
      margin-top: 8px;
    }
    .sales-customers-mobile-view {
      display: none;
    }
    .sales-customers-mobile-view select {
      width: 100%;
      min-width: 0;
    }
    .sales-customers-segments .b2b-customers-segment {
      width: auto;
      min-width: 138px;
      padding: 7px 10px;
    }
    .sales-customers-selection-tools {
      margin-top: 8px;
      padding: 8px 10px;
    }
    .sales-customers-selection-tools summary::-webkit-details-marker {
      display: none;
    }
    .sales-customers-selection-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      list-style: none;
      cursor: pointer;
      color: #0f172a;
      font-weight: 700;
      min-height: 36px;
    }
    .sales-customers-selection-summary::before {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid #dbe3ee;
      color: #475569;
      font-weight: 800;
      margin-right: -2px;
    }
    .sales-customers-selection-tools[open] .sales-customers-selection-summary::before {
      content: "-";
    }
    .sales-customers-selection-summary span:first-child {
      margin-right: auto;
    }
    .b2b-customers-segment {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
      border: 1px solid #dbe3ee;
      border-radius: 8px;
      background: #fff;
      padding: 8px 10px;
      color: #0f172a;
      font-size: 13px;
      cursor: pointer;
    }
    .b2b-customers-segment strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid #dbe3ee;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      padding: 0 8px;
    }
    .b2b-customers-segment:hover {
      border-color: #bfdbfe;
      background: #f8fbff;
    }
    .b2b-customers-segment.active {
      border-color: #0f172a;
      box-shadow: inset 3px 0 0 #2563eb;
      background: #eef5ff;
    }
    .b2b-customers-segment.active strong {
      border-color: #93c5fd;
      background: #dbeafe;
      color: #1d4ed8;
    }
    .b2b-customers-rail-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .b2b-customers-rail-actions .action,
    .b2b-customers-rail-actions .btn-ghost {
      width: 100%;
      text-align: left;
    }
    .b2b-customers-rail-metrics {
      display: grid;
      gap: 8px;
    }
    .b2b-customers-advanced-tools {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
    }
    .b2b-customers-advanced-tools summary {
      cursor: pointer;
      font-weight: 700;
      color: #0f172a;
      list-style: none;
    }
    .b2b-customers-advanced-tools summary::-webkit-details-marker {
      display: none;
    }
    .b2b-customers-advanced-tools-body {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .customer-bulk-bar {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      padding: 0;
    }
    .b2b-customers-selection-summary {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-right: auto;
    }
    .b2b-customers-selection-actions {
      margin-left: auto;
      flex-wrap: wrap;
    }
    .customer-bulk-count {
      font-size: 12px;
      color: var(--muted);
      margin-left: auto;
    }
    .b2b-customers-rail .customer-bulk-count {
      margin-left: 0;
      padding-top: 2px;
    }
    .customer-bulk-progress {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .customer-bulk-progress-track {
      flex: 1;
      max-width: 420px;
      height: 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #f6f8fb;
      overflow: hidden;
    }
    .customer-bulk-progress-bar {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width 120ms linear;
    }
    .customer-directory-wrap {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      overflow: auto;
      margin-top: 10px;
    }
    .customer-directory-head,
    .customer-directory-row {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(150px, 0.8fr) minmax(260px, 1.6fr) minmax(150px, 0.8fr) minmax(240px, 1fr);
      gap: 8px;
      align-items: center;
      min-width: 1160px;
      padding: 8px 10px;
    }
    .customer-directory-wrap.with-select .customer-directory-head,
    .customer-directory-wrap.with-select .customer-directory-row {
      grid-template-columns: 32px minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(150px, 0.8fr) minmax(260px, 1.6fr) minmax(150px, 0.8fr) minmax(240px, 1fr);
      min-width: 1192px;
    }
    .customer-directory-wrap.with-select .customer-directory-head > div:first-child,
    .customer-directory-wrap.with-select .customer-directory-row > div:first-child {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .customer-directory-wrap.with-select input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      cursor: pointer;
    }
    .customer-directory-head {
      text-transform: uppercase;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      border-bottom: 1px solid var(--line);
      background: #f8fafc;
    }
    .customer-directory-row {
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }
    .customer-directory-row.selected {
      background: #eff6ff;
    }
    .customer-directory-row:last-child { border-bottom: 0; }
    .customer-directory-row .chip { margin-left: 4px; }
    .customer-directory-tags {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      overflow: hidden;
    }
    .customer-directory-tags .chip {
      margin-left: 0;
      white-space: nowrap;
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .customer-access-group {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
    }
    .customer-access-group.stack {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .customer-primary-link {
      cursor: pointer;
      color: #0f172a;
      text-decoration: none;
      font-weight: 700;
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .customer-primary-link:hover {
      color: #1d4ed8;
      text-decoration: underline;
    }
    .customer-primary-trigger {
      border: 0;
      background: none;
      padding: 0;
      text-align: left;
      font: inherit;
    }
    .customer-directory-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: nowrap;
      align-items: center;
    }
    .customer-directory-actions.sales {
      justify-content: flex-start;
    }
    .customer-directory-actions .action,
    .customer-directory-actions .customer-directory-comm-btn {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .customer-directory-comm-btn {
      white-space: nowrap;
    }
    .customer-table-actions {
      justify-content: flex-start;
      flex-wrap: nowrap;
    }
    .customer-table-actions .action,
    .customer-table-actions .customer-directory-comm-btn {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .customer-directory-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #334155;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px 8px;
      background: #fff;
      white-space: nowrap;
    }
    .customer-directory-status.on {
      background: #ecfdf3;
      border-color: #86efac;
      color: #166534;
    }
    .customer-directory-status.off {
      background: #fff7ed;
      border-color: #fdba74;
      color: #9a3412;
    }
    .customer-directory-status.warn {
      background: #fffbeb;
      border-color: #fcd34d;
      color: #92400e;
    }
    .customer-access-inline {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      min-width: 0;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .customer-access-inline .customer-directory-status {
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .customer-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    #panel-sales-customers .customer-directory-head,
    #panel-sales-customers .customer-directory-row {
      gap: 6px;
      padding: 6px 10px;
    }
    #panel-sales-customers .customer-directory-wrap.with-select .customer-directory-head,
    #panel-sales-customers .customer-directory-wrap.with-select .customer-directory-row {
      grid-template-columns:
        32px
        minmax(170px, 0.95fr)
        minmax(190px, 1.05fr)
        minmax(110px, 0.65fr)
        minmax(180px, 0.95fr)
        minmax(230px, 1.15fr)
        minmax(220px, 1fr);
      min-width: 1132px;
    }
    #panel-sales-customers .customer-directory-row {
      font-size: 12px;
    }
    #panel-sales-customers .customer-cell {
      gap: 1px;
    }
    #panel-sales-customers .customer-primary-link {
      font-size: 12px;
      line-height: 1.2;
    }
    #panel-sales-customers .customer-cell .muted {
      font-size: 11px;
      line-height: 1.2;
    }
    #panel-sales-customers .customer-directory-tags {
      gap: 3px;
    }
    #panel-sales-customers .customer-directory-tags .chip {
      max-width: 140px;
      padding: 2px 7px;
      font-size: 11px;
    }
    #panel-sales-customers .customer-access-group.stack {
      flex-direction: row;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      min-width: 0;
      overflow: hidden;
    }
    #panel-sales-customers .customer-directory-status {
      gap: 4px;
      font-size: 11px;
      line-height: 1.15;
      padding: 2px 8px;
      white-space: nowrap;
    }
    #panel-sales-customers .customer-directory-actions {
      gap: 5px;
    }
    #panel-sales-customers .customer-directory-actions .action,
    #panel-sales-customers .customer-directory-actions .customer-directory-comm-btn {
      font-size: 11px;
      padding: 5px 9px;
      min-height: 0;
    }
    .customer-cell .customer-primary-link,
    .customer-cell .muted {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .b2b-customers-table-wrap {
      border-radius: 14px;
      overflow: auto;
    }
    .b2b-customers-table {
      min-width: 880px;
    }
    #customers-table td {
      vertical-align: middle;
      white-space: nowrap;
    }
    #customers-table td:nth-child(2) {
      max-width: 280px;
      white-space: normal;
    }
    #customers-table td:nth-child(5) {
      white-space: nowrap;
    }
    .customers-b2b-modal-card {
      width: min(1040px, 96vw);
      padding: 18px;
    }
    .customers-b2b-modal-head {
      align-items: flex-start;
      padding-bottom: 2px;
    }
    .customers-b2b-modal-header-copy {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .customers-b2b-modal-subtitle {
      font-size: 14px;
    }
    .modal-icon-close {
      width: 42px;
      min-width: 42px;
      height: 42px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font-size: 26px;
      line-height: 1;
    }
    .customers-b2b-modal-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-height: 22px;
    }
    .customers-b2b-access-card,
    .customers-assisted-checkout-card {
      border-radius: 14px;
      padding: 14px;
    }
    .customers-modal-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .customers-modal-field-label {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .customers-b2b-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .customers-b2b-access-toggles {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .customers-b2b-access-toggles label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
    }
    .customers-assisted-checkout-controls {
      grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 0.9fr);
    }
    .customers-assisted-checkout-lines-wrap {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fcfdff;
      padding: 10px;
    }
    .customers-assisted-lines-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .customers-assisted-line-row {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(82px, 0.28fr) minmax(120px, 0.24fr) minmax(104px, 0.28fr) minmax(96px, auto) auto;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }
    .customers-assisted-line-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
    .customers-assisted-line-row:first-child {
      padding-top: 0;
    }
    .customers-assisted-product-select {
      width: 100%;
    }
    .customers-assisted-line-price {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #ffffff;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }
    .customers-assisted-line-price span {
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .customers-assisted-line-price strong {
      color: #0f172a;
      font-size: 13px;
      white-space: nowrap;
    }
    .customers-assisted-line-price input {
      width: 100%;
      min-height: 22px;
      border: 0;
      padding: 0;
      background: transparent;
      color: #0f172a;
      font-size: 13px;
      font-weight: 800;
      outline: none;
    }
    .customers-assisted-line-price input::placeholder {
      color: #94a3b8;
      opacity: 1;
    }
    .customers-assisted-link-row {
      display: grid;
      grid-template-columns: auto minmax(220px, 1fr) auto auto;
      align-items: end;
      gap: 8px;
    }
    .customers-assisted-link-field {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 6px;
    }
    .customers-assisted-link-field input {
      width: 100%;
    }
    .customers-assisted-preview-empty {
      border: 1px dashed var(--line);
      border-radius: 12px;
      background: #f8fafc;
      padding: 10px 12px;
    }
    .customers-assisted-preview-card {
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
    }
    .customers-assisted-preview-totals {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 8px;
      margin-top: 0;
    }
    .customers-assisted-preview-totals > div {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fafc;
      padding: 9px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .customers-assisted-preview-totals span {
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .customers-assisted-preview-grand-total {
      background: #0f172a !important;
      border-color: #0f172a !important;
      color: #ffffff;
    }
    .customers-assisted-preview-grand-total span {
      color: rgba(255, 255, 255, 0.72);
    }
    #customers-table .customer-directory-tags,
    #customers-table .customer-access-group {
      min-height: 28px;
    }
    .crm-toolbar {
      position: relative;
      z-index: 3;
    }
    .crm-search-shell {
      position: relative;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      padding: 10px;
    }
    .crm-search-row {
      align-items: center;
      gap: 10px;
    }
    .crm-search-row .ops-field {
      flex: 1 1 420px;
      min-width: 260px;
    }
    .crm-search-row input {
      flex: 0 0 auto;
      min-width: 0;
    }
    #b2b-crm-search {
      display: block;
      width: 100%;
      height: 38px;
      min-height: 38px;
      max-height: 38px;
      line-height: 1.2;
    }
    .crm-search-results {
      position: absolute;
      left: 12px;
      right: 12px;
      top: calc(100% - 4px);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
      max-height: 360px;
      overflow: auto;
    }
    .crm-search-results.hidden {
      display: none;
    }
    .crm-search-result {
      width: 100%;
      text-align: left;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: #fff;
      padding: 10px 12px;
      cursor: pointer;
      display: block;
    }
    .crm-search-result:last-child {
      border-bottom: 0;
    }
    .crm-search-result:hover,
    .crm-search-result.active {
      background: #eff6ff;
    }
    .crm-access-request-focused {
      background: #eff6ff;
      box-shadow: inset 3px 0 0 #2563eb;
    }
    .crm-search-result-title {
      font-weight: 700;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.3;
    }
    .crm-search-result-subtitle {
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }
    #b2b-crm-merge-surface {
      position: relative;
    }
    #b2b-crm-merge-results {
      position: static;
      left: auto;
      right: auto;
      top: auto;
      max-height: 280px;
    }
    .crm-merge-fields {
      display: grid;
      gap: 8px;
    }
    .crm-merge-field-row {
      display: grid;
      grid-template-columns: minmax(110px, 0.5fr) minmax(180px, 1fr) minmax(180px, 1fr);
      gap: 8px;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 8px;
    }
    .crm-merge-field-label {
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
    }
    .crm-merge-choice {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      min-width: 0;
      cursor: pointer;
    }
    .crm-merge-choice input {
      margin-top: 2px;
      flex: 0 0 auto;
    }
    .crm-merge-choice span {
      overflow-wrap: anywhere;
    }
    .crm-merge-choice strong {
      display: block;
      font-size: 12px;
      color: #334155;
      margin-bottom: 2px;
    }
    @media (max-width: 820px) {
      .crm-merge-field-row {
        grid-template-columns: 1fr;
      }
    }
    .crm-main {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      padding: 12px;
      min-height: 460px;
    }
    .crm-main.crm-main-full {
      width: 100%;
    }
    .crm-empty {
      border: 1px dashed var(--line);
      border-radius: 12px;
      padding: 18px;
      color: var(--muted);
      background: #f8fafc;
    }
    .crm-header {
      border-bottom: 1px solid var(--line);
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .crm-header-shell {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .crm-header-compact {
      align-items: center;
    }
    .crm-customer-identity {
      flex: 1 1 360px;
      min-width: 240px;
    }
    .crm-customer-identity h3 {
      font-size: 18px;
      line-height: 1.2;
    }
    .crm-contact-line {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 5px;
      word-break: normal;
    }
    .crm-contact-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    .crm-contact-link {
      border: 0;
      background: transparent;
      color: #2563eb;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      line-height: 1.2;
      margin: 0;
      max-width: 240px;
      overflow: hidden;
      padding: 0;
      text-decoration: underline;
      text-overflow: ellipsis;
      text-underline-offset: 2px;
      white-space: nowrap;
    }
    .crm-contact-copy {
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      height: 26px;
      justify-content: center;
      padding: 0;
      width: 26px;
    }
    .crm-contact-copy:hover {
      border-color: #93c5fd;
      color: #1d4ed8;
    }
    .crm-contact-copy svg {
      fill: none;
      height: 14px;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
      width: 14px;
    }
    .crm-contact-company,
    .crm-contact-muted {
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.2;
      padding: 5px 8px;
    }
    .crm-contact-muted {
      background: #f8fafc;
      color: #94a3b8;
    }
    .crm-header-actions {
      align-items: stretch;
    }
    .crm-summary-strip {
      margin-bottom: 10px;
    }
    .crm-summary-strip .ops-summary-pill {
      background: rgba(255, 255, 255, 0.92);
    }
    .crm-summary-strip .ops-summary-pill.is-ok {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }
    .crm-summary-strip .ops-summary-pill.is-warn {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .crm-summary-strip .ops-summary-pill.is-hot {
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }
    .crm-summary-strip .ops-summary-pill.is-warm {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .crm-summary-strip .ops-summary-pill.is-cold {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1e40af;
    }
    .crm-alert-list {
      display: grid;
      gap: 8px;
    }
    .crm-alert-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: #fff;
    }
    .crm-alert-item::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      margin-top: 5px;
      flex: 0 0 auto;
      background: #cbd5e1;
    }
    .crm-alert-item.good::before {
      background: #16a34a;
    }
    .crm-alert-item.warn::before {
      background: #d97706;
    }
    .crm-alert-item.bad::before {
      background: #dc2626;
    }
    .crm-alert-copy {
      min-width: 0;
    }
    .crm-alert-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }
    .crm-alert-body {
      margin-top: 2px;
      font-size: 13px;
      color: #475569;
      line-height: 1.4;
    }
    .crm-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .crm-tabs-inline {
      flex: 1 1 560px;
      justify-content: flex-end;
      margin-bottom: 0;
    }
    .crm-tabs [data-crm-tab] {
      padding: 10px 14px;
      font-size: 14px;
      border-radius: 12px;
    }
    .crm-tabs-inline [data-crm-tab] {
      padding: 8px 12px;
      font-size: 13px;
      border-radius: 10px;
    }
    .crm-tabs [data-crm-tab].active {
      background: #0b1a3f;
      color: #fff;
      border-color: #0b1a3f;
    }
    .crm-tabs-top {
      align-items: center;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 12px;
      display: flex;
      gap: 4px;
      margin: 10px 0 0;
      padding: 4px;
      width: 100%;
    }
    .crm-tabs-top [data-crm-tab] {
      background: transparent;
      border: 0;
      border-radius: 9px;
      color: #64748b;
      font-size: 13px;
      line-height: 1.2;
      padding: 7px 10px;
    }
    .crm-tabs-top [data-crm-tab].active {
      background: #fff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
      color: #0f172a;
    }
    .crm-loading-card {
      align-items: center;
      display: flex;
      gap: 12px;
    }
    .crm-loading-spinner {
      animation: crm-spin 0.8s linear infinite;
      border: 2px solid #dbeafe;
      border-top-color: #2563eb;
      border-radius: 999px;
      height: 24px;
      width: 24px;
    }
    .crm-loading-title {
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .crm-loading-name {
      color: #0f172a;
      font-size: 16px;
      font-weight: 700;
      margin-top: 2px;
    }
    .crm-loading-meta {
      color: #64748b;
      font-size: 13px;
      margin-top: 2px;
    }
    @keyframes crm-spin {
      to {
        transform: rotate(360deg);
      }
    }
    .crm-views .crm-view {
      display: none;
    }
    .crm-views .crm-view.active {
      display: block;
    }
    .crm-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }
    .crm-overview-primary-grid {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .crm-access-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .crm-access-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      flex-wrap: wrap;
    }
    .crm-access-label {
      min-width: 118px;
      padding-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .crm-access-values {
      display: flex;
      flex: 1 1 0;
      min-width: 0;
      flex-wrap: wrap;
      gap: 8px;
    }
    .crm-access-values .chip,
    .crm-access-values .customer-directory-status {
      margin: 0;
    }
    .crm-kpi-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255,255,255,0.92);
    }
    .crm-kpi-card .label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    .crm-kpi-card .value {
      margin-top: 6px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
      word-break: break-word;
    }
    .crm-kpi-card .subvalue {
      margin-top: 6px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
      word-break: break-word;
    }
	    .subscription-plan-page {
	      overflow: visible;
	    }
	    .subscription-plan-page > .ops-page-head {
	      margin-bottom: 8px;
	      justify-content: flex-end;
	    }
	    .subscription-plan-mini-strip {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      flex-wrap: wrap;
	      margin-top: 10px;
	      color: var(--muted);
	      font-size: 12px;
	    }
	    .subscription-plan-mini-strip span {
	      display: inline-flex;
	      align-items: center;
	      gap: 5px;
	      border: 1px solid var(--line);
	      border-radius: 999px;
	      background: #fff;
	      padding: 5px 8px;
	      line-height: 1;
	    }
	    .subscription-plan-mini-strip strong {
	      color: var(--ink);
	      font-size: 12px;
	    }
	    .subscription-plan-status {
	      margin-top: 8px;
	      font-size: 12px;
	    }
	    .subscription-plan-readiness-strip {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      margin-top: 8px;
	      padding: 8px 10px;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      background: #fff;
	      color: var(--muted);
	      font-size: 12px;
	    }
	    .subscription-plan-readiness-strip.is-ok {
	      border-color: #bbf7d0;
	      background: #f0fdf4;
	      color: #166534;
	    }
	    .subscription-plan-readiness-strip.is-bad {
	      border-color: #fecaca;
	      background: #fff1f2;
	      color: #991b1b;
	    }
	    .subscription-plan-readiness-strip .secondary {
	      padding: 6px 10px;
	      font-size: 12px;
	      white-space: nowrap;
	    }
	    .subscription-plan-publish-log {
	      display: grid;
	      gap: 6px;
	      max-height: 260px;
	      margin-top: 8px;
	      padding: 10px;
	      border: 1px solid #1e293b;
	      border-radius: 8px;
	      background: #0f172a;
	      color: #cbd5e1;
	      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	      font-size: 12px;
	      line-height: 1.45;
	      overflow: auto;
	    }
	    .subscription-plan-publish-log[hidden] {
	      display: none;
	    }
	    .subscription-plan-publish-log__row {
	      margin: 0;
	      white-space: pre-wrap;
	      overflow-wrap: anywhere;
	    }
	    .subscription-plan-publish-log__row.is-ok {
	      color: #86efac;
	    }
	    .subscription-plan-publish-log__row.is-bad {
	      color: #fca5a5;
	    }
	    .subscription-plan-publish-log__row.is-warn {
	      color: #fde68a;
	    }
	    .subscription-plan-publish-log__row.is-muted {
	      color: #94a3b8;
	    }
	    .subscription-area-tabs {
	      display: flex;
      gap: 6px;
      margin-top: 14px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
      overflow-x: auto;
    }
    .subscription-area-tabs button {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 8px;
      padding: 8px 10px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
    }
	    .subscription-area-tabs button.active,
	    .subscription-area-tabs button:hover {
	      background: #fff;
	      color: var(--ink);
	      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	    }
	    .subscription-section-page {
	      overflow: visible;
	    }
	    .subscription-page-grid {
	      display: grid;
	      grid-template-columns: minmax(0, 1fr);
	      gap: 14px;
	      margin-top: 14px;
	    }
	    .subscription-page-grid.two-column {
	      grid-template-columns: repeat(2, minmax(0, 1fr));
	      align-items: stretch;
	    }
	    .subscription-section-block {
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #fff;
	      padding: 16px;
	      min-width: 0;
	    }
	    .subscription-section-block.is-muted {
	      background: #f8fafc;
	    }
	    .subscription-section-block-head {
	      display: flex;
	      align-items: flex-start;
	      justify-content: space-between;
	      gap: 12px;
	      flex-wrap: wrap;
	    }
	    .subscription-section-block-head h3,
	    .subscription-section-block h3 {
	      margin: 0 0 4px;
	    }
	    .subscription-action-row {
	      display: flex;
	      gap: 8px;
	      align-items: center;
	      flex-wrap: wrap;
	      margin-top: 12px;
	    }
	    .subscription-workspace-form {
	      display: grid;
	      gap: 14px;
	      margin-top: 14px;
	    }
	    .subscription-action-matrix {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	      gap: 10px;
	      margin-top: 14px;
	    }
	    .subscription-action-matrix label {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      background: #f8fafc;
	      padding: 10px;
	      font-weight: 700;
	    }
	    .subscription-rules-list {
	      display: grid;
	      gap: 10px;
	      margin-top: 12px;
	    }
	    .subscription-rule-card {
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #fff;
	      padding: 12px;
	    }
	    .subscription-rule-card-head {
	      display: flex;
	      justify-content: space-between;
	      gap: 10px;
	      align-items: center;
	      margin-bottom: 10px;
	    }
	    .subscription-rule-fields {
	      grid-template-columns: minmax(190px, 1fr) minmax(110px, .35fr) minmax(150px, .5fr) minmax(150px, .5fr) minmax(110px, .35fr);
	    }
	    .subscription-widget-preview {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	      gap: 12px;
	      margin-top: 14px;
	    }
	    .subscription-widget-preview-card {
	      display: grid;
	      gap: 10px;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      background: #f8fafc;
	      padding: 12px;
	      min-width: 0;
	    }
	    .subscription-widget-preview-card label {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	    }
	    .subscription-lane-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	      gap: 12px;
	      margin-top: 14px;
	    }
	    .subscription-lane-panel {
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #fff;
	      padding: 14px;
	      min-width: 0;
	    }
	    .subscription-lane-panel h3 {
	      margin: 8px 0 6px;
	    }
	    .subscription-status-pill {
	      display: inline-flex;
	      align-items: center;
	      width: fit-content;
	      max-width: 100%;
	      border-radius: 999px;
	      padding: 4px 8px;
	      font-size: 12px;
	      font-weight: 700;
	      line-height: 1;
	      color: #475569;
	      background: #f1f5f9;
	    }
	    .subscription-status-pill.ready {
	      color: #166534;
	      background: #dcfce7;
	    }
	    .subscription-status-pill.planned {
	      color: #1d4ed8;
	      background: #dbeafe;
	    }
	    .subscription-status-pill.deferred {
	      color: #6b7280;
	      background: #f3f4f6;
	    }
	    .subscription-state-list {
	      display: grid;
	      gap: 10px;
	      margin-top: 14px;
	    }
	    .subscription-state-row {
	      display: grid;
	      grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1fr);
	      gap: 12px;
	      padding: 10px 0;
	      border-top: 1px solid var(--line);
	    }
	    .subscription-state-row:first-child {
	      border-top: 0;
	      padding-top: 0;
	    }
	    .subscription-state-row strong,
	    .subscription-state-row span {
	      min-width: 0;
	      overflow-wrap: anywhere;
	    }
	    .subscription-code-block {
	      margin: 14px 0 0;
	      padding: 12px;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      background: #f8fafc;
	      color: #111827;
	      overflow-x: auto;
	      white-space: pre;
	    }
	    .subscription-feature-table {
	      width: 100%;
	      border-collapse: separate;
	      border-spacing: 0;
	      margin-top: 14px;
	      overflow: hidden;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      background: #fff;
	    }
	    .subscription-feature-table th,
	    .subscription-feature-table td {
	      padding: 10px 12px;
	      text-align: left;
	      border-top: 1px solid var(--line);
	      vertical-align: top;
	    }
	    .subscription-feature-table th {
	      border-top: 0;
	      background: #f8fafc;
	      color: #64748b;
	      font-size: 12px;
	      text-transform: uppercase;
	      letter-spacing: 0.02em;
	    }
	    .subscription-metric-grid {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	      gap: 10px;
	      margin-top: 14px;
	    }
	    .subscription-mini-metric {
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      padding: 12px;
	      background: #f8fafc;
	      min-width: 0;
	    }
	    .subscription-mini-metric strong,
	    .subscription-mini-metric span {
	      display: block;
	      overflow-wrap: anywhere;
	    }
	    .subscription-mini-metric span {
	      margin-top: 4px;
	      color: #64748b;
	      font-size: 13px;
	    }
		    .subscription-plan-form {
		      display: grid;
		      gap: 14px;
		      margin-top: 14px;
		    }
	    .subscription-plan-form[hidden] {
	      display: none;
	    }
	    .subscription-plan-builder {
	      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	      align-items: start;
	    }
	    .subscription-plan-editor {
	      grid-template-columns: 1fr;
	      max-width: 1180px;
	    }
	    .subscription-plan-editor-head {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 12px;
	      flex-wrap: wrap;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #fff;
	      padding: 12px 14px;
	    }
	    .subscription-plan-editor-head h3 {
	      margin: 2px 0 0;
	      font-size: 15px;
	      line-height: 1.25;
	    }
    .subscription-plan-main {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .subscription-plan-side {
      display: grid;
      gap: 12px;
      position: sticky;
      top: 82px;
      min-width: 0;
    }
	    .subscription-plan-step {
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #fff;
	      padding: 14px;
	    }
	    .subscription-plan-list-shell {
	      margin-top: 12px;
	    }
    .subscription-plan-side-panel {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 14px;
      min-width: 0;
    }
    .subscription-plan-step-head,
    .subscription-plan-footer,
    .subscription-plan-side-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .subscription-plan-side-head h3,
    .subscription-plan-step-head h3 {
      margin: 2px 0 4px;
    }
	    .subscription-plan-step-head p {
	      margin: 0;
	      color: var(--muted);
	      font-size: 12px;
	      line-height: 1.35;
	    }
    .subscription-plan-step-label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    .subscription-plan-field-grid.compact {
      padding-bottom: 8px;
    }
    .subscription-plan-products-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
    }
	    .subscription-plan-products-count {
	      display: inline-flex;
	      align-items: center;
	      border: 1px solid var(--line);
	      border-radius: 999px;
	      background: #f8fafc;
	      padding: 5px 8px;
	      color: var(--ink);
	      font-size: 12px;
	      font-weight: 700;
	    }
    .subscription-plan-product-actions,
    .subscription-plan-footer-actions,
    .subscription-plan-checks,
    .subscription-option-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
	    .subscription-plan-list {
	      display: grid;
	      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	      gap: 8px;
	      margin-top: 10px;
	    }
	    .subscription-plan-card {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 10px;
	      border: 1px solid var(--line);
	      border-radius: 8px;
	      padding: 10px;
	      background: #fff;
	    }
    .subscription-plan-card.is-selected {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
    }
	    .subscription-plan-card-title {
	      font-weight: 700;
	      font-size: 13px;
	      word-break: break-word;
	    }
	    .subscription-plan-card-meta {
	      color: var(--muted);
	      font-size: 12px;
	      line-height: 1.35;
	    }
    .subscription-plan-card-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .subscription-plan-current-plan {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
	    .subscription-plan-product-picker {
	      display: grid;
	      grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto minmax(190px, 0.65fr) auto auto;
	      gap: 10px;
	      padding: 12px;
	      align-items: center;
	    }
    .subscription-plan-product-picker input,
    .subscription-plan-product-picker select {
      width: 100%;
    }
    .subscription-plan-product-candidates {
      display: grid;
      gap: 8px;
      margin: 0 12px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      max-height: 340px;
      overflow: auto;
    }
    .subscription-plan-product-bulk-panel {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f8fafc;
    }
    .subscription-plan-product-bulk-head,
    .subscription-plan-product-bulk-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .subscription-plan-product-bulk-head {
      justify-content: space-between;
    }
    .subscription-plan-product-bulk-chip {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 38px;
      max-width: 100%;
      white-space: normal;
      text-align: left;
    }
    .subscription-plan-product-bulk-count {
      display: inline-flex;
      min-width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      padding: 0 7px;
      border-radius: 999px;
      background: #e5e7eb;
      color: #111827;
      font-size: 12px;
      font-weight: 800;
    }
    .subscription-plan-product-candidate {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .subscription-plan-product-candidate strong {
      display: block;
      overflow-wrap: anywhere;
    }
    .subscription-plan-product-candidate .muted {
      margin-top: 2px;
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
	    .subscription-plan-selected-products {
	      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }
    .subscription-plan-selected-products table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
    }
    .subscription-plan-selected-products th,
    .subscription-plan-selected-products td {
      padding: 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }
    .subscription-plan-selected-products tr:last-child td {
      border-bottom: 0;
    }
	    .subscription-options-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
	      margin-top: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
    }
    .subscription-option-template-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .subscription-options-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }
    .subscription-option-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .subscription-option-card.is-default {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
    }
    .subscription-option-card.is-disabled {
      background: #f8fafc;
    }
    .subscription-option-title {
      font-weight: 700;
      font-size: 16px;
    }
    .subscription-option-meta {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .subscription-option-meta.is-invalid {
      color: #b42318;
      font-weight: 700;
    }
    .subscription-option-fields {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(90px, 0.25fr) minmax(130px, 0.35fr) minmax(110px, 0.25fr);
      gap: 10px;
      align-items: end;
    }
    .subscription-option-fields label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      min-width: 0;
    }
    .subscription-option-fields input,
    .subscription-option-fields select {
      width: 100%;
      color: var(--ink);
      font-weight: 400;
    }
    .subscription-option-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: space-between;
    }
	    .subscription-plan-settings {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 0;
      overflow: hidden;
    }
    .subscription-plan-settings > summary {
      cursor: pointer;
      padding: 12px 14px;
      font-weight: 700;
      list-style-position: inside;
      background: #f8fafc;
    }
    .subscription-plan-settings[open] > summary {
      border-bottom: 1px solid var(--line);
    }
    .subscription-plan-field-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
      padding: 14px;
    }
    .subscription-plan-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }
    .subscription-plan-field-wide {
      grid-column: 1 / -1;
    }
    .subscription-plan-field input,
    .subscription-plan-field select,
    .subscription-plan-field textarea {
      width: 100%;
      color: var(--ink);
      font-weight: 400;
    }
    .subscription-plan-checks {
      padding: 0 14px 14px;
    }
    .subscription-plan-summary-list {
      display: grid;
      gap: 8px;
      padding: 14px;
    }
    .subscription-plan-summary-list.compact-list {
      padding: 10px 0 0;
    }
    .subscription-plan-summary-list > div {
      display: grid;
      grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .subscription-plan-summary-list span {
      color: var(--muted);
      line-height: 1.35;
    }
	    .subscription-plan-summary {
	      display: grid;
	      gap: 10px;
	      margin-top: 10px;
	    }
	    .subscription-plan-summary[hidden] {
	      display: none;
	    }
    .subscription-plan-summary-row {
      display: grid;
      grid-template-columns: minmax(94px, 0.4fr) minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      font-size: 13px;
    }
    .subscription-plan-summary-row strong {
      color: var(--ink);
    }
    .subscription-plan-summary-row span {
      color: var(--muted);
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .subscription-plan-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }
    .subscription-plan-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }
    .subscription-plan-checklist {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .subscription-plan-check {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .subscription-plan-check::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      margin-top: 4px;
      background: #d0d5dd;
    }
    .subscription-plan-check.is-ready::before {
      background: #087443;
    }
    .subscription-plan-check.is-blocked::before {
      background: #b42318;
    }
    .subscription-plan-settings > .muted {
      display: block;
      padding: 14px;
      line-height: 1.35;
    }
	    .subscription-plan-footer {
	      margin-top: 14px;
	      padding-top: 14px;
	      border-top: 1px solid var(--line);
	    }
	    .subscription-plan-empty-state {
	      display: grid;
	      gap: 4px;
	      margin-top: 10px;
	      border: 1px dashed var(--line);
	      border-radius: 10px;
	      background: #f8fafc;
	      padding: 14px;
	      color: var(--muted);
	      font-size: 13px;
	    }
	    .subscription-plan-empty-state[hidden] {
	      display: none;
	    }
	    .subscription-plan-empty-state strong {
	      color: var(--ink);
	    }
	    .subscription-plan-readiness-panel {
	      display: grid;
	      gap: 8px;
	      margin-top: 12px;
	      border: 1px solid var(--line);
	      border-radius: 10px;
	      background: #f8fafc;
	      padding: 12px;
	    }
	    .subscription-plan-readiness-panel h3 {
	      margin: 2px 0 0;
	      font-size: 14px;
	    }
	    @media (max-width: 1180px) {
	      .subscription-page-grid.two-column {
	        grid-template-columns: 1fr;
	      }
		      .subscription-plan-builder {
		        grid-template-columns: 1fr;
		      }
		      .subscription-plan-product-picker {
		        grid-template-columns: 1fr 1fr;
		      }
	      .subscription-plan-side {
	        position: static;
	        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	      }
      .subscription-plan-list {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
    }
	    @media (max-width: 760px) {
	      .subscription-state-row {
	        grid-template-columns: 1fr;
	      }
	      .subscription-feature-table {
	        display: block;
	        overflow-x: auto;
	      }
	      .subscription-feature-table th,
	      .subscription-feature-table td {
	        white-space: nowrap;
	      }
      .subscription-plan-product-picker {
        grid-template-columns: 1fr;
      }
      .subscription-plan-product-bulk-actions,
      .subscription-plan-product-bulk-chip {
        width: 100%;
      }
      .subscription-plan-product-candidate {
        grid-template-columns: 1fr;
      }
      .subscription-plan-summary-list > div {
        grid-template-columns: 1fr;
      }
      .subscription-plan-summary-row {
        grid-template-columns: 1fr;
      }
      .subscription-option-fields {
        grid-template-columns: 1fr;
      }
      .subscription-rule-fields {
        grid-template-columns: 1fr;
      }
    }
    .crm-two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }
    .crm-block {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,0.94);
      padding: 14px;
    }
    .customer-legacy-detail {
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }
    .customer-legacy-detail > summary {
      cursor: pointer;
      font-weight: 700;
      color: #0f172a;
      list-style: none;
    }
    .customer-legacy-detail > summary::-webkit-details-marker {
      display: none;
    }
    .customer-legacy-detail > summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 8px;
      color: var(--muted);
      transition: transform 140ms ease;
    }
    .customer-legacy-detail[open] > summary::before {
      transform: rotate(90deg);
    }
    .customer-legacy-detail-shell {
      margin-top: 10px;
    }
    .crm-section-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    .crm-notes-list {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      max-height: 320px;
      overflow: auto;
      padding: 8px;
    }
    .crm-note-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 8px;
      background: #fff;
    }
    .crm-note-flag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #334155;
      font-size: 13px;
    }
    .crm-note-flag input {
      margin: 0;
    }
    .crm-note-editor textarea {
      width: 100%;
      display: block;
      resize: vertical;
      border-radius: 12px;
      min-height: 110px;
    }
    .crm-note-quick textarea {
      min-height: 128px;
    }
    .crm-note-timeline {
      display: grid;
      gap: 8px;
    }
    .crm-note-preview {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 10px;
    }
    .crm-note-preview:last-child {
      margin-bottom: 0;
    }
    .crm-note-preview-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .crm-note-preview-text {
      color: #334155;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .crm-note-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .crm-note-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .crm-note-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      background: #f8fafc;
      color: #334155;
    }
    .crm-note-badge.urgent {
      border-color: #fecaca;
      background: #fff1f2;
      color: #b91c1c;
    }
    .crm-note-row:last-child {
      margin-bottom: 0;
    }
    .crm-note-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .crm-note-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      margin-bottom: 4px;
    }
    .crm-note-row .btn-ghost,
    .crm-note-row .btn-danger {
      padding: 4px 8px;
      font-size: 12px;
      min-height: 28px;
    }
    .crm-note-editing {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15) inset;
    }
    .crm-note-text {
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.45;
    }
    .crm-followup-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
    }
    .crm-followup-day {
      min-height: 132px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .crm-followup-day.is-today {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12) inset;
    }
    .crm-followup-day-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      color: #334155;
    }
    .crm-followup-day-head span {
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eef2ff;
      color: #3730a3;
      font-weight: 700;
    }
    .crm-followup-day-body {
      display: grid;
      gap: 6px;
    }
    .crm-followup-slots {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 2px;
    }
    .crm-followup-slot {
      border: 1px dashed #cbd5e1;
      border-radius: 999px;
      background: #fff;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      padding: 5px 7px;
      cursor: pointer;
    }
    .crm-followup-slot:hover,
    .crm-followup-slot:focus-visible {
      border-color: #2563eb;
      color: #1d4ed8;
      outline: none;
    }
    .crm-followup-chip {
      width: 100%;
      min-height: 46px;
      text-align: left;
      border: 1px solid #dbe3ef;
      border-left: 4px solid #64748b;
      border-radius: 8px;
      background: #f8fafc;
      color: #0f172a;
      padding: 6px 8px;
      cursor: pointer;
    }
    .crm-followup-chip span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 2px;
    }
    .crm-followup-chip strong {
      display: block;
      font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .crm-followup-chip.priority-urgent,
    .crm-followup-row.is-overdue {
      border-left-color: #dc2626;
    }
    .crm-followup-chip.priority-high {
      border-left-color: #ca8a04;
    }
    .crm-followup-chip.priority-low {
      border-left-color: #16a34a;
    }
    .crm-followup-list {
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow: auto;
    }
    .crm-followup-row {
      border: 1px solid var(--line);
      border-left: 4px solid #64748b;
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .crm-followup-row.is-done,
    .crm-followup-row.is-cancelled {
      opacity: 0.72;
      border-left-color: #94a3b8;
    }
    .crm-followup-row-title {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-bottom: 4px;
    }
    .crm-followup-actions {
      flex-shrink: 0;
    }
    .crm-followup-editing {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15) inset;
    }
    .dashboard-note-card {
      border: 1px solid #fecaca;
      border-radius: 12px;
      background: #fff7f7;
      padding: 12px;
    }
    .dashboard-agenda {
      display: grid;
      gap: 12px;
    }
    .dashboard-agenda-day {
      display: grid;
      gap: 8px;
    }
    .dashboard-agenda-day-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #334155;
      font-size: 13px;
    }
    .dashboard-agenda-item {
      border-color: var(--line);
      border-left: 4px solid #2563eb;
      background: #fff;
    }
    .dashboard-agenda-item.priority-urgent,
    .dashboard-agenda-item.priority-high {
      border-left-color: #dc2626;
    }
    .dashboard-note-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .dashboard-note-customer {
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
    }
    .dashboard-note-subtitle {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .dashboard-note-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .crm-address-row {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px;
      background: #fff;
      margin-bottom: 8px;
    }
    .crm-address-row:last-child {
      margin-bottom: 0;
    }
    .crm-address-row .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .crm-address-field {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .crm-address-field-label {
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }
    .crm-address-row input[aria-invalid="true"] {
      border-color: #b91c1c;
      box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.12);
    }
    .crm-address-overview-list {
      display: grid;
      gap: 8px;
    }
    .crm-address-overview-row {
      display: grid;
      gap: 5px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      overflow-wrap: anywhere;
    }
    .crm-address-overview-row > div:first-child {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .crm-address-row input[readonly] {
      border: 1px solid transparent;
      background: transparent;
      color: #334155;
      padding-left: 4px;
      padding-right: 4px;
    }
    .crm-address-row.is-editing input[data-field]:not([type="checkbox"]):not([type="radio"]) {
      border-color: var(--line);
      background: #fff;
      padding-left: 10px;
      padding-right: 10px;
    }
    .crm-address-types {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .crm-address-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .crm-address-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      padding: 2px 8px;
      font-size: 11px;
      color: #334155;
      background: #f8fafc;
    }
    .crm-activity-row {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px;
      margin-bottom: 8px;
      background: #fff;
    }
    .crm-activity-row-button {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20px;
      gap: 8px;
      align-items: center;
      color: inherit;
      text-align: left;
      font: inherit;
    }
    .crm-activity-row-button:disabled {
      cursor: default;
      opacity: 1;
    }
    .crm-activity-row-button.is-actionable {
      cursor: pointer;
    }
    .crm-activity-row-button.is-actionable:hover,
    .crm-activity-row-button.is-actionable:focus-visible {
      border-color: #94a3b8;
      background: #f8fafc;
    }
    .crm-activity-copy {
      min-width: 0;
      display: flex;
      gap: 8px;
      align-items: baseline;
      white-space: nowrap;
      overflow: hidden;
    }
    .crm-activity-open {
      color: #64748b;
      font-size: 22px;
      line-height: 1;
      text-align: right;
    }
    .crm-activity-row.compact {
      padding: 10px;
    }
    .crm-activity-row:last-child {
      margin-bottom: 0;
    }
    .crm-activity-meta {
      font-size: 12px;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .crm-activity-title {
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .crm-activity-body {
      color: #334155;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.4;
    }
    @media (max-width: 720px) {
      .crm-activity-copy {
        display: grid;
        grid-template-columns: 1fr;
        white-space: normal;
      }
      .crm-activity-title,
      .crm-activity-body {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .forecast-toolbar-toggle {
      min-height: 38px;
      white-space: nowrap;
      background: #fff;
    }
    .forecast-followup-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .forecast-followup-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 10px;
    }
    .forecast-followup-card.warn {
      border-color: #fcd34d;
      background: #fffbeb;
    }
    .forecast-followup-card.bad {
      border-color: #fecaca;
      background: #fff7f7;
    }
    .forecast-followup-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .forecast-followup-title {
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
    }
    .forecast-followup-subtitle {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .forecast-status-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 9px;
      white-space: nowrap;
    }
    .forecast-status-chip.good {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }
    .forecast-status-chip.warn {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }
    .forecast-status-chip.bad {
      border-color: #fecaca;
      background: #fff7f7;
      color: #b91c1c;
    }
    .forecast-followup-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .forecast-followup-stat {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,0.82);
      padding: 8px 10px;
    }
    .forecast-followup-stat .label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
      font-weight: 700;
    }
    .forecast-followup-stat .value {
      margin-top: 4px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.1;
    }
    .forecast-table-actions {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .forecast-table-actions .btn-ghost,
    .forecast-table-actions .action {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 10px;
    }
    .crm-klaviyo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
    }
    @media (max-width: 1240px) {
      .crm-followup-calendar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .ops-workspace-grid.campaigns {
        grid-template-columns: 1fr;
      }
      .campaign-run-layout {
        grid-template-columns: 1fr;
      }
      .campaign-primary-fields,
      .campaign-action-intro-grid,
      .campaign-run-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .campaign-list-stack {
        max-height: none;
      }
      .b2b-customers-shell {
        grid-template-columns: 1fr;
      }
      .b2b-customers-rail {
        position: static;
        max-height: none;
      }
      .b2b-customers-segments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .b2b-customers-rail-actions {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .b2b-customers-rail-actions .action,
      .b2b-customers-rail-actions .btn-ghost {
        width: auto;
      }
      .customers-b2b-modal-card {
        width: min(940px, 96vw);
      }
      .customer-directory-actions,
      .customer-table-actions {
        flex-wrap: wrap;
      }
    }
    @media (max-width: 840px) {
      .ops-page-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .campaign-pane-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .campaign-list-toolbar {
        grid-template-columns: 1fr;
      }
      .campaign-preview-row {
        grid-template-columns: 1fr;
      }
      .ops-summary-strip {
        align-items: flex-start;
      }
      .ops-filter-status {
        margin-left: 0;
        width: 100%;
      }
      .ops-inline-grid-head {
        grid-template-columns: minmax(0, 1fr) 90px 84px;
      }
      .b2b-customers-segments {
        grid-template-columns: 1fr;
      }
      #panel-sales-customers .sales-customers-result-filters {
        margin-top: 6px;
      }
      #panel-sales-customers .sales-customers-mobile-view {
        display: block;
      }
      #panel-sales-customers .sales-customers-mobile-view select {
        min-height: 40px;
      }
      #panel-sales-customers .sales-customers-segments {
        display: none !important;
      }
      .b2b-customers-page-head {
        align-items: flex-start;
      }
      .b2b-customers-selection-summary {
        margin-right: 0;
      }
      .customers-assisted-checkout-controls {
        grid-template-columns: 1fr;
      }
      .customers-assisted-line-row {
        grid-template-columns: minmax(0, 1fr) 76px 112px 104px minmax(96px, auto) auto;
      }
      .customers-assisted-link-row {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .customers-assisted-link-row .action,
      .customers-assisted-link-row .btn-ghost {
        width: 100%;
      }
      .customers-assisted-preview-totals {
        grid-template-columns: 1fr 1fr;
      }
      .customers-b2b-section-head {
        align-items: flex-start;
      }
      .customers-b2b-access-toggles {
        gap: 8px;
      }
      .crm-search-row {
        align-items: stretch;
      }
      .crm-search-row .btn-ghost {
        width: 100%;
      }
      .crm-header-shell {
        flex-direction: column;
      }
      .crm-customer-identity,
      .crm-tabs-inline {
        width: 100%;
        flex-basis: auto;
      }
      .crm-tabs-inline {
        justify-content: flex-start;
      }
      .crm-header-actions {
        width: 100%;
      }
      .crm-section-head {
        flex-direction: column;
      }
      .crm-two-col {
        grid-template-columns: 1fr;
      }
      .crm-followup-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .crm-followup-row {
        display: grid;
      }
      .crm-followup-actions {
        width: 100%;
      }
      .crm-address-row .grid {
        grid-template-columns: 1fr;
      }
      #b2b-crm-overview-manage-addresses,
      #b2b-crm-address-section button {
        min-height: 44px;
      }
      .forecast-followup-stats {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 560px) {
      .crm-followup-calendar-grid {
        grid-template-columns: 1fr;
      }
    }
    .customer-modal-notes-card textarea {
      width: 100%;
      min-height: 90px;
    }
    .customers-modal-notes-list {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      max-height: 170px;
      overflow: auto;
    }
    .customers-modal-note-row {
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
    }
    .customers-modal-note-row:last-child {
      border-bottom: 0;
    }
    .customers-modal-note-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .customers-modal-note-text {
      white-space: pre-wrap;
      word-break: break-word;
      color: #0f172a;
      font-size: 13px;
      line-height: 1.4;
    }
    .customer-modal-delete-card {
      border-color: #fecaca;
      background: #fff7f7;
    }
    .customer-modal-delete-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .customer-modal-delete-row input {
      flex: 1;
      min-width: 180px;
    }
    .settings-hint {
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      color: #475569;
      background: #f8fafc;
      font-size: 12px;
      white-space: pre-wrap;
    }
    .settings-editor-card {
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #fff;
      padding: 12px;
    }
    .settings-editor-card__head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }
    .settings-lock-explainer {
      display: grid;
      gap: 4px;
      margin-top: 10px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 9px 10px;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      line-height: 1.35;
    }
    .settings-lock-explainer strong {
      color: #0f172a;
      font-size: 12px;
    }
    .settings-data-table-wrap {
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
    }
    .settings-data-table {
      width: 100%;
      min-width: 1120px;
      border-collapse: collapse;
      font-size: 12px;
    }
    .settings-data-table th,
    .settings-data-table td {
      border-bottom: 1px solid #e2e8f0;
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }
    .settings-data-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f8fafc;
      color: #334155;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .settings-data-table tbody tr:last-child td {
      border-bottom: 0;
    }
    .settings-data-table input,
    .settings-data-table select,
    .settings-data-table textarea {
      width: 100%;
      min-width: 0;
      font-size: 12px;
      padding: 7px 8px;
    }
    .settings-data-table textarea {
      min-height: 64px;
      resize: vertical;
    }
    .settings-data-table--shipping td {
      min-width: 100px;
    }
    .settings-data-table .cell-check {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 32px;
    }
    .settings-data-table .cell-check input {
      width: auto;
      transform: scale(1.05);
    }
    .settings-weekday-grid {
      min-width: 170px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px 8px;
    }
    .settings-weekday-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #334155;
      white-space: nowrap;
    }
    .settings-weekday-pill input {
      width: auto;
      margin: 0;
      transform: scale(1.02);
    }
    .shipping-service-summary-title {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .shipping-service-summary-title strong {
      font-size: 14px;
      color: #0f172a;
    }
    .shipping-service-summary-subtle {
      font-size: 12px;
      color: #64748b;
      line-height: 1.45;
      white-space: normal;
    }
    .shipping-service-summary-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .shipping-service-summary-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .shipping-service-summary-badges .chip-muted {
      background: #f1f5f9;
      color: #475569;
    }
    .shipping-service-summary-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
      white-space: nowrap;
    }
    .shipping-service-modal-card {
      width: min(980px, 96vw);
      position: relative;
      z-index: 1;
      pointer-events: auto;
      isolation: isolate;
      contain: layout paint style;
      transform: translateZ(0);
    }
    .shipping-service-modal-close {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #334155;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }
    .shipping-service-modal-weekdays {
      margin-top: 12px;
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .shipping-service-modal-weekday-grid {
      grid-template-columns: repeat(4, minmax(0, max-content));
      min-width: 0;
    }
    .shipping-service-modal-postcodes {
      margin-top: 12px;
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .shipping-service-modal-postcode-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .shipping-service-modal-postcode-empty {
      border: 1px dashed #dbe4f0;
      border-radius: 12px;
      padding: 14px;
      background: #f8fafc;
    }
    .shipping-service-modal-postcode-item {
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    .shipping-service-modal-postcode-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .shipping-service-modal-postcode-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      min-width: 0;
    }
    .shipping-service-modal-postcode-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #0f172a;
      font-size: 13px;
      font-weight: 600;
      text-transform: capitalize;
      white-space: nowrap;
    }
    .shipping-service-modal-postcode-chip--muted {
      background: #f1f5f9;
      color: #475569;
    }
    .shipping-service-modal-postcode-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }
    .shipping-service-modal-postcode-field--wide {
      grid-column: 1 / -1;
    }
    .shipping-service-modal-postcode-active {
      justify-content: flex-end;
    }
    .shipping-service-modal-actions {
      margin-top: 14px;
      justify-content: space-between;
      gap: 10px;
    }
    .settings-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #334155;
    }
    .settings-check input {
      width: auto;
      margin: 0;
    }
    .settings-data-table .cell-remove {
      width: 1%;
      white-space: nowrap;
    }
    .settings-data-table .cell-remove button {
      min-width: 44px;
    }
    .settings-data-table tr[data-settings-consumer-service-open] {
      cursor: pointer;
    }
    @media (max-width: 760px) {
      .shipping-service-modal-postcode-grid {
        grid-template-columns: 1fr;
      }
      .shipping-service-modal-postcode-field--wide {
        grid-column: auto;
      }
      .shipping-service-modal-postcode-active {
        justify-content: flex-start;
      }
    }
    .settings-table-note {
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
    }
    .settings-advanced-panel {
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      background: #fff;
      padding: 10px 12px;
    }
    .settings-advanced-panel > summary {
      cursor: pointer;
      font-weight: 700;
      color: #0f172a;
      list-style: none;
    }
    .settings-advanced-panel > summary::-webkit-details-marker {
      display: none;
    }
    .forecast-calendar-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 10px;
    }
    .forecast-week-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,0.96);
      overflow: hidden;
    }
    .forecast-week-head {
      padding: 10px 12px;
      border-bottom: 1px solid #e5e7eb;
      background: #f8fafc;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
    }
    .forecast-week-head strong {
      font-size: 13px;
      color: #0f172a;
    }
    .forecast-week-head span {
      font-size: 12px;
      color: var(--muted);
    }
    .forecast-week-days {
      padding: 8px;
      display: grid;
      gap: 6px;
    }
    .forecast-day-row {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 8px;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      background: #fff;
    }
    .forecast-day-row .day {
      font-weight: 700;
      color: #0f172a;
    }
    .forecast-day-row .value {
      text-align: right;
      min-width: 56px;
      font-variant-numeric: tabular-nums;
    }
    .forecast-day-row .value strong {
      color: #0f172a;
    }
    .forecast-day-row .bar {
      grid-column: 1 / -1;
      height: 6px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
      margin-top: 2px;
    }
    .forecast-day-row .bar > span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #3b82f6, #16a34a);
    }
    .forecast-day-row.is-spike {
      border-color: #f59e0b;
      background: #fff8eb;
    }
    .forecast-refresh-status {
      margin-left: auto;
      font-size: 12px;
      color: var(--muted);
    }
    .shop-domain-field {
      display: flex;
      align-items: center;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .shop-domain-field input {
      border: 0;
      border-radius: 0;
      flex: 1;
      min-width: 0;
      outline: none;
    }
    .shop-domain-suffix {
      padding: 0 10px;
      border-left: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
      background: #f8fafc;
      line-height: 36px;
    }
    .conn-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
    }
    .conn-status .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #9ca3af;
    }
    .conn-status.active .dot { background: #16a34a; }
    .conn-status.saved .dot { background: #d97706; }
    .conn-status.ready .dot { background: #64748b; }
    .conn-status.inactive .dot { background: #ef4444; }
    .conn-status.unknown .dot { background: #d97706; }
    .analysis-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .analysis-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
    }
    .analysis-card.clickable {
      cursor: pointer;
      transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    }
    .analysis-card.clickable:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    }
    .analysis-card.clickable.active {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
      background: #f8fafc;
    }
    .analysis-card .label {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .analysis-card .value {
      margin-top: 4px;
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1;
      color: #0f172a;
    }
    .analysis-card .sub {
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
    }
    .analysis-pressure {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      background: #fff;
    }
    .analysis-pressure.ok { color: #166534; border-color: #86efac; background: #f0fdf4; }
    .analysis-pressure.warn { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
    .analysis-pressure.critical { color: #991b1b; border-color: #fca5a5; background: #fef2f2; }
    .analysis-alerts {
      margin: 8px 0 0;
      padding-left: 18px;
      color: #0f172a;
      font-size: 13px;
      line-height: 1.45;
    }
    .analysis-alerts li + li { margin-top: 4px; }
    .analysis-alerts li.critical { color: #991b1b; }
    .analysis-alerts li.warn { color: #92400e; }
    .analysis-alerts li.info { color: #334155; }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }
    .pill.ok { color: #166534; border-color: #86efac; background: #f0fdf4; }
    .pill.warn { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
    .pill.bad { color: #991b1b; border-color: #fca5a5; background: #fef2f2; }
    .analytics-activity-category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }
    .analytics-activity-category-card {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
      text-align: left;
      cursor: pointer;
      transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    }
    .analytics-activity-category-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    }
    .analytics-activity-category-card.active {
      border-color: #0f172a;
      box-shadow: inset 0 0 0 1px #0f172a;
      background: #f8fafc;
    }
    .analytics-activity-category-card .label {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .analytics-activity-category-card .value {
      margin-top: 4px;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.1;
      color: #0f172a;
    }
    .analytics-activity-category-card .sub {
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
    }
    .analytics-activity-sort-btn {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font: inherit;
      font-weight: 700;
      color: inherit;
      cursor: pointer;
      text-align: left;
    }
    .analytics-activity-sort-btn:hover,
    .analytics-activity-sort-btn.active {
      color: #0f172a;
    }
    .analytics-activity-sort-btn:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
      border-radius: 6px;
    }
    .analytics-activity-sort-icon {
      font-size: 11px;
      color: #64748b;
      flex: 0 0 auto;
    }
    @media (max-width: 1200px) {
      .analysis-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    }
    @media (max-width: 680px) {
      .analysis-grid { grid-template-columns: 1fr; }
    }
    .settings-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 12px;
    }
    .settings-tab.active {
      background: #111827;
      color: #fff;
      border-color: #111827;
    }
    .settings-view { display: none; }
    .settings-view.active { display: block; }
    .settings-printing-workspace.active {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .settings-printing-order-status { order: 1; }
    .settings-printing-order-devices { order: 2; }
    .settings-printing-order-installation { order: 3; }
    .settings-printing-order-profiles { order: 4; }
    .settings-printing-order-queue { order: 5; }
    .settings-print-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .settings-print-summary-card {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
    }
    .settings-print-summary-card span {
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .settings-print-summary-card strong {
      color: #0f172a;
      font-size: 22px;
      overflow-wrap: anywhere;
    }
    .settings-runtime-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 10px;
      border: 1px solid #cbd5e1;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }
    .settings-runtime-pill.online {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }
    .settings-runtime-pill.offline {
      border-color: #fecaca;
      background: #fff1f2;
      color: #991b1b;
    }
    .settings-runtime-pill.unknown {
      border-color: #fde68a;
      background: #fffbeb;
      color: #92400e;
    }
    .settings-diagnostic-list {
      display: grid;
      gap: 8px;
    }
    .settings-diagnostic-row {
      display: grid;
      grid-template-columns: minmax(140px, 1fr) auto auto auto minmax(220px, 2fr);
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      font-size: 13px;
    }
    @media (max-width: 760px) {
      .settings-diagnostic-row { grid-template-columns: 1fr; }
      .settings-print-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .settings-day-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(88px, 1fr));
      gap: 6px;
    }
    .settings-day-grid label {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      font-size: 13px;
    }
    .settings-day-grid--spacious label {
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
    }
    .settings-view.settings-shipping-view {
      display: none;
      gap: 12px;
    }
    .settings-view.settings-shipping-view.active {
      display: grid;
    }
    .prometheus-shipping-shell .ops-page-head {
      align-items: flex-start;
    }
    .prometheus-shipping-actions {
      max-width: 520px;
      justify-content: flex-end;
    }
    .prometheus-shipping-tabs .prometheus-shipping-tab.active {
      background: #111827;
      color: #fff;
      border-color: #111827;
    }
    .prometheus-shipping-pages {
      display: grid;
      gap: 12px;
    }
    .prometheus-shipping-page {
      display: none;
      gap: 12px;
    }
    .prometheus-shipping-page.active {
      display: grid;
    }
    .shipping-profile-grid,
    .shipping-cutoff-grid,
    .shipping-calendar-grid {
      margin-top: 10px;
    }
    .shipping-readonly-value {
      min-height: 40px;
      border: 1px solid #d8dbe1;
      border-radius: 8px;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      align-items: center;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }
    .shipping-day-grid {
      grid-template-columns: repeat(7, minmax(64px, 1fr));
      gap: 8px;
    }
    .shipping-day-grid label {
      min-height: 38px;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 700;
    }
    .shipping-holiday-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .shipping-holiday-card.is-disabled {
      background: #f1f5f9;
    }
    .shipping-holiday-card.is-disabled .shipping-holiday-title,
    .shipping-holiday-card.is-disabled label {
      color: #64748b;
    }
    .shipping-holiday-title {
      margin-top: 4px;
      color: #0f172a;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.3;
    }
    .settings-inline-checks--compact {
      margin-top: 0;
      gap: 8px;
    }
    .settings-inline-checks--compact label {
      background: #fff;
      padding: 7px 9px;
    }
    .shipping-internal-field {
      display: none !important;
    }
    .shipping-country-picker {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.75fr);
      gap: 12px;
      margin-top: 12px;
      align-items: start;
    }
    .shipping-country-search-panel,
    .shipping-selected-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
      min-width: 0;
    }
    .shipping-country-options {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      max-height: 420px;
      overflow: auto;
      padding-right: 4px;
    }
    .shipping-country-option {
      border: 1px solid #d8dbe1;
      border-radius: 8px;
      background: #fff;
      color: #0f172a;
      min-height: 38px;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
      cursor: pointer;
      font-size: 13px;
      font-weight: 650;
    }
    .shipping-country-option:hover,
    .shipping-country-option:focus-visible {
      border-color: #94a3b8;
      outline: none;
    }
    .shipping-country-option.is-selected {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .shipping-country-option strong {
      color: #2563eb;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .shipping-selected-countries {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .shipping-selected-country {
      border: 1px solid #bfdbfe;
      border-radius: 999px;
      background: #eff6ff;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.2;
      cursor: pointer;
    }
    .shipping-selected-country strong {
      color: #2563eb;
      font-size: 14px;
      line-height: 1;
    }
    .shipping-selected-country:disabled {
      cursor: default;
    }
    .shipping-selected-country:disabled strong {
      display: none;
    }
    .shipping-country-empty {
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 10px;
      background: #fff;
      font-size: 13px;
    }
    @media (max-width: 720px) {
      .prometheus-shipping-actions {
        max-width: none;
        justify-content: flex-start;
      }
      .shipping-day-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
      }
      .shipping-country-picker {
        grid-template-columns: 1fr;
      }
    }
    .settings-section-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 14px;
    }
    .settings-section-head h3 {
      margin: 0 0 6px;
      font-size: 26px;
      line-height: 1.1;
    }
    .settings-subtitle {
      margin: 2px 0 8px;
      font-size: 13px;
      color: #0f172a;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .settings-section-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 10px;
    }
    .settings-section-grid--2 > * {
      grid-column: span 6;
      min-width: 0;
    }
    .settings-section-grid--3 > * {
      grid-column: span 4;
      min-width: 0;
    }
    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .settings-field-label {
      font-size: 12px;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    .settings-field-help {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .gateway-setup-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .gateway-setup-steps > div {
      border-left: 3px solid #0f172a;
      padding: 2px 0 2px 10px;
      min-width: 0;
    }
    .gateway-setup-steps strong,
    .gateway-setup-steps span {
      display: block;
    }
    .gateway-setup-steps strong {
      font-size: 13px;
      color: #0f172a;
    }
    .gateway-setup-steps span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }
    .gateway-setup-advanced summary {
      cursor: pointer;
      color: #0f172a;
      font-weight: 700;
    }
    .gateway-setup-session:empty {
      display: none;
    }
    .gateway-setup-session-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
    }
    .gateway-setup-session-layout {
      display: grid;
      grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
      margin-top: 12px;
    }
    .gateway-setup-qr {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      place-items: center;
      min-height: 186px;
    }
    .gateway-setup-qr img {
      width: min(168px, 100%);
      height: auto;
      display: block;
    }
    .gateway-setup-customer-copy {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
    }
    .gateway-setup-customer-copy ol {
      margin: 8px 0 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.45;
    }
    .gateway-setup-session-panel textarea {
      width: 100%;
      min-height: 150px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
    }
    .gateway-setup-session-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .settings-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .settings-chip-list--compact {
      margin-top: 2px;
    }
    .settings-chip-button {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: #f8fafc;
      color: #0f172a;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .settings-chip-button strong {
      font-weight: 800;
    }
    .settings-chip-button:hover,
    .settings-chip-button:focus-visible {
      border-color: #94a3b8;
      background: #eef2ff;
      outline: none;
    }
    .settings-webhook-card {
      border: 1px solid rgba(203, 213, 225, 0.9);
      border-radius: 10px;
      background: #f8fafc;
      padding: 10px 12px;
    }
    .settings-webhook-steps {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      color: #0f172a;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 600;
    }
    .settings-code-block {
      margin: 0;
      border: 1px solid #d8dbe1;
      border-radius: 8px;
      background: #fff;
      padding: 10px 12px;
      font-size: 12px;
      line-height: 1.5;
      color: #0f172a;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .settings-inline-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .settings-inline-checks label {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
    }
    .settings-workflow-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
      padding: 12px;
    }
    .settings-workflow-list {
      display: grid;
      gap: 8px;
    }
    .settings-workflow-row {
      display: grid;
      grid-template-columns: 28px minmax(120px, 180px) minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 8px 0;
      border-top: 1px solid rgba(203, 213, 225, 0.7);
    }
    .settings-workflow-row:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .settings-workflow-step {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: #0f172a;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .settings-workflow-label {
      font-size: 12px;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
      padding-top: 6px;
    }
    .settings-workflow-value {
      color: #0f172a;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 600;
    }
    .shipping-tier-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .settings-pallet-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
    }
    .settings-action-bar {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .settings-status-line {
      font-size: 13px;
      font-weight: 600;
    }
    .settings-shipping-view textarea {
      min-height: 96px;
    }
    .settings-shipping-view #settings-shipping-allowed-countries {
      min-height: 220px;
    }
    .settings-station-table-wrap {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: auto;
      background: #fff;
    }
    .settings-station-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 860px;
    }
    .settings-station-table th,
    .settings-station-table td {
      border-bottom: 1px solid var(--line);
      padding: 8px;
      font-size: 13px;
      text-align: left;
      vertical-align: top;
    }
    .settings-station-table tr:last-child td { border-bottom: 0; }
    .label-designer-layout {
      display: grid;
      grid-template-columns: minmax(210px, 260px) minmax(320px, 1fr) minmax(220px, 280px);
      gap: 12px;
      margin-top: 10px;
      align-items: start;
    }
    .label-designer-editor {
      display: grid;
      gap: 14px;
    }
    .label-designer-header-grid {
      align-items: start;
    }
    .label-designer-header-actions,
    .label-designer-active-field {
      justify-content: flex-start;
    }
    .label-designer-header-buttons {
      gap: 8px;
      flex-wrap: wrap;
    }
    .label-designer-meta-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }
    .label-designer-meta-help {
      margin-top: -2px;
    }
    .label-designer-status-inline {
      max-width: 420px;
      text-align: right;
    }
    .label-designer-board-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
    }
    .label-designer-board-head h4 {
      margin: 0 0 4px;
      font-size: 16px;
      color: #0f172a;
    }
    .label-designer-grid-field {
      width: min(220px, 100%);
      margin: 0;
    }
    .label-designer-palette {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: #f8fafc;
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      min-height: 340px;
      align-content: start;
    }
    .label-designer-palette-wrap {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .label-designer-preset-list {
      display: grid;
      gap: 8px;
    }
    .label-designer-preset {
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      background: #eff6ff;
      padding: 9px 10px;
      text-align: left;
      display: grid;
      gap: 4px;
      cursor: pointer;
    }
    .label-designer-preset-label {
      font-size: 12px;
      font-weight: 800;
      color: #1d4ed8;
    }
    .label-designer-preset-value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      color: #334155;
      white-space: pre-wrap;
      line-height: 1.25;
    }
    .label-designer-token {
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #fff;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: grab;
      user-select: none;
      text-align: left;
      display: grid;
      gap: 2px;
    }
    .label-designer-token-label {
      font-size: 12px;
      color: #0f172a;
      font-weight: 700;
    }
    .label-designer-token-value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      color: #64748b;
    }
    .label-designer-canvas-wrap {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 10px;
    }
    .label-designer-canvas-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px 12px;
      font-size: 12px;
      color: #475569;
    }
    .label-designer-canvas-meta-copy {
      display: grid;
      gap: 3px;
    }
    .label-designer-canvas-size {
      font-weight: 700;
      color: #0f172a;
    }
    .label-designer-canvas-grid-state {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: #f8fafc;
      color: #334155;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .label-designer-canvas-stage {
      min-height: 360px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 42%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }
    .label-designer-canvas {
      position: relative;
      border: 2px dashed #cbd5e1;
      border-radius: 10px;
      background-color: #f8fafc;
      overflow: visible;
      flex: 0 0 auto;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }
    .label-designer-canvas-item {
      position: absolute;
      border: 1px solid #93c5fd;
      background: rgba(219, 234, 254, 0.85);
      border-radius: 8px;
      color: #0f172a;
      font-weight: 700;
      padding: 4px 6px;
      cursor: move;
      user-select: none;
      touch-action: none;
      display: inline-flex;
      align-items: flex-start;
      min-width: 22px;
      max-width: calc(100% - 8px);
      text-align: left;
      line-height: 1.1;
      overflow: visible;
      transition: box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
    }
    .label-designer-canvas-item-label {
      display: block;
      max-width: 100%;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .label-designer-canvas-item-resize {
      position: absolute;
      right: -6px;
      bottom: -6px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      border: 2px solid #fff;
      background: #2563eb;
      cursor: nwse-resize;
      flex: 0 0 auto;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
    }
    .label-designer-canvas-item.selected {
      border-color: #2563eb;
      background: #dbeafe;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
    }
    .label-designer-canvas-item.dragging {
      opacity: 0.92;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    }
    .label-designer-inspector {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: start;
      min-height: 340px;
    }
    .label-designer-inspector-head {
      display: grid;
      gap: 6px;
    }
    .label-designer-inspector-title {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .label-designer-item-chip {
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: #f8fafc;
      color: #0f172a;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }
    #label-designer-item-text {
      min-height: 62px;
      resize: vertical;
    }
    .label-designer-inline-actions {
      flex-wrap: wrap;
      gap: 8px;
      margin-top: -2px;
    }
    .label-designer-inline-actions .action.secondary {
      min-height: 34px;
    }
    .label-designer-editor-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 2px;
      border-top: 1px solid #e2e8f0;
    }
    #label-designer-zpl-preview,
    #label-designer-epl-preview {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      line-height: 1.35;
    }
    @media (max-width: 1160px) {
      .campaign-overview-grid {
        grid-template-columns: 1fr;
      }
      .label-designer-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .label-designer-layout {
        grid-template-columns: 1fr;
      }
      .label-designer-status-inline {
        max-width: none;
        text-align: left;
      }
      .label-designer-board-head,
      .label-designer-editor-actions {
        display: grid;
      }
      .label-designer-palette,
      .label-designer-inspector {
        min-height: auto;
      }
      .label-designer-canvas-stage {
        min-height: 300px;
      }
      .campaign-schedule-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 720px) {
      .label-designer-meta-grid {
        grid-template-columns: 1fr;
      }
    }
    .manual-label-block {
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fff;
    }
    .manual-label-fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
      align-items: end;
    }
    .manual-label-preset-panel {
      margin-bottom: 12px;
      border: 1px solid #dbe4f0;
      border-radius: 10px;
      padding: 10px;
      background: #f8fafc;
    }
    .manual-label-preset-panel h4 {
      margin: 0 0 8px;
      color: var(--ink);
    }
    .manual-label-preset-actions {
      margin-top: 8px;
      align-items: center;
    }
    .manual-label-preset-actions #manual-label-preset-status {
      flex: 1 1 260px;
    }
    .manual-label-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 13px;
      color: var(--muted);
    }
    .manual-label-field > span {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #64748b;
    }
    .manual-label-preview {
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 10px;
      background: #f8fafc;
    }
    .manual-label-preview strong {
      color: var(--ink);
    }
    .pp-input-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
    }
    .pp-input-stack > span {
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #64748b;
    }
    .pp-task-modal-shell {
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    }
    .pp-task-modal-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .pp-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .pp-toolbar-secondary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px 16px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .pp-toolbar-summary {
      display: grid;
      gap: 2px;
      min-width: 280px;
    }
    .pp-day-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pp-day-context {
      display: grid;
      gap: 2px;
      min-width: 126px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(241, 245, 249, 0.96);
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    .pp-day-context-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }
    .pp-day-context-value {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .pp-plan-layout {
      grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      margin-top: 12px;
    }
    .pp-process-library-card {
      position: sticky;
      top: 12px;
      margin: 0;
      padding: 14px;
    }
    .pp-process-library-head {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }
    .pp-process-library-search {
      width: 100%;
    }
    .pp-process-library-list {
      display: grid;
      gap: 8px;
      max-height: 66vh;
      overflow: auto;
      padding-right: 2px;
      margin-top: 10px;
    }
    .pp-process-item {
      display: block;
      width: 100%;
      text-align: left;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      padding: 11px 13px;
      background: #ffffff;
      box-shadow: none;
      cursor: grab;
    }
    .pp-process-item:hover {
      border-color: rgba(29, 78, 216, 0.18);
    }
    .pp-process-item:active {
      cursor: grabbing;
    }
    .pp-process-item-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .pp-process-item-meta {
      margin-top: 5px;
      font-size: 12px;
      color: var(--muted);
    }
    .pp-process-item-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 12px;
    }
    .pp-process-item-helper {
      font-size: 12px;
      color: #475569;
    }
    .pp-board-shell {
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .pp-board-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(180px, 1fr));
      gap: 12px;
      align-items: start;
      min-width: 1100px;
    }
    .pp-day-column {
      margin: 0;
      border-radius: 18px;
      transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    }
    .pp-day-column--selected {
      border-color: rgba(29, 78, 216, 0.2);
      box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.08), 0 14px 26px rgba(15, 23, 42, 0.06);
      transform: translateY(-1px);
    }
    .pp-day-column-head {
      margin-bottom: 10px;
    }
    .pp-day-column-title-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }
    .pp-day-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .pp-day-done-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: #1d4ed8;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .pp-day-done-link.is-empty {
      color: var(--muted);
    }
    #panel-production-plan .pp-dropzone {
      min-height: 160px;
      margin-top: 0;
      padding: 6px;
      border: 1px dashed rgba(15,23,42,0.16);
      border-radius: 12px;
      background: rgba(248,250,252,0.9);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 6px;
      transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    }
    #panel-production-plan .pp-dropzone.is-selected {
      border-color: rgba(29, 78, 216, 0.24);
      background: rgba(239, 246, 255, 0.94);
    }
    #panel-production-plan .pp-dropzone.is-active {
      border-color: rgba(29, 78, 216, 0.42) !important;
      background: rgba(219, 234, 254, 0.72) !important;
      box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.12);
      transform: translateY(-1px);
    }
    #panel-production-plan .pp-task-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 14px;
      margin: 0;
      min-height: 0;
      border: 1px solid rgba(15, 23, 42, 0.10);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: none;
      cursor: pointer;
      transition: border-color 140ms ease, transform 140ms ease;
    }
    #panel-production-plan .pp-task-card:hover {
      border-color: rgba(29, 78, 216, 0.18);
      transform: translateY(-1px);
    }
    #panel-production-plan .pp-task-card--done {
      opacity: 1;
      border-color: rgba(34, 197, 94, 0.35);
      background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.92));
    }
    #panel-production-plan .pp-task-card--done:hover {
      border-color: rgba(22, 163, 74, 0.45);
    }
    #panel-production-plan .pp-task-card--done .pp-task-title {
      color: #166534;
    }
    #panel-production-plan .pp-task-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }
    #panel-production-plan .pp-task-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--ink);
    }
    #panel-production-plan .pp-task-delete {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid rgba(185, 28, 28, 0.14);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.96);
      color: #b91c1c;
      cursor: pointer;
      flex: 0 0 auto;
    }
    #panel-production-plan .pp-task-delete svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }
    #panel-production-plan .pp-task-subtitle {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }
    #panel-production-plan .pp-task-status {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: #e2e8f0;
      color: #334155;
    }
    #panel-production-plan .pp-task-metrics,
    #panel-production-plan .pp-task-progress {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
    }
    #panel-production-plan .pp-task-assignee {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(241, 245, 249, 0.96);
      color: #334155;
      font-size: 12px;
      font-weight: 600;
    }
    #panel-production-plan .pp-task-card[data-operator-assigned="false"] .pp-task-assignee {
      background: rgba(254, 242, 242, 0.96);
      color: #991b1b;
    }
    #panel-production-plan .pp-task-badges,
    .pp-step-badges,
    .hp-step-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .pp-badge,
    .pp-step-badge,
    .hp-step-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: #e2e8f0;
      color: #334155;
    }
    .pp-badge--production,
    .pp-step-badge--production,
    .hp-step-badge--production {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .pp-badge--cleaning,
    .pp-step-badge--cleaning,
    .hp-step-badge--cleaning {
      background: #dcfce7;
      color: #166534;
    }
    .pp-badge--critical,
    .pp-step-badge--critical,
    .hp-step-badge--critical {
      background: #fee2e2;
      color: #b91c1c;
    }
    .pp-badge--shared,
    .hp-step-badge--shared {
      background: #ede9fe;
      color: #6d28d9;
    }
    .pp-badge--batch {
      background: #fef3c7;
      color: #92400e;
    }
    .pp-badge--ok,
    .pp-step-badge--ok,
    .hp-step-badge--ok {
      background: #dcfce7;
      color: #166534;
    }
    .pp-badge--muted,
    .pp-step-badge--muted,
    .hp-step-badge--muted {
      background: #f1f5f9;
      color: #475569;
    }
    .pp-complete-shell {
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    }
    .pp-complete-overview {
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      padding: 0 0 12px;
      background: transparent;
    }
    .pp-overview-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .pp-overview-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
    }
    .pp-overview-subtitle {
      margin-top: 4px;
      font-size: 14px;
      color: var(--muted);
    }
    .pp-section-head {
      margin-bottom: 10px;
    }
    .pp-section-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #475569;
    }
    .pp-complete-steps {
      display: grid;
      gap: 8px;
    }
    .pp-complete-step {
      border: 1px solid rgba(15, 23, 42, 0.09);
      border-radius: 16px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: none;
    }
    .pp-complete-step--done {
      border-color: rgba(22, 101, 52, 0.22);
      background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.96));
    }
    .pp-complete-step--critical {
      border-color: rgba(185, 28, 28, 0.26);
      background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.96));
    }
    .pp-complete-step--ok {
      border-color: rgba(22, 101, 52, 0.24);
    }
    .pp-complete-step--neutral {
      border-color: rgba(15, 23, 42, 0.09);
      background: rgba(255, 255, 255, 0.96);
    }
    .pp-step-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .pp-step-head-button {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }
    .pp-step-body {
      margin-top: 8px;
    }
    .pp-step-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      background: #e2e8f0;
    }
    .pp-step-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .pp-step-head-button:hover .pp-step-title,
    .pp-step-head-button:focus-visible .pp-step-title {
      color: #1d4ed8;
    }
    .pp-step-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pp-step-meta {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .pp-step-state {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: #e2e8f0;
      color: #334155;
    }
    .pp-step-state--critical {
      background: #fee2e2;
      color: #b91c1c;
    }
    .pp-step-state--ok {
      background: #dcfce7;
      color: #166534;
    }
    .pp-step-state--pending {
      background: #fef3c7;
      color: #92400e;
    }
    .pp-step-alert {
      margin-top: 6px;
      padding: 6px 8px;
      border-radius: 12px;
      background: rgba(254, 242, 242, 0.94);
      color: #b91c1c;
      font-size: 11px;
      font-weight: 600;
    }
    .pp-step-check {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      font-weight: 700;
      color: #0f172a;
    }
    .pp-step-fields,
    .pp-complete-fallback {
      display: grid;
      gap: 8px;
    }
    .pp-complete-fallback {
      min-height: 72px;
    }
    .pp-step-detail {
      margin-top: 4px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(241, 245, 249, 0.9);
      color: #334155;
      font-size: 13px;
      line-height: 1.45;
    }
    .pp-step-inline-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .pp-step-note-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
    }
    .pp-step-note-link:hover,
    .pp-step-note-link:focus-visible {
      color: #1d4ed8;
    }
    .pp-task-progress--bad {
      color: #b42318;
      font-weight: 700;
    }
    .pp-task-progress--ok {
      color: #027a48;
      font-weight: 700;
    }
    .pp-task-progress--muted {
      color: var(--muted);
    }
    .pp-complete-status {
      font-size: 13px;
      font-weight: 700;
      min-height: 20px;
    }
    .pp-done-list {
      display: grid;
      gap: 8px;
    }
    .pp-done-item {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid rgba(15, 23, 42, 0.09);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.98);
      text-align: left;
      cursor: pointer;
    }
    .pp-done-item-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .pp-done-item-meta {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }
    .pp-batch-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .pp-batch-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(254, 243, 199, 0.94);
      color: #92400e;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .pp-ccp-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      padding: 10px;
      background: rgba(248, 250, 252, 0.9);
    }
    .pp-ccp-card--critical {
      border-color: rgba(185, 28, 28, 0.14);
      background: rgba(254, 242, 242, 0.88);
    }
    .pp-ccp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pp-ccp-title {
      font-weight: 700;
      color: var(--ink);
    }
    .pp-ccp-meta {
      margin-top: 4px;
      font-size: 11px;
      color: var(--muted);
    }
    .pp-empty-state {
      border: 1px dashed rgba(15, 23, 42, 0.18);
      border-radius: 14px;
      padding: 14px;
      background: rgba(248, 250, 252, 0.9);
      color: var(--muted);
      font-size: 13px;
    }
    #source-status[data-tone="ok"] {
      color: #166534;
    }
    #source-status[data-tone="warn"] {
      color: #92400e;
    }
    #source-status[data-tone="bad"] {
      color: #b91c1c;
    }
    #ing-status[data-tone="ok"],
    #cat-status[data-tone="ok"],
    [data-tone="ok"] {
      color: #166534;
    }
    #ing-status[data-tone="warn"],
    #cat-status[data-tone="warn"],
    [data-tone="warn"] {
      color: #92400e;
    }
    #ing-status[data-tone="bad"],
    #cat-status[data-tone="bad"],
    [data-tone="bad"] {
      color: #b91c1c;
    }
    .pp-badge--fulfillment,
    .pp-step-badge--fulfillment,
    .hp-step-badge--fulfillment {
      background: #fef3c7;
      color: #92400e;
    }
    .pp-badge--goods_in,
    .pp-step-badge--goods_in,
    .hp-step-badge--goods_in {
      background: #ede9fe;
      color: #6d28d9;
    }
    .pp-badge--monitoring,
    .pp-step-badge--monitoring,
    .hp-step-badge--monitoring {
      background: #e0f2fe;
      color: #0369a1;
    }
    .hp-process-browser-card,
    .hp-process-detail-card {
      border-radius: 22px;
      background:
        radial-gradient(circle at top right, rgba(29, 78, 216, 0.05), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.95));
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
    }
    .hp-process-browser-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hp-process-browser-search {
      width: min(380px, 100%);
    }
    .hp-panel-head {
      display: grid;
      gap: 4px;
    }
    .hp-section-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #64748b;
    }
    .hp-process-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .hp-process-chip {
      display: inline-flex;
      flex-direction: column;
      gap: 3px;
      min-width: 180px;
      max-width: min(280px, 100%);
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.94);
      text-align: left;
      cursor: pointer;
      transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    }
    .hp-process-chip:hover {
      border-color: rgba(29, 78, 216, 0.2);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
      transform: translateY(-1px);
    }
    .hp-process-chip--active {
      border-color: rgba(29, 78, 216, 0.28);
      box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96));
    }
    .hp-process-chip-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .hp-process-chip-meta {
      font-size: 12px;
      color: var(--muted);
    }
    .hp-process-detail-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }
    .hp-detail-actions {
      align-items: center;
    }
    .hp-process-detail-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }
    .hp-authoring-layout {
      display: grid;
      grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .hp-authoring-layout.hidden {
      display: none !important;
    }
    .hp-authoring-sidebar,
    .hp-authoring-main,
    .hp-flow-shell-card {
      min-width: 0;
    }
    .hp-process-copy-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 18px;
      background: rgba(255,255,255,0.84);
    }
    .hp-copy-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #64748b;
    }
    .hp-copy-value {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.55;
      color: #334155;
      white-space: pre-wrap;
    }
    .hp-empty-state {
      border: 1px dashed rgba(15, 23, 42, 0.18);
      border-radius: 18px;
      padding: 22px;
      background: rgba(248, 250, 252, 0.92);
    }
    .hp-empty-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--ink);
    }
    .hp-library-shell-card {
      border-radius: 20px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255,255,255,0.88);
      position: sticky;
      top: 12px;
    }
    .hp-library-head {
      margin-bottom: 0;
    }
    .hp-flow-shell-card {
      border-radius: 20px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255,255,255,0.88);
    }
    .hp-library-toolbar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .hp-library-search {
      width: 100%;
      border-radius: 14px;
    }
    .hp-library-pill-list {
      display: grid;
      gap: 6px;
      max-height: 62vh;
      overflow: auto;
      padding-right: 2px;
    }
    .hp-library-pill {
      display: flex;
      align-items: center;
      min-width: 0;
      max-width: none;
      width: 100%;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.98);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      cursor: grab;
      text-align: left;
      transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    }
    .hp-library-pill:hover {
      border-color: rgba(29, 78, 216, 0.16);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
    }
    .hp-library-pill:active {
      cursor: grabbing;
    }
    .hp-library-pill-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .hp-library-pill-meta {
      font-size: 12px;
      color: var(--muted);
    }
    .hp-library-pill-helper {
      font-size: 12px;
      color: #475569;
    }
    .hp-flow-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hp-flow-canvas {
      min-height: 260px;
      padding: 0;
      align-content: start;
      align-items: start;
      grid-auto-rows: max-content;
    }
    .hp-flow-drop {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      text-align: center;
      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }
    .hp-flow-drop--inline {
      min-height: 12px;
      padding: 5px 0;
      background: transparent;
      border: 0;
    }
    .hp-flow-drop--terminal {
      gap: 8px;
      min-height: 24px;
      padding: 2px 10px;
      border: 1px dashed rgba(15, 23, 42, 0.18);
      border-radius: 999px;
      background: rgba(248, 250, 252, 0.55);
    }
    .hp-flow-drop-line {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.28);
    }
    .hp-flow-drop-plus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.18);
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      flex: 0 0 auto;
    }
    .hp-flow-drop.is-active {
      border-color: rgba(29, 78, 216, 0.38);
      background: rgba(219, 234, 254, 0.52);
      color: #1d4ed8;
    }
    .hp-flow-drop--inline.is-active {
      background: transparent;
      border-color: transparent;
    }
    .hp-flow-drop--inline.is-active .hp-flow-drop-line {
      background: rgba(29, 78, 216, 0.72);
      height: 3px;
    }
    .hp-flow-drop.is-active .hp-flow-drop-plus {
      background: rgba(29, 78, 216, 0.14);
      color: #1d4ed8;
    }
    .hp-flow-drop-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      font-size: 10px;
    }
    .hp-step-card {
      position: relative;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 14px;
      background: rgba(255,255,255,0.98);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      margin: 0;
      padding: 10px 12px;
    }
    .hp-step-card--editable {
      cursor: grab;
    }
    .hp-step-card--editable:active {
      cursor: grabbing;
    }
    .hp-step-card--view {
      cursor: default;
    }
    .hp-step-card[data-step-tone="critical"] {
      border-color: rgba(185, 28, 28, 0.2) !important;
      background: linear-gradient(180deg, rgba(254,242,242,0.98), rgba(255,255,255,0.96));
    }
    .hp-step-card[data-step-tone="shared"] {
      border-color: rgba(109, 40, 217, 0.16) !important;
    }
    .hp-drag-handle {
      display: inline-flex;
      align-items: center;
      padding: 5px 9px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: grab;
    }
    .hp-step-card-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .hp-step-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .hp-drag-grip {
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0;
      flex: 0 0 auto;
      cursor: grab;
      user-select: none;
    }
    .hp-step-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.25;
      min-width: 0;
    }
    .hp-step-meta {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .hp-step-helper {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(241, 245, 249, 0.95);
      color: #475569;
      font-size: 12px;
    }
    .hp-step-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .hp-step-delete {
      min-width: 24px;
      height: 24px;
      padding: 0;
      border-radius: 999px;
      font-size: 16px;
      line-height: 1;
    }
    .hp-step-config-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .hp-modal-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: flex-start;
      justify-content: center;
      z-index: 96;
      padding: 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      background: rgba(15, 23, 42, 0.62);
      pointer-events: auto;
    }
    .hp-modal-card {
      position: relative;
      z-index: 1;
      max-width: 860px;
      width: min(860px, calc(100vw - 48px));
      margin: 0;
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      isolation: isolate;
      contain: layout paint style;
      transform: translateZ(0);
      pointer-events: auto;
    }
    .hp-modal-card input,
    .hp-modal-card textarea,
    .hp-modal-card select {
      -webkit-font-smoothing: antialiased;
    }
    .hp-modal-card textarea,
    .hp-modal-card input[type="text"],
    .hp-modal-card input[type="search"],
    .hp-modal-card input[type="email"],
    .hp-modal-card input[type="tel"],
    .hp-modal-card input[type="url"] {
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .hp-modal-card--wide {
      max-width: 1060px;
      width: min(1060px, calc(100vw - 48px));
    }
    .hp-process-modal-grid,
    .hp-step-modal-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
    }
    .hp-step-ccp-card {
      border-radius: 18px;
      border: 1px solid rgba(185, 28, 28, 0.12);
      background: linear-gradient(180deg, rgba(254, 242, 242, 0.88), rgba(255,255,255,0.94));
    }
    .hp-optional-details {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 16px;
      background: rgba(248, 250, 252, 0.9);
      padding: 12px 14px;
    }
    .hp-optional-details > summary {
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      list-style: none;
    }
    .hp-optional-details > summary::-webkit-details-marker {
      display: none;
    }
    .hp-step-field-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }
    .hp-step-field-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255,255,255,0.94);
    }
    .hp-step-field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .hp-step-field-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .hp-step-field-meta {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .hp-step-field-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .hp-field-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .hp-field-stack > span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
    }
    .hp-step-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .hp-step-footer .muted {
      max-width: 58ch;
    }
    .hp-step-field-list .pp-empty-state {
      margin-top: 10px;
    }
    @media (max-width: 1180px) {
      .pp-plan-layout {
        grid-template-columns: 1fr;
      }
      .pp-process-library-card {
        position: static;
      }
      .pp-toolbar-secondary {
        align-items: stretch;
      }
      .pp-day-actions {
        width: 100%;
      }
      .pp-board-grid {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
      }
      .hp-authoring-layout {
        grid-template-columns: 1fr;
      }
      .hp-library-shell-card {
        position: static;
      }
      .hp-process-browser-head,
      .hp-library-toolbar {
        align-items: stretch;
      }
      .hp-process-browser-search {
        width: 100%;
      }
    }
    @media (max-width: 960px) {
      .hp-process-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .pp-step-head,
      .hp-step-card-head,
      .hp-process-detail-head {
        grid-template-columns: 1fr;
      }
      .hp-step-field-grid,
      .hp-process-modal-grid,
      .hp-step-modal-grid {
        grid-template-columns: 1fr;
      }
      .hp-detail-actions {
        justify-content: flex-start !important;
      }
      .panel.mobile-topbar-title-panel .mobile-topbar-title-source {
        display: none !important;
      }
      .panel.mobile-topbar-title-panel .mobile-topbar-help-source {
        display: none !important;
      }
      .panel.mobile-topbar-title-panel .mobile-topbar-page-head {
        margin-bottom: 8px;
      }
      .panel.mobile-topbar-title-panel .mobile-topbar-page-head .ops-page-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .layout {
        grid-template-columns: 1fr;
      }
      .content { padding: 12px; }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        background: var(--bg);
        padding: 8px 0;
      }
      .topbar-panel-picker { display: block; }
      .settings-day-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
      }
      .settings-section-grid--2 > *,
      .settings-section-grid--3 > * {
        grid-column: span 12;
      }
      .shipping-tier-grid {
        grid-template-columns: 1fr;
      }
      .settings-pallet-grid {
        grid-template-columns: 1fr;
      }
    }
    .ops-page-copy h2,
    .ops-page-copy h3 {
      font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
      line-height: 1.08;
    }
    .ops-page-subtitle {
      font-size: 14px;
    }
    .settings-section-head h3 {
      font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.85rem);
    }
    .table-wrap {
      position: relative;
      max-width: 100%;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable both-edges;
    }
    table {
      min-width: max(100%, 860px);
    }
    th,
    td {
      overflow-wrap: anywhere;
    }
    .customer-directory-row--empty {
      grid-template-columns: 1fr !important;
      min-width: 0 !important;
    }
    .crm-search-result-shell {
      display: grid;
      gap: 8px;
    }
    .crm-search-result-main {
      display: grid;
      gap: 3px;
    }
    .crm-search-result-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .crm-search-result-meta .chip,
    .crm-search-result-meta .customer-directory-status {
      margin: 0;
    }
    @media (max-width: 960px) {
      input,
      select,
      textarea {
        font-size: 16px;
      }
      .card {
        padding: 14px;
        border-radius: 14px;
      }
      .ops-surface,
      .ops-toolbar-surface,
      .crm-search-shell,
      .crm-main,
      .crm-block,
      .settings-section-card,
      .integrations-detail {
        padding: 12px;
      }
      .ops-filter-bar,
      .customer-bulk-bar,
      .crm-search-row {
        align-items: stretch;
      }
      .ops-filter-bar > *,
      .customer-bulk-bar > *,
      .crm-search-row > * {
        width: 100%;
      }
      .ops-filter-bar .ops-field,
      .customer-bulk-bar .ops-field,
      .crm-search-row .ops-field,
      #panel-customers .row > input,
      #panel-customers .row > select,
      #panel-customers .row > button,
      #panel-integrations .row > select,
      #panel-integrations .row > button {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0 !important;
        max-width: none;
      }
      .ops-filter-bar input,
      .ops-filter-bar select,
      .ops-filter-bar button,
      .customer-bulk-bar input,
      .customer-bulk-bar select,
      .customer-bulk-bar button,
      .crm-search-row input,
      .crm-search-row select,
      .crm-search-row button {
        width: 100%;
        min-width: 0 !important;
        max-width: none;
      }
      .ops-filter-status,
      .customer-bulk-count {
        margin-left: 0;
      }
      .crm-tabs,
      .settings-tabs,
      .integrations-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
      .crm-tabs::-webkit-scrollbar,
      .settings-tabs::-webkit-scrollbar,
      .integrations-list::-webkit-scrollbar {
        display: none;
      }
      .crm-tabs [data-crm-tab],
      .settings-tab {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .integrations-hub {
        grid-template-columns: 1fr;
      }
      .integrations-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 78vw);
        position: static;
      }
      .integrations-detail {
        min-height: 0;
      }
      table {
        min-width: max(100%, 680px);
      }
      .settings-station-table {
        min-width: max(100%, 640px);
      }
      th,
      td,
      .settings-station-table th,
      .settings-station-table td {
        padding: 8px;
        font-size: 12px;
      }
      .customer-directory-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        margin-top: 8px;
      }
      .customer-directory-head {
        display: none;
      }
      .customer-directory-row,
      .customer-directory-wrap.with-select .customer-directory-row,
      #panel-sales-customers .customer-directory-wrap.with-select .customer-directory-row {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        gap: 10px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
      }
      .customer-directory-row:last-child {
        margin-bottom: 0;
      }
      .customer-directory-row > div {
        min-width: 0;
        display: grid;
        gap: 6px;
      }
      .customer-directory-row > div[data-cell-label]::before {
        content: attr(data-cell-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #64748b;
      }
      .customer-directory-row > div[data-cell-role="select"] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
      }
      .customer-directory-row > div[data-cell-role="select"]::before {
        content: none;
      }
      .customer-directory-row > div[data-cell-role="select"] input[type="checkbox"] {
        width: 18px;
        height: 18px;
      }
      .customer-directory-actions,
      .customer-directory-actions.sales,
      .customer-table-actions,
      #panel-sales-customers .customer-directory-actions {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
      }
      .customer-directory-actions .action,
      .customer-directory-actions .customer-directory-comm-btn,
      .customer-table-actions .action,
      .customer-table-actions .customer-directory-comm-btn,
      #panel-sales-customers .customer-directory-actions .action,
      #panel-sales-customers .customer-directory-actions .customer-directory-comm-btn {
        flex: 1 1 140px;
        min-height: 38px;
      }
      .customer-access-group,
      .customer-access-inline,
      .customer-access-group.stack,
      #panel-sales-customers .customer-access-group.stack {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow: visible;
      }
      .customer-directory-tags,
      #panel-sales-customers .customer-directory-tags {
        flex-wrap: wrap;
        overflow: visible;
      }
      .customer-directory-tags .chip,
      #panel-sales-customers .customer-directory-tags .chip {
        max-width: none;
      }
      .customer-primary-link,
      .customer-cell .customer-primary-link,
      .customer-cell .muted {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }
      .crm-search-results {
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        max-height: min(60vh, 420px);
      }
      .crm-search-result {
        padding: 12px;
      }
      .crm-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
      }
    }
    @media (max-width: 640px) {
      .content {
        padding: 10px;
      }
      .card {
        padding: 12px;
      }
      .ops-page-subtitle,
      .ops-helper,
      .muted {
        line-height: 1.45;
      }
      .ops-summary-pill {
        width: 100%;
        justify-content: space-between;
      }
      table {
        min-width: max(100%, 560px);
      }
      .crm-kpi-grid,
      .settings-day-grid {
        grid-template-columns: 1fr;
      }
      .customers-assisted-line-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .customers-assisted-preview-totals {
        grid-template-columns: 1fr;
      }
      .integrations-list {
        grid-auto-columns: minmax(200px, 84vw);
      }
      .customer-directory-actions .action,
      .customer-directory-actions .customer-directory-comm-btn,
      .customer-table-actions .action,
      .customer-table-actions .customer-directory-comm-btn {
        flex-basis: 100%;
      }
    }

    .staff-ops-page {
      position: relative;
      overflow: hidden;
      border-color: rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      background: #fff;
      color: #111827;
      font-size: 13px;
    }

    .staff-ops-page .ops-page-head,
    .staff-surface-head,
    .staff-toolbar,
    .staff-kpis {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .staff-ops-page .ops-page-head {
      position: relative;
      z-index: 1;
      align-items: flex-start;
      padding: 0 0 10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .staff-ops-page .ops-page-copy h2 {
      margin: 0;
      font-size: 21px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .staff-ops-page .ops-page-subtitle {
      max-width: 760px;
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.35;
    }

    .staff-ops-page .action {
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 700;
    }

    .staff-surface-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .staff-toolbar {
      justify-content: flex-start;
      position: relative;
      z-index: 1;
      margin: 10px 0 8px;
      padding: 8px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #f8fafc;
    }

    .staff-toolbar .pp-input-stack {
      min-width: 148px;
      margin: 0;
    }

    .staff-ops-page .pp-input-stack span {
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .staff-toolbar #ps-status {
      margin-left: auto;
      padding: 6px 9px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 999px;
      background: #fff;
      color: #475467;
      font-size: 12px;
      font-weight: 700;
    }

    .staff-kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
      margin: 10px 0 12px;
    }

    .staff-ops-page .ops-summary-pill {
      justify-content: space-between;
      min-height: 38px;
      margin: 0;
      padding: 6px 10px;
      border-color: rgba(15, 23, 42, 0.08);
      border-radius: 10px;
      background: #f9fafb;
      box-shadow: none;
      color: #667085;
      letter-spacing: 0;
      font-size: 12px;
    }

    .staff-ops-page .ops-summary-pill strong {
      font-size: 15px;
    }

    .staff-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .staff-view-hidden {
      display: none !important;
    }

    .staff-surface {
      position: relative;
      z-index: 1;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      padding: 12px;
      background: #fff;
      box-shadow: none;
      min-width: 0;
    }

    .staff-surface-wide {
      grid-column: 1 / -1;
    }

    .staff-surface-head {
      align-items: flex-start;
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .staff-surface h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.2;
    }

    .staff-surface .muted {
      font-size: 12px;
      line-height: 1.35;
    }

    .staff-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 7px;
      margin-top: 8px;
      align-items: end;
    }

    .staff-form-grid input,
    .staff-form-grid select,
    .staff-form-grid textarea {
      min-height: 34px;
      padding: 7px 9px;
      border-color: #d8e0ec;
      border-radius: 9px;
      background: #fff;
      font-size: 13px;
    }

    .staff-form-grid input::placeholder,
    .staff-form-grid textarea::placeholder {
      color: #98a2b3;
    }

    .staff-form-grid-shift {
      grid-template-columns: minmax(132px, .75fr) minmax(210px, 1fr) minmax(0, 1.35fr);
      align-items: end;
    }

    .staff-field {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .staff-field span {
      color: #667085;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .staff-field-person {
      min-width: 220px;
    }

    .staff-field-wide {
      grid-column: span 2;
    }

    .staff-shift-presets {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .staff-shift-presets .action {
      min-height: 34px;
      padding: 6px 9px;
      font-size: 12px;
    }

    .staff-repeat-panel {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .staff-shift-modal-actions {
      grid-column: 1 / -1;
      justify-content: flex-end;
      padding-top: 4px;
    }

    .staff-form-grid-repeat {
      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    }

    .staff-form-grid-clock {
      grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    }

    .staff-form-grid-swap {
      grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.3fr) repeat(3, minmax(170px, 1fr)) minmax(180px, 1fr);
    }

    .staff-form-grid-bulk,
    .staff-form-grid-availability,
    .staff-form-grid-clock-correction,
    .staff-form-grid-payroll,
    .staff-form-grid-payroll-rules,
    .staff-form-grid-payroll-profile {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .staff-payroll-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 7px;
      margin-top: 8px;
    }

    .staff-integration-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-top: 8px;
    }

    .staff-integration-strip > div {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 10px;
      padding: 8px 10px;
      background: #f8fafc;
      min-width: 0;
    }

    .staff-integration-strip span,
    .staff-integration-strip small {
      display: block;
      color: #667085;
      font-size: 11px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .staff-integration-strip strong {
      display: block;
      margin: 2px 0;
      color: #101828;
      font-size: 14px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .staff-integration-strip .is-ok strong {
      color: #067647;
    }

    .staff-integration-strip .is-warn strong {
      color: #b54708;
    }

    .staff-integration-strip .is-bad strong {
      color: #b42318;
    }

    .staff-payroll-summary > div {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 10px;
      padding: 8px 10px;
      background: #f9fafb;
      min-width: 0;
    }

    .staff-payroll-summary span {
      display: block;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .staff-payroll-summary strong {
      display: block;
      margin-top: 3px;
      color: #101828;
      font-size: 15px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .staff-payroll-tables {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: 8px;
      margin-top: 8px;
    }

    .staff-payroll-readiness {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      min-width: 0;
    }

    .staff-payroll-readiness-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 100%;
      min-width: 0;
    }

    .staff-payroll-readiness-pill small {
      color: #667085;
      font-size: 10px;
      line-height: 1.1;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-check {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 9px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 9px;
      background: #fff;
      font-size: 13px;
      white-space: nowrap;
      align-self: end;
    }

    .staff-rota-board {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .staff-rota-planner {
      display: grid;
      grid-template-columns: minmax(136px, 178px) minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .staff-roster-panel {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #f8fafc;
      padding: 8px;
      min-width: 0;
    }

    .staff-roster-head,
    .staff-clock-card,
    .staff-modal-head,
    .staff-modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .staff-roster-list {
      display: grid;
      gap: 7px;
      margin-top: 8px;
    }

    .staff-roster-person {
      display: grid;
      gap: 2px;
      width: 100%;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 10px;
      background: #fff;
      padding: 8px 9px;
      color: #101828;
      text-align: left;
      cursor: grab;
    }

    .staff-roster-person span {
      font-size: 13px;
      font-weight: 800;
    }

    .staff-roster-person small {
      color: #667085;
      font-size: 11px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .staff-rota-week {
      grid-template-columns: repeat(var(--staff-rota-day-count, 5), minmax(118px, 1fr));
      margin-top: 0;
      overflow-x: auto;
    }

    .staff-rota-display-options {
      margin: 0 0 10px;
    }

    .staff-rota-display-options > .staff-weekday-row {
      margin: 8px 10px 10px;
    }

    .staff-subpanel {
      margin-top: 8px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 12px;
      padding: 0;
      background: #f8fafc;
      overflow: hidden;
    }

    .staff-subpanel > summary {
      cursor: pointer;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 700;
      list-style: none;
    }

    .staff-subpanel > summary::-webkit-details-marker {
      display: none;
    }

    .staff-subpanel > summary::before {
      content: ">";
      display: inline-block;
      width: 16px;
      color: #667085;
    }

    .staff-subpanel[open] > summary::before {
      content: "v";
    }

    .staff-subpanel[open] > summary {
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      background: #fff;
    }

    .staff-subpanel > .staff-form-grid,
    .staff-subpanel > .staff-weekday-row,
    .staff-subpanel > .compact-table-wrap {
      margin: 10px;
    }

    .staff-hours-review > .staff-surface-head,
    .staff-hours-review > .staff-payroll-summary {
      margin: 10px;
    }

    @media print {
      body.staff-hours-print-mode * {
        visibility: hidden !important;
      }

      body.staff-hours-print-mode .staff-hours-review,
      body.staff-hours-print-mode .staff-hours-review * {
        visibility: visible !important;
      }

      body.staff-hours-print-mode .staff-hours-review {
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        border: 0;
        background: #fff;
        overflow: visible;
      }

      body.staff-hours-print-mode .staff-hours-review .staff-surface-actions,
      body.staff-hours-print-mode .staff-hours-review input[type="checkbox"],
      body.staff-hours-print-mode .staff-hours-review th:first-child,
      body.staff-hours-print-mode .staff-hours-review td:first-child,
      body.staff-hours-print-mode .staff-hours-review th:last-child,
      body.staff-hours-print-mode .staff-hours-review td:last-child {
        display: none !important;
      }
    }

    .staff-weekday-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .staff-weekday-row label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 700;
      color: #344054;
    }

    .staff-day {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      min-height: 108px;
      background: #fff;
      overflow: hidden;
    }

    .staff-day-timeline {
      min-height: calc(var(--staff-timeline-height, 360px) + 44px);
    }

    .staff-day-drop-active {
      border-color: #2563eb;
      box-shadow: inset 0 0 0 1px #2563eb, 0 8px 18px rgba(37, 99, 235, 0.12);
    }

    .staff-day-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
      font-size: 13px;
      font-weight: 700;
    }

    .staff-day-body {
      display: grid;
      gap: 7px;
      padding: 7px;
    }

    .staff-timeline-body {
      position: relative;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 0;
      min-height: var(--staff-timeline-height, 360px);
      padding: 0;
      background: #fff;
    }

    .staff-time-axis,
    .staff-timeline-stage,
    .staff-shift-lane {
      position: relative;
      min-height: var(--staff-timeline-height, 360px);
    }

    .staff-time-axis {
      border-right: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
    }

    .staff-time-label {
      position: absolute;
      left: 3px;
      transform: translateY(-50%);
      color: #667085;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .staff-timeline-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .staff-hour-line {
      position: absolute;
      left: 0;
      right: 0;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .staff-shift-block {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: var(--staff-shift-width, 30px);
      max-width: calc(100% - 8px);
      min-height: 28px;
      padding: 4px 2px 14px;
      border: 1px solid rgba(37, 99, 235, 0.28);
      border-radius: 7px;
      background: #eff6ff;
      color: #172554;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
      transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
    }

    .staff-shift-block:hover,
    .staff-shift-block:focus-visible,
    .staff-shift-block.is-selected {
      z-index: 4;
      border-color: #2563eb;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
      outline: none;
    }

    .staff-shift-block.is-selected {
      background: #dbeafe;
    }

    .staff-shift-initials {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      border-radius: 999px;
      background: #1d4ed8;
      color: #fff;
      font-size: 7px;
      font-weight: 900;
      line-height: 1;
    }

    .staff-shift-name {
      min-width: 0;
      max-height: calc(100% - 42px);
      overflow: hidden;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      text-overflow: clip;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.1;
    }

    .staff-shift-time {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      color: #475467;
      font-size: 7px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .staff-shift-delete {
      position: absolute;
      top: 3px;
      right: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: 1px solid #fecdca;
      border-radius: 999px;
      background: #fff;
      color: #b42318;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      opacity: 0;
      cursor: pointer;
    }

    .staff-shift-block:hover .staff-shift-delete,
    .staff-shift-block.is-selected .staff-shift-delete {
      opacity: 1;
    }

    .staff-day-empty {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #667085;
      font-size: 12px;
      font-weight: 700;
    }

    .staff-day-availability {
      display: grid;
      gap: 6px;
      padding: 7px;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      background: #fbfdff;
    }

    .staff-availability-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
      gap: 10px;
      align-items: start;
    }

    .staff-availability-layout-calendar {
      grid-template-columns: minmax(0, 1fr);
    }

    .staff-availability-board,
    .staff-availability-editor {
      min-width: 0;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #fff;
    }

    .staff-availability-board-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      padding: 9px 10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .staff-availability-palette {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 9px 10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
    }

    .staff-availability-person {
      display: grid;
      gap: 2px;
      min-width: 150px;
      max-width: 220px;
      padding: 8px 9px;
      border: 1px solid rgba(37, 99, 235, 0.18);
      border-radius: 9px;
      background: #fff;
      color: #111827;
      text-align: left;
      cursor: grab;
    }

    .staff-availability-person:active {
      cursor: grabbing;
    }

    .staff-availability-person strong,
    .staff-availability-person small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-availability-person small {
      color: #667085;
      font-size: 11px;
      font-weight: 700;
    }

    .staff-availability-editor {
      padding: 10px;
    }

    .staff-availability-editor h4 {
      margin: 0 0 8px;
      font-size: 14px;
      line-height: 1.2;
    }

    .staff-availability-month-board {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
      gap: 8px;
      padding: 10px;
    }

    .staff-availability-day {
      min-width: 0;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 11px;
      overflow: hidden;
      background: #fff;
      transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }

    .staff-availability-day-drop-active {
      border-color: rgba(37, 99, 235, 0.42);
      box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.12);
    }

    .staff-availability-day-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 8px;
      background: #f8fafc;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      font-size: 12px;
    }

    .staff-availability-day-body {
      display: grid;
      gap: 6px;
      padding: 7px;
      min-height: 58px;
    }

    .staff-availability-entry {
      display: grid;
      gap: 7px;
      width: 100%;
      min-height: 48px;
      padding: 7px;
      border: 1px solid rgba(37, 99, 235, 0.18);
      border-radius: 9px;
      background: #eff6ff;
      color: #111827;
      text-align: left;
    }

    .staff-availability-entry.is-preferred {
      border-color: rgba(22, 163, 74, 0.28);
      background: #f0fdf4;
    }

    .staff-availability-entry.is-unavailable {
      border-color: rgba(185, 28, 28, 0.22);
      background: #fff5f5;
    }

    .staff-availability-entry.is-draft {
      border-style: dashed;
      background: #fffaf0;
    }

    .staff-availability-entry.is-selected {
      border-color: rgba(37, 99, 235, 0.58);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    }

    .staff-availability-entry-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      font-size: 12px;
      line-height: 1.2;
    }

    .staff-availability-entry-head strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-availability-block-control {
      display: grid;
      gap: 4px;
    }

    .staff-availability-block-core {
      display: grid;
      gap: 2px;
      min-height: 38px;
      padding: 7px 8px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.78);
      font-size: 12px;
      font-weight: 800;
    }

    .staff-availability-block-core small {
      color: #667085;
      font-size: 11px;
      font-weight: 700;
    }

    .staff-availability-resize-handle {
      position: relative;
      width: 100%;
      height: 14px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      cursor: ns-resize;
    }

    .staff-availability-resize-handle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 34px;
      height: 2px;
      border-radius: 999px;
      background: rgba(100, 116, 139, 0.62);
      transform: translate(-50%, -50%);
    }

    .staff-availability-inline-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .staff-availability-inline-controls label,
    .staff-availability-repeat label {
      display: grid;
      gap: 3px;
      min-width: 0;
      color: #667085;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .staff-availability-inline-controls input,
    .staff-availability-inline-controls select,
    .staff-availability-repeat input {
      width: 100%;
      min-width: 0;
      border: 1px solid #d7e0ed;
      border-radius: 8px;
      padding: 6px 7px;
      background: #fff;
      color: #111827;
      font-size: 12px;
      font-weight: 700;
    }

    .staff-availability-note-control {
      grid-column: 1 / -1;
    }

    .staff-availability-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .staff-availability-repeat {
      display: grid;
      grid-template-columns: minmax(92px, 0.7fr) repeat(3, minmax(0, 1fr));
      gap: 6px;
      align-items: end;
      padding-top: 6px;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .staff-availability-repeat[hidden] {
      display: none;
    }

    .staff-availability-repeat-check {
      display: flex;
      align-items: center;
      gap: 5px;
      min-height: 32px;
      text-transform: none;
      color: #344054;
      font-size: 11px;
    }

    .staff-availability-empty {
      display: flex;
      align-items: center;
      min-height: 46px;
      color: #667085;
      font-size: 12px;
    }

    .staff-shift-row,
    .staff-availability-row {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 10px;
      padding: 7px;
      background: #fff;
      transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    }

    .staff-shift-row:hover,
    .staff-availability-row:hover {
      border-color: rgba(37, 99, 235, 0.28);
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
      transform: none;
    }

    .staff-shift-main,
    .staff-availability-main {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
    }

    .staff-meta {
      color: #667085;
      font-size: 12px;
      margin-top: 3px;
      line-height: 1.35;
    }

    .staff-status {
      display: inline-flex;
      align-items: center;
      border: 1px solid #d8dde8;
      border-radius: 999px;
      padding: 2px 7px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      background: #fff;
    }

    .staff-status.is-ok {
      color: #067647;
      border-color: #a6f4c5;
      background: #ecfdf3;
    }

    .staff-status.is-warn {
      color: #b54708;
      border-color: #fedf89;
      background: #fffaeb;
    }

    .staff-status.is-bad {
      color: #b42318;
      border-color: #fecdca;
      background: #fef3f2;
    }

    .staff-row-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .staff-row-actions button {
      min-height: 28px;
      padding: 4px 7px;
      font-size: 12px;
    }

    .staff-clock-kiosk {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .staff-clock-console {
      display: grid;
      gap: 8px;
    }

    .staff-clock-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 420px) minmax(180px, 1fr);
      gap: 8px;
      align-items: center;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 8px;
      padding: 10px;
      background: #f8fafc;
    }

    .staff-clock-summary {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 7px 9px;
      font-size: 13px;
      font-weight: 700;
      min-width: 0;
    }

    .staff-clock-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .staff-clock-card.is-clocked-in {
      border-color: #a6f4c5;
      background: #f6fef9;
    }

    .staff-clock-card.is-not-clocked {
      border-color: rgba(15, 23, 42, 0.08);
    }

    .staff-clock-card > div:first-child {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .staff-clock-actions {
      display: inline-flex;
      gap: 6px;
      flex: 0 0 auto;
    }

    .staff-clock-actions .action {
      min-width: 82px;
    }

    .staff-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, 0.38);
    }

    .staff-modal-backdrop.hidden {
      display: none;
    }

    .staff-modal {
      width: min(760px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 14px;
      background: #fff;
      padding: 14px;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    }

    .staff-modal h3 {
      margin: 0;
      font-size: 16px;
    }

    .staff-pin-modal {
      width: min(420px, 100%);
    }

    .staff-pin-input {
      width: 100%;
      min-height: 48px;
      margin: 12px 0;
      border: 1px solid #cdd6e4;
      border-radius: 10px;
      text-align: center;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 8px;
    }

    .action.danger,
    .action.secondary.danger {
      color: #b42318;
      border-color: #fecdca;
      background: #fff;
    }

    .action.danger:hover,
    .action.secondary.danger:hover {
      border-color: #f97066;
      background: #fef3f2;
    }

    .compact-table-wrap {
      margin-top: 8px;
      max-height: 312px;
      overflow: auto;
    }

    .staff-ops-page .compact-table-wrap {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 10px;
      background: #fff;
    }

    .staff-ops-page .compact-table-wrap table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .staff-ops-page .compact-table-wrap th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f8fafc;
      color: #667085;
      font-size: 11px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .staff-ops-page .compact-table-wrap th,
    .staff-ops-page .compact-table-wrap td {
      padding: 7px 9px;
      border-bottom: 1px solid #edf2f7;
      font-size: 12px;
      line-height: 1.35;
    }

    .staff-ops-page .compact-table-wrap tbody tr:last-child td {
      border-bottom: 0;
    }

    @media (max-width: 1100px) {
      .staff-layout,
      .staff-form-grid-shift,
      .staff-form-grid-swap,
      .staff-form-grid-clock,
      .staff-payroll-tables {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .content {
        padding: 8px;
      }
      .content .card,
      .content .ops-surface,
      .content .ops-toolbar-surface,
      .content .settings-section-card,
      .content .subscription-section-block,
      .content .subscription-plan-step,
      .content .subscription-plan-editor-head,
      .content .subscription-rule-card,
      .content .crm-block,
      .content .crm-main,
      .content .lookup-card {
        border-radius: 11px;
        padding: 10px;
      }
      .content .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
      }
      .content .row > * {
        min-width: 0 !important;
        max-width: 100%;
      }
      .content .row > input,
      .content .row > select,
      .content .row > textarea,
      .content .row > button,
      .content .row > a.action,
      .content .row > .action,
      .content .row > .secondary,
      .content .row > .ops-field,
      .content .row > .ops-field > :is(input, select, textarea) {
        width: 100% !important;
      }

      .content input:not([type="checkbox"]):not([type="radio"]),
      .content select,
      .content textarea {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
      }

      .content textarea {
        min-height: 90px;
      }

      .content button,
      .content .action,
      .content .secondary,
      .content .btn-ghost,
      .content a.action {
        min-height: 36px;
        max-width: 100%;
      }

      .content .grid,
      .content .tiers,
      .content .module-row,
      .content .campaign-overview-grid,
      .content .campaign-schedule-grid,
      .content .campaign-primary-fields,
      .content .campaign-checkout-fields,
      .content .campaign-two-col,
      .content .campaign-action-intro-grid,
      .content .campaign-crm-advanced-grid,
      .content .campaign-run-control-grid,
      .content .campaign-toggle-body,
      .content .campaign-placeholder-grid,
      .content .campaign-placeholder-grid--actions,
      .content .campaign-preview-row,
      .content .campaign-status-row,
      .content .campaign-list-toolbar,
      .content .ops-workspace-grid,
      .content .ops-field-grid,
      .content .subscription-page-grid,
      .content .subscription-page-grid.two-column,
      .content .subscription-rule-fields,
      .content .subscription-state-row,
      .content .subscription-plan-builder,
      .content .subscription-plan-field-grid,
      .content .subscription-plan-product-picker,
      .content .subscription-plan-product-candidate,
      .content .subscription-plan-card,
      .content .subscription-options-toolbar,
      .content .subscription-option-controls,
      .content .subscription-plan-summary-list,
      .content .crm-two-col,
      .content .modal-grid,
      .content .analysis-grid,
      .content .crm-kpi-grid,
      .content .crm-overview-primary-grid,
      .content .crm-search-row,
      .content .settings-section-grid,
      .content .settings-section-grid--2,
      .content .settings-section-grid--3,
      .content .shipping-service-grid,
      .content .shipping-postcode-grid,
      .content .shipping-tier-grid,
      .content .settings-pallet-grid,
      .content .settings-day-grid,
      .content .settings-day-grid--spacious,
      .content .settings-weekday-grid,
      .content .price-list-grid,
      .content .pl-main-grid,
      .content .products-catalog-layout,
      .content .product-create-grid,
      .content .product-editor-grid,
      .content .product-list-editor-row,
      .content .product-key-value-row,
      .content .product-key-value-summary,
      .content .product-source-ingredient-head,
      .content .product-source-ingredient-row,
      .content .product-component-head,
      .content .product-component-row,
      .content .source-entry-grid,
      .content .dispatch-grid,
      .content .forecast-calendar-grid,
      .content .forecast-followup-grid,
      .content .customers-assisted-checkout-controls,
      .content .customers-assisted-line-row,
      .content .customers-assisted-link-row,
      .content .customer-address-row,
      .content .customer-override-row,
      .content .label-designer-layout,
      .content .label-designer-header-grid,
      .content .label-designer-meta-grid,
      .content .label-designer-grid-field,
      .content .label-designer-canvas-grid-state,
      .content .hp-authoring-layout,
      .content .hp-process-detail-grid,
      .content .hp-process-modal-grid,
      .content .hp-step-modal-grid,
      .content .pp-plan-layout,
      .content .pp-board-grid,
      .content .pp-task-modal-grid,
      .content .staff-layout,
      .content .staff-form-grid,
      .content .staff-form-grid-repeat,
      .content .staff-form-grid-shift,
      .content .staff-form-grid-availability,
      .content .staff-form-grid-clock,
      .content .staff-form-grid-clock-correction,
      .content .staff-form-grid-payroll,
      .content .staff-form-grid-payroll-profile,
      .content .staff-form-grid-payroll-rules,
      .content .staff-form-grid-bulk,
      .content .staff-form-grid-swap,
      .content .staff-integration-strip,
      .content .staff-availability-layout,
      .content .staff-payroll-tables {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .content .pp-board-shell {
        overflow-x: hidden;
      }

      .content .pp-board-grid {
        width: 100% !important;
        min-width: 0 !important;
      }

      .content .gateway-setup-steps {
        grid-template-columns: minmax(0, 1fr);
      }
      .content .gateway-setup-session-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .content .staff-availability-inline-controls,
      .content .staff-availability-repeat {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .content .staff-field-wide {
        grid-column: auto;
      }

      .content .ops-page-head,
      .content .ops-surface-head,
      .content .staff-surface-head,
      .content .subscription-section-block-head,
      .content .subscription-plan-step-head,
      .content .subscription-plan-footer,
      .content .subscription-plan-editor-head,
      .content .subscription-rule-card-head,
      .content .settings-section-head,
      .content .crm-section-head,
      .content .customers-b2b-section-head,
      .content .campaign-pane-head,
      .content .hp-panel-head,
      .content .hp-process-browser-head,
      .content .pp-section-head {
        align-items: stretch;
        gap: 8px;
      }

      .content .ops-page-actions,
      .content .ops-surface-actions,
      .content .staff-surface-actions,
      .content .campaign-pane-actions,
      .content .campaign-actions,
      .content .campaign-list-toolbar,
      .content .customer-directory-actions,
      .content .customer-table-actions,
      .content .hp-detail-actions,
      .content .hp-flow-toolbar,
      .content .hp-library-toolbar,
      .content .inline-actions,
      .content .label-designer-editor-actions,
      .content .label-designer-header-actions,
      .content .label-designer-inline-actions,
      .content .pl-main-actions,
      .content .pp-day-actions,
      .content .pp-task-modal-actions,
      .content .pp-toolbar,
      .content .shipping-service-modal-actions,
      .content .subscription-action-row,
      .content .subscription-option-template-actions,
      .content .subscription-plan-footer-actions,
      .content .subscription-plan-card-actions,
      .content .settings-section-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .content .ops-page-actions > *,
      .content .ops-surface-actions > *,
      .content .staff-surface-actions > *,
      .content .campaign-pane-actions > *,
      .content .campaign-actions > *,
      .content .customer-directory-actions > *,
      .content .customer-table-actions > *,
      .content .hp-detail-actions > *,
      .content .hp-flow-toolbar > *,
      .content .hp-library-toolbar > *,
      .content .inline-actions > *,
      .content .label-designer-editor-actions > *,
      .content .label-designer-header-actions > *,
      .content .label-designer-inline-actions > *,
      .content .pl-main-actions > *,
      .content .pp-day-actions > *,
      .content .pp-task-modal-actions > *,
      .content .pp-toolbar > *,
      .content .shipping-service-modal-actions > *,
      .content .subscription-action-row > *,
      .content .subscription-plan-footer-actions > *,
      .content .settings-section-actions > * {
        flex: 1 1 150px;
      }

      .content .ops-summary-strip,
      .content .staff-kpis,
      .content .crm-summary-strip,
      .content .crm-kpi-grid,
      .content .staff-payroll-summary,
      .content .subscription-plan-mini-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .content .ops-summary-pill,
      .content .kpi,
      .content .subscription-plan-mini-strip span {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
      }

      .crm-tabs,
      .settings-tabs,
      .subscription-area-tabs,
      .integration-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .crm-tabs::-webkit-scrollbar,
      .settings-tabs::-webkit-scrollbar,
      .subscription-area-tabs::-webkit-scrollbar,
      .integration-tabs::-webkit-scrollbar {
        display: none;
      }

      .crm-tabs > *,
      .settings-tabs > *,
      .subscription-area-tabs > *,
      .integration-tabs > * {
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .content .customer-directory-head,
      .content .customer-directory-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px;
      }

      .content .customer-directory-head {
        display: none;
      }

      .content .table-wrap,
      .content .compact-table-wrap,
      .content .price-list-wrap,
      .content .customer-directory-wrap,
      .content .customers-assisted-checkout-lines-wrap,
      .content .settings-data-table-wrap,
      .content .settings-station-table-wrap,
      .content .staff-clock-events-wrap,
      .content .subscription-plan-selected-products,
      .content .lookup-file-list,
      .content .klaviyo-matrix {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .content table,
      .content .subscription-plan-selected-products table,
      .content .compact-table-wrap table,
      .content .settings-data-table,
      .content .settings-station-table {
        min-width: max(100%, 620px);
      }

      .content th,
      .content td {
        padding: 7px 8px;
        font-size: 12px;
      }

      .content pre,
      .content code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
      }

      .content .modal-card,
      .content .hp-modal-card,
      .content .hp-modal-card--wide,
      .content .shipping-service-modal-card,
      .content .staff-modal {
        width: min(100%, calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        padding: 12px;
        border-radius: 12px;
      }

      .content .staff-modal-backdrop {
        padding: 8px;
        place-items: start center;
        overflow-y: auto;
      }

      .content .staff-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
      }

      .content .staff-toolbar #ps-status {
        grid-column: 1 / -1;
        margin-left: 0;
        border-radius: 10px;
      }

      .content .staff-rota-planner {
        grid-template-columns: minmax(0, 1fr);
      }

      .content .staff-clock-toolbar {
        grid-template-columns: minmax(0, 1fr);
      }

      .content .staff-roster-panel {
        position: static;
      }

      .content .staff-roster-list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }

      .content .staff-roster-person {
        min-height: 44px;
      }

      .content .staff-rota-board {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(128px, 70vw);
        grid-template-columns: none !important;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
      }

      .content .staff-day {
        scroll-snap-align: start;
      }

      .content .staff-shift-block {
        width: var(--staff-shift-width, 28px);
      }

      .content .staff-shift-name {
        font-size: 8px;
      }

      .content .staff-clock-actions,
      .content .staff-modal-actions,
      .content .staff-row-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }

    @media (max-width: 480px) {
      .content {
        padding: 6px;
      }

      .content .card,
      .content .ops-surface,
      .content .ops-toolbar-surface,
      .content .settings-section-card,
      .content .subscription-section-block,
      .content .subscription-plan-step,
      .content .crm-block,
      .content .crm-main,
      .content .lookup-card {
        padding: 8px;
      }

      .content .ops-summary-strip,
      .content .staff-kpis,
      .content .subscription-plan-mini-strip {
        grid-template-columns: minmax(0, 1fr);
      }

      .content .staff-toolbar {
        grid-template-columns: minmax(0, 1fr);
      }

      .content .ops-page-actions > *,
      .content .ops-surface-actions > *,
      .content .staff-surface-actions > *,
      .content .subscription-action-row > *,
      .content .subscription-plan-footer-actions > *,
      .content .settings-section-actions > *,
      .content .staff-modal-actions > *,
      .content .staff-clock-actions > * {
        flex-basis: 100%;
        width: 100%;
      }

      .content table,
      .content .subscription-plan-selected-products table,
      .content .compact-table-wrap table {
        min-width: max(100%, 560px);
      }
    }

/* Workflow AI review keeps editable values readable on narrow operator screens. */
#dashboard-ai-proposals fieldset { border: 0; padding: 0; min-width: 0; }
#dashboard-ai-proposals label { display: block; margin: 8px 0; }
#dashboard-ai-proposals input:not([type=checkbox]),
#dashboard-ai-proposals textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
#dashboard-ai-proposals blockquote, #dashboard-ai-proposals small { overflow-wrap: anywhere; }
#dashboard-ai-proposals button { margin: 4px; }
#dashboard-ai-proposals textarea { min-height: 72px; }