:root {
  color-scheme: light;
  --bg: #fafafb;
  --panel: #ffffff;
  --text: #262626;
  --muted: #8c8c8c;
  --line: #f0f0f0;
  --line-strong: #d9d9d9;
  --brand: #1677ff;
  --brand-dark: #0958d9;
  --brand-soft: #e6f4ff;
  --accent: #1677ff;
  --green: #389e0d;
  --green-soft: #f6ffed;
  --gold: #d48806;
  --gold-soft: #fffbe6;
  --red: #cf1322;
  --red-soft: #fff1f0;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 78px;
  --header-height: 64px;
  --radius: 8px;
  --shadow: 0 8px 24px rgba(140, 140, 140, 0.12);
  --shadow-soft: 0 2px 8px rgba(140, 140, 140, 0.08);
  font-family: "Public Sans", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.stocktake-page { display: grid; gap: 24px; padding-bottom: 32px; }
.stocktake-section { border-top: 1px solid #e8e1df; padding: 18px 0 0; min-width: 0; }
.stocktake-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.stocktake-heading h2 { margin: 3px 0 4px; font-size: 20px; }
.stocktake-heading p, .stocktake-hint { margin: 0; color: #756f72; font-size: 13px; line-height: 1.6; }
.stocktake-heading a { color: var(--brand); text-decoration: none; font-size: 13px; }
.stocktake-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.stocktake-metrics > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #e8e1df; border-radius: 6px; background: #fff; }
.stocktake-metrics strong { font-size: 21px; color: #282629; }
.stocktake-metrics span { color: #756f72; font-size: 12px; }
.stocktake-create-form, .stocktake-scan-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.stocktake-scan-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stocktake-create-form > label, .stocktake-scan-form > label, .stocktake-location-form > label, .stocktake-actions > label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.stocktake-create-form input:not([type="radio"]):not([type="checkbox"]), .stocktake-scan-form input:not([type="hidden"]), .stocktake-location-form input, .stocktake-actions input, .stocktake-create-form select, .stocktake-scan-form select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #d9d3d1; border-radius: 6px; background: #fff; font: inherit; }
.stocktake-scan-stage { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.stocktake-scan-stage strong, .stocktake-scan-stage small { display: block; }
.stocktake-scan-stage strong { font-size: 15px; }
.stocktake-scan-stage small { margin-top: 2px; color: #756f72; font-size: 12px; }
.stocktake-stage-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.stocktake-location-form { display: flex; align-items: end; gap: 10px; max-width: 720px; }
.stocktake-location-form label { flex: 1 1 auto; }
.stocktake-active-location { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--brand); background: #f3f8ff; font-size: 13px; }
.stocktake-active-location span, .stocktake-location-required { color: #6c747d; font-size: 13px; }
.stocktake-location-required { margin: 12px 0; }
.stocktake-feedback { margin: 12px 0; padding: 10px 12px; border-left: 3px solid; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.stocktake-feedback[hidden] { display: none; }
.stocktake-feedback-success { border-color: #2c935d; color: #136948; background: #e6f6ed; }
.stocktake-feedback-warning { border-color: #e3ac22; color: #745000; background: #fff5d6; }
.stocktake-create-form fieldset { display: flex; gap: 18px; align-items: center; min-height: 40px; margin: 0; padding: 5px 10px; border: 1px solid #d9d3d1; border-radius: 6px; }
.stocktake-create-form legend { padding: 0 4px; font-size: 12px; }
.stocktake-create-form fieldset label, .stocktake-location-options label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.stocktake-location-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; max-height: 180px; overflow: auto; padding: 10px; border: 1px solid #e8e1df; border-radius: 6px; }
.stocktake-location-options[hidden] { display: none; }
.stocktake-notes { grid-column: span 2; }
.stocktake-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.stocktake-actions > label { min-width: min(100%, 320px); }
.stocktake-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.stocktake-filters a { padding: 7px 10px; border-radius: 5px; color: #555; }
.stocktake-filters a.active { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.stocktake-status { display: inline-block; padding: 3px 7px; border-radius: 4px; color: #555; background: #f1f1f1; font-size: 12px; white-space: nowrap; }
.stocktake-counting, .stocktake-pending { color: #8a5a00; background: #fff2d5; }
.stocktake-submitted { color: #9b3a10; background: #ffede1; }
.stocktake-approved, .stocktake-matched { color: #136948; background: #e6f6ed; }
.stocktake-surplus, .stocktake-foreign, .stocktake-unexpected, .stocktake-location_mismatch, .stocktake-quantity_mismatch { color: #745000; background: #fff1c7; }
.stocktake-missing, .stocktake-approved_with_exceptions { color: #a9242b; background: #fce9e9; }
.stocktake-table { overflow-x: auto; }
.stocktake-table table { min-width: 830px; width: 100%; }
.stocktake-table td small { display: block; margin-top: 3px; color: #817c80; font-size: 12px; }
.stocktake-table td a { color: var(--brand); }
.stocktake-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 12px 0; color: #756f72; font-size: 13px; }
@media (max-width: 760px) {
  .stocktake-heading { flex-direction: column; gap: 8px; }
  .stocktake-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stocktake-create-form, .stocktake-scan-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stocktake-notes { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .stocktake-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stocktake-create-form, .stocktake-scan-form { grid-template-columns: minmax(0, 1fr); }
  .stocktake-notes { grid-column: auto; }
  .stocktake-location-form { flex-wrap: wrap; }
  .stocktake-location-form label { flex-basis: 100%; }
}

@media (max-width: 720px) {
  .outbound-batch-photo-gallery {
    grid-template-columns: 1fr;
  }
}

/* Blog CMS and public industry content */
.blog-management-title > div:first-child,
.blog-management-title .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-management-title > div:first-child {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  text-decoration: none;
}

.blog-admin-filter {
  display: grid;
  grid-template-columns: 180px 180px minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.blog-admin-filter label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.blog-admin-filter input,
.blog-admin-filter select {
  width: 100%;
}

.blog-admin-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.blog-admin-list-head,
.blog-admin-row {
  display: grid;
  grid-template-columns: minmax(360px, 2fr) minmax(110px, .6fr) minmax(170px, .85fr) 100px minmax(210px, auto);
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}

.blog-admin-list-head {
  color: var(--muted);
  background: #f7f7f8;
  font-size: 13px;
  font-weight: 700;
}

.blog-admin-row + .blog-admin-row {
  border-top: 1px solid var(--line);
}

.blog-admin-row > span:not(.actions) {
  display: grid;
  gap: 5px;
}

.blog-admin-row small {
  color: var(--muted);
  line-height: 1.5;
}

.blog-admin-title {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.blog-admin-title img,
.blog-cover-placeholder {
  width: 72px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
}

.blog-cover-placeholder {
  display: grid;
  place-items: center;
  color: #8d5c23;
  background: #fff1d6;
  font-weight: 900;
}

.blog-admin-title > div {
  min-width: 0;
}

.blog-admin-title strong,
.blog-admin-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}

.blog-taxonomy-row {
  grid-template-columns: minmax(320px, 1.5fr) 180px 100px auto;
}

.blog-composer-card .knowledge-composer-editor textarea {
  min-height: 720px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.75;
  resize: vertical;
}

.blog-preview-modal {
  width: min(980px, calc(100vw - 32px));
}

.public-page-blog {
  min-height: 100vh;
  color: #11100f;
  background: #fff;
}

.blog-index-hero {
  min-height: 420px;
  padding: 148px max(24px, calc((100vw - 1280px) / 2)) 72px;
  box-sizing: border-box;
  color: #fff;
  background-color: #a82018;
  background-image: radial-gradient(circle, rgb(255 255 255 / 15%) 1px, transparent 1.2px);
  background-size: 35px 35px;
}

.blog-index-hero > span,
.blog-article-head .blog-card-meta span:first-child {
  color: #f4afa9;
  font-weight: 900;
}

.blog-index-hero h1 {
  max-width: 850px;
  margin: 16px 0 18px;
  color: #fff;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: 0;
}

.blog-index-hero p {
  max-width: 720px;
  margin: 0;
  color: rgb(255 255 255 / 70%);
  font-size: 18px;
  line-height: 1.8;
}

.blog-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 96px;
}

.blog-category-nav {
  position: static;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e9e5e2;
}

.blog-category-nav > strong {
  margin-right: 8px;
  font-size: 15px;
}

.blog-category-nav a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #e9e5e2;
  border-radius: 999px;
  color: #6d6865;
  background: #faf8f7;
  text-decoration: none;
}

.blog-category-nav a:hover,
.blog-category-nav a.active {
  border-color: #cf342e;
  color: #fff;
  background: #cf342e;
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.blog-card {
  overflow: hidden;
  border: 1px solid #e9e5e2;
  border-radius: 16px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  border-color: #e9a49f;
  box-shadow: 0 14px 34px rgb(20 16 15 / 9%);
}

.blog-card-cover {
  display: block;
  aspect-ratio: 16 / 8.8;
  overflow: hidden;
  background: #faf8f7;
}

.blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.blog-card:hover .blog-card-cover img {
  transform: scale(1.025);
}

.blog-card-body {
  padding: 22px;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #7b858b;
  font-size: 12px;
}

.blog-card h2 {
  margin: 13px 0 10px;
  font-size: 21px;
  line-height: 1.38;
  letter-spacing: 0;
}

.blog-card h2 a {
  color: #11100f;
  text-decoration: none;
}

.blog-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #6d6865;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.blog-card-tags a,
.blog-card-tags span {
  color: #cf342e;
  font-size: 12px;
  text-decoration: none;
}

.blog-empty {
  min-height: 230px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 36px;
  border: 1px solid #e9e5e2;
  border-radius: 18px;
  text-align: center;
  color: #8a817d;
  background: #faf8f7;
}

.blog-empty strong {
  color: #11100f;
  font-size: 22px;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.blog-pagination a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dfe3e5;
  border-radius: 6px;
  color: #536068;
  background: #fff;
  text-decoration: none;
}

.blog-pagination a.active {
  color: #fff;
  background: #cf342e;
  border-color: #cf342e;
}

.blog-article-page {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 126px 0 80px;
}

.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  color: #7b858b;
  font-size: 13px;
}

.blog-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.blog-article-head {
  max-width: 860px;
  margin: 0 auto 36px;
  text-align: center;
}

.blog-article-head .blog-card-meta {
  justify-content: center;
}

.blog-article-head h1 {
  margin: 18px 0;
  color: #11100f;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.18;
  letter-spacing: 0;
}

.blog-article-head > p {
  margin: 0 auto;
  max-width: 760px;
  color: #6d6865;
  font-size: 17px;
  line-height: 1.8;
}

.blog-article-head > img {
  width: 100%;
  max-height: 520px;
  margin-top: 30px;
  border-radius: 8px;
  object-fit: cover;
}

.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 240px;
  justify-content: center;
  gap: 42px;
  align-items: start;
}

.blog-article-layout > * {
  min-width: 0;
}

.blog-key-points {
  margin-bottom: 28px;
  padding: 20px 24px;
  border-left: 4px solid #cf342e;
  background: #fff4f3;
}

.blog-key-points ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.blog-key-points li + li {
  margin-top: 7px;
}

.blog-article-content {
  color: #3c3734;
  font-size: 16px;
  line-height: 1.9;
}

.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
  margin: 2em 0 .75em;
  color: #11100f;
  line-height: 1.35;
  letter-spacing: 0;
}

.blog-article-content h2 {
  font-size: 27px;
}

.blog-article-content h3 {
  font-size: 22px;
}

.blog-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.blog-article-content pre,
.blog-article-content table {
  max-width: 100%;
  overflow: auto;
}

.blog-article-content pre {
  padding: 18px;
  border-radius: 6px;
  color: #edf2f4;
  background: #241112;
}

.blog-article-content table {
  width: 100%;
  border-collapse: collapse;
}

.blog-article-content th,
.blog-article-content td {
  padding: 10px 12px;
  border: 1px solid #dfe3e5;
  text-align: left;
}

.blog-article-content blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  border-left: 4px solid #cf342e;
  color: #5f4b49;
  background: #fff4f3;
}

.blog-article-aside {
  position: sticky;
  top: 104px;
  padding: 20px;
  border: 1px solid #e9e5e2;
  border-top: 3px solid #cf342e;
  border-radius: 14px;
  background: #faf8f7;
}

.blog-article-aside dl {
  margin: 14px 0;
}

.blog-article-aside dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f1;
  font-size: 13px;
}

.blog-article-aside dt {
  color: #7b858b;
}

.blog-article-aside dd {
  margin: 0;
  text-align: right;
}

.blog-references {
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid #dfe3e5;
}

.blog-related {
  margin-top: 72px;
  padding-top: 42px;
  border-top: 1px solid #dfe3e5;
}

.blog-article-page .blog-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .blog-admin-list {
    overflow-x: auto;
  }

  .blog-admin-list-head,
  .blog-admin-row {
    min-width: 1040px;
  }

  .blog-admin-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-admin-search {
    grid-column: 1 / -1;
  }

  .blog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .blog-index-hero {
    min-height: 360px;
    padding: 120px 20px 50px;
  }

  .blog-article-page {
    padding-top: 112px;
  }

  .blog-index-layout,
  .blog-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-article-content table {
    display: block;
  }

  .blog-index-layout,
  .blog-article-page {
    width: min(100% - 32px, 680px);
  }

  .blog-category-nav,
  .blog-article-aside {
    position: static;
  }

  .blog-category-nav {
    gap: 8px;
  }

  .blog-category-nav > strong {
    width: 100%;
    margin: 0 0 4px;
  }

  .blog-card-grid,
  .blog-article-page .blog-card-grid {
    grid-template-columns: 1fr;
  }

  .blog-index-hero h1 {
    font-size: 42px;
  }

  .blog-article-head h1 {
    font-size: 34px;
  }

  .blog-admin-filter {
    grid-template-columns: 1fr;
  }

  .blog-admin-search {
    grid-column: auto;
  }

  .blog-composer-card .knowledge-composer-editor textarea {
    min-height: 520px;
    padding: 16px;
  }
}

/* Official warehouse package and order tables */
.portal-store .store-workspace-search {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}

.portal-store .store-workspace-search label {
  display: grid;
  gap: 6px;
  width: min(100%, 360px);
}

.portal-store .store-workspace-search input {
  width: 100%;
  min-width: 0;
}

.portal-store .store-workspace-search .store-workspace-status {
  width: min(100%, 180px);
}

.portal-store .store-workspace-status select {
  width: 100%;
}

.portal-store .store-workspace-pagination,
.portal-store .store-workspace-pagination > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-store .store-workspace-pagination {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.portal-store .store-workspace-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-store .store-workspace-pagination select {
  width: auto;
  min-width: 68px;
}

.portal-store .store-business-table-wrap {
  border-radius: 8px;
}

.portal-store .store-business-table {
  min-width: 1360px;
  table-layout: fixed;
}

.portal-store .store-order-table {
  min-width: 1420px;
}

.portal-store .store-unclaimed-table {
  min-width: 1480px;
}

.outbound-batch-table {
  min-width: 1280px;
  table-layout: fixed;
}

.channel-order-table {
  min-width: 1780px;
  table-layout: fixed;
}

.channel-order-table th:nth-child(1) { width: 150px; }
.channel-order-table th:nth-child(2) { width: 220px; }
.channel-order-table th:nth-child(3) { width: 190px; }
.channel-order-table th:nth-child(4) { width: 220px; }
.channel-order-table th:nth-child(5) { width: 220px; }
.channel-order-table th:nth-child(6) { width: 280px; }
.channel-order-table th:nth-child(7) { width: 210px; }
.channel-order-table th:nth-child(8) { width: 220px; }
.channel-order-table th:nth-child(9) { width: 180px; }

.channel-order-table th:last-child,
.channel-order-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  box-shadow: -8px 0 12px rgba(30, 30, 30, 0.05);
}

.channel-order-table th:last-child {
  z-index: 2;
  background: #f7f7f7;
}

.channel-order-table td:last-child {
  background: #fff;
}

.channel-order-status-cell small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.modal-card.supplier-warehouse-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: 1120px;
}

.supplier-warehouse-modal .modal-body {
  display: block;
  padding: 18px 20px 22px;
}

.supplier-warehouse-table {
  min-width: 980px;
  table-layout: fixed;
}

.supplier-warehouse-table th:nth-child(1) { width: 16%; }
.supplier-warehouse-table th:nth-child(2) { width: 22%; }
.supplier-warehouse-table th:nth-child(3) { width: 15%; }
.supplier-warehouse-table th:nth-child(4) { width: 20%; }
.supplier-warehouse-table th:nth-child(5) { width: 12%; }
.supplier-warehouse-table th:nth-child(6) { width: 15%; }

.supplier-warehouse-table td strong,
.supplier-warehouse-table td small {
  display: block;
  overflow-wrap: anywhere;
}

.supplier-warehouse-table td small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.55;
}

.supplier-warehouse-table .admin-table-actions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.store-table-photo-button {
  display: grid;
  grid-template-columns: 44px auto;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
}

.store-table-photo-button img {
  width: 44px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
}

.outbound-batch-photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.outbound-batch-photo-gallery figure {
  margin: 0;
  min-width: 0;
}

.outbound-batch-photo-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: contain;
  background: #f7f7f7;
}

.outbound-batch-photo-gallery figcaption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.modal-card.compact.outbound-batch-detail-modal {
  width: min(1080px, 100%);
  max-width: min(1080px, calc(100vw - 48px));
}

.outbound-batch-detail-modal .modal-body {
  display: block;
  padding: 18px 20px 22px;
}

.outbound-batch-detail {
  display: grid;
  gap: 20px;
}

.outbound-batch-detail-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid #efdfe0;
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: #fcf9f9;
}

.outbound-batch-detail-overview-copy {
  min-width: 0;
}

.outbound-batch-detail-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.outbound-batch-detail-overview h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 11px 0 6px;
  font-size: 18px;
  line-height: 1.45;
}

.outbound-batch-detail-overview h3 span {
  overflow-wrap: anywhere;
}

.outbound-batch-detail-overview h3 b {
  color: var(--brand);
  font-weight: 700;
}

.outbound-batch-detail-overview p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.outbound-batch-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  min-width: 250px;
}

.outbound-batch-detail-stats > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 0 4px;
  min-width: 0;
  padding: 4px 14px;
  border-left: 1px solid #eadedf;
  text-align: center;
}

.outbound-batch-detail-stats span {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.outbound-batch-detail-stats strong {
  font-size: 22px;
  line-height: 1.2;
}

.outbound-batch-detail-stats small {
  color: var(--muted);
  font-size: 11px;
}

.outbound-batch-detail-section {
  display: grid;
  gap: 10px;
}

.outbound-batch-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.outbound-batch-detail-section-head h3 {
  margin: 0;
  font-size: 14px;
}

.outbound-batch-detail-section-head > span {
  color: var(--muted);
  font-size: 12px;
}

.outbound-batch-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
}

.outbound-batch-detail-grid > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 68px;
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.outbound-batch-detail-grid > div.wide {
  grid-column: 1 / -1;
}

.outbound-batch-detail-grid span,
.outbound-batch-detail-note > span {
  color: var(--muted);
  font-size: 11px;
}

.outbound-batch-detail-grid strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.55;
}

.outbound-batch-order-wrap {
  border-radius: 6px;
}

.outbound-batch-order-detail {
  min-width: 880px;
  table-layout: fixed;
}

.outbound-batch-order-detail th:nth-child(1) { width: 24%; }
.outbound-batch-order-detail th:nth-child(2) { width: 25%; }
.outbound-batch-order-detail th:nth-child(3) { width: 9%; }
.outbound-batch-order-detail th:nth-child(4) { width: 11%; }
.outbound-batch-order-detail th:nth-child(5) { width: 13%; }
.outbound-batch-order-detail th:nth-child(6) { width: 18%; }

.outbound-batch-order-detail th,
.outbound-batch-order-detail td {
  padding: 11px 12px;
  vertical-align: top;
  font-size: 12px;
}

.outbound-batch-order-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outbound-batch-order-cell strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.outbound-batch-order-cell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.outbound-batch-order-status {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.outbound-batch-detail-empty {
  color: var(--muted);
  text-align: center;
}

.outbound-batch-detail-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.outbound-batch-detail-photos a {
  display: block;
  min-width: 0;
}

.outbound-batch-detail-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  background: #f5f6f7;
}

.outbound-batch-detail-note {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-left: 3px solid #d9d9d9;
  background: #fafafa;
}

.outbound-batch-detail-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .modal-card.supplier-warehouse-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .supplier-warehouse-modal .modal-head,
  .supplier-warehouse-modal .modal-actions,
  .supplier-warehouse-modal .modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .modal-card.compact.outbound-batch-detail-modal {
    max-width: calc(100vw - 20px);
  }

  .outbound-batch-detail-modal .modal-head,
  .outbound-batch-detail-modal .modal-actions,
  .outbound-batch-detail-modal .modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .outbound-batch-detail-overview {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 15px;
  }

  .outbound-batch-detail-stats {
    min-width: 0;
  }

  .outbound-batch-detail-stats > div:first-child {
    border-left: 0;
  }

  .outbound-batch-detail-grid {
    grid-template-columns: 1fr;
  }

  .outbound-batch-detail-grid > div.wide {
    grid-column: auto;
  }

  .outbound-batch-order-wrap {
    overflow: visible;
    border: 1px solid var(--line);
  }

  .outbound-batch-order-detail {
    min-width: 0;
  }

  .outbound-batch-order-detail thead {
    display: none;
  }

  .outbound-batch-order-detail tbody,
  .outbound-batch-order-detail tr,
  .outbound-batch-order-detail td {
    display: block;
    width: 100%;
  }

  .outbound-batch-order-detail tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .outbound-batch-order-detail tr:last-child {
    border-bottom: 0;
  }

  .outbound-batch-order-detail td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 12px;
    border: 0;
  }

  .outbound-batch-order-detail td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
  }

  .outbound-batch-detail-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.modal-checkbox.outbound-order-checkbox {
  min-height: 54px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}

.portal-store .store-picking-table {
  min-width: 1160px;
}

.portal-store .store-packing-table {
  min-width: 1880px;
}

.portal-store .store-packing-table th:nth-child(1) { width: 190px; }
.portal-store .store-packing-table th:nth-child(2) { width: 190px; }
.portal-store .store-packing-table th:nth-child(3) { width: 215px; }
.portal-store .store-packing-table th:nth-child(4) { width: 175px; }
.portal-store .store-packing-table th:nth-child(5) { width: 205px; }
.portal-store .store-packing-table th:nth-child(6) { width: 175px; }
.portal-store .store-packing-table th:nth-child(7) { width: 175px; }
.portal-store .store-packing-table th:nth-child(8) { width: 180px; }
.portal-store .store-packing-table th:nth-child(9) { width: 230px; }

.portal-store .store-packing-table th:last-child,
.portal-store .store-packing-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: 1px solid var(--line);
  background: #fff;
  box-shadow: -8px 0 14px rgba(22, 34, 44, 0.06);
}

.portal-store .store-packing-table th:last-child {
  z-index: 3;
  background: #f3f6f8;
}

.portal-store .store-packing-table tbody tr:hover td:last-child {
  background: #f8fbfd;
}

.portal-store .store-business-table th {
  padding: 9px 10px;
  white-space: nowrap;
  color: #53606a;
  background: #f3f6f8;
  font-size: 11px;
}

.portal-store .store-business-table td {
  padding: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.portal-store .store-business-table tbody tr:hover td {
  background: #f8fbfd;
}

.portal-store .store-business-table td > strong,
.portal-store .store-business-table td > small {
  display: block;
  overflow-wrap: anywhere;
}

.portal-store .store-business-table td > small {
  margin-top: 4px;
}

.portal-store .store-table-primary-cell {
  width: 190px;
}

.portal-store .store-table-statuses {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.portal-store .store-table-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-store .store-table-actions {
  width: 220px;
}

.portal-store .store-package-photo-cell {
  width: 112px;
}

.portal-store .store-package-photo-actions {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.portal-store .store-package-photo-button {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 0;
  border: 0;
  color: var(--brand);
  background: transparent;
}

.portal-store .store-package-photo-button:hover {
  box-shadow: none;
  transform: none;
}

.portal-store .store-package-photo-thumb {
  width: 72px;
  height: 54px;
}

.portal-store .store-package-photo-text-button {
  min-height: 32px;
  padding: 5px 8px;
  border-color: var(--line);
  color: var(--brand);
  background: #fff;
  font-size: 12px;
}

.portal-store .store-package-photo-upload {
  min-height: 30px;
  padding: 4px 8px;
  border-color: var(--line);
  color: var(--brand);
  background: #fff;
  font-size: 11px;
}

.portal-store .store-table-actions-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 6px;
}

.portal-store .store-table-actions-inner button {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  white-space: nowrap;
  font-size: 11px;
}

.portal-store .store-picking-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef1;
}

.portal-store .store-picking-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.portal-store .store-picking-items-cell {
  width: 310px;
}

.portal-store .store-picking-item {
  display: grid;
  grid-template-columns: 38px 78px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}

.portal-store .store-picking-item:last-of-type {
  border-bottom: 0;
}

.portal-store .store-picking-item i {
  color: #a15f00;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.portal-store .store-picking-item.picked i {
  color: #238636;
}

.portal-store .store-picking-item strong,
.portal-store .store-picking-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-store .store-picking-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0;
  padding: 12px;
  border-block: 1px solid var(--line);
  background: #f8fafb;
}

.portal-store .store-picking-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.portal-store .store-picking-filters input,
.portal-store .store-picking-filters select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 12px;
}

.portal-store .store-picking-filter-actions {
  display: flex;
  gap: 6px;
}

.portal-store .store-picking-filter-actions button,
.portal-store .store-package-n-code-print,
.inbound-session-item > button {
  min-height: 32px;
  padding: 5px 9px;
  white-space: nowrap;
  font-size: 11px;
}

.portal-store .store-packing-filters {
  grid-template-columns: minmax(280px, 1.7fr) minmax(170px, 1fr) minmax(210px, 1.2fr) auto;
}

.portal-store .store-packing-package-cell .store-table-photo-button {
  margin-top: 7px;
}

.portal-store .store-packing-package-cell > button:not(.store-table-photo-button) {
  min-height: 30px;
  margin-top: 7px;
  padding: 4px 8px;
  font-size: 11px;
}

.portal-store .store-packing-action-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.modal-card.store-packing-detail-modal {
  width: min(1120px, 100%);
  max-width: min(1120px, calc(100vw - 48px));
}

.store-packing-detail-modal .modal-body {
  display: block;
}

.store-packing-detail {
  display: grid;
  gap: 14px;
}

.store-packing-detail h3 {
  margin: 0;
  font-size: 14px;
}

.store-packing-detail-grid {
  margin: 0;
}

.store-packing-detail-grid > div small,
.store-packing-detail-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.store-packing-detail-table {
  min-width: 760px;
}

.store-packing-detail-table th,
.store-packing-detail-table td {
  padding: 8px 10px;
  font-size: 12px;
}

.store-packing-detail-alert {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid #d97706;
  background: #fff8e8;
  color: #7c4a03;
  font-size: 12px;
}

.store-packing-detail-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.store-packing-detail-photos a {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}

.store-packing-detail-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: contain;
  background: #f5f6f7;
}

.modal-card.store-picking-workspace {
  width: min(1180px, 100%);
  max-width: min(1180px, calc(100vw - 48px));
}

.store-picking-workspace .modal-body {
  display: block;
}

.store-picking-workspace-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.store-picking-workspace-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: #fff;
}

.store-picking-workspace-summary span,
.store-picking-workspace-summary small {
  color: var(--muted);
  font-size: 11px;
}

.store-picking-scan-form {
  margin-bottom: 12px;
}

.store-picking-scan-form > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.store-picking-scan-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px auto;
  align-items: end;
  gap: 8px;
}

.store-picking-scan-form input {
  min-height: 46px;
  padding: 8px 12px;
  font-size: 18px;
}

.store-picking-scan-form > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.store-picking-quantity-field {
  display: grid;
  gap: 4px;
}

.store-picking-quantity-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.store-picking-quantity-field input {
  font-size: 15px;
}

.store-picking-feedback {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-left: 4px solid #2f855a;
  color: #166534;
  background: #ecfdf3;
  font-weight: 700;
}

.store-picking-feedback.error {
  border-color: #c62828;
  color: #991b1b;
  background: #fff1f1;
}

.store-picking-workspace-table {
  max-height: 390px;
}

.store-picking-workspace-table table {
  min-width: 940px;
}

.store-picking-workspace-table th,
.store-picking-workspace-table td {
  padding: 8px;
  font-size: 12px;
  vertical-align: middle;
}

.store-picking-workspace-table td strong,
.store-picking-workspace-table td small {
  display: block;
}

.store-picking-workspace-table tr.picked td {
  background: #f0fff4;
}

.store-picking-package-photo {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.packing-fee-list-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbfc;
}

.packing-fee-list-head,
.packing-fee-add,
.packing-fee-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.packing-fee-list-head > div:first-child strong,
.packing-fee-list-head > div:first-child small {
  display: block;
}

.packing-fee-list-head > div:first-child small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400;
}

.packing-fee-add select {
  min-width: 190px;
}

.packing-fee-add button {
  white-space: nowrap;
}

