:root {
      --bg: #f3f5f9;
      --sidebar: #ffffff;
      --surface: #ffffff;
      --surface-2: #f6f8fc;
      --text: #182235;
      --muted: #667085;
      --line: #e1e7f0;
      --brand: #1d6de8;
      --danger: #b42318;
      --shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
      --status-open-text: #184f9f;
      --status-open-bg: #eaf2ff;
      --status-open-border: #c7dcff;
      --status-expired-text: #92400e;
      --status-expired-bg: #fef3c7;
      --status-expired-border: #fcd34d;
      --status-awarded-text: #14532d;
      --status-awarded-bg: #dcfce7;
      --status-awarded-border: #86efac;
      --status-cancelled-text: #7f1d1d;
      --status-cancelled-bg: #fee2e2;
      --status-cancelled-border: #fca5a5;
      --status-accepted-text: #14532d;
      --status-accepted-bg: #dcfce7;
      --status-accepted-border: #86efac;
      --status-declined-text: #7f1d1d;
      --status-declined-bg: #fee2e2;
      --status-declined-border: #fca5a5;
      --status-pending-text: #334155;
      --status-pending-bg: #f1f5f9;
      --status-pending-border: #cbd5e1;
      --status-not-submitted-text: #475569;
      --status-not-submitted-bg: #e8edf5;
      --status-not-submitted-border: #c7d2e4;
    }

    * { box-sizing: border-box; }
    [v-cloak] { display: none; }
    .bootstrap-loader {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
      z-index: 3000;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .bootstrap-loader.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .bootstrap-loader-spinner {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid #d6e2f4;
      border-top-color: var(--brand);
      animation: spx-bootstrap-spin 0.8s linear infinite;
    }
    @keyframes spx-bootstrap-spin {
      to {
        transform: rotate(360deg);
      }
    }
    body {
      margin: 0;
      font-family: "Work Sans", "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    body.app-shell {
      height: 100vh;
      overflow: hidden;
    }
    body.app-shell.app-shell-scrollable {
      height: auto;
      min-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
    [data-spx-tooltip] {
      position: relative;
    }
    [data-spx-tooltip]::before,
    [data-spx-tooltip]::after {
      position: absolute;
      left: 50%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
      z-index: 260;
    }
    [data-spx-tooltip]::before {
      content: attr(data-spx-tooltip);
      bottom: calc(100% + 10px);
      transform: translate(-50%, 4px);
      background: #132238;
      color: #f8fbff;
      border: 1px solid rgba(124, 148, 179, 0.38);
      border-radius: 8px;
      padding: 6px 9px;
      inline-size: max-content;
      max-inline-size: 280px;
      max-width: 280px;
      min-width: 20px;
      font-size: 0.76rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: 0.01em;
      white-space: normal;
      text-align: center;
      box-shadow: 0 8px 22px rgba(10, 19, 35, 0.34);
    }
    [data-spx-tooltip]::after {
      content: "";
      bottom: calc(100% + 5px);
      transform: translate(-50%, 4px);
      border: 5px solid transparent;
      border-top-color: #132238;
    }
    [data-spx-tooltip]:hover::before,
    [data-spx-tooltip]:hover::after,
    [data-spx-tooltip]:focus-visible::before,
    [data-spx-tooltip]:focus-visible::after {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .section-head.section-head-actions-only [data-spx-tooltip]::before,
    .section-head.section-head-actions-only [data-spx-tooltip]::after {
      left: auto;
    }
    .section-head.section-head-actions-only [data-spx-tooltip]::before {
      right: 0;
      transform: translate(0, 4px);
      text-align: left;
    }
    .section-head.section-head-actions-only [data-spx-tooltip]::after {
      right: 10px;
      transform: translate(0, 4px);
    }
    .section-head.section-head-actions-only [data-spx-tooltip]:hover::before,
    .section-head.section-head-actions-only [data-spx-tooltip]:hover::after,
    .section-head.section-head-actions-only [data-spx-tooltip]:focus-visible::before,
    .section-head.section-head-actions-only [data-spx-tooltip]:focus-visible::after {
      transform: translate(0, 0);
    }

    .spx-auth-root {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .auth-brand {
      display: flex;
      justify-content: center;
    }
    .auth-brand-logo {
      height: 180px;
      object-fit: contain;
    }

    .auth-shell {
      min-height: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 18px 18px calc(18px + 204px);
    }
    .auth-shell .auth-brand {
      margin-bottom: 24px;
    }

    .auth-card {
      width: min(440px, 100%);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 22px;
      display: grid;
      gap: 12px;
    }
    .auth-card--access-request {
      width: min(860px, 100%);
    }
    .auth-two-column-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
    }
    .auth-two-column-grid .field {
      min-width: 0;
    }
    .auth-two-column-grid > .field:not(.field--full) {
      align-content: start;
      min-height: 78px;
    }
    .auth-two-column-grid .field--full {
      grid-column: 1 / -1;
    }
    .auth-access-request-verification-field {
      align-content: start;
    }
    .auth-access-request-verification {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #d7e1f3;
      border-radius: 12px;
      background: #f6f9ff;
    }
    .auth-access-request-verification-heading {
      display: grid;
      gap: 2px;
    }
    .auth-access-request-verification-heading strong {
      color: #1a2a44;
      font-size: 0.9rem;
    }
    .auth-access-request-verification-heading small {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
    }
    .auth-access-request-verification-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    .auth-access-request-verification-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid #dbe3f3;
      background: #ffffff;
      border-radius: 10px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .auth-access-request-verification-step.is-active {
      border-color: #1d6de8;
      box-shadow: 0 0 0 3px rgba(29, 109, 232, 0.12);
    }
    .auth-access-request-verification-step.is-complete {
      border-color: #16a34a;
      background: #f3fbf5;
    }
    .auth-access-request-verification-step.is-disabled {
      opacity: 0.72;
    }
    .auth-access-request-verification-step-badge {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: #e5edfa;
      color: #1a4f9c;
      font-weight: 700;
      font-size: 0.82rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .auth-access-request-verification-step.is-active .auth-access-request-verification-step-badge {
      background: #1d6de8;
      color: #ffffff;
    }
    .auth-access-request-verification-step.is-complete .auth-access-request-verification-step-badge {
      background: #16a34a;
      color: #ffffff;
    }
    .auth-access-request-verification-step-badge svg,
    .auth-access-request-verification-step-badge i {
      width: 14px;
      height: 14px;
    }
    .auth-access-request-verification-step-body {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .auth-access-request-verification-step-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: #1a2a44;
    }
    .auth-access-request-verification-step-hint {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.4;
    }
    .field-helper-text {
      color: #61708a;
      font-size: 0.78rem;
      line-height: 1.25;
    }
    .field-helper-text--success {
      color: #166534;
      font-weight: 600;
    }
    .auth-access-request-verification-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .auth-login-links {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .auth-login-links .text-link:last-child {
      text-align: right;
    }

    .auth-card h1 { margin: 0; font-size: 1.25rem; }
    .auth-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

    .field { display: grid; gap: 6px; }
    .field label { color: var(--muted); font-size: 0.85rem; }
    .field input {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.95rem;
      background: #fff;
    }
    .field input.field-error-input,
    .field textarea.field-error-input,
    .field select.field-error-input {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    input[type="file"] {
      width: 100%;
      border: 1px dashed #c4d5f0;
      border-radius: 10px;
      padding: 6px;
      font-size: 0.86rem;
      color: #2a3b57;
      background: #f9fbff;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    input[type="file"]::file-selector-button {
      border: 1px solid #cbdcf8;
      border-radius: 8px;
      padding: 7px 11px;
      margin-right: 10px;
      background: #eaf2ff;
      color: #174f9d;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    input[type="file"]::-webkit-file-upload-button {
      border: 1px solid #cbdcf8;
      border-radius: 8px;
      padding: 7px 11px;
      margin-right: 10px;
      background: #eaf2ff;
      color: #174f9d;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    input[type="file"]:hover {
      border-color: #aac4ee;
      background: #f4f8ff;
    }
    input[type="file"]:focus-visible {
      outline: none;
      border-color: #89abe6;
      box-shadow: 0 0 0 3px rgba(29, 109, 232, 0.15);
      background: #f4f8ff;
    }
    input[type="file"]::file-selector-button:hover,
    input[type="file"]::-webkit-file-upload-button:hover {
      background: #ddeaff;
      border-color: #b3caf0;
    }
    input[type="file"]:disabled {
      cursor: not-allowed;
      opacity: 0.66;
      background: #f4f6fa;
      border-color: #d7deea;
    }
    input[type="file"]:disabled::file-selector-button,
    input[type="file"]:disabled::-webkit-file-upload-button {
      cursor: not-allowed;
      opacity: 0.9;
      background: #e9eef8;
      color: #5f7396;
    }
    .text-link {
      color: #1855b6;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      text-align: left;
      font-size: 0.86rem;
      text-decoration: underline;
    }

    .legal-consent-field {
      gap: 6px;
    }
    .legal-consent-label {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      color: #344563;
      font-size: 0.86rem;
      line-height: 1.4;
    }
    .legal-consent-label input[type="checkbox"] {
      margin-top: 2px;
      width: 15px;
      height: 15px;
      accent-color: #1d6de8;
      flex-shrink: 0;
    }
    .legal-consent-label a {
      color: #1855b6;
      font-weight: 600;
    }
    @media (max-width: 760px) {
      .auth-two-column-grid {
        grid-template-columns: 1fr;
      }
      .auth-two-column-grid > .field:not(.field--full) {
        min-height: 0;
      }
      .auth-login-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .auth-login-links .text-link:last-child {
        text-align: left;
      }
    }

    .btn-primary {
      border: 0;
      border-radius: 10px;
      padding: 11px 12px;
      font-weight: 600;
      background: var(--brand);
      color: #fff;
      cursor: pointer;
    }

    .success-banner,
    .feedback-submit-success {
      color: #14532d;
      background: linear-gradient(90deg, #eefbf2 0%, #f6fff8 100%);
      border: 1px solid #b7e4c7;
      border-left: 6px solid #16a34a;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1.35;
      margin: 0;
    }
    .quote-submission-open-banner {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #14532d;
      background: linear-gradient(90deg, #eefbf2 0%, #f6fff8 100%);
      border: 1px solid #b7e4c7;
      border-radius: 12px;
      padding: 10px 12px;
      margin: 0;
    }
    .quote-submission-open-banner > i {
      width: 17px;
      height: 17px;
      color: #16a34a;
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .quote-submission-open-banner-copy {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
      line-height: 1.35;
    }
    .quote-submission-open-banner-label {
      font-size: 0.88rem;
      font-weight: 600;
      color: #166534;
    }
    .quote-submission-open-banner-value {
      font-size: 0.9rem;
      font-weight: 700;
      color: #14532d;
      letter-spacing: -0.01em;
    }
    .notice {
      color: #4a607d;
      background: #f8fafd;
      border: 1px solid #d9e2ef;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.88rem;
      font-weight: 500;
      line-height: 1.4;
      margin: 0;
    }
    .info-banner {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: #314d70;
      background: #f8fbff;
      border: 1px solid #d8e1ef;
      border-radius: 10px;
      padding: 9px 11px;
      font-size: 0.88rem;
      font-weight: 500;
      line-height: 1.4;
      margin: 0;
    }
    .info-banner i {
      width: 16px;
      height: 16px;
      color: #5a789f;
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .info-banner-copy {
      margin: 0;
      min-width: 0;
      color: #314d70;
      line-height: 1.4;
    }
    .info-banner-copy a,
    .info-banner-copy button {
      margin-left: 6px;
    }
    .error,
    .error-banner {
      color: #7f1d1d;
      background: linear-gradient(90deg, #fff1f2 0%, #fff7f8 100%);
      border: 1px solid #fecdd3;
      border-left: 6px solid #dc2626;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1.35;
      margin: 0;
    }

    .app {
      min-height: 100vh;
      height: 100vh;
      display: grid;
      grid-template-columns: 286px 1fr;
      gap: 14px;
      padding: 14px;
      overflow: hidden;
    }
    .app.app-standalone-billing {
      grid-template-columns: 1fr;
      height: auto;
      overflow: visible;
      max-width: 980px;
      margin: 0 auto;
      padding: 14px 18px;
      min-height: 100vh;
      align-content: start;
    }
    .app.app-standalone-billing .content {
      overflow: visible;
      padding-right: 0;
      width: 100%;
      max-width: 940px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 28px);
    }

    .sidebar {
      background: var(--sidebar);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: calc(100vh - 28px);
      overflow-y: auto;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
    }

    .brand-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      object-fit: contain;
    }

    .brand-title {
      display: inline-flex;
      align-items: baseline;
      gap: 0.01em;
      font-size: 1.35rem;
      line-height: 1.05;
      color: #174ea6;
    }
    .brand-title-prefix,
    .brand-title-suffix {
      display: inline-block;
    }
    .brand-title-swiss-o {
      position: relative;
      display: inline-block;
      width: 0.58em;
      height: 0.58em;
      margin: 0 0.02em;
      border-radius: 999px;
      background: #d7262e;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
      flex-shrink: 0;
      transform: translateY(0.06em);
    }
    .brand-title-swiss-o::before,
    .brand-title-swiss-o::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border-radius: 0;
    }
    .brand-title-swiss-o::before {
      width: 56%;
      height: 18%;
    }
    .brand-title-swiss-o::after {
      width: 18%;
      height: 56%;
    }
    .brand-text > span { display: block; color: var(--muted); font-size: 0.8rem; }

    .role-pill {
      margin: 0 10px;
      width: fit-content;
      border-radius: 999px;
      background: #ecf2ff;
      color: #355da8;
      border: 1px solid #d5e3ff;
      padding: 6px 11px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .role-pill.role-pill-impersonation {
      background: #fff2e8;
      border-color: #ffcfad;
      color: #9a3412;
    }
    .impersonation-sidebar-badge {
      margin: 0 10px;
      border: 1px solid #ffd4b7;
      background: #fff6ef;
      color: #9a3412;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 0.78rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      max-width: calc(100% - 20px);
    }
    .impersonation-sidebar-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .sidebar nav { display: grid; gap: 4px; padding: 4px; }
    .sidebar-menu-divider {
      height: 1px;
      border: 0;
      margin: 8px 6px;
      background: linear-gradient(90deg, rgba(198, 210, 230, 0), rgba(198, 210, 230, 0.95) 18%, rgba(198, 210, 230, 0.95) 82%, rgba(198, 210, 230, 0));
      grid-column: 1 / -1;
    }

    .menu-btn {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: #273044;
      border-radius: 12px;
      padding: 11px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 1rem;
      text-align: left;
      font-weight: 500;
    }

    .menu-btn:hover { background: #f3f6fc; border-color: #e4ecfb; }
    .menu-btn.active { background: #eaf1ff; color: #1855b6; border-color: #d0e0ff; font-weight: 600; }
    .sidebar-feedback-action {
      margin-top: auto;
      padding: 4px;
      border-top: 1px solid #e7eef9;
    }
    .menu-icon {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      border: 1px solid #dbe3f1;
      background: #fff;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .menu-icon svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .content {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
    }
    .content > * {
      min-width: 0;
    }

    .topbar {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .impersonation-banner {
      border: 1px solid #ffcfad;
      background: linear-gradient(90deg, #fff5ec 0%, #fff8f2 100%);
      border-left: 6px solid #f97316;
      border-radius: 14px;
      box-shadow: 0 10px 24px rgba(154, 52, 18, 0.08);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 2px;
    }
    .impersonation-banner-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .impersonation-banner-title {
      margin: 0;
      color: #9a3412;
      font-size: 0.86rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .impersonation-banner-text {
      margin: 0;
      color: #7c2d12;
      font-size: 0.92rem;
      font-weight: 600;
      word-break: break-word;
    }
    .impersonation-banner-action {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .impersonation-banner-action svg {
      width: 15px;
      height: 15px;
    }
    .topbar-left {
      min-width: 0;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
    }
    .topbar-title-block {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .topbar-page-title {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 700;
      color: #184f9f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .topbar-breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .topbar-crumb-link {
      border: 0;
      background: transparent;
      color: var(--primary);
      font-size: 0.76rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      white-space: nowrap;
      text-decoration: none;
      font-family: inherit;
    }
    .topbar-crumb-link:hover {
      text-decoration: underline;
    }
    .topbar-crumb-sep {
      width: 12px;
      height: 12px;
      color: var(--muted);
      flex-shrink: 0;
    }
    .topbar-crumb-current {
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-wrap {
      position: relative;
      width: 100%;
    }
    .topbar-search {
      width: clamp(220px, 26vw, 360px);
      max-width: 360px;
    }
    .topbar-global-search {
      position: relative;
      width: clamp(220px, 26vw, 360px);
      max-width: 360px;
      flex: 0 1 360px;
    }
    .topbar-global-search .topbar-search {
      width: 100%;
      max-width: 100%;
    }
    .global-search-popover {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: min(560px, calc(100vw - 70px));
      max-height: min(70vh, 520px);
      overflow-y: auto;
      z-index: 32;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 34px rgba(21, 36, 66, 0.14);
      padding: 10px;
      display: grid;
      gap: 10px;
    }
    .global-search-section {
      display: grid;
      gap: 6px;
    }
    .global-search-section-title {
      margin: 0;
      color: #667085;
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .global-search-item {
      border: 1px solid #e5edf9;
      border-radius: 10px;
      padding: 8px 10px;
      background: #fff;
      text-align: left;
      cursor: pointer;
      display: grid;
      gap: 3px;
    }
    .global-search-item:hover {
      border-color: #cfe0ff;
      background: #f7faff;
    }
    .global-search-item-title {
      color: #1f3558;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.25;
    }
    .global-search-item-meta {
      color: #667085;
      font-size: 0.79rem;
      line-height: 1.2;
    }

    .search-wrap span {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #8a93a5;
    }

    .search-wrap input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8faff;
      padding: 11px 12px 11px 36px;
      font-size: 1rem;
      color: var(--text);
      outline: none;
    }

    .top-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      position: relative;
      min-width: 0;
      flex-shrink: 0;
      margin-left: auto;
    }
    .notification-wrap {
      position: relative;
    }

    .icon-btn {
      height: 38px;
      width: 38px;
      border-radius: 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: #3a4661;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .icon-btn:hover {
      background: #f0f4fa;
      color: #1a2a44;
    }
    .icon-btn:active {
      background: #e4eaf4;
    }

    .badge {
      position: absolute;
      top: 2px;
      right: 2px;
      min-width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #ef4444;
      color: #fff;
      font-size: 0.68rem;
      display: inline-grid;
      place-items: center;
      padding: 0 5px;
      line-height: 1;
      pointer-events: none;
      box-shadow: 0 0 0 2px #fff;
    }

    @keyframes notification-pulse {
      0%, 100% {
        box-shadow: 0 0 0 2px #fff;
      }
      50% {
        box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(239, 68, 68, 0.35);
      }
    }
    .badge {
      animation: notification-pulse 3s ease-in-out infinite;
    }

    .user-btn {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 14px;
      padding: 7px 10px;
      min-width: 218px;
      display: flex;
      align-items: center;
      gap: 9px;
      justify-content: space-between;
      cursor: pointer;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1d6de8, #2f9bff);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 0.85rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    .user-meta { display: grid; gap: 1px; overflow: hidden; text-align: left; flex: 1; }
    .user-meta strong, .user-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-meta strong { font-size: 0.86rem; }
    .user-meta span { color: var(--muted); font-size: 0.8rem; }

    .dropdown {
      position: absolute;
      right: 0;
      top: 52px;
      width: 220px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 8px;
      display: grid;
      gap: 4px;
    }

    .dropdown button {
      border: 0;
      background: transparent;
      text-align: left;
      border-radius: 8px;
      padding: 9px 10px;
      cursor: pointer;
      color: var(--text);
      font-size: 0.92rem;
    }

    .dropdown button:hover { background: #f3f6fc; }
    .notification-popover {
      position: absolute;
      right: 0;
      top: 52px;
      width: 360px;
      max-width: min(360px, calc(100vw - 32px));
      max-height: 380px;
      overflow: auto;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 10px;
      z-index: 1010;
    }
    .notification-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.86rem;
      font-weight: 700;
      color: #334155;
      margin-bottom: 8px;
    }
    .notification-popover-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .notification-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }
    .notification-item {
      border: 1px solid #e6edf8;
      border-radius: 10px;
      padding: 8px 9px;
      background: #fff;
      outline: none;
    }
    .notification-item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .notification-item.is-unread {
      border-color: #cfe0ff;
      background: #f4f8ff;
    }
    .notification-item.is-actionable {
      cursor: pointer;
      transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .notification-item.is-actionable:hover {
      background: #f8fbff;
      border-color: #bfd5f7;
    }
    .notification-item.is-actionable:focus-visible {
      border-color: #7ea8e8;
      box-shadow: 0 0 0 2px rgba(126, 168, 232, 0.2);
    }
    .notification-title {
      margin: 0;
      font-size: 0.82rem;
      font-weight: 700;
      color: #213150;
    }
    .notification-item-delete {
      margin-right: 0;
      padding: 4px 8px;
      font-size: 0.75rem;
      flex-shrink: 0;
    }
    .notification-message {
      margin: 0;
      font-size: 0.8rem;
      color: #45556f;
      line-height: 1.35;
      white-space: pre-line;
    }
    .notification-date {
      margin: 6px 0 0;
      font-size: 0.74rem;
      color: #6b7a91;
    }
    .rfq-attachment-list {
      display: grid;
      gap: 4px;
    }
    .quote-attachment-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 1px solid #d8e1ee;
      border-radius: 10px;
      background: #f9fbff;
      color: #1f3558;
      text-align: left;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
    }
    .quote-attachment-button:hover {
      border-color: #b6cae7;
      background: #f3f8ff;
    }
    .quote-attachment-button:focus-visible {
      outline: none;
      border-color: #7ea8e8;
      box-shadow: 0 0 0 2px rgba(126, 168, 232, 0.2);
    }
    .quote-attachment-button svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #2f6fca;
    }
    .quote-attachment-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .quote-attachment-content strong {
      font-size: 0.82rem;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .quote-attachment-content small {
      font-size: 0.72rem;
      color: #55719b;
      line-height: 1.2;
    }
    .quote-attachment-link {
      color: #2f6fca;
      font-size: 0.82rem;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      max-width: 180px;
    }
    .quote-attachment-link:hover {
      text-decoration: underline;
    }
    .rfq-inline-actions {
      margin-top: 8px;
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .rfq-supporting-documents-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      margin-top: 8px;
    }
    .rfq-supporting-document-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border: 1px solid #d8e1ee;
      border-radius: 8px;
      background: #f9fbff;
    }
    .rfq-supporting-document-item > svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #2f6fca;
    }
    .rfq-supporting-document-name {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 0.82rem;
      color: #1f3558;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rfq-supporting-document-item .btn-sm.icon-only {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      min-width: 26px;
      margin-right: 0;
    }
    .rfq-supporting-document-item .btn-sm.icon-only svg {
      width: 13px;
      height: 13px;
    }

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

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 14px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .kpi {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 16px;
    }
    .kpi h2 {
      margin: 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .kpi-body {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .kpi-icon-big {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 10px;
      background: var(--sidebar);
      color: var(--primary);
    }
    .kpi-icon-big svg { width: 20px; height: 20px; }
    .kpi .metric-value {
      font-size: 1.35rem;
      font-weight: 800;
      line-height: 1.2;
      color: #174ea6;
    }
    .kpi.kpi-link {
      cursor: pointer;
      transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
    .kpi.kpi-link:hover {
      box-shadow: 0 2px 8px rgba(23, 78, 166, 0.15);
      transform: translateY(-1px);
    }
    .supplier-dashboard-kpi-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .supplier-dashboard-kpi-grid .kpi {
      grid-column: span 1;
    }
    .wide { grid-column: span 6; overflow-x: auto; }
    .wide-main { grid-column: span 8; overflow-x: auto; }
    .supplier-filter-bar {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      background: var(--sidebar);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .supplier-filter-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1 1 0;
      min-width: 130px;
    }
    .supplier-filter-label {
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .supplier-filter-item select,
    .supplier-filter-item input {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px 8px;
      font-family: inherit;
      font-size: 0.85rem;
      color: var(--text);
      background: #fff;
    }
    .supplier-filter-item select:focus,
    .supplier-filter-item input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(24, 85, 182, 0.12);
    }
    .supplier-filter-reset {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--muted);
      cursor: pointer;
      flex-shrink: 0;
      transition: color 0.15s, border-color 0.15s;
    }
    .supplier-filter-reset:hover {
      color: var(--primary);
      border-color: var(--primary);
    }
    .supplier-filter-reset svg {
      width: 15px;
      height: 15px;
    }

    .dashboard-edit-exit-bar {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
    }
    .dashboard-edit-exit-button {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 9px;
      padding: 10px 15px;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.01em;
    }
    .dashboard-edit-exit-button svg {
      width: 15px;
      height: 15px;
    }
    .dashboard-edit-exit-button:disabled {
      opacity: 0.72;
      cursor: not-allowed;
    }
    .dashboard-edit-exit-bar button {
      margin: 0;
    }
    .dashboard-undo-toast {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid #d4dce8;
      border-radius: 10px;
      background: #f4f7fb;
      padding: 8px 10px;
      color: #2a3f5f;
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .dashboard-undo-toast button {
      margin: 0;
      border: 1px solid #cfe0ff;
      border-radius: 8px;
      background: #f2f7ff;
      color: #1855b6;
      padding: 6px 9px;
      font-size: 0.82rem;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      line-height: 1.2;
    }
    .dashboard-undo-toast button:hover {
      background: #e8f0ff;
      border-color: #bcd3f8;
    }
    .card {
      position: relative;
    }
    .card.is-dashboard-editing {
      border-style: dashed;
      border-color: #9fbbe9;
      box-shadow: 0 0 0 2px rgba(77, 132, 221, 0.12);
      padding-top: 34px;
      padding-bottom: 24px;
    }
    .card.wide.is-dashboard-editing,
    .card.wide-main.is-dashboard-editing {
      overflow: visible;
    }
    .card.is-dashboard-editing a,
    .card.is-dashboard-editing .table-row-clickable,
    .card.is-dashboard-editing .top-lanes-map,
    .card.is-dashboard-editing canvas {
      pointer-events: none;
    }
    .card.is-dashboard-dragging {
      opacity: 0.72;
      box-shadow: 0 0 0 2px rgba(54, 104, 192, 0.2);
    }
    .card.is-dashboard-hidden {
      border-style: dashed;
      border-color: #b8c2d3;
      background: linear-gradient(180deg, #f1f4f8 0%, #e8edf4 100%);
      color: #5a6780;
      box-shadow: none;
      filter: grayscale(0.45);
      opacity: 0.88;
    }
    .card.is-dashboard-hidden .metric-value,
    .card.is-dashboard-hidden .kpi-hint,
    .card.is-dashboard-hidden .section-title,
    .card.is-dashboard-hidden .empty {
      color: #6f7c92;
    }
    .card.is-dashboard-drop-target {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }
    .dashboard-card-edit-controls {
      position: absolute;
      top: 8px;
      right: 8px;
      display: inline-flex;
      gap: 6px;
      z-index: 3;
    }
    .dashboard-card-control {
      margin: 0;
      width: 26px;
      height: 24px;
      padding: 0;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd9ef;
      background: #ffffff;
      color: #35537e;
    }
    .dashboard-card-control.drag {
      cursor: grab;
    }
    .dashboard-card-control.hide:hover {
      color: #ac1f3c;
      border-color: #e8b5c0;
      background: #fff7f8;
    }
    .dashboard-card-control svg {
      width: 14px;
      height: 14px;
    }
    .dashboard-widget-resize-handle {
      position: absolute;
      right: 8px;
      bottom: 6px;
      margin: 0;
      width: 28px;
      height: 24px;
      padding: 0;
      border-radius: 7px;
      border: 1px solid #cbd9ef;
      background: #fff;
      color: #4a6790;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: ew-resize;
      z-index: 3;
    }
    .dashboard-widget-resize-handle:hover {
      border-color: #8eb0e8;
      background: #f2f7ff;
      color: #1f4d97;
    }
    .dashboard-widget-resize-handle svg {
      width: 13px;
      height: 13px;
    }

    .dashboard-editor-item {
      border: 1px solid #dbe7fb;
      border-radius: 10px;
      padding: 8px 10px;
      background: #f7faff;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 8px;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .dashboard-editor-item.is-dragging {
      border-color: #88ace8;
      background: #ecf4ff;
      box-shadow: 0 0 0 2px rgba(66, 122, 255, 0.14);
      opacity: 0.9;
    }
    .dashboard-editor-item:hover {
      border-color: #c3d8fb;
      background: #f2f7ff;
    }
    .dashboard-editor-drag {
      color: #6b7a91;
      font-size: 0.95rem;
      letter-spacing: -1px;
      cursor: grab;
      user-select: none;
      line-height: 1;
      padding: 2px 4px;
    }
    .dashboard-editor-label {
      font-size: 0.84rem;
      color: #1f3558;
      font-weight: 600;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dashboard-editor-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      color: #2f4467;
      white-space: nowrap;
    }
    .dashboard-editor-toggle input {
      margin: 0;
      accent-color: #1f67d8;
    }
    .dashboard-editor-size {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      color: #2f4467;
      white-space: nowrap;
    }
    .dashboard-editor-size select {
      min-width: 96px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 4px 6px;
      font-size: 0.8rem;
      font-family: inherit;
      color: var(--text);
      background: #fff;
    }
    .dashboard-editor-size select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(24, 85, 182, 0.12);
    }

    .deadline-widget {
      grid-column: span 4;
    }
    .section-subtitle {
      margin: 12px 0 4px 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
    }
    .deadline-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .deadline-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none;
      color: var(--text);
      transition: background 0.15s;
    }
    .deadline-item:hover {
      background: #f8fbff;
    }
    .deadline-item + .deadline-item::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      top: 0;
      height: 1px;
      background: var(--line);
    }
    .deadline-item + .deadline-item {
      position: relative;
    }
    .deadline-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .deadline-red {
      background: #fde8e8;
      color: #b91c1c;
    }
    .deadline-orange {
      background: #fff3cd;
      color: #92400e;
    }
    .deadline-green {
      background: #d1fae5;
      color: #065f46;
    }
    .deadline-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
      flex: 1;
    }
    .deadline-lane {
      font-size: 0.88rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .deadline-meta {
      font-size: 0.78rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .deadline-chevron {
      width: 16px;
      height: 16px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .metric-value {
      margin-top: 8px;
      font-size: 1.6rem;
      font-weight: 700;
      color: #174ea6;
    }
    .win-rate-good { color: #065f46; }
    .win-rate-mid  { color: #92400e; }
    .win-rate-low  { color: #b91c1c; }
    .kpi-hint {
      display: block;
      margin-top: -4px;
      font-size: 0.74rem;
      color: var(--muted);
    }

    /* -- Mode Split (donut chart) widget -- */
    .mode-split-widget {
      grid-column: span 4;
    }
    .mode-split-chart-wrap {
      display: flex;
      justify-content: center;
      padding: 8px 0 12px;
      max-width: 200px;
      margin: 0 auto;
    }
    .mode-split-note {
      margin: 4px 0 0;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .mode-split-legend {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .mode-split-legend-item {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.84rem;
      color: var(--text);
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--sidebar);
      min-width: 180px;
    }
    .mode-split-legend-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mode-split-legend-title {
      font-weight: 700;
      line-height: 1.2;
    }
    .mode-split-legend-metric {
      font-size: 0.78rem;
      line-height: 1.2;
      color: var(--muted);
    }
    .mode-split-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 3px;
    }

    /* -- Top Lanes widget -- */
    .top-lanes-widget {
      grid-column: span 4;
    }
    .top-lanes-map-container {
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--line);
    }
    .top-lanes-map {
      width: 100%;
      height: 260px;
    }
    .top-lanes-legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .top-lanes-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 8px;
      background: var(--sidebar);
    }
    .top-lanes-legend-color {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .top-lanes-legend-route {
      flex: 1;
      font-size: 0.84rem;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .top-lanes-legend-count {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text);
      min-width: 20px;
      text-align: right;
    }

    /* -- Supplier Ranking widget -- */
    .supplier-ranking-widget {
      grid-column: span 4;
    }
    .supplier-ranking-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .supplier-ranking-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      border-radius: 8px;
      background: var(--sidebar);
    }
    .supplier-ranking-medal {
      min-width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 0.76rem;
      font-weight: 700;
      background: var(--line);
      color: var(--muted);
    }
    .medal-gold { background: #fef3c7; color: #92400e; }
    .medal-silver { background: #e5e7eb; color: #374151; }
    .medal-bronze { background: #fed7aa; color: #9a3412; }
    .supplier-ranking-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .supplier-ranking-name {
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .supplier-ranking-stats {
      font-size: 0.74rem;
      color: var(--muted);
    }
    .supplier-ranking-rate {
      font-size: 0.9rem;
      font-weight: 700;
      min-width: 36px;
      text-align: right;
    }

    .card h2 { margin: 0; font-size: 0.95rem; }
    .section-title { margin: 0 0 10px; font-size: 1rem; }
    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .section-head.section-head-actions-only {
      justify-content: flex-end;
    }
    .subscriptions-section-head {
      margin-bottom: 18px;
    }
    .subscriptions-section-head .section-title {
      margin: 0;
    }
    .billing-section-head {
      margin-bottom: 16px;
    }
    .billing-settings-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .billing-settings-modal-head h3 {
      margin: 0;
    }
    .billing-settings-checkout-btn {
      border-color: #bfd7ff;
      background: #eef5ff;
      color: #1f56b0;
    }
    .billing-settings-checkout-btn:hover {
      border-color: #9bbdf0;
      background: #e2edff;
      color: #1b4c99;
    }
    .subscription-block-modal {
      width: min(720px, 100%);
      gap: 14px;
      border-radius: 16px;
    }
    .subscription-block-hero {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid #d5def0;
      border-radius: 14px;
      padding: 12px;
      background: #f8fbff;
    }
    .subscription-block-hero.is-warning {
      border-color: #f5d192;
      background: linear-gradient(180deg, #fff7e8 0%, #fffaf1 100%);
    }
    .subscription-block-hero-icon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid #f2c27a;
      background: #ffffff;
      color: #9a4d00;
    }
    .subscription-block-hero-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .subscription-block-hero-copy h3 {
      margin: 0;
      font-size: 1.02rem;
      color: #8a4b00;
    }
    .subscription-block-hero-copy p {
      margin: 0;
      color: #8f5a14;
      line-height: 1.45;
      font-weight: 600;
    }
    .subscription-block-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .subscription-block-stat {
      border: 1px solid #d8e3f5;
      border-radius: 12px;
      background: #f8fbff;
      padding: 10px;
      display: grid;
      gap: 5px;
      min-height: 76px;
    }
    .subscription-block-stat-label {
      color: #49698f;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .subscription-block-stat-value {
      color: #1f3a63;
      font-size: 0.92rem;
      line-height: 1.3;
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .modal-grid > .billing-address-row,
    .modal-billing-settings .billing-address-row {
      grid-column: 1 / -1;
    }
    .company-settings-subscription-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 8px;
    }
    .company-settings-subscription-block {
      width: 33.333%;
      min-width: 320px;
    }
    .company-settings-subscription-title {
      font-weight: 700;
      color: #24364f;
    }
    .company-settings-subscription-cta {
      align-self: flex-start;
      margin-top: 10px;
      width: auto;
      max-width: max-content;
      justify-self: start;
    }
    .company-settings-save-actions {
      justify-content: flex-end;
      margin-top: 6px;
      margin-bottom: 2px;
    }
    .company-settings-subscription-summary {
      border: 1px solid #d8e3f5;
      border-radius: 12px;
      background: #f8fbff;
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }
    .company-settings-subscription-summary-row {
      margin: 0;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid #e5edf9;
      padding-bottom: 7px;
    }
    .company-settings-subscription-summary-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
    .company-settings-subscription-item-label {
      color: #49698f;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .company-settings-subscription-item-value {
      color: #1f3a63;
      font-size: 0.92rem;
      line-height: 1.3;
      font-weight: 700;
      overflow-wrap: anywhere;
      text-align: right;
    }
    .settings-subscription-block {
      width: 100%;
      min-width: 0;
      border: 1px solid #d8e3f5;
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      padding: 14px;
      display: grid;
      gap: 12px;
    }
.settings-subscription-head {
  margin-bottom: 0;
  gap: 8px;
}
.settings-subscription-head .company-settings-subscription-title {
  font-weight: 600;
  color: #223a5c;
  letter-spacing: 0.01em;
}
.settings-subscription-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
      flex-wrap: wrap;
    }
    .settings-subscription-plan-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border: 1px solid #bfd7ff;
  border-radius: 999px;
  background: #eef5ff;
  color: #1f56b0;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}
.settings-subscription-plan-pill i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.settings-subscription-plan-pill strong {
  margin: 0;
  font-weight: 500;
}
    .settings-subscription-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .settings-subscription-metric {
      border: 1px solid #dfe7f5;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 6px;
      min-height: 76px;
    }
.settings-subscription-metric .company-settings-subscription-item-value {
  text-align: left;
  font-size: 0.86rem;
  font-weight: 500;
  color: #223a5c;
}
.settings-subscription-metric .company-settings-subscription-item-label {
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #60728e;
}
.settings-subscription-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.settings-subscription-metric-label i {
  width: 13px;
  height: 13px;
  color: #5f7697;
  flex: 0 0 auto;
}
.settings-subscription-actions {
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 0;
}
.settings-subscription-actions .btn-sm {
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}
.settings-subscription-actions .company-settings-subscription-cta {
  margin-top: 0;
  align-self: auto;
}
    .settings-subscription-scheduled {
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .settings-subscription-scheduled-head {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #2a476f;
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .settings-subscription-scheduled-head strong {
      font-weight: 600;
    }
    .settings-subscription-scheduled-head i {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: #2f65be;
    }
    .settings-subscription-scheduled-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .settings-subscription-scheduled-row {
      margin: 0;
      border: 1px solid #e3ebf8;
      border-radius: 8px;
      background: #f9fbff;
      padding: 8px 9px;
      display: grid;
      gap: 4px;
    }
    .settings-subscription-scheduled-row .company-settings-subscription-item-label {
      font-size: 0.76rem;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0.01em;
      color: #60728e;
    }
    .settings-subscription-scheduled-row .company-settings-subscription-item-value {
      text-align: left;
      font-size: 0.86rem;
      font-weight: 500;
      color: #223a5c;
    }
    .settings-subscription-scheduled-note {
      margin: 0;
      font-size: 0.79rem;
      color: #5a6f8e;
    }
    .settings-subscription-cancellation {
      border: 1px solid #f2d9b6;
      border-radius: 10px;
      background: #fff9ef;
      padding: 10px;
      display: grid;
      gap: 7px;
    }
    .settings-subscription-cancellation-head {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #8a4b0a;
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .settings-subscription-cancellation-head i {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: #b45309;
    }
    .settings-subscription-cancellation-note {
      margin: 0;
      color: #7c4a13;
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .subscription-cancellation-modal {
      max-width: 560px;
      display: grid;
      gap: 10px;
    }
    .subscription-cancellation-modal h3,
    .subscription-cancellation-modal p {
      margin: 0;
    }
    .subscription-cancellation-modal .notice {
      margin-top: 2px;
    }
    .billing-table-wrap {
      border: 1px solid #dde6f5;
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      margin-top: 8px;
    }
    .billing-table-wrap h3 {
      margin: 0 0 10px;
      font-size: 0.96rem;
    }
    .billing-checkout-shell {
      max-width: 920px;
      margin: 0 auto;
      width: 100%;
    }
    .billing-checkout-head {
      margin-bottom: 16px;
    }
    .billing-checkout-error-banner {
      margin-bottom: 12px;
    }
    .billing-checkout-error-list {
      margin: -2px 0 14px;
      padding: 10px 12px 10px 24px;
      border: 1px solid #fecdd3;
      border-left: 6px solid #dc2626;
      border-radius: 12px;
      background: linear-gradient(90deg, #fff1f2 0%, #fff7f8 100%);
      color: #7f1d1d;
      font-size: 0.84rem;
      font-weight: 600;
      line-height: 1.35;
      display: grid;
      gap: 4px;
    }
    .billing-checkout-error-list li {
      margin: 0;
    }
    .billing-checkout-steps {
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0;
    }
    .billing-checkout-steps li {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      flex: 1;
    }
    .billing-step-nav-btn {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
      cursor: inherit;
      color: inherit;
      font: inherit;
    }
    .billing-step-nav-btn:disabled {
      cursor: default;
    }
    .billing-checkout-steps li + li::before {
      content: "";
      position: absolute;
      left: calc(-50% + 16px);
      right: calc(50% + 16px);
      top: 16px;
      height: 2px;
      background: #d3e0f4;
      z-index: 0;
    }
    .billing-checkout-steps li.is-done + li::before {
      background: #6ac48a;
    }
    .billing-step-circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #c0d0ea;
      background: #f7faff;
      color: #6a82a0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82rem;
      font-weight: 700;
      position: relative;
      z-index: 1;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .billing-checkout-steps li.is-active .billing-step-circle {
      border-color: #3b7ddd;
      background: #3b7ddd;
      color: #fff;
    }
    .billing-checkout-steps li.is-done .billing-step-circle {
      border-color: #3ab26a;
      background: #3ab26a;
      color: #fff;
    }
    .billing-step-label {
      font-size: 0.76rem;
      font-weight: 600;
      color: #8a9db8;
      text-align: center;
      white-space: nowrap;
    }
    .billing-checkout-steps li.is-active .billing-step-label {
      color: #1a4f9c;
    }
    .billing-checkout-steps li.is-done .billing-step-label {
      color: #2a7a4c;
    }
    .billing-checkout-steps li.is-clickable {
      cursor: pointer;
    }
    .billing-checkout-steps li.is-clickable:hover .billing-step-circle {
      box-shadow: 0 0 0 3px rgba(58, 178, 106, 0.2);
    }
    .billing-checkout-steps li.is-disabled .billing-step-label {
      color: #9fb0c9;
    }
    .billing-checkout-step {
      display: grid;
      gap: 12px;
    }
    .billing-checkout-form-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .billing-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .billing-summary-card {
      border: 1px solid #d6e2f6;
      border-radius: 12px;
      background: #f8fbff;
      padding: 12px;
      display: grid;
      gap: 6px;
    }
    .billing-summary-label {
      margin: 0;
      color: #47607f;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 700;
    }
    .billing-summary-value {
      margin: 0;
      font-size: 1.06rem;
      font-weight: 700;
      color: #10243f;
    }
    .billing-summary-meta {
      margin: 0;
      color: #3a4e6a;
      font-size: 0.86rem;
    }
    .billing-cycle-row {
      margin-bottom: 14px;
      max-width: 320px;
    }
    .billing-cycle-section-label {
      font-size: 0.82rem;
      font-weight: 700;
      color: #3a5070;
      margin: 0 0 6px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .billing-cycle-section-head {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }
    .billing-cycle-info-btn {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid #bfd2ef;
      background: #f4f8ff;
      color: #2a5ea9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .billing-cycle-info-btn:hover {
      border-color: #8cb2e8;
      background: #eaf2ff;
      color: #1a4f9c;
    }
    .billing-cycle-info-btn i,
    .billing-cycle-info-btn svg {
      width: 14px;
      height: 14px;
    }
    .billing-cycle-info-modal {
      max-width: 520px;
    }
    .billing-cycle-info-modal p {
      margin: 0;
      color: #2f4766;
      line-height: 1.55;
      font-size: 0.92rem;
    }
    .billing-cycle-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      background: #f0f5ff;
      border-radius: 10px;
      padding: 4px;
      width: fit-content;
    }
    .billing-cycle-tab {
      padding: 6px 16px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: #4a617f;
      font-size: 0.84rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .billing-cycle-tab.is-active {
      background: #fff;
      color: #1a4f9c;
      box-shadow: 0 1px 4px rgba(21, 43, 76, 0.10);
    }
    .billing-plan-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }
    .billing-plan-card {
      border: 2px solid #d9e3f4;
      border-radius: 16px;
      background: #fff;
      padding: 22px 18px 18px;
      display: grid;
      gap: 14px;
      box-shadow: 0 4px 16px rgba(21, 43, 76, 0.05);
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    }
    .billing-plan-card:hover {
      border-color: #85b4ff;
      box-shadow: 0 6px 20px rgba(42, 107, 229, 0.10);
      transform: translateY(-1px);
    }
    .billing-plan-card.is-current {
      border-color: #6abf8a;
      background: #f4fff8;
    }
    .billing-plan-card.is-selected {
      border-color: #3b7ddd;
      box-shadow: 0 8px 24px rgba(42, 107, 229, 0.15);
      transform: translateY(-2px);
    }
    .billing-plan-card.is-popular {
      border-color: #a585f5;
    }
    .billing-plan-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .billing-plan-head h3 {
      margin: 0;
      font-size: 1.18rem;
      font-weight: 800;
      color: #0d1f38;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .billing-plan-icon {
      width: 20px;
      height: 20px;
      color: #3b7ddd;
      flex-shrink: 0;
    }
    .billing-plan-card.is-popular .billing-plan-icon {
      color: #7b5cc7;
    }
    .billing-plan-badge {
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .billing-plan-badge.badge-current {
      background: #d8f5e4;
      color: #1a6b3a;
    }
    .billing-plan-badge.badge-selected {
      background: #ddeeff;
      color: #1a4f9c;
    }
    .billing-plan-badge.badge-popular {
      background: #ede8ff;
      color: #5b3caa;
    }
    .billing-plan-badge.badge-discount {
      background: #e7f8ef;
      color: #1f7a44;
    }
    .billing-plan-price-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .billing-plan-price-amount {
      font-size: 1.6rem;
      font-weight: 800;
      color: #0f2440;
      line-height: 1;
    }
    .billing-plan-price-currency {
      font-size: 0.9rem;
      font-weight: 600;
      color: #3a5070;
    }
    .billing-plan-price-period {
      font-size: 0.78rem;
      color: #5a7090;
    }
    .billing-plan-cycle-price {
      margin: 0;
      font-size: 0.82rem;
      color: #445e7a;
      background: #f2f7ff;
      border-radius: 6px;
      padding: 4px 8px;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 6px;
      align-items: start;
    }
    .billing-cycle-price-label {
      white-space: nowrap;
    }
    .billing-cycle-price-values {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .billing-cycle-price-values.has-discount {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
    }
    .billing-cycle-price-base {
      color: #8ea0b7;
      text-decoration: line-through;
      white-space: nowrap;
      line-height: 1.15;
    }
    .billing-cycle-price-discounted {
      white-space: nowrap;
      line-height: 1.15;
    }
    .billing-plan-features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
    }
    .billing-plan-features li {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.84rem;
      color: #263a55;
    }
    .billing-plan-features li i {
      flex-shrink: 0;
      color: #3ab26a;
      width: 14px;
      height: 14px;
    }
    .billing-plan-select-btn {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1.5px solid #3b7ddd;
      background: #f0f7ff;
      color: #1a4f9c;
      font-size: 0.84rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .billing-plan-select-btn:hover {
      background: #3b7ddd;
      color: #fff;
    }
    .billing-plan-card.is-selected .billing-plan-select-btn {
      background: #3b7ddd;
      color: #fff;
    }
    .billing-method-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin-bottom: 4px;
    }
    .billing-method-cards.has-error .billing-method-card {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    .billing-method-card {
      border: 2px solid #d9e3f4;
      border-radius: 12px;
      background: #fff;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
      position: relative;
    }
    .billing-method-card.is-selected {
      border-color: #3b7ddd;
      background: #f0f7ff;
    }
    .billing-method-card.is-disabled {
      cursor: not-allowed;
      opacity: 0.55;
      background: #f8f9fb;
    }
    .billing-method-card-icon {
      color: #4a617f;
      flex-shrink: 0;
    }
    .billing-method-card.is-selected .billing-method-card-icon {
      color: #1a4f9c;
    }
    .billing-method-card-body {
      flex: 1;
      min-width: 0;
    }
    .billing-method-card-name {
      font-size: 0.86rem;
      font-weight: 600;
      color: #112949;
      margin: 0;
    }
    .billing-method-card-soon {
      font-size: 0.68rem;
      font-weight: 600;
      color: #8a9db8;
      background: #eef1f7;
      border-radius: 4px;
      padding: 1px 5px;
      display: inline-block;
      margin-top: 2px;
    }
    .billing-address-section {
      border: 1px solid #dde8f5;
      border-radius: 12px;
      padding: 14px 16px;
      display: grid;
      gap: 10px;
      background: #fafcff;
    }
    .billing-address-section .modal-field {
      gap: 7px;
    }
    .billing-address-section .modal-field .field-error-text {
      margin-top: 2px;
      margin-bottom: 6px;
      display: block;
    }
    .billing-address-section-title {
      margin: 0 0 2px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #47607f;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .billing-address-row {
      display: grid;
      grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
      gap: 10px;
    }
    @media (max-width: 900px) {
      .billing-address-row {
        grid-template-columns: 1fr;
      }
    }
    .billing-preview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px;
    }
    .billing-preview-card {
      border: 1px solid #d6e2f4;
      border-radius: 12px;
      background: #f9fbff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .billing-preview-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .billing-preview-card-head h3 {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 700;
      color: #142d4f;
      flex: 1;
    }
    .billing-preview-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #e8f0fe;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .billing-preview-card-icon svg {
      width: 16px;
      height: 16px;
      color: #3b7ddd;
    }
    .billing-preview-edit-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.78rem;
      font-weight: 600;
      color: #3b7ddd;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .billing-preview-edit-link:hover {
      color: #1a56b8;
      text-decoration: underline;
    }
    .billing-preview-edit-link svg {
      width: 13px;
      height: 13px;
    }
    .billing-preview-card-body {
      display: grid;
      gap: 4px;
    }
    .billing-preview-plan-features {
      list-style: none;
      margin: 6px 0 0;
      padding: 0;
      display: grid;
      gap: 6px;
    }
    .billing-preview-plan-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.81rem;
      color: #2d4566;
    }
    .billing-preview-plan-features li i {
      width: 14px;
      height: 14px;
      color: #3b7ddd;
      flex-shrink: 0;
    }
    .billing-preview-line {
      margin: 0;
      font-size: 0.85rem;
      color: #2d4566;
    }
    .billing-preview-line-muted {
      color: #667085;
      font-size: 0.8rem;
    }
    .billing-preview-detail-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.85rem;
      color: #2d4566;
      padding: 3px 0;
    }
    .billing-preview-total-row {
      border-top: 1px solid #d6e2f4;
      margin-top: 4px;
      padding-top: 8px;
      font-size: 0.9rem;
      color: #142d4f;
    }
    .billing-preview-address {
      font-size: 0.85rem;
      color: #2d4566;
      line-height: 1.6;
    }
    .billing-actions {
      justify-content: flex-start;
    }

    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
    th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
    .actions-cell { white-space: nowrap; }
    .table-text-link {
      color: #1855b6;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      text-align: left;
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .table-text-link:hover {
      color: #123f88;
    }
    .table-text-link:focus-visible {
      outline: 2px solid #9ac0ff;
      outline-offset: 2px;
      border-radius: 2px;
    }
    .actions-cell .btn-sm.primary {
      margin-right: 6px;
    }
    .table-row-clickable { cursor: pointer; }
    .table-row-clickable:hover { background: #f8fbff; }
    .table-row-clickable:focus-visible {
      outline: 2px solid #9ac0ff;
      outline-offset: -2px;
    }
    .pending-task-details-modal {
      width: min(980px, 100%);
    }
    .sent-email-log-detail-modal {
      width: min(1100px, 100%);
    }
    .sent-email-log-body-frame {
      display: block;
      width: 100%;
      height: 360px;
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .sent-email-log-status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      cursor: help;
    }
    .sent-email-log-status-icon.is-sent {
      color: #16a34a;
    }
    .sent-email-log-status-icon.is-failed {
      color: #dc2626;
    }
    .sent-email-log-status-icon i {
      width: 18px;
      height: 18px;
      stroke-width: 2.5;
    }
    .pending-task-details {
      display: grid;
      gap: 12px;
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #ffffff;
      padding: 12px;
    }
    .pending-task-details-block {
      display: grid;
      gap: 8px;
    }
    .pending-task-details-block h4 {
      margin: 0;
      font-size: 0.85rem;
      color: #213a5b;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .pending-task-detail-grid {
      margin: 0;
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
    .pending-task-detail-pair {
      margin: 0;
      border: 1px solid #e2ebfa;
      border-radius: 8px;
      background: #fbfdff;
      padding: 8px 10px;
      min-width: 0;
    }
    .pending-task-detail-pair dt {
      margin: 0;
      font-size: 0.72rem;
      color: #6f7f98;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .pending-task-detail-pair dd {
      margin: 4px 0 0;
      font-size: 0.86rem;
      color: #1d3556;
      word-break: break-word;
    }
    .btn-sm {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 8px;
      padding: 6px 9px;
      font-size: 0.82rem;
      cursor: pointer;
      margin-right: 6px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-sm.danger {
      border-color: #f2c5c5;
      color: #a82222;
      background: #fff5f5;
    }
    .btn-sm.primary {
      border-color: #cfe0ff;
      color: #1855b6;
      background: #f2f7ff;
      margin-right: 0;
    }
    .btn-sm.accept-action {
      border-color: var(--status-accepted-border);
      color: var(--status-accepted-text);
      background: var(--status-accepted-bg);
    }
    .btn-sm.icon-only {
      min-width: 32px;
      width: 32px;
      height: 32px;
      padding: 0;
      justify-content: center;
    }
    .btn-sm:disabled,
    .modal-actions button:disabled,
    .btn-primary:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }
    .btn-sm .lucide {
      width: 14px;
      height: 14px;
      stroke-width: 2;
    }
    .btn-sm.invitation-action.is-sent {
      border-color: #cfe0ff;
      background: #f2f7ff;
      color: #1855b6;
    }
    .btn-sm.invitation-action.is-onboarded {
      border-color: #cde8d8;
      background: #eefaf3;
      color: #166534;
    }
    .btn-sm.invitation-action:disabled {
      opacity: 1;
    }
    .rfq-quotes-count {
      margin-left: 6px;
      min-width: 17px;
      height: 17px;
      border-radius: 999px;
      background: #1d6de8;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 1;
      display: inline-grid;
      place-items: center;
      padding: 0 4px;
    }
    .status-pill,
    .rfq-status-pill,
    .quote-status-pill {
      display: inline-block;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 0.74rem;
      font-weight: 700;
      text-transform: capitalize;
      border: 1px solid transparent;
    }
    .status-pill.is-open,
    .rfq-status-pill.is-open,
    .quote-status-pill.is-open {
      color: var(--status-open-text);
      background: var(--status-open-bg);
      border-color: var(--status-open-border);
    }
    .status-pill.is-expired,
    .rfq-status-pill.is-expired,
    .quote-status-pill.is-expired {
      color: var(--status-expired-text);
      background: var(--status-expired-bg);
      border-color: var(--status-expired-border);
    }
    .status-pill.is-awarded,
    .rfq-status-pill.is-awarded,
    .quote-status-pill.is-awarded {
      color: var(--status-awarded-text);
      background: var(--status-awarded-bg);
      border-color: var(--status-awarded-border);
    }
    .status-pill.is-cancelled,
    .rfq-status-pill.is-cancelled,
    .quote-status-pill.is-cancelled {
      color: var(--status-cancelled-text);
      background: var(--status-cancelled-bg);
      border-color: var(--status-cancelled-border);
    }
    /* --- Table Section Header (title + toolbar) --- */
    .table-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 2px solid #d6e2f4;
    }
    .table-section-header h3 {
      margin: 0;
      font-size: 1.2rem;
      color: #1b2b46;
      font-weight: 800;
      letter-spacing: -0.01em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .table-section-header > .lucide {
      width: 18px;
      height: 18px;
      color: var(--brand);
      stroke-width: 2;
      flex-shrink: 0;
    }
    .table-section-header .table-section-search {
      width: 400px;
      flex-shrink: 1;
      min-width: 0;
    }
    .table-filter-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px 3px 10px;
      border-radius: 999px;
      background: #fef3c7;
      color: #92400e;
      font-size: 0.72rem;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
      line-height: 1.4;
      letter-spacing: 0.01em;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease;
    }
    .table-filter-status:hover {
      background: #fde68a;
    }
    .table-filter-status .lucide {
      width: 12px;
      height: 12px;
      stroke-width: 2.5;
    }
    .table-filter-status .lucide-x {
      width: 13px;
      height: 13px;
      stroke-width: 2.5;
      margin-left: 2px;
      opacity: 0.6;
      transition: opacity 0.15s ease;
    }
    .table-filter-status:hover .lucide-x {
      opacity: 1;
    }
    .table-section-controls {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
      margin-left: auto;
    }
    .table-section-controls .rfq-filter-picker-summary,
    .table-section-controls .rfq-column-picker > summary {
      all: unset;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #4a6a9b;
      font-size: 0.78rem;
      font-weight: 600;
      font-family: inherit;
      line-height: 1.4;
      letter-spacing: normal;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .table-section-controls .rfq-filter-picker-summary:hover,
    .table-section-controls .rfq-column-picker > summary:hover {
      background: #eef3fb;
      color: #1c4ea3;
    }
    .table-section-controls .rfq-filter-picker[open] .rfq-filter-picker-summary,
    .table-section-controls .rfq-column-picker[open] > summary {
      background: #eef3fb;
      color: #1c4ea3;
    }
    .table-section-controls .rfq-filter-picker-summary .lucide,
    .table-section-controls .rfq-column-picker > summary .lucide {
      width: 14px;
      height: 14px;
      stroke-width: 2;
    }
    .table-section-controls .rfq-filter-picker-count {
      min-width: 18px;
      border-radius: 999px;
      padding: 1px 5px;
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      color: #fff;
      background: #1c4ea3;
      border: none;
    }
    .table-section-controls .rfq-column-picker-count {
      min-width: 18px;
      border-radius: 999px;
      padding: 1px 5px;
      font-size: 0.68rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      color: #fff;
      background: #1c4ea3;
      border: none;
    }
    .table-section-controls .rfq-filter-picker-panel {
      right: 0;
      left: auto;
    }
    .table-section-controls .rfq-column-picker-panel {
      right: 0;
      left: auto;
    }
    .rfq-quotes-toolbar {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 10px;
    }
    .rfq-quotes-search-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      flex: 1 1 520px;
      min-width: 0;
    }
    .rfq-quotes-search {
      width: min(420px, 100%);
      max-width: 100%;
      flex: 0 1 420px;
    }
    .rfq-filter-picker {
      position: relative;
    }
    .rfq-filter-picker-summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #1855b6;
      font-size: 0.94rem;
      font-weight: 600;
      text-decoration: underline;
      user-select: none;
    }
    .rfq-filter-picker-summary::-webkit-details-marker {
      display: none;
    }
    .rfq-filter-picker[open] .rfq-filter-picker-summary {
      color: #134594;
    }
    .rfq-filter-picker-count {
      min-width: 22px;
      border-radius: 999px;
      padding: 1px 7px;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      color: #184f9f;
      background: #dce9ff;
      border: 1px solid #c7dcff;
    }
    .rfq-filter-picker-panel {
      position: absolute;
      z-index: 25;
      top: calc(100% + 8px);
      left: 0;
      width: min(560px, calc(100vw - 70px));
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 34px rgba(21, 36, 66, 0.14);
      padding: 10px;
    }
    .rfq-filter-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .rfq-filter-field {
      display: grid;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--muted);
      min-width: 0;
    }
    .rfq-filter-field select {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 10px;
      font-size: 0.88rem;
      color: var(--text);
      background: #fff;
    }
    .rfq-multi-select {
      position: relative;
      width: 100%;
      min-width: 0;
    }
    .rfq-multi-select-summary {
      list-style: none;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 32px 8px 10px;
      font-size: 0.88rem;
      color: var(--text);
      background: #fff;
      cursor: pointer;
      line-height: 1.3;
      min-height: 36px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .rfq-multi-select-summary::-webkit-details-marker {
      display: none;
    }
    .rfq-multi-select-summary::after {
      content: "";
      position: absolute;
      right: 11px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-right: 2px solid #65748f;
      border-bottom: 2px solid #65748f;
      transform: translateY(-60%) rotate(45deg);
      transition: transform 0.16s ease;
      pointer-events: none;
    }
    .rfq-multi-select[open] .rfq-multi-select-summary {
      border-color: #c8daf8;
      box-shadow: 0 0 0 2px rgba(24, 85, 182, 0.08);
    }
    .rfq-multi-select[open] .rfq-multi-select-summary::after {
      transform: translateY(-40%) rotate(-135deg);
    }
    .rfq-multi-select-panel {
      position: absolute;
      z-index: 30;
      top: calc(100% + 6px);
      left: 0;
      min-width: 100%;
      width: max-content;
      max-width: min(380px, calc(100vw - 70px));
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 16px 28px rgba(21, 36, 66, 0.14);
      padding: 8px;
    }
    .rfq-filter-actions {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid #edf2fa;
      display: flex;
      justify-content: flex-start;
    }
    .rfq-quotes-column-toggle {
      width: auto;
      position: relative;
      display: flex;
      justify-content: flex-end;
      margin-left: auto;
    }
    .rfq-quotes-column-toggle .rfq-column-picker-panel {
      left: auto;
      right: 0;
    }
    .rfq-column-picker {
      position: relative;
    }
    .rfq-column-picker summary {
      list-style: none;
      cursor: pointer;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      background: #f2f7ff;
      color: #184f9f;
      font-weight: 700;
      font-size: 0.82rem;
      padding: 7px 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      user-select: none;
    }
    .rfq-column-picker summary::-webkit-details-marker {
      display: none;
    }
    .rfq-column-picker[open] summary {
      box-shadow: 0 0 0 2px rgba(66, 122, 255, 0.16);
    }
    .rfq-column-picker-count {
      display: inline-grid;
      place-items: center;
      min-width: 36px;
      border-radius: 999px;
      background: #dce9ff;
      color: #184f9f;
      font-weight: 700;
      padding: 2px 8px;
      font-size: 0.74rem;
      line-height: 1.1;
    }
    .rfq-column-picker-panel {
      position: absolute;
      z-index: 25;
      top: calc(100% + 8px);
      left: 0;
      width: min(740px, calc(100vw - 70px));
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 34px rgba(21, 36, 66, 0.14);
      padding: 10px;
    }
    .rfq-column-picker-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid #edf2fa;
    }
    .rfq-quotes-column-toggle-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .status-pill.is-accepted,
    .quote-status-pill.is-accepted {
      color: var(--status-accepted-text);
      background: var(--status-accepted-bg);
      border-color: var(--status-accepted-border);
    }
    .status-pill.is-declined,
    .quote-status-pill.is-declined,
    .status-pill.is-rejected,
    .quote-status-pill.is-rejected {
      color: var(--status-declined-text);
      background: var(--status-declined-bg);
      border-color: var(--status-declined-border);
    }
    .status-pill.is-pending,
    .quote-status-pill.is-pending {
      color: var(--status-pending-text);
      background: var(--status-pending-bg);
      border-color: var(--status-pending-border);
    }
    .status-pill.is-not_submitted,
    .quote-status-pill.is-not_submitted {
      color: var(--status-not-submitted-text);
      background: var(--status-not-submitted-bg);
      border-color: var(--status-not-submitted-border);
    }
    .status-pill.is-active,
    .quote-status-pill.is-active {
      color: #14532d;
      background: #ecfdf3;
      border-color: #a7f3d0;
    }
    .status-pill.is-superseded,
    .quote-status-pill.is-superseded {
      color: #7c2d12;
      background: #fff7ed;
      border-color: #fed7aa;
    }
    .status-pill.is-complete,
    .quote-status-pill.is-complete {
      color: #14532d;
      background: #ecfdf3;
      border-color: #a7f3d0;
    }
    .status-pill.is-incomplete,
    .quote-status-pill.is-incomplete {
      color: #92400e;
      background: #fffbeb;
      border-color: #fde68a;
    }
    .user-status-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.86rem;
      font-weight: 600;
    }
    .user-status-indicator .lucide {
      width: 14px;
      height: 14px;
    }
    .user-status-indicator.is-active {
      color: #0d7a3d;
    }
    .user-status-indicator.is-pending {
      color: #1f4f8f;
    }
    .user-status-indicator.is-blocked {
      color: #a82222;
    }
    .quote-detail-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .quote-siblings-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      margin-bottom: 4px;
      overflow-x: auto;
      flex-wrap: wrap;
    }
    .quote-siblings-label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      margin-right: 2px;
    }
    .quote-sibling-pill {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      padding: 6px 12px;
      padding-right: 44px;
      border-radius: 10px;
      border: 1.5px solid var(--line);
      background: var(--surface);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      min-width: 0;
      position: relative;
    }
    .quote-sibling-pill:hover {
      border-color: var(--brand);
      background: #f0f8f7;
    }
    .quote-sibling-pill.is-current {
      border-color: var(--brand);
      background: #eaf2ff;
      box-shadow: 0 0 0 2px rgba(29, 109, 232, 0.12);
      cursor: default;
    }
    .quote-sibling-pill.is-accepted {
      border-color: var(--status-accepted-border);
    }
    .quote-sibling-pill.is-accepted.is-current {
      background: var(--status-accepted-bg);
      box-shadow: 0 0 0 2px rgba(20, 83, 45, 0.1);
    }
    .quote-sibling-pill.is-declined {
      border-color: var(--status-rejected-border);
      opacity: 0.7;
    }
    .quote-sibling-pill.is-declined.is-current {
      background: var(--status-rejected-bg);
      box-shadow: 0 0 0 2px rgba(127, 29, 29, 0.1);
      opacity: 1;
    }
    .quote-sibling-supplier {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 160px;
    }
    .quote-sibling-meta {
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .rfq-rank-link {
      font-weight: 700;
    }
    .quote-sibling-rank-link {
      position: absolute;
      top: 6px;
      right: 8px;
      left: auto;
      font-size: 0.74rem;
      line-height: 1;
      z-index: 2;
    }

    .quote-detail-hero {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      padding: 12px 14px;
      border: 1px solid #dbe7fb;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      margin-bottom: 12px;
    }
    .quote-detail-kicker {
      font-size: 0.74rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .quote-detail-hero-main h4 {
      margin: 4px 0 4px;
      font-size: 1.02rem;
      color: #1b2b46;
    }
    .quote-detail-hero-main p {
      margin: 0;
      font-size: 0.84rem;
      color: #5d6e88;
    }
    .quote-detail-hero-actions {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .quote-detail-status-wrap {
      display: grid;
      justify-items: end;
      align-content: start;
      gap: 6px;
      min-width: 96px;
    }
    .quote-detail-suppliers-wrap {
      display: grid;
      gap: 6px;
      min-width: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }
    .quote-detail-suppliers-block {
      margin-top: 12px;
    }
    .quote-detail-suppliers-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .quote-detail-suppliers-total {
      min-width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: #e8f1ff;
      color: #1c4ea3;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0 7px;
    }
    .quote-detail-supplier-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .quote-detail-summary-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 0.72rem;
      font-weight: 700;
      border: 1px solid transparent;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .quote-detail-summary-chip.is-submitted {
      color: #9a3412;
      background: #ffedd5;
      border-color: #fdba74;
    }
    .quote-status-pill.is-submitted {
      color: #9a3412;
      background: #ffedd5;
      border-color: #fdba74;
    }
    .quote-detail-summary-chip.is-accepted {
      color: var(--status-accepted-text);
      background: var(--status-accepted-bg);
      border-color: var(--status-accepted-border);
    }
    .quote-detail-summary-chip.is-declined,
    .quote-detail-summary-chip.is-rejected {
      color: var(--status-declined-text);
      background: var(--status-declined-bg);
      border-color: var(--status-declined-border);
    }
    .quote-detail-summary-chip.is-pending {
      color: var(--status-pending-text);
      background: var(--status-pending-bg);
      border-color: var(--status-pending-border);
    }
    .quote-detail-summary-chip.is-not_submitted {
      color: var(--status-not-submitted-text);
      background: var(--status-not-submitted-bg);
      border-color: var(--status-not-submitted-border);
    }
    .quote-detail-supplier-status-list {
      list-style: none;
      margin: 0;
      padding: 2px 0 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      max-height: 170px;
      overflow-y: auto;
    }
    .quote-detail-supplier-status-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #edf2fb;
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      padding: 7px 9px;
    }
    .quote-detail-supplier-status-item.is-clickable {
      cursor: pointer;
      transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
    }
    .quote-detail-supplier-status-item.is-clickable:hover {
      border-color: #bfd6ff;
      background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
      transform: translateY(-1px);
    }
    .quote-detail-supplier-status-item.is-clickable:focus-visible {
      outline: 2px solid #8db4f8;
      outline-offset: 1px;
    }
    .quote-detail-supplier-name {
      font-size: 0.83rem;
      color: #223754;
      font-weight: 600;
      word-break: break-word;
    }
    .quote-detail-supplier-empty {
      margin: 0;
      font-size: 0.84rem;
      color: #6f7f96;
    }
    .quote-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
      margin-top: 14px;
    }
    .quote-detail-item {
      border: 1px solid #e7edf8;
      border-radius: 10px;
      padding: 9px 10px;
      background: #fff;
      min-width: 0;
    }
    .quote-detail-item .label {
      display: block;
      font-size: 0.74rem;
      color: #6f7f96;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .quote-detail-item strong {
      color: #24344f;
      font-size: 0.9rem;
      word-break: break-word;
    }
    .quote-detail-block {
      margin-top: 14px;
      border: 1px solid #e7edf8;
      border-radius: 12px;
      padding: 12px;
      background: #fff;
    }
    .quote-detail-block h4 {
      margin: 0 0 8px;
      font-size: 0.92rem;
    }
    .quote-detail-note {
      margin: 0;
      color: #2d3e59;
      white-space: pre-wrap;
    }
    .quote-detail-routing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 12px;
      margin-bottom: 8px;
    }
    .quote-detail-table {
      width: 100%;
      border-collapse: collapse;
    }
    .quote-detail-table th,
    .quote-detail-table td {
      border-bottom: 1px solid var(--line);
      padding: 8px 6px;
      text-align: left;
    }
    .table-scroll {
      display: block;
      max-width: 100%;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .rfq-quotes-card {
      width: 100%;
      min-width: 0;
    }
    .table-scroll-inner {
      min-width: 0;
      width: 100%;
    }
    .rfq-quotes-table {
      width: 100%;
      min-width: 0;
    }
    .rfq-quotes-table th,
    .rfq-quotes-table td {
      white-space: normal;
      vertical-align: top;
      word-break: break-word;
    }
    @media (max-width: 980px) {
      .rfq-quotes-column-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      .rfq-quotes-column-toggle-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .quote-detail-hero {
        flex-direction: column;
      }
      .quote-detail-suppliers-wrap,
      .quote-detail-status-wrap {
        width: 100%;
      }
      .quote-detail-supplier-status-list {
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
      }
      .quote-detail-status-wrap {
        justify-items: start;
      }
      .quote-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ===== RFQ Document-Style Detail Layout ===== */
    .rfq-doc {
      margin-top: 0;
    }
    .quote-shell .rfq-doc {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 16px;
    }

    /* --- Document Header (Reference + Status + Actions) --- */
    .rfq-doc-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 2px solid #d6e2f4;
      margin-bottom: 20px;
    }
    .rfq-doc-header-left {
      min-width: 0;
      flex: 1;
    }
    .rfq-doc-ref-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .rfq-doc-ref {
      margin: 0;
      font-size: 1.2rem;
      color: #1b2b46;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .rfq-doc-ref-link {
      margin-left: 0.25em;
      color: #1c4ea3;
      text-decoration: none;
      border-bottom: 1px solid rgba(28, 78, 163, 0.35);
      transition: color 0.15s ease, border-color 0.15s ease;
    }
    .rfq-doc-ref-link:hover {
      color: #153a7b;
      border-bottom-color: rgba(21, 58, 123, 0.55);
    }
    .rfq-doc-ref-link:focus-visible {
      outline: 2px solid #7aa2e3;
      outline-offset: 2px;
      border-radius: 2px;
    }
    .rfq-doc-title {
      margin: 4px 0 0;
      font-size: 0.88rem;
      color: #5d6e88;
    }
    .rfq-doc-header-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .rfq-doc-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #4a6a9b;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .rfq-doc-action-btn:hover {
      background: #eef3fb;
      color: #1c4ea3;
    }
    .rfq-doc-action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .rfq-doc-action-btn .lucide {
      width: 14px;
      height: 14px;
      stroke-width: 2;
    }
    .rfq-doc-action-btn--danger {
      color: #b44a4a;
    }
    .rfq-doc-action-btn--danger:hover {
      background: #fdf2f2;
      color: #9b2c2c;
    }
    .rfq-doc-action-btn--primary {
      background: #1c4ea3;
      color: #fff;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 0.82rem;
    }
    .rfq-doc-action-btn--primary:hover {
      background: #163d82;
      color: #fff;
    }

    /* --- Quote Form Section (Supplier) --- */
    .rfq-doc-quote-form {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 3px solid #1c4ea3;
      background: #fff;
      border-radius: 0 0 16px 16px;
      display: grid;
      gap: 12px;
      scroll-margin-top: 24px;
    }
    .rfq-doc-quote-form-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rfq-doc-quote-form-header .lucide {
      width: 24px;
      height: 24px;
      color: #1c4ea3;
      stroke-width: 2;
      flex-shrink: 0;
    }
    .rfq-doc-quote-form-header h2 {
      margin: 0;
      font-size: 1.35rem;
      color: #1b2b46;
      letter-spacing: -0.01em;
    }

    /* --- Suppliers / Quote Status --- */
    .rfq-doc-suppliers {
      margin-bottom: 20px;
    }
    .rfq-doc-suppliers-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .rfq-doc-suppliers-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.73rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .rfq-doc-suppliers-label .lucide {
      width: 14px;
      height: 14px;
      color: #8fa3c0;
    }
    .rfq-doc-suppliers-chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }
    .rfq-doc-suppliers-chips .quote-detail-summary-chip .lucide {
      width: 11px;
      height: 11px;
      stroke-width: 2.5;
    }
    .rfq-doc-suppliers-count {
      min-width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: #e8f1ff;
      color: #1c4ea3;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0 6px;
    }
    .rfq-doc-supplier-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .rfq-doc-supplier-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid #edf2fb;
      border-radius: 0;
      background: transparent;
    }
    .rfq-doc-supplier-item.is-clickable {
      cursor: pointer;
      transition: background-color 0.15s ease;
    }
    .rfq-doc-supplier-item.is-clickable:hover {
      background: #f5f8ff;
    }
    .rfq-doc-supplier-item.is-clickable:focus-visible {
      outline: 2px solid #8db4f8;
      outline-offset: 1px;
    }
    .rfq-doc-supplier-name {
      font-size: 0.84rem;
      color: #223754;
      font-weight: 600;
      word-break: break-word;
    }
    .rfq-doc-supplier-empty {
      margin: 0;
      font-size: 0.84rem;
      color: #6f7f96;
    }

    /* --- Meta Badges Row --- */
    .rfq-doc-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }
    .rfq-doc-meta-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: #eef3fb;
      color: #2d4a78;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .rfq-doc-meta-badge .lucide {
      width: 15px;
      height: 15px;
      stroke-width: 2;
    }

    /* --- Route / Address Blocks --- */
    .rfq-doc-route {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      align-items: start;
      margin-bottom: 24px;
      padding: 20px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      border: 1px solid #dbe7fb;
      border-radius: 12px;
    }
    .rfq-doc-address {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .rfq-doc-address-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.72rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }
    .rfq-doc-address-label .lucide {
      width: 13px;
      height: 13px;
      color: var(--brand);
    }
    .rfq-doc-address-name {
      font-size: 1.0rem;
      color: #1b2b46;
      font-weight: 700;
    }
    .rfq-doc-address-detail {
      font-size: 0.84rem;
      color: #5d6e88;
      line-height: 1.4;
    }
    .rfq-doc-route-arrow {
      display: grid;
      place-items: center;
      align-self: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #e8f1ff;
      color: var(--brand);
    }
    .rfq-doc-route-arrow .lucide {
      width: 18px;
      height: 18px;
    }
    .rfq-doc-route--consignee {
      grid-template-columns: 1fr 1fr;
      padding: 16px 20px;
      background: #fff;
      border: 1px solid #edf2fb;
    }

    /* --- Key Dates Timeline --- */
    .rfq-doc-dates {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-bottom: 20px;
    }
    .rfq-doc-date-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 12px 8px;
      text-align: center;
    }
    .rfq-doc-date-item + .rfq-doc-date-item {
      border-left: 1px solid var(--line);
    }
    .rfq-doc-date-item .lucide {
      width: 18px;
      height: 18px;
      color: var(--brand);
      margin-bottom: 2px;
    }
    .rfq-doc-date-label {
      font-size: 0.72rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .rfq-doc-date-item strong {
      font-size: 0.92rem;
      color: #1b2b46;
    }

    /* --- Sections --- */
    .rfq-doc-section {
      margin-top: 24px;
    }
    .rfq-doc-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid #d6e2f4;
    }
    .rfq-doc-section-header h4 {
      margin: 0;
      font-size: 0.94rem;
      color: #1b2b46;
      font-weight: 700;
      flex: 1;
    }
    .rfq-doc-section-header > .lucide {
      width: 18px;
      height: 18px;
      color: var(--brand);
      stroke-width: 2;
      flex-shrink: 0;
    }

    /* --- Package List (Shipment Items) --- */
    .rfq-doc-pkg-list {
      margin-bottom: 16px;
    }
    .rfq-doc-pkg-head,
    .rfq-doc-pkg-row,
    .rfq-doc-pkg-summary {
      display: flex;
      align-items: baseline;
      gap: 0;
    }
    .rfq-doc-pkg-head {
      padding: 0 4px 6px;
      border-bottom: 2px solid #d6e2f4;
    }
    .rfq-doc-pkg-head .rfq-doc-pkg-col {
      font-size: 0.72rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .rfq-doc-pkg-row {
      padding: 8px 4px;
      border-bottom: 1px solid #edf2fb;
    }
    .rfq-doc-pkg-row .rfq-doc-pkg-col {
      font-size: 0.88rem;
      color: #24344f;
      font-weight: 500;
    }
    .rfq-doc-pkg-row .rfq-doc-pkg-col--pcs {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 700;
      color: #2d4a78;
    }
    .rfq-doc-pkg-row .rfq-doc-pkg-col--pcs .lucide {
      width: 14px;
      height: 14px;
      color: #8fa3c0;
      stroke-width: 2;
    }
    .rfq-doc-pkg-summary {
      padding: 8px 4px 0;
      border-top: 2px solid #d6e2f4;
    }
    .rfq-doc-pkg-summary .rfq-doc-pkg-col {
      font-size: 0.84rem;
      color: #1b2b46;
    }
    .rfq-doc-pkg-col--pcs {
      width: 72px;
      flex-shrink: 0;
    }
    .rfq-doc-pkg-col--dim {
      flex: 1;
      min-width: 0;
    }
    .rfq-doc-pkg-col--wt {
      width: 120px;
      flex-shrink: 0;
      text-align: right;
    }
    .rfq-doc-pkg-col--cbm {
      width: 120px;
      flex-shrink: 0;
      text-align: right;
    }
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-head,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-row,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-summary {
      display: grid;
      grid-template-columns: 72px minmax(220px, 1fr) 150px 130px;
      column-gap: 16px;
      align-items: baseline;
    }
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--pcs,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--dim,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--wt,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--cbm {
      width: auto;
      min-width: 0;
      flex: none;
    }
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--wt,
    .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-col--cbm {
      text-align: right;
      white-space: nowrap;
    }

    /* Supplier-variant: 6-column package rows (#, Pcs, Dim, Wt, Commodity, DG) */
    .rfq-doc-pkg-col--line {
      width: 28px;
      flex-shrink: 0;
      text-align: center;
    }
    .rfq-doc-pkg-col--extra {
      flex: 1;
      min-width: 0;
    }
    .rfq-doc-pkg-col--dg {
      width: 80px;
      flex-shrink: 0;
      text-align: center;
    }
    .rfq-doc-pkg-head--supplier,
    .rfq-doc-pkg-row--supplier {
      gap: 0;
    }
    .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--pcs,
    .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--pcs {
      width: 60px;
    }
    .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--dim,
    .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--dim {
      flex: 0 0 160px;
    }
    .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--wt,
    .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--wt {
      width: 100px;
      text-align: left;
      margin-right: 12px;
    }
    /* Info banner spacing inside doc sections */
    .rfq-doc-section .info-banner {
      margin-bottom: 12px;
    }

    /* --- Definition List (replaces bordered grid cells) --- */
    .rfq-doc-dl {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
    }
    .rfq-doc-dl--cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .rfq-doc-dl--cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .rfq-doc-dl-pair {
      padding: 10px 4px;
      border-bottom: 1px solid #edf2fb;
      min-width: 0;
    }
    .rfq-doc-dt {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.73rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
      font-weight: 500;
    }
    .rfq-doc-dt .lucide {
      width: 13px;
      height: 13px;
      color: #8fa3c0;
      flex-shrink: 0;
    }
    .rfq-doc-dd {
      margin: 0;
      font-size: 0.9rem;
      color: #24344f;
      font-weight: 600;
      word-break: break-word;
    }
    .rfq-doc-dl-pair.rfq-doc-dl-full {
      grid-column: 1 / -1;
    }

    /* --- Collapsible Sections (native <details>) --- */
    .rfq-doc-collapsible {
      border: 1px solid #edf2fb;
      border-radius: 10px;
      margin-top: 16px;
      overflow: hidden;
    }
    .rfq-doc-collapsible-toggle {
      cursor: pointer;
      padding: 12px 14px;
      list-style: none;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 0;
      margin: 0;
    }
    .rfq-doc-collapsible-toggle::-webkit-details-marker {
      display: none;
    }
    .rfq-doc-collapsible-toggle h4 {
      margin: 0;
      font-size: 0.94rem;
      color: #1b2b46;
      font-weight: 700;
      flex: 1;
    }
    .rfq-doc-collapsible-toggle > .lucide {
      width: 18px;
      height: 18px;
      color: var(--brand);
      stroke-width: 2;
      flex-shrink: 0;
    }
    .rfq-doc-chevron {
      transition: transform 0.2s ease;
    }
    .rfq-doc-chevron.lucide {
      color: #8fa3c0;
    }
    details[open] > .rfq-doc-collapsible-toggle .rfq-doc-chevron {
      transform: rotate(180deg);
    }
    details[open] > .rfq-doc-collapsible-toggle {
      border-bottom: 1px solid #edf2fb;
    }
    .rfq-doc-collapsible .rfq-doc-dl {
      padding: 4px 14px 14px;
    }
    .rfq-doc-collapsible .rfq-doc-attachments {
      padding: 4px 14px 14px;
    }

    /* --- Siblings Bar (Quote Detail) --- */
    .rfq-doc-siblings {
      margin-bottom: 20px;
    }
    .rfq-doc-siblings-head {
      margin-bottom: 10px;
    }
    .rfq-doc-siblings-list {
      display: flex;
      align-items: stretch;
      gap: 8px;
      overflow-x: auto;
      flex-wrap: wrap;
    }

    /* --- Note Text --- */
    .rfq-doc-note {
      margin: 0;
      font-size: 0.88rem;
      color: #3b4f6e;
      line-height: 1.55;
      white-space: pre-line;
    }

    /* --- Table (Routing Legs / Charge Lines) --- */
    .rfq-doc-legs-wrap {
      margin-top: 14px;
    }
    .rfq-doc-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.84rem;
    }
    .rfq-doc-table th {
      font-size: 0.72rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
      padding: 8px 10px;
      border-bottom: 2px solid #d6e2f4;
      text-align: left;
    }
    .rfq-doc-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #edf2fb;
      color: #24344f;
      font-weight: 500;
    }
    .rfq-doc-table tbody tr:last-child td {
      border-bottom: 0;
    }
    .rfq-doc-table tfoot td {
      padding: 8px 10px;
      border-top: 2px solid #d6e2f4;
      color: #1b2b46;
      font-weight: 600;
    }
    .rfq-doc-table-num {
      text-align: right;
    }

    /* --- Horizontal Rule --- */
    .rfq-doc-hr {
      border: none;
      border-top: 1px solid #dbe7fb;
      margin: 24px 0;
    }

    /* --- Footer (Selection Criteria / Charge Requirements) --- */
    .rfq-doc-footer {
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid #dbe7fb;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .rfq-doc-footer-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.73rem;
      color: #6b7a91;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .rfq-doc-footer-label .lucide {
      width: 14px;
      height: 14px;
      color: #8fa3c0;
    }
    .rfq-doc-footer-item p {
      margin: 0;
      color: #2d3e59;
      font-size: 0.88rem;
    }

    /* --- RFQ Doc Responsive --- */
    @media (max-width: 980px) {
      .rfq-doc-dl--cols-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .rfq-doc-header {
        flex-direction: column;
      }
      .rfq-doc-header-actions {
        width: 100%;
      }
      .rfq-doc-action-btn span {
        display: none;
      }
      .rfq-doc-supplier-list {
        grid-template-columns: 1fr;
      }
      .rfq-doc-dl--cols-2,
      .rfq-doc-dl--cols-3 {
        grid-template-columns: 1fr;
      }
      .rfq-doc-route {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .rfq-doc-route--consignee {
        grid-template-columns: 1fr;
      }
      .rfq-doc-address {
        align-items: center;
      }
      .rfq-doc-route-arrow {
        justify-self: center;
        transform: rotate(90deg);
      }
      .rfq-doc-dates {
        grid-template-columns: 1fr;
      }
      .rfq-doc-date-item + .rfq-doc-date-item {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 10px;
      }
      .rfq-doc-footer {
        grid-template-columns: 1fr;
      }
      /* Supplier pkg list: hide # and DG columns on mobile */
      .rfq-doc-pkg-col--line {
        display: none;
      }
      .rfq-doc-pkg-col--dg {
        display: none;
      }
      .rfq-doc-pkg-col--pcs {
        width: 56px;
      }
      .rfq-doc-pkg-col--wt {
        width: 88px;
      }
      .rfq-doc-pkg-col--cbm {
        width: 92px;
      }
      .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-head,
      .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-row,
      .rfq-doc-pkg-list--shipper-detail .rfq-doc-pkg-summary {
        grid-template-columns: 56px minmax(120px, 1fr) 96px 96px;
        column-gap: 10px;
      }
      .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--pcs,
      .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--pcs {
        width: 50px;
      }
      .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--dim,
      .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--dim {
        flex: 0 0 120px;
      }
      .rfq-doc-pkg-head--supplier .rfq-doc-pkg-col--wt,
      .rfq-doc-pkg-row--supplier .rfq-doc-pkg-col--wt {
        width: 70px;
      }
      .rfq-doc-table {
        font-size: 0.78rem;
      }
      .rfq-doc-table th,
      .rfq-doc-table td {
        padding: 6px 6px;
      }
      .rfq-doc-siblings-list {
        flex-wrap: nowrap;
      }
    }

    .icon-btn .lucide {
      width: 22px;
      height: 22px;
      stroke-width: 1.8;
    }
    .saving-card .lucide {
      width: 18px;
      height: 18px;
      stroke-width: 2.2;
    }
    .btn-icon-only {
      width: 32px;
      height: 30px;
      padding: 0;
      justify-content: center;
      margin-right: 4px;
    }
    .loading-spin {
      animation: spin 0.9s linear infinite;
    }
    .top-progress-indicator {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 75;
      pointer-events: none;
      background: rgba(24, 85, 182, 0.08);
      overflow: hidden;
    }
    .top-progress-indicator-bar {
      display: block;
      width: min(240px, 28vw);
      height: 100%;
      background: linear-gradient(90deg, #1f67d8 0%, #53a2ff 55%, #1f67d8 100%);
      box-shadow: 0 0 10px rgba(47, 121, 236, 0.35);
      transform: translateX(-120%);
      animation: top-progress-slide 1.1s ease-in-out infinite;
    }
    .saving-overlay {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(15, 23, 42, 0.35);
      display: grid;
      place-items: center;
      backdrop-filter: blur(1px);
    }
    .saving-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      min-width: 200px;
      padding: 14px 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #2b3852;
      font-weight: 600;
    }
    .rfq-success-overlay {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      background: rgba(10, 26, 51, 0.42);
      backdrop-filter: blur(1px);
      padding: 20px;
    }
    .rfq-success-card {
      position: relative;
      width: min(420px, 100%);
      background: linear-gradient(165deg, #f7fff9 0%, #ffffff 48%, #f2faff 100%);
      border: 1px solid #bfebd0;
      border-radius: 16px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
      padding: 22px 20px 18px;
      text-align: center;
      color: #123a2c;
      display: grid;
      justify-items: center;
      gap: 8px;
    }
    .rfq-success-card .lucide {
      width: 42px;
      height: 42px;
      color: #1e8f53;
      stroke-width: 2.1;
    }
    .rfq-success-card h4 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
      color: #14543b;
    }
    .rfq-success-card p {
      margin: 0;
      font-size: 0.95rem;
      color: #235c49;
    }
    .rfq-success-close {
      position: absolute;
      top: 8px;
      right: 8px;
      border: 1px solid #c7ddcf;
      background: #ffffff;
      color: #4a6d5a;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .rfq-success-close:hover {
      background: #ecf9f0;
      border-color: #9dd6b3;
      color: #14543b;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes top-progress-slide {
      0% { transform: translateX(-120%); }
      55% { transform: translateX(48vw); }
      100% { transform: translateX(120vw); }
    }
    @media (prefers-reduced-motion: reduce) {
      .top-progress-indicator-bar {
        width: 100%;
        animation: none;
        transform: translateX(0);
      }
    }

    .empty { color: var(--muted); font-size: 0.9rem; }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(12, 18, 32, 0.34);
      display: grid;
      place-items: center;
      padding: 16px;
      z-index: 1200;
    }
    .modal-backdrop-foreground {
      z-index: 1305;
    }
    .modal {
      width: min(640px, 100%);
      max-height: calc(100vh - 32px);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 16px;
      display: grid;
      gap: 12px;
      position: relative;
      overflow-y: auto;
    }
    .modal-close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border: 1px solid #d7e1f1;
      border-radius: 8px;
      background: #ffffff;
      color: #4b5f7e;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }
    .modal-close-button:hover {
      background: #eef4ff;
      border-color: #b8cdf1;
      color: #1c4f9c;
    }
    .modal-close-button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .modal-close-button .lucide {
      width: 16px;
      height: 16px;
    }
    .modal-close-button[data-spx-tooltip]::before,
    .modal-close-button[data-spx-tooltip]::after {
      left: auto;
      right: 0;
      z-index: 1308;
    }
    .modal-close-button[data-spx-tooltip]::before {
      top: calc(100% + 8px);
      bottom: auto;
      transform: translate(0, -4px);
      text-align: left;
    }
    .modal-close-button[data-spx-tooltip]::after {
      top: calc(100% + 3px);
      bottom: auto;
      transform: translate(0, -4px);
      border-top-color: transparent;
      border-bottom-color: #132238;
      right: 10px;
    }
    .modal-close-button[data-spx-tooltip]:hover::before,
    .modal-close-button[data-spx-tooltip]:hover::after,
    .modal-close-button[data-spx-tooltip]:focus-visible::before,
    .modal-close-button[data-spx-tooltip]:focus-visible::after {
      transform: translate(0, 0);
    }
    .settings-modal {
      width: min(1020px, 100%);
      max-height: min(92vh, 980px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    .settings-layout {
      display: grid;
      grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
      gap: 12px;
      min-height: 0;
      overflow: hidden;
    }
    .settings-sidebar {
      border: 1px solid #dfe6f3;
      border-radius: 11px;
      background: #fbfcff;
      padding: 8px;
      display: grid;
      align-content: start;
      gap: 6px;
      min-height: 0;
      overflow-y: auto;
    }
    .settings-sidebar-btn {
      border: 1px solid transparent;
      background: transparent;
      border-radius: 9px;
      color: #365076;
      font-weight: 600;
      font-size: 0.88rem;
      text-align: left;
      padding: 9px 10px;
      cursor: pointer;
    }
    .settings-sidebar-btn:hover {
      background: #f2f6ff;
      border-color: #d5e3f8;
    }
    .settings-sidebar-btn.active {
      background: #e9f1ff;
      color: #1f3f75;
      border-color: #bdd2f4;
    }
    .settings-content {
      border: 1px solid #dfe6f3;
      border-radius: 11px;
      background: #fff;
      padding: 14px;
      min-height: 0;
      overflow-y: auto;
      display: grid;
      align-content: start;
      gap: 10px;
    }
    .settings-placeholder {
      display: grid;
      gap: 8px;
    }
    .settings-security-section {
      display: grid;
      gap: 10px;
    }
    .settings-security-section + .settings-security-section {
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }
    .settings-two-factor {
      display: grid;
      gap: 12px;
    }
    .settings-two-factor-methods {
      margin: 0;
      padding: 10px;
      border: 1px solid #dbe4f2;
      border-radius: 10px;
      background: #f9fbff;
      display: grid;
      gap: 8px;
    }
    .settings-two-factor-methods legend {
      padding: 0 4px;
      color: #4d6485;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .settings-two-factor-method-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid #dbe4f2;
      border-radius: 9px;
      background: #fff;
      color: #2d466a;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    .settings-two-factor-method-option input[type="radio"] {
      margin: 0;
      accent-color: #1d6de8;
    }
    .settings-two-factor-method-option.active {
      border-color: #9cbcf0;
      background: #edf4ff;
      color: #214e95;
    }
    .settings-two-factor-status {
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #f8fbff;
      padding: 10px;
      display: grid;
      gap: 4px;
    }
    .settings-two-factor-status p {
      margin: 0;
      font-size: 0.86rem;
      color: #304c70;
      line-height: 1.4;
    }
    .settings-two-factor-otp-setup {
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #fdfefe;
      padding: 10px;
      display: grid;
      gap: 10px;
    }
    .settings-two-factor-otp-prepared {
      border: 1px dashed #cadbf5;
      border-radius: 10px;
      background: #f8fbff;
      padding: 10px;
      display: grid;
      gap: 10px;
    }
    .settings-two-factor-qr-wrap {
      justify-self: start;
      border: 1px solid #d1def3;
      border-radius: 10px;
      background: #fff;
      padding: 8px;
    }
    .settings-two-factor-qr-image {
      display: block;
      width: 180px;
      height: 180px;
      object-fit: contain;
    }
    .settings-billing-section {
      display: grid;
      gap: 12px;
    }
    .settings-billing-group {
      display: grid;
      gap: 10px;
    }
    .settings-billing-group + .settings-billing-group {
      padding-top: 10px;
      border-top: 1px solid #e6edf8;
    }
    .settings-billing-group-title {
      margin: 0;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #4b668b;
    }
    .settings-billing-actions {
      justify-content: flex-end;
    }
    .settings-modal-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .settings-modal-title i {
      width: 17px;
      height: 17px;
      color: #35567f;
      flex: 0 0 auto;
    }
    .settings-info-box {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin: 0;
      padding: 9px 11px;
      border: 1px solid #d8e1ef;
      border-radius: 8px;
      background: #f8fbff;
      color: #314d70;
      font-size: 0.86rem;
      line-height: 1.4;
    }
    .settings-info-box i {
      width: 16px;
      height: 16px;
      color: #55769f;
      flex: 0 0 auto;
      margin-top: 1px;
    }
    .settings-info-box-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .settings-info-box-title {
      margin: 0;
      font-weight: 600;
      color: #284261;
      line-height: 1.35;
    }
    .settings-info-box-text {
      margin: 0;
      color: #4f6480;
      line-height: 1.4;
    }
    .settings-about {
      display: grid;
      gap: 18px;
    }
    .settings-about-brand {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .settings-about-logo {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
    }
    .settings-about-tagline {
      margin: 0;
      color: #4f6480;
      font-size: 0.84rem;
      line-height: 1.45;
      padding-top: 2px;
    }
    .settings-about-section {
      display: grid;
      gap: 4px;
      padding-top: 14px;
      border-top: 1px solid #e8eff8;
    }
    .settings-about-section-title {
      margin: 0;
      font-weight: 600;
      color: #284261;
      font-size: 0.84rem;
    }
    .settings-about-detail {
      margin: 0;
      color: #4f6480;
      font-size: 0.82rem;
      line-height: 1.4;
    }
    .settings-about-detail a {
      color: #1855b6;
      text-decoration: none;
    }
    .settings-about-detail a:hover {
      text-decoration: underline;
    }
    .settings-about-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .settings-about-label {
      color: #5b6f8a;
      font-size: 0.82rem;
      min-width: 65px;
    }
    .settings-about-value {
      font-weight: 600;
      color: #284261;
      font-size: 0.84rem;
      font-variant-numeric: tabular-nums;
    }
    .settings-about-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }
    .settings-about-links a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid #d1deef;
      border-radius: 8px;
      color: #1855b6;
      font-size: 0.82rem;
      font-weight: 500;
      text-decoration: none;
      background: #f8faff;
      transition: background-color 0.14s ease, border-color 0.14s ease;
    }
    .settings-about-links a:hover {
      background: #eef4ff;
      border-color: #b8cdf1;
    }
    .settings-about-links a .lucide {
      width: 15px;
      height: 15px;
    }
    .settings-inline-note {
      margin: 0;
      color: #5b6f8a;
      font-size: 0.84rem;
      line-height: 1.35;
    }
    .modal h3 {
      margin: 0;
      font-size: 1.02rem;
    }
    .feedback-modal-backdrop {
      z-index: 1210;
    }
    .feedback-modal {
      width: min(760px, 100%);
      max-height: min(90vh, 960px);
      overflow-y: auto;
    }
    .support-contact-modal-backdrop {
      z-index: 1215;
    }
    .support-contact-modal-backdrop[hidden] {
      display: none;
    }
    .support-contact-modal {
      width: min(720px, 100%);
      max-height: min(90vh, 940px);
      overflow-y: auto;
    }
    .support-contact-form {
      display: grid;
      gap: 10px;
    }
    .support-contact-captcha-field {
      min-height: auto;
    }
    .support-contact-captcha-field > [data-support-contact-turnstile] {
      display: block;
      overflow-x: auto;
    }
    .support-contact-captcha-field > [data-support-contact-turnstile] > iframe {
      max-width: 100%;
    }
    .support-contact-global-message {
      margin: 0;
    }
    body.support-contact-modal-open {
      overflow: hidden;
    }
    .feedback-context-list {
      margin: 0;
      padding: 10px;
      list-style: none;
      border: 1px solid #d9e5f8;
      border-radius: 10px;
      background: #f8fbff;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px 12px;
    }
    .feedback-context-list li {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .feedback-context-list li.full-width {
      grid-column: 1 / -1;
    }
    .feedback-context-list strong {
      color: #304461;
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .feedback-context-list span {
      color: #24364f;
      font-size: 0.83rem;
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .feedback-context-details > summary {
      cursor: pointer;
      font-weight: 600;
      color: #1f385a;
      margin-bottom: 8px;
      list-style: none;
    }
    .feedback-context-details > summary::-webkit-details-marker {
      display: none;
    }
    .feedback-context-details > summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 6px;
      color: #3d5f96;
      transition: transform 0.15s ease;
    }
    .feedback-context-details[open] > summary::before {
      transform: rotate(90deg);
    }
    .feedback-screenshot-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .feedback-canvas-wrap {
      border: 1px solid #d1deef;
      border-radius: 10px;
      background: #ffffff;
      padding: 8px;
      overflow: auto;
    }
    .feedback-submit-success {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .feedback-submit-success .lucide {
      width: 16px;
      height: 16px;
      stroke-width: 2;
      flex-shrink: 0;
    }
    .feedback-workflow-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 700;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .feedback-workflow-pill.is-open {
      background: #f5f2ec;
      color: #9a5b14;
      border-color: #efdbc3;
    }
    .feedback-workflow-pill.is-implemented {
      background: #edf4ff;
      color: #1e55a5;
      border-color: #cfe1ff;
    }
    .feedback-workflow-pill.is-qa-review {
      background: #f3efff;
      color: #5d3fa5;
      border-color: #ddd2ff;
    }
    .feedback-workflow-pill.is-approved {
      background: #ebf8f0;
      color: #1d6a40;
      border-color: #c5e8d4;
    }
    .feedback-workflow-modal {
      width: min(900px, 100%);
    }
    .feedback-workflow-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 10px;
      border: 1px solid #d9e5f8;
      border-radius: 10px;
      background: #f8fbff;
    }
    .feedback-workflow-meta div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .feedback-workflow-meta span {
      font-size: 0.75rem;
      text-transform: uppercase;
      color: #5d7090;
      letter-spacing: 0.02em;
    }
    .feedback-workflow-meta strong {
      font-size: 0.84rem;
      color: #1f3554;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .feedback-workflow-message {
      margin: 0;
      padding: 10px;
      border: 1px solid #d9e5f8;
      border-radius: 10px;
      background: #f8fbff;
      color: #1f3554;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .feedback-workflow-screenshot {
      display: block;
      width: 100%;
      max-width: 100%;
      max-height: 430px;
      object-fit: contain;
      border-radius: 10px;
      border: 1px solid #d1deef;
      background: #ffffff;
    }
    .feedback-workflow-screenshot-button {
      display: grid;
      gap: 8px;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: zoom-in;
    }
    .feedback-workflow-screenshot-button:focus-visible {
      outline: 2px solid #3d5f96;
      outline-offset: 4px;
      border-radius: 12px;
    }
    .feedback-workflow-screenshot-hint {
      color: #3d5f96;
      font-size: 0.82rem;
      font-weight: 600;
    }
    .feedback-screenshot-preview-backdrop {
      z-index: 1220;
      background: rgba(12, 18, 32, 0.72);
    }
    .feedback-screenshot-preview-modal {
      width: min(1460px, 100%);
      max-height: min(98vh, 1600px);
      padding: 14px;
      gap: 14px;
    }
    .feedback-screenshot-preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .feedback-screenshot-preview-header h3 {
      margin: 0;
    }
    .feedback-screenshot-preview-frame {
      display: grid;
      place-items: center;
      overflow: auto;
      border: 1px solid #d1deef;
      border-radius: 12px;
      background: #f8fbff;
      padding: 12px;
    }
    .feedback-screenshot-preview-image {
      display: block;
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: min(90vh, 1400px);
      margin: 0 auto;
      border-radius: 10px;
      background: #ffffff;
      object-fit: contain;
    }
    .feedback-workflow-events {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .feedback-workflow-events li {
      border: 1px solid #d9e5f8;
      border-radius: 10px;
      background: #f8fbff;
      padding: 10px;
      display: grid;
      gap: 4px;
    }
    .feedback-workflow-events li p {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #29456a;
      font-size: 0.83rem;
    }
    .feedback-workflow-events li p:last-child {
      display: block;
      color: #365075;
      white-space: pre-wrap;
    }
    .feedback-workflow-events .lucide {
      width: 14px;
      height: 14px;
      color: #6b80a5;
    }
    .feedback-annotation-canvas {
      width: 100%;
      max-height: 430px;
      display: block;
      border-radius: 8px;
      background: #ffffff;
      cursor: crosshair;
      touch-action: none;
    }
    .accept-quote-modal {
      width: min(520px, 100%);
      gap: 10px;
    }
    .accept-quote-copy {
      margin: 0;
      line-height: 1.35;
      color: #4c607c;
      font-size: 0.92rem;
    }
    .accept-quote-meta {
      display: grid;
      gap: 6px;
      padding: 10px 12px;
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #f7faff;
    }
    .accept-quote-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 0.88rem;
      color: #5f7190;
    }
    .accept-quote-meta-row strong {
      color: #12263f;
      font-size: 0.9rem;
    }
    .quote-history-modal {
      width: min(820px, 100%);
      max-height: 86vh;
      overflow: auto;
      gap: 10px;
    }
    .quote-history-list {
      display: grid;
      gap: 10px;
    }
    .quote-history-item {
      border: 1px solid #dce7f8;
      border-radius: 11px;
      background: #f9fbff;
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }
    .quote-history-item.is-current {
      border-color: #b6d0ff;
      background: #eef5ff;
      box-shadow: 0 0 0 2px rgba(29, 109, 232, 0.1);
    }
    .quote-history-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .quote-history-item-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .quote-history-item-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px 10px;
      font-size: 0.85rem;
      color: #2d405f;
    }
    .quote-history-item-note {
      margin: 0;
      color: #2d405f;
      font-size: 0.84rem;
      white-space: pre-wrap;
    }
    .quote-history-changes {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .quote-history-changes-label {
      font-size: 0.78rem;
      color: #5f7190;
      font-weight: 600;
    }
    .quote-history-change-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid #cfe0ff;
      border-radius: 999px;
      background: #edf4ff;
      color: #184f9f;
      padding: 2px 8px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .rfq-ranking-modal {
      width: min(1180px, 100%);
      max-height: 88vh;
      overflow: auto;
      gap: 10px;
    }
    .rfq-ranking-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .rfq-ranking-head h3 {
      margin: 0;
    }
    .rfq-ranking-info-button {
      margin: 0;
      flex-shrink: 0;
    }
    .rfq-ranking-info-button[data-spx-tooltip]::before,
    .rfq-ranking-info-button[data-spx-tooltip]::after {
      left: auto;
      right: 0;
      z-index: 1350;
    }
    .rfq-ranking-info-button[data-spx-tooltip]::before {
      top: calc(100% + 10px);
      bottom: auto;
      transform: translate(0, -4px);
      text-align: left;
      min-width: 180px;
      max-width: 260px;
    }
    .rfq-ranking-info-button[data-spx-tooltip]::after {
      top: calc(100% + 1px);
      bottom: auto;
      right: 12px;
      transform: translate(0, -4px);
      border: 5px solid transparent;
      border-bottom-color: #132238;
      border-top-color: transparent;
    }
    .rfq-ranking-info-button[data-spx-tooltip]:hover::before,
    .rfq-ranking-info-button[data-spx-tooltip]:hover::after,
    .rfq-ranking-info-button[data-spx-tooltip]:focus-visible::before,
    .rfq-ranking-info-button[data-spx-tooltip]:focus-visible::after {
      transform: translate(0, 0);
    }
    .rfq-ranking-algorithm-intro,
    .rfq-ranking-algorithm-meta,
    .rfq-ranking-algorithm-note {
      margin: 0;
      font-size: 0.84rem;
      color: #304a70;
      line-height: 1.35;
    }
    .rfq-ranking-weight-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .rfq-ranking-summary {
      margin: 0;
      font-size: 0.86rem;
      color: #2f486d;
    }
    .rfq-ranking-info-modal {
      width: min(640px, 100%);
      gap: 9px;
    }
    .rfq-ranking-info-grid {
      display: grid;
      gap: 10px;
    }
    .rfq-ranking-info-section {
      border: 1px solid #dce7f8;
      border-radius: 10px;
      background: #f8fbff;
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }
    .rfq-ranking-info-section h4 {
      margin: 0;
      color: #1e3f72;
      font-size: 0.86rem;
      font-weight: 700;
    }
    .rfq-ranking-info-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      color: #304a70;
      font-size: 0.84rem;
      line-height: 1.35;
    }
    .rfq-ranking-table th,
    .rfq-ranking-table td {
      white-space: normal;
      vertical-align: top;
      font-size: 0.82rem;
      line-height: 1.3;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .rfq-ranking-table-wrap {
      width: 100%;
      overflow-x: hidden;
    }
    .rfq-ranking-table {
      width: 100%;
      table-layout: fixed;
    }
    .rfq-ranking-table .actions-cell {
      white-space: nowrap;
      text-align: center;
      width: 108px;
    }
    .rfq-ranking-breakdown {
      min-width: 190px;
      color: #304a70;
    }
    .rfq-ranking-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* --- Rank Badges (Gold / Silver / Bronze) --- */
    .rfq-rank-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 28px;
      height: 28px;
      padding: 0 6px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 800;
      color: #4a5568;
    }
    .rfq-rank-badge .lucide {
      width: 15px;
      height: 15px;
      stroke-width: 2.2;
      flex-shrink: 0;
    }
    .rfq-rank-badge.rank-gold {
      background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
      color: #78350f;
      border: 1px solid #f59e0b;
    }
    .rfq-rank-badge.rank-gold .lucide {
      color: #b45309;
    }
    .rfq-rank-badge.rank-silver {
      background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%);
      color: #1f2937;
      border: 1px solid #9ca3af;
    }
    .rfq-rank-badge.rank-silver .lucide {
      color: #4b5563;
    }
    .rfq-rank-badge.rank-bronze {
      background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
      color: #7c2d12;
      border: 1px solid #ea580c;
    }
    .rfq-rank-badge.rank-bronze .lucide {
      color: #c2410c;
    }
    .rfq-rank-badge--sm {
      min-width: 22px;
      height: 22px;
      padding: 0 5px;
      font-size: 0.72rem;
      border-radius: 6px;
    }
    .rfq-rank-badge--sm .lucide {
      width: 12px;
      height: 12px;
    }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    /* ── RFQ Wizard ──────────────────────────── */
    .rfq-wizard-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 4px;
    }
    .rfq-wizard-header h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
      color: #184f9f;
    }
    .rfq-wizard-header .rfq-wizard-edit-badge {
      font-size: 0.74rem;
      font-weight: 600;
      color: #6a82a0;
      background: #edf2f9;
      border-radius: 4px;
      padding: 2px 8px;
    }
    .rfq-wizard-nav {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding: 8px 0 12px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .rfq-wizard-nav::-webkit-scrollbar { height: 4px; }
    .rfq-wizard-nav::-webkit-scrollbar-thumb { background: #c0d0ea; border-radius: 2px; }

    .rfq-wizard-step-card {
      appearance: none;
      border: 1.5px solid #d3e0f4;
      border-radius: 8px;
      background: #f9fbff;
      padding: 10px 12px;
      min-width: 130px;
      max-width: 180px;
      flex: 1 0 auto;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      scroll-snap-align: start;
      text-align: left;
      font: inherit;
      color: inherit;
    }
    .rfq-wizard-step-card:hover {
      border-color: #a0bce0;
      box-shadow: 0 1px 4px rgba(29,109,232,0.08);
    }
    .rfq-wizard-step-card.is-active {
      border-color: #3b7ddd;
      background: #edf4ff;
      box-shadow: 0 0 0 2px rgba(59,125,221,0.15);
    }
    .rfq-wizard-step-card.is-valid:not(.is-active) {
      border-color: #6ac48a;
      background: #f4fdf7;
    }
    .rfq-wizard-step-card.is-error {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    .rfq-wizard-step-card.is-extracted:not(.is-active):not(.is-error) {
      border-color: #d9bc43;
      background: #fffdf4;
    }
    .rfq-wizard-step-card.is-skipped:not(.is-active) {
      border-color: #d3e0f4;
      background: #f4f7fb;
      opacity: 0.7;
    }

    .rfq-wizard-step-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #edf2f9;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rfq-wizard-step-card.is-active .rfq-wizard-step-icon {
      background: #3b7ddd;
      color: #fff;
    }
    .rfq-wizard-step-card.is-valid:not(.is-active) .rfq-wizard-step-icon {
      background: #3ab26a;
      color: #fff;
    }
    .rfq-wizard-step-card.is-error .rfq-wizard-step-icon {
      background: #e35d6a;
      color: #fff;
    }
    .rfq-wizard-step-icon svg,
    .rfq-wizard-step-icon i { width: 14px; height: 14px; }

    .rfq-wizard-step-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: #2c4a6e;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rfq-wizard-step-card.is-active .rfq-wizard-step-label { color: #1a4f9c; }
    .rfq-wizard-step-card.is-valid:not(.is-active) .rfq-wizard-step-label { color: #2a7a4c; }
    .rfq-wizard-step-card.is-error .rfq-wizard-step-label { color: #b42318; }

    .rfq-wizard-step-preview {
      font-size: 0.7rem;
      color: #6a82a0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 1em;
    }

    .rfq-wizard-step-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }
    .rfq-wizard-step-badge svg,
    .rfq-wizard-step-badge i { width: 12px; height: 12px; }
    .rfq-wizard-step-badge.is-valid { background: #3ab26a; color: #fff; }
    .rfq-wizard-step-badge.is-error { background: #e35d6a; color: #fff; }
    .rfq-wizard-step-badge.is-extracted { background: #d9bc43; color: #fff; }
    .rfq-wizard-step-badge.is-skipped { background: #9fb0c9; color: #fff; }
    .rfq-wizard-step-badge.is-empty { display: none; }

    .rfq-wizard-step-content {
      min-height: 200px;
    }

    .rfq-wizard-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 0 0;
      border-top: 1px solid #e4ecf5;
      margin-top: 14px;
    }
    .rfq-wizard-footer .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.86rem;
    }
    .rfq-wizard-footer .btn-primary svg,
    .rfq-wizard-footer .btn-primary i {
      width: 15px;
      height: 15px;
    }
    .rfq-wizard-footer .btn-sm svg,
    .rfq-wizard-footer .btn-sm i {
      width: 14px;
      height: 14px;
    }
    .rfq-wizard-footer-right {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-left: auto;
    }

    /* ── Wizard section toggles ──────────────── */
    .rfq-wizard-section-toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      padding: 10px 0 2px;
      flex-wrap: wrap;
    }
    .rfq-wizard-section-toggle input[type="checkbox"] {
      margin-top: 3px;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      accent-color: var(--brand);
    }
    .rfq-wizard-section-toggle-label {
      font-size: 0.92rem;
      font-weight: 700;
      color: #2c4a6e;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .rfq-wizard-section-toggle-label i,
    .rfq-wizard-section-toggle-label svg {
      width: 16px;
      height: 16px;
      color: #6a82a0;
    }
    .rfq-wizard-section-toggle-hint {
      width: 100%;
      padding-left: 26px;
      font-size: 0.78rem;
      color: #6a82a0;
      line-height: 1.35;
    }

    /* ── Wizard skip gates (legacy) ──────────── */
    .rfq-wizard-gate {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 32px 20px;
      text-align: center;
      background: #f9fbff;
      border: 1.5px dashed #c0d0ea;
      border-radius: 10px;
      margin: 8px 0;
    }
    .rfq-wizard-gate > i,
    .rfq-wizard-gate > svg {
      width: 36px;
      height: 36px;
      color: #6a82a0;
    }
    .rfq-wizard-gate-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: #2c4a6e;
      margin: 0;
    }
    .rfq-wizard-gate-text {
      font-size: 0.82rem;
      color: #6a82a0;
      margin: 0;
      max-width: 420px;
    }
    .rfq-wizard-gate-actions {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }

    /* ── Wizard review step ──────────────────── */
    .rfq-wizard-review {
      display: grid;
      gap: 14px;
    }
    .rfq-wizard-review-block {
      border: 1px solid #e4ecf5;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }
    .rfq-wizard-review-block-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #f4f8ff;
      border-bottom: 1px solid #e4ecf5;
    }
    .rfq-wizard-review-block-header h5 {
      margin: 0;
      font-size: 0.84rem;
      font-weight: 700;
      color: #2c4a6e;
    }
    .rfq-wizard-review-block-body {
      padding: 12px;
      font-size: 0.82rem;
      color: #3a4f6a;
      display: grid;
      gap: 6px;
    }
    .rfq-wizard-review-row {
      display: flex;
      gap: 8px;
    }
    .rfq-wizard-review-label {
      font-weight: 600;
      color: #6a82a0;
      min-width: 120px;
      flex-shrink: 0;
    }
    .rfq-wizard-review-value {
      color: #2c4a6e;
      word-break: break-word;
    }
    .rfq-wizard-review-docs {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .rfq-wizard-review-doc-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .rfq-wizard-review-doc-link i,
    .rfq-wizard-review-doc-link svg {
      width: 14px;
      height: 14px;
      color: #6a82a0;
      flex-shrink: 0;
    }
    .rfq-wizard-review-doc-link a {
      color: var(--brand);
      text-decoration: none;
      font-weight: 500;
    }
    .rfq-wizard-review-doc-link a:hover {
      text-decoration: underline;
    }
    .rfq-wizard-review-empty {
      color: #9fb0c9;
      font-style: italic;
    }
    .rfq-wizard-review-route {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .rfq-wizard-review-route-arrow {
      color: #6a82a0;
      padding-top: 8px;
      flex-shrink: 0;
    }
    .rfq-wizard-review-address {
      flex: 1;
      display: grid;
      gap: 2px;
      font-size: 0.82rem;
    }
    .rfq-wizard-review-address strong {
      color: #2c4a6e;
      font-size: 0.84rem;
    }

    @media (max-width: 700px) {
      .rfq-wizard-nav {
        gap: 4px;
        padding: 6px 0 10px;
      }
      .rfq-wizard-step-card {
        min-width: 110px;
        padding: 8px 10px;
      }
      .rfq-wizard-step-preview { display: none; }
      .rfq-wizard-gate { padding: 20px 12px; }
      .rfq-wizard-review-row { flex-direction: column; gap: 2px; }
      .rfq-wizard-review-label { min-width: unset; }
    }

    .rfq-form-sections {
      display: grid;
      gap: 14px;
    }
    .rfq-form-alerts {
      display: grid;
      gap: 8px;
      margin: 0 0 12px;
    }
    .rfq-wizard-header + .rfq-form-alerts {
      margin-top: 10px;
    }
    .rfq-form-alert {
      margin: 0;
    }
    .rfq-form-alerts-bottom {
      width: 100%;
      margin: 12px 0 10px;
    }
    .rfq-packaging-extract-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid #d8e5fa;
      background: linear-gradient(135deg, #f6f9ff 0%, #f1f9ff 100%);
      margin: 0 0 12px;
    }
    .rfq-packaging-extract-copy {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .rfq-packaging-extract-title {
      margin: 0;
      color: #184f9f;
      font-weight: 700;
      font-size: 0.98rem;
    }
    .rfq-packaging-extract-text {
      margin: 0;
      color: #41536f;
      font-size: 0.84rem;
      line-height: 1.35;
    }
    .rfq-packaging-extract-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .rfq-packaging-extract-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #1c63ca;
      border-radius: 10px;
      background: #1f67d8;
      color: #ffffff;
      min-height: 38px;
      padding: 0 14px;
      font-size: 0.86rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(31, 103, 216, 0.22);
    }
    .rfq-packaging-extract-button:hover {
      background: #1759be;
      border-color: #1759be;
    }
    .rfq-packaging-extract-button:disabled {
      cursor: not-allowed;
      opacity: 0.75;
      box-shadow: none;
    }
    .rfq-packaging-auto-filled {
      border-color: #d9bc43 !important;
      background: #fff8d5 !important;
    }
    .rfq-packaging-field-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      border: 1px solid #ead27b;
      background: #fff4c3;
      color: #6e5600;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 1px 8px;
      line-height: 1.4;
    }
    .rfq-packaging-suggestion {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      border: 1px solid #e7ce74;
      border-radius: 8px;
      background: #fff4c4;
      padding: 7px 9px;
    }
    .rfq-packaging-suggestion span {
      color: #6d5200;
      font-size: 0.79rem;
      line-height: 1.3;
    }
    .rfq-packaging-review-notice {
      margin: 0 0 12px;
      border: 1px solid #e7ce74;
      border-radius: 8px;
      background: #fff4c4;
      color: #6d5200;
      padding: 10px 11px;
      font-size: 0.82rem;
      line-height: 1.35;
    }
    .rfq-packaging-consent-modal {
      width: min(620px, 100%);
      gap: 10px;
    }
    .legal-consent-gate-backdrop {
      z-index: 1420;
    }
    .legal-consent-gate-modal {
      width: min(640px, 100%);
      gap: 10px;
    }
    .legal-consent-gate-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
    }
    .legal-consent-gate-list li {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: #24364f;
      font-size: 0.9rem;
      line-height: 1.35;
    }
    .legal-consent-gate-list a {
      color: #1a58bc;
      font-weight: 600;
      text-decoration: underline;
    }
    .legal-consent-gate-version {
      border: 1px solid #d3deee;
      border-radius: 999px;
      background: #eff4fb;
      color: #3f5578;
      font-size: 0.74rem;
      font-weight: 600;
      padding: 2px 8px;
      letter-spacing: 0.01em;
    }
    .rfq-packaging-ai-overlay {
      position: fixed;
      inset: 0;
      z-index: 1150;
      display: grid;
      place-items: center;
      background: rgba(9, 18, 36, 0.72);
      backdrop-filter: blur(2px);
      padding: 16px;
    }
    .rfq-packaging-ai-overlay-card {
      width: min(520px, 100%);
      border: 1px solid #2f4f84;
      border-radius: 16px;
      background: radial-gradient(circle at top, #132949 0%, #0c1930 70%);
      box-shadow: 0 18px 46px rgba(3, 10, 22, 0.45);
      color: #d8e8ff;
      padding: 20px 18px;
      display: grid;
      justify-items: center;
      gap: 9px;
      text-align: center;
    }
    .rfq-packaging-ai-overlay-card h4 {
      margin: 0;
      color: #f5f9ff;
      font-size: 1.04rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .rfq-packaging-ai-overlay-card p {
      margin: 0;
      color: #bfd4f7;
      font-size: 0.88rem;
      min-height: 1.4em;
    }
    .rfq-packaging-ai-orbit {
      position: relative;
      width: 66px;
      height: 66px;
      margin-bottom: 2px;
    }
    .rfq-packaging-ai-orbit span {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(112, 166, 241, 0.62);
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(116, 178, 255, 0.2);
      animation:
        rfq-packaging-ai-orbit 2s linear infinite,
        rfq-packaging-ai-ring-breathe 1.8s ease-in-out infinite;
    }
    .rfq-packaging-ai-orbit span:nth-child(2) {
      inset: 8px;
      animation-duration: 1.5s, 1.5s;
      animation-direction: reverse, normal;
    }
    .rfq-packaging-ai-orbit span:nth-child(3) {
      inset: 17px;
      border-color: rgba(170, 209, 255, 0.78);
      animation-duration: 1.15s, 1.25s;
    }
    .rfq-packaging-ai-grid {
      width: min(320px, 100%);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 4px;
    }
    .rfq-packaging-ai-grid span {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(90, 145, 236, 0.18) 0%, rgba(144, 196, 255, 0.95) 50%, rgba(90, 145, 236, 0.18) 100%);
      background-size: 180% 100%;
      animation: rfq-packaging-ai-scan 1.4s ease-in-out infinite;
    }
    .rfq-packaging-ai-grid span:nth-child(2) { animation-delay: 0.16s; }
    .rfq-packaging-ai-grid span:nth-child(3) { animation-delay: 0.3s; }
    .rfq-packaging-ai-grid span:nth-child(4) { animation-delay: 0.44s; }
    @keyframes rfq-packaging-ai-orbit {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes rfq-packaging-ai-ring-breathe {
      0%, 100% {
        opacity: 0.42;
        transform: scale(0.985);
        box-shadow: 0 0 0 0 rgba(116, 178, 255, 0.15);
      }
      50% {
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 0 5px rgba(116, 178, 255, 0.08);
      }
    }
    @keyframes rfq-packaging-ai-scan {
      0%, 100% { background-position: 100% 50%; opacity: 0.38; }
      50% { background-position: 0% 50%; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rfq-packaging-ai-orbit span,
      .rfq-packaging-ai-grid span {
        animation: none;
      }
    }
    .rfq-form-section {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fbfdff;
      display: grid;
      gap: 10px;
    }
    .rfq-shipment-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .rfq-shipment-summary > div {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid #d7e4fb;
      border-radius: 10px;
      background: #ffffff;
    }
    .rfq-shipment-summary span {
      font-size: 0.76rem;
      color: #61708a;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .rfq-shipment-summary strong {
      color: #163153;
      font-size: 0.96rem;
    }
    .rfq-shipment-items {
      display: grid;
      gap: 10px;
    }
    .rfq-shipment-item-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid #d7e4fb;
      border-radius: 12px;
      background: #ffffff;
    }
    .rfq-shipment-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .rfq-section-title {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      color: #184f9f;
    }
    .rfq-route-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }
    .rfq-route-card {
      min-width: 0;
      display: grid;
      gap: 9px;
      padding: 12px;
      border: 1px solid #d7e4fb;
      border-radius: 12px;
      background: #ffffff;
    }
    .rfq-route-card-title {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 700;
      color: #184f9f;
    }
    .rfq-route-zip-city-row {
      display: grid;
      grid-template-columns: minmax(90px, 0.75fr) minmax(0, 1.6fr);
      gap: 8px;
      align-items: start;
    }
    .toggle-row {
      grid-column: 1 / -1;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .toggle-row button {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 11px;
      background: #fff;
      cursor: pointer;
      font-size: 0.82rem;
    }
    .toggle-row button.active {
      border-color: #cfe0ff;
      color: #1855b6;
      background: #f2f7ff;
      font-weight: 600;
    }
    .modal-field {
      display: grid;
      gap: 5px;
      font-size: 0.84rem;
      color: var(--muted);
    }
    .modal-grid > .modal-field:not(.full-row),
    .rfq-route-zip-city-row > .modal-field,
    .billing-address-row > .modal-field {
      align-content: start;
      min-height: 78px;
    }
    .modal-field.full-row {
      grid-column: 1 / -1;
    }
    .rfq-commercial-grid > .modal-field:not(.full-row) {
      min-height: auto;
    }
    .modal-field input,
    .modal-field select,
    .modal-field textarea {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      font-size: 0.92rem;
      color: var(--text);
      background: #fff;
    }
    .modal-field input:disabled,
    .modal-field select:disabled,
    .modal-field textarea:disabled {
      border-color: #d4dde9;
      background: #f4f6fa;
      color: #7b879b;
      -webkit-text-fill-color: #7b879b;
      cursor: not-allowed;
    }
    .modal-field input.field-error-input,
    .modal-field select.field-error-input,
    .modal-field textarea.field-error-input {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    .modal-field-hint {
      margin: 0;
      font-size: 0.76rem;
      color: #61708a;
    }
    .subscription-inline-controls {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }
    .subscription-inline-select,
    .subscription-plan-input {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 10px;
      font-size: 0.9rem;
      color: var(--text);
      background: #fff;
    }
    .subscription-inline-select:focus,
    .subscription-plan-input:focus {
      outline: none;
      border-color: #9fc0f2;
      box-shadow: 0 0 0 2px rgba(29, 109, 232, 0.15);
    }
    .subscription-plan-input.field-error-input {
      border-color: #e35d6a;
      background: #fff7f8;
      box-shadow: none;
    }
    .subscription-plans-modal-table td {
      vertical-align: top;
    }
    .modal-subscription-plans {
      width: min(960px, 96vw);
      max-width: 960px;
    }
    .subscription-cycle-discounts {
      margin-bottom: 14px;
      padding: 12px;
      border: 1px solid #dbe6f7;
      border-radius: 10px;
      background: #f8fbff;
    }
    .subscription-cycle-discounts h4 {
      margin: 0 0 6px;
      font-size: 0.95rem;
      color: #1c355e;
    }
    .subscription-cycle-discounts-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .checkbox-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 10px;
      background: #fff;
      color: var(--text);
      font-size: 0.88rem;
      width: fit-content;
    }
    .checkbox-inline input[type="checkbox"] {
      margin: 0;
      width: 16px;
      height: 16px;
      accent-color: #1d6de8;
      flex-shrink: 0;
    }
    .shipper-logo-preview-wrap {
      border: 1px solid #d6e2f6;
      border-radius: 10px;
      background: #f8fbff;
      padding: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 220px;
      min-height: 72px;
    }
    .shipper-logo-preview {
      display: block;
      max-width: 100%;
      max-height: 120px;
      object-fit: contain;
    }
    .shipper-logo-remove-btn {
      justify-self: start;
      width: auto;
    }
    .rfq-multi-dropdown.field-error-input summary {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    .field-error-text {
      color: #b42318;
      font-size: 0.78rem;
      line-height: 1.25;
    }
    .rfq-multiselect {
      min-height: 124px;
      padding: 6px;
    }
    .rfq-multiselect option {
      padding: 8px 9px;
      border-radius: 7px;
      margin: 1px 0;
    }
    .rfq-multi-dropdown {
      position: relative;
    }
    .rfq-multi-dropdown summary {
      display: block;
      list-style: none;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      font-size: 0.92rem;
      color: var(--text);
      background: #fff;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rfq-multi-dropdown summary::-webkit-details-marker {
      display: none;
    }
    .rfq-multi-dropdown[open] summary {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .rfq-multi-dropdown-menu {
      position: absolute;
      top: calc(100% - 1px);
      left: 0;
      right: 0;
      z-index: 20;
      display: grid;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-top: none;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      padding: 8px;
      background: #fff;
      box-shadow: 0 10px 18px rgba(19, 34, 69, 0.08);
    }
    .rfq-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .rfq-checkbox-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 10px;
      background: #fff;
      color: var(--text);
      font-size: 0.88rem;
    }
    .rfq-checkbox-option input[type="checkbox"] {
      margin: 0;
      width: 16px;
      height: 16px;
    }
    .rfq-criterion-option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .rfq-criterion-label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .rfq-criterion-visibility {
      flex: 0 0 auto;
      min-width: 110px;
      max-width: 140px;
      padding: 4px 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: var(--text);
      font-size: 0.82rem;
    }
    .rfq-single-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 10px;
      background: #fff;
      color: var(--text);
      font-size: 0.88rem;
    }
    .rfq-single-checkbox input[type="checkbox"] {
      margin: 0;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    .rfq-form-section .rfq-checkbox-option,
    .rfq-form-section .rfq-single-checkbox {
      min-height: 39px;
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
    }
    .rfq-form-section .modal-grid > .modal-field.rfq-single-checkbox:not(.full-row) {
      min-height: 39px;
    }
    @media (max-width: 900px) {
      .settings-layout {
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .settings-sidebar {
        border: 1px solid #dfe6f3;
        border-radius: 10px;
        padding: 6px;
        max-height: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(145px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
      }
      .settings-sidebar-btn {
        white-space: nowrap;
      }
      .settings-content {
        min-height: 0;
      }
      .rfq-packaging-extract-card {
        flex-direction: column;
        align-items: flex-start;
      }
      .rfq-packaging-extract-actions {
        width: 100%;
        justify-content: flex-start;
      }
      .rfq-route-grid {
        grid-template-columns: 1fr;
      }
      .rfq-route-zip-city-row {
        grid-template-columns: minmax(85px, 0.8fr) minmax(0, 1.4fr);
      }
    }
    .notification-settings-grid {
      display: grid;
      gap: 8px;
    }
    .notification-settings-option {
      width: 100%;
      justify-content: flex-start;
    }
    .notification-settings-option.field-error-input {
      border-color: #e35d6a;
      background: #fff7f8;
    }
    .rfq-address-dropdown {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 20px rgba(19, 34, 69, 0.08);
      max-height: 220px;
      overflow-y: auto;
      margin-top: -1px;
    }
    .rfq-address-dropdown-state {
      padding: 9px 10px;
      color: var(--muted);
      font-size: 0.82rem;
    }
    .rfq-address-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      border-top: 1px solid #eef3fb;
    }
    .rfq-address-option:first-of-type {
      border-top: none;
    }
    .rfq-address-option-select {
      border: none;
      background: transparent;
      text-align: left;
      padding: 9px 10px;
      cursor: pointer;
      color: var(--text);
      font-size: 0.88rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rfq-address-option-select:hover {
      background: #f3f8ff;
    }
    .rfq-address-option-delete {
      width: 28px;
      height: 28px;
      margin-right: 6px;
      border: 1px solid #f1cad0;
      border-radius: 7px;
      background: #fff6f7;
      color: #b42318;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
    }
    .rfq-address-option-delete:hover {
      background: #ffe8eb;
      border-color: #e7aeb8;
    }
    .rfq-address-option-delete:disabled {
      opacity: 0.55;
      cursor: default;
    }
    .rfq-consignee-search {
      display: grid;
      gap: 0;
    }
    .rfq-consignee-dropdown {
      margin-top: -1px;
    }
    .rfq-consignee-option {
      grid-template-columns: minmax(0, 1fr);
    }
    .rfq-consignee-option-select {
      display: grid;
      gap: 2px;
      white-space: normal;
    }
    .rfq-consignee-option-name {
      font-weight: 600;
      color: #193354;
    }
    .rfq-consignee-option-meta {
      color: #61708a;
      font-size: 0.78rem;
      line-height: 1.25;
    }
    .placeholder-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .email-signature-select-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }
    .email-signature-manager-modal {
      width: min(760px, 100%);
    }
    .email-signature-manager-layout {
      display: grid;
      gap: 10px;
    }
    .email-signature-list {
      display: grid;
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
      padding: 8px;
      border: 1px solid #dce5f5;
      border-radius: 10px;
      background: #fbfdff;
    }
    .email-signature-list-item {
      border: 1px solid #d3e0f7;
      background: #ffffff;
      color: #23456f;
      border-radius: 10px;
      padding: 8px 10px;
      text-align: left;
      display: grid;
      gap: 2px;
      cursor: pointer;
      font-weight: 600;
    }
    .email-signature-list-item small {
      font-weight: 500;
      color: #5d7395;
    }
    .email-signature-list-item.is-selected {
      border-color: #8eb4f1;
      background: #eef5ff;
      color: #163f7e;
      box-shadow: inset 0 0 0 1px #c7dbfb;
    }
    .email-signature-html-textarea {
      min-height: 140px;
      resize: vertical;
    }
    .email-signature-delete-zone {
      border-top: 1px solid #e3eaf6;
      padding-top: 10px;
    }
    .email-signature-delete-actions {
      justify-content: flex-start;
      margin-top: 2px;
    }
    .placeholder-tag {
      display: inline-block;
      border: 1px solid #d8e4fb;
      background: #f3f7ff;
      color: #194c9e;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 0.78rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .email-template-test-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }
    .email-template-test-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #cfe0ff;
      border-radius: 9px;
      padding: 9px 11px;
      color: #1855b6;
      background: #f2f7ff;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .email-template-test-button:disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
    .email-template-test-samples {
      display: grid;
      gap: 6px;
      margin-top: 4px;
      font-size: 0.78rem;
      color: #61708a;
    }
    @media (max-width: 760px) {
      .email-signature-select-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .email-template-test-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .email-template-test-button {
        width: 100%;
      }
    }
    .email-editor-content {
      min-height: 220px;
      max-height: 360px;
      overflow-y: auto;
      padding: 10px 11px;
      font-size: 0.92rem;
      color: var(--text);
      outline: none;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .email-editor-content:focus {
      box-shadow: inset 0 0 0 1px #7da7e8;
    }
    .email-editor-content.field-error-input {
      box-shadow: inset 0 0 0 1px #e35d6a;
      background: #fff7f8;
    }
    .email-editor-field {
      position: relative;
    }
    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .modal-actions.modal-actions-left {
      justify-content: flex-start;
    }
    .modal-actions.modal-actions-split {
      justify-content: space-between;
      width: 100%;
    }
    .account-delete-confirm-modal {
      width: min(560px, 100%);
    }
    .rfq-bottom-actions {
      margin-top: 12px;
    }
    .modal-actions button {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px 11px;
      cursor: pointer;
      background: #fff;
      font-weight: 600;
    }
    .modal-actions .confirm {
      border-color: #cfe0ff;
      color: #1855b6;
      background: #f2f7ff;
    }
    .modal-actions .confirm.accept-action {
      border-color: var(--status-accepted-border);
      color: var(--status-accepted-text);
      background: var(--status-accepted-bg);
    }
    .modal-actions .danger {
      border-color: #f2c5c5;
      color: #a82222;
      background: #fff5f5;
    }

    .quote-shell {
      min-height: 100vh;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
      background: #fff;
    }
    .quote-container {
      width: min(1080px, 100%);
      flex: 1 1 auto;
      display: grid;
      gap: 14px;
      align-content: start;
    }
    .quote-header {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 12px 14px;
    }
    .quote-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .quote-brand-icon {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .quote-brand strong {
      display: block;
      font-size: 1rem;
      line-height: 1.2;
      color: #174ea6;
    }
    .quote-brand span {
      display: block;
      color: var(--muted);
      font-size: 0.84rem;
    }
    .quote-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    .quote-card h1,
    .quote-card h2,
    .quote-card h3 {
      margin: 0;
    }
    .quote-subtitle {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 0.9rem;
    }
    .quote-kv {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }
    .quote-kv > div {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 9px 10px;
      background: #fbfdff;
      display: grid;
      gap: 4px;
    }
    .quote-kv span {
      color: var(--muted);
      font-size: 0.79rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .quote-kv strong {
      font-size: 0.94rem;
    }
    .quote-two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .quote-two-col article,
    .quote-stack {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background: #fbfdff;
      display: grid;
      gap: 5px;
    }
    .quote-two-col p,
    .quote-stack p {
      margin: 0;
      color: #2f3d57;
      font-size: 0.9rem;
    }
    .quote-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .quote-chip {
      display: inline-block;
      border: 1px solid #d8e4fb;
      background: #f3f7ff;
      color: #194c9e;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 0.78rem;
    }
    .quote-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }
    .quote-table th,
    .quote-table td {
      border-bottom: 1px solid var(--line);
      padding: 8px 7px;
      text-align: left;
    }
    .quote-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .quote-form-grid > .field:not(.full-row):not(.quote-checkbox-field),
    .quote-routing-grid > .field {
      align-content: start;
      min-height: 78px;
    }
    .quote-form-grid .field textarea,
    .quote-form-grid .field input:not([type="checkbox"]),
    .quote-form-grid .field select {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      font-size: 0.92rem;
      color: var(--text);
      background: #fff;
      width: 100%;
    }
    .quote-form-grid .legal-consent-label {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
    }
    .quote-form-grid .legal-consent-label input[type="checkbox"] {
      width: 15px;
      height: 15px;
      padding: 0;
      margin-top: 2px;
      flex: 0 0 15px;
    }
    .quote-form-grid .full-row {
      grid-column: 1 / -1;
    }
    .quote-checkbox-field {
      display: flex;
      align-items: center;
      align-self: end;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      background: #fff;
      color: var(--text);
      font-size: 0.88rem;
      min-height: 40px;
      width: 100%;
      box-sizing: border-box;
    }
    .quote-checkbox-align-input {
      align-self: start;
      margin-top: 28px;
    }
    .quote-routing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .quote-routing-legs {
      margin-top: 8px;
      display: grid;
      gap: 8px;
    }
    .quote-routing-legs-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .quote-routing-legs-head h4 {
      margin: 0;
      font-size: 0.86rem;
    }
    .quote-routing-leg-row {
      display: grid;
      grid-template-columns: 1fr 0.9fr 0.9fr 0.8fr 0.8fr 1fr auto;
      gap: 8px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fbfdff;
      padding: 9px 10px;
    }
    .quote-routing-legs-head .btn-sm,
    .quote-routing-leg-row .btn-sm {
      margin-right: 0;
    }
    .quote-routing-leg-row > * {
      min-width: 0;
    }
    .quote-routing-leg-row input {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      font-size: 0.92rem;
      color: var(--text);
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
    }
    .quote-routing-leg-row .btn-sm {
      justify-self: end;
      align-self: start;
      white-space: nowrap;
    }
    .quote-routing-leg-row .field-error-text {
      grid-column: 1 / -1;
    }
    .quote-charge-list {
      display: grid;
      gap: 9px;
      margin-top: 8px;
    }
    .quote-charge-list-header {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 8px;
      align-items: center;
      padding: 0 4px;
      font-size: 0.78rem;
      color: #5f7190;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .quote-charge-row {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fbfdff;
      padding: 9px 10px;
      align-items: start;
    }
    .quote-charge-code-head {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .quote-charge-code-cell {
      display: grid;
      gap: 3px;
    }
    .quote-charge-amount-cell {
      display: grid;
      gap: 3px;
    }
    .quote-charge-list input {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 10px;
      font-size: 0.92rem;
      color: var(--text);
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
    }
    .quote-charge-custom-actions {
      margin-top: 6px;
    }
    .quote-charge-custom-actions .btn-sm {
      margin-right: 0;
    }
    .quote-charge-row-note {
      grid-column: 1 / -1;
      margin-top: -2px;
    }
    .quote-charge-list-actions {
      margin-top: 2px;
    }
    .release-notes-card {
      display: grid;
      gap: 16px;
    }
    .release-notes-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .release-notes-current-version {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      font-size: 0.85rem;
      color: var(--muted);
    }
    .release-notes-block {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.65);
      padding: 14px 16px;
      display: grid;
      gap: 10px;
    }
    .release-notes-block h3 {
      margin: 0;
      font-size: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: baseline;
    }
    .release-notes-block h3 small {
      color: var(--muted);
      font-weight: 500;
      font-size: 0.82rem;
    }
    .release-notes-section {
      display: grid;
      gap: 6px;
    }
    .release-notes-section h4 {
      margin: 0;
      font-size: 0.92rem;
      color: #16355f;
    }
    .release-notes-section ul {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 4px;
    }
    .release-notes-section li {
      font-size: 0.9rem;
      color: #1f2937;
      line-height: 1.45;
    }

    .spx-legal-footer {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.86);
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      color: #5f6f8b;
      font-size: 0.8rem;
    }
    .spx-legal-footer a:first-of-type {
      margin-left: auto;
    }
    .spx-legal-footer a {
      color: #1855b6;
      text-decoration: underline;
      font-weight: 600;
      white-space: nowrap;
    }
    .spx-legal-footer--inline {
      width: auto;
      max-width: calc(100% - 36px);
      border: none;
      background: transparent;
      border-radius: 0;
      padding: 8px 0;
      justify-content: center;
      gap: 4px 6px;
      font-size: 0.74rem;
      flex-wrap: nowrap;
    }
    .spx-legal-footer--inline a {
      font-weight: 500;
    }
    .spx-legal-footer--inline a:first-of-type {
      margin-left: 0;
    }
    .spx-legal-footer--auth {
      margin: auto auto 18px;
    }
    .spx-legal-footer--inline > :not(:first-child)::before {
      content: "·";
      margin-right: 6px;
      color: #8c9ab5;
      font-weight: 400;
      text-decoration: none;
      display: inline-block;
    }
    .spx-legal-footer--auth.spx-legal-footer--auth-wide {
      width: min(860px, calc(100% - 36px));
    }
    .spx-legal-footer--app,
    .spx-legal-footer--quote {
      margin-top: auto;
    }
    .feedback-fab {
      position: fixed;
      right: 24px;
      bottom: 140px;
      width: 56px;
      height: 56px;
      border-radius: 999px;
      border: 1px solid #d7e4fb;
      background: linear-gradient(165deg, #1d6de8 0%, #2f9bff 100%);
      color: #ffffff;
      box-shadow: 0 14px 30px rgba(29, 109, 232, 0.34);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1305;
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }
    .feedback-toast {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 1360;
      max-width: min(480px, calc(100vw - 32px));
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #b7e4c7;
      border-left: 6px solid #16a34a;
      background: linear-gradient(90deg, #eefbf2 0%, #f6fff8 100%);
      color: #14532d;
      box-shadow: 0 10px 24px rgba(20, 83, 45, 0.12);
      font-weight: 600;
      line-height: 1.35;
    }
    .feedback-toast .lucide {
      width: 16px;
      height: 16px;
      stroke-width: 2;
      flex-shrink: 0;
    }
    .feedback-fab:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 16px 34px rgba(29, 109, 232, 0.4);
    }
    .feedback-fab:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 3px rgba(29, 109, 232, 0.2), 0 16px 34px rgba(29, 109, 232, 0.34);
    }
    .feedback-fab .lucide {
      width: 22px;
      height: 22px;
      stroke-width: 2;
    }
    .feedback-fab--bottom-left {
      /* Center within the left sidebar column (286px) including app shell padding (14px). */
      left: calc(14px + (286px - 56px) / 2);
      right: auto;
      bottom: 14px;
    }
    .feedback-fab--top-right {
      top: 18px;
      right: 18px;
      bottom: auto;
      z-index: 1306;
    }

    .legal-page-shell {
      min-height: 100vh;
      padding: 22px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .legal-page-card {
      width: min(920px, 100%);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 20px;
      display: grid;
      gap: 16px;
    }
    .legal-page-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .legal-page-brand img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .legal-page-brand span {
      font-size: 1.4rem;
      font-weight: 700;
      color: #174ea6;
    }
    .legal-page-header h1 {
      margin: 0;
      font-size: 1.48rem;
      color: #17355f;
    }
    .legal-page-header p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.88rem;
    }
    .legal-page-section {
      display: grid;
      gap: 8px;
    }
    .legal-page-section h2 {
      margin: 0;
      font-size: 1rem;
      color: #17355f;
    }
    .legal-page-section p,
    .legal-page-section li {
      margin: 0;
      color: #24364f;
      line-height: 1.55;
      font-size: 0.92rem;
    }
    .legal-page-section ul {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 5px;
    }
    .legal-page-footer {
      border-top: 1px solid var(--line);
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      color: #5f6f8b;
      font-size: 0.84rem;
    }
    .legal-page-footer a:first-of-type {
      margin-left: auto;
    }
    .legal-page-footer a {
      color: #1855b6;
      font-weight: 600;
    }
    .legal-hub-toc {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f7faff;
      padding: 14px;
      display: grid;
      gap: 10px;
    }
    .legal-hub-toc h2 {
      margin: 0;
      font-size: 1rem;
      color: #17355f;
    }
    .legal-hub-toc-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 5px;
    }
    .legal-hub-toc-list a {
      color: #1855b6;
      font-weight: 600;
    }
    .legal-hub-doc {
      border-top: 1px solid var(--line);
      padding-top: 14px;
      scroll-margin-top: 18px;
    }
    .legal-hub-doc h3 {
      margin: 8px 0 0;
      font-size: 0.94rem;
      color: #17355f;
    }
    .legal-hub-doc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .legal-hub-doc-header h2 {
      margin: 0;
    }
    .legal-hub-doc-header a {
      color: #1855b6;
      font-size: 0.84rem;
      font-weight: 600;
    }
    .legal-hub-doc-meta {
      font-size: 0.84rem;
      color: #5f6f8b;
    }

    @media (max-width: 1200px) {
      .kpi { grid-column: span 4; }
      .wide, .wide-main { grid-column: span 12; }
      .deadline-widget, .mode-split-widget, .supplier-ranking-widget, .top-lanes-widget { grid-column: span 6; }
      .quote-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rfq-quotes-toolbar { flex-wrap: wrap; }
    }

    @media (max-width: 900px) {
      body.app-shell { height: auto; overflow: auto; }
      .app { height: auto; overflow: visible; }
      .app { grid-template-columns: 1fr; }
      .app.app-standalone-billing {
        min-height: auto;
        align-content: start;
        padding: 14px;
      }
      .billing-preview-grid {
        grid-template-columns: 1fr;
      }
      .sidebar { padding: 12px; height: auto; overflow: visible; }
      .content { overflow: visible; }
      .topbar { position: relative; top: auto; }
      .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .topbar { flex-wrap: wrap; }
      .topbar-left { width: 100%; }
      .topbar-search { width: min(420px, 100%); max-width: 420px; flex: 1 1 240px; }
      .topbar-global-search {
        width: min(420px, 100%);
        max-width: 420px;
        flex: 1 1 240px;
      }
      .global-search-popover {
        width: min(520px, calc(100vw - 44px));
      }
      .top-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; margin-left: 0; }
      .impersonation-banner {
        flex-direction: column;
        align-items: flex-start;
      }
      .impersonation-banner-action {
        width: 100%;
        justify-content: center;
      }
      .rfq-quotes-toolbar { align-items: flex-start; }
      .rfq-quotes-search-row { align-items: flex-start; flex: 1 1 100%; }
      .rfq-quotes-column-toggle { width: 100%; }
      .rfq-filter-grid { grid-template-columns: 1fr; }
      .kpi, .wide, .wide-main, .deadline-widget, .mode-split-widget, .top-lanes-widget, .supplier-ranking-widget { grid-column: span 12; }
      .modal-grid { grid-template-columns: 1fr; }
      .quote-history-item-grid { grid-template-columns: 1fr; }
      .supplier-filter-bar { gap: 8px; padding: 8px 10px; }
      .supplier-filter-item { min-width: 110px; }
      .dashboard-card-edit-controls {
        top: 6px;
        right: 6px;
      }
      .dashboard-widget-resize-handle {
        right: 6px;
        bottom: 6px;
      }
      .dashboard-edit-exit-button {
        width: 100%;
        justify-content: center;
      }
      .rfq-checkbox-grid { grid-template-columns: 1fr; }
      .quote-two-col { grid-template-columns: 1fr; }
      .quote-kv { grid-template-columns: 1fr; }
      .quote-form-grid { grid-template-columns: 1fr; }
      .quote-checkbox-align-input { margin-top: 0; }
      .quote-routing-grid { grid-template-columns: 1fr; }
      .quote-detail-routing-grid { grid-template-columns: 1fr; }
      .quote-routing-leg-row { grid-template-columns: 1fr; }
      .quote-charge-list-header {
        display: none;
      }
      .quote-charge-row {
        grid-template-columns: 1fr;
      }
      .spx-legal-footer:not(.spx-legal-footer--inline) {
        flex-direction: column;
        align-items: flex-start;
      }
      .spx-legal-footer:not(.spx-legal-footer--inline) a:first-of-type {
        margin-left: 0;
      }
      .feedback-fab {
        right: 16px;
        bottom: 130px;
      }
      .feedback-fab--bottom-left {
        left: 16px;
        right: auto;
        bottom: 16px;
      }
      .feedback-fab--top-right {
        top: 12px;
        right: 12px;
        bottom: auto;
      }
      .feedback-toast {
        top: 12px;
        right: 12px;
      }
      .feedback-context-list {
        grid-template-columns: 1fr;
      }
      .feedback-workflow-meta {
        grid-template-columns: 1fr;
      }
      .rfq-shipment-summary {
        grid-template-columns: 1fr;
      }
      .rfq-shipment-item-header {
        align-items: stretch;
        flex-direction: column;
      }
      .company-settings-subscription-head {
        align-items: flex-start;
      }
      .company-settings-subscription-block {
        width: 100%;
        min-width: 0;
      }
      .company-settings-subscription-summary-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .settings-subscription-metrics {
        grid-template-columns: 1fr;
      }
      .settings-subscription-scheduled-grid {
        grid-template-columns: 1fr;
      }
      .subscription-cycle-discounts-grid {
        grid-template-columns: 1fr;
      }
      .subscription-block-stats {
        grid-template-columns: 1fr;
      }
      .feedback-screenshot-preview-header {
        align-items: stretch;
        flex-direction: column;
      }
      .feedback-screenshot-preview-image {
        max-height: min(84vh, 1100px);
      }
      .spx-legal-footer--auth {
        width: calc(100% - 36px);
      }
      .legal-page-shell {
        padding: 14px;
      }
      .legal-page-card {
        padding: 16px;
      }
    }

    @media (max-width: 640px) {
      .supplier-filter-item { flex: 1 1 100%; min-width: 0; }
    }

    .spx-sortable-th {
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .spx-sortable-th::after {
      content: " ↕";
      color: #8fa2c7;
      font-weight: 500;
    }
    .spx-sortable-th.spx-sort-asc::after {
      content: " ↑";
      color: #2459b7;
      font-weight: 700;
    }
    .spx-sortable-th.spx-sort-desc::after {
      content: " ↓";
      color: #2459b7;
      font-weight: 700;
    }

    /* ── Shipment Route Bar ── */
    .smt-route {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      margin-top: 12px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      font-size: 0.84rem;
      color: var(--text);
      flex-wrap: wrap;
    }
    .smt-route-leg {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
    }
    .smt-route-leg .lucide {
      width: 15px;
      height: 15px;
      color: var(--muted);
    }
    .smt-route-arrow {
      color: var(--muted);
      font-size: 0.9rem;
    }
    .smt-route-arrow .lucide {
      width: 16px;
      height: 16px;
    }
    .smt-route-cargo {
      margin-left: auto;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .smt-route-cargo .lucide {
      width: 14px;
      height: 14px;
    }

    /* ── Shipment Milestone Timeline (horizontal) ── */
    .smt {
      display: flex;
      align-items: flex-start;
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      overflow: visible;
      gap: 0;
    }
    .smt-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 1 1 0;
      min-width: 80px;
      padding: 0 4px;
    }
    /* connector line between steps */
    .smt-step + .smt-step::before {
      content: "";
      position: absolute;
      top: 23px;
      right: 50%;
      width: 100%;
      height: 2px;
      background: var(--line);
      z-index: 0;
    }
    .smt-step + .smt-step.connector-reached::before {
      background: #16a34a;
    }
    .smt-step + .smt-step.connector-active::before {
      background: #16a34a;
    }
    .smt-step + .smt-step.connector-set::before {
      background: var(--brand);
    }

    /* icon button */
    .smt-icon-wrap {
      position: relative;
      z-index: 2;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2px solid var(--line);
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
    }
    .smt-icon-wrap[data-spx-tooltip]::before,
    .smt-icon-wrap[data-spx-tooltip]::after {
      z-index: 300;
    }
    .smt-icon-wrap .lucide,
    .smt-icon-wrap svg {
      width: 20px;
      height: 20px;
    }
    .smt-step.is-reached .smt-icon-wrap {
      border-color: #16a34a;
      background: #dcfce7;
      color: #15803d;
    }
    .smt-step.is-set .smt-icon-wrap {
      border-color: var(--brand);
      background: #e0edfe;
      color: var(--brand);
    }
    .smt-step.is-pending .smt-icon-wrap {
      border-color: var(--line);
      background: var(--surface-2);
      color: var(--muted);
    }

    /* status badge on the icon */
    .smt-status-badge {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .smt-status-badge svg {
      width: 9px;
      height: 9px;
    }
    .smt-status-badge.reached {
      background: #16a34a;
      color: #fff;
    }
    .smt-status-badge.set {
      background: var(--brand);
      color: #fff;
    }
    .smt-status-badge.pending {
      background: #ef4444;
      color: #fff;
    }

    /* transport mode icon centered on connector line between steps */
    .smt-mode-icon {
      position: absolute;
      top: 23px;
      left: 0;
      transform: translate(-50%, -50%);
      z-index: 3;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--brand);
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.18);
      pointer-events: none;
    }
    .smt-mode-icon .lucide {
      width: 15px;
      height: 15px;
    }

    /* missing submissions banner */
    .smt-missing-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      margin-top: 12px;
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-left: 3px solid #f97316;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 500;
      color: #9a3412;
    }
    .smt-missing-banner .lucide {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: #f97316;
    }

    /* label + date below icon */
    .smt-label {
      margin-top: 8px;
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--text);
      text-align: center;
      line-height: 1.25;
    }
    .smt-date {
      margin-top: 2px;
      font-size: 0.72rem;
      color: var(--muted);
      text-align: center;
      white-space: nowrap;
    }
    .smt-date.is-empty {
      font-style: italic;
    }

    /* supplier: clickable icons */
    button.smt-icon-wrap {
      cursor: pointer;
      padding: 0;
      font: inherit;
    }
    button.smt-icon-wrap:hover,
    button.smt-icon-wrap:focus-visible {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(29, 109, 232, 0.15);
      color: var(--brand);
    }
    button.smt-icon-wrap:focus-visible {
      outline: none;
    }
    .smt-step.is-reached button.smt-icon-wrap:hover,
    .smt-step.is-reached button.smt-icon-wrap:focus-visible {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
      color: #15803d;
    }
    .smt-step.is-set button.smt-icon-wrap:hover,
    .smt-step.is-set button.smt-icon-wrap:focus-visible {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(29, 109, 232, 0.15);
      color: var(--brand);
    }

    /* milestone modal */
    .smt-modal {
      width: min(400px, 100%);
    }
    .smt-modal h3 {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .smt-modal h3 .lucide {
      width: 20px;
      height: 20px;
      color: var(--brand);
    }
    .smt-modal-field {
      display: grid;
      gap: 4px;
    }
    .smt-modal-field label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
    }
    .smt-modal-field input[type="datetime-local"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 0.88rem;
    }
    .smt-modal-field input[type="date"],
    .smt-modal-field input[type="time"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 0.88rem;
    }
    .smt-modal-field input.field-error-input {
      border-color: var(--danger);
    }
    .smt-modal-optional {
      font-weight: 400;
      color: var(--muted);
      font-size: 0.78rem;
    }

    @media (max-width: 480px) {
      .smt { gap: 0; }
      .smt-step { min-width: 64px; }
      .smt-icon-wrap { width: 40px; height: 40px; }
      .smt-icon-wrap .lucide, .smt-icon-wrap svg { width: 18px; height: 18px; }
      .smt-step + .smt-step::before { top: 20px; }
      .smt-mode-icon { top: 20px; width: 24px; height: 24px; }
      .smt-mode-icon .lucide { width: 13px; height: 13px; }
    }

    .shipment-detail-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }
.shipment-detail-actions + .quote-detail-table,
.shipment-detail-actions + .notice {
  margin-top: 12px;
}

.supplier-score-points-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.supplier-score-points-inline-dashboard {
  gap: 10px;
}

.supplier-score-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #1f2937;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.supplier-score-pill:hover,
.supplier-score-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  outline: none;
}

.supplier-score-pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.supplier-score-pill__level {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.supplier-score-pill__points {
  font-weight: 500;
  opacity: 0.85;
}

.supplier-score-pill__hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.supplier-score-pill:hover .supplier-score-pill__hint,
.supplier-score-pill:focus-visible .supplier-score-pill__hint {
  opacity: 0.7;
}

.supplier-score-pill--l1 {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.supplier-score-pill--l2 {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  border-color: #ea580c;
  color: #7c2d12;
}

.supplier-score-pill--l3 {
  background: linear-gradient(135deg, #f3f4f6, #d1d5db);
  border-color: #9ca3af;
  color: #374151;
}

.supplier-score-pill--l4 {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-color: #f59e0b;
  color: #78350f;
}

.supplier-score-pill--l5 {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border-color: #0284c7;
  color: #0c4a6e;
}

.supplier-score-pill--compact {
  height: 22px;
  padding: 0 24px 0 8px;
  font-size: 0.72rem;
  gap: 4px;
}

.supplier-score-pill--compact .supplier-score-pill__icon {
  width: 12px;
  height: 12px;
}

.supplier-score-pill--compact .supplier-score-pill__hint {
  right: 6px;
  width: 10px;
  height: 10px;
}

.supplier-score-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  width: 100%;
}

.supplier-score-progress__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.supplier-score-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3f4f6, #d1d5db);
  transition: width 200ms ease;
}

.supplier-score-progress__fill--l1 {
  background: linear-gradient(90deg, #e5e7eb, #9ca3af);
}

.supplier-score-progress__fill--l2 {
  background: linear-gradient(90deg, #ffedd5, #ea580c);
}

.supplier-score-progress__fill--l3 {
  background: linear-gradient(90deg, #f3f4f6, #9ca3af);
}

.supplier-score-progress__fill--l4 {
  background: linear-gradient(90deg, #fef9c3, #f59e0b);
}

.supplier-score-progress__fill--l5 {
  background: linear-gradient(90deg, #e0f2fe, #0284c7);
}

.supplier-score-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  color: #4a607d;
}

.autocomplete-dropdown {
  position: absolute;
  z-index: 120;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 20px rgba(19, 34, 69, 0.08);
  max-height: 240px;
  overflow-y: auto;
  margin-top: 2px;
  list-style: none;
  padding: 0;
}
.autocomplete-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text);
  border-top: 1px solid #eef3fb;
}
.autocomplete-item:first-child {
  border-top: none;
}
.autocomplete-item:hover {
  background: #f3f8ff;
}
.autocomplete-item-exact {
  background: #fef3f3;
}
.autocomplete-item-exact:hover {
  background: #fde8e8;
}
.autocomplete-item-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}