.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; }
@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; }
}