.packing-fee-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.packing-fee-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(80px, .7fr) 90px minmax(90px, .7fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.packing-fee-row:last-child {
  border-bottom: 0;
}

.packing-fee-row > div strong,
.packing-fee-row > div small {
  display: block;
}

.packing-fee-row > div small,
.packing-fee-row label span {
  color: var(--muted);
  font-size: 10px;
}

.packing-fee-row label {
  display: grid;
  gap: 3px;
}

.packing-fee-row input {
  min-height: 34px;
  padding: 5px 7px;
}

.packing-fee-price,
.packing-fee-subtotal {
  white-space: nowrap;
  font-size: 13px;
}

.packing-fee-row .icon-button {
  min-height: 32px;
  padding: 0;
}

.packing-fee-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.packing-fee-total {
  justify-content: flex-end;
  padding-top: 2px;
}

.packing-fee-total strong {
  min-width: 90px;
  color: var(--brand);
  text-align: right;
  font-size: 18px;
}

@media (max-width: 720px) {
  .packing-fee-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  .packing-fee-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .packing-fee-add select {
    min-width: 0;
  }

  .packing-fee-row {
    grid-template-columns: minmax(0, 1fr) 72px 34px;
  }

  .packing-fee-row > div {
    grid-column: 1 / 2;
  }

  .packing-fee-price {
    display: none;
  }

  .packing-fee-row label {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .packing-fee-subtotal {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .packing-fee-row .icon-button {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

.store-picking-exceptions {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.store-picking-exceptions h3 {
  margin: 12px 0 6px;
  font-size: 14px;
}

.store-picking-exceptions article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.store-picking-exceptions article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.store-picking-workspace-actions {
  flex-wrap: wrap;
}

@media (max-width: 1280px) {
  .portal-store .store-picking-filters,
  .portal-store .store-packing-filters {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .portal-store .store-picking-filters,
  .portal-store .store-packing-filters,
  .store-picking-workspace-summary {
    grid-template-columns: 1fr 1fr;
  }

  .store-picking-scan-form > div {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .store-picking-scan-form > div > button {
    grid-column: 1 / -1;
  }

  .store-picking-filter-actions {
    grid-column: 1 / -1;
  }

  .modal-card.store-packing-detail-modal {
    max-width: calc(100vw - 20px);
  }

  .store-packing-detail-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portal-store .store-workspace-search {
    flex-wrap: wrap;
  }

  .portal-store .store-workspace-search label {
    flex: 1 1 180px;
  }

  .portal-store .store-workspace-pagination > div {
    flex-wrap: wrap;
  }

  .portal-store .store-business-table-wrap {
    width: 100%;
    overscroll-behavior-inline: contain;
  }
}

.portal-store .sidebar-toggle-main {
  display: inline-flex;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.portal-store .sidebar-toggle-main img,
.portal-store .sidebar-toggle-mobile img {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.portal-store .sidebar-toggle-mobile {
  display: none;
}

@media (max-width: 880px) {
  #app.portal-store,
  #app.portal-store.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  #app.portal-store .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: min(280px, calc(100vw - 36px));
    height: 100vh;
    padding: 0 12px 14px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 12px 0 28px rgba(25, 48, 70, 0.16);
  }

  #app.portal-store.sidebar-collapsed .sidebar {
    display: none;
  }

  .portal-store .sidebar-toggle-mobile {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  .portal-store .main {
    padding: 0 16px 22px;
  }

  .portal-store .account-strip {
    margin: 0 -16px 18px;
    padding: 0 12px;
  }
}

/* Public portal v2: adapted from the downloaded Figma React design. */
#app.public-portal-v2 {
  --public-red: #cf342e;
  --public-red-dark: #8d1715;
  --public-ink: #11100f;
  --public-muted: #6d6865;
  --public-line: #e9e5e2;
  --public-soft: #faf8f7;
  min-height: 100vh;
  color: var(--public-ink);
  background: #fff;
  font-family: "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

.public-portal-v2 .public-page {
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
}

.public-portal-v2 .public-nav {
  position: fixed;
  z-index: 80;
  top: 16px;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(1280px, calc(100% - 32px));
  min-height: 72px;
  padding: 10px 24px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: rgb(82 12 11 / 50%);
  box-shadow: 0 12px 34px rgb(50 10 10 / 20%);
  transform: translateX(-50%);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.public-portal-v2 .public-nav.scrolled,
.public-portal-v2 .public-nav.mobile-open {
  border-color: rgb(20 16 15 / 8%);
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 12px 34px rgb(20 16 15 / 12%);
}

.public-portal-v2 .public-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  color: #fff;
}

.public-portal-v2 .public-nav.scrolled .public-brand,
.public-portal-v2 .public-nav.mobile-open .public-brand {
  color: var(--public-ink);
}

.public-portal-v2 .public-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

.public-portal-v2 .public-brand strong {
  display: block;
  color: inherit;
  font-size: 16px;
  line-height: 1.1;
}

.public-portal-v2 .public-brand small {
  display: block;
  margin-top: 3px;
  color: rgb(255 255 255 / 55%);
  font-size: 10px;
}

.public-portal-v2 .public-nav.scrolled .public-brand small,
.public-portal-v2 .public-nav.mobile-open .public-brand small {
  color: #928b87;
}

.public-portal-v2 .public-nav nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.public-portal-v2 .public-nav nav > a,
.public-portal-v2 .public-nav-item > a {
  padding: 9px 13px;
  border-radius: 9px;
  color: rgb(255 255 255 / 80%);
  font-size: 14px;
  font-weight: 700;
}

.public-portal-v2 .public-nav nav > a:hover,
.public-portal-v2 .public-nav-item > a:hover,
.public-portal-v2 .public-nav nav > a.active,
.public-portal-v2 .public-nav-item > a.active {
  color: #fff;
  background: rgb(255 255 255 / 13%);
}

.public-portal-v2 .public-nav.scrolled nav > a,
.public-portal-v2 .public-nav.scrolled .public-nav-item > a,
.public-portal-v2 .public-nav.mobile-open nav > a,
.public-portal-v2 .public-nav.mobile-open .public-nav-item > a {
  color: #3c3734;
}

.public-portal-v2 .public-nav.scrolled nav > a:hover,
.public-portal-v2 .public-nav.scrolled .public-nav-item > a:hover,
.public-portal-v2 .public-nav.scrolled nav > a.active,
.public-portal-v2 .public-nav.scrolled .public-nav-item > a.active,
.public-portal-v2 .public-nav.mobile-open nav > a.active,
.public-portal-v2 .public-nav.mobile-open .public-nav-item > a.active {
  color: var(--public-red);
  background: #fbe9e7;
}

.public-portal-v2 .public-nav-has-children > a {
  border-radius: 999px;
  background: var(--public-red);
  color: #fff;
}

.public-portal-v2 .public-nav-dropdown {
  top: calc(100% + 10px);
  min-width: 176px;
  padding: 8px;
  border: 1px solid var(--public-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(20 16 15 / 16%);
}

.public-portal-v2 .public-nav-dropdown a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #403b38;
}

.public-portal-v2 .public-nav-dropdown a:hover,
.public-portal-v2 .public-nav-dropdown a:focus-visible,
.public-portal-v2 .public-nav-dropdown a.active {
  color: var(--public-red);
  background: #fbe9e7;
}

.public-portal-v2 .public-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 142px;
}

.public-portal-v2 .public-nav-actions a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.public-portal-v2 .public-nav-actions .ghost-link {
  border: 0;
  color: #fff;
  background: transparent;
}

.public-portal-v2 .public-nav-actions .primary-link {
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-nav.scrolled .public-nav-actions .ghost-link,
.public-portal-v2 .public-nav.mobile-open .public-nav-actions .ghost-link {
  color: #302b28 !important;
}

.public-portal-v2 .public-mobile-menu {
  display: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 10px;
  background: rgb(255 255 255 / 9%);
}

.public-portal-v2 .public-mobile-menu span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  background: #fff;
  transition: transform 160ms ease, opacity 160ms ease;
}

.public-portal-v2 .public-nav.scrolled .public-mobile-menu span,
.public-portal-v2 .public-nav.mobile-open .public-mobile-menu span {
  background: var(--public-ink);
}

.public-portal-v2 .public-nav.mobile-open .public-mobile-menu span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.public-portal-v2 .public-nav.mobile-open .public-mobile-menu span:nth-child(2) {
  opacity: 0;
}

.public-portal-v2 .public-nav.mobile-open .public-mobile-menu span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.public-portal-v2 .public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 64px;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 940px;
  margin: 0;
  padding: 150px max(6vw, calc((100vw - 1280px) / 2)) 90px;
  box-sizing: border-box;
  color: #fff;
  background-color: #bd2c27;
  background-image: radial-gradient(circle, rgb(255 255 255 / 28%) 1px, transparent 1.2px);
  background-position: 0 0;
  background-size: 35px 35px;
}

.public-portal-v2 .public-hero-copy {
  max-width: 620px;
}

.public-portal-v2 .public-kicker,
.public-portal-v2 .public-v2-heading > span,
.public-portal-v2 .public-v2-heading > div > span,
.public-portal-v2 .public-home-recruitment > div:first-child > span,
.public-portal-v2 .public-content-hero > span,
.public-portal-v2 .public-content-hero > div > span {
  display: block;
  margin-bottom: 22px;
  color: var(--public-red);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-portal-v2 .public-hero .public-kicker {
  color: rgb(255 255 255 / 68%);
}

.public-portal-v2 .public-hero h1 {
  max-width: 570px;
  margin: 0 0 26px;
  color: #fff;
  font-size: 80px;
  line-height: 0.94;
  letter-spacing: 0;
}

.public-portal-v2 .public-hero p {
  max-width: 590px;
  margin: 0 0 30px;
  color: rgb(255 255 255 / 76%);
  font-size: 18px;
  line-height: 1.8;
}

.public-portal-v2 .public-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.public-portal-v2 .public-hero-actions a,
.public-portal-v2 .public-page-cta a,
.public-portal-v2 .public-section-action a,
.public-portal-v2 .public-outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.public-portal-v2 .public-hero .public-hero-actions .primary-link,
.public-portal-v2 .public-content-hero .public-hero-actions .primary-link,
.public-portal-v2 .public-home-recruitment .primary-link {
  color: var(--public-red);
  background: #fff;
  box-shadow: 0 8px 24px rgb(45 8 7 / 20%);
}

.public-portal-v2 .public-hero .public-hero-actions .ghost-link,
.public-portal-v2 .public-content-hero .public-hero-actions .ghost-link,
.public-portal-v2 .public-home-recruitment .ghost-link {
  border: 1px solid rgb(255 255 255 / 35%);
  color: #fff;
  background: transparent;
}

.public-portal-v2 .public-invite-box {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 520px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 16px;
  background: rgb(255 255 255 / 9%);
}

.public-portal-v2 .public-invite-box label {
  flex: 1;
  color: rgb(255 255 255 / 72%);
  font-size: 12px;
}

.public-portal-v2 .public-invite-box input {
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: #fff;
}

.public-portal-v2 .public-invite-box button {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--public-red);
  font-weight: 800;
  background: #fff;
}

.public-portal-v2 .public-hero-visual {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
}

.public-portal-v2 .public-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-portal-v2 .public-hero-metrics article {
  display: grid;
  place-content: center;
  min-height: 128px;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 18px;
  text-align: center;
  background: rgb(255 255 255 / 10%);
}

.public-portal-v2 .public-hero-metrics strong {
  color: #fff;
  font-size: 38px;
  line-height: 1;
}

.public-portal-v2 .public-hero-metrics span {
  margin-top: 7px;
  color: rgb(255 255 255 / 60%);
  font-size: 12px;
}

.public-portal-v2 .public-announcement-card {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgb(63 9 8 / 20%);
}

.public-portal-v2 .public-announcement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.public-portal-v2 .public-announcement-head span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7772;
}

.public-portal-v2 .public-announcement-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee9e6;
}

.public-portal-v2 .public-announcement-card li:last-child {
  border-bottom: 0;
}

.public-portal-v2 .public-announcement-card .tag {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
}

.public-portal-v2 .public-announcement-card strong {
  font-size: 14px;
}

.public-portal-v2 .public-announcement-card time {
  color: #a19a96;
  font-size: 11px;
}

.public-portal-v2 .public-v2-section {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 104px 0;
}

.public-portal-v2 .public-v2-heading {
  margin-bottom: 50px;
}

.public-portal-v2 .public-v2-heading.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.public-portal-v2 .public-v2-heading.split > p,
.public-portal-v2 .public-v2-heading.split > div + p {
  max-width: 410px;
  margin: 0;
  color: var(--public-muted);
  line-height: 1.75;
}

.public-portal-v2 .public-v2-heading.center {
  text-align: center;
}

.public-portal-v2 .public-v2-heading h2,
.public-portal-v2 .public-home-recruitment h2,
.public-portal-v2 .public-page-cta h2 {
  margin: 0;
  color: var(--public-ink);
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
}

.public-portal-v2 .public-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-portal-v2 .public-service-grid article,
.public-portal-v2 .public-trust-tiles article,
.public-portal-v2 .public-home-step-grid article,
.public-portal-v2 .public-testimonial-grid article,
.public-portal-v2 .public-daily-grid article {
  border: 1px solid var(--public-line);
  border-radius: 18px;
  background: var(--public-soft);
}

.public-portal-v2 .public-service-grid article {
  min-height: 205px;
  padding: 30px;
}

.public-portal-v2 .public-service-grid article.accent,
.public-portal-v2 .public-trust-tiles article.accent,
.public-portal-v2 .public-testimonial-grid article.accent {
  border-color: var(--public-red);
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-service-grid i,
.public-portal-v2 .public-trust-tiles i,
.public-portal-v2 .public-home-step-grid i,
.public-portal-v2 .public-recruit-benefits i {
  display: block;
  margin-bottom: 18px;
  font-size: 25px;
  font-style: normal;
}

.public-portal-v2 .public-service-grid strong,
.public-portal-v2 .public-home-step-grid strong,
.public-portal-v2 .public-daily-grid strong {
  display: block;
  margin-bottom: 10px;
  font-size: 19px;
}

.public-portal-v2 .public-service-grid p,
.public-portal-v2 .public-home-step-grid p,
.public-portal-v2 .public-daily-grid p {
  margin: 0;
  color: var(--public-muted);
  line-height: 1.7;
}

.public-portal-v2 .public-service-grid .accent p,
.public-portal-v2 .public-home-step-grid p,
.public-portal-v2 .public-testimonial-grid .accent p {
  color: rgb(255 255 255 / 74%);
}

.public-portal-v2 .public-section-action {
  margin-top: 44px;
  text-align: center;
}

.public-portal-v2 .public-section-action a,
.public-portal-v2 .public-outline-link {
  min-height: 44px;
  border: 1px solid var(--public-red);
  color: var(--public-red);
}

.public-portal-v2 .public-home-trust {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 80px;
  align-items: center;
  width: min(1280px, calc(100% - 48px));
  padding-top: 120px;
  padding-bottom: 120px;
}

.public-portal-v2 .public-home-trust .lead {
  max-width: 560px;
  margin: -25px 0 32px;
  color: var(--public-muted);
  font-size: 17px;
  line-height: 1.8;
}

.public-portal-v2 .public-numbered-list {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.public-portal-v2 .public-numbered-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
}

.public-portal-v2 .public-numbered-list b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-numbered-list strong {
  display: block;
  margin-bottom: 4px;
}

.public-portal-v2 .public-numbered-list p {
  margin: 0;
  color: var(--public-muted);
  line-height: 1.6;
}

.public-portal-v2 .public-trust-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-portal-v2 .public-trust-tiles article {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 22px;
  text-align: center;
}

.public-portal-v2 .public-trust-tiles i {
  margin-bottom: 8px;
}

.public-portal-v2 .public-trust-tiles strong,
.public-portal-v2 .public-trust-tiles span {
  display: block;
}

.public-portal-v2 .public-trust-tiles span {
  margin-top: 4px;
  color: #9a928e;
  font-size: 12px;
}

.public-portal-v2 .public-trust-tiles .accent span {
  color: rgb(255 255 255 / 65%);
}

.public-portal-v2 .public-city-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
}

.public-portal-v2 .public-city-chips small {
  width: 100%;
  margin-bottom: 4px;
  color: #9b938f;
}

.public-portal-v2 .public-city-chips span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #5c5551;
  font-size: 12px;
  background: #f3f1ef;
}

.public-portal-v2 .public-home-flow {
  color: #fff;
  background: var(--public-red-dark);
}

.public-portal-v2 .public-home-flow .public-v2-heading span,
.public-portal-v2 .public-home-flow .public-v2-heading h2 {
  color: #fff;
}

.public-portal-v2 .public-home-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.public-portal-v2 .public-home-step-grid article {
  min-height: 260px;
  padding: 34px;
  border-color: rgb(255 255 255 / 17%);
  background: rgb(255 255 255 / 10%);
}

.public-portal-v2 .public-home-step-grid b {
  display: block;
  margin-bottom: 24px;
  color: rgb(255 255 255 / 24%);
  font-family: Georgia, serif;
  font-size: 44px;
}

.public-portal-v2 .public-home-step-grid strong {
  color: #fff;
}

.public-portal-v2 .public-section-action.light a {
  border-color: #fff;
  color: var(--public-red);
  background: #fff;
}

.public-portal-v2 .public-home-coverage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
  gap: 80px;
  align-items: center;
}

.public-portal-v2 .public-home-coverage .public-v2-heading p {
  max-width: 520px;
  color: var(--public-muted);
  line-height: 1.75;
}

.public-portal-v2 .public-coverage-list {
  display: grid;
  gap: 14px;
}

.public-portal-v2 .public-coverage-list article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: var(--public-soft);
}

.public-portal-v2 .public-coverage-list article.active {
  border-color: var(--public-red);
  background: #fff2f0;
}

.public-portal-v2 .public-coverage-list article > b {
  font-size: 20px;
  text-align: center;
}

.public-portal-v2 .public-coverage-list strong,
.public-portal-v2 .public-coverage-list span {
  display: block;
}

.public-portal-v2 .public-coverage-list span {
  margin-top: 5px;
  color: var(--public-muted);
  font-size: 13px;
}

.public-portal-v2 .public-coverage-list em {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  background: var(--public-red);
}

.public-portal-v2 .public-coverage-list article:not(.active) em {
  color: #8d8682;
  background: #ece9e7;
}

.public-portal-v2 .public-home-recruitment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: 70px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 72px 64px;
  border-radius: 20px;
  color: #fff;
  background: var(--public-red-dark);
}

.public-portal-v2 .public-home-recruitment > div:first-child > span,
.public-portal-v2 .public-home-recruitment h2 {
  color: #fff;
}

.public-portal-v2 .public-home-recruitment p {
  max-width: 570px;
  color: rgb(255 255 255 / 68%);
  line-height: 1.75;
}

.public-portal-v2 .public-recruit-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-portal-v2 .public-recruit-benefits article {
  min-height: 135px;
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 16px;
  background: rgb(255 255 255 / 9%);
}

.public-portal-v2 .public-recruit-benefits i {
  margin-bottom: 10px;
}

.public-portal-v2 .public-recruit-benefits strong,
.public-portal-v2 .public-recruit-benefits span {
  display: block;
}

.public-portal-v2 .public-recruit-benefits span {
  margin-top: 4px;
  color: rgb(255 255 255 / 55%);
  font-size: 12px;
}

.public-portal-v2 .public-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.public-portal-v2 .public-testimonial-grid article {
  min-height: 310px;
  padding: 30px;
}

.public-portal-v2 .public-testimonial-grid article > b {
  display: block;
  color: #e8e3e1;
  font-size: 48px;
  line-height: 1;
}

.public-portal-v2 .public-testimonial-grid p {
  min-height: 125px;
  color: #4f4946;
  line-height: 1.8;
}

.public-portal-v2 .public-testimonial-grid .accent > b,
.public-portal-v2 .public-testimonial-grid .accent p {
  color: rgb(255 255 255 / 76%);
}

.public-portal-v2 .public-testimonial-grid article > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-portal-v2 .public-testimonial-grid i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--public-red);
  font-style: normal;
  background: #fff;
}

.public-portal-v2 .public-testimonial-grid strong,
.public-portal-v2 .public-testimonial-grid small {
  display: block;
}

.public-portal-v2 .public-testimonial-grid small {
  margin-top: 3px;
  color: #a39b97;
}

.public-portal-v2 .public-content-hero,
.public-portal-v2 .recruit-page-hero,
.public-portal-v2 .recruit-hero {
  min-height: 720px;
  padding: 165px max(6vw, calc((100vw - 1280px) / 2)) 100px;
  color: #fff;
  background: var(--public-red-dark);
}

.public-portal-v2 .public-content-hero.compact,
.public-portal-v2 .recruit-page-hero {
  min-height: 455px;
}

.public-portal-v2 .public-content-hero.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
}

.public-portal-v2 .public-content-hero > span,
.public-portal-v2 .public-content-hero > div > span,
.public-portal-v2 .recruit-page-hero .public-kicker,
.public-portal-v2 .recruit-hero .public-kicker {
  color: rgb(255 255 255 / 72%);
}

.public-portal-v2 .public-content-hero h1,
.public-portal-v2 .recruit-page-hero h1,
.public-portal-v2 .recruit-hero h1 {
  max-width: 760px;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(54px, 6vw, 82px);
  line-height: 1.05;
  letter-spacing: 0;
}

.public-portal-v2 .public-content-hero p,
.public-portal-v2 .recruit-page-hero p,
.public-portal-v2 .recruit-hero p {
  max-width: 680px;
  margin: 0 0 18px;
  color: rgb(255 255 255 / 68%);
  font-size: 18px;
  line-height: 1.8;
}

.public-portal-v2 .public-about {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 726px;
  min-height: 726px;
  padding-top: 128px;
  padding-bottom: 127px;
  box-sizing: border-box;
  background-color: #a82018;
  background-image: url("/assets/about-hero-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.public-portal-v2 .public-content-hero > .public-about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  color: #f4afa9;
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 0;
}

.public-portal-v2 .public-about-kicker::before {
  flex: 0 0 auto;
  width: 32px;
  height: 1px;
  background: #df716a;
  content: "";
}

.public-portal-v2 .public-about h1 {
  width: min(672px, 100%);
  max-width: 672px;
  margin: 0 0 24px;
  font-size: 80px;
  font-weight: 900;
  line-height: 100px;
}

.public-portal-v2 .public-about p {
  width: min(672px, 100%);
  max-width: 672px;
  margin: 0 0 16px;
  color: rgb(255 255 255 / 60%);
  font-size: 18px;
  line-height: 29.25px;
}

.public-portal-v2 .public-about p:nth-of-type(2) {
  margin-bottom: 40px;
}

.public-portal-v2 .public-about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
}

.public-portal-v2 .public-content-hero > .public-about-points > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid rgb(201 52 43 / 30%);
  border-radius: 999px;
  color: #f4afa9;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: rgb(201 52 43 / 20%);
}

.public-portal-v2 .public-about .public-hero-actions {
  gap: 16px;
}

.public-portal-v2 .public-about .public-hero-actions a {
  min-height: 51px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 700;
}

.public-portal-v2 .public-about .public-hero-actions .primary-link {
  min-width: 125px;
  color: #fff !important;
  background: #c9342b;
}

.public-portal-v2 .public-about .public-hero-actions .ghost-link {
  min-width: 156px;
}

.public-portal-v2 .public-about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  height: 231px;
  padding: 64px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #ebebeb;
}

.public-portal-v2 .public-about-stats article {
  text-align: center;
}

.public-portal-v2 .public-about-stats strong,
.public-portal-v2 .public-about-stats span {
  display: block;
}

.public-portal-v2 .public-about-stats strong {
  font-size: 50px;
}

.public-portal-v2 .public-about-stats span {
  margin-top: 6px;
  color: #9d9591;
}

.public-portal-v2 .public-about-features {
  width: 100%;
  padding-top: 102px;
  padding-right: max(6vw, calc((100vw - 1280px) / 2));
  padding-bottom: 103px;
  padding-left: max(6vw, calc((100vw - 1280px) / 2));
  background: var(--public-soft);
}

.public-portal-v2 .public-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.public-portal-v2 .public-feature {
  min-height: 210px;
  padding: 28px;
  border: 1px solid var(--public-line);
  border-radius: 18px;
  background: #fff;
}

.public-portal-v2 .public-feature > b {
  display: block;
  margin-bottom: 28px;
  color: #e8e2df;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
}

.public-portal-v2 .public-feature:first-child {
  border-color: var(--public-red-dark);
  color: #fff;
  background: var(--public-red-dark);
}

.public-portal-v2 .public-feature strong {
  display: block;
  margin-bottom: 12px;
  font-size: 19px;
}

.public-portal-v2 .public-feature p {
  color: var(--public-muted);
  line-height: 1.7;
}

.public-portal-v2 .public-feature:first-child p {
  color: rgb(255 255 255 / 70%);
}

.public-portal-v2 .public-about-roadmap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 90px;
  padding-top: 82px;
  padding-bottom: 81px;
}

.public-portal-v2 .public-about-roadmap-copy .public-v2-heading {
  margin-bottom: 22px;
}

.public-portal-v2 .public-about-roadmap-copy p {
  max-width: 480px;
  margin: 0 0 30px;
  color: var(--public-muted);
  font-size: 16px;
  line-height: 1.8;
}

.public-portal-v2 .public-outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--public-red);
  border-radius: 999px;
  color: var(--public-red);
  font-weight: 800;
  text-decoration: none;
}

.public-portal-v2 .public-outline-link:hover {
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-about-roadmap-list {
  display: grid;
  gap: 14px;
}

.public-portal-v2 .public-about-roadmap-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 114px;
  padding: 24px;
  border: 1px solid var(--public-line);
  border-radius: 18px;
  background: #fbfaf9;
}

.public-portal-v2 .public-about-roadmap-list article.active {
  border-color: #e9a49f;
  background: #fff2f1;
}

.public-portal-v2 .public-roadmap-flag {
  font-size: 30px;
}

.public-portal-v2 .public-roadmap-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 7px;
}

.public-portal-v2 .public-roadmap-title strong {
  font-size: 18px;
}

.public-portal-v2 .public-roadmap-title span {
  padding: 4px 9px;
  border-radius: 999px;
  color: #8c8581;
  font-size: 12px;
  font-weight: 800;
  background: #ece8e6;
}

.public-portal-v2 .public-about-roadmap-list article.active .public-roadmap-title span {
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-about-roadmap-list p {
  margin: 0;
  color: var(--public-muted);
  line-height: 1.6;
}

.public-portal-v2 .public-flow-page .public-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.public-portal-v2 .public-flow-item {
  min-height: 215px;
  padding: 32px;
  border: 1px solid var(--public-line);
  border-radius: 18px;
  background: var(--public-soft);
}

.public-portal-v2 .public-flow-item:nth-child(3) {
  border-color: var(--public-red);
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-flow-item b {
  display: block;
  margin-bottom: 24px;
  color: #e8e4e1;
  font-family: Georgia, serif;
  font-size: 42px;
}

.public-portal-v2 .public-flow-item strong {
  display: block;
  margin-bottom: 12px;
  font-size: 19px;
}

.public-portal-v2 .public-flow-item p {
  color: var(--public-muted);
  line-height: 1.65;
}

.public-portal-v2 .public-flow-item:nth-child(3) b,
.public-portal-v2 .public-flow-item:nth-child(3) p {
  color: rgb(255 255 255 / 72%);
}

.public-portal-v2 .public-flow-daily {
  background: var(--public-soft);
}

.public-portal-v2 .public-daily-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-portal-v2 .public-daily-grid article {
  min-height: 185px;
  padding: 28px;
  background: #fff;
}

.public-portal-v2 .public-daily-grid b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 22px;
  border-radius: 8px;
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .public-page-cta {
  padding: 100px 24px;
  text-align: center;
}

.public-portal-v2 .public-page-cta p {
  color: var(--public-muted);
}

.public-portal-v2 .public-page-cta > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.public-portal-v2 .public-page-cta a:first-child {
  color: #fff;
  background: var(--public-red);
  box-shadow: 0 8px 24px rgb(207 52 46 / 24%);
}

.public-portal-v2 .public-page-cta a:last-child {
  border: 1px solid var(--public-red);
  color: var(--public-red);
}

.public-portal-v2 .public-faq-section,
.public-portal-v2 .public-contact {
  min-height: 560px;
}

.public-portal-v2 .public-faq-list {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.public-portal-v2 .public-faq {
  padding: 0;
  border: 1px solid var(--public-line);
  border-radius: 14px;
  background: #fff;
}

.public-portal-v2 .public-faq summary {
  padding: 20px 22px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.public-portal-v2 .public-faq p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--public-muted);
  line-height: 1.75;
}

.public-portal-v2 .public-contact {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 70px;
  align-items: start;
}

.public-portal-v2 .public-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-portal-v2 .public-contact-grid div {
  min-height: 112px;
  padding: 22px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: var(--public-soft);
}

.public-portal-v2 .public-contact-grid span,
.public-portal-v2 .public-contact-grid strong {
  display: block;
}

.public-portal-v2 .public-contact-grid span {
  margin-bottom: 12px;
  color: #9b938f;
}

.public-portal-v2 .public-calculator-page {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  max-width: none;
  scroll-margin-top: 112px;
}

.public-portal-v2 .public-calculator-hero {
  min-height: 360px;
  padding-top: 144px;
  padding-bottom: 68px;
}

.public-portal-v2 .public-calculator-hero h1 {
  margin-bottom: 18px;
  font-size: 54px;
}

.public-portal-v2 .public-page-calculator.nav-scrolled::before {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  left: 0;
  height: 104px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 1px 0 rgb(20 16 15 / 7%);
  content: "";
  pointer-events: none;
}

.public-portal-v2 .public-calculator-input-column {
  display: grid;
  gap: 16px;
}

.public-portal-v2 .public-calculator-shell,
.public-portal-v2 .public-calculator-note {
  border: 1px solid var(--public-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(20 16 15 / 6%);
}

.public-portal-v2 .public-calculator-shell {
  padding: 26px;
}

.public-portal-v2 .public-calculator-shell .public-v2-heading {
  margin-bottom: 22px;
}

.public-portal-v2 .public-calculator-shell .public-v2-heading h2 {
  font-size: 24px;
}

.public-portal-v2 .public-calculator {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.public-portal-v2 .public-calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.public-portal-v2 .public-calculator label {
  color: #26211f;
  font-weight: 700;
}

.public-portal-v2 .public-calculator input,
.public-portal-v2 .public-calculator select,
.public-portal-v2 .recruit-form input,
.public-portal-v2 .recruit-form select,
.public-portal-v2 .recruit-form textarea {
  min-height: 46px;
  margin-top: 8px;
  border: 1px solid #ddd8d5;
  border-radius: 8px;
  background: #faf9f8;
}

.public-portal-v2 .public-calculator button {
  width: auto;
  min-width: 142px;
  min-height: 46px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  background: var(--public-red);
  box-shadow: 0 7px 18px rgb(207 52 46 / 18%);
}

.public-portal-v2 .public-calculator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}

.public-portal-v2 .public-form-note {
  max-width: 215px;
  color: var(--public-muted);
  font-size: 12px;
  line-height: 1.6;
}

.public-portal-v2 .public-calculator-note {
  align-self: start;
  padding: 20px 22px;
  background: var(--public-soft);
  box-shadow: none;
}

.public-portal-v2 .public-calculator-note ul {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--public-muted);
  font-size: 13px;
  line-height: 1.55;
}

.public-portal-v2 .public-calculator-note li::marker {
  color: var(--public-red);
}

.public-portal-v2 .public-quote-results {
  margin-top: 22px;
}

.public-portal-v2 .public-calculator-results {
  min-width: 0;
  scroll-margin-top: 112px;
}

.public-portal-v2 .public-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--public-line);
}

.public-portal-v2 .public-results-head span {
  color: var(--public-red);
  font-size: 13px;
  font-weight: 800;
}

.public-portal-v2 .public-results-head h2 {
  margin: 5px 0 0;
  color: var(--public-ink);
  font-size: 28px;
  line-height: 1.25;
}

.public-portal-v2 .public-results-head small {
  color: var(--public-muted);
}

.public-portal-v2 .public-results-empty {
  display: grid;
  place-content: center;
  min-height: 280px;
  padding: 28px;
  border: 1px dashed #d7d1cd;
  border-radius: 8px;
  color: var(--public-muted);
  text-align: center;
}

.public-portal-v2 .public-results-empty strong {
  color: var(--public-ink);
  font-size: 18px;
}

.public-portal-v2 .public-results-empty p {
  max-width: 390px;
  margin: 9px 0 0;
  line-height: 1.65;
}

.public-portal-v2 .public-results-message {
  margin: 0;
  padding: 22px;
  border: 1px dashed #d7d1cd;
  border-radius: 8px;
  color: var(--public-muted);
  line-height: 1.65;
  text-align: center;
}

.public-portal-v2 .public-quote-results .stack {
  gap: 12px;
}

.public-portal-v2 .public-quote-extra:not(.is-visible) {
  display: none;
}

.public-portal-v2 .public-show-more-quotes {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid #d9d2ce;
  border-radius: 8px;
  color: var(--public-red-dark);
  font-weight: 800;
  background: #fff;
}

.public-portal-v2 .public-show-more-quotes:hover {
  border-color: var(--public-red);
  background: #fff8f7;
}

.public-portal-v2 .public-quote-card {
  gap: 18px;
  padding: 22px;
  border-color: var(--public-line);
  border-radius: 8px;
  box-shadow: none;
}

.public-portal-v2 .public-quote-card:hover {
  border-color: #d2cbc7;
  box-shadow: 0 8px 22px rgb(20 16 15 / 6%);
  transform: none;
}

.public-portal-v2 .public-quote-card .quote-head {
  align-items: center;
}

.public-portal-v2 .public-quote-card .quote-head > div:first-child {
  min-width: 0;
}

.public-portal-v2 .public-quote-card .quote-head > div:first-child > strong {
  display: block;
  color: var(--public-ink);
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.public-portal-v2 .public-quote-card .quote-head small {
  color: var(--public-muted);
  font-size: 13px;
}

.public-portal-v2 .public-quote-card .quote-head-right {
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}

.public-portal-v2 .public-quote-card .quote-head-right > strong {
  color: var(--public-red-dark);
  font-size: 23px;
  line-height: 1.2;
}

.public-portal-v2 .public-price-mode {
  color: var(--public-muted);
  font-size: 11px;
}

.public-portal-v2 .public-quote-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--public-line);
  border-bottom: 1px solid var(--public-line);
}

.public-portal-v2 .public-quote-facts > div {
  min-width: 0;
  padding: 14px 16px;
}

.public-portal-v2 .public-quote-facts > div + div {
  border-left: 1px solid var(--public-line);
}

.public-portal-v2 .public-quote-facts span,
.public-portal-v2 .public-quote-facts strong {
  display: block;
}

.public-portal-v2 .public-quote-facts span {
  margin-bottom: 5px;
  color: var(--public-muted);
  font-size: 12px;
}

.public-portal-v2 .public-quote-facts strong {
  color: var(--public-ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.public-portal-v2 .public-quote-breakdown {
  color: var(--public-muted);
  font-size: 13px;
}

.public-portal-v2 .public-quote-breakdown summary {
  width: max-content;
  color: var(--public-red-dark);
  cursor: pointer;
  font-weight: 700;
}

.public-portal-v2 .public-quote-breakdown > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  margin-top: 14px;
}

.public-portal-v2 .public-quote-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.public-portal-v2 .public-quote-breakdown i {
  font-style: normal;
}

.public-portal-v2 .public-quote-breakdown strong {
  color: var(--public-ink);
}

.public-portal-v2 .recruit-hero,
.public-portal-v2 .recruit-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 70px;
  align-items: center;
}

.public-portal-v2 .recruit-hero-card,
.public-portal-v2 .recruit-service-visual,
.public-portal-v2 .recruit-partner-card,
.public-portal-v2 .recruit-hero-metrics {
  padding: 34px;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 20px;
  color: #fff;
  background: rgb(255 255 255 / 9%);
}

.public-portal-v2 .recruit-hero-card img,
.public-portal-v2 .recruit-service-visual img {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 22px;
  border-radius: 20px;
  object-fit: cover;
  background: #fff;
}

.public-portal-v2 .recruit-hero-card strong,
.public-portal-v2 .recruit-service-visual strong,
.public-portal-v2 .recruit-partner-card strong,
.public-portal-v2 .recruit-hero-card span,
.public-portal-v2 .recruit-service-visual span,
.public-portal-v2 .recruit-partner-card span {
  display: block;
}

.public-portal-v2 .recruit-hero-card span,
.public-portal-v2 .recruit-service-visual span,
.public-portal-v2 .recruit-partner-card span {
  margin-top: 8px;
  color: rgb(255 255 255 / 60%);
}

.public-portal-v2 .public-section,
.public-portal-v2 .recruit-application {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 96px 0;
}

.public-portal-v2 .public-section-head {
  margin-bottom: 44px;
}

.public-portal-v2 .public-section-head > span {
  color: var(--public-red);
}

.public-portal-v2 .public-section-head h2,
.public-portal-v2 .recruit-definition h2,
.public-portal-v2 .recruit-closing h2 {
  margin: 0 0 16px;
  color: var(--public-ink);
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.1;
}

.public-portal-v2 .public-section-head p,
.public-portal-v2 .recruit-definition p {
  max-width: 760px;
  color: var(--public-muted);
  line-height: 1.75;
}

.public-portal-v2 .recruit-card-grid,
.public-portal-v2 .recruit-compare-grid,
.public-portal-v2 .recruit-income-grid,
.public-portal-v2 .recruit-step-grid,
.public-portal-v2 .recruit-level-table,
.public-portal-v2 .recruit-location-grid {
  display: grid;
  gap: 18px;
}

.public-portal-v2 .recruit-card-grid,
.public-portal-v2 .recruit-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-portal-v2 .recruit-income-grid,
.public-portal-v2 .recruit-level-table {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.public-portal-v2 .recruit-step-grid,
.public-portal-v2 .recruit-location-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-portal-v2 .recruit-card-grid article,
.public-portal-v2 .recruit-compare-grid article,
.public-portal-v2 .recruit-income-grid article,
.public-portal-v2 .recruit-step-grid article,
.public-portal-v2 .recruit-level-table div,
.public-portal-v2 .recruit-location-grid article {
  min-height: 150px;
  padding: 26px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: var(--public-soft);
}

.public-portal-v2 .recruit-card-grid article:nth-child(2),
.public-portal-v2 .recruit-income-grid article:first-child,
.public-portal-v2 .recruit-step-grid article:nth-child(2) {
  border-color: var(--public-red);
  color: #fff;
  background: var(--public-red);
}

.public-portal-v2 .recruit-card-grid strong,
.public-portal-v2 .recruit-income-grid strong,
.public-portal-v2 .recruit-step-grid strong,
.public-portal-v2 .recruit-step-grid span,
.public-portal-v2 .recruit-level-table strong,
.public-portal-v2 .recruit-level-table span,
.public-portal-v2 .recruit-location-grid strong,
.public-portal-v2 .recruit-location-grid span {
  display: block;
}

.public-portal-v2 .recruit-card-grid p,
.public-portal-v2 .recruit-compare-grid p,
.public-portal-v2 .recruit-income-grid p,
.public-portal-v2 .recruit-step-grid p,
.public-portal-v2 .recruit-location-grid span {
  color: var(--public-muted);
  line-height: 1.7;
}

.public-portal-v2 .recruit-card-grid article:nth-child(2) p,
.public-portal-v2 .recruit-income-grid article:first-child p,
.public-portal-v2 .recruit-step-grid article:nth-child(2) p {
  color: rgb(255 255 255 / 70%);
}

.public-portal-v2 .recruit-step-grid span {
  margin-bottom: 18px;
  color: #e2dedb;
  font-family: Georgia, serif;
  font-size: 42px;
}

.public-portal-v2 .recruit-growth-path {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 30px;
}

.public-portal-v2 .recruit-growth-path span {
  flex: 1;
  min-width: 140px;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  background: #f4f1ef;
}

.public-portal-v2 .recruit-definition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 70px;
  align-items: center;
}

