.supplier-app .mobile-compliance-footer[hidden] {
  display: none !important;
}

.supplier-app .mobile-designed-empty {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  background: transparent;
}

.supplier-app .mobile-designed-empty .mobile-empty-illustration {
  display: block;
  width: 160px !important;
  height: 160px !important;
  max-width: 100%;
  max-height: none;
  margin: 0 0 8px;
  object-fit: contain;
}

.supplier-app .mobile-designed-empty > b {
  color: #34424b;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
}

.supplier-app .mobile-designed-empty > span {
  max-width: 260px;
  color: #8c989f;
  font-size: 12px;
  line-height: 1.8;
}

.modal:has(.announcement-center) > .card {
  width: min(500px, calc(100vw - 48px)) !important;
  max-height: min(80dvh, 740px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.modal .announcement-center {
  display: flex;
  flex-direction: column;
  max-height: min(80dvh, 740px);
  padding: 0;
}

.modal .announcement-center > header,
.modal .announcement-center.critical > header {
  flex: 0 0 auto;
  padding: 32px 28px 24px !important;
  text-align: center;
  border: 0;
}

.modal .announcement-center > header h2 {
  font-size: 24px !important;
  letter-spacing: 2px;
}

.announcement-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0 28px;
  padding: 0 6px 12px 0;
  scrollbar-width: thin;
  scrollbar-color: #a5dcd4 transparent;
}

.announcement-scroll:focus-visible {
  outline: 2px solid #3a9c8b;
  outline-offset: -2px;
}

.announcement-scroll::-webkit-scrollbar { width: 4px; }
.announcement-scroll::-webkit-scrollbar-thumb { background: #a5dcd4; border-radius: 4px; }

.announcement-scroll .announcement-title {
  margin: 0 0 22px !important;
  color: #273b44;
  font-size: 17px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.announcement-scroll .announcement-summary {
  margin: 0 0 22px !important;
  color: #536b73;
  font-size: 14px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.announcement-scroll .announcement-copy {
  max-height: none;
  overflow: visible;
  margin: 0 !important;
  padding: 0;
  color: #5e7079;
  font-size: 14px;
  line-height: 2;
  overflow-wrap: anywhere;
}

.announcement-scroll .announcement-video {
  width: 100% !important;
  margin: 22px 0 0 !important;
}

.announcement-scroll .announcement-video-link {
  display: block;
  margin: 20px 0 0 !important;
}

.modal .announcement-center .announcement-ack {
  flex: 0 0 auto;
  margin: 18px 28px 0 !important;
  font-size: 12px;
  line-height: 1.7;
}

.modal .announcement-center > footer {
  flex: 0 0 auto;
  margin: 0 28px !important;
  padding: 24px 0 28px !important;
  justify-items: center;
}

.modal .announcement-center > footer button {
  width: min(220px, 100%);
  min-height: 44px;
  border-radius: 24px;
  background: #309c78 !important;
  box-shadow: none !important;
  font-size: 15px;
}

.supplier-app .announcement-only-page {
  width: min(900px, 100%);
  padding: 24px;
  border: 0;
  background: #f4f8fb;
  box-shadow: none;
}

.announcement-only-page > .detail-head {
  margin: 0 0 26px;
  align-items: flex-start;
  gap: 12px;
}

.announcement-only-page > .detail-head h2 { margin: 0 0 8px; font-size: 23px; }
.announcement-only-page > .detail-head p { margin: 0; font-size: 12px; color: #85949f; }
.announcement-only-page > .detail-head .pill { flex-shrink: 0; font-size: 11px; }
.announcement-only-page .announcement-list-page { display: grid; gap: 20px; }

.announcement-list-page > button.announcement-message-card {
  --notice-accent: #3284eb;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d5e5f5;
  border-radius: 20px;
  background: var(--notice-accent);
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 16px rgba(44, 99, 128, .04);
}

.announcement-list-page > button.announcement-message-card[data-tone="cyan"] { --notice-accent: #20a7c5; }
.announcement-list-page > button.announcement-message-card[data-tone="green"] { --notice-accent: #3caa77; }

.announcement-message-card > .announcement-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: auto;
  padding: 20px 20px 30px;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: var(--notice-accent);
  font-size: 13px;
}

.announcement-list-page .announcement-card-head time { color: #fff; opacity: .85; font-size: 11px; font-weight: 400; white-space: nowrap; }

.announcement-message-card > .announcement-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: auto;
  margin-top: -12px;
  padding: 22px 20px 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  color: #30404d;
  background: #fff;
}

.announcement-list-page .announcement-card-body > b {
  display: block;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.7;
  white-space: normal;
  overflow-wrap: anywhere;
}

.announcement-card-excerpt {
  display: block;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 12px;
  color: #80919d;
  background: #f5f9fc;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.announcement-card-excerpt > span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  border-top: 1px solid #eff4f7;
  color: var(--notice-accent);
  font-size: 13px;
}

.announcement-card-link svg { width: 15px; height: 15px; transform: rotate(180deg); }

@media (max-width: 700px) {
  body:has(.supplier-app) .modal:has(.supplier-confirm-dialog) {
    align-items: center !important;
    justify-items: center;
    padding: 24px 20px !important;
  }

  body:has(.supplier-app) .modal:has(.supplier-confirm-dialog) > .card {
    width: min(460px, 100%) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 !important;
    border-radius: 22px !important;
    overflow-y: auto;
  }

  body:has(.supplier-app) .modal:has(.supplier-confirm-dialog) > .card > .modal-titlebar {
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }

  body:has(.supplier-app) .modal:has(.seller-rules-content),
  body:has(.supplier-app) .modal:has(.product-price-rule-form) {
    align-items: center !important;
    padding: 24px 20px !important;
  }

  body:has(.supplier-app) .modal:has(.seller-rules-content) > .card,
  body:has(.supplier-app) .modal:has(.product-price-rule-form) > .card {
    width: min(460px, 100%) !important;
    max-height: 82dvh !important;
    margin: 0;
    border-radius: 22px !important;
    overflow-y: auto;
  }

  .supplier-app .simple-product-manager .mobile-market-grid:has(> .mobile-designed-empty) {
    min-height: 100%;
    align-content: center;
  }

  .supplier-app .simple-product-manager .mobile-designed-empty { min-height: 300px; padding: 30px 12px; }
  .supplier-app .mobile-market-notice-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }
  .supplier-app .mobile-market-meta .mobile-price-rule-action { flex: 0 0 auto; margin: 0; }
  .supplier-app .mobile-market-meta .mobile-price-rule-action button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #2f8b71;
    background: transparent;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: none;
  }
  .supplier-app .mobile-market-notice-row .limit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
  }
  .supplier-app .mobile-market-notice-row .market-meta-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }
  .price-rule-enabled {
    position: absolute;
    top: 4px;
    right: -3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2f9e78;
  }

  .supplier-video-replica .product-rule-ticker {
    height: 48px;
    min-height: 48px;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #d5ede8;
    border-radius: 16px;
    color: #416e69;
    background: #edf9f6;
  }

  .supplier-video-replica .product-rule-ticker[data-color="red"] { background: #fff3f1; border-color: #f1dcd6; color: #a26455; }
  .supplier-video-replica .product-rule-ticker[data-color="blue"] { background: #edf8fc; border-color: #d6eaf3; color: #427e96; }
  .supplier-video-replica .product-rule-ticker[data-color="green"] { background: #edf9f6; border-color: #d5ede8; color: #416e69; }
  .supplier-video-replica .product-rule-ticker > b { flex: 0 0 28px; width: 28px; }
  .supplier-video-replica .product-rule-ticker .market-notice-icon { width: 28px; height: 28px; flex: 0 0 28px; }
  .supplier-video-replica .product-rule-ticker > span { flex: 1; min-width: 0; white-space: nowrap; font-size: 12px; line-height: 20px; }
  .supplier-video-replica .product-rule-ticker > span > i {
    display: block;
    width: 100%;
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
    font-weight: 500;
  }

  .supplier-video-replica .product-rule-ticker > button {
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 34px;
    padding: 4px 6px;
    border: 0;
    border-radius: 12px;
    color: inherit;
    background: rgba(255, 255, 255, .8);
    box-shadow: none;
    font-size: 12px;
  }

  .supplier-app .announcement-only-page { padding: 22px 10px; border-radius: 0; }
  .announcement-only-page > .detail-head { padding: 0 8px; }
  .announcement-message-card > .announcement-card-head { padding: 18px 18px 28px; gap: 8px; font-size: 12px; }
  .announcement-card-head time { font-size: 10px; }
  .announcement-message-card > .announcement-card-body { padding: 20px 18px 0; }
}

.product-price-rule-form .price-setting-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.product-price-rule-form .simple-proof-actions { display: flex; justify-content: center; margin-top: 4px; }
.product-price-rule-form .simple-proof-actions > button { width: min(240px, 100%); min-height: 44px; border-radius: 14px; background: #309c78; box-shadow: none; }
.reference-more-services .reference-account-actions { display: grid; gap: 10px; }
.reference-more-services .reference-account-actions > button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; text-align: left; border: 1px solid #eaf0ef; border-radius: 14px; background: #fff; }
.reference-more-services .reference-account-actions .more-service-icon { width: 28px; height: 28px; }
.reference-more-services .reference-account-actions b { font-size: 14px; color: #344b50; }
.reference-more-services .reference-account-actions i { font-style: normal; color: #a0b3b5; }

.supplier-app .realname-card { max-width: 860px; margin-inline: auto; padding: 28px; border-color: #e4efea; border-radius: 22px; }
.realname-card .realname-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 26px; }
.realname-heading .realname-heading-icon { width: 48px; height: 48px; padding: 7px; border-radius: 15px; background: #eef8f3; }
.realname-card .realname-heading h2 { margin: 0 0 6px; font-size: 21px; }
.realname-card .realname-heading p { margin: 0; color: #87998f; font-size: 12px; line-height: 1.7; }
.realname-card .realname-heading > .pill { white-space: nowrap; }
.realname-card .realname-flow { grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 8px; margin: 20px 0 26px; padding: 18px 12px; border: 0; background: #f7faf8; border-radius: 14px; }
.realname-card .realname-flow span { flex-direction: column; gap: 8px; color: #899b93; font-size: 12px; font-weight: 500; }
.realname-card .realname-flow b { width: 28px; height: 28px; background: #e9eeeb; color: #8ea297; }
.realname-card .realname-flow b svg { width: 16px; height: 16px; }
.realname-card .realname-flow i { display: block; margin-bottom: 24px; height: 1px; background: #dce9e2; }
.realname-card .realname-flow .is-complete,
.realname-card .realname-flow .is-current { color: #328665; }
.realname-card .realname-flow .is-complete b { color: #2e946c; background: #dcf2e6; }
.realname-card .realname-flow .is-current b { color: #fff; background: #369c73; }
.realname-card .realname-approved-panel { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; padding: 24px; border: 1px solid #dfeee5; border-radius: 18px; background: #fbfefc; }
.realname-card .realname-approved-panel > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e0f4e8; color: #359b71; }
.realname-card .realname-approved-panel > span svg { width: 24px; height: 24px; }
.realname-card .realname-approved-panel b { font-size: 17px; color: #2d775a; }
.realname-card .realname-approved-panel p { margin: 6px 0 0; font-size: 12px; color: #92a398; line-height: 1.6; }
.realname-details { grid-column: 1 / -1; display: grid; gap: 0; margin: 8px 0; }
.realname-details > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid #edf3ef; font-size: 14px; }
.realname-details dt { color: #81948a; flex-shrink: 0; }
.realname-details dd { margin: 0; color: #41584c; overflow-wrap: anywhere; text-align: right; }
.realname-card .realname-approved-panel > button { grid-column: 1 / -1; justify-self: center; min-width: 150px; min-height: 40px; border: 1px solid #d4e8db; border-radius: 12px; background: #fff; color: #3a8766; }
.realname-card .realname-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 24px 0 0; color: #93a59b; font-size: 12px; line-height: 1.8; }
.realname-privacy .realname-privacy-icon { width: 18px; height: 18px; flex: 0 0 18px; }

@media (max-width: 700px) {
  .product-price-rule-form { gap: 12px; }
  .product-price-rule-form section { padding: 14px 12px; background: #f6faf8; border-color: #e4eee8; border-radius: 14px; }
  .product-price-rule-form h3 { font-size: 14px; gap: 6px; }
  .product-price-rule-form p { margin: 8px 0 14px; font-size: 11px; line-height: 1.8; }
  .product-price-rule-form label { font-size: 12px; color: #586e62; }
  .product-price-rule-form input { border-radius: 10px; background: #fff; font-size: 16px; }
  .supplier-app .realname-card { padding: 22px 16px; border-radius: 18px; }
  .realname-card .realname-heading { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
  .realname-heading .realname-heading-icon { width: 40px; height: 40px; padding: 5px; }
  .realname-card .realname-heading h2 { font-size: 18px; }
  .realname-card .realname-heading > .pill { grid-column: 2; justify-self: start; font-size: 10px; }
  .realname-card .realname-flow { padding: 14px 10px; gap: 4px; }
  .realname-card .realname-flow span { font-size: 11px; }
  .realname-card .realname-approved-panel { padding: 18px 14px; gap: 10px; }
  .realname-card .realname-approved-panel b { font-size: 16px; }
  .realname-details > div { font-size: 12px; }
  .realname-card .realname-privacy { font-size: 10px; }
  .supplier-app .supplier-price-page { padding: 20px 14px; background: #f5f9f7; border: 0; }
  .supplier-price-page > h2 { margin: 0 0 10px; font-size: 20px; }
  .supplier-price-page > .muted { margin: 0 0 20px; font-size: 12px; line-height: 1.85; color: #85958e; }
  .supplier-price-page .mobile-price-list { display: grid; gap: 14px; }
  .mobile-price-card { min-width: 0; padding: 20px 16px; background: #fff; border: 1px solid #e3eee7; border-radius: 18px; }
  .mobile-price-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mobile-price-card header > div { min-width: 0; }
  .mobile-price-card h3 { margin: 0 0 7px; color: #304d40; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
  .mobile-price-card header p { margin: 0; color: #8b9c92; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .mobile-price-card .pill { flex-shrink: 0; font-size: 10px; }
  .mobile-price-card .price-product-id { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0; color: #98a59d; font-size: 11px; line-height: 1.6; }
  .price-product-id > span { overflow-wrap: anywhere; min-width: 0; }
  .mobile-price-card dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px 0 0; margin: 0; border-top: 1px solid #edf3ef; }
  .mobile-price-card dt { margin: 0 0 8px; color: #90a096; font-size: 11px; }
  .mobile-price-card dd { margin: 0; color: #516459; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
  .mobile-price-card dd.price-amount { color: #2e9a6d; }
  .mobile-price-card dd small { font-size: 11px; font-weight: 400; }
  .supplier-tax-page > .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .supplier-tax-page > .grid .metric { min-width: 0; padding: 18px 14px; }
  .supplier-tax-page .metric b { font-size: 22px; overflow-wrap: anywhere; }
  .supplier-tax-page .tax-box,
  .supplier-tax-page .muted { font-size: 12px; line-height: 1.85; }
  .supplier-tax-page .mobile-tax-months { display: grid; gap: 12px; margin-top: 20px; }
  .mobile-tax-month { padding: 18px 14px; border: 1px solid #e3eee7; border-radius: 16px; background: #fbfdfc; }
  .mobile-tax-month header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #eaf1ed; }
  .mobile-tax-month h3 { margin: 0; font-size: 15px; }
  .mobile-tax-month header > span { color: #749182; font-size: 11px; }
  .mobile-tax-month dl { display: grid; gap: 14px; margin: 16px 0 0; font-size: 12px; }
  .mobile-tax-month dl > div { display: flex; justify-content: space-between; gap: 12px; }
  .mobile-tax-month dt { color: #8b9b91; }
  .mobile-tax-month dd { margin: 0; color: #405b4d; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .supplier-app .mobile-market-meta { margin-inline: 10px; padding-inline: 10px; }
  .supplier-app .mobile-market-notice-row { gap: 4px; }
  .supplier-app .mobile-market-meta .mobile-price-rule-action button,
  .supplier-app .mobile-market-notice-row .limit { font-size: 10px; }
  .supplier-app .mobile-market-notice-row .market-meta-icon { width: 14px; height: 14px; flex-basis: 14px; }
}

.proof-image-trigger { display: grid; justify-items: center; gap: 8px; padding: 10px; border: 1px solid #e2ece7; border-radius: 14px; background: #f8fbf9; color: #548875; cursor: zoom-in; }
.mobile-order-detail-link { display: flex; justify-content: center; padding: 0 12px 10px; }
.mobile-order-detail-link button { padding: 6px 12px; min-height: 32px; color: #477761; background: transparent; border: 0; box-shadow: none; font-size: 12px; }
.order-urgent-section { padding: 16px; border: 1px solid #dcece3; border-radius: 16px; background: #f7fbf8; }
.order-urgent-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-urgent-section h3 { margin: 0; }
.order-urgent-section > p { font-size: 12px; line-height: 1.7; }
.order-urgent-section small { color: #7a8d82; font-size: 11px; }
.urgent-report-reason, .urgent-report-reply p { white-space: pre-wrap; overflow-wrap: anywhere; }
.urgent-report-state { flex-shrink: 0; padding: 5px 8px; border-radius: 9px; color: #8c631f; background: #fff3dc; font-size: 11px; }
.urgent-report-state.resolved { color: #267549; background: #e6f5eb; }
.urgent-report-reply { margin-block: 12px; padding: 12px; border-radius: 10px; background: #fff; font-size: 12px; }
.urgent-report-reply p { margin: 6px 0; }
.order-urgent-section .urgent-report-button { width: 100%; min-height: 42px; border: 1px solid #afd6bd; border-radius: 12px; color: #216047; background: #e2f4e8; box-shadow: none; }
.order-urgent-section .urgent-report-button:disabled { color: #738a7c; background: #edf3ef; opacity: 1; cursor: default; }
.supplier-urgent-form { display: grid; gap: 14px; padding: 0 18px 18px; }
.supplier-urgent-form > p { margin: 0; color: #61766b; font-size: 13px; line-height: 1.8; }
.urgent-report-context { display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: #f1f7f3; overflow-wrap: anywhere; }
.urgent-report-context span { color: #6d8375; font-size: 12px; }
.supplier-urgent-form label { display: grid; gap: 8px; font-size: 13px; }
.supplier-urgent-form textarea { width: 100%; min-height: 132px; padding: 12px; border: 1px solid #dce7df; border-radius: 12px; font-size: 16px; resize: vertical; }
.urgent-report-warning { padding: 12px; border-radius: 12px; color: #8b6229; background: #fff8ec; font-size: 12px; line-height: 1.8; }
.supplier-urgent-form > .urgent-form-error { color: #b6413f; }
.supplier-urgent-form > .urgent-form-error[hidden] { display: none; }
.supplier-urgent-form footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.supplier-urgent-form footer button { min-height: 44px; border-radius: 12px; }
.proof-image-trigger > span { font-size: 12px; }
.proof-image-trigger[hidden],
.proof-remove-button[hidden],
.simple-proof-form #proof-upload-placeholder[hidden],
.proof-lightbox img[hidden],
.proof-load-error[hidden] { display: none !important; }
.order-detail-proof-section .proof-image-trigger { justify-self: start; }
.order-detail-proof-section img { width: 96px; height: 116px; object-fit: contain; border-radius: 8px; }
.protected-proof-viewer > .proof-image-trigger { max-width: 100%; }
.simple-proof-form .proof-upload-box.compact { width: 148px; }
.simple-proof-form .proof-upload-box > .proof-image-trigger { width: 100%; padding: 6px; border: 0; background: #f7faf9; }
.simple-proof-form .proof-upload-box > .proof-image-trigger img { width: 120px; height: 120px; object-fit: contain; }
.simple-proof-form .proof-upload-box > .proof-remove-button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 5px; border: 0; border-radius: 50%; background: #53625dcc; color: #fff; }
.proof-remove-button svg { width: 16px; height: 16px; }
.simple-proof-form #proof-file-name { padding: 0 5px 5px; overflow-wrap: anywhere; }
.proof-lightbox { position: fixed; inset: 0; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100dvh; overflow: hidden; background: #111816; color: #fff; }
.proof-lightbox > header { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.proof-lightbox header b { flex: 1; font-size: 16px; }
.proof-lightbox header > span { color: #c6d0cb; font-size: 12px; }
.proof-lightbox button { color: #edf5f0; background: #ffffff14; border: 1px solid #ffffff26; border-radius: 10px; box-shadow: none; }
.proof-lightbox header button { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; }
.proof-lightbox header button svg { width: 20px; height: 20px; }
.proof-lightbox-stage { min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.proof-lightbox-canvas { display: grid; place-items: center; }
.proof-lightbox-canvas img { display: block; max-width: none; max-height: none; object-fit: contain; cursor: zoom-in; }
.proof-lightbox .proof-load-error { padding: 24px; color: #f2d9cc; font-size: 14px; text-align: center; }
.proof-lightbox > footer { display: flex; justify-content: center; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.proof-lightbox footer button { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.proof-lightbox button:focus-visible { outline: 2px solid #b2e9cd; outline-offset: 2px; }

@media (max-width: 700px) {
  body:has(.supplier-app) .modal:has(.mobile-order-detail, .simple-proof-form, .protected-proof-viewer, .supplier-urgent-form) {
    align-items: center !important;
    padding: 24px 20px !important;
  }
  body:has(.supplier-app) .modal:has(.mobile-order-detail, .simple-proof-form, .protected-proof-viewer, .supplier-urgent-form) > .card {
    width: min(440px, 100%) !important;
    max-height: 82dvh !important;
    margin: 0;
    overflow-y: auto;
    border-radius: 22px !important;
  }
  body:has(.supplier-app) .modal:has(.mobile-order-detail, .simple-proof-form, .protected-proof-viewer, .supplier-urgent-form) > .card > .modal-titlebar { position: relative; top: 0; justify-content: center; margin: 0 0 14px; padding: 16px 40px 12px; }
  body:has(.supplier-app) .modal:has(.mobile-order-detail, .simple-proof-form, .protected-proof-viewer, .supplier-urgent-form) .modal-titlebar h2 { text-align: center; }
  body:has(.supplier-app) .modal:has(.mobile-order-detail, .simple-proof-form, .protected-proof-viewer, .supplier-urgent-form) .modal-titlebar > button { position: absolute; right: 6px; }
  .mobile-order-detail dt { font-size: 10px; }
  .mobile-order-detail dd { font-size: 12px; }
  .order-detail-timeline small { font-size: 10px; }
  .order-detail-timeline time { font-size: 9px; }
}

@media (max-height: 540px) {
  .modal .announcement-center > header { padding: 18px 24px !important; }
  .modal .announcement-center > footer { padding: 14px 0 18px !important; }
}

.supplier-login-history { max-width: 1000px; margin: 0 auto; min-width: 0; }
.login-history-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.login-history-heading h2 { margin: 0 0 5px; font-size: 23px; }
.login-history-heading p { margin: 0; color: #7b8c87; font-size: 13px; }
.login-history-symbol, .login-device-symbol { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; background: #eaf5ee; color: #378563; }
.login-history-symbol svg, .login-device-symbol svg { width: 24px; height: 24px; }
.login-security-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid #e0ece6; border-radius: 18px; background: #f2f8f4; }
.login-security-note > div { display: flex; gap: 10px; align-items: center; min-width: 0; }
.login-security-note svg { flex: 0 0 19px; width: 19px; height: 19px; color: #548574; }
.login-security-note p { margin: 0; font-size: 13px; color: #6b7f75; line-height: 1.8; }
.login-security-note button { flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 11px 16px; min-height: 42px; border-radius: 12px; }
.login-history-caption { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.login-history-caption h3 { font-size: 15px; margin: 0; }
.login-history-caption span { font-size: 12px; color: #82948a; }
.login-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.login-history-item { min-width: 0; padding: 20px; border: 1px solid #e1ebe6; border-radius: 18px; background: #fff; }
.login-history-item > header { display: flex; align-items: center; gap: 12px; }
.login-history-item h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.login-device-symbol { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; background: #f1f6f4; }
.login-device-symbol svg { width: 20px; height: 20px; }
.login-history-item dl { margin: 18px 0 14px; display: grid; gap: 12px; font-size: 13px; }
.login-history-item dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.login-history-item dt { color: #83928b; }
.login-history-item dd { margin: 0; color: #314f42; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.login-history-item details { border-top: 1px solid #edf1ee; padding-top: 10px; }
.login-history-item summary { min-height: 30px; padding: 5px 0; cursor: pointer; color: #678376; font-size: 12px; }
.login-history-item details p { margin: 8px 0 0; padding: 12px; background: #f6f8f7; border-radius: 10px; font-size: 11px; color: #819087; line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; }
.credit-score-entry, .mobile-credit-score { border: 1px solid #b9dfce; border-radius: 999px; background: #eef9f2; color: #277b53; font-weight: 800; }
.credit-score-entry { margin-top: 12px; padding: 8px 16px; }
.mobile-credit-score { margin-left: 8px; padding: 4px 9px; font-size: 11px; }
.supplier-credit-panel { display: grid; gap: 16px; max-width: 560px; }
.supplier-credit-page { max-width: 620px; margin: 0 auto; padding: 12px 16px 32px; }
.supplier-credit-page .supplier-credit-panel { max-width: none; gap: 12px; }
.supplier-credit-page .supplier-credit-panel > header { padding: 30px; }
.supplier-credit-back { margin-bottom: 14px; padding: 7px 0; background: transparent; color: #397a5b; font-weight: 800; }
.supplier-credit-panel > header { padding: 20px; border-radius: 18px; background: linear-gradient(135deg, #e9f8ed, #f4fbf6); }
.supplier-credit-panel > header small, .supplier-credit-panel > header strong { display: block; color: #287b54; }
.supplier-credit-panel > header strong { margin: 4px 0; font-size: 40px; line-height: 1.1; }
.supplier-credit-panel > header p, .supplier-credit-panel section p { margin: 6px 0; }
.supplier-credit-panel section { padding: 0 4px; }
.supplier-credit-panel section h3 { margin: 0 0 9px; font-size: 16px; }
.supplier-credit-panel section > small { display: block; margin-top: 10px; color: #6d7d76; }
.early-ship-panel { display: grid; gap: 14px; padding: 2px 18px 18px; }
.early-ship-panel > button { width: 100%; }
.credit-event-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid #e8efe9; }
.credit-event-list span { display: grid; gap: 3px; }
.credit-event-list small { color: #83918a; }
.credit-event-list strong.negative { color: #dc594d; }
.credit-event-list strong.positive { color: #2d9160; }
.qxm-grade-page { max-width: 820px; margin: 0 auto; min-width: 0; gap: 18px; padding: 22px 16px 32px; }
.qxm-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.qxm-page-heading > div { min-width: 0; }
.qxm-page-heading small { color: #7c8f84; font-size: 11px; letter-spacing: 2px; }
.qxm-page-heading h2 { margin: 5px 0 6px; font-size: 26px; color: #243c30; }
.qxm-page-heading p { margin: 0; font-size: 12px; color: #7a8c80; line-height: 1.7; }
.qxm-page-heading > button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; background: #fff; color: #4e6c5c; border: 1px solid #dbe6df; border-radius: 12px; box-shadow: none; font-size: 12px; }
.qxm-level-carousel { min-width: 0; margin: 0 -16px; }
.qxm-level-track { display: flex; gap: 12px; overflow-x: auto; padding: 8px 16px 14px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 20px; }
.qxm-level-track::-webkit-scrollbar { display: none; }
.qxm-level-card { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 calc(100% - 32px); min-width: 0; scroll-snap-align: center; padding: 24px; border-radius: 22px; color: #fff; box-shadow: 0 8px 18px #263d3020; background: linear-gradient(120deg, #3e4a48, #697b76); }
.qxm-level-2 { background: linear-gradient(120deg, #326187, #5392b5); }
.qxm-level-3 { color: #544025; background: linear-gradient(120deg, #e3c089, #f3dfb9); }
.qxm-level-4 { background: linear-gradient(120deg, #565376, #9383aa); }
.qxm-level-watermark { position: absolute; z-index: -1; right: -2px; top: 34px; font-size: clamp(85px, 22vw, 135px); font-weight: 900; letter-spacing: -9px; line-height: 1; opacity: .09; transform: skew(-7deg); pointer-events: none; }
.qxm-level-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.qxm-level-card header > span { opacity: .8; }
.qxm-level-card header b { font-weight: 500; background: #ffffff25; padding: 5px 10px; border: 1px solid #ffffff30; border-radius: 999px; white-space: nowrap; }
.qxm-level-3 header b { background: #75512312; border-color: #75512325; }
.qxm-level-card h2 { margin: 24px 0 10px; color: inherit; font-size: 36px; line-height: 1.1; }
.qxm-level-card h2 span { font-size: 18px; margin-left: 8px; font-weight: 600; }
.qxm-level-card p { margin: 0; min-height: 36px; font-size: 12px; opacity: .9; line-height: 1.8; }
.qxm-level-validity { display: block; margin-top: 8px; font-size: 10px; line-height: 1.7; opacity: .85; }
.qxm-grade-page .qxm-approved-note { padding: 12px; background: #eef7ef; border-radius: 10px; color: #477357; }
.qxm-level-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff30; font-size: 11px; }
.qxm-level-3 footer { border-color: #75512325; }
.qxm-level-card footer strong { font-size: 17px; white-space: nowrap; }
.qxm-level-dots { display: flex; align-items: center; justify-content: center; }
.qxm-level-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.qxm-level-dots button span { width: 6px; height: 6px; background: #cad6ce; border-radius: 10px; transition: width .18s, background-color .18s; }
.qxm-level-dots button[aria-current="true"] span { width: 22px; background: #4d7c62; }
.qxm-preview-note { margin: -2px 16px 4px; text-align: center; font-size: 11px; color: #839187; }
.qxm-grade-page > .card { margin: 0; padding: 22px; border: 1px solid #e3ebe5; border-radius: 18px; box-shadow: none; background: #fff; min-width: 0; }
.qxm-grade-page .card h2 { margin: 0 0 15px; font-size: 17px; color: #304638; }
.qxm-grade-page .card p { font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; color: #6e8075; }
.qxm-grade-page .card button { min-height: 44px; padding: 10px 14px; margin: 3px 6px 3px 0; font-size: 12px; border-radius: 11px; }
.qxm-grade-rights header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qxm-grade-rights header > span { font-size: 10px; color: #859288; }
.qxm-grade-rights dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.qxm-grade-rights dl > div { min-width: 0; border-top: 1px solid #edf1ee; padding-top: 14px; }
.qxm-grade-rights dt { font-size: 12px; color: #7c8b81; }
.qxm-grade-rights dd { margin: 7px 0; color: #354e3d; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.qxm-grade-rights small { display: block; font-size: 11px; color: #8c988f; line-height: 1.7; }
.qxm-grade-page .grade-admission-status { background: linear-gradient(130deg, #fffdf7, #fff); border-color: #ebdfcb; }
.qxm-grade-page .grade-admission-status button:first-of-type { background: #435e4c; color: #fff; }
.qxm-guarantee-wallet, .qxm-commission-page .reference-commission-wallet { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border-radius: 22px; background: linear-gradient(125deg, #303933, #576457); color: #f4e7cc; box-shadow: 0 8px 20px #263d3018; }
.qxm-guarantee-wallet::after, .qxm-commission-page .reference-commission-wallet::after { content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; right: -100px; top: -55px; border: 32px solid #ffffff06; border-radius: 50%; pointer-events: none; }
.qxm-guarantee-wallet header, .qxm-commission-page .reference-commission-wallet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.qxm-guarantee-wallet header b { font-size: 10px; font-weight: 500; padding: 5px 9px; border: 1px solid #f5e4c82e; border-radius: 999px; }
.qxm-guarantee-wallet > strong, .qxm-commission-page .reference-commission-wallet > strong { display: block; margin: 22px 0 15px; font-size: clamp(24px, 7vw, 36px); font-variant-numeric: tabular-nums; letter-spacing: -.8px; line-height: 1.3; overflow-wrap: anywhere; }
.qxm-guarantee-wallet strong small, .qxm-commission-page .reference-commission-wallet strong small { margin-right: 5px; font-size: 18px; font-weight: 500; }
.qxm-guarantee-wallet p { font-size: 11px; line-height: 1.8; color: #c8d0c7; }
.qxm-guarantee-wallet footer, .qxm-commission-page .reference-commission-wallet footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff1f; font-size: 11px; }
.qxm-wallet-links { display: grid; background: #fff; border: 1px solid #e3ebe5; border-radius: 18px; overflow: hidden; }
.qxm-wallet-links button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 17px 20px; background: transparent; border: 0; border-bottom: 1px solid #edf1ee; border-radius: 0; box-shadow: none; text-align: left; }
.qxm-wallet-links button:last-child { border-bottom: 0; }
.qxm-wallet-links button span { min-width: 0; display: grid; gap: 5px; }
.qxm-wallet-links b { color: #3b5041; font-size: 14px; }
.qxm-wallet-links small { color: #87968b; font-size: 11px; line-height: 1.6; }
.qxm-wallet-links i { font-style: normal; font-size: 22px; color: #a0afa4; }
.qxm-grade-details { border: 1px solid #e3ebe5; border-radius: 18px; padding: 0 20px; background: #fff; scroll-margin-top: 100px; }
.qxm-grade-details > summary { min-height: 56px; padding: 18px 0; font-size: 14px; font-weight: 650; color: #425b49; cursor: pointer; }
.qxm-grade-details > .card { padding: 16px 0; margin: 0; border: 0; box-shadow: none; }
.qxm-grade-details p { color: #79887e; font-size: 12px; line-height: 1.8; }
.qxm-grade-page input, .qxm-grade-page select { min-width: 0; }
.qxm-grade-page .finance-ledger-list article { flex-wrap: wrap; }
.qxm-grade-page .finance-ledger-list small { overflow-wrap: anywhere; }
.qxm-grade-page :focus-visible, .qxm-commission-page :focus-visible { outline: 2px solid #518768; outline-offset: 3px; }
.qxm-commission-page { padding: 22px 16px 32px; }
.qxm-commission-page .reference-commission-wallet { margin-top: 18px; background: linear-gradient(125deg, #2d4257, #53738c); color: #edf6fd; }
.qxm-commission-page .reference-commission-wallet header button { min-height: 40px; padding: 8px 12px; font-size: 11px; background: #ffffff17; border: 1px solid #ffffff30; border-radius: 10px; color: #fff; box-shadow: none; }
.qxm-commission-page .qxm-wallet-links { margin-top: 18px; }
.qxm-wallet-note { margin-top: 18px; padding: 18px; border: 1px solid #dfebe5; background: #eef5f1; border-radius: 16px; }
.qxm-wallet-note h3 { margin: 0 0 8px; font-size: 13px; color: #52735e; }
.qxm-wallet-note p { margin: 0; color: #788e7e; font-size: 11px; line-height: 1.9; }
.qxm-account-page .mobile-profile-user > div { min-width: 0; }
.qxm-account-page .mobile-profile-user h2 { overflow-wrap: anywhere; }
.qxm-account-page .mobile-profile-user p { display: flex; flex-wrap: wrap; gap: 5px; }
.qxm-account-page .mobile-credit-score { margin-left: 0; }
.qxm-current-grade { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 5px; padding: 6px 0; border: 0; background: transparent; color: #55775f; box-shadow: none; font-size: 12px; font-weight: 700; }
.qxm-current-grade span { font-weight: 400; font-size: 10px; color: #8b9c8f; }
.qxm-active-benefit > span { color: #7c8b81; font-size: 12px; }
.qxm-active-benefit > strong { display: block; margin-top: 10px; font-size: 25px; color: #3b6248; }
.qxm-active-benefit > details { margin-top: 12px; padding: 0; border: 0; border-top: 1px solid #edf1ee; border-radius: 0; background: transparent; }
.qxm-active-benefit summary { cursor: pointer; padding: 9px 0; color: #52745e; font-size: 12px; min-height: 40px; }
.qxm-active-benefit .qxm-grade-rights { padding: 16px 0 0; margin: 0; border: 0; box-shadow: none; }
.qxm-account-page .mobile-profile-assets b { font-size: clamp(14px, 4vw, 20px); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .qxm-grade-page { padding-top: 18px; gap: 14px; }
  .qxm-level-card { padding: 22px 18px; }
  .qxm-grade-page > .card { padding: 18px; }
  .qxm-grade-rights dl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qxm-grade-rights dl > div { display: grid; grid-template-columns: 115px minmax(0, 1fr); column-gap: 10px; }
  .qxm-grade-rights dd { margin-top: 0; }
  .qxm-grade-rights small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .qxm-level-dots button span { transition: none; }
  .qxm-level-track { scroll-behavior: auto; }
}
@media (max-width: 700px) {
  .supplier-login-history { padding: 14px 12px 20px; }
  .login-history-heading { gap: 12px; margin-bottom: 16px; }
  .login-history-heading h2 { font-size: 21px; }
  .login-security-note { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .login-security-note > div { align-items: flex-start; }
  .login-security-note p { font-size: 12px; }
  .login-security-note button { align-self: flex-end; }
  .login-history-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .login-history-item { padding: 18px; }
}
.desktop-current-grade {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid #d8e5df;
  border-radius: 10px;
  background: #f1f8f5;
  color: #315f49;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}

.desktop-current-grade:focus-visible {
  outline: 2px solid #315f49;
  outline-offset: 3px;
}
.supplier-pricing-fields { display: grid; gap: 14px; width: 100%; box-sizing: border-box; }
.supplier-pricing-fields label { display: grid; gap: 8px; font-weight: 650; }
.supplier-pricing-fields input[name="sale_price"] { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; border: 1px solid #d8e2ed; border-radius: 12px; font-size: 20px; }
.supplier-pricing-fields input:disabled { color: #506279; background: #f3f6fa; opacity: 1; }
.supplier-pricing-range, .supplier-pricing-explanation, .supplier-pricing-legacy { margin: 0; color: #52667c; font-size: 13px; line-height: 1.65; }
.supplier-pricing-fields .supplier-pricing-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px; border-radius: 12px; background: #f1f8ff; }
.supplier-pricing-switch-control { position: relative; display: block; flex: 0 0 48px; height: 30px; }
.supplier-pricing-switch-control input { position: absolute; inset: 0; width: 48px; height: 30px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.supplier-pricing-switch-control i { display: block; height: 30px; border-radius: 18px; background: #a5b4c3; transition: background .15s; }
.supplier-pricing-switch-control i::after { content: ''; position: absolute; width: 24px; height: 24px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #1b324233; transition: transform .15s; }
.supplier-pricing-switch-control input:checked + i { background: #137fd1; }
.supplier-pricing-switch-control input:checked + i::after { transform: translateX(18px); }
.supplier-pricing-switch-control input:focus-visible + i { outline: 2px solid #137fd1; outline-offset: 3px; }
.supplier-product-price-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 0; padding: 10px; border: 1px solid #d4e6f5; border-radius: 12px; background: #f1f8ff; color: #1266a6; white-space: normal; }
.supplier-product-price-button span { font-weight: 700; }
.supplier-product-price-button small { font-size: 12px; }
.supplier-product-price-button svg { flex: 0 0 16px; width: 16px; height: 16px; }
.mobile-market-actions .supplier-product-price-button { grid-column: 1 / -1; width: 100%; }
.supplier-pricing-form { display: grid; gap: 20px; }
.supplier-pricing-form h3 { margin: 0; overflow-wrap: anywhere; }
.supplier-pricing-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; border-radius: 12px; background: #f1f8ff; }
.supplier-pricing-summary span { flex: 1; min-width: 100px; }
.seller-api-panel { display: grid; gap: 16px; }
.seller-api-panel p { margin: 0; line-height: 1.65; }
.seller-api-panel form { display: grid; gap: 12px; }
.seller-api-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border: 1px solid #d8e2ed; border-radius: 12px; }
.seller-api-key-row code { flex: 1; overflow-wrap: anywhere; }
.seller-api-secret { white-space: pre-wrap; overflow-wrap: anywhere; background: #edf6ff; padding: 16px; border-radius: 12px; }
.qxm-admission-details { margin: 12px 0; border-top: 1px solid #e8e7de; }
.qxm-admission-details > summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: #53634f; font-size: 12px; }
body:has(.supplier-app) .modal:has(.seller-api-panel) { align-items: center; padding: 20px; }
body:has(.supplier-app) .modal:has(.seller-api-panel) > .card { width: min(100%, 520px); max-height: calc(100dvh - 40px); margin: 0; overflow-y: auto; border-radius: 18px; animation: seller-api-enter .18s ease-out; }
@keyframes seller-api-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  body:has(.supplier-app) .modal:has(.seller-api-panel) > .card { animation: none; }
}
@media (max-width: 700px) {
  .mobile-withdraw-account form > .withdraw-field { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; color: #34404a; font-size: 12px; font-weight: 700; }
  .mobile-withdraw-account .withdraw-field > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
  .mobile-withdraw-account .withdraw-field i { color: #7c8991; font-style: normal; }
  .mobile-withdraw-account .withdraw-field input:focus { border-color: #79b9ad; box-shadow: none; }
  .mobile-withdraw-account .withdraw-field input:focus-visible { outline: 2px solid #3c9b89; outline-offset: 2px; }
  .supplier-video-replica .qxm-account-page .mobile-profile-user { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 12px; }
  .supplier-video-replica .qxm-account-page .mobile-profile-user > div { width: 100%; }
  .supplier-video-replica .qxm-account-page .mobile-profile-user h2 { margin: 0 0 7px; font-size: 19px; line-height: 25px; }
  .supplier-video-replica .qxm-account-page .mobile-profile-user p { align-items: center; gap: 5px; }
  .supplier-video-replica .qxm-account-page .mobile-avatar { width: 54px; height: 54px; margin-top: 1px; }
  .supplier-video-replica .qxm-account-page .qxm-current-grade { min-height: 36px; margin-top: 4px; flex-wrap: wrap; gap: 6px; }
  .supplier-video-replica .qxm-account-page .mobile-profile-assets { margin-top: 16px; padding-top: 16px; }
}
@media (min-width: 701px) {
  .supplier-app .desktop-product-card { display: flex; flex-direction: column; gap: 16px; }
  .supplier-app .desktop-product-card > header { min-height: 68px; align-content: center; }
  .supplier-app .desktop-product-card > header small { line-height: 18px; }
  .supplier-app .desktop-product-card > header h3 { line-height: 24px; }
  .supplier-app .desktop-product-card > header p { line-height: 20px; }
  .supplier-app .desktop-product-card > header .pill { margin: 0; white-space: nowrap; }
  .supplier-app .desktop-product-card .pill.neutral { color: #687b88; background: #f2f6f8; }
  .supplier-app .desktop-product-card-metrics { flex: 0 0 auto; }
  .supplier-app .desktop-product-card-flags { min-height: 32px; align-items: center; }
  .supplier-app .desktop-product-card > footer { margin-top: auto; }
  .supplier-app .desktop-product-card .desktop-product-actions { grid-template-rows: repeat(3, minmax(44px, auto)); gap: 10px; }
  .supplier-app .desktop-product-card .desktop-product-actions > button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 20px; }
  .supplier-app .desktop-product-card .desktop-product-actions > button:disabled { color: #71818c; border-color: #e2e9ee; background: #f3f6f8; opacity: 1; cursor: not-allowed; box-shadow: none; }
  .supplier-app .desktop-product-card .desktop-product-actions > button:focus-visible { outline: 2px solid #289c91; outline-offset: 3px; }
}

.qxm-profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qxm-profile-name-row h2 { flex: 0 1 auto; min-width: 0; }
.qxm-profile-name-row .mobile-credit-score { flex: 0 0 auto; white-space: nowrap; }
.qxm-profile-grade { padding: 0 3px; min-height: 24px; border: 0; border-radius: 4px; background: transparent; color: #62796b; font-size: 11px; }
.qxm-profile-grade:focus-visible { outline: 2px solid #3c9b89; outline-offset: 2px; }
.qxm-active-benefit > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.qxm-active-benefit > header b { font-size: 16px; }
.qxm-active-benefit > header span { padding: 3px 8px; border-radius: 6px; color: #52745e; background: #f0f7f1; font-size: 11px; }
.qxm-active-benefit > small { display: block; margin-top: 14px; color: #7c8b81; font-size: 11px; line-height: 1.6; }
.qxm-preview-benefits { margin: 18px 0 0; display: grid; gap: 10px; }
.qxm-preview-benefits > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.qxm-preview-benefits dt { color: #6b7d72; }
.qxm-preview-benefits dd { margin: 0; color: #344c3c; text-align: right; font-weight: 650; }
.qxm-level-apply { justify-self: start; padding: 10px 16px; border: 1px solid #d3e5d9; border-radius: 10px; color: #426b51; background: #f0f7f1; }
body:has(.supplier-app) .modal:has(.supplier-pricing-form) { align-items: center; padding: 20px; }
body:has(.supplier-app) .modal:has(.supplier-pricing-form) > .card { width: min(100%, 520px); max-height: calc(100dvh - 40px); margin: 0; overflow-y: auto; border-radius: 18px; animation: seller-api-enter .18s ease-out; }
body:has(.supplier-app) .supplier-pricing-form .supply-quote-submit > .primary { color: #fff; background: #3ba36d; border-color: #3ba36d; box-shadow: none; }
body:has(.supplier-app) .supplier-pricing-form .supply-quote-submit > .primary:hover { background: #318b5c; border-color: #318b5c; }
body:has(.supplier-app) .supplier-pricing-switch-control input:checked + i { background: #3ba36d; }
@media (prefers-reduced-motion: reduce) {
  body:has(.supplier-app) .modal:has(.supplier-pricing-form) > .card { animation: none; }
}
@media (max-width: 700px) {
  .supplier-video-replica .qxm-account-page .qxm-profile-name-row h2 { margin: 0; font-size: 17px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .supplier-video-replica .qxm-account-page .qxm-profile-name-row .mobile-credit-score { margin: 0; padding: 3px 6px; font-size: 10px; }
  .supplier-video-replica .qxm-account-page .mobile-profile-user p { margin: 5px 0 0; }
  .mobile-accept-panel .quick-setting-number > span:first-child b { white-space: nowrap; }
}
@media (min-width: 701px) {
  .supplier-app .desktop-product-search { grid-template-columns: auto minmax(0, 1fr) auto; position: relative; }
  .supplier-app .desktop-product-search > input { grid-column: 2; grid-row: 1; padding-right: 38px; }
  .supplier-app .desktop-product-search > .desktop-product-search-clear { grid-column: 2; grid-row: 1; justify-self: end; z-index: 1; width: 30px; height: 30px; margin: 0 5px 0 0; padding: 0; border: 0; background: transparent; }
  .supplier-app .desktop-product-search > .desktop-product-search-clear > svg { display: block; width: 15px; height: 15px; margin: 0; }
  .supplier-app .desktop-product-search > .primary { grid-column: 3; grid-row: 1; }
}

.supplier-app .mobile-withdraw-account > header,
.supplier-app .desktop-withdraw-account > header { display: block; }
.supplier-app .qxm-wallet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.supplier-app .qxm-wallet-balances > div { min-width: 0; padding: 16px 12px; border: 1px solid #e2e9ed; border-radius: 12px; background: #f6f8fa; }
.supplier-app .qxm-wallet-balances .qxm-wallet-available { border-color: #d8eade; background: #f0f8f3; }
.supplier-app .qxm-wallet-balances span { display: block; color: #657581; font-size: 13px; font-weight: 500; }
.supplier-app .qxm-wallet-balances strong { display: block; margin: 10px 0 6px; color: #344650; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.supplier-app .qxm-wallet-balances .qxm-wallet-available strong { color: #278455; }
.supplier-app .qxm-wallet-balances small { display: block; color: #71818b; font-size: 11px; line-height: 1.6; }
.supplier-app .qxm-wallet-note { margin: 12px 0; color: #71818b; font-size: 12px; line-height: 1.7; }
.supplier-app .qxm-wallet-detail-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.supplier-app .qxm-wallet-detail-links > button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #2373aa; font-size: 13px; }
.supplier-app .qxm-wallet-detail-links > span { color: #71818b; font-size: 12px; }
@media (max-width: 700px) {
  .supplier-app .qxm-wallet-balances { gap: 8px; margin-top: 12px; }
  .supplier-app .qxm-wallet-balances > div { padding: 14px 10px; }
  .supplier-app .qxm-wallet-balances strong { font-size: clamp(18px, 5.2vw, 24px); }
}

.supplier-app .qxm-level-overview { margin: 14px 0; padding: 18px; border: 1px solid #e2e9ed; border-radius: 16px; background: #fff; }
.supplier-app .qxm-level-overview > h2 { margin: 0 0 6px; font-size: 18px; }
.supplier-app .qxm-level-overview > p { margin: 0 0 14px; color: #657581; font-size: 13px; line-height: 1.7; }
.supplier-app .qxm-level-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.supplier-app .qxm-level-step { min-width: 0; padding: 14px 12px; border: 1px solid #e2e9ed; border-radius: 12px; background: #f8fafb; }
.supplier-app .qxm-level-step.is-current { border-color: #76bba0; background: #edf8f2; }
.supplier-app .qxm-level-step > header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.supplier-app .qxm-level-step h3 { margin: 0; color: #344650; font-size: 16px; }
.supplier-app .qxm-level-step small { color: #278455; font-size: 11px; }
.supplier-app .qxm-level-step p { margin: 10px 0; color: #526571; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.supplier-app .qxm-level-step > footer { padding-top: 10px; border-top: 1px solid #e2e9ed; color: #71818b; font-size: 12px; line-height: 1.6; }
.supplier-app .qxm-upgrade-checklist > p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; margin: 0; border-bottom: 1px solid #edf1f3; font-size: 13px; }
.supplier-app .qxm-upgrade-checklist > p > b { flex: 1 1 115px; color: #344650; }
.supplier-app .qxm-upgrade-checklist > p > span { color: #657581; }
.supplier-app .qxm-upgrade-checklist > p > button { min-height: 44px; padding: 8px 12px; border-radius: 9px; }
.supplier-app .qxm-upgrade-checklist > small { display: block; margin-top: 12px; color: #71818b; line-height: 1.7; }
@media (max-width: 700px) {
  .supplier-video-replica .mobile-bottom-nav button { justify-items: center; text-align: center; min-width: 0; }
  .supplier-video-replica .mobile-bottom-nav .mobile-tab-icon { display: block; width: 24px; height: 24px; padding: 0; margin: 0; box-sizing: border-box; justify-self: center; stroke: none; }
  .supplier-video-replica .mobile-bottom-nav button > span { justify-self: center; text-align: center; }
  .supplier-app .qxm-level-overview { padding: 14px; }
}
.supplier-app .finance-filter-toolbar .finance-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 48px;
  padding: 0 6px 0 12px;
  border: 1px solid #dce8e6;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}
.supplier-app .finance-search-row > svg { flex: 0 0 18px; color: #728984; }
.supplier-app .finance-filter-toolbar .finance-search-row input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}
.supplier-app .finance-search-row > button { flex: 0 0 auto; min-height: 44px; margin: 0; }
.supplier-app .finance-search-row .finance-search-button { padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: #2f9084; }
.supplier-app .finance-search-row:focus-within { border-color: #2f9084; outline: 2px solid #dcefeb; outline-offset: 1px; }
.supplier-app .settings-profile-only { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.qxm-grade-page .qxm-visual-benefits { padding: 18px; border: 0; border-radius: 18px; background: transparent; box-shadow: none; }
.qxm-visual-benefits > header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 18px; }
.qxm-visual-benefits > h3 { margin: 18px 0 12px; color: #344c40; font-size: 15px; }
.qxm-visual-benefits .qxm-preview-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.qxm-visual-benefits .qxm-claim-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qxm-visual-benefits .qxm-preview-benefits > div { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 84px; padding: 12px 6px; border: 1px solid #e6eeea; border-radius: 13px; color: #74847a; background: #fff; text-align: center; box-sizing: border-box; }
.qxm-visual-benefits .qxm-preview-benefits dt { order: 2; font-size: 11px; line-height: 1.5; }
.qxm-visual-benefits .qxm-preview-benefits dd { order: 1; margin: 0; color: #38624f; font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.qxm-visual-benefits > small { display: block; margin-top: 14px; font-size: 11px; color: #7d8c82; text-align: center; }
.qxm-visual-benefits > details { margin-top: 16px; }
.qxm-grade-page .qxm-upgrade-checklist > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qxm-upgrade-checklist > summary > span { color: #789183; font-size: 11px; font-weight: 400; }
.qxm-grade-page .qxm-upgrade-checklist > p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; font-size: 12px; }
.qxm-grade-page .qxm-upgrade-checklist > p > span { margin-left: auto; }
.qxm-grade-page .qxm-upgrade-checklist > small { display: block; margin-top: 12px; color: #809187; font-size: 11px; }
.qxm-grade-page .qxm-l4-application > section { margin: 16px 0 0; box-shadow: none; }
.supplier-app .profile-details-card { width: 100%; max-width: 680px; margin: 0 auto; padding: 24px; box-sizing: border-box; }
.profile-details-heading { margin-bottom: 22px; }
.profile-details-heading h2 { margin: 0 0 8px; font-size: 22px; }
.profile-details-heading p { margin: 0; color: #758880; font-size: 14px; }
.profile-details-form { display: grid; gap: 24px; }
.supplier-app .profile-avatar-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid #e0ede8;
  border-radius: 16px;
  background: #f5fbf8;
  cursor: pointer;
}
.profile-avatar-picker > img { width: 64px; height: 64px; flex: 0 0 64px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; box-sizing: border-box; }
.profile-avatar-picker > span { display: grid; min-width: 0; gap: 5px; }
.profile-avatar-picker strong { color: #285b50; font-size: 16px; }
.profile-avatar-picker small, [data-profile-avatar-name] { color: #758880; font-size: 12px; overflow-wrap: anywhere; }
.supplier-app .profile-avatar-picker > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.profile-avatar-picker:focus-within { outline: 2px solid #2f9084; outline-offset: 3px; }
.profile-details-fields { display: grid; gap: 20px; }
.supplier-app .profile-details-fields > label { display: block; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 600; }
.profile-optional { margin-left: 8px; color: #8a9992; font-size: 12px; font-weight: 400; }
.supplier-app .profile-details-fields input { display: block; width: 100%; min-height: 48px; margin-top: 9px; padding: 11px 14px; border: 1px solid #dfe8e3; border-radius: 12px; color: #233b32; background: #fff; font-size: 16px; box-sizing: border-box; }
.supplier-app .profile-details-save { min-height: 48px; border: 0; border-radius: 12px; color: #fff; background: #2f9084; font-size: 16px; }
@media (max-width: 700px) {
  .supplier-app .profile-details-card { padding: 20px 16px; }
  .profile-details-form { gap: 22px; }
  .profile-details-heading h2 { font-size: 20px; }
  .supplier-app .finance-search-row .finance-search-button { padding: 0 12px; }
}