.public-portal-v2 .recruit-definition img {
  width: 100%;
  min-height: 240px;
  padding: 40px;
  border: 1px solid var(--public-line);
  border-radius: 20px;
  background: var(--public-soft);
}

.public-portal-v2 .recruit-closing {
  padding: 90px 24px;
  text-align: center;
  color: #fff;
  background: var(--public-red-dark);
}

.public-portal-v2 .recruit-closing h2,
.public-portal-v2 .recruit-closing p,
.public-portal-v2 .recruit-closing strong,
.public-portal-v2 .recruit-closing span {
  color: #fff;
}

.public-portal-v2 .recruit-form {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--public-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgb(20 16 15 / 8%);
}

.public-portal-v2 .recruit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.public-portal-v2 .recruit-form label,
.public-portal-v2 .recruit-form legend {
  color: #27211f;
  font-weight: 700;
}

.public-portal-v2 .recruit-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  border: 0;
}

.public-portal-v2 .recruit-form fieldset legend {
  width: 100%;
  margin-bottom: 8px;
}

.public-portal-v2 .recruit-form fieldset label {
  padding: 9px 13px;
  border: 1px solid #ded9d6;
  border-radius: 999px;
  color: #5d5652;
  font-size: 13px;
  background: #faf9f8;
}

.public-portal-v2 .recruit-form button.primary-link {
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  border: 0;
  border-radius: 14px;
  color: #fff !important;
  font-weight: 900;
  background: var(--public-red);
  box-shadow: 0 8px 24px rgb(207 52 46 / 22%);
}

.public-portal-v2 .public-footer {
  margin-top: 1px;
  color: rgb(255 255 255 / 48%);
  background: #100b0a;
}

.public-portal-v2 .public-footer-cta-strip {
  width: 100%;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.public-portal-v2 .public-footer-bottom-strip {
  width: 100%;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.public-portal-v2 .public-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 39.5px 0;
}

.public-portal-v2 .public-footer-cta strong,
.public-portal-v2 .public-footer-cta span {
  display: block;
}

.public-portal-v2 .public-footer-cta strong {
  color: #fff;
  font-size: 24px;
  line-height: 29px;
}

.public-portal-v2 .public-footer-cta span {
  margin-top: 4px;
  font-size: 14px;
  line-height: 24px;
}

.public-portal-v2 .public-footer-cta > div:last-child {
  display: flex;
  gap: 10px;
}

.public-portal-v2 .public-footer-cta a {
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 800;
}

.public-portal-v2 .public-footer-cta .primary-link {
  color: #fff !important;
  background: var(--public-red);
}

.public-portal-v2 .public-footer-cta .ghost-link {
  border: 1px solid rgb(255 255 255 / 16%);
  color: rgb(255 255 255 / 70%);
}

.public-portal-v2 .public-footer-inner {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr);
  gap: 80px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 308px;
  padding: 56px 0;
  box-sizing: border-box;
}

.public-portal-v2 .public-footer .public-brand {
  color: #fff;
}

.public-portal-v2 .public-footer-brand p {
  max-width: 440px;
  margin: 0 0 20px;
  color: rgb(255 255 255 / 42%);
  font-size: 14px;
  line-height: 1.75;
}

.public-portal-v2 .public-footer-brand {
  display: block;
}

.public-portal-v2 .public-footer-brand > .public-brand {
  margin-bottom: 16px;
}

.public-portal-v2 .public-footer-brand-meta {
  display: grid;
  gap: 6px;
  color: rgb(255 255 255 / 35%);
  font-size: 12px;
}

.public-portal-v2 .public-footer-actions {
  display: none;
}

.public-portal-v2 .public-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.public-portal-v2 .public-footer-links > div {
  display: block;
}

.public-portal-v2 .public-footer-links strong {
  display: block;
  margin-bottom: 20px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}

.public-portal-v2 .public-footer-links a,
.public-portal-v2 .public-footer-links span {
  display: block;
  min-height: 0;
  padding: 5px 0;
  color: rgb(255 255 255 / 43%);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.public-portal-v2 .public-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 17.5px 0;
  color: rgb(255 255 255 / 25%);
}

@media (max-width: 1100px) {
  .public-portal-v2 .public-nav {
    grid-template-columns: auto auto;
  }

  .public-portal-v2 .public-mobile-menu {
    display: block;
    justify-self: end;
  }

  .public-portal-v2 .public-nav > nav,
  .public-portal-v2 .public-nav > .public-nav-actions {
    display: none;
    grid-column: 1 / -1;
  }

  .public-portal-v2 .public-nav.mobile-open > nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 16px 0 10px;
    border-top: 1px solid #eee9e6;
  }

  .public-portal-v2 .public-nav.mobile-open > .public-nav-actions {
    display: flex;
    justify-content: stretch;
    padding: 6px 0 10px;
  }

  .public-portal-v2 .public-nav.mobile-open > .public-nav-actions a {
    flex: 1;
    text-align: center;
  }

  .public-portal-v2 .public-nav-has-children {
    display: block;
  }

  .public-portal-v2 .public-nav-dropdown {
    display: none;
  }

  .public-portal-v2 .public-hero,
  .public-portal-v2 .public-home-trust,
  .public-portal-v2 .public-home-coverage,
  .public-portal-v2 .public-home-recruitment,
  .public-portal-v2 .public-content-hero.split,
  .public-portal-v2 .public-about-roadmap,
  .public-portal-v2 .recruit-hero,
  .public-portal-v2 .recruit-page-hero,
  .public-portal-v2 .public-contact {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .public-hero {
    gap: 44px;
    min-height: 0;
    padding-top: 150px;
  }

  .public-portal-v2 .public-hero-copy,
  .public-portal-v2 .public-hero h1 {
    max-width: 720px;
  }

  .public-portal-v2 .public-service-grid,
  .public-portal-v2 .public-flow-page .public-flow-grid,
  .public-portal-v2 .public-home-step-grid,
  .public-portal-v2 .public-daily-grid,
  .public-portal-v2 .public-testimonial-grid,
  .public-portal-v2 .recruit-step-grid,
  .public-portal-v2 .recruit-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-portal-v2 .public-feature-grid,
  .public-portal-v2 .recruit-income-grid,
  .public-portal-v2 .recruit-level-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-portal-v2 .public-calculator-page {
    grid-template-columns: 1fr;
    gap: 42px;
    max-width: 860px;
  }

  .public-portal-v2 .public-calculator-input-column {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  }
}

@media (max-width: 700px) {
  .public-portal-v2 .public-footer {
    margin-top: 0;
  }

  .public-portal-v2 .public-nav {
    top: 16px;
    width: calc(100% - 32px);
    min-height: 74px;
    padding: 10px 16px;
    border-radius: 14px;
  }

  .public-portal-v2 .public-brand {
    min-width: 0;
  }

  .public-portal-v2 .public-brand img {
    width: 40px;
    height: 40px;
  }

  .public-portal-v2 .public-brand strong {
    font-size: 14px;
  }

  .public-portal-v2 .public-nav.mobile-open > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 58vh;
    overflow-y: auto;
  }

  .public-portal-v2 .public-nav.mobile-open nav > a,
  .public-portal-v2 .public-nav.mobile-open .public-nav-item > a {
    display: block;
    padding: 10px;
    text-align: center;
  }

  .public-portal-v2 .public-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 118px 14px 58px;
  }

  .public-portal-v2 .public-hero h1 {
    font-size: 48px;
  }

  .public-portal-v2 .public-hero p {
    font-size: 15px;
  }

  .public-portal-v2 .public-hero-actions,
  .public-portal-v2 .public-invite-box,
  .public-portal-v2 .public-footer-cta,
  .public-portal-v2 .public-footer-cta > div:last-child,
  .public-portal-v2 .public-page-cta > div {
    align-items: stretch;
    flex-direction: column;
  }

  .public-portal-v2 .public-hero-actions a,
  .public-portal-v2 .public-invite-box button,
  .public-portal-v2 .public-page-cta a {
    width: 100%;
  }

  .public-portal-v2 .public-hero-metrics,
  .public-portal-v2 .public-trust-tiles,
  .public-portal-v2 .public-recruit-benefits,
  .public-portal-v2 .public-contact-grid,
  .public-portal-v2 .public-calculator-grid,
  .public-portal-v2 .recruit-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .public-portal-v2 .public-hero-metrics article {
    min-height: 104px;
  }

  .public-portal-v2 .public-hero-metrics strong {
    font-size: 30px;
  }

  .public-portal-v2 .public-announcement-card li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .public-portal-v2 .public-v2-section,
  .public-portal-v2 .public-section,
  .public-portal-v2 .recruit-application,
  .public-portal-v2 .public-about-stats,
  .public-portal-v2 .public-footer-cta,
  .public-portal-v2 .public-footer-inner,
  .public-portal-v2 .public-footer-bottom,
  .public-portal-v2 .public-home-trust {
    width: calc(100% - 28px);
  }

  .public-portal-v2 .public-v2-section,
  .public-portal-v2 .public-section,
  .public-portal-v2 .recruit-application {
    padding: 68px 0;
  }

  .public-portal-v2 .public-v2-heading,
  .public-portal-v2 .public-section-head {
    margin-bottom: 32px;
  }

  .public-portal-v2 .public-v2-heading.split {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .public-portal-v2 .public-v2-heading h2,
  .public-portal-v2 .public-home-recruitment h2,
  .public-portal-v2 .public-page-cta h2,
  .public-portal-v2 .public-section-head h2,
  .public-portal-v2 .recruit-definition h2,
  .public-portal-v2 .recruit-closing h2 {
    font-size: 34px;
  }

  .public-portal-v2 .public-service-grid,
  .public-portal-v2 .public-flow-page .public-flow-grid,
  .public-portal-v2 .public-home-step-grid,
  .public-portal-v2 .public-daily-grid,
  .public-portal-v2 .public-testimonial-grid,
  .public-portal-v2 .public-feature-grid,
  .public-portal-v2 .recruit-card-grid,
  .public-portal-v2 .recruit-compare-grid,
  .public-portal-v2 .recruit-income-grid,
  .public-portal-v2 .recruit-step-grid,
  .public-portal-v2 .recruit-level-table,
  .public-portal-v2 .recruit-location-grid,
  .public-portal-v2 .public-footer-links {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .public-home-trust,
  .public-portal-v2 .public-home-coverage,
  .public-portal-v2 .public-home-recruitment {
    gap: 44px;
  }

  .public-portal-v2 .public-home-trust {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .public-portal-v2 .public-home-recruitment {
    width: calc(100% - 28px);
    padding: 42px 22px;
    border-radius: 18px;
  }

  .public-portal-v2 .public-testimonial-grid article {
    min-height: 0;
  }

  .public-portal-v2 .public-testimonial-grid p {
    min-height: 0;
  }

  .public-portal-v2 .public-content-hero,
  .public-portal-v2 .recruit-page-hero,
  .public-portal-v2 .recruit-hero {
    min-height: 0;
    padding: 126px 16px 68px;
  }

  .public-portal-v2 .public-content-hero h1,
  .public-portal-v2 .recruit-page-hero h1,
  .public-portal-v2 .recruit-hero h1 {
    font-size: 48px;
  }

  .public-portal-v2 .public-content-hero p,
  .public-portal-v2 .recruit-page-hero p,
  .public-portal-v2 .recruit-hero p {
    font-size: 15px;
  }

  .public-portal-v2 .public-about-stats {
    width: 100%;
    height: 317px;
    padding: 64px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
  }

  .public-portal-v2 .public-about-stats strong {
    font-size: 38px;
  }

  .public-portal-v2 .public-about {
    height: auto;
    min-height: 0;
    padding: 128px 16px;
  }

  .public-portal-v2 .public-about-kicker {
    margin-bottom: 32px;
  }

  .public-portal-v2 .public-about h1 {
    font-size: 48px;
    line-height: 60px;
  }

  .public-portal-v2 .public-about p {
    font-size: 18px;
  }

  .public-portal-v2 .public-about .public-hero-actions {
    align-items: center;
    flex-direction: row;
  }

  .public-portal-v2 .public-about .public-hero-actions a {
    width: auto;
  }

  .public-portal-v2 .public-about-features,
  .public-portal-v2 .public-about-roadmap {
    width: 100%;
    padding: 96px 16px;
  }

  .public-portal-v2 .public-about-features {
    padding-bottom: 95px;
  }

  .public-portal-v2 .public-about-features .public-v2-heading {
    margin-bottom: 63px;
  }

  .public-portal-v2 .public-about-features .public-feature-grid {
    gap: 20px;
  }

  .public-portal-v2 .public-about-features .public-feature {
    height: 212px;
    min-height: 212px;
    padding: 32px;
    border-radius: 24px;
    font-size: 16px;
  }

  .public-portal-v2 .public-about-features .public-feature:first-child {
    height: 210px;
    min-height: 210px;
  }

  .public-portal-v2 .public-about-roadmap {
    gap: 64px;
    margin-top: -1px;
  }

  .public-portal-v2 .public-about-roadmap-list {
    gap: 16px;
  }

  .public-portal-v2 .public-about-roadmap {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .public-about-roadmap-list article {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
    padding: 24px;
    border-radius: 16px;
    font-size: 16px;
    line-height: 24px;
    height: 118px;
  }

  .public-portal-v2 .public-about-roadmap-list article:last-child {
    height: 98px;
  }

  .public-portal-v2 .public-about-roadmap-list .public-roadmap-title {
    gap: 12px;
    margin-bottom: 4px;
  }

  .public-portal-v2 .public-about-roadmap-list .public-roadmap-title strong {
    font-size: 16px;
    line-height: 24px;
  }

  .public-portal-v2 .public-about-roadmap-list .public-roadmap-title span {
    padding: 2px 8px;
  }

  .public-portal-v2 .public-about-roadmap-list p {
    font-size: 14px;
    line-height: 21px;
  }

  .public-portal-v2 .public-roadmap-flag {
    font-size: 25px;
  }

  .public-portal-v2 .public-contact,
  .public-portal-v2 .public-calculator-page {
    display: block;
  }

  .public-portal-v2 .public-calculator-hero {
    min-height: 330px;
    padding: 126px 14px 58px;
  }

  .public-portal-v2 .public-calculator-hero h1 {
    margin-bottom: 14px;
    font-size: 42px;
  }

  .public-portal-v2 .public-calculator-hero p {
    font-size: 15px;
    line-height: 1.65;
  }

  .public-portal-v2 .public-calculator-input-column {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .public-contact-grid {
    margin-top: 32px;
  }

  .public-portal-v2 .public-calculator-shell {
    padding: 22px 16px;
  }

  .public-portal-v2 .public-calculator-note {
    margin-top: 0;
  }

  .public-portal-v2 .public-calculator-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .public-portal-v2 .public-calculator-footer .public-form-note {
    max-width: none;
  }

  .public-portal-v2 .public-calculator-footer button {
    width: 100%;
  }

  .public-portal-v2 .public-calculator-results {
    margin-top: 42px;
  }

  .public-portal-v2 .public-results-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .public-portal-v2 .public-results-head h2 {
    font-size: 24px;
  }

  .public-portal-v2 .public-results-empty {
    min-height: 220px;
  }

  .public-portal-v2 .public-quote-card {
    padding: 18px 16px;
  }

  .public-portal-v2 .public-quote-card .quote-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-portal-v2 .public-quote-card .quote-head-right {
    align-items: baseline;
    flex-direction: row;
    gap: 6px;
  }

  .public-portal-v2 .public-quote-facts > div {
    padding: 12px 8px;
  }

  .public-portal-v2 .public-quote-breakdown > div {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .recruit-definition {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .public-portal-v2 .recruit-form {
    padding: 22px 16px;
  }

  .public-portal-v2 .recruit-form-grid,
  .public-portal-v2 .public-calculator-grid {
    grid-template-columns: 1fr;
  }

  .public-portal-v2 .public-footer-cta {
    width: 100%;
    padding: 37.5px 16px;
    box-sizing: border-box;
    gap: 24px;
  }

  .public-portal-v2 .public-footer-cta > div:last-child {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }

  .public-portal-v2 .public-footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    width: 100%;
    padding: 56px 16px 51px;
  }

  .public-portal-v2 .public-footer-links {
    gap: 40px;
  }

  .public-portal-v2 .public-footer-links > div:last-child span {
    margin-bottom: 8px;
    padding: 0;
    font-size: 12px;
    line-height: 18px;
  }

  .public-portal-v2 .public-footer-links > div:last-child span:last-child {
    margin-bottom: 0;
  }

  .public-portal-v2 .public-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 19.5px 16px;
    box-sizing: border-box;
    line-height: 16px;
  }
}

#app.portal-user {
  --bg: #faf8f7;
  --panel: #ffffff;
  --text: #2a1f1f;
  --muted: #9a8585;
  --line: rgba(42, 31, 31, 0.08);
  --line-strong: rgba(42, 31, 31, 0.16);
  --brand: #c0363c;
  --brand-dark: #8f2027;
  --brand-soft: #f5e8e8;
  --accent: #c0363c;
  --green: #2f8f69;
  --green-soft: #edf8f3;
  --gold: #b7791f;
  --gold-soft: #fff8e8;
  --red: #c0363c;
  --red-soft: #fff0f1;
  --radius: 14px;
  --shadow: 0 16px 38px rgba(80, 40, 40, 0.1);
  --shadow-soft: 0 8px 24px rgba(80, 40, 40, 0.07);
}

#app.portal-redhat {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 0px;
  --header-height: 52px;
  --bg: #fbf7f6;
  --panel: #ffffff;
  --text: #291419;
  --muted: #9e5a5a;
  --line: #edd8d8;
  --line-strong: #dfc5c5;
  --brand: #c02020;
  --brand-dark: #9e1515;
  --brand-soft: #fce8e8;
  --accent: #c02020;
  --green: #2a7a5e;
  --green-soft: #ebf7f3;
  --gold: #c27d22;
  --gold-soft: #fef7ec;
  --red: #c02020;
  --red-soft: #fff0f0;
  --radius: 12px;
  --shadow: 0 12px 32px rgba(41, 20, 25, 0.1);
  --shadow-soft: 0 1px 3px rgba(41, 20, 25, 0.08);
}

#app.portal-admin {
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 0px;
  --header-height: 52px;
  --bg: #f8f6f6;
  --panel: #ffffff;
  --text: #24191c;
  --muted: #806b70;
  --line: #eadbdd;
  --line-strong: #dbc6ca;
  --brand: #b51f2e;
  --brand-dark: #861521;
  --brand-soft: #faeaec;
  --accent: #b51f2e;
  --green: #28785b;
  --green-soft: #eaf6f1;
  --gold: #b87218;
  --gold-soft: #fdf5e8;
  --red: #b51f2e;
  --red-soft: #fff0f1;
  --radius: 10px;
  --shadow: 0 14px 32px rgba(54, 26, 32, 0.1);
  --shadow-soft: 0 2px 7px rgba(54, 26, 32, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.57;
}

#app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

#app.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 18px 14px;
  box-shadow: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 18px;
  padding: 0 8px;
}

.sidebar .brand {
  justify-content: space-between;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 18px rgba(207, 19, 34, 0.16);
}

.sidebar-toggle {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  color: #595959;
  font-size: 22px;
  line-height: 1;
}

.sidebar-toggle span {
  transform: translateY(-1px);
}

.brand strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

nav {
  display: grid;
  gap: 4px;
}

nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 11px;
  border-radius: var(--radius);
  color: #595959;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-parent {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  border: 0;
  padding: 0 11px;
  border-radius: var(--radius);
  background: transparent;
  color: #595959;
  cursor: pointer;
  font-weight: 500;
  text-align: left;
}

nav a.active,
.nav-parent.active,
nav a:hover,
.nav-parent:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.nav-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #595959;
  font-size: 12px;
  font-weight: 700;
}

.subnav-mark {
  display: none;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}

.nav-group.collapsed .nav-caret {
  transform: rotate(-90deg);
}

.nav-parent:hover .nav-caret,
.nav-parent.active .nav-caret {
  color: var(--brand);
}

nav a.active .nav-mark,
nav a:hover .nav-mark,
.nav-parent:hover .nav-mark,
.nav-parent.active .nav-mark {
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow-soft);
}

.portal-user .sidebar {
  background: #fff;
}

.portal-user .sidebar > nav:not(.subnav) a {
  min-height: 48px;
  border-radius: 999px;
  font-weight: 800;
}

.portal-user .sidebar > nav:not(.subnav) a.active {
  background: #421719;
  color: #fff;
}

.portal-user .sidebar > nav:not(.subnav) a.active .nav-mark {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
  border-radius: 999px;
}

.portal-user .subnav {
  gap: 8px;
}

.portal-user .subnav-children {
  padding-left: 18px;
}

.portal-user .subnav a,
.portal-user .subnav .nav-parent {
  min-height: 46px;
  border-radius: 999px;
  color: #554a4d;
  font-size: 16px;
  font-weight: 800;
}

.portal-user .subnav a.active,
.portal-user .subnav .nav-parent.active {
  background: #fff2f2;
  color: #b52b35;
  box-shadow: inset 3px 0 0 #c93640;
}

.portal-user .subnav .nav-mark {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 20px;
}

.portal-user .subnav a.active .nav-mark,
.portal-user .subnav a:hover .nav-mark,
.portal-user .subnav .nav-parent.active .nav-mark,
.portal-user .subnav .nav-parent:hover .nav-mark {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.portal-user .subnav .subnav-child {
  min-height: 36px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.portal-user .subnav .subnav-child.active {
  background: #fff6f6;
  color: #b52b35;
  box-shadow: none;
}

.portal-user .subnav .subnav-child.active .nav-dot {
  background: #c93640;
}

.portal-redhat .sidebar {
  background: #fffdfd;
}

.portal-redhat .side-section > small {
  color: #9b7e81;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.portal-redhat .subnav {
  gap: 5px;
}

.portal-redhat .subnav a,
.portal-redhat .subnav .nav-parent {
  min-height: 43px;
  border-radius: 8px;
  color: #554749;
  font-weight: 700;
}

.portal-redhat .subnav > a.active,
.portal-redhat .subnav > .nav-group > .nav-parent.active {
  background: #48191d;
  color: #fff;
  box-shadow: 0 8px 18px rgba(72, 25, 29, 0.16);
}

.portal-redhat .subnav > a.active .nav-mark,
.portal-redhat .subnav > .nav-group > .nav-parent.active .nav-mark {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
}

.portal-redhat .subnav .nav-mark {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #f7eeee;
  color: #8f3a41;
}

.portal-redhat .subnav-children {
  gap: 3px;
  padding-left: 37px;
}

.portal-redhat .subnav .subnav-child {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  color: #8b787a;
  font-size: 13px;
  font-weight: 600;
}

.portal-redhat .subnav .subnav-child.active {
  background: #faeded;
  color: #a92731;
  box-shadow: inset 3px 0 0 #c93640;
}

.portal-redhat .subnav .subnav-child.active .nav-dot {
  background: #c93640;
}

.side-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.side-section > small {
  display: block;
  margin: 0 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.subnav a {
  min-height: 39px;
  font-size: 14px;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.subnav-children {
  display: grid;
  gap: 4px;
  margin: 0 0 4px;
  padding-left: 35px;
}

.nav-group.collapsed .subnav-children,
.subnav-children[hidden] {
  display: none;
}

.subnav-child {
  min-height: 34px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}

#app.sidebar-collapsed .sidebar {
  padding: 18px 10px;
  overflow-x: hidden;
}

#app.sidebar-collapsed .brand {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0;
}

#app.sidebar-collapsed .brand-identity {
  justify-content: center;
  gap: 0;
}

#app.sidebar-collapsed .brand-identity > div,
#app.sidebar-collapsed .nav-label,
#app.sidebar-collapsed .nav-caret,
#app.sidebar-collapsed .side-section > small {
  display: none;
}

#app.sidebar-collapsed nav a,
#app.sidebar-collapsed .nav-parent {
  justify-content: center;
  gap: 0;
  padding: 0;
}

#app.sidebar-collapsed .nav-mark {
  width: 30px;
  height: 30px;
}

#app.sidebar-collapsed .subnav-children {
  padding-left: 0;
}

#app.sidebar-collapsed .subnav-child {
  padding: 0;
}

#app.sidebar-collapsed .nav-dot {
  display: none;
}

#app.sidebar-collapsed .subnav-mark {
  display: grid;
}

#app.sidebar-collapsed .side-section {
  margin-top: 14px;
  padding-top: 12px;
}

.subnav-child.active .nav-dot,
.subnav-child:hover .nav-dot {
  background: var(--brand);
}

.main {
  min-width: 0;
  padding: 0 28px 28px;
}

.account-strip {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: var(--header-height);
  margin: 0 -28px 24px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.account-strip strong {
  font-weight: 600;
}

.account-strip small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.locale-switch select {
  min-width: 118px;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: #fff;
  color: var(--text);
  font-size: 14px;
}

.locale-switch.compact span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto 20px;
}

.eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 4px;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  color: #1f1f1f;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.33;
}

h2 {
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

h3 {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 600;
}

a {
  color: var(--brand);
}

button,
.primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 14px;
  background: #fff;
  color: #262626;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(22, 119, 255, 0.28);
  outline-offset: 2px;
}

.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}

.primary:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.button-link:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.filter-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #595959;
  text-decoration: none;
  font-weight: 500;
}

.filter-tabs a:hover,
.filter-tabs a.active {
  border-color: #91caff;
  background: var(--brand-soft);
  color: var(--brand);
}

.filter-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #595959;
  font-size: 12px;
}

.filter-tabs a.active span {
  background: #fff;
  color: var(--brand);
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}

.pagination-bar.single {
  justify-content: flex-start;
}

.pagination-nav {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.pagination-nav a,
.pagination-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
}

.pagination-nav a:hover,
.pagination-nav a.active,
.pagination-nav button:hover,
.pagination-nav button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.pagination-nav a.disabled,
.pagination-nav button:disabled {
  pointer-events: none;
  opacity: 0.45;
}

.fee-item-filter-tabs {
  margin-top: 2px;
}

.fee-item-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.row-card.fee-item-row {
  grid-template-columns: minmax(220px, 1.8fr) minmax(120px, 0.75fr) minmax(190px, 1fr) auto auto;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
}

.fee-item-main,
.fee-item-charge {
  min-width: 0;
}

.fee-item-policy,
.fee-item-status,
.fee-item-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}

.fee-item-actions {
  justify-content: flex-end;
}

.order-status-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wallet-ledger-state {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.wallet-ledger-state > span {
  color: #4b5563;
  font-weight: 600;
}

.field {
  display: grid;
  gap: 6px;
  color: #595959;
  font-size: 13px;
  font-weight: 500;
}

.field input,
.field select,
.field textarea,
.login-form input {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.login-form input:hover {
  border-color: var(--brand);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.login-form input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
}

.field textarea {
  min-height: 92px;
  padding: 9px 11px;
  resize: vertical;
}

.field select[multiple] {
  min-height: 136px;
  padding: 8px 11px;
}

.field small {
  color: var(--muted);
  font-weight: 400;
}

.readonly-display {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafafa;
}

.readonly-display span {
  color: var(--muted);
}

.readonly-display strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
}

.form-rule-section {
  padding: 14px 16px;
  border: 1px solid #cfe4ff;
  border-radius: 14px;
  background: #f8fbff;
}

.form-rule-section.form-rule-intro {
  border-color: transparent;
  background: #f3f8ff;
}

.form-rule-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-rule-title > span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.form-rule-title strong {
  display: block;
  color: #14213d;
  font-size: 17px;
  font-weight: 800;
}

.form-rule-title small {
  display: block;
  margin-top: 4px;
  color: #617089;
  font-size: 13px;
  font-weight: 500;
}

.rule-tabs-field {
  padding: 10px;
  border: 1px solid #cfe4ff;
  border-radius: 14px;
  background: #eef6ff;
}

.rule-tabs-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #14213d;
  font-weight: 800;
}

.rule-tabs-label small {
  text-align: right;
}

.rule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #30445f;
  font-weight: 800;
  padding: 0 16px;
}

.rule-tabs button:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand);
}

.rule-tabs button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: inset 0 -3px #ff7a00, 0 8px 18px rgba(22, 119, 255, 0.12);
}

.rule-table-field {
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfe4ff;
  border-radius: 14px;
  background: #fbfdff;
}

.rule-table-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rule-table-title strong {
  display: block;
  color: #14213d;
  font-size: 15px;
}

.rule-table-title small {
  display: block;
  margin-top: 4px;
}

.rule-table-title button,
.rule-table-row button {
  flex: 0 0 auto;
}

.country-cover-field {
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fbfcfe;
}

.country-cover-title,
.country-cover-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.country-cover-title strong {
  color: #172033;
  font-size: 15px;
}

.country-cover-title > span {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.country-cover-toolbar input {
  min-width: 0;
  flex: 1 1 280px;
}

.country-cover-toolbar button {
  flex: 0 0 auto;
  min-height: 40px;
}

.country-cover-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.country-cover-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border-right: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.country-cover-option:hover {
  background: #fff7f7;
}

.country-cover-option.selected {
  background: #fff0f1;
  color: #b91f2a;
}

.country-cover-option[hidden] {
  display: none;
}

.country-cover-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.country-cover-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rule-mode-hint {
  min-height: 36px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #eef6ff;
  color: #53657c;
  font-size: 13px;
  font-weight: 600;
}

.rule-table-rows {
  display: grid;
  gap: 10px;
}

.rule-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.rule-row-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.pricing-tier-range-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-tier-unit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-tier-first-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.surcharge-rule-grid {
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
}

.country-zone-row {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.country-zone-head {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr);
  gap: 10px;
}

.country-zone-price-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.country-zone-head label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.country-zone-head input,
.country-zone-head select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.country-attribute-overrides {
  display: grid;
  gap: 12px;
}

.country-attribute-override-row {
  overflow: hidden;
  border: 1px solid #d8e5f3;
  border-radius: 10px;
  background: #fff;
}

.country-attribute-override-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background: #f7fbff;
}

.country-attribute-override-row > summary::-webkit-details-marker {
  display: none;
}

.country-attribute-override-row > summary div,
.country-attribute-override-row > summary strong,
.country-attribute-override-row > summary small {
  display: block;
}

.country-attribute-override-row > summary strong {
  color: #1d3557;
  font-size: 14px;
}

.country-attribute-override-row > summary small,
.country-attribute-override-row > summary > span {
  color: #70849c;
  font-size: 12px;
}

.country-override-body {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid #e4edf6;
}

.country-override-head,
.country-override-grid {
  display: grid;
  gap: 10px;
}

.country-override-head {
  grid-template-columns: 0.8fr 1fr 1fr;
}

.country-override-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.country-override-head label,
.country-override-grid label,
.country-override-remark {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.country-override-head select,
.country-override-grid input,
.country-override-grid select,
.country-override-remark textarea,
.country-override-subrow input,
.country-override-subrow select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.country-override-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  background: #fcfcfd;
}

.country-override-section h4 {
  margin: 0;
  color: #31445d;
  font-size: 13px;
}

.country-override-subsection {
  display: grid;
  gap: 8px;
}

.country-override-subsection > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.country-override-subrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr)) auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  background: #fff;
}

.country-override-subrow.compact {
  grid-template-columns: repeat(4, minmax(100px, 1fr)) auto;
}

.country-override-subrow[data-country-override-tier-row] {
  grid-template-columns: repeat(4, minmax(82px, 1fr)) auto;
}

.country-override-subrow .danger {
  min-width: 52px;
}

.rule-empty {
  padding: 14px;
  border: 1px dashed #cfe4ff;
  border-radius: 12px;
  background: #f8fbff;
  color: #53657c;
  font-size: 13px;
  font-weight: 600;
}

.rule-row-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.rule-row-grid input,
.rule-row-grid select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.rule-table-row .danger {
  color: #c93640;
}

.rule-table-field[data-pricing-mode="first_additional"] .rule-table-rows,
.rule-table-field[data-pricing-mode="first_additional"] [data-add-pricing-tier] {
  display: none;
}

.rule-table-field[data-pricing-mode="tier_first_additional"] .pricing-tier-unit-grid,
.rule-table-field:not([data-pricing-mode="tier_first_additional"]) .pricing-tier-first-grid {
  display: none;
}

.rule-table-field:not([data-pricing-mode="tier_weight"]) .pricing-tier-weight-grid,
.rule-table-field[data-pricing-mode="tier_weight"] .pricing-tier-unit-grid {
  display: none;
}

.upload-field {
  position: relative;
}

.upload-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-drop {
  display: grid;
  width: 100%;
  gap: 6px;
  min-height: 118px;
  place-items: center;
  padding: 18px;
  border: 1px dashed #b7d0ff;
  border-radius: var(--radius);
  background: #f7fbff;
  color: var(--brand);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.upload-field:hover .upload-drop,
.upload-field input[type="file"]:focus + .upload-drop {
  border-color: var(--brand);
  background: #eef6ff;
}

.upload-drop span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.upload-preview {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
}

.upload-preview.is-multiple {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  padding: 8px;
  overflow: auto;
}

.upload-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.upload-preview.is-multiple img {
  height: 96px;
  max-height: none;
  border-radius: 8px;
  object-fit: cover;
}

.upload-preview-item {
  position: relative;
  min-width: 0;
  margin: 0;
}

.upload-preview-item img {
  background: #fff;
}

.upload-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(31, 31, 31, 0.76);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.upload-preview-remove:hover,
.upload-preview-remove:focus-visible {
  border-color: #fff;
  background: #cf1322;
  color: #fff;
}

.grid {
  display: grid;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto 20px;
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.metric {
  min-height: 112px;
  padding: 20px;
  display: grid;
  align-content: space-between;
}

.metric small {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  color: #1f1f1f;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.metric.success {
  background: linear-gradient(180deg, #fff, var(--green-soft));
}

.metric.success strong {
  color: var(--green);
}

.overview-dashboard.user-section.active {
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid #d6e4ff;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.overview-hero h2 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: 0;
}

.overview-hero p {
  max-width: 760px;
  margin: 0;
  color: #595959;
  line-height: 1.75;
}

.overview-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.overview-hero-stats div,
.overview-metric,
.overview-todo,
.overview-progress-row,
.overview-rank-row,
.overview-warehouse-row,
.overview-activity-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.overview-hero-stats div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 96px;
  padding: 14px;
}

.overview-hero-stats span,
.overview-metric span,
.overview-progress-row span,
.overview-rank-row span,
.overview-warehouse-row span,
.overview-activity-row span {
  color: var(--muted);
  font-size: 12px;
}

.overview-hero-stats strong {
  color: var(--brand);
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.overview-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.overview-metric {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-height: 112px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.overview-metric strong {
  color: #1f1f1f;
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.overview-metric small {
  color: var(--muted);
  line-height: 1.5;
}

.overview-metric.success {
  background: #f6ffed;
  border-color: #d9f7be;
}

.overview-metric.success strong {
  color: var(--green);
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.overview-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.overview-panel.wide {
  grid-column: span 2;
}

.overview-todo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overview-todo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 12px;
  color: var(--text);
  text-decoration: none;
}

.overview-todo.is-hot {
  border-color: #ffd591;
  background: #fffaf0;
}

.overview-todo strong {
  color: var(--brand);
  font-size: 20px;
}

.overview-progress-row,
.overview-warehouse-row {
  display: grid;
  gap: 9px;
  padding: 12px;
  margin-bottom: 10px;
}

.overview-progress-row > div:first-child,
.overview-warehouse-row > div:first-child,
.overview-rank-row,
.overview-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.overview-progress-row strong,
.overview-rank-row strong,
.overview-warehouse-row strong,
.overview-activity-row strong {
  overflow-wrap: anywhere;
}

.overview-rank-row,
.overview-activity-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  min-height: 58px;
  padding: 12px;
  margin-bottom: 10px;
}

.overview-rank-row small,
.overview-warehouse-row small,
.overview-activity-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.redhat-overview .overview-hero {
  border: 0;
  background: #48191d;
  color: #fff;
  box-shadow: 0 18px 40px rgba(72, 25, 29, 0.18);
}

.redhat-overview .overview-hero h2 {
  color: #fff;
}

.redhat-overview .overview-hero > div:first-child > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.redhat-overview .overview-hero .eyebrow {
  color: #ffd9dc;
}

.redhat-overview .overview-hero-stats strong {
  color: #9f2730;
  font-size: 19px;
  line-height: 1.18;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.redhat-overview .overview-hero-stats div {
  min-height: 88px;
  padding: 12px 14px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.96);
}

.redhat-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.redhat-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.redhat-hero-actions a.primary {
  border-color: #fff;
  background: #fff;
  color: #48191d;
  box-shadow: none;
}

.redhat-overview .overview-metric {
  border-top: 3px solid #c93640;
  box-shadow: var(--shadow-soft);
}

.redhat-overview .overview-metric:nth-child(2) {
  border-top-color: #d98b28;
  background: #fffbf3;
}

.redhat-overview .overview-metric:nth-child(3) {
  border-top-color: #357da8;
  background: #f5faff;
}

.redhat-overview .overview-metric:nth-child(4) {
  border-top-color: #7e5ca8;
  background: #faf7ff;
}

.redhat-overview .overview-metric:nth-child(5),
.redhat-overview .overview-metric.success {
  border-top-color: #2f8f69;
  background: #f4fbf7;
}

.redhat-overview .overview-panel {
  padding: 18px;
  border-color: rgba(63, 31, 34, 0.09);
  box-shadow: var(--shadow-soft);
}

.redhat-overview .overview-panel > .section-title {
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.redhat-overview .overview-todo {
  border-color: rgba(63, 31, 34, 0.1);
  background: #fcfafa;
}

.redhat-overview .overview-todo.is-hot {
  border-color: #ecc4c7;
  background: #fff5f5;
}

.redhat-overview .overview-todo strong,
.redhat-overview .redhat-resource-row span {
  color: #b52c36;
}

.portal-redhat .progress-track span {
  background: var(--brand);
}

.redhat-overview .level-hero {
  box-shadow: none;
}

.redhat-resource-row {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--text);
  text-decoration: none;
}

.redhat-resource-row span {
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
}

.overview-warehouse-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.overview-warehouse-row .progress-track {
  grid-column: 1 / -1;
}

.level-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 18px;
  padding: 18px;
  border: 1px solid #d6e4ff;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: var(--shadow-soft);
}

.level-score {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 4px;
}

.level-score strong {
  color: var(--brand);
  font-size: 32px;
  line-height: 1;
}

.level-score small {
  color: var(--muted);
}

.level-progress-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.level-progress-item {
  display: grid;
  gap: 7px;
}

.level-progress-item div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #595959;
}

.level-progress-item small {
  color: var(--muted);
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0f0f0;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--green));
}

.coin-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.coin-task-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.coin-task-card.claimable {
  border-color: #ffccc7;
  background: linear-gradient(180deg, #fff, #fff7f6);
}

.coin-task-card.claimed {
  border-color: #d9d9d9;
  background: #f2f3f5;
}

.coin-task-card.claimed .coin-task-head strong,
.coin-task-card.claimed .coin-task-head > span,
.coin-task-card.claimed .coin-task-meta,
.coin-task-card.claimed .coin-task-head small {
  color: #8c8c8c;
}

.coin-task-card.claimed .progress-track {
  background: #e2e4e8;
}

.coin-task-card.claimed .progress-track span {
  background: #b8bdc6;
}

.coin-task-card.claimed button.primary:disabled {
  border-color: #c9ccd2;
  background: #d8dbe0;
  color: #7a7f87;
  box-shadow: none;
  cursor: not-allowed;
}

.coin-task-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.coin-task-head div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.coin-task-head strong {
  color: var(--text);
  font-size: 16px;
}

.coin-task-head small,
.coin-task-meta {
  color: var(--muted);
  line-height: 1.5;
}

.coin-task-head > span {
  flex: 0 0 auto;
  color: var(--brand);
  font-weight: 700;
}

.coin-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
}

.level-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 1.2fr);
  gap: 14px;
  align-items: center;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.level-rule.active {
  border-color: #91caff;
  background: #f8fbff;
}

.level-rule small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.level-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.level-benefits span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f6ffed;
  color: #237804;
  font-size: 12px;
}

.segment-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 1440px;
  margin: 0 auto 20px;
}

.segment-card {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.segment-card strong {
  color: var(--brand);
  font-size: 26px;
  line-height: 1;
}

.segment-card span {
  color: #595959;
  font-size: 13px;
}

.settings-overview {
  display: grid;
  gap: 18px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.setting-card {
  display: grid;
  gap: 18px;
  min-height: 142px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.setting-card:hover {
  border-color: #91caff;
  background: #f8fbff;
}

.setting-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.setting-card small {
  color: var(--muted);
  line-height: 1.6;
}

.setting-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: end;
}

.setting-card-meta span {
  color: #595959;
  font-size: 13px;
}

.setting-card-meta b {
  color: var(--brand);
  font-size: 13px;
}

.settings-block {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.settings-tag-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-tag-groups > div {
  display: grid;
  gap: 12px;
}

.settings-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #ffd6d6;
  border-radius: 999px;
  background: #fff6f6;
  color: #8f1d24;
  font-size: 13px;
}

.settings-tags small {
  color: #8c8c8c;
  font-size: 12px;
}

.platform-info-preview {
  align-self: start;
}

.platform-info-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.platform-info-head img {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
}

.platform-info-head strong {
  display: block;
  font-size: 20px;
}

.platform-info-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.settings-image-preview {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  margin-top: 14px;
}

.settings-image-preview div {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.settings-image-preview img {
  width: 100%;
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.panel {
  padding: 20px;
  margin: 0 auto 20px;
  max-width: 1440px;
}

.user-section:not(.active) {
  display: none;
}

.user-section.active:not(.grid):not(.split) {
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.portal-user .main {
  background:
    linear-gradient(180deg, rgba(255, 246, 246, 0.86), rgba(250, 248, 247, 0) 220px),
    var(--bg);
}

.portal-user .account-strip {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
}

.portal-redhat .main {
  background: #f8f5f5;
}

.portal-redhat .account-strip {
  background: rgba(255, 253, 253, 0.92);
  backdrop-filter: blur(16px);
}

.portal-redhat .account-avatar {
  background: #f6e4e5;
  color: #a72630;
}

.portal-redhat button:focus-visible,
.portal-redhat input:focus-visible,
.portal-redhat select:focus-visible {
  outline-color: rgba(189, 50, 59, 0.28);
}

.portal-redhat .user-section.active:not(.overview-dashboard):not(.grid):not(.split) {
  border-color: rgba(63, 31, 34, 0.1);
  box-shadow: var(--shadow-soft);
}

.portal-redhat .admin-redhat-card,
.portal-redhat .row-card,
.portal-redhat .warehouse-card,
.portal-redhat .quote-card {
  border-color: rgba(63, 31, 34, 0.1);
  box-shadow: 0 3px 12px rgba(72, 34, 38, 0.04);
}

.portal-redhat .admin-redhat-card:hover,
.portal-redhat .row-card:hover,
.portal-redhat .warehouse-card:hover,
.portal-redhat .quote-card:hover {
  border-color: #e4bfc2;
  box-shadow: var(--shadow-soft);
}

.portal-redhat .admin-redhat-grid div,
.portal-redhat .address-grid div,
.portal-redhat .tracking-order-summary div,
.portal-redhat .finance-detail-grid > div {
  border-color: rgba(63, 31, 34, 0.08);
  background: #fbf9f9;
}

.portal-redhat .filter-tabs a {
  border-radius: 7px;
  font-weight: 700;
}

.portal-redhat .filter-tabs a.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.portal-redhat .data-table th,
.portal-redhat .finance-filter-bar {
  background: #f8f3f3;
}

.portal-redhat .package-remark,
.portal-redhat .identity-document-grid > div {
  background: #fbf8f8;
}

.customer-overview.user-section.active {
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.customer-welcome-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(135deg, #8d1c1a 0%, #d33a35 54%, #62110f 100%);
  color: #fff;
  box-shadow: 0 24px 54px rgba(101, 30, 35, 0.18);
}

.customer-welcome-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 42%);
  pointer-events: none;
}

.customer-welcome-card > * {
  position: relative;
  z-index: 1;
}

.customer-welcome-card h2 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: 0;
}

.customer-welcome-card p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.customer-welcome-card p strong {
  color: #fff;
}

.customer-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.customer-welcome-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.customer-welcome-actions a.primary {
  border-color: #fff;
  background: #fff;
  color: #3d1a1c;
}

.customer-welcome-code {
  min-width: 150px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  text-align: right;
  backdrop-filter: blur(10px);
}

.customer-welcome-code span {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}

.customer-welcome-code strong {
  display: block;
  margin-top: 3px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}

.customer-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.customer-stat-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.customer-stat-card.rose {
  background: #fff3f4;
  border-color: #f5c6ca;
}

.customer-stat-card.violet {
  background: #f6f2ff;
  border-color: #ddd1ff;
}

.customer-stat-card.amber {
  background: #fff8e8;
  border-color: #f2d89a;
}

.customer-stat-card.green {
  background: #eefaf4;
  border-color: #c7ead8;
}

.customer-stat-card strong {
  display: block;
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.customer-stat-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.customer-stat-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.customer-stat-card b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand);
  font-style: normal;
  flex: 0 0 auto;
}

.customer-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.customer-panel {
  max-width: none;
  margin: 0;
  border-radius: 20px;
}

.customer-panel-wide {
  min-width: 0;
}

.customer-recent-list,
.customer-quick-actions {
  display: grid;
  gap: 10px;
}

.customer-recent-package {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf8f8;
}

.package-type-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.customer-recent-package strong,
.user-package-info strong {
  display: block;
  overflow-wrap: anywhere;
}

.customer-recent-package small,
.user-package-info small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.customer-recent-package-tail {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.customer-recent-package-tail > span {
  color: var(--muted);
  font-size: 12px;
}

.customer-quick-actions a {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf8f8;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.customer-quick-actions a:hover {
  border-color: rgba(192, 54, 60, 0.3);
  background: #fff;
  transform: translateY(-1px);
}

.customer-quick-actions span {
  color: var(--muted);
  font-size: 12px;
}

.customer-tip {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #f2d89a;
  border-radius: 18px;
  background: #fff8e8;
  color: #7a4d0b;
}

.customer-tip strong {
  color: #5f3900;
}

.customer-tip span {
  color: #7a4d0b;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logistics-product-title,
.supplier-management-title,
.channel-product-title {
  align-items: center;
}

.logistics-product-toolbar,
.logistics-product-filter,
.supplier-management-toolbar,
.supplier-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logistics-product-toolbar,
.supplier-management-toolbar {
  min-width: 0;
  margin-left: auto;
}

.supplier-filter input {
  width: 240px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

.supplier-filter input:hover,
.supplier-filter input:focus {
  border-color: var(--brand);
  outline: 0;
}

.logistics-product-filter select {
  width: 168px;
  min-width: 0;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: #fff;
  color: var(--text);
}

.logistics-product-filter select:hover,
.logistics-product-filter select:focus {
  border-color: var(--brand);
  outline: 0;
}

.logistics-product-count {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.inline-field {
  width: min(360px, 100%);
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto 20px;
}

.calculator-grid,
.fee-grid {
  display: grid;
  gap: 12px;
}

.calculator-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.quote-results {
  display: grid;
  gap: 12px;
}

.section-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
}

.section-subtitle strong {
  font-size: 15px;
}

.package-pack-hint {
  justify-content: flex-end;
  margin-top: 8px;
  color: var(--muted);
}

.package-quote-results {
  margin-bottom: 18px;
}

.quote-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #d6e4ff;
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: #f8fbff;
}

.quote-summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.warehouse-card,
.quote-card,
.row-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.warehouse-card:hover,
.quote-card:hover,
.row-card:hover {
  border-color: #d6e4ff;
  box-shadow: var(--shadow-soft);
}

.warehouse-card {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.invite-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  background: #eff6ff;
}

.invite-main > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.invite-main > strong {
  display: block;
  font-size: 24px;
  overflow-wrap: anywhere;
}

.invite-main > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
}

.invite-link-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.invite-link-list div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}

.invite-link-list span {
  color: var(--muted);
  font-size: 12px;
}

.invite-link-list code {
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.invite-side {
  display: grid;
  gap: 10px;
}

.invite-qrcode,
.invite-qrcode-placeholder {
  width: 168px;
  height: 168px;
  justify-self: end;
  border-radius: 14px;
}

.invite-qrcode {
  display: block;
  border: 1px solid #dbeafe;
  background: #fff;
}

.invite-qrcode-placeholder {
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px dashed #93c5fd;
  background: rgba(255, 255, 255, .7);
  text-align: center;
  box-sizing: border-box;
}

.invite-qrcode-placeholder strong,
.invite-qrcode-placeholder span {
  display: block;
}

.invite-qrcode-placeholder strong {
  color: var(--text);
}

.invite-qrcode-placeholder span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.invite-actions {
  justify-content: end;
}

.warehouse-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.warehouse-head small,
.quote-head small,
.row-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.address-grid div {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
}

.address-grid span {
  color: var(--muted);
  font-size: 12px;
}

.address-grid strong,
.warehouse-address-text {
  overflow-wrap: anywhere;
}

.domestic-address-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.domestic-address-grid .wide {
  grid-column: 1 / -1;
}

.row-card.photo-row {
  grid-template-columns: minmax(0, 1fr) auto 88px;
  align-items: center;
}

.photo-thumb {
  display: block;
  width: 72px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafafa;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package-stats {
  margin-bottom: 14px;
}

.redhat-package-card .package-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.redhat-package-card .package-photo-inline {
  width: 80px;
  height: 58px;
}

.redhat-order-card .order-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.redhat-order-card .order-detail-grid .wide {
  grid-column: span 2;
}

.order-card-actions {
  justify-content: flex-end;
}

.package-remark {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
  color: var(--muted);
}

.domestic-address-grid div {
  min-height: 58px;
  background: #fff;
}

.warehouse-address-text {
  margin: 0;
  padding: 13px;
  border: 1px dashed #91caff;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: #1f1f1f;
}

.quote-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.quote-card-recommended {
  border-color: #91caff;
  box-shadow: var(--shadow-soft);
}

.quote-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.quote-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.quote-head > strong {
  color: var(--brand);
  white-space: nowrap;
}

.quote-action-btn {
  padding: 6px 10px;
  border: 1px solid #f7b6be;
  border-radius: 10px;
  background: #fff5f6;
  color: #b91c33;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.quote-action-btn:hover {
  border-color: #b91c33;
  background: #ffe8ec;
}

.quote-action-btn:active {
  transform: translateY(1px);
}

.quote-price {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.quote-price strong {
  color: var(--brand);
  font-size: 18px;
}

.fee-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: #595959;
  font-size: 13px;
}

.fee-grid span {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fafafa;
  overflow-wrap: anywhere;
}

.fee-grid-all-in {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fee-grid-all-in span:first-child,
.fee-grid-all-in span:nth-child(2) {
  color: var(--ink);
  font-weight: 800;
}

.product-billing-card {
  margin-top: 16px;
}

.product-billing-list {
  display: block;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product-billing-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 90px minmax(180px, 240px);
  gap: 16px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}

.product-billing-row > span:first-child strong,
.product-billing-row > span:first-child small {
  display: block;
}

.product-billing-row > span:first-child small,
.product-billing-row > span:nth-child(2) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.product-billing-row select {
  width: 100%;
}

@media (max-width: 720px) {
  .fee-grid-all-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-billing-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px 0;
    min-height: auto;
  }

  .product-billing-list {
    max-height: 56vh;
  }
}

.unavailable-block {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.stack {
  display: grid;
  gap: 10px;
}

.row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  min-height: 60px;
  padding: 12px 14px;
}

.redhat-application-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto;
}

.application-name-button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.application-name-button:hover,
.application-name-button:focus-visible {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.application-list-time {
  display: grid;
  gap: 4px;
}

.application-list-time small {
  margin: 0;
}

.application-list-time strong {
  font-size: 13px;
  font-weight: 600;
}

.channel-product-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, auto) minmax(120px, auto) auto;
}

.channel-product-notes {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.channel-product-notes summary {
  width: fit-content;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.channel-product-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.channel-product-note-grid section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted, #fafafa);
}

.channel-product-note-grid section > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.channel-product-note-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .channel-product-note-grid {
    grid-template-columns: 1fr;
  }
}

.warehouse-account-row {
  grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1fr) auto auto;
}

.warehouse-account-row .actions {
  justify-content: flex-end;
}

.user-package-card.is-selectable {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.portal-user .filter-tabs {
  display: flex;
  gap: 6px;
  padding: 4px 0 14px;
  overflow-x: auto;
}

.portal-user .filter-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.portal-user .filter-tabs a:hover {
  background: #fbf8f8;
  color: var(--text);
}

.portal-user .filter-tabs a.active {
  border-color: rgba(192, 54, 60, 0.2);
  background: var(--brand-soft);
  color: var(--brand);
}

.portal-user .filter-tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(154, 133, 133, 0.13);
  font-size: 11px;
}

.portal-user .filter-tabs a.active span {
  background: #fff;
}

.portal-user .customer-packages-panel,
.portal-user .customer-orders-panel,
.portal-user .customer-freight-panel,
.portal-user .customer-warehouse-panel {
  max-width: 1180px;
  border-radius: 22px;
}

.portal-user .customer-packages-panel > .section-title,
.portal-user .customer-orders-panel > .section-title,
.portal-user .customer-freight-panel > .section-title,
.portal-user .customer-warehouse-panel > .section-title {
  align-items: flex-start;
}

.portal-user .user-package-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "visual info state" "visual meta meta";
  gap: 11px 16px;
  align-items: start;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
}

.portal-user .user-package-card.is-selectable {
  border-color: rgba(192, 54, 60, 0.22);
  background: #fffafa;
}

.portal-user .user-package-card:hover {
  border-color: rgba(192, 54, 60, 0.28);
  transform: translateY(-1px);
}

.user-package-select-cell {
  grid-area: visual;
  display: flex;
  gap: 9px;
  align-items: center;
  align-self: center;
}

.user-package-info {
  grid-area: info;
  min-width: 0;
}

.user-package-info-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  line-height: 1.4;
}

.user-package-info small {
  font-size: 12px;
  line-height: 1.45;
}

.user-package-photo {
  position: relative;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f3f3;
  cursor: zoom-in;
}

.user-package-photo:hover,
.user-package-photo:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(192, 54, 60, 0.12);
}

.user-package-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-package-photo span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  background: rgba(28, 23, 24, 0.78);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.portal-user .package-select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(192, 54, 60, 0.2);
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.portal-user .package-select.icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 6px;
}

.package-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 700;
}

.package-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.user-package-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.user-package-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.user-package-meta span {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid var(--line);
}

.user-package-meta span:first-child {
  padding-left: 0;
}

.user-package-meta span:last-child {
  padding-right: 0;
  border-right: 0;
}

.user-package-meta em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.user-package-meta strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.user-package-meta small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.user-package-state {
  grid-area: state;
  display: flex;
  justify-content: flex-end;
  align-self: start;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .portal-user .user-package-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }

  .user-package-meta span:nth-child(2) {
    border-right: 0;
  }

  .user-package-meta span:nth-child(3) {
    padding-left: 0;
  }
}

.badge.warm {
  background: #fff8e8;
  color: #9a5f00;
}

.portal-user .calculator-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbf8f8;
}

.freight-category-description {
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.freight-category-description[hidden] {
  display: none;
}

.freight-category-description strong {
  color: var(--text);
  font-size: 14px;
}

.freight-category-description p {
  margin: 6px 0 0;
  color: var(--text);
  white-space: pre-wrap;
}

.portal-user .quote-card {
  border-radius: 18px;
}

.portal-user .quote-card-recommended {
  border-color: rgba(192, 54, 60, 0.35);
  box-shadow: 0 14px 28px rgba(192, 54, 60, 0.08);
}

.portal-user .quote-price strong,
.portal-user .quote-head > strong {
  color: var(--brand);
}

.portal-user .fee-grid span {
  border: 1px solid rgba(42, 31, 31, 0.04);
  border-radius: 10px;
  background: #fbf8f8;
}

.portal-user .warehouse-card {
  border-radius: 20px;
}

.portal-user .warehouse-head.domestic-warehouse-head {
  margin: -16px -16px 0;
  padding: 18px;
  border-radius: 20px 20px 0 0;
  background: #3d1a1c;
  color: #fff;
}

.portal-user .warehouse-head.domestic-warehouse-head small {
  color: rgba(255, 255, 255, 0.7);
}

.portal-user .domestic-address-grid div {
  min-height: 72px;
  border-radius: 14px;
  background: #fbf8f8;
}

.portal-user .warehouse-address-text {
  border-color: rgba(192, 54, 60, 0.25);
  background: var(--brand-soft);
}

.portal-user .customer-warehouse-panel {
  max-width: 760px;
}

.customer-warehouse-address-wrap {
  display: grid;
  gap: 18px;
}

.portal-user .customer-address-card {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background: #fff;
}

.warehouse-address-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 24px;
  background: #421719;
  color: #fff;
}

.warehouse-address-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.warehouse-address-title span {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.warehouse-address-title strong {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.warehouse-city-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-address-lines {
  display: grid;
}

.warehouse-address-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}

.warehouse-line-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 22px;
}

.warehouse-address-line span:not(.warehouse-line-icon) {
  display: block;
  color: #a78d91;
  font-size: 14px;
  font-weight: 700;
}

.warehouse-address-line strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.warehouse-copy-all {
  width: calc(100% - 48px);
  min-height: 50px;
  margin: 20px 24px;
  border: 0;
  border-radius: 999px;
  background: #c93640;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(201, 54, 64, 0.18);
}

.warehouse-copy-all:hover {
  background: #b92f38;
}

.warehouse-address-tips {
  display: grid;
  gap: 8px;
  padding: 18px 24px;
  border: 1px solid #ffd766;
  border-radius: 20px;
  background: #fffaf0;
  color: #7a4d0b;
}

.warehouse-address-tips div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.warehouse-address-tips span {
  font-size: 18px;
  line-height: 1;
}

.warehouse-address-tips strong {
  color: #8a5400;
  font-size: 14px;
  font-weight: 800;
}

.account-binding-card {
  grid-template-columns: minmax(0, 1fr) auto minmax(160px, auto);
}

.tracking-order-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.tracking-order-summary div {
  display: grid;
  gap: 5px;
  min-height: 58px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.tracking-order-summary span {
  color: var(--muted);
  font-size: 12px;
}

.tracking-order-summary strong {
  overflow-wrap: anywhere;
}

.modal-card.tracking-modal {
  width: min(1180px, 100%);
}

.tracking-modal .modal-body,
.tracking-modal .modal-body.single {
  display: block;
  padding: 16px 18px;
}

.tracking-table {
  min-width: 1040px;
  table-layout: fixed;
}

.tracking-table th,
.tracking-table td {
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tracking-table th {
  font-size: 11px;
  white-space: nowrap;
}

.tracking-table td strong {
  font-size: 12px;
}

.tracking-table td small {
  margin-top: 3px;
  font-size: 11px;
}

.tracking-table th:nth-child(1),
.tracking-table td:nth-child(1) {
  width: 132px;
}

.tracking-table th:nth-child(2),
.tracking-table td:nth-child(2) {
  width: 130px;
}

.tracking-table th:nth-child(3),
.tracking-table td:nth-child(3) {
  width: 180px;
}

.tracking-table th:nth-child(4),
.tracking-table td:nth-child(4) {
  width: 190px;
}

.tracking-table th:nth-child(5),
.tracking-table td:nth-child(5) {
  width: 110px;
}

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: #fafafa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.data-table td {
  color: var(--text);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.xhs-material-grid {
  columns: 4 220px;
  column-gap: 14px;
}

.xhs-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.xhs-card:hover {
  border-color: #ffd8bf;
  box-shadow: 0 8px 22px rgba(31, 31, 31, 0.09);
  transform: translateY(-1px);
}

.xhs-card.is-used {
  background: #fffdfc;
}

.xhs-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fafafa;
  color: inherit;
  text-decoration: none;
}

.xhs-cover-video {
  aspect-ratio: 3 / 4;
}

.xhs-cover-poster {
  aspect-ratio: 1 / 1;
}

.xhs-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.24s ease;
}

.xhs-card:hover .xhs-cover img {
  transform: scale(1.025);
}

.xhs-video-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(31, 31, 31, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.xhs-card-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.xhs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.xhs-meta span {
  max-width: 100%;
  min-height: 23px;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #fafafa;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xhs-card h3 {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.xhs-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  color: #595959;
  font-size: 13px;
}

.xhs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xhs-tags span {
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--red-soft);
  color: #a8071a;
  font-size: 12px;
}

.xhs-usage {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.xhs-usage-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.xhs-usage-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fafafa;
}

.xhs-usage-list button {
  min-height: 28px;
  padding: 0 8px;
  white-space: nowrap;
}

.xhs-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.xhs-card-foot button,
.xhs-card-foot .primary {
  min-height: 32px;
  padding: 0 10px;
}

.material-preview-modal {
  width: min(980px, 100%);
}

.material-preview-modal .modal-body.single {
  display: block;
}

.package-photo-modal {
  width: min(920px, 100%);
}

.package-photo-modal .modal-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.package-photo-modal .modal-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-photo-modal .modal-head small {
  color: var(--muted);
  font-size: 12px;
}

.package-photo-modal .modal-body.single {
  display: block;
}

.modal-card.package-claim-modal {
  width: min(820px, 100%);
}

.package-claim-modal .modal-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.package-claim-modal .modal-head h2 {
  margin: 0;
}

.package-claim-modal .modal-head small {
  color: var(--muted);
  font-size: 12px;
}

.package-claim-modal .modal-body.single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.package-claim-search {
  display: grid;
  gap: 8px;
}

.package-claim-search > label {
  font-size: 13px;
  font-weight: 800;
}

.package-claim-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.package-claim-search input {
  min-width: 0;
}

.package-claim-search > small {
  color: var(--muted);
  font-size: 12px;
}

.package-claim-feedback {
  padding: 11px 13px;
  border-left: 3px solid #8b95a5;
  background: #f5f6f7;
  color: #5d6673;
  font-size: 13px;
}

.package-claim-feedback.success {
  border-left-color: #16834b;
  background: #eef9f3;
  color: #11663c;
}

.package-claim-feedback.pending {
  border-left-color: #c9850b;
  background: #fff8e8;
  color: #805600;
}

.package-claim-feedback.error {
  border-left-color: var(--brand);
  background: #fff1f1;
  color: #a41f27;
}

.package-claim-result {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.package-claim-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.package-claim-photo-strip button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f1f2f3;
}

.package-claim-photo-strip button:hover {
  border-color: var(--brand);
  transform: none;
}

.package-claim-photo-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.package-claim-photo-strip span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: rgba(20, 20, 20, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.package-claim-no-photo {
  display: grid;
  min-height: 96px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #f7f7f7;
  font-size: 13px;
}

.package-claim-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.package-claim-result-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.package-claim-result-head small {
  color: var(--muted);
  font-size: 12px;
}

.package-claim-result-head strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}

.package-claim-result-head .status-pill {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 4px;
  color: #9a6500;
  background: #fff3cf;
  font-size: 12px;
  font-weight: 800;
}

.package-claim-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.package-claim-detail-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.package-claim-detail-grid span {
  color: var(--muted);
  font-size: 11px;
}

.package-claim-detail-grid strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.package-claim-review-note,
.package-claim-existing {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #eeded9;
  border-radius: 6px;
  background: #fff8f5;
}

.package-claim-review-note strong,
.package-claim-existing strong {
  font-size: 13px;
}

.package-claim-review-note span,
.package-claim-existing span,
.package-claim-existing small {
  color: var(--muted);
  font-size: 12px;
}

.package-claim-existing {
  border-color: #cbe8d6;
  background: #eef9f3;
}

.package-photo-gallery {
  display: grid;
  gap: 16px;
}

.package-photo-stage {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 12px;
  align-items: center;
}

.package-photo-stage-content {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f5f6f7;
}

.package-photo-stage-viewport {
  display: grid;
  height: clamp(240px, 40vh, 380px);
  place-items: center;
  padding: 12px;
  background: #eff1f3;
}

.package-photo-stage-viewport img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.package-photo-stage-caption {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.package-photo-stage-caption > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.package-photo-stage-caption small {
  color: var(--muted);
  font-size: 12px;
}

.package-photo-stage-caption a {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.package-photo-nav {
  min-width: 0;
  min-height: 42px;
  padding: 8px;
  border-color: var(--line);
  color: var(--brand);
  background: #fff;
  font-size: 12px;
}

.package-photo-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.package-photo-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  max-height: 250px;
  overflow: auto;
}

.package-photo-thumbnail {
  display: grid;
  min-width: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #fff;
  text-align: left;
}

.package-photo-thumbnail:hover,
.package-photo-thumbnail.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(200, 28, 38, 0.1);
  transform: none;
}

.package-photo-thumbnail-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #f0f1f2;
}

.package-photo-thumbnail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package-photo-thumbnail-image i {
  position: absolute;
  top: 5px;
  left: 5px;
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 5px;
  border-radius: 4px;
  color: #fff;
  background: rgba(20, 20, 20, 0.72);
  font-size: 11px;
  font-style: normal;
}

.package-photo-thumbnail > span:last-child {
  display: grid;
  gap: 2px;
  padding: 7px 2px 1px;
}

.package-photo-thumbnail strong,
.package-photo-thumbnail small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-photo-thumbnail strong {
  font-size: 12px;
}

.package-photo-thumbnail small {
  color: var(--muted);
  font-size: 10px;
}

.material-preview {
  display: grid;
  gap: 18px;
}

.material-preview-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.material-preview-head > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: cover;
  background: #fafafa;
}

.material-preview-head h3 {
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.3;
}

.material-preview-usage {
  margin: 12px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.material-preview-section {
  display: grid;
  gap: 10px;
}

.material-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.material-preview-media,
.material-preview-file {
  display: grid;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.material-preview-media img,
.material-preview-media video {
  display: block;
  width: 100%;
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: contain;
  background: #fafafa;
}

.material-preview-media span,
.material-preview-media a,
.material-preview-file {
  color: var(--muted);
  font-size: 12px;
}

.material-preview-copy {
  max-height: 320px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
  color: #262626;
  font: inherit;
  line-height: 1.75;
  white-space: pre-wrap;
}

.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.knowledge-grid {
  display: grid;
  gap: 12px;
}

.knowledge-list {
  display: grid;
  gap: 10px;
}

.knowledge-filter-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.knowledge-filter-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.knowledge-filter-row > span {
  color: var(--muted);
  font-size: 13px;
}

.filter-tabs.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tabs.compact button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-weight: 700;
}

.filter-tabs.compact button span {
  color: var(--muted);
  font-size: 12px;
}

.filter-tabs.compact button.active {
  border-color: rgba(209, 52, 67, 0.36);
  background: rgba(209, 52, 67, 0.1);
  color: var(--brand-red);
}

.knowledge-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
}

.knowledge-search input {
  min-width: 0;
}

.markdown-file-status {
  padding: 9px 11px;
  border: 1px solid #d8e8dc;
  border-radius: 6px;
  color: #376348;
  background: #f2faf4;
  font-size: 12px;
}

.rich-markdown-textarea {
  width: 100%;
  min-height: 540px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #333;
  background: #fff;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
}

.knowledge-list-head,
.knowledge-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 120px 120px 84px 92px 132px;
  gap: 12px;
  align-items: center;
}

.knowledge-list-head {
  padding: 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.knowledge-list-row {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.knowledge-list-row:hover,
.knowledge-list-row.active {
  border-color: #b7d7ff;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.knowledge-list-row > span {
  min-width: 0;
  color: #4b5563;
  font-size: 13px;
}

.knowledge-list-stats {
  display: grid;
  gap: 2px;
}

.knowledge-list-stats strong {
  color: var(--text);
  font-size: 14px;
}

.knowledge-list-stats small {
  color: var(--muted);
  font-size: 11px;
}

.knowledge-list-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.knowledge-list-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.knowledge-list-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-list-title small {
  display: -webkit-box;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.knowledge-list-actions {
  display: flex;
  gap: 6px;
  justify-self: end;
}

.knowledge-list-actions button {
  min-width: 58px;
}

.knowledge-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.knowledge-card:hover,
.knowledge-card.active {
  border-color: #b7d7ff;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.knowledge-card img {
  width: 112px;
  height: 128px;
  border-radius: 8px;
  object-fit: cover;
  background: #f5f7fb;
}

.knowledge-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.knowledge-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.knowledge-pin {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px 5px;
  border-radius: 3px;
  color: #b4232c;
  background: #fff0f0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.knowledge-card h3 .knowledge-pin {
  margin-right: 7px;
  vertical-align: middle;
}

.knowledge-card p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.knowledge-preview {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.knowledge-cover {
  aspect-ratio: 16 / 7;
  background: #f5f7fb;
}

.knowledge-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knowledge-article {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.knowledge-article h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
}

.knowledge-subtitle,
.knowledge-article p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.85;
}

.knowledge-subtitle {
  color: var(--muted);
  font-size: 16px;
}

.knowledge-points {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: #f7fbff;
}

.knowledge-points span {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.55;
}

.knowledge-lock {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #ffd8bf;
  border-radius: 8px;
  background: #fff7e6;
}

.knowledge-lock p {
  color: #7a3e00;
}

.knowledge-lock button {
  justify-self: start;
}

.knowledge-article.compact {
  padding: 18px;
}

.knowledge-article h3,
.knowledge-article h4 {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.knowledge-article h3 {
  font-size: 20px;
}

.knowledge-article h4 {
  font-size: 17px;
}

.knowledge-article blockquote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: #f7fbff;
  color: #374151;
  line-height: 1.75;
}

.knowledge-article ul {
  margin: 0;
  padding-left: 20px;
  color: #4b5563;
  line-height: 1.85;
}

.knowledge-article ol {
  margin: 0;
  padding-left: 20px;
  color: #4b5563;
  line-height: 1.85;
}

.knowledge-article img {
  max-width: 100%;
  border-radius: 8px;
}

.knowledge-article figure {
  margin: 0;
}

.knowledge-article figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.knowledge-article aside {
  padding: 12px 14px;
  border: 1px solid #ffd8bf;
  border-radius: 8px;
  background: #fff7e6;
  color: #7a3e00;
  line-height: 1.75;
}

.knowledge-article hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--line);
}

.editor-field {
  display: grid;
  gap: 10px;
}

.editor-label {
  display: grid;
  gap: 5px;
  color: #595959;
  font-size: 13px;
  font-weight: 500;
}

.editor-label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.material-filter-bar {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(220px, 1.4fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.material-filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.material-filter-bar input,
.material-filter-bar select {
  width: 100%;
  min-height: 38px;
}

.material-tag-picker {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.material-tag-picker-head,
.material-tag-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.material-tag-picker-head > strong {
  color: var(--text);
}

.material-tag-picker-head > span,
.material-tag-selected-empty,
.material-tag-options-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.material-tag-selected {
  display: flex;
  min-height: 34px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.material-tag-chip {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 5px 6px 5px 9px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.material-tag-chip.is-new {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.material-tag-chip small {
  padding: 1px 4px;
  border-radius: 4px;
  background: currentColor;
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
}

.material-tag-chip button {
  display: inline-grid;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: currentColor;
  font-size: 16px;
  line-height: 1;
}

.material-tag-chip button:hover {
  background: rgba(0, 0, 0, 0.07);
}

.material-tag-entry input {
  flex: 1;
}

.material-tag-entry button {
  min-width: 64px;
}

.material-tag-options {
  display: flex;
  max-height: 132px;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  overflow-y: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.material-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-size: 12px;
}

.material-tag-option.selected {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #b91c1c;
}

.material-tag-option input {
  width: 14px;
  min-width: 14px;
  min-height: 14px;
  height: 14px;
  padding: 0;
}

.material-attachment-field-head,
.material-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.material-attachment-field-head > span {
  color: var(--muted);
  font-size: 12px;
}

.material-markdown-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.material-markdown-selected span {
  padding: 5px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
}

.material-attachment-list {
  display: grid;
  gap: 8px;
}

.material-attachment-row {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.material-attachment-row > div:first-child {
  min-width: 0;
}

.material-attachment-row strong,
.material-attachment-row small {
  display: block;
  overflow-wrap: anywhere;
}

.material-attachment-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.material-attachment-row.is-removed {
  opacity: 0.52;
  background: #f5f5f5;
}

.material-attachment-row .actions {
  flex: 0 0 auto;
}

.material-attachment-row a {
  color: var(--brand);
  font-size: 12px;
  text-decoration: none;
}

.taxonomy-row {
  grid-template-columns: minmax(220px, 1.5fr) minmax(80px, 0.45fr) minmax(80px, 0.45fr) auto;
}

@media (max-width: 780px) {
  .material-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .material-tag-entry {
    align-items: stretch;
  }

  .material-tag-entry button {
    min-width: 58px;
  }

  .material-tag-options {
    max-height: 166px;
  }

  .material-filter-search {
    grid-column: 1 / -1;
  }

  .material-attachment-field-head,
  .material-attachment-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .taxonomy-row {
    grid-template-columns: 1fr;
  }
}

.editor-toolbar button {
  min-height: 32px;
  padding: 0 10px;
  background: #fff;
  color: #1f2937;
}

.editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.editor-workspace textarea {
  min-height: 360px;
  line-height: 1.7;
}

.editor-preview {
  min-height: 360px;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.knowledge-composer-card {
  min-height: calc(100vh - 130px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f3f4f6;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.knowledge-composer-form {
  display: grid;
  min-height: inherit;
}

.knowledge-composer-top {
  position: static;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

.knowledge-composer-top h2,
.knowledge-settings-panel h3 {
  margin: 0;
  font-size: 18px;
}

.knowledge-composer-top p {
  margin: 3px 0 0;
}

.knowledge-composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.knowledge-composer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
  padding: 18px;
}

.knowledge-composer-editor {
  min-width: 0;
}

.knowledge-settings-panel {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 13px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.knowledge-settings-panel .field,
.knowledge-settings-panel .modal-checkbox {
  min-width: 0;
}

.rich-editor-field {
  display: grid;
  gap: 10px;
}

.knowledge-composer-editor .editor-label {
  display: none;
}

.rich-editor-shell {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f3f4f6;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.rich-editor-toolbar {
  position: static;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.rich-editor-toolbar button,
.rich-editor-toolbar select,
.rich-color-picker {
  width: auto;
  flex: 0 0 auto;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 13px;
}

.rich-editor-toolbar button {
  padding: 0 9px;
}

.rich-editor-toolbar button:hover,
.rich-editor-toolbar select:hover,
.rich-color-picker:hover {
  background: #eef2f7;
}

.rich-editor-toolbar select {
  min-width: 112px;
  max-width: 150px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.toolbar-divider {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: #e5e7eb;
}

.rich-color-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
}

.rich-color-picker input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.rich-editor-paper {
  width: min(840px, calc(100% - 32px));
  min-height: 680px;
  margin: 16px auto 0;
  padding: 54px 64px 64px;
  border: 1px solid #edf0f4;
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.modal-card .rich-editor-paper {
  width: 100%;
  min-height: 440px;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rich-composer-head {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.rich-composer-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 16px;
  align-items: center;
}

.rich-composer-line.compact {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.rich-title-input,
.rich-author-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #262626;
}

.rich-title-input {
  min-height: 46px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
}

.rich-title-input::placeholder,
.rich-author-input::placeholder,
.rich-editor-canvas[data-empty="true"]::before {
  color: #b8bdc7;
}

.rich-author-input {
  min-height: 28px;
  font-size: 16px;
}

.rich-counter {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.rich-editor-canvas {
  min-height: 540px;
  outline: none;
  color: #333;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.rich-editor-canvas[data-empty="true"]::before {
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-editor-canvas p,
.rich-editor-canvas h2,
.rich-editor-canvas h3,
.rich-editor-canvas h4,
.rich-editor-canvas blockquote,
.rich-editor-canvas ul,
.rich-editor-canvas ol,
.rich-editor-canvas pre,
.rich-editor-canvas table,
.rich-editor-canvas aside {
  margin-top: 0;
  margin-bottom: 16px;
}

.rich-editor-canvas h2 {
  font-size: 25px;
  line-height: 1.35;
}

.rich-editor-canvas h3 {
  font-size: 21px;
}

.rich-editor-canvas h4 {
  font-size: 18px;
}

.rich-editor-canvas blockquote,
.rich-editor-canvas aside {
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: #f7fbff;
  color: #374151;
}

.rich-editor-canvas aside {
  border-color: #faad14;
  background: #fff7e6;
  color: #7a3e00;
}

.rich-editor-canvas table,
.knowledge-article table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}

.rich-editor-canvas th,
.rich-editor-canvas td,
.knowledge-article th,
.knowledge-article td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.rich-editor-canvas th,
.knowledge-article th {
  background: #f8fafc;
  font-weight: 600;
}

.rich-editor-canvas pre,
.knowledge-article pre {
  overflow: auto;
  padding: 14px;
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  line-height: 1.65;
}

.rich-source-textarea {
  width: 100%;
  min-height: 540px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: "Consolas", "Courier New", monospace;
  line-height: 1.6;
}

.rich-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.rich-editor-footer strong {
  color: var(--text);
}

.article-preview-modal .modal-body.single {
  display: block;
}

.inline-form-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.inline-form {
  display: grid;
  gap: 16px;
}

.inline-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.inline-form-head h2 {
  margin: 0;
  font-size: 20px;
}

.inline-form-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.inline-form-body .modal-span {
  grid-column: 1 / -1;
}

.inline-form-preview {
  min-width: 0;
}

.admin-redhat-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.admin-redhat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-redhat-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-redhat-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-redhat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-redhat-grid div {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
}

.admin-redhat-grid span {
  color: var(--muted);
  font-size: 12px;
}

.admin-redhat-grid strong {
  overflow-wrap: anywhere;
}

.identity-documents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 10px;
}

.identity-documents.empty {
  grid-template-columns: 1fr;
  max-width: 260px;
  padding: 11px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fafafa;
}

.identity-documents.empty span,
.identity-document-card span {
  color: var(--muted);
  font-size: 12px;
}

.identity-documents.empty strong {
  display: block;
  margin-top: 4px;
}

.identity-document-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
  color: inherit;
  text-decoration: none;
}

.identity-document-card img {
  width: 100%;
  height: 128px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

.warehouse-staff-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff8f3;
}

.warehouse-staff-list span {
  color: var(--muted);
  font-size: 12px;
}

.redhat-profile-card-v2 {
  gap: 20px;
  padding: 22px;
}

.redhat-profile-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.redhat-profile-avatar {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 8px;
  background: #fbe8e9;
  color: var(--brand);
  font-size: 28px;
  font-weight: 700;
}

.redhat-profile-heading {
  display: grid;
  gap: 4px;
}

.redhat-profile-heading span,
.redhat-profile-heading small,
.profile-section-title small {
  color: var(--muted);
  font-size: 12px;
}

.redhat-profile-heading strong {
  font-size: 24px;
}

.redhat-profile-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.profile-section-title {
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.identity-document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.identity-document-grid > div {
  display: grid;
  gap: 7px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafa;
}

.identity-document-grid span {
  color: var(--muted);
  font-size: 12px;
}

.identity-document-grid a {
  color: var(--brand);
  font-weight: 600;
}

.profile-business-metrics {
  margin-bottom: 0;
}

.profile-business-metrics .metric {
  min-height: 88px;
  padding: 14px;
  box-shadow: none;
}

.profile-business-metrics .metric strong {
  font-size: 18px;
}

.profile-warehouse-summary,
.profile-consumer-summary,
.warehouse-lifecycle-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: #fffafa;
}

.profile-warehouse-summary > div,
.profile-consumer-summary > div,
.warehouse-lifecycle-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.profile-warehouse-summary span,
.profile-consumer-summary span,
.warehouse-lifecycle-panel span {
  color: var(--muted);
  font-size: 12px;
}

.profile-warehouse-summary small,
.profile-consumer-summary small,
.warehouse-lifecycle-panel small,
.fallback-warehouse-card > small {
  color: var(--muted);
  line-height: 1.55;
}

.warehouse-lifecycle-panel {
  margin-bottom: 18px;
  background: #fff;
}

.warehouse-lifecycle-panel.success {
  border-left-color: #15803d;
  background: #f4fbf6;
}

.warehouse-lifecycle-panel.warning {
  border-left-color: #d97706;
  background: #fffaf0;
}

.warehouse-lifecycle-panel.danger {
  border-left-color: #b91c1c;
  background: #fff5f5;
}

.fallback-warehouse-card {
  border-style: dashed;
  background: #fafafa;
}

.profile-consumer-summary {
  border-left-color: #1f7a55;
  background: #f5fbf8;
}

.warehouse-platform-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.warehouse-platform-note small {
  color: var(--muted);
  line-height: 1.55;
}

.redhat-receiving-preference {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin: 8px 0 24px;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--line);
}

.redhat-receiving-preference .field {
  min-width: 0;
  margin: 0;
}

.redhat-receiving-preference select {
  width: 100%;
  min-width: 0;
  height: 44px;
  font-size: 14px;
}

.redhat-receiving-current {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-bottom: 8px;
  font-size: 14px;
}

.redhat-receiving-current span {
  color: var(--muted);
  font-size: 12px;
}

.redhat-receiving-current strong {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.redhat-receiving-preference button {
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .redhat-receiving-preference {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.warehouse-staff-list strong {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.logistics-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.logistics-product-actions {
  display: flex;
  justify-content: flex-end;
}

.logistics-product-actions button {
  min-width: 112px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.muted {
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #1f1f1f;
  color: #fff;
  box-shadow: var(--shadow);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 20, 20, 0.36);
}

.modal-card {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: auto;
  max-height: min(86vh, 860px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.modal-card.compact {
  width: min(560px, 100%);
}

.modal-card.compact.quote-package-modal {
  width: min(920px, 100%);
}

.quote-package-modal .modal-body {
  grid-template-columns: minmax(0, 1fr);
}

.quote-package-picker {
  min-width: 0;
}

.quote-package-picker-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.quote-package-picker-head > strong {
  margin-right: auto;
  color: var(--text);
  font-size: 14px;
}

.quote-package-picker-head label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.quote-package-picker-head [data-quote-package-count] {
  color: var(--muted);
  font-size: 12px;
}

.quote-package-picker input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.quote-package-table table {
  min-width: 720px;
  table-layout: fixed;
}

.quote-package-table th,
.quote-package-table td {
  padding: 10px 8px;
  vertical-align: middle;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.quote-package-table th:first-child,
.quote-package-table td:first-child {
  width: 48px;
  text-align: center;
}

.quote-package-table th:nth-child(2) {
  width: 30%;
}

.quote-package-table th:nth-child(3),
.quote-package-table th:nth-child(4) {
  width: 12%;
}

.quote-package-table th:nth-child(5) {
  width: 19%;
}

.quote-package-row {
  cursor: pointer;
}

.quote-package-row:hover {
  background: #fafafa;
}

.quote-package-row.selected,
.quote-package-row.selected:hover {
  background: #fff7f7;
}

.quote-package-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  cursor: pointer;
}

.quote-package-identity > span:last-child {
  min-width: 0;
}

.quote-package-identity strong,
.quote-package-identity small {
  display: block;
  overflow-wrap: anywhere;
}

.quote-package-identity strong {
  line-height: 1.35;
}

.quote-package-identity small {
  font-size: 11px;
}

.quote-package-photo {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7f3f3;
  color: var(--brand);
  font-weight: 700;
}

.quote-package-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .quote-package-modal .modal-body {
    padding: 14px;
  }

  .quote-package-table {
    overflow: visible;
    border: 0;
  }

  .quote-package-table table,
  .quote-package-table tbody {
    display: block;
    min-width: 0;
  }

  .quote-package-table thead {
    display: none;
  }

  .quote-package-table tr {
    display: grid;
    grid-template-columns: 18px repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  .quote-package-table tr.selected {
    border-color: rgba(192, 54, 60, 0.3);
  }

  .quote-package-table td {
    display: block;
    min-width: 0;
    width: auto !important;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .quote-package-table td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .quote-package-table td:nth-child(2) {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .quote-package-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .quote-package-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .quote-package-table td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .quote-package-table td:nth-child(6) { grid-column: 3; grid-row: 3; }

  .quote-package-table td:nth-child(n+3)::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
  }
}

.modal-card.rule-config-modal {
  width: min(1080px, 100%);
}

.modal-card.application-detail-modal {
  width: min(860px, 100%);
}

.modal-card.logistics-product-selection-modal {
  width: min(820px, 100%);
}

.logistics-product-selection-modal .modal-body {
  grid-template-columns: 1fr;
}

.logistics-product-selection-modal .modal-head > div {
  min-width: 0;
}

.logistics-product-selection-modal .modal-head h2 {
  margin: 0;
}

.logistics-product-selection-modal .modal-head small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.logistics-product-selection-list {
  display: grid;
  gap: 10px;
}

.logistics-product-option {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.logistics-product-option:hover,
.logistics-product-option.selected {
  border-color: rgba(192, 54, 60, 0.48);
  background: #fffafa;
}

.logistics-product-option.selected {
  box-shadow: inset 3px 0 0 var(--brand);
}

.logistics-product-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.logistics-product-option.selected .packing-address-radio {
  border-color: var(--brand);
  background: var(--brand);
}

.logistics-product-option-copy,
.logistics-product-option-copy small {
  display: block;
  min-width: 0;
}

.logistics-product-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logistics-product-option-head b {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 18px;
}

.logistics-product-option-copy small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.modal-card.order-outbound-modal {
  width: min(980px, 100%);
  height: min(86vh, 860px);
}

.modal-card.channel-order-modal {
  width: min(1080px, 100%);
}

.order-outbound-form,
.channel-order-selection-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
}

.order-outbound-modal .modal-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-outbound-modal .modal-head h2 {
  margin: 0;
}

.order-outbound-modal .modal-head small,
.order-outbound-section-head small {
  color: var(--muted);
  font-size: 12px;
}

.order-outbound-modal .modal-body.single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.order-outbound-order-field {
  max-width: 520px;
}

.order-outbound-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.order-outbound-section-head > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.order-outbound-section-head > div > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.order-outbound-section-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.order-outbound-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.order-outbound-summary > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  background: #fff;
}

.order-outbound-summary span,
.order-outbound-summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.order-outbound-summary strong,
.order-outbound-summary small {
  overflow-wrap: anywhere;
}

.order-outbound-summary strong {
  font-size: 13px;
}

.order-outbound-summary .order-outbound-recipient {
  grid-column: 1 / -1;
}

.order-outbound-channel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.order-outbound-channel-option {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.order-outbound-channel-option:hover,
.order-outbound-channel-option.selected {
  border-color: rgba(192, 54, 60, 0.48);
  background: #fffafa;
}

.order-outbound-channel-option.selected {
  box-shadow: inset 3px 0 0 var(--brand);
}

.order-outbound-channel-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.order-outbound-channel-option.selected .packing-address-radio {
  border-color: var(--brand);
  background: var(--brand);
}

.order-outbound-channel-copy,
.order-outbound-channel-copy small {
  display: block;
  min-width: 0;
}

.order-outbound-channel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.order-outbound-channel-head strong,
.order-outbound-channel-copy small {
  overflow-wrap: anywhere;
}

.order-outbound-channel-head b {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 14px;
}

.order-outbound-channel-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.order-outbound-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #d8caca;
  border-radius: 6px;
  background: #fcfafa;
  color: var(--muted);
  text-align: center;
}

.order-outbound-channel-feedback {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #16834b;
  background: #eef9f3;
  color: #11663c;
  font-size: 12px;
}

.order-outbound-channel-feedback.error {
  border-left-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.order-outbound-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.order-outbound-fields input[readonly] {
  border-style: dashed;
  background: #f5f6f7;
  color: var(--text);
  cursor: default;
}

.logistics-unavailable-list,
.logistics-selection-note {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.logistics-unavailable-list summary {
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.logistics-unavailable-list p {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  margin: 10px 0 0;
}

.logistics-unavailable-list span {
  overflow-wrap: anywhere;
}

.application-detail-content {
  display: grid;
  gap: 16px;
}

.application-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-left: 3px solid var(--brand);
  background: #f8fbff;
}

.application-detail-summary span,
.application-detail-grid span,
.application-detail-note > span,
.application-detail-documents > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.application-detail-summary strong {
  display: block;
  margin-top: 4px;
}

.application-detail-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.application-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.application-detail-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.application-detail-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.application-detail-note,
.application-detail-documents {
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fafafa;
}

.application-detail-note.is-audit {
  border-color: #dbeafe;
  background: #f8fbff;
}

.application-detail-note p {
  margin: 8px 0 0;
  line-height: 1.7;
}

.application-detail-documents > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.application-detail-documents a {
  color: var(--brand);
  font-weight: 600;
}

.modal-form {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  min-height: 0;
  height: 100%;
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

.modal-head {
  border-bottom: 1px solid var(--line);
}

.modal-close {
  min-width: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  overflow: auto;
}

.modal-card.compact .modal-body {
  grid-template-columns: 1fr;
}

.modal-span {
  grid-column: 1 / -1;
}

.modal-checkbox {
  align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  padding: 10px 0 0;
}

.modal-checkbox input {
  width: 16px;
  min-height: 16px;
  margin: 2px 0 0;
}

.modal-checkbox small {
  grid-column: 2;
}

.checkbox-group-field {
  display: grid;
  gap: 10px;
}

.checkbox-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.checkbox-group-title small {
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}

.checkbox-group-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.checkbox-group-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.checkbox-group-option:hover,
.checkbox-group-option:has(input:checked) {
  border-color: #e9a8ad;
  background: #fff0f1;
  color: #b91f2a;
}

.checkbox-group-option input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.checkbox-group-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-checkbox.forecast-option-start {
  grid-column: 1;
}

.modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #fafafa;
}

.packing-order-modal {
  width: min(1060px, 100%);
}

.packing-order-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
}

.packing-order-modal .modal-head > div {
  display: grid;
  gap: 3px;
}

.packing-order-modal .modal-head h2 {
  margin: 0;
}

.packing-order-modal .modal-head small,
.packing-order-section-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.packing-order-body {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.packing-order-section {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.packing-order-section + .packing-order-section {
  border-top: 1px solid var(--line);
}

.packing-order-section.compact {
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 0.7fr);
  align-items: center;
}

.packing-order-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.packing-order-section-head > div:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.packing-order-section-head > div:first-child > span {
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.packing-order-section-head > div:first-child > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.packing-order-section-head strong {
  font-size: 15px;
}

.packing-order-section-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.packing-order-section-actions button,
.packing-add-address {
  min-height: 34px;
  padding: 0 11px;
  border-color: transparent;
  background: transparent;
  color: var(--brand);
  font-size: 13px;
}

.packing-order-section-actions button:hover,
.packing-add-address:hover {
  background: var(--brand-soft);
}

.packing-package-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
}

.packing-package-option {
  display: grid;
  grid-template-columns: 34px 78px minmax(150px, 1fr) 116px 88px minmax(170px, 0.95fr) 104px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.packing-package-option:hover {
  border-color: rgba(192, 54, 60, 0.28);
}

.packing-package-option.selected {
  border-color: rgba(192, 54, 60, 0.45);
  background: #fffafa;
  box-shadow: inset 3px 0 0 var(--brand);
}

.packing-package-option label {
  min-width: 0;
  cursor: pointer;
}

.packing-package-check {
  display: grid;
  place-items: center;
}

.packing-package-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.packing-package-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f7f7;
  color: var(--muted);
  font-size: 24px;
}

.packing-package-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packing-package-photo small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(24, 24, 24, 0.72);
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
}

.packing-package-main,
.packing-package-metric {
  display: grid;
  gap: 4px;
}

.packing-package-main strong,
.packing-package-metric strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.packing-package-main small,
.packing-package-metric span,
.packing-package-metric small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.packing-package-quantity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.packing-package-quantity span,
.packing-package-quantity small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.packing-package-quantity input {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
}

.packing-package-quantity.fixed strong {
  font-size: 13px;
}

.packing-address-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.packing-selected-address {
  min-width: 0;
}

.packing-selected-address-card,
.packing-selected-address-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.packing-selected-address-card {
  border-color: rgba(192, 54, 60, 0.34);
  box-shadow: inset 3px 0 0 var(--brand);
}

.packing-selected-address-copy,
.packing-selected-address-empty > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.packing-selected-address-copy > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.packing-selected-address-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.packing-selected-address-copy i {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.packing-selected-address-copy p,
.packing-selected-address-empty small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.packing-selected-address-card > button,
.packing-selected-address-empty > button {
  flex: 0 0 auto;
  color: var(--brand);
}

.packing-address-selector-modal {
  width: min(980px, 100%);
}

.packing-address-selector-modal .modal-head > div {
  display: grid;
  gap: 3px;
}

.packing-address-selector-modal .modal-head h2 {
  margin: 0;
}

.packing-address-selector-modal .modal-head small {
  color: var(--muted);
  font-size: 12px;
}

.packing-address-selector-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.packing-address-search {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, 0.8fr)) auto;
  align-items: end;
  gap: 10px;
}

.packing-address-search label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.packing-address-search input,
.packing-address-search select,
.packing-address-search button {
  min-height: 40px;
}

.packing-address-selector-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.packing-address-selector-heading small {
  color: var(--muted);
  font-size: 12px;
}

.packing-address-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.packing-address-selector-item {
  display: grid;
  justify-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.packing-address-selector-item:hover,
.packing-address-selector-item.selected {
  border-color: rgba(192, 54, 60, 0.45);
  background: #fffafa;
}

.packing-address-selector-item.selected {
  box-shadow: inset 3px 0 0 var(--brand);
}

.packing-address-selector-person {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.packing-address-selector-person em,
.packing-address-selector-item small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.packing-address-selector-person i {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
}

.packing-address-selector-item > span:nth-child(2) {
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.packing-address-selector-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.packing-address-selector-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.packing-address-selector-pagination span {
  min-width: 110px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.packing-address-option {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.packing-address-option:hover {
  border-color: rgba(192, 54, 60, 0.28);
}

.packing-address-option.selected {
  border-color: rgba(192, 54, 60, 0.48);
  background: #fffafa;
  box-shadow: inset 3px 0 0 var(--brand);
}

.packing-address-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.packing-address-radio {
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid #c7c7c7;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}

.packing-address-option.selected .packing-address-radio,
.packing-logistics-product-option.selected .packing-address-radio,
.packing-logistics-product-option > input:checked + .packing-address-radio {
  border-color: var(--brand);
  background: var(--brand);
}

.packing-address-content {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.packing-address-person {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.packing-address-person em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.packing-address-person i {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.packing-address-content small {
  color: var(--muted);
  font-size: 11px;
}

.packing-address-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 20px;
  border: 1px dashed #d8caca;
  border-radius: 8px;
  background: #fcfafa;
}

.packing-address-empty small {
  color: var(--muted);
}

.packing-address-empty button {
  margin-top: 4px;
  color: var(--brand);
}

.packing-coupon-field {
  margin: 0;
}

.packing-logistics-product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.packing-logistics-product-list > .muted,
.packing-logistics-unavailable,
.packing-logistics-empty {
  grid-column: 1 / -1;
}

.packing-logistics-product-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.packing-logistics-product-option.selected {
  border-color: rgba(192, 54, 60, 0.48);
  background: #fffafa;
  box-shadow: inset 3px 0 0 var(--brand);
}

.packing-logistics-product-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.packing-logistics-product-option > span:nth-of-type(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.packing-logistics-product-option strong,
.packing-logistics-product-option small {
  overflow-wrap: anywhere;
}

.packing-logistics-product-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.packing-logistics-product-price {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.packing-logistics-product-price b {
  color: var(--brand);
  font-size: 14px;
  white-space: nowrap;
}

.packing-logistics-product-price button {
  min-height: auto;
  padding: 0;
  border: 0;
  color: #1769c2;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}

.packing-logistics-product-price button:hover {
  color: #0d4f99;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.packing-pricing-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}

.packing-pricing-summary > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  background: #fff;
}

.packing-pricing-summary span,
.packing-pricing-rule-grid span,
.packing-pricing-rule-section small,
.packing-pricing-note {
  color: var(--muted);
  font-size: 11px;
}

.packing-pricing-summary strong {
  color: var(--brand);
  font-size: 18px;
}

.packing-pricing-rule-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.packing-pricing-rule-section h3,
.packing-pricing-rule-section p,
.packing-pricing-note {
  margin: 0;
}

.packing-pricing-rule-section h3 {
  font-size: 14px;
}

.packing-pricing-rule-section p {
  color: var(--text);
  font-size: 12px;
  line-height: 1.65;
}

.packing-pricing-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.packing-pricing-rule-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.packing-pricing-rule-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: #f8f8f8;
}

.packing-pricing-rule-grid strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.packing-pricing-note {
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff8e8;
  line-height: 1.6;
}

.packing-logistics-unavailable {
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}

.packing-logistics-unavailable summary {
  color: var(--text);
  cursor: pointer;
}

.packing-logistics-unavailable p {
  display: grid;
  grid-template-columns: minmax(100px, 0.5fr) minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0 0;
}

.packing-logistics-empty {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px dashed #d8caca;
  border-radius: 8px;
  background: #fcfafa;
}

.packing-logistics-empty small {
  color: var(--muted);
  line-height: 1.5;
}

.logistics-adjustment-reason {
  margin-top: 14px;
}

.packing-order-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .order-outbound-modal {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }

  .order-outbound-summary,
  .order-outbound-channel-list,
  .order-outbound-fields {
    grid-template-columns: 1fr;
  }

  .order-outbound-summary .order-outbound-recipient,
  .order-outbound-fields .modal-span {
    grid-column: auto;
  }

  .order-outbound-modal .modal-head,
  .order-outbound-modal .modal-actions,
  .order-outbound-modal .modal-body.single {
    padding-right: 14px;
    padding-left: 14px;
  }

  .packing-order-modal {
    max-height: calc(100vh - 24px);
  }

  .packing-order-modal .modal-head,
  .packing-order-actions {
    padding: 13px 14px;
  }

  .packing-order-section {
    padding: 16px 14px;
  }

  .packing-order-section.compact,
  .packing-address-list {
    grid-template-columns: 1fr;
  }

  .packing-address-search,
  .packing-address-selector-grid {
    grid-template-columns: 1fr;
  }

  .packing-selected-address-card,
  .packing-selected-address-empty {
    align-items: flex-start;
    flex-direction: column;
  }

  .packing-selected-address-card > button,
  .packing-selected-address-empty > button {
    width: 100%;
  }

  .packing-logistics-product-option {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .packing-logistics-product-list {
    grid-template-columns: 1fr;
  }

  .packing-logistics-product-price {
    grid-column: 2;
    justify-items: start;
  }

  .packing-pricing-rule-grid,
  .packing-pricing-rule-grid.compact {
    grid-template-columns: 1fr 1fr;
  }

  .packing-order-section-head {
    align-items: flex-start;
  }

  .packing-package-list {
    max-height: none;
  }

  .packing-package-option {
    grid-template-columns: 26px 64px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding: 10px;
  }

  .packing-package-check {
    grid-column: 1;
    grid-row: 1;
    padding-top: 20px;
  }

  .packing-package-photo {
    grid-column: 2;
    grid-row: 1;
    width: 64px;
    height: 58px;
  }

  .packing-package-main {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .packing-package-quantity {
    grid-column: 2 / -1;
    grid-template-columns: 72px minmax(80px, 110px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .packing-package-quantity input {
    min-height: 38px;
  }

  .packing-package-metric {
    grid-column: 2 / -1;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 8px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .packing-package-metric small {
    grid-column: 2;
  }

  .packing-order-actions {
    flex-wrap: wrap;
  }

  .packing-order-actions > span {
    width: 100%;
    margin-right: 0;
  }
}

.error {
  padding: 28px;
}

#app.login-shell {
  display: block;
}

.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(135deg, #f7fbff, #fafafb 52%, #f8fbf4);
}

.login-card {
  position: relative;
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.login-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

#app.public-portal {
  display: block;
  min-height: 100vh;
  background: #fff7f2;
}

.public-page {
  min-height: 100vh;
  color: #241112;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1px, transparent 0) 0 0 / 28px 28px,
    linear-gradient(135deg, #971b19 0%, #d33a35 46%, #801612 100%);
}

.public-nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 76px;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(92, 20, 17, 0.34);
  box-sizing: border-box;
  backdrop-filter: blur(14px);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.public-brand img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 24px rgba(67, 8, 9, 0.22);
}

.public-brand strong,
.public-brand small {
  display: block;
}

.public-brand strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
}

.public-brand small {
  color: rgba(255, 255, 255, 0.68);
}

.public-nav nav,
.public-nav-actions,
.public-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-nav nav {
  justify-content: center;
}

.public-nav a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  text-decoration: none;
}

.public-nav nav a {
  padding: 8px 10px;
}

.public-nav nav a.active {
  color: #fff;
}

.public-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.public-nav-has-children > a {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.public-nav-caret {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1;
}

.public-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 30;
  display: grid;
  min-width: 178px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(75, 15, 13, 0.94);
  box-shadow: 0 18px 42px rgba(45, 8, 8, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  visibility: hidden;
}

.public-nav-dropdown::before {
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
  content: "";
}

.public-nav-has-children:hover .public-nav-dropdown,
.public-nav-has-children:focus-within .public-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.public-nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px !important;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.public-nav-dropdown a:hover,
.public-nav-dropdown a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.primary-link,
.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.primary-link {
  background: #fff;
  color: #c93640 !important;
  box-shadow: 0 18px 34px rgba(67, 8, 9, 0.18);
}

.public-nav .primary-link {
  background: #dd3b36;
  color: #fff !important;
  box-shadow: none;
}

.ghost-link {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
  color: #fff !important;
}

.public-nav .ghost-link {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.9) !important;
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.8fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  min-height: calc(100vh - 92px);
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(160px, 23vh, 260px) 28px clamp(96px, 12vh, 150px);
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.public-hero-copy,
.public-hero-visual {
  min-width: 0;
}

.public-kicker,
.public-section-head span,
.public-calculator-head span {
  color: #d83a35;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.public-hero .public-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

.public-hero .public-kicker::before {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.38);
  content: "";
}

.public-hero h1 {
  max-width: 620px;
  margin: 20px 0 24px;
  color: #fff;
  font-size: clamp(64px, 8.2vw, 124px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
}

.public-hero p {
  max-width: 620px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  line-height: 1.8;
}

.public-invite-box {
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto;
  gap: 10px;
  align-items: end;
  max-width: 520px;
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

.public-invite-box label,
.public-calculator label {
  display: grid;
  gap: 6px;
  color: #7a6666;
  font-weight: 800;
}

.public-invite-box label {
  color: rgba(255, 255, 255, 0.78);
}

.public-invite-box input,
.public-calculator input,
.public-calculator select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(42, 31, 31, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #2a1f1f;
}

.public-invite-box input {
  border-color: transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
}

.public-invite-box button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #c93640;
  font-weight: 800;
}

.public-hero-visual {
  display: grid;
  gap: 16px;
  align-content: end;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-hero-metrics article {
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(10px);
}

.public-hero-metrics strong {
  display: block;
  color: #fff;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
}

.public-hero-metrics span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.public-announcement-card {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  color: #241112;
  box-shadow: 0 24px 52px rgba(61, 8, 8, 0.22);
}

.public-announcement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: #9a8585;
  font-weight: 800;
}

.public-announcement-head span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff6666;
}

.public-announcement-card ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-announcement-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid #f2e7e4;
}

.public-announcement-card li:first-child {
  border-top: 0;
}

.public-announcement-card .tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.public-announcement-card .tag.service {
  background: #ffe9e9;
  color: #d53b3b;
}

.public-announcement-card .tag.holiday {
  background: #fff2d7;
  color: #c47a05;
}

.public-announcement-card .tag.product {
  background: #eaf0ff;
  color: #3c66db;
}

.public-announcement-card strong {
  color: #241112;
  font-size: 14px;
}

.public-announcement-card time {
  color: #9a8585;
  font-size: 13px;
  white-space: nowrap;
}

.public-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 20px;
  background: #fff7f2;
  box-shadow: 0 0 0 100vmax #fff7f2;
  clip-path: inset(0 -100vmax);
}

.public-section-wide {
  max-width: 1280px;
}

.public-calculator-page {
  padding-top: 72px;
}

.public-section-head {
  max-width: 720px;
  margin-bottom: 22px;
}

.public-section-head h2,
.public-about h2,
.public-contact h2 {
  margin: 6px 0 8px;
  color: #2a1f1f;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: 0;
}

.public-section-head p,
.public-about p,
.public-contact p {
  color: #7a6666;
}

.public-calculator {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(42, 31, 31, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.public-calculator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.public-calculator-head strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.public-calculator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.public-form-note {
  margin: 0;
  color: #9a8585;
}

.public-quote-results {
  margin-top: 16px;
}

.public-feature-grid,
.public-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.public-feature,
.public-flow-item,
.public-faq,
.public-contact-grid div {
  border: 1px solid rgba(42, 31, 31, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.public-feature {
  min-height: 150px;
  padding: 18px;
}

.public-feature strong {
  color: #421719;
  font-size: 19px;
}

.public-feature p,
.public-flow-item p,
.public-faq p {
  margin: 8px 0 0;
  color: #7a6666;
}

.public-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: center;
}

.public-about img {
  width: 100%;
  min-height: 180px;
  padding: 24px;
  border: 1px solid rgba(42, 31, 31, 0.08);
  border-radius: 24px;
  background: #fff;
  object-fit: contain;
}

.public-about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.public-about-points span {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(192, 54, 60, 0.18);
  border-radius: 999px;
  background: #fff6f6;
  color: #8f1d24;
  font-weight: 800;
}

.public-flow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-flow-item {
  min-height: 150px;
  padding: 18px;
}

.public-flow-item b {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #f5e8e8;
  color: #c93640;
}

.public-flow-item strong {
  display: block;
  font-size: 18px;
}

.public-faq-list {
  display: grid;
  gap: 10px;
}

.public-faq {
  padding: 16px 18px;
}

.public-faq summary {
  cursor: pointer;
  color: #421719;
  font-size: 16px;
  font-weight: 800;
}

.public-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 80px;
}

.public-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.public-contact-grid div {
  display: grid;
  gap: 6px;
  min-height: 84px;
  padding: 14px;
}

.public-contact-grid span {
  color: #9a8585;
  font-weight: 800;
}

.public-contact-grid strong {
  color: #2a1f1f;
  overflow-wrap: anywhere;
}

.public-footer {
  margin-top: 44px;
  background: #241112;
  color: rgba(255, 255, 255, 0.86);
}

.public-footer-inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 72px) 34px;
}

.public-footer .public-brand {
  color: #fff;
}

.public-footer .public-brand img {
  box-shadow: 0 12px 28px rgba(201, 54, 64, 0.2);
}

.public-footer .public-brand small,
.public-footer p,
.public-footer-links span {
  color: rgba(255, 255, 255, 0.62);
}

.public-footer-brand {
  display: grid;
  gap: 18px;
  align-content: start;
}

.public-footer-brand p {
  max-width: 430px;
  margin: 0;
}

.public-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.public-footer .ghost-link {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.public-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.public-footer-links div {
  display: grid;
  gap: 10px;
  align-content: start;
}

.public-footer-links strong {
  color: #fff;
  font-size: 16px;
}

.public-footer-links a,
.public-footer-links span {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.public-footer-links a:hover {
  color: #fff;
}

.public-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 72px) 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.public-footer-bottom a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
}

.public-footer-bottom a:hover {
  color: #fff;
}

.recruit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.58fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  min-height: calc(100vh - 76px);
  padding: clamp(50px, 8vw, 96px) clamp(20px, 5vw, 72px) 56px;
  background:
    linear-gradient(135deg, #fff8f3 0%, #fff 48%, #fff0ec 100%);
}

.recruit-hero h1 {
  margin: 14px 0 8px;
  color: #421719;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 1.02;
  letter-spacing: 0;
}

.recruit-hero p {
  max-width: 720px;
  color: #675252;
  font-size: 18px;
}

.recruit-hero-lead {
  margin: 0 0 16px;
  color: #d8202a !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 900;
}

.recruit-hero-card {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 30px;
  border: 1px solid rgba(216, 32, 42, 0.16);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 54px rgba(90, 32, 32, 0.13);
  text-align: center;
}

.recruit-hero-card img {
  width: min(100%, 220px);
  aspect-ratio: 1;
  object-fit: contain;
}

.recruit-hero-card strong {
  color: #421719;
  font-size: 22px;
}

.recruit-hero-card span {
  color: #8a6a55;
}

.recruit-subnav {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(42, 31, 31, 0.08);
  background: rgba(255, 248, 243, 0.94);
  backdrop-filter: blur(12px);
}

.recruit-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(66, 23, 25, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #421719;
  font-weight: 900;
  text-decoration: none;
}

.recruit-subnav a.active {
  border-color: #d8202a;
  background: #d8202a;
  color: #fff;
}

.recruit-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  padding: clamp(44px, 7vw, 82px) clamp(20px, 5vw, 72px);
  background: linear-gradient(135deg, #fff8f3 0%, #fff 52%, #fff1ed 100%);
}

.recruit-page-hero h1 {
  max-width: 760px;
  margin: 12px 0 16px;
  color: #421719;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.06;
  letter-spacing: 0;
}

.recruit-page-hero p {
  max-width: 720px;
  color: #675252;
  font-size: 18px;
}

.recruit-service-visual,
.recruit-partner-card,
.recruit-hero-metrics {
  border: 1px solid rgba(216, 32, 42, 0.15);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(90, 32, 32, 0.11);
}

.recruit-service-visual {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 28px;
  text-align: center;
}

.recruit-service-visual img {
  width: min(100%, 240px);
  min-height: 170px;
  object-fit: contain;
}

.recruit-service-visual strong,
.recruit-partner-card strong {
  color: #421719;
  font-size: 21px;
}

.recruit-service-visual span,
.recruit-partner-card span {
  color: #7a6666;
}

.recruit-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.recruit-hero-metrics div {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 18px;
  border-radius: 18px;
  background: #fff8f3;
}

.recruit-hero-metrics strong {
  color: #d8202a;
  font-size: 34px;
  line-height: 1;
}

.recruit-hero-metrics span {
  color: #421719;
  font-weight: 900;
}

.recruit-partner-card {
  display: grid;
  gap: 10px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(216, 32, 42, 0.08), rgba(245, 178, 107, 0.14)),
    #fff;
}

.recruit-location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.recruit-location-grid article {
  display: grid;
  gap: 8px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid rgba(66, 23, 25, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.recruit-location-grid strong {
  color: #d8202a;
  font-size: 18px;
}

.recruit-location-grid span {
  color: #7a6666;
}

.recruit-story,
.recruit-support,
.recruit-join-flow {
  background: transparent;
}

.recruit-compare-grid,
.recruit-card-grid,
.recruit-income-grid,
.recruit-step-grid {
  display: grid;
  gap: 14px;
}

.recruit-compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recruit-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recruit-income-grid,
.recruit-step-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.recruit-compare-grid article,
.recruit-card-grid article,
.recruit-income-grid article,
.recruit-step-grid article,
.recruit-level-table div,
.recruit-form {
  border: 1px solid rgba(66, 23, 25, 0.08);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.recruit-compare-grid article,
.recruit-card-grid article,
.recruit-income-grid article,
.recruit-step-grid article {
  min-height: 148px;
  padding: 18px;
}

.recruit-compare-grid h3,
.recruit-card-grid strong,
.recruit-income-grid strong,
.recruit-step-grid strong {
  display: block;
  color: #421719;
  font-size: 18px;
}

.recruit-compare-grid p,
.recruit-card-grid p,
.recruit-income-grid p,
.recruit-step-grid p {
  margin: 10px 0 0;
  color: #7a6666;
}

.recruit-definition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: center;
}

.recruit-definition img {
  width: 100%;
  padding: 24px;
  border-radius: 24px;
  background: #fff8f3;
  object-fit: contain;
}

.recruit-step-grid article span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #d8202a;
  color: #fff;
  font-weight: 900;
}

.recruit-growth-path {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.recruit-growth-path span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(216, 32, 42, 0.18);
  border-radius: 999px;
  background: #fff8f3;
  color: #421719;
  font-weight: 900;
}

.recruit-level-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.recruit-level-table div {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.recruit-level-table strong {
  color: #d8202a;
}

.recruit-level-table span {
  color: #7a6666;
}

.recruit-application {
  max-width: 980px;
}

.recruit-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.recruit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.recruit-form label,
.recruit-form fieldset {
  display: grid;
  gap: 7px;
  color: #6f5b5b;
  font-weight: 800;
}

.recruit-form input,
.recruit-form select,
.recruit-form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(42, 31, 31, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #2a1f1f;
}

.recruit-form textarea {
  padding-top: 10px;
  resize: vertical;
}

.recruit-form fieldset {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
  border: 1px solid rgba(216, 32, 42, 0.14);
  border-radius: 16px;
  background: #fff8f3;
}

.recruit-form legend {
  padding: 0 8px;
  color: #421719;
}

.recruit-form fieldset label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.recruit-form input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
}

.recruit-form button {
  width: fit-content;
  border: 0;
  cursor: pointer;
}

.recruit-closing {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  padding: clamp(46px, 7vw, 82px) 20px;
  background: #421719;
  color: #fff;
  text-align: center;
}

.recruit-closing h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 0;
}

.recruit-closing p,
.recruit-closing span {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.recruit-closing strong {
  margin-top: 12px;
  color: #f5b26b;
  font-size: 22px;
}

.login-brand {
  margin-bottom: 22px;
  padding: 0;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: #595959;
  font-size: 14px;
  font-weight: 500;
}

.quick-login {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.wechat-login-entry {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(36, 174, 90, 0.22);
  border-radius: 14px;
  background: #f5fff8;
}

.wechat-login-entry button {
  border-color: rgba(36, 174, 90, 0.32);
  background: #1aad19;
  color: #fff;
  font-weight: 800;
}

.wechat-login-entry small {
  color: #5f7564;
  font-size: 12px;
  line-height: 1.5;
}

.wechat-register-card {
  width: min(480px, 100%);
}

.wechat-register-head {
  margin: 18px 0;
}

.wechat-register-head h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.wechat-register-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.wechat-register-card input[readonly] {
  background: #f5f5f5;
  color: var(--text);
  cursor: not-allowed;
}

.wechat-register-card label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.login-form .login-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.6;
}

.login-form .login-consent input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  margin-top: 3px;
}

.activation-summary {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff9f8;
}

.activation-summary p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.activation-summary p:last-child {
  border-bottom: 0;
}

.activation-summary span {
  color: var(--muted);
}

.login-switch {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.login-switch button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 700;
}

.login-message {
  margin: 14px 0 0;
  color: var(--brand-dark);
  font-weight: 600;
}

.sso-progress { display: grid; justify-items: center; gap: 12px; padding: 42px 4px 12px; text-align: center; }
.sso-progress > span { width: 38px; height: 38px; border: 4px solid #f3d7d9; border-top-color: #c93640; border-radius: 50%; animation: sso-spin .8s linear infinite; }
.sso-progress h1 { margin: 8px 0 0; font-size: 25px; }
.sso-progress p { margin: 0; color: var(--muted); line-height: 1.7; }
@keyframes sso-spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .grid.four,
  .calculator-grid,
  .segment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-hero,
  .overview-layout {
    grid-template-columns: 1fr;
  }

  .overview-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-overview-layout {
    grid-template-columns: 1fr;
  }

  .portal-user .user-package-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "visual info" "meta meta" "state state";
  }

  .portal-user .user-package-state {
    justify-content: flex-start;
  }

  .portal-user .calculator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-panel.wide {
    grid-column: auto;
  }

  .logistics-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-nav {
    grid-template-columns: 1fr auto;
  }

  .public-nav nav {
    display: none;
  }

  .public-hero,
  .public-about,
  .public-contact,
  .recruit-hero,
  .recruit-definition,
  .recruit-page-hero {
    grid-template-columns: 1fr;
  }

  .public-calculator-grid,
  .public-feature-grid,
  .recruit-card-grid,
  .recruit-compare-grid,
  .public-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-flow-grid,
  .recruit-income-grid,
  .recruit-step-grid,
  .recruit-level-table,
  .recruit-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recruit-form fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  #app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand {
    margin-bottom: 12px;
  }

  nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .side-section {
    margin-top: 12px;
    padding-top: 12px;
  }

  .subnav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  nav a,
  .nav-parent {
    justify-content: center;
    padding: 0 8px;
    font-size: 13px;
  }

  .subnav-children {
    padding-left: 0;
  }

  .subnav-child {
    min-height: 32px;
    padding: 0 6px;
    font-size: 12px;
  }

  .nav-dot {
    display: none;
  }

  .nav-mark {
    display: none;
  }

  #app.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  #app.sidebar-collapsed .sidebar {
    padding: 14px;
  }

  #app.sidebar-collapsed .brand {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 8px;
  }

  #app.sidebar-collapsed .brand-identity {
    gap: 12px;
  }

  #app.sidebar-collapsed .brand-identity > div,
  #app.sidebar-collapsed .nav-label,
  #app.sidebar-collapsed .nav-caret,
  #app.sidebar-collapsed .side-section > small {
    display: block;
  }

  #app.sidebar-collapsed .nav-caret {
    display: inline-flex;
  }

  #app.sidebar-collapsed nav a,
  #app.sidebar-collapsed .nav-parent {
    justify-content: center;
    gap: 11px;
    padding: 0 8px;
  }

  #app.sidebar-collapsed .subnav-children {
    padding-left: 0;
  }

  #app.sidebar-collapsed .subnav-mark {
    display: none;
  }

  #app.portal-redhat.sidebar-collapsed .side-section {
    display: none;
  }

  #app.portal-redhat.sidebar-collapsed .sidebar {
    padding-bottom: 10px;
  }

  #app.portal-redhat.sidebar-collapsed .brand {
    margin-bottom: 0;
  }

  .main {
    padding: 0 18px 20px;
  }

  .account-strip {
    position: sticky;
    margin: 0 -18px 18px;
    padding: 0 18px;
  }

  .topbar,
  .section-title,
  .section-subtitle,
  .account-strip {
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .public-nav {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100% - 32px);
    padding: 14px 18px;
  }

  .public-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .public-nav-actions a,
  .public-hero-actions a {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
  }

  .public-hero {
    width: calc(100% - 32px);
    min-height: auto;
    padding: 34px 0;
  }

  .public-hero h1 {
    font-size: clamp(46px, 15vw, 62px);
    line-height: 0.96;
  }

  .public-hero p {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .public-hero-actions,
  .public-invite-box,
  .public-calculator-head {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .public-section {
    padding: 38px 18px;
  }

  .public-calculator-grid,
  .public-feature-grid,
  .public-flow-grid,
  .public-contact-grid,
  .public-footer-inner,
  .public-footer-links {
    grid-template-columns: 1fr;
  }

  .public-footer {
    margin-top: 26px;
  }

  .public-footer-inner {
    padding: 34px 18px 26px;
  }

  .public-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-footer-bottom {
    flex-direction: column;
    padding: 18px;
  }

  .public-hero-visual {
    padding: 0;
  }

  .public-hero-metrics,
  .public-announcement-card li {
    grid-template-columns: 1fr;
  }

  .public-announcement-card li {
    align-items: start;
    padding: 14px 0;
  }

  .grid.three,
  .grid.four,
  .address-grid,
  .admin-redhat-grid,
  .identity-documents,
  .calculator-grid,
  .fee-grid,
  .segment-grid,
  .settings-grid,
  .settings-tag-groups,
  .split {
    grid-template-columns: 1fr;
  }

  .row-card {
    grid-template-columns: 1fr;
  }

  .row-card.fee-item-row {
    grid-template-columns: 1fr;
  }

  .fee-item-policy,
  .fee-item-actions {
    justify-content: flex-start;
  }

  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-nav {
    justify-content: flex-start;
  }

  .row-card.photo-row {
    grid-template-columns: 1fr;
  }

  .redhat-package-card .package-detail-grid {
    grid-template-columns: 1fr;
  }

  .redhat-order-card .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .redhat-order-card .order-detail-grid .wide {
    grid-column: auto;
  }

  .tracking-order-summary {
    grid-template-columns: 1fr;
  }

  .overview-hero-stats,
  .overview-metric-grid,
  .customer-stat-grid,
  .coin-task-grid,
  .overview-todo-grid,
  .overview-rank-row,
  .overview-activity-row {
    grid-template-columns: 1fr;
  }

  .customer-welcome-card,
  .customer-recent-package {
    grid-template-columns: 1fr;
  }

  .customer-welcome-code {
    text-align: left;
  }

  .portal-user .calculator-grid {
    grid-template-columns: 1fr;
  }

  .portal-user .user-package-card {
    gap: 12px;
    padding: 12px;
  }

  .xhs-material-grid {
    columns: 1;
  }

  .knowledge-list-head {
    display: none;
  }

  .knowledge-filter-row {
    grid-template-columns: 1fr;
  }

  .knowledge-search {
    grid-template-columns: 1fr;
  }

  .knowledge-list-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .knowledge-list-row > span {
    display: flex;
    justify-content: space-between;
  }

  .knowledge-list-row > span:nth-child(2)::before {
    content: "栏目";
    color: var(--muted);
  }

  .knowledge-list-row > span:nth-child(3)::before {
    content: "数据";
    color: var(--muted);
  }

  .knowledge-list-row > span:nth-child(4)::before {
    content: "金币";
    color: var(--muted);
  }

  .knowledge-list-row > span:nth-child(5)::before {
    content: "状态";
    color: var(--muted);
  }

  .knowledge-list-actions {
    justify-self: stretch;
  }

  .knowledge-list-actions button {
    width: 100%;
  }

  .admin-redhat-head {
    flex-direction: column;
  }

  .admin-redhat-badges {
    justify-content: flex-start;
  }

  .level-hero,
  .level-rule,
  .knowledge-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .knowledge-card img {
    width: 92px;
    height: 112px;
  }

  .knowledge-article {
    padding: 18px;
  }

  .knowledge-article h2 {
    font-size: 22px;
  }

  .level-score {
    justify-items: start;
  }

  .level-progress-item div:first-child {
    flex-direction: column;
  }

  .quote-summary,
  .quote-head,
  .invite-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .invite-qrcode,
  .invite-qrcode-placeholder {
    justify-self: start;
  }

  .invite-link-list div {
    grid-template-columns: 1fr;
  }

  .invite-actions {
    justify-content: start;
  }

  .quote-price {
    justify-content: space-between;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .modal-card {
    height: auto;
    max-height: calc(100vh - 24px);
  }

  .modal-body {
    grid-template-columns: 1fr;
  }

  .application-detail-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .application-detail-grid {
    grid-template-columns: 1fr;
  }

  .rule-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rule-table-title,
  .rule-table-row {
    grid-template-columns: 1fr;
  }

  .country-cover-title,
  .country-cover-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .country-cover-toolbar input {
    flex-basis: auto;
  }

  .country-cover-options {
    grid-template-columns: 1fr;
  }

  .checkbox-group-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .checkbox-group-title small {
    text-align: left;
  }

  .checkbox-group-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-tier-range-grid,
  .pricing-tier-unit-grid,
  .pricing-tier-first-grid,
  .surcharge-rule-grid,
  .country-zone-head,
  .country-zone-price-grid,
  .country-override-head,
  .country-override-grid,
  .country-override-subrow,
  .country-override-subrow.compact,
  .country-override-subrow[data-country-override-tier-row] {
    grid-template-columns: 1fr;
  }

  .inline-form-body {
    grid-template-columns: 1fr;
  }

  .inline-form-head {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-composer-card {
    min-height: auto;
  }

  .knowledge-composer-top {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-composer-actions {
    justify-content: stretch;
  }

  .knowledge-composer-actions button {
    flex: 1;
  }

  .knowledge-composer-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .knowledge-settings-panel {
    position: static;
    max-height: none;
  }

  .rich-editor-toolbar {
    position: static;
  }

  .rich-editor-paper {
    width: 100%;
    min-height: 560px;
    margin: 0;
    padding: 28px 18px 36px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .rich-composer-line,
  .rich-composer-line.compact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rich-counter {
    text-align: left;
  }

  .rich-title-input {
    font-size: 23px;
  }

  .rich-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .editor-workspace {
    grid-template-columns: 1fr;
  }

  .editor-preview {
    max-height: none;
  }

  .modal-head,
  .modal-actions {
    padding: 14px;
  }

  .quick-login {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .redhat-profile-hero {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .redhat-profile-avatar {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .redhat-profile-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .identity-document-grid,
  .profile-business-metrics {
    grid-template-columns: 1fr;
  }

  .profile-warehouse-summary,
  .profile-consumer-summary,
  .warehouse-platform-note,
  .warehouse-lifecycle-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-warehouse-summary button,
  .profile-consumer-summary button,
  .warehouse-platform-note button,
  .warehouse-lifecycle-panel .actions,
  .warehouse-lifecycle-panel .actions button {
    width: 100%;
  }

  .recruit-hero {
    padding: 38px 16px 34px;
  }

  .recruit-card-grid,
  .recruit-compare-grid,
  .recruit-income-grid,
  .recruit-step-grid,
  .recruit-level-table,
  .recruit-location-grid,
  .recruit-hero-metrics,
  .recruit-form-grid,
  .recruit-form fieldset {
    grid-template-columns: 1fr;
  }

  .recruit-subnav {
    position: static;
    justify-content: flex-start;
  }

  .recruit-form button {
    width: 100%;
  }

  .recruit-growth-path span {
    width: 100%;
    justify-content: center;
  }
}
.finance-filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(140px, 0.8fr)) auto auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line, #e6e8eb);
  background: #fafafa;
}

.finance-filter-bar input,
.finance-filter-bar select {
  width: 100%;
  min-width: 0;
}

.finance-payment-row {
  grid-template-columns: minmax(320px, 2.2fr) minmax(130px, 0.7fr) minmax(120px, 0.65fr) minmax(240px, 1.3fr);
  align-items: center;
}

.finance-payment-row > div:first-child small,
.finance-payment-row > div:nth-child(3) small {
  display: block;
  margin-top: 5px;
}

.finance-payment-row .actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.finance-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.finance-detail-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #ececec;
  background: #fafafa;
}

.finance-detail-grid small,
.finance-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.finance-detail-grid small {
  margin-bottom: 5px;
  color: #777;
}

.finance-proof-preview {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: #1769e0;
  text-decoration: none;
}

.finance-proof-preview img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid #e6e8eb;
  background: #f7f7f7;
}

.finance-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.finance-metric-grid .metric {
  min-width: 0;
}

.finance-policy {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  margin: 8px 0 20px;
  border: 1px solid #f0d5d7;
  border-left: 4px solid #d2323d;
  background: #fff8f8;
}

.finance-policy strong {
  flex: 0 0 auto;
}

.finance-policy span {
  color: #6e5b5c;
  line-height: 1.7;
}

.finance-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #ece7e6;
  background: #fff;
}

.finance-row:first-child {
  border-radius: 6px 6px 0 0;
}

.finance-row:last-child {
  border-radius: 0 0 6px 6px;
}

.finance-row:only-child {
  border-radius: 6px;
}

.finance-row > div:first-child,
.finance-breakdown {
  min-width: 0;
}

.finance-row strong,
.finance-row small,
.finance-row span {
  display: block;
}

.finance-row small {
  margin-top: 5px;
  color: #8b8180;
  overflow-wrap: anywhere;
}

.finance-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: #5f5554;
  font-size: 13px;
}

.finance-amount {
  color: #c92f3a;
  text-align: right;
  white-space: nowrap;
}

.finance-amount.is-debit {
  color: #252120;
}

.finance-account-hero {
  display: grid;
  gap: 5px;
  padding: 22px 24px;
  margin-bottom: 20px;
  border-left: 4px solid #d2323d;
  background: #241f20;
  color: #fff;
}

.finance-account-hero strong {
  font-size: 30px;
}

.finance-account-hero small,
.finance-account-hero span {
  color: #d9d0d0;
}

.offline-review-card-main,
.offline-review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.offline-review-card-main h3 {
  margin: 5px 0;
}

.offline-review-card-main p {
  margin: 0;
  color: #807574;
}

.offline-review-card-main > strong {
  color: #c92f3a;
  font-size: 22px;
}

.offline-review-meta {
  padding: 14px 0;
  margin-top: 14px;
  border-top: 1px solid #eee8e7;
}

.offline-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border-left: 4px solid var(--brand);
  background: linear-gradient(90deg, #f5f9ff 0%, #fff 72%);
}

.offline-review-head > div:first-child {
  min-width: 0;
}

.offline-review-head > div:first-child > span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.offline-review-head h2 {
  margin: 3px 0 4px;
  font-size: 20px;
}

.offline-review-head p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.offline-review-head-stat {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: 6px;
  min-width: 112px;
  padding-left: 22px;
  border-left: 1px solid #d6e4ff;
}

.offline-review-head-stat small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.offline-review-head-stat strong {
  color: var(--brand);
  font-size: 28px;
  line-height: 1.2;
}

.offline-review-head-stat span {
  padding-bottom: 2px;
  color: #595959;
}

.offline-review-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.offline-review-tabs button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #595959;
  box-shadow: none;
}

.offline-review-tabs button b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ededed;
  color: #777;
  font-size: 11px;
}

.offline-review-tabs button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}

.offline-review-tabs button.active b {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.offline-review-filter {
  grid-template-columns: minmax(280px, 1.6fr) minmax(180px, 0.7fr) auto;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
}

.offline-review-filter label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.offline-review-filter label > span {
  color: #8c8c8c;
  font-size: 12px;
}

.offline-review-filter input:not([type="hidden"]),
.offline-review-filter select {
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.offline-review-filter-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  padding-top: 22px;
}

.offline-review-list {
  display: grid;
  gap: 14px;
}

.offline-review-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.offline-review-card-head,
.offline-review-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.offline-review-card-head {
  border-bottom: 1px solid var(--line);
}

.offline-review-card-head > div:first-child,
.offline-review-card-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offline-review-card-head strong {
  font-size: 15px;
}

.offline-review-card-head span:not(.badge),
.offline-review-card-head small {
  color: var(--muted);
  font-size: 12px;
}

.offline-review-card-head .status-pending_review {
  background: var(--gold-soft);
  color: var(--gold);
}

.offline-review-card-head .status-paid {
  background: var(--green-soft);
  color: var(--green);
}

.offline-review-card-head .status-rejected {
  background: var(--red-soft);
  color: var(--red);
}

.offline-review-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  gap: 20px;
  padding: 18px;
}

.offline-review-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 20px;
}

.offline-review-fields > div {
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.offline-review-fields span,
.offline-review-fields small,
.offline-review-fields strong {
  display: block;
  overflow-wrap: anywhere;
}

.offline-review-fields span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
}

.offline-review-fields strong {
  color: #262626;
  font-size: 14px;
}

.offline-review-fields small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.offline-review-fields .offline-review-primary strong {
  color: var(--red);
  font-size: 22px;
  line-height: 1.35;
}

.mono-value {
  font-family: Consolas, "SFMono-Regular", monospace;
  letter-spacing: 0;
}

.offline-proof {
  position: relative;
  display: block;
  width: 172px;
  height: 120px;
  min-height: 120px;
  overflow: hidden;
  border: 1px solid #d6e4ff;
  border-radius: 8px;
  padding: 0;
  background: #f5f9ff;
}

.offline-proof img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offline-proof span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.64);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.offline-proof.missing {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--muted);
}

.offline-proof.missing span {
  position: static;
  background: transparent;
  color: inherit;
}

.offline-review-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px;
  padding: 10px 12px;
  border-left: 3px solid var(--line-strong);
  background: #fafafa;
}

.offline-review-note span,
.offline-review-note small {
  color: var(--muted);
  font-size: 12px;
}

.offline-review-note strong {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.offline-review-card-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #fcfcfc;
}

.offline-review-card-foot > button:first-child {
  margin-right: auto;
}

.offline-reject {
  border-color: #ffccc7;
  color: var(--red);
}

.offline-reject:hover {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

.offline-review-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 220px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fcfcfc;
  text-align: center;
}

.offline-review-empty strong {
  font-size: 16px;
}

.offline-review-empty span {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .logistics-product-title,
  .supplier-management-title,
  .channel-product-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .logistics-product-toolbar,
  .supplier-management-toolbar {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .finance-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-payment-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-payment-row .actions {
    justify-content: flex-start;
  }

  .offline-review-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .logistics-product-toolbar,
  .logistics-product-filter,
  .supplier-management-toolbar,
  .supplier-filter {
    width: 100%;
  }

  .logistics-product-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .logistics-product-filter select {
    width: 100%;
  }

  .logistics-product-toolbar > .primary {
    margin-left: auto;
  }

  .supplier-management-toolbar {
    align-items: stretch;
  }

  .supplier-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .supplier-filter input {
    width: 100%;
  }

  .supplier-management-toolbar > .primary {
    margin-left: auto;
  }

  .finance-metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .finance-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .finance-amount {
    text-align: left;
  }

  .finance-policy,
  .offline-review-card-main,
  .offline-review-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-filter-bar,
  .finance-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .offline-review-head,
  .offline-review-card-head,
  .offline-review-card-foot,
  .offline-review-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .offline-review-head-stat {
    width: 100%;
    padding: 10px 0 0;
    border-top: 1px solid #d6e4ff;
    border-left: 0;
  }

  .offline-review-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .offline-review-filter,
  .offline-review-card-body,
  .offline-review-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .offline-review-filter-actions,
  .offline-proof {
    width: 100%;
  }

  .offline-review-card-head > div:first-child,
  .offline-review-card-head > div:last-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .offline-review-card-foot .actions {
    width: 100%;
  }

  .offline-review-card-foot button,
  .offline-review-card-foot .actions button {
    flex: 1;
  }
}

/* Public portal cards use hover activation instead of a permanent red selection. */
#app.public-portal-v2 .public-service-grid article.accent,
#app.public-portal-v2 .public-trust-tiles article.accent,
#app.public-portal-v2 .public-testimonial-grid article.accent,
#app.public-portal-v2 .public-feature:first-child,
#app.public-portal-v2 .public-flow-item:nth-child(3),
#app.public-portal-v2 .recruit-card-grid article:nth-child(2),
#app.public-portal-v2 .recruit-income-grid article:first-child,
#app.public-portal-v2 .recruit-step-grid article:nth-child(2) {
  border-color: #e5e0dd;
  color: var(--public-ink);
  background: #fbfaf9;
}

#app.public-portal-v2 .public-service-grid article.accent p,
#app.public-portal-v2 .public-trust-tiles article.accent span,
#app.public-portal-v2 .public-testimonial-grid article.accent p,
#app.public-portal-v2 .public-feature:first-child p,
#app.public-portal-v2 .public-flow-item:nth-child(3) p,
#app.public-portal-v2 .recruit-card-grid article:nth-child(2) p,
#app.public-portal-v2 .recruit-income-grid article:first-child p,
#app.public-portal-v2 .recruit-step-grid article:nth-child(2) p {
  color: var(--public-muted);
}

#app.public-portal-v2 .public-testimonial-grid article.accent > b,
#app.public-portal-v2 .public-flow-item:nth-child(3) b {
  color: #e6dfdc;
}

#app.public-portal-v2 .public-flow-page .public-flow-item > b,
#app.public-portal-v2 .public-flow-daily .public-daily-grid article > b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--public-red);
  background: #fbe9e7;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: color 180ms ease, background-color 180ms ease;
}

#app.public-portal-v2 :is(
  .public-service-grid article,
  .public-trust-tiles article,
  .public-testimonial-grid article,
  .public-feature,
  .public-flow-item,
  .public-daily-grid article,
  .public-contact-grid div,
  .recruit-card-grid article,
  .recruit-compare-grid article,
  .recruit-income-grid article,
  .recruit-step-grid article,
  .recruit-level-table div,
  .recruit-location-grid article,
  .public-about-roadmap-list article
) {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #app.public-portal-v2 :is(
    .public-service-grid article,
    .public-trust-tiles article,
    .public-testimonial-grid article,
    .public-feature,
    .public-flow-item,
    .public-daily-grid article,
    .public-contact-grid div,
    .recruit-card-grid article,
    .recruit-compare-grid article,
    .recruit-income-grid article,
    .recruit-step-grid article,
    .recruit-level-table div,
    .recruit-location-grid article,
    .public-about-roadmap-list article
  ):hover {
    border-color: var(--public-red);
    color: #fff;
    background: var(--public-red);
    box-shadow: 0 18px 38px rgb(138 30 26 / 18%);
    transform: translateY(-5px);
  }

  #app.public-portal-v2 :is(
    .public-service-grid article,
    .public-trust-tiles article,
    .public-testimonial-grid article,
    .public-feature,
    .public-flow-item,
    .public-daily-grid article,
    .public-contact-grid div,
    .recruit-card-grid article,
    .recruit-compare-grid article,
    .recruit-income-grid article,
    .recruit-step-grid article,
    .recruit-level-table div,
    .recruit-location-grid article,
    .public-about-roadmap-list article
  ):hover :is(strong, p, span, small, b) {
    color: #fff;
  }

  #app.public-portal-v2 .public-flow-page .public-flow-item:hover > b,
  #app.public-portal-v2 .public-flow-daily .public-daily-grid article:hover > b {
    color: var(--public-red);
    background: #fff;
  }
}
/* Mini program page publishing */
.mini-program-page-management-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e9e5e3;
}

.mini-program-page-management-head > div:first-child > span {
  color: #cf303c;
  font-size: 13px;
  font-weight: 700;
}

.mini-program-page-management-head h2 {
  margin: 5px 0 8px;
  font-size: 26px;
}

.mini-program-page-management-head p {
  max-width: 720px;
  margin: 0;
  color: #786e6b;
}

.mini-program-page-management-head > div:last-child {
  min-width: 150px;
  text-align: right;
}

.mini-program-page-management-head > div:last-child strong,
.mini-program-page-management-head > div:last-child span {
  display: block;
}

.mini-program-page-management-head > div:last-child strong {
  color: #cf303c;
  font-size: 30px;
}

.mini-program-page-management-head > div:last-child span {
  color: #8c817d;
  font-size: 13px;
}

.mini-program-page-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 310px;
}

.mini-program-page-head-actions > span {
  display: inline-flex !important;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.mini-program-page-head-actions > span strong {
  display: inline !important;
  font-size: 20px !important;
}

.mini-program-page-list {
  overflow: hidden;
  border: 1px solid #e8e2df;
  border-radius: 8px;
  background: #fff;
}

.mini-program-page-list-head,
.mini-program-page-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.1fr) minmax(230px, 1.25fr) minmax(160px, 0.8fr) 140px minmax(260px, auto);
  align-items: center;
  gap: 18px;
}

.mini-program-page-list-head {
  padding: 12px 18px;
  color: #817672;
  background: #f7f5f4;
  font-size: 12px;
  font-weight: 700;
}

.mini-program-page-row {
  min-width: 0;
  padding: 16px 18px;
  border-top: 1px solid #eee9e6;
}

.mini-program-page-row.is-inactive {
  background: #faf9f8;
  opacity: 0.72;
}

.mini-program-page-name-cell,
.mini-program-page-path-cell,
.mini-program-page-version-cell {
  min-width: 0;
}

.mini-program-page-name-cell > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-program-page-name-cell strong,
.mini-program-page-version-cell strong,
.mini-program-page-name-cell small,
.mini-program-page-version-cell small {
  display: block;
}

.mini-program-page-name-cell strong {
  font-size: 15px;
}

.mini-program-page-name-cell small,
.mini-program-page-version-cell small {
  margin-top: 5px;
  color: #8b817d;
  font-size: 11px;
}

.mini-program-system-tag,
.mini-program-custom-tag {
  padding: 3px 6px;
  border-radius: 4px;
  color: #986c65;
  background: #f8eae8;
  font-size: 10px;
  font-weight: 700;
}

.mini-program-custom-tag {
  color: #476a58;
  background: #eaf5ee;
}

.mini-program-page-path-cell code {
  display: block;
  overflow: hidden;
  color: #6f6662;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-program-page-version-cell strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-program-page-status-cell,
.mini-program-page-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-program-page-row-actions {
  justify-content: flex-end;
}

.mini-program-page-row-actions button {
  min-width: 52px;
  padding: 8px 10px;
}

.mini-program-page-row-actions .danger-text {
  color: #bd2935;
  border-color: #efcbd0;
  background: #fff7f7;
}

.mini-program-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mini-program-page-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e8e2df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(48, 35, 31, 0.05);
}

.mini-program-page-card.is-inactive {
  opacity: 0.72;
  background: #f7f6f5;
}

.mini-program-page-card-head,
.mini-program-page-actions,
.mini-program-page-statuses,
.mini-program-page-version-summary {
  display: flex;
}

.mini-program-page-card-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mini-program-page-card-head > div:first-child {
  min-width: 0;
}

.mini-program-page-card-head > div:first-child > span {
  color: #9a716a;
  font-size: 12px;
  font-weight: 700;
}

.mini-program-page-card h3 {
  margin: 5px 0 7px;
  font-size: 20px;
}

.mini-program-page-card code {
  display: block;
  overflow: hidden;
  color: #8a827f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-program-page-statuses {
  flex: none;
  gap: 6px;
}

.mini-program-page-version-summary {
  gap: 10px;
  margin: 18px 0 14px;
}

.mini-program-page-version-summary > div {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border-left: 3px solid #d8d0cd;
  background: #faf8f7;
}

.mini-program-page-version-summary > div:first-child {
  border-left-color: #cf303c;
}

.mini-program-page-version-summary small,
.mini-program-page-version-summary strong,
.mini-program-page-version-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-program-page-version-summary small,
.mini-program-page-version-summary span {
  color: #8b817d;
  font-size: 11px;
}

.mini-program-page-version-summary strong {
  margin: 4px 0;
  font-size: 14px;
}

.mini-program-page-card > p {
  min-height: 44px;
  margin: 0 0 16px;
  color: #706763;
  line-height: 1.6;
}

.mini-program-page-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.mini-program-version-history {
  margin-top: 16px;
  border-top: 1px solid #ece7e4;
}

.mini-program-version-history summary {
  padding: 14px 0 6px;
  color: #6d625e;
  cursor: pointer;
  font-weight: 700;
}

.mini-program-version-history > div {
  display: grid;
  gap: 6px;
  padding-top: 6px;
}

.mini-program-version-history button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #f0ecea;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.mini-program-version-history button small {
  color: #918783;
}

.mini-program-page-editor .mini-page-back {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: #a52631;
  background: transparent;
}

.mini-page-fixed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #eee8e5;
  background: #faf8f7;
}

.mini-page-fixed-meta span {
  color: #a52631;
  font-weight: 700;
}

.mini-page-fixed-meta code {
  overflow: hidden;
  color: #766d69;
  font-size: 12px;
  text-overflow: ellipsis;
}

.mini-program-preview-modal .modal-body {
  background: #f3eeea;
}

.mini-program-content-preview {
  width: min(100%, 560px);
  min-height: 640px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid #e7dfdc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(48, 35, 31, 0.1);
}

.mini-program-content-preview header {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee8e5;
}

.mini-program-content-preview header > span {
  color: #cf303c;
  font-size: 12px;
  font-weight: 700;
}

.mini-program-content-preview h1 {
  margin: 8px 0 10px;
  font-size: 30px;
}

.mini-program-content-preview header p {
  color: #746a66;
  line-height: 1.7;
}

.mini-program-content-preview header div {
  display: flex;
  gap: 12px;
  color: #9a908c;
}

.mini-program-content-preview .knowledge-article {
  padding-top: 20px;
}

@media (max-width: 980px) {
  .mini-program-page-grid {
    grid-template-columns: 1fr;
  }

  .mini-program-page-list-head {
    display: none;
  }

  .mini-program-page-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mini-program-page-path-cell,
  .mini-program-page-version-cell {
    grid-column: 1;
  }

  .mini-program-page-status-cell,
  .mini-program-page-row-actions {
    grid-column: 2;
  }

  .mini-program-page-status-cell {
    grid-row: 1;
    justify-content: flex-end;
  }

  .mini-program-page-row-actions {
    grid-row: 2 / span 2;
    align-self: end;
    max-width: 230px;
  }
}

@media (max-width: 640px) {
  .mini-program-page-management-head,
  .mini-program-page-card-head,
  .mini-program-page-version-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .mini-program-page-management-head > div:last-child {
    text-align: left;
  }

  .mini-program-page-head-actions {
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
  }

  .mini-program-page-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mini-program-page-name-cell,
  .mini-program-page-path-cell,
  .mini-program-page-version-cell,
  .mini-program-page-status-cell,
  .mini-program-page-row-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .mini-program-page-status-cell,
  .mini-program-page-row-actions {
    justify-content: flex-start;
  }

  .mini-program-page-statuses {
    align-self: flex-start;
  }

  .mini-program-content-preview {
    min-height: 0;
    padding: 20px;
  }
}

/* Figma-aligned redhat workspace refresh. */
#app.portal-redhat {
  background: var(--bg);
}

.portal-redhat .sidebar {
  padding: 0 12px 20px;
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
}

.portal-redhat .brand {
  min-height: 60px;
  margin: 0 -12px 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.portal-redhat .brand-identity {
  gap: 10px;
}

.portal-redhat .brand-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(192, 32, 32, 0.1);
  border-radius: 10px;
  box-shadow: none;
}

.portal-redhat .brand strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.portal-redhat .brand small {
  max-width: 145px;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-redhat .side-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.portal-redhat .side-section > small {
  margin: 0 8px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.portal-redhat .subnav {
  gap: 3px;
}

.portal-redhat .subnav > a,
.portal-redhat .subnav .nav-parent {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  color: #5f4449;
  font-size: 13px;
  font-weight: 600;
}

.portal-redhat .subnav > a:hover,
.portal-redhat .subnav .nav-parent:hover {
  background: #f8eded;
  color: var(--brand);
}

.portal-redhat .subnav > a.active {
  background: linear-gradient(135deg, #a91818, #c02020 64%, #d42828);
  color: #fff;
  box-shadow: 0 5px 12px rgba(192, 32, 32, 0.2);
}

.portal-redhat .subnav > .nav-group > .nav-parent.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
}

.portal-redhat .subnav .nav-mark {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.portal-redhat .nav-icon-mark img {
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.76;
  filter: none;
}

.portal-redhat .subnav > a.active .nav-icon-mark,
.portal-redhat .subnav > a.active .nav-mark {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.portal-redhat .subnav > a.active .nav-icon-mark img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.portal-redhat .subnav > .nav-group > .nav-parent.active .nav-icon-mark,
.portal-redhat .subnav > .nav-group > .nav-parent:hover .nav-icon-mark {
  background: transparent;
  box-shadow: none;
}

.portal-redhat .subnav > .nav-group > .nav-parent.active .nav-icon-mark img,
.portal-redhat .subnav > .nav-group > .nav-parent:hover .nav-icon-mark img,
.portal-redhat .subnav > a:hover .nav-icon-mark img {
  opacity: 1;
  filter: invert(18%) sepia(81%) saturate(3348%) hue-rotate(352deg) brightness(86%) contrast(91%);
}

.portal-redhat .nav-caret {
  color: #b98282;
  font-size: 14px;
}

.portal-redhat .subnav-children {
  position: relative;
  gap: 1px;
  margin: 2px 0 5px 20px;
  padding-left: 12px;
  border-left: 1px solid #e5caca;
}

.portal-redhat .subnav .subnav-child {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  color: #8e666c;
  font-size: 12px;
  font-weight: 500;
}

.portal-redhat .subnav .subnav-child:hover,
.portal-redhat .subnav .subnav-child.active {
  background: #fceeee;
  color: var(--brand);
  box-shadow: none;
}

.portal-redhat .subnav .subnav-child.active {
  font-weight: 700;
}

.portal-redhat .subnav .subnav-child .nav-dot {
  width: 5px;
  height: 5px;
  margin-left: -15px;
  border: 2px solid #fff;
  background: #d9aaaa;
  box-sizing: content-box;
}

.portal-redhat .subnav .subnav-child.active .nav-dot {
  background: var(--brand);
}

.portal-redhat .main {
  padding: 0 20px 28px;
  background: var(--bg);
}

.portal-redhat .account-strip {
  min-height: 52px;
  margin: 0 -20px;
  padding: 0 16px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.portal-redhat .account-identity {
  gap: 9px;
}

.portal-redhat .account-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background: linear-gradient(135deg, #a91818, #c02020);
  color: #fff;
  font-size: 12px;
}

.portal-redhat .account-strip strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.portal-redhat .account-strip small {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.25;
}

.portal-redhat .sidebar-toggle-main {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.portal-redhat .sidebar-toggle-main:hover {
  border-color: var(--line);
  background: var(--brand-soft);
}

.portal-redhat .sidebar-toggle-main img {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.portal-redhat .sidebar-toggle-mobile {
  display: none;
}

.portal-redhat .locale-switch select {
  min-width: 96px;
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

.portal-redhat .account-actions > button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.portal-redhat .topbar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 0 14px;
}

.portal-redhat .topbar .eyebrow {
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}

.portal-redhat .topbar h1 {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-redhat button,
.portal-redhat .button-link,
.portal-redhat .primary {
  border-radius: 8px;
}

.portal-redhat .primary {
  border-color: var(--brand);
  background: linear-gradient(135deg, #ae1919, #c02020);
  box-shadow: 0 2px 5px rgba(192, 32, 32, 0.18);
}

.portal-redhat .field input,
.portal-redhat .field select,
.portal-redhat .field textarea,
.portal-redhat .finance-filter-bar input,
.portal-redhat .finance-filter-bar select {
  border-radius: 10px;
}

.portal-redhat .user-section.active:not(.overview-dashboard):not(.grid):not(.split) {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.portal-redhat.redhat-page-profile .topbar,
.portal-redhat.redhat-page-profile .user-section.active,
.portal-redhat.redhat-page-warehouse .user-section.active,
.portal-redhat.redhat-page-financeOverview .topbar,
.portal-redhat.redhat-page-financeOverview .user-section.active,
.portal-redhat.redhat-page-financeEarnings .topbar,
.portal-redhat.redhat-page-financeEarnings .user-section.active,
.portal-redhat.redhat-page-financeAccount .topbar,
.portal-redhat.redhat-page-financeAccount .user-section.active,
.portal-redhat.redhat-page-commission .topbar,
.portal-redhat.redhat-page-commission .user-section.active,
.portal-redhat.redhat-page-financeStatements .topbar,
.portal-redhat.redhat-page-financeStatements .user-section.active {
  max-width: 960px;
}

.portal-redhat.redhat-page-levels .topbar {
  max-width: 1200px;
}

.portal-redhat.redhat-page-levels .user-section.active {
  max-width: 840px;
}

.portal-redhat.redhat-page-overview .topbar,
.portal-redhat .redhat-overview {
  max-width: 1280px;
}

.portal-redhat .overview-dashboard.user-section.active {
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portal-redhat .section-title {
  margin-bottom: 14px;
}

.portal-redhat .section-title h2 {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.portal-redhat .section-title small {
  color: var(--muted);
  font-size: 11px;
}

.portal-redhat .redhat-overview-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: 18px;
  margin-bottom: 12px;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #7a0e0e 0%, #c02020 60%, #d42828 100%);
  box-shadow: 0 10px 24px rgba(122, 14, 14, 0.16);
}

.portal-redhat .redhat-overview-hero h2 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.portal-redhat .redhat-overview-hero > div:first-child > p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.65;
}

.portal-redhat .redhat-overview-hero .eyebrow {
  color: #ffd5d5;
  font-size: 10px;
}

.portal-redhat .redhat-hero-actions {
  margin-top: 14px;
}

.portal-redhat .redhat-hero-actions a {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

.portal-redhat .redhat-hero-actions a.primary {
  color: #fff;
}

.portal-redhat .redhat-overview-hero .overview-hero-stats {
  align-self: center;
}

.portal-redhat .redhat-overview-hero .overview-hero-stats div {
  min-height: 76px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.13);
}

.portal-redhat .redhat-overview-hero .overview-hero-stats span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

.portal-redhat .redhat-overview-hero .overview-hero-stats strong {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.portal-redhat .overview-metric-grid {
  gap: 10px;
  margin-bottom: 12px;
}

.portal-redhat .redhat-overview .overview-metric {
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.portal-redhat .redhat-overview .overview-metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-redhat .redhat-overview .overview-metric.success {
  border-color: #cbe9dd;
  background: var(--green-soft);
}

.portal-redhat .redhat-overview .overview-metric.success strong {
  color: var(--green);
}

.portal-redhat .overview-layout {
  gap: 12px;
}

.portal-redhat .redhat-overview .overview-panel {
  padding: 16px;
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.portal-redhat .redhat-overview .overview-panel > .section-title {
  margin-bottom: 10px;
  padding-bottom: 9px;
}

.portal-redhat .redhat-overview .overview-todo,
.portal-redhat .redhat-overview .overview-progress-row,
.portal-redhat .redhat-overview .overview-activity-row,
.portal-redhat .redhat-overview .overview-rank-row {
  border-color: #f0dddd;
  border-radius: 9px;
  background: #fdf9f9;
}

.portal-redhat .redhat-overview .overview-todo.is-hot {
  border-color: #f0c5c5;
  background: #fff1f1;
}

.portal-redhat .redhat-overview .overview-todo strong,
.portal-redhat .redhat-overview .redhat-resource-row span {
  color: var(--brand);
}

.portal-redhat .redhat-profile-card-v2 {
  gap: 16px;
  padding: 0;
}

.portal-redhat .redhat-profile-hero {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.portal-redhat .redhat-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a91818, #c02020);
  color: #fff;
  font-size: 18px;
}

.portal-redhat .redhat-profile-heading strong {
  color: var(--text);
  font-size: 18px;
}

.portal-redhat .redhat-profile-heading span,
.portal-redhat .redhat-profile-heading small,
.portal-redhat .profile-section-title small {
  color: var(--muted);
  font-size: 11px;
}

.portal-redhat .identity-document-grid > div,
.portal-redhat .admin-redhat-grid div,
.portal-redhat .address-grid div,
.portal-redhat .tracking-order-summary div,
.portal-redhat .finance-detail-grid > div {
  border-color: #f0dddd;
  border-radius: 10px;
  background: #fdf9f9;
}

.portal-redhat .metric,
.portal-redhat .row-card,
.portal-redhat .warehouse-card,
.portal-redhat .quote-card,
.portal-redhat .admin-redhat-card {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.portal-redhat .metric {
  min-height: 96px;
  padding: 15px;
}

.portal-redhat .metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-redhat .filter-tabs a {
  border-radius: 8px;
}

.portal-redhat .filter-tabs a.active {
  border-color: #efcaca;
  background: var(--brand-soft);
  color: var(--brand);
}

.portal-redhat .data-table th,
.portal-redhat .finance-filter-bar {
  background: #f9eeee;
}

.portal-redhat .redhat-catalog-panel {
  max-width: 1280px;
}

.portal-redhat .redhat-customer-business-panel {
  max-width: 1280px;
}

.portal-redhat .redhat-catalog-filter.redhat-customer-business-filter {
  grid-template-columns: minmax(210px, 1.3fr) repeat(5, minmax(128px, 0.8fr)) auto;
}

.portal-redhat .redhat-customer-business-panel .package-stats {
  margin-bottom: 14px;
}

.portal-redhat .redhat-customer-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand);
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(192, 32, 32, 0.32);
  text-underline-offset: 3px;
  cursor: pointer;
}

.portal-redhat .redhat-customer-link:hover {
  color: #8e1111;
  text-decoration-color: currentColor;
}

.portal-redhat .readonly-business-card {
  border-left: 3px solid #edcaca;
}

.portal-redhat .redhat-customer-business-table-wrap {
  border-radius: 8px;
}

.portal-redhat .redhat-customer-business-table {
  min-width: 1280px;
  table-layout: fixed;
}

.portal-redhat .redhat-customer-order-table {
  min-width: 1620px;
}

.portal-redhat .redhat-customer-business-table th {
  padding: 9px 10px;
  white-space: nowrap;
  font-size: 10px;
}

.portal-redhat .redhat-customer-business-table td {
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
}

.portal-redhat .redhat-customer-business-table tbody tr:hover td {
  background: #fffafa;
}

.portal-redhat .redhat-customer-business-table td > strong,
.portal-redhat .redhat-customer-business-table td > small {
  display: block;
  overflow-wrap: anywhere;
}

.portal-redhat .redhat-customer-business-table td > small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-redhat .redhat-customer-business-table .business-primary-cell {
  width: 190px;
}

.portal-redhat .redhat-customer-business-table .business-table-statuses {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

.portal-redhat .redhat-customer-business-table .business-action-cell {
  width: 150px;
}

.portal-redhat .redhat-customer-business-table .business-action-cell button,
.portal-redhat .redhat-customer-business-table .business-action-cell .button-link {
  min-height: 30px;
  margin: 0 4px 5px 0;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.2;
}

.portal-redhat .redhat-catalog-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(128px, 0.8fr)) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.portal-redhat .redhat-catalog-filter label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.portal-redhat .redhat-catalog-filter input,
.portal-redhat .redhat-catalog-filter select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
}

.portal-redhat .redhat-catalog-filter .actions {
  flex-wrap: nowrap;
}

.portal-redhat .redhat-catalog-filter button {
  min-height: 38px;
  padding: 0 12px;
}

.portal-redhat .redhat-catalog-analysis {
  margin-bottom: 18px;
}

.portal-redhat .redhat-catalog-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.portal-redhat .redhat-catalog-metrics > div {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.portal-redhat .redhat-catalog-metrics > div:last-child {
  border-right: 0;
}

.portal-redhat .redhat-catalog-metrics span,
.portal-redhat .redhat-catalog-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.portal-redhat .redhat-catalog-metrics strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.portal-redhat .redhat-catalog-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 18px 0 2px;
}

.portal-redhat .redhat-catalog-charts section {
  min-width: 0;
}

.portal-redhat .redhat-catalog-charts h3 {
  margin-bottom: 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.portal-redhat .catalog-distribution-row {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(70px, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: var(--muted);
  font-size: 10px;
}

.portal-redhat .catalog-distribution-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-redhat .catalog-distribution-row > div {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #f0ecec;
}

.portal-redhat .catalog-distribution-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #c02020;
}

.portal-redhat .catalog-distribution-row strong {
  color: var(--text);
  text-align: right;
}

.portal-redhat .redhat-catalog-table-wrap {
  border-radius: 10px;
}

.portal-redhat .redhat-catalog-table {
  min-width: 1040px;
}

.portal-redhat .redhat-catalog-table th {
  padding: 10px 12px;
  font-size: 10px;
}

.portal-redhat .redhat-catalog-table td {
  padding: 12px;
  vertical-align: top;
  font-size: 11px;
}

.portal-redhat .redhat-catalog-table td:first-child {
  min-width: 210px;
}

.portal-redhat .redhat-catalog-table td:nth-child(2),
.portal-redhat .redhat-catalog-table td:nth-child(5) {
  min-width: 190px;
}

.portal-redhat .redhat-catalog-table td > strong,
.portal-redhat .redhat-catalog-table td > small {
  display: block;
}

.portal-redhat .redhat-catalog-table td > small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.portal-redhat .catalog-mode {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #d5dfda;
  border-radius: 6px;
  background: #f0f6f3;
  color: #236148;
  font-weight: 700;
  white-space: nowrap;
}

.portal-redhat .catalog-readonly-details {
  margin-top: 8px;
}

.portal-redhat .catalog-readonly-details summary {
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.portal-redhat .catalog-readonly-details dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 9px 0 0;
  padding: 9px;
  background: #faf7f7;
  color: var(--muted);
  line-height: 1.55;
}

.portal-redhat .catalog-readonly-details dt {
  font-weight: 700;
}

.portal-redhat .catalog-readonly-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-redhat .redhat-catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
}

.portal-redhat .redhat-catalog-pagination a {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.portal-redhat .redhat-catalog-pagination a.active {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

.portal-redhat .redhat-catalog-pagination a.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.portal-redhat .redhat-catalog-pagination small {
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
}

#app.portal-redhat.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

#app.portal-redhat.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

@media (max-width: 1180px) {
  .portal-redhat .overview-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-redhat .overview-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-redhat .overview-panel.wide {
    grid-column: span 1;
  }

  .portal-redhat .redhat-catalog-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-redhat .redhat-catalog-filter.redhat-customer-business-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-redhat .redhat-catalog-filter .actions {
    align-self: end;
  }
}

@media (max-width: 880px) {
  #app.portal-redhat {
    grid-template-columns: 1fr;
  }

  #app.portal-redhat.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  #app.portal-redhat .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: min(280px, calc(100vw - 36px));
    height: 100vh;
    padding: 0 12px 14px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 12px 0 28px rgba(41, 20, 25, 0.14);
  }

  #app.portal-redhat.sidebar-collapsed .sidebar {
    display: none;
  }

  .portal-redhat .brand {
    margin-bottom: 8px;
  }

  .portal-redhat .sidebar-toggle-mobile {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  .portal-redhat .sidebar-toggle-mobile img {
    width: 18px;
    height: 18px;
    opacity: 0.75;
  }

  .portal-redhat .subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-redhat .subnav-children {
    margin-left: 20px;
  }

  .portal-redhat .main {
    padding: 0 16px 22px;
  }

  .portal-redhat .account-strip {
    margin: 0 -16px;
    padding: 0 12px;
  }

  .portal-redhat .redhat-overview-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .portal-redhat .account-identity > div:last-child,
  .portal-redhat .locale-switch {
    display: none;
  }

  .portal-redhat .topbar {
    padding: 14px 0 12px;
  }

  .portal-redhat .topbar h1 {
    font-size: 18px;
  }

  .portal-redhat .subnav {
    grid-template-columns: 1fr;
  }

  .portal-redhat .overview-metric-grid,
  .portal-redhat .overview-layout,
  .portal-redhat .overview-todo-grid {
    grid-template-columns: 1fr;
  }

  .portal-redhat .redhat-catalog-filter,
  .portal-redhat .redhat-catalog-charts {
    grid-template-columns: 1fr;
  }

  .portal-redhat .redhat-catalog-filter.redhat-customer-business-filter {
    grid-template-columns: 1fr;
  }

  .portal-redhat .redhat-catalog-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-redhat .redhat-catalog-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .portal-redhat .redhat-catalog-metrics > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .portal-redhat .redhat-catalog-table {
    min-width: 0;
  }

  .portal-redhat .redhat-catalog-table thead {
    display: none;
  }

  .portal-redhat .redhat-catalog-table tbody,
  .portal-redhat .redhat-catalog-table tr,
  .portal-redhat .redhat-catalog-table td {
    display: block;
    width: 100%;
  }

  .portal-redhat .redhat-catalog-table tr {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }

  .portal-redhat .redhat-catalog-table tr:last-child {
    border-bottom: 0;
  }

  .portal-redhat .redhat-catalog-table td,
  .portal-redhat .redhat-catalog-table td:first-child,
  .portal-redhat .redhat-catalog-table td:nth-child(2),
  .portal-redhat .redhat-catalog-table td:nth-child(5) {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-width: 0;
    padding: 6px 0;
    border: 0;
  }

  .portal-redhat .redhat-catalog-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  .portal-redhat .redhat-catalog-table td > strong,
  .portal-redhat .redhat-catalog-table td > small,
  .portal-redhat .redhat-catalog-table td > .catalog-mode,
  .portal-redhat .redhat-catalog-table td > .catalog-readonly-details {
    grid-column: 2;
  }

  .portal-redhat .redhat-catalog-table td > small {
    margin-top: 2px;
  }

  .portal-redhat .redhat-catalog-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  .portal-redhat .redhat-overview-hero .overview-hero-stats {
    grid-template-columns: 1fr;
  }

  .portal-redhat .redhat-overview-hero .overview-hero-stats div {
    min-height: 62px;
  }

  .portal-redhat .user-section.active:not(.overview-dashboard):not(.grid):not(.split) {
    padding: 15px;
    border-radius: 12px;
  }

  .portal-redhat .redhat-profile-hero {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .portal-redhat .redhat-profile-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Platform admin workspace: follows the redhat workspace language with denser controls. */
#app.portal-admin {
  background: var(--bg);
}

.portal-admin .sidebar {
  padding: 0 12px 20px;
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
}

.portal-admin .brand {
  min-height: 60px;
  margin: 0 -12px 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.portal-admin .brand-identity {
  gap: 10px;
  min-width: 0;
}

.portal-admin .brand-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(181, 31, 46, 0.1);
  border-radius: 10px;
  box-shadow: none;
}

.portal-admin .brand strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.portal-admin .brand small {
  max-width: 154px;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-admin .side-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.portal-admin .side-section > small {
  margin: 0 8px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.portal-admin .subnav {
  gap: 3px;
}

.portal-admin .subnav > a,
.portal-admin .subnav .nav-parent {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  color: #59494d;
  font-size: 13px;
  font-weight: 600;
}

.portal-admin .subnav > a:hover,
.portal-admin .subnav .nav-parent:hover {
  background: #f8edef;
  color: var(--brand);
}

.portal-admin .subnav > a.active {
  background: linear-gradient(135deg, #8f1723, #b51f2e 64%, #ca2a3b);
  color: #fff;
  box-shadow: 0 5px 12px rgba(181, 31, 46, 0.2);
}

.portal-admin .subnav > .nav-group > .nav-parent.active {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
}

.portal-admin .subnav .nav-mark {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.portal-admin .nav-icon-mark img {
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.portal-admin .subnav > a.active .nav-icon-mark img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.portal-admin .subnav > .nav-group > .nav-parent.active .nav-icon-mark img,
.portal-admin .subnav > .nav-group > .nav-parent:hover .nav-icon-mark img,
.portal-admin .subnav > a:hover .nav-icon-mark img {
  opacity: 1;
  filter: invert(18%) sepia(71%) saturate(3236%) hue-rotate(340deg) brightness(87%) contrast(91%);
}

.portal-admin .nav-caret {
  color: #b3828a;
  font-size: 14px;
}

.portal-admin .subnav-children {
  position: relative;
  gap: 1px;
  margin: 2px 0 5px 20px;
  padding-left: 12px;
  border-left: 1px solid #e4cdd1;
}

.portal-admin .subnav .subnav-child {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  color: #7e666c;
  font-size: 12px;
  font-weight: 500;
}

.portal-admin .subnav .subnav-child:hover,
.portal-admin .subnav .subnav-child.active {
  background: #fbecef;
  color: var(--brand);
  box-shadow: none;
}

.portal-admin .subnav .subnav-child.active {
  font-weight: 700;
}

.portal-admin .subnav .subnav-child .nav-dot {
  width: 5px;
  height: 5px;
  margin-left: -15px;
  border: 2px solid #fff;
  background: #d3a8af;
  box-sizing: content-box;
}

.portal-admin .subnav .subnav-child.active .nav-dot {
  background: var(--brand);
}

.portal-admin .main {
  min-width: 0;
  padding: 0 22px 30px;
  background: var(--bg);
}

.portal-admin .account-strip {
  min-height: 52px;
  margin: 0 -22px;
  padding: 0 18px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.portal-admin .account-identity {
  gap: 9px;
}

.portal-admin .account-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background: linear-gradient(135deg, #861521, #b51f2e);
  color: #fff;
  font-size: 12px;
}

.portal-admin .account-strip strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.portal-admin .account-strip small {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.25;
}

.portal-admin .sidebar-toggle-main {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.portal-admin .sidebar-toggle-main:hover {
  border-color: var(--line);
  background: var(--brand-soft);
}

.portal-admin .sidebar-toggle-main img {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.portal-admin .sidebar-toggle-mobile {
  display: none;
}

.portal-admin .locale-switch select {
  min-width: 96px;
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

.portal-admin .account-actions > button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.portal-admin .topbar {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 0 14px;
}

.portal-admin .topbar .eyebrow {
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
}

.portal-admin .topbar h1 {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-admin button,
.portal-admin .button-link,
.portal-admin .primary {
  border-radius: 8px;
}

.portal-admin .primary {
  border-color: var(--brand);
  background: linear-gradient(135deg, #941724, #b51f2e);
  box-shadow: 0 2px 5px rgba(181, 31, 46, 0.18);
}

.portal-admin .primary:hover {
  border-color: var(--brand-dark);
  background: linear-gradient(135deg, #7f121d, #a31a28);
}

.portal-admin .field input,
.portal-admin .field select,
.portal-admin .field textarea,
.portal-admin .finance-filter-bar input,
.portal-admin .finance-filter-bar select,
.portal-admin .filter-bar input,
.portal-admin .filter-bar select {
  border-color: var(--line-strong);
  border-radius: 9px;
  background: #fff;
}

.portal-admin .field input:focus,
.portal-admin .field select:focus,
.portal-admin .field textarea:focus,
.portal-admin .finance-filter-bar input:focus,
.portal-admin .finance-filter-bar select:focus,
.portal-admin .filter-bar input:focus,
.portal-admin .filter-bar select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(181, 31, 46, 0.09);
}

.portal-admin .user-section.active:not(.overview-dashboard):not(.grid):not(.split) {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.portal-admin.admin-page-settings .topbar,
.portal-admin.admin-page-settings .user-section.active,
.portal-admin.admin-page-platformBasicInfo .topbar,
.portal-admin.admin-page-platformBasicInfo .user-section.active,
.portal-admin.admin-page-redhatFinanceSettings .topbar,
.portal-admin.admin-page-redhatFinanceSettings .user-section.active {
  max-width: 1080px;
}

.portal-admin.admin-page-overview .topbar,
.portal-admin .admin-overview {
  max-width: 1360px;
}

.portal-admin .overview-dashboard.user-section.active {
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portal-admin .section-title {
  margin-bottom: 14px;
}

.portal-admin .section-title h2 {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.portal-admin .section-title small {
  color: var(--muted);
  font-size: 11px;
}

.portal-admin .admin-overview-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 20px;
  margin-bottom: 12px;
  padding: 22px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #4e101b 0%, #851725 45%, #b51f2e 100%);
  box-shadow: 0 12px 26px rgba(78, 16, 27, 0.18);
}

.portal-admin .admin-overview-hero h2 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
}

.portal-admin .admin-overview-hero > div:first-child > p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.65;
}

.portal-admin .admin-overview-hero .eyebrow {
  color: #ffd1d8;
  font-size: 10px;
}

.portal-admin .admin-overview-hero .overview-hero-stats {
  align-self: center;
}

.portal-admin .admin-overview-hero .overview-hero-stats div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
}

.portal-admin .admin-overview-hero .overview-hero-stats span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.portal-admin .admin-overview-hero .overview-hero-stats strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.portal-admin .overview-metric-grid {
  gap: 10px;
  margin-bottom: 12px;
}

.portal-admin .admin-overview .overview-metric {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

.portal-admin .admin-overview .overview-metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-admin .admin-overview .overview-metric.success {
  border-color: #c9e5d9;
  background: var(--green-soft);
}

.portal-admin .admin-overview .overview-metric.success strong {
  color: var(--green);
}

.portal-admin .overview-layout {
  gap: 12px;
}

.portal-admin .admin-overview .overview-panel {
  padding: 16px;
  border-color: var(--line);
  border-radius: 11px;
  box-shadow: none;
}

.portal-admin .admin-overview .overview-panel > .section-title {
  margin-bottom: 10px;
  padding-bottom: 9px;
}

.portal-admin .admin-overview .overview-todo,
.portal-admin .admin-overview .overview-progress-row,
.portal-admin .admin-overview .overview-activity-row,
.portal-admin .admin-overview .overview-rank-row {
  border-color: #efdee1;
  border-radius: 8px;
  background: #fcf9f9;
}

.portal-admin .admin-overview .overview-todo.is-hot {
  border-color: #efc2c9;
  background: #fff0f2;
}

.portal-admin .admin-overview .overview-todo strong {
  color: var(--brand);
}

.portal-admin .metric,
.portal-admin .row-card,
.portal-admin .warehouse-card,
.portal-admin .quote-card,
.portal-admin .admin-redhat-card,
.portal-admin .finance-summary-card,
.portal-admin .settings-card {
  border-color: var(--line);
  border-radius: 11px;
  box-shadow: none;
}

.portal-admin .metric {
  min-height: 94px;
  padding: 14px;
}

.portal-admin .metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.portal-admin .filter-tabs {
  gap: 6px;
}

.portal-admin .filter-tabs a,
.portal-admin .filter-tabs button {
  border-radius: 8px;
}

.portal-admin .filter-tabs a.active,
.portal-admin .filter-tabs button.active {
  border-color: #eac3c9;
  background: var(--brand-soft);
  color: var(--brand);
}

.portal-admin .finance-filter-bar,
.portal-admin .filter-bar,
.portal-admin .toolbar {
  border-color: var(--line);
  border-radius: 10px;
  background: #fcf8f9;
}

.portal-admin .data-table-wrap {
  border-color: var(--line);
  border-radius: 10px;
}

.portal-admin .data-table th {
  color: #5f494e;
  background: #f8edef;
  font-size: 11px;
  font-weight: 700;
}

.portal-admin .data-table td {
  border-color: #f1e6e8;
  font-size: 12px;
}

.portal-admin .data-table tbody tr:hover td {
  background: #fdf8f9;
}

.portal-admin .admin-business-table-wrap {
  max-width: 100%;
  border-radius: 8px;
}

.portal-admin .admin-business-table {
  min-width: 1680px;
  table-layout: fixed;
}

.portal-admin .admin-order-table {
  min-width: 1860px;
}

.portal-admin .admin-outbound-order-table {
  min-width: 1720px;
}

.portal-admin .admin-user-table {
  min-width: 1490px;
}

.portal-admin .admin-user-table th:nth-child(1) {
  width: 220px;
}

.portal-admin .admin-user-table th:nth-child(2) {
  width: 190px;
}

.portal-admin .admin-user-table th:nth-child(3) {
  width: 145px;
}

.portal-admin .admin-user-table th:nth-child(4) {
  width: 170px;
}

.portal-admin .admin-user-table th:nth-child(5) {
  width: 145px;
}

.portal-admin .admin-user-table th:nth-child(6) {
  width: 225px;
}

.portal-admin .admin-user-table th:nth-child(7) {
  width: 205px;
}

.portal-admin .tracking-management-title {
  align-items: flex-end;
}

.portal-admin .tracking-management-title > div:first-child {
  display: grid;
  gap: 4px;
}

.portal-admin .tracking-management-title small {
  color: var(--muted);
  font-size: 12px;
}

.portal-admin .tracking-management-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr)) repeat(2, minmax(135px, 0.9fr)) minmax(90px, 0.6fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcf8f9;
}

.portal-admin .tracking-management-filter label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.portal-admin .tracking-management-filter input,
.portal-admin .tracking-management-filter select {
  min-width: 0;
  height: 38px;
  padding: 7px 9px;
  font-size: 12px;
}

.portal-admin .admin-tracking-table {
  min-width: 1760px;
  table-layout: fixed;
}

.portal-admin .admin-tracking-table th:nth-child(1),
.portal-admin .admin-tracking-table td:nth-child(1) { width: 42px; }
.portal-admin .admin-tracking-table th:nth-child(2),
.portal-admin .admin-tracking-table td:nth-child(2) { width: 125px; }
.portal-admin .admin-tracking-table th:nth-child(3),
.portal-admin .admin-tracking-table td:nth-child(3) { width: 190px; }
.portal-admin .admin-tracking-table th:nth-child(4),
.portal-admin .admin-tracking-table td:nth-child(4) { width: 190px; }
.portal-admin .admin-tracking-table th:nth-child(5),
.portal-admin .admin-tracking-table td:nth-child(5) { width: 220px; }
.portal-admin .admin-tracking-table th:nth-child(6),
.portal-admin .admin-tracking-table td:nth-child(6) { width: 130px; }
.portal-admin .admin-tracking-table th:nth-child(7),
.portal-admin .admin-tracking-table td:nth-child(7) { width: 105px; }
.portal-admin .admin-tracking-table th:nth-child(8),
.portal-admin .admin-tracking-table td:nth-child(8) { width: 145px; }
.portal-admin .admin-tracking-table th:nth-child(9),
.portal-admin .admin-tracking-table td:nth-child(9) { width: 290px; }
.portal-admin .admin-tracking-table th:nth-child(10),
.portal-admin .admin-tracking-table td:nth-child(10) { width: 150px; }

.portal-admin .tracking-check-cell {
  text-align: center;
}

.portal-admin .tracking-check-cell input {
  width: 16px;
  height: 16px;
  margin: 2px auto;
}

.portal-admin .tracking-number-cell {
  display: table-cell;
}

.portal-admin .tracking-number-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.portal-admin .tracking-number-line b {
  padding: 1px 4px;
  border-radius: 3px;
  background: #f8edef;
  color: var(--brand);
  font-size: 10px;
}

.portal-admin .tracking-number-line small {
  width: 100%;
  margin: 0;
}

.tracking-management-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eaf2ff;
  color: #1763c5;
  font-size: 12px;
  font-weight: 700;
}

.tracking-management-status.delivered {
  background: #e8f7ee;
  color: #168344;
}

.tracking-management-status.exception {
  background: #fff0ed;
  color: #bd2c1f;
}

.tracking-management-status.not_found {
  background: #f1f1f1;
  color: #666;
}

@media (max-width: 1480px) {
  .portal-admin .tracking-management-filter {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .portal-admin .tracking-management-filter {
    grid-template-columns: 1fr;
  }
}

.portal-admin .admin-business-table th {
  padding: 9px 10px;
  white-space: nowrap;
}

.portal-admin .admin-business-table td {
  padding: 10px;
  line-height: 1.45;
}

.portal-admin .admin-business-table td > strong,
.portal-admin .admin-business-table td > small {
  display: block;
  overflow-wrap: anywhere;
}

.portal-admin .admin-business-table td > small {
  margin-top: 4px;
}

.portal-admin .admin-table-primary-cell {
  width: 190px;
}

.portal-admin .admin-table-statuses {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.portal-admin .admin-table-primary-statuses {
  margin-top: 7px;
}

.portal-admin .admin-table-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-admin .admin-package-photo-cell {
  width: 132px;
}

.portal-admin .admin-package-photo-button,
.portal-admin .admin-package-photo-text-button {
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  box-shadow: none;
  text-align: left;
}

.portal-admin .admin-package-photo-button:hover,
.portal-admin .admin-package-photo-text-button:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.portal-admin .admin-package-photo-thumb {
  width: 64px;
  height: 48px;
}

.portal-admin .admin-package-photo-button small {
  margin-top: 3px;
}

.portal-admin .admin-table-actions {
  width: 190px;
}

.portal-admin .admin-table-actions-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.portal-admin .admin-table-actions-inner button {
  min-width: 0;
  padding: 7px 8px;
  font-size: 11px;
  white-space: normal;
}

.portal-admin .badge {
  border-color: #ead0d4;
  background: #f9ecee;
  color: #8b2632;
}

#app.portal-admin.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

#app.portal-admin.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

@media (max-width: 1180px) {
  .portal-admin .overview-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-admin .overview-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-admin .overview-panel.wide {
    grid-column: span 1;
  }
}

@media (max-width: 880px) {
  #app.portal-admin {
    grid-template-columns: 1fr;
  }

  #app.portal-admin.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  #app.portal-admin .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: min(288px, calc(100vw - 36px));
    height: 100vh;
    padding: 0 12px 14px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 12px 0 28px rgba(54, 26, 32, 0.16);
  }

  #app.portal-admin.sidebar-collapsed .sidebar {
    display: none;
  }

  .portal-admin .sidebar-toggle-mobile {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  .portal-admin .sidebar-toggle-mobile img {
    width: 18px;
    height: 18px;
    opacity: 0.75;
  }

  .portal-admin .subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-admin .subnav > a > .nav-mark,
  .portal-admin .nav-parent > .nav-mark {
    display: grid;
  }

  .portal-admin .subnav-child .subnav-mark {
    display: none;
  }

  .portal-admin .subnav-children {
    margin-left: 20px;
  }

  .portal-admin .main {
    padding: 0 16px 24px;
  }

  .portal-admin .account-strip {
    margin: 0 -16px;
    padding: 0 12px;
  }

  .portal-admin .admin-overview-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .portal-admin .account-identity > div:last-child,
  .portal-admin .locale-switch {
    display: none;
  }

  .portal-admin .topbar {
    padding: 14px 0 12px;
  }

  .portal-admin .topbar h1 {
    font-size: 18px;
  }

  .portal-admin .subnav,
  .portal-admin .overview-metric-grid,
  .portal-admin .overview-layout,
  .portal-admin .overview-todo-grid {
    grid-template-columns: 1fr;
  }

  .portal-admin .admin-overview-hero .overview-hero-stats {
    grid-template-columns: 1fr;
  }

  .portal-admin .admin-overview-hero .overview-hero-stats div {
    min-height: 62px;
  }

  .portal-admin .user-section.active:not(.overview-dashboard):not(.grid):not(.split) {
    padding: 15px;
    border-radius: 12px;
  }
}

/* Official warehouse navigation: aligned with the platform admin workspace. */
#app.portal-store {
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 0px;
  --store-nav-brand: #b51f2e;
  --store-nav-brand-soft: #faeaec;
  --store-nav-line: #eadbdd;
  --store-nav-muted: #806b70;
}

.portal-store .sidebar {
  padding: 0 12px 20px;
  border-color: var(--store-nav-line);
  background: #fff;
  box-shadow: none;
}

.portal-store .brand {
  min-height: 60px;
  margin: 0 -12px 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--store-nav-line);
}

.portal-store .brand-identity {
  gap: 10px;
  min-width: 0;
}

.portal-store .brand-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(181, 31, 46, 0.1);
  border-radius: 8px;
  box-shadow: none;
}

.portal-store .brand strong {
  color: #24191c;
  font-size: 14px;
  font-weight: 700;
}

.portal-store .brand small {
  max-width: 154px;
  margin-top: 1px;
  overflow: hidden;
  color: var(--store-nav-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-store .side-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.portal-store .side-section > small {
  margin: 0 8px 7px;
  color: var(--store-nav-muted);
  font-size: 10px;
  font-weight: 700;
}

.portal-store .subnav {
  gap: 3px;
}

.portal-store .subnav > a,
.portal-store .subnav .nav-parent {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: #59494d;
  font-size: 13px;
  font-weight: 600;
}

.portal-store .subnav > a:hover,
.portal-store .subnav .nav-parent:hover {
  background: #f8edef;
  color: var(--store-nav-brand);
}

.portal-store .subnav > a.active {
  color: #fff;
  background: linear-gradient(135deg, #8f1723, #b51f2e 64%, #ca2a3b);
  box-shadow: 0 5px 12px rgba(181, 31, 46, 0.2);
}

.portal-store .subnav > .nav-group > .nav-parent.active {
  color: var(--store-nav-brand);
  background: var(--store-nav-brand-soft);
  box-shadow: none;
}

.portal-store .subnav .nav-mark {
  width: 22px;
  height: 22px;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.portal-store .nav-icon-mark img {
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

.portal-store .subnav > a.active .nav-icon-mark img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.portal-store .subnav > .nav-group > .nav-parent.active .nav-icon-mark img,
.portal-store .subnav > .nav-group > .nav-parent:hover .nav-icon-mark img,
.portal-store .subnav > a:hover .nav-icon-mark img {
  opacity: 1;
  filter: invert(18%) sepia(71%) saturate(3236%) hue-rotate(340deg) brightness(87%) contrast(91%);
}

.portal-store .nav-caret {
  color: #b3828a;
  font-size: 14px;
}

.portal-store .subnav-children {
  position: relative;
  gap: 1px;
  margin: 2px 0 5px 20px;
  padding-left: 12px;
  border-left: 1px solid #e4cdd1;
}

.portal-store .subnav .subnav-child {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  color: #7e666c;
  font-size: 12px;
  font-weight: 500;
}

.portal-store .subnav .subnav-child:hover,
.portal-store .subnav .subnav-child.active {
  color: var(--store-nav-brand);
  background: #fbecef;
  box-shadow: none;
}

.portal-store .subnav .subnav-child.active {
  font-weight: 700;
}

.portal-store .subnav .subnav-child .nav-dot {
  width: 5px;
  height: 5px;
  margin-left: -15px;
  border: 2px solid #fff;
  background: #d3a8af;
  box-sizing: content-box;
}

.portal-store .subnav .subnav-child.active .nav-dot {
  background: var(--store-nav-brand);
}

.portal-store .sidebar-toggle-main:hover {
  border-color: var(--store-nav-line);
  background: var(--store-nav-brand-soft);
}

#app.portal-store.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

#app.portal-store.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

@media (max-width: 880px) {
  #app.portal-store,
  #app.portal-store.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-store .subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-store .subnav > a > .nav-mark,
  .portal-store .nav-parent > .nav-mark {
    display: grid;
  }

  .portal-store .subnav-child .subnav-mark {
    display: none;
  }

  .portal-store .subnav-children {
    margin-left: 20px;
  }
}

@media (max-width: 680px) {
  .portal-store .subnav {
    grid-template-columns: 1fr;
  }
}

.material-export-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(138px, auto)) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.material-export-filter label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.material-export-filter input,
.material-export-filter select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #fff;
}

.material-export-filter > button,
.material-export-filter > a {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  text-decoration: none;
}

.material-export-record-list {
  display: grid;
  gap: 12px;
}

.material-export-record {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.material-export-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.material-export-record-head > div:first-child,
.material-export-record-head > div:last-child {
  display: grid;
  gap: 5px;
}

.material-export-record-head > div:first-child span,
.material-export-record-head small,
.material-export-record-meta {
  color: var(--muted);
  font-size: 12px;
}

.material-export-record-head > div:last-child {
  justify-items: end;
}

.material-export-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ai-model-config-preview {
  display: grid;
  gap: 14px;
}

.ai-model-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-model-config-head > div {
  display: grid;
  gap: 5px;
}

.ai-model-config-head span,
.ai-model-config-grid span {
  color: var(--muted);
  font-size: 12px;
}

.ai-test-status {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted) !important;
  background: #f5f4f3;
  font-weight: 700;
}

.ai-test-status.success {
  border-color: #b9dbc8;
  color: #236447 !important;
  background: #edf8f1;
}

.ai-test-status.failed {
  border-color: #efc4c7;
  color: #a5232a !important;
  background: #fff1f2;
}

.ai-model-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-model-config-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: #faf9f8;
}

.ai-model-config-grid strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.ai-test-message {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #2f825b;
  color: #295b43;
  background: #f0f8f3;
  font-size: 12px;
  line-height: 1.55;
}

.ai-test-message.failed {
  border-color: #c83239;
  color: #7b2a2e;
  background: #fff3f3;
}

.ai-model-config-actions {
  display: flex;
  justify-content: flex-end;
}

.ai-model-config-actions button {
  min-height: 42px;
}

@media (max-width: 700px) {
  .ai-model-config-grid {
    grid-template-columns: 1fr;
  }

  .ai-model-config-actions button {
    width: 100%;
  }
}

.material-export-caption-record {
  margin-top: 12px;
  padding: 11px 12px;
  border-left: 3px solid var(--primary);
  background: #fff8f7;
}

.material-export-caption-record summary {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.material-export-caption-record > div {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.material-export-caption-record p {
  max-width: 880px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.material-export-caption-record dl {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.material-export-caption-record dt {
  font-weight: 700;
}

.material-export-caption-record dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.material-export-files {
  margin-top: 12px;
}

.material-export-files summary {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.material-export-files > div {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.material-export-files article {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #faf9f9;
}

.material-export-files article > div {
  display: grid;
  align-content: start;
  gap: 5px;
}

.material-export-files article small {
  color: var(--muted);
}

.material-export-files dl {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
  font-size: 12px;
}

.material-export-files dt {
  color: var(--muted);
}

.material-export-files dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .material-export-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-export-filter label:first-child {
    grid-column: 1 / -1;
  }

  .material-export-files article {
    grid-template-columns: 1fr;
  }
}

/* High-frequency package inbound workspace */
.inbound-workbench-panel {
  min-width: 0;
}

.inbound-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 16px;
  align-items: start;
}

.inbound-scan-stage,
.inbound-session-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inbound-scan-stage {
  padding: 20px;
}

.inbound-session-panel {
  padding: 16px;
}

.inbound-step-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.inbound-step-head > span {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.inbound-step-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.inbound-step-head strong {
  font-size: 16px;
}

.inbound-step-head small,
.inbound-photo-field small,
.inbound-submit-bar small,
.inbound-session-panel small,
.inbound-unavailable small {
  color: var(--muted);
}

.inbound-step-head.compact {
  margin-bottom: 10px;
}

.inbound-step-head.compact > span {
  color: #8e5d09;
  background: #fff1cc;
}

.inbound-scan-form {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.7fr) 112px;
  gap: 12px;
  align-items: end;
}

.inbound-scan-form label,
.inbound-form-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.inbound-scan-form input,
.inbound-scan-form select,
.inbound-member-stage input,
.inbound-form-grid input,
.inbound-form-grid select,
.inbound-form-grid textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.inbound-form-grid textarea {
  min-height: 70px;
  padding: 10px 12px;
  resize: vertical;
}

.inbound-scan-form input:hover,
.inbound-scan-form select:hover,
.inbound-member-stage input:hover,
.inbound-form-grid input:hover,
.inbound-form-grid select:hover,
.inbound-form-grid textarea:hover {
  border-color: var(--brand);
}

.inbound-scan-form input:focus,
.inbound-scan-form select:focus,
.inbound-member-stage input:focus,
.inbound-form-grid input:focus,
.inbound-form-grid select:focus,
.inbound-form-grid textarea:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.inbound-scan-form select,
.inbound-scan-form .scan-code-field input {
  min-height: 48px;
}

.inbound-scan-form .scan-code-field input {
  border-width: 2px;
  padding-inline: 14px;
  font-size: 18px;
  font-weight: 750;
}

.inbound-scan-form button {
  min-height: 48px;
}

.inbound-match-state {
  display: grid;
  grid-template-columns: 86px minmax(160px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 50px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid #a2a2a2;
  background: #f7f7f7;
}

.inbound-match-state > span {
  color: #555;
  font-size: 12px;
  font-weight: 800;
}

.inbound-match-state > strong,
.inbound-match-state > small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inbound-match-state > small {
  color: var(--muted);
}

.inbound-match-state.is-loading {
  border-color: #4c73b9;
  background: #f1f5fc;
}

.inbound-match-state.is-success {
  border-color: #2f825b;
  background: #f0f8f3;
}

.inbound-match-state.is-warning {
  border-color: #c98518;
  background: #fff8e7;
}

.inbound-match-state.is-error {
  border-color: #c83239;
  background: #fff2f2;
}

.inbound-member-stage {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #ead8ac;
  border-radius: 8px;
  background: #fffdf6;
}

.inbound-conflict-stage {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #ead8ac;
  border-radius: 8px;
  background: #fffdf6;
}

.inbound-conflict-list {
  display: grid;
  border-top: 1px solid #ead8ac;
}

.inbound-conflict-list article {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee2c6;
}

.inbound-conflict-list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.inbound-conflict-list small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.inbound-conflict-list button {
  min-height: 40px;
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
}

.inbound-member-stage form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
}

.inbound-member-stage button {
  min-height: 44px;
}

.inbound-member-stage input {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
}

.inbound-capture-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.inbound-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.inbound-form-grid .wide {
  grid-column: span 2;
}

.inbound-form-grid .weight-field input {
  border: 2px solid var(--brand);
  background: #fffafa;
  font-size: 18px;
  font-weight: 800;
}

.inbound-fulfillment-fields {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d9e6df;
  border-radius: 8px;
  background: #f7fbf8;
}

.inbound-fulfillment-fields[hidden] {
  display: none;
}

.inbound-fulfillment-fields > div:first-child {
  display: grid;
  gap: 3px;
}

.inbound-fulfillment-fields > div:first-child small {
  color: var(--muted);
  font-size: 12px;
}

.inbound-volume-result {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #faf9f8;
}

.inbound-volume-result span,
.inbound-volume-result small {
  color: var(--muted);
  font-size: 11px;
}

.inbound-volume-result strong {
  font-size: 16px;
}

.inbound-photo-field {
  display: grid;
  grid-template-columns: 130px minmax(170px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed #d6b1ae;
  border-radius: 8px;
  background: #fffafa;
}

.inbound-photo-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.inbound-photo-heading > div {
  display: grid;
  gap: 3px;
}

.inbound-photo-heading button {
  min-height: 30px;
  padding: 4px 8px;
  border-color: var(--line);
  color: var(--brand);
  background: #fff;
  font-size: 11px;
}

.inbound-photo-picker {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.inbound-photo-picker:focus-visible {
  outline: 3px solid rgba(200, 28, 38, 0.18);
  outline-offset: 2px;
}

.inbound-photo-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inbound-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  min-height: 54px;
}

.inbound-photo-preview:empty::before {
  display: grid;
  place-items: center;
  min-height: 54px;
  color: var(--muted);
  content: "尚未选择照片";
  font-size: 12px;
}

.inbound-photo-preview figure {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f4f4;
}

.inbound-photo-preview figure button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  color: #fff;
  background: rgba(32, 32, 32, 0.78);
  font-size: 17px;
  line-height: 1;
}

.inbound-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbound-submit-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.inbound-submit-bar > div {
  display: grid;
  gap: 3px;
}

.inbound-submit-bar button {
  min-width: 150px;
  min-height: 46px;
}

.inbound-session-panel .section-subtitle:first-child {
  margin-top: 0;
}

.inbound-session-log {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
}

.inbound-session-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.inbound-session-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.inbound-session-item strong,
.inbound-session-item small {
  overflow-wrap: anywhere;
}

.inbound-recent-table-wrap {
  max-height: 360px;
}

.inbound-recent-table th,
.inbound-recent-table td {
  padding: 9px 8px;
  font-size: 12px;
}

.inbound-recent-table td {
  vertical-align: top;
}

.inbound-recent-table td strong,
.inbound-recent-table td small {
  display: block;
  overflow-wrap: anywhere;
}

.inbound-recent-table td small {
  margin-top: 3px;
  color: var(--muted);
}

.inbound-unavailable {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid #ead8ac;
  border-radius: 8px;
  background: #fffdf6;
}

@media (max-width: 1100px) {
  .inbound-workbench {
    grid-template-columns: 1fr;
  }

  .inbound-session-panel {
    display: block;
  }

  .inbound-session-panel .section-subtitle {
    margin-top: 18px;
  }

  .inbound-session-panel .section-subtitle:first-child {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .package-claim-search > div,
  .package-claim-detail-grid {
    grid-template-columns: 1fr;
  }

  .package-claim-search button {
    width: 100%;
  }

  .package-claim-photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-photo-stage {
    grid-template-columns: 1fr 1fr;
  }

  .package-photo-stage-content {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .package-photo-nav {
    grid-row: 2;
  }

  .package-photo-stage-viewport {
    height: min(36vh, 300px);
    padding: 8px;
  }

  .package-photo-thumbnail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inbound-scan-stage,
  .inbound-session-panel {
    padding: 14px;
  }

  .inbound-scan-form,
  .inbound-member-stage form,
  .inbound-form-grid,
  .inbound-photo-field,
  .inbound-session-panel {
    grid-template-columns: 1fr;
  }

  .inbound-conflict-list article {
    grid-template-columns: 1fr;
  }

  .inbound-scan-form .scan-code-field,
  .inbound-form-grid .wide {
    grid-column: auto;
  }

  .inbound-match-state {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .inbound-match-state > small {
    grid-column: 1 / -1;
  }

  .inbound-session-panel .section-subtitle:nth-of-type(2),
  .inbound-session-log,
  .inbound-recent-table-wrap {
    grid-column: 1;
    grid-row: auto;
  }

  .inbound-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .inbound-submit-bar button {
    width: 100%;
  }
}
.destination-category-workspace { width: 100%; min-width: 0; }
.destination-category-tabs { display: flex; gap: 20px; border-bottom: 1px solid #eadfe0; margin-bottom: 18px; }
.destination-category-tabs button { border: 0; border-radius: 0; background: transparent; padding: 12px 2px; box-shadow: none; }
.destination-category-tabs button.active { color: #bd202a; border-bottom: 2px solid #bd202a; font-weight: 700; }
.destination-category-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; }
.destination-category-toolbar label { display: grid; gap: 6px; font-size: 13px; min-width: 160px; }
.destination-category-toolbar input, .destination-category-toolbar select { min-height: 40px; width: 100%; }
.destination-category-table { min-width: 960px; font-size: 14px; }
.destination-category-table td { vertical-align: top; line-height: 1.6; }
.destination-category-table td:first-child { min-width: 190px; max-width: 260px; overflow-wrap: anywhere; }
.destination-category-table td:nth-child(2), .destination-category-table td:nth-child(4) { min-width: 160px; max-width: 280px; overflow-wrap: anywhere; }
.destination-category-table small { display: block; }
.destination-classification-result { grid-column: 1 / -1; margin: 0; padding: 8px 0; font-size: 14px; font-weight: 600; }
.packing-logistics-product-list .packing-logistics-empty { grid-column: 1 / -1; }

.seo-workspace { width: 100%; min-width: 0; color: #24262b; font-size: 14px; line-height: 1.6; letter-spacing: 0; }
.seo-workspace *, .seo-dialog * { box-sizing: border-box; letter-spacing: 0; }
.seo-workspace h1 { font-size: 23px; line-height: 1.35; margin: 3px 0 0; }
.seo-workspace h2, .seo-dialog h2 { font-size: 17px; line-height: 1.4; margin: 22px 0 12px; }
.seo-workspace h3, .seo-dialog h3 { font-size: 15px; margin: 12px 0; }
.seo-heading, .seo-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.seo-heading { border-bottom: 1px solid #e2e5e9; padding-bottom: 20px; margin-bottom: 22px; }
.seo-heading > div > span { font-size: 12px; color: #737781; }
.seo-section-heading { margin: 16px 0; }
.seo-section-heading h2, .seo-section-heading h3 { margin: 0; }
.seo-actions, .seo-row-actions, .seo-engine-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seo-list-actions { margin: 14px 0; }
.seo-workspace button, .seo-dialog button { min-height: 36px; height: auto; font: inherit; font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: 5px; white-space: nowrap; box-shadow: none; }
.seo-workspace button:disabled, .seo-dialog button:disabled { opacity: .5; cursor: default; }
.seo-workspace .primary, .seo-dialog .primary { background: #c82934; border: 1px solid #c82934; color: #fff; }
.seo-workspace .ghost, .seo-dialog .ghost { background: #fff; border: 1px solid #d8dce2; color: #333842; }
.seo-workspace .ghost:hover, .seo-dialog .ghost:hover { background: #f1f3f6; color: #24262b; }
.seo-workspace a, .seo-dialog a { color: #2164ae; overflow-wrap: anywhere; }
.seo-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.seo-field { display: grid; gap: 6px; margin: 0; min-width: 0; align-content: start; font-size: 13px; color: #4c515c; }
.seo-field span { font-weight: 600; }
.seo-field input, .seo-field select, .seo-field textarea, .seo-filters input, .seo-filters select { width: 100%; min-width: 0; min-height: 39px; padding: 9px 10px; border: 1px solid #d8dce2; border-radius: 5px; background: #fff; color: #24262b; font: inherit; line-height: 1.5; }
.seo-field textarea { resize: vertical; }
.seo-field input:focus, .seo-field textarea:focus, .seo-field select:focus { outline: 2px solid #9bbbe9; outline-offset: 1px; }
.seo-wide { grid-column: 1 / -1; }
.seo-check { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 36px; margin: 0; }
.seo-workspace input[type="checkbox"], .seo-dialog input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; flex: 0 0 16px; accent-color: #c82934; }
.seo-editor { padding-bottom: 24px; border-bottom: 1px solid #e2e5e9; max-width: 1040px; }
.seo-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 18px; }
.seo-filters label { display: grid; gap: 6px; font-size: 13px; min-width: 150px; }
.seo-filters label:first-child { flex: 1; max-width: 380px; }
.seo-filters button { min-height: 39px; }
.seo-table-wrap { width: 100%; min-width: 0; overflow-x: auto; border: 1px solid #e1e5ea; border-radius: 5px; }
.seo-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: auto; font-size: 13px; }
.seo-table th { background: #f4f6f8; color: #5e6673; font-weight: 600; text-align: left; white-space: nowrap; }
.seo-table th, .seo-table td { padding: 12px 14px; border: 0; border-bottom: 1px solid #e8ebef; vertical-align: top; line-height: 1.6; }
.seo-table tr:last-child td { border-bottom: 0; }
.seo-table tbody tr:hover { background: #fafbfc; }
.seo-table td { max-width: 380px; min-width: 70px; overflow-wrap: anywhere; }
.seo-table td:first-child { min-width: 180px; }
.seo-table th:first-child:has(input), .seo-table td:first-child:has(input) { min-width: 50px; }
.seo-table td strong { display: block; font-size: 13px; }
.seo-table small { display: block; margin-top: 4px; color: #7a808a; font-size: 12px; }
.seo-clamp { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seo-row-actions { min-width: 112px; }
.seo-row-actions button { padding: 5px 9px; min-height: 31px; }
.seo-pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 0; font-size: 13px; color: #6b7280; }
.seo-badge { display: inline-block; font-size: 12px; line-height: 1.5; padding: 3px 7px; border-radius: 4px; background: #edf0f4; color: #566170; white-space: nowrap; }
.seo-success, .seo-published { background: #e5f4ed; color: #15734d; }
.seo-queued, .seo-scheduled { background: #fff4d9; color: #94620c; }
.seo-running, .seo-info { background: #e8f0fc; color: #2666b1; }
.seo-failed, .seo-error.seo-badge { background: #fdebec; color: #b32232; }
.seo-warning { background: #fff2d5; color: #936311; }
.seo-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e2e5e9; padding: 0 0 20px; gap: 22px; }
.seo-metrics > div { display: grid; gap: 5px; padding-left: 12px; border-left: 3px solid #dce4ec; }
.seo-metrics span { color: #6c7480; font-size: 13px; }
.seo-metrics strong { font-size: 25px; line-height: 1.3; color: #26313f; }
.seo-facts { display: grid; gap: 12px; margin: 20px 0; font-size: 13px; }
.seo-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.seo-facts dt { color: #737b86; }
.seo-facts dd { margin: 0; overflow-wrap: anywhere; }
.seo-error { color: #b32232; font-size: 13px; overflow-wrap: anywhere; }
.seo-error:empty { display: none; }
.seo-muted { color: #7a808a; font-size: 13px; }
.seo-empty { text-align: center; color: #7a808a; padding: 30px 14px !important; }
.seo-upload { display: inline-flex; align-items: center; border: 1px solid #d8dce2; padding: 8px 12px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.seo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seo-upload:focus-within { outline: 2px solid #9bbbe9; }
.seo-code, .seo-dialog pre { background: #f4f6f8; font-size: 13px; padding: 16px; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: 5px; }
.seo-audit-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; font-size: 13px; }
.seo-audit-progress progress { width: min(260px, 50%); height: 8px; accent-color: #23846a; }
.seo-issue { margin: 0 0 8px; }
.seo-modal-backdrop { z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: #15203370; }
.seo-dialog { background: #fff; color: #24262b; border-radius: 7px; width: 100%; max-width: 1080px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; font-size: 14px; box-shadow: 0 18px 60px #15203330; }
.seo-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #e2e5e9; gap: 12px; }
.seo-dialog > header h2 { margin: 0; }
.seo-dialog form { min-height: 0; display: flex; flex-direction: column; }
.seo-dialog-body { padding: 22px; overflow-y: auto; min-height: 0; }
.seo-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e2e5e9; }
.seo-dialog .seo-table { min-width: 700px; }
.seo-dialog .seo-path { font-size: 13px; color: #7a808a; overflow-wrap: anywhere; }
.seo-search-preview { padding: 12px 0; max-width: 650px; }
.seo-search-preview span { color: #537252; font-size: 13px; overflow-wrap: anywhere; }
.seo-search-preview h3 { color: #2154ad; font-size: 20px; line-height: 1.4; margin: 8px 0; }
.seo-search-preview p { color: #59616d; line-height: 1.7; }
.seo-picker-results { max-height: 420px; overflow-y: auto; }
.seo-selection-count { color: #687383; font-size: 13px; }
.seo-faq-row { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 12px; align-items: start; border-bottom: 1px solid #e2e5e9; padding: 14px 0; }
.seo-faq-row > button { margin-top: 26px; }
.seo-ai-draft { margin-top: 20px; padding-top: 12px; border-top: 2px solid #9bbbe9; }
.geo-brand-facts { max-width: 1200px; margin: 42px auto; padding: 0 28px; color: #24262b; }
.geo-brand-facts h2 { font-size: 25px; }
.geo-brand-facts p, .geo-brand-facts dd, .geo-brand-facts li { font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.geo-brand-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.geo-brand-facts dt { color: #7a808a; font-size: 13px; }
.geo-brand-facts dd { margin: 4px 0 0; }
.geo-brand-initial { padding: 170px 28px 60px; background: #8b1717; color: #fff; }
.geo-brand-initial > h1 { font-size: 32px; max-width: 1200px; margin: auto; }
.geo-article-faq { margin: 32px 0; border-top: 1px solid #e2e5e9; padding-top: 16px; }
.geo-article-faq details { padding: 14px 0; border-bottom: 1px solid #e2e5e9; }
.geo-article-faq summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.geo-article-faq p { white-space: pre-line; margin-bottom: 0; font-size: 15px; line-height: 1.8; }
.seo-dialog .geo-brand-facts { margin: 0; padding: 0; }
@media (max-width: 760px) {
  .seo-heading { align-items: flex-start; }
  .seo-heading h1 { font-size: 20px; }
  .seo-form-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .seo-metrics strong { font-size: 22px; }
  .seo-facts > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .seo-filters label { flex: 1; min-width: 120px; max-width: 100% !important; }
  .seo-filters label:first-child { flex-basis: 100%; }
  .seo-modal-backdrop { padding: 10px; }
  .seo-dialog { max-height: calc(100dvh - 20px); }
  .seo-dialog > header, .seo-dialog footer { padding: 14px; }
  .seo-dialog-body { padding: 16px; }
  .seo-faq-row { grid-template-columns: minmax(0, 1fr); }
  .seo-faq-row > button { margin-top: 0; justify-self: start; }
  .geo-brand-facts { padding: 0 20px; }
  .geo-brand-facts dl { grid-template-columns: minmax(0, 1fr); }
}