:root {
  --bg: #f4f2ed;
  --paper: #ffffff;
  --wash: #fffaf2;
  --line: #eadfce;
  --line-strong: #d9c7b5;
  --text: #24211d;
  --muted: #706a63;
  --primary: #cf765f;
  --primary-strong: #b9634d;
  --gold: #eba81a;
  --success: #17805a;
  --danger: #c83f34;
  --info: #207f9a;
  --shadow-soft: 0 14px 40px rgba(55, 45, 35, 0.08);
  --shadow-panel: 0 18px 48px rgba(44, 38, 30, 0.12);
  --radius: 18px;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* Late front portal override: compact horizontal service points. */
.portal-body .trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.portal-body .trust-item {
  min-height: 82px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "desc";
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 10px 6px;
  text-align: center;
}

.portal-body .trust-item i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 16px;
}

.portal-body .trust-item strong {
  font-size: 12px;
  line-height: 1.15;
}

.portal-body .trust-item span {
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 420px) {
  .portal-body .trust-grid {
    gap: 6px;
  }

  .portal-body .trust-item {
    min-height: 74px;
    padding: 8px 4px;
  }

  .portal-body .trust-item i {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .portal-body .trust-item strong {
    font-size: 11px;
  }

  .portal-body .trust-item span {
    font-size: 9px;
  }
}

/* Late overrides for the official admin template. Keep this block after legacy admin rules. */
.admin-template.admin-body {
  background:
    radial-gradient(circle at 78% 0%, rgba(215, 119, 89, .13), transparent 320px),
    linear-gradient(180deg, #faf7f2 0%, #f6f3ee 260px, #f8f6f1 100%);
}

.admin-template .admin-template-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  grid-template-columns: 260px minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

.admin-template .admin-template-topbar {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--template-line);
  border-radius: 0;
  background: rgba(255, 253, 249, .9);
  box-shadow: none;
}

.admin-template .admin-guide-panel,
.admin-template .admin-panel {
  border-color: var(--template-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, .96);
  box-shadow: var(--template-shadow);
}

.admin-template .admin-guide-panel {
  border: 1px dashed #e0a68f;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 119, 89, .11), transparent 320px),
    rgba(255, 253, 249, .72);
  box-shadow: none;
}

.admin-template .code-manager-panel {
  order: 1;
}

.admin-template #card-import {
  order: 2;
}

.admin-template .order-desk {
  order: 3;
}

.admin-template .log-panel {
  order: 4;
}

.admin-template .notification-panel {
  order: 5;
}

.admin-template .inventory-panel {
  order: 6;
}

.admin-template .exception-panel {
  order: 7;
}

.admin-template #product-config {
  order: 8;
}

.admin-template #admin-users {
  order: 9;
}

.admin-template #admin-audit {
  order: 10;
}

.admin-template .admin-filterbar {
  border-color: var(--template-line);
  background: #fffdf9;
}

.admin-template .admin-grid > .admin-panel {
  order: 20;
}

.admin-template .code-manager-panel {
  order: 1;
}

.admin-template #card-import {
  order: 2;
}

.admin-template .order-desk {
  order: 3;
}

.admin-template .log-panel {
  order: 4;
}

.admin-template .notification-panel {
  order: 5;
}

.admin-template .inventory-panel {
  order: 6;
}

.admin-template .exception-panel {
  order: 7;
}

.admin-template #product-config {
  order: 8;
}

.admin-template #admin-users {
  order: 9;
}

.admin-template #admin-audit {
  order: 10;
}

.admin-template #import-batches {
  order: 11;
}

.admin-template .code-table-wrap,
.admin-template .table-wrap {
  border-color: var(--template-line);
}

.admin-template .sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

@media (max-width: 820px) {
  .admin-template .admin-template-shell,
  .admin-template .sidebar-collapsed {
    grid-template-columns: 1fr;
  }
}

/* Late front portal override: compact horizontal service points. */
.portal-body .trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.portal-body .trust-item {
  min-height: 82px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "desc";
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 10px 6px;
  text-align: center;
}

.portal-body .trust-item i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 16px;
}

.portal-body .trust-item strong {
  font-size: 12px;
  line-height: 1.15;
}

.portal-body .trust-item span {
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 420px) {
  .portal-body .trust-grid {
    gap: 6px;
  }

  .portal-body .trust-item {
    min-height: 74px;
    padding: 8px 4px;
  }

  .portal-body .trust-item i {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .portal-body .trust-item strong {
    font-size: 11px;
  }

  .portal-body .trust-item span {
    font-size: 9px;
  }
}

/* Front portal service points: keep the three service cards in one compact row. */
.portal-body .trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.portal-body .trust-item {
  min-height: 82px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "desc";
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 10px 6px;
  text-align: center;
}

.portal-body .trust-item i {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 16px;
}

.portal-body .trust-item strong {
  font-size: 12px;
  line-height: 1.15;
}

.portal-body .trust-item span {
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 420px) {
  .portal-body .trust-grid {
    gap: 6px;
  }

  .portal-body .trust-item {
    min-height: 74px;
    padding: 8px 4px;
  }

  .portal-body .trust-item i {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .portal-body .trust-item strong {
    font-size: 11px;
  }

  .portal-body .trust-item span {
    font-size: 9px;
  }
}

.admin-template .admin-grid {
  display: flex !important;
  flex-direction: column !important;
}

.admin-template .admin-grid > .admin-panel {
  order: 50 !important;
}

.admin-template .code-manager-panel {
  order: 1 !important;
}

.admin-template #card-import {
  order: 2 !important;
}

.admin-template .order-desk {
  order: 3 !important;
}

.admin-template .log-panel {
  order: 4 !important;
}

.admin-template .notification-panel {
  order: 5 !important;
}

.admin-template .inventory-panel {
  order: 6 !important;
}

.admin-template .exception-panel {
  order: 7 !important;
}

.admin-template #product-config {
  order: 8 !important;
}

.admin-template #admin-users {
  order: 9 !important;
}

.admin-template #admin-audit {
  order: 10 !important;
}

.admin-template #import-batches {
  order: 11 !important;
}

.admin-template .admin-guide-panel {
  grid-template-columns: 1fr !important;
  text-align: center !important;
}

.admin-template .guide-steps {
  width: min(620px, 100%);
  grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  justify-content: center;
}

.admin-template .guide-steps article {
  grid-template-columns: 32px minmax(0, 1fr) !important;
}

.admin-template .guide-steps strong,
.admin-template .guide-steps span {
  white-space: normal !important;
  word-break: normal !important;
}

@media (max-width: 820px) {
  .admin-template .guide-steps {
    grid-template-columns: 1fr !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 250, 242, .92), rgba(244, 242, 237, .4) 34rem),
    var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

button,
input,
textarea {
  font: inherit;
}

.topbar {
  width: min(1180px, calc(100% - 32px));
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin: 0 auto;
  padding: 14px 0 8px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff7e8;
  border: 1px solid #eed9bc;
  color: var(--primary);
  box-shadow: 0 10px 24px rgba(207, 118, 95, .1);
  flex: 0 0 auto;
}

.brand-mark i {
  font-size: 22px;
}

.brand-lockup strong,
.brand-lockup small {
  display: block;
  min-width: 0;
}

.brand-lockup strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

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

.product-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-pill,
.lang-selector .btn {
  min-height: 42px;
  border: 1px solid #e5ddd2;
  border-radius: 9px;
  background: rgba(255, 255, 255, .92);
  color: #5a554e;
  padding: 0 15px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(38, 32, 26, .05);
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

.product-pill:hover,
.product-pill.active {
  border-color: #d7bda8;
  color: #181512;
  background: #ffffff;
  transform: translateY(-1px);
}

.lang-selector {
  justify-self: end;
}

.lang-selector .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-selector .btn span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.official-layout {
  width: min(1180px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(360px, 470px) minmax(460px, 1fr);
  gap: 28px;
  align-items: start;
  margin: 22px auto 60px;
}

.info-column {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 18px;
}

.action-column {
  background: var(--paper);
  border-radius: 26px;
  box-shadow: var(--shadow-panel);
  padding: 34px 44px 44px;
}

.hero-card {
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 246, 232, .95), rgba(255, 255, 255, .98) 54%),
    #ffffff;
  box-shadow: var(--shadow-soft);
}

.hero-title-block {
  margin-bottom: 20px;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
  line-height: 1.24;
}

h1 {
  font-size: 24px;
  font-weight: 850;
}

h2 {
  font-size: 21px;
  font-weight: 800;
}

.hero-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 15px;
}

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

.trust-item {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid #e9ded3;
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
}

.trust-item i {
  font-size: 28px;
}

.trust-item:nth-child(1) i {
  color: #68a7c7;
}

.trust-item:nth-child(2) i {
  color: #f3b51d;
}

.trust-item:nth-child(3) i {
  color: #38a8df;
}

.trust-item strong {
  font-size: 14px;
  font-weight: 850;
}

.faq-block {
  border-top: 1px solid #eee6db;
  margin-top: 20px;
  padding-top: 20px;
}

.faq-block p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 15px;
}

.faq-block p:last-child {
  margin-bottom: 0;
}

.faq-block strong {
  color: var(--text);
  font-size: 16px;
}

.faq-block i {
  color: var(--gold);
  margin-right: 6px;
}

.warning-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 2px solid var(--gold);
  border-radius: 18px;
  background: #fff8e8;
  box-shadow: 0 10px 22px rgba(235, 168, 26, .08);
}

.warning-icon {
  color: var(--gold);
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}

.warning-box strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
}

.warning-box p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 6px 0 34px;
  padding: 0 48px;
}

.step-indicator {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
}

.step-indicator:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% + 21px);
  right: calc(-50% + 21px);
  top: 19px;
  height: 2px;
  background: #dfd8cf;
}

.step-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #dfd8cf;
  border-radius: 999px;
  background: #ffffff;
  color: #7d766e;
  font-weight: 850;
  position: relative;
  z-index: 1;
}

.step-number.active,
.step-number.completed {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.step-label {
  color: #81786f;
  font-size: 13px;
}

.step-label.active,
.step-label.completed {
  color: var(--text);
  font-weight: 750;
}

.step-card,
.query-card {
  border: 1px solid #e9dbce;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}

.step-card {
  border-color: #bb9a8d;
}

.step-card:not(.active) {
  display: none;
}

.card-header {
  border: 0;
  background: transparent;
  padding: 27px 28px 8px;
}

.card-body {
  padding: 17px 28px 30px;
}

.form-label {
  color: #2e2a25;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}

.form-control {
  min-height: 66px;
  border: 1px solid #e4d7ca;
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
  padding: 17px 20px;
  box-shadow: inset 0 1px 2px rgba(30, 24, 18, .03);
}

textarea.form-control {
  min-height: 66px;
  resize: vertical;
}

textarea.form-control.is-singleline {
  height: 66px;
  min-height: 66px;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
}

textarea.form-control.is-multiline {
  min-height: 152px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
}

.form-control:focus {
  border-color: #c78370;
  box-shadow: 0 0 0 .2rem rgba(207, 118, 95, .15);
}

.form-text {
  color: #827b73;
  font-size: 13px;
}

.form-text i {
  color: var(--gold);
  margin-right: 4px;
}

.mono-input {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0;
}

.btn-primary {
  min-height: 62px;
  border-color: var(--primary);
  border-radius: 13px;
  background: var(--primary);
  color: #ffffff;
  font-size: 17px;
  font-weight: 850;
  box-shadow: 0 12px 20px rgba(207, 118, 95, .18);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--primary-strong);
  background: var(--primary-strong);
}

.btn-primary:disabled {
  border-color: var(--primary);
  background: var(--primary);
  opacity: .72;
}

.soft-alert {
  border-color: #cfe8dd;
  border-radius: 12px;
  background: #f2fbf6;
  color: #176b4d;
}

.result-alert {
  border: 1px solid #d9e2ea;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f7fafc;
  color: #34515f;
}

.result-alert strong {
  display: block;
  margin-bottom: 3px;
}

.result-alert.success {
  border-color: #bfe6d0;
  background: #eefaf4;
  color: var(--success);
}

.result-alert.info {
  border-color: #afe8f1;
  background: #ecfeff;
  color: var(--info);
}

.result-alert.warning {
  border-color: #f6d895;
  background: #fff8e8;
  color: #995f00;
}

.result-alert.error {
  border-color: #f0b7b0;
  background: #fff1f0;
  color: var(--danger);
}

.status-text {
  text-align: center;
  color: #817970;
  font-size: 13px;
  margin-top: 12px;
}

.query-card {
  margin-top: 24px;
}

.query-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: #ffffff;
  color: #6e675f;
  padding: 0 20px;
  text-align: left;
}

.query-toggle i {
  color: #4a9cc6;
  margin-right: 7px;
}

.query-body {
  border-top: 1px solid #eee4da;
  padding: 20px;
}

.query-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.query-action-row .btn {
  min-height: 58px;
}

.query-result {
  display: grid;
  gap: 8px;
}

.query-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 106px minmax(0, 2fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #eee5da;
  border-radius: 11px;
  padding: 10px 12px;
  background: #fffdf9;
  font-size: 13px;
}

.query-code {
  overflow-wrap: anywhere;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.query-status {
  font-weight: 850;
}

.query-message {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.site-footer {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #777068;
  margin: 0 16px 42px;
}

.site-footer strong {
  color: #5e574f;
  font-size: 16px;
}

[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .brand-lockup {
    grid-column: 1 / -1;
  }

  .product-nav {
    justify-content: flex-start;
  }

  .official-layout {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 28px));
  }

  .info-column {
    position: static;
  }
}

.admin-template.admin-body {
  --template-bg: #f6f3ee;
  --template-surface: #fffdf9;
  --template-surface-2: #fbf7f1;
  --template-line: #eadfd2;
  --template-line-strong: #dfcabb;
  --template-text: #1d1712;
  --template-muted: #7a6f64;
  --template-accent: #d77759;
  --template-accent-2: #efdfd5;
  --template-green: #16805a;
  --template-shadow: 0 18px 42px rgba(82, 59, 43, .09);
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 0%, rgba(215, 119, 89, .13), transparent 320px),
    linear-gradient(180deg, #faf7f2 0%, var(--template-bg) 260px, #f8f6f1 100%);
  color: var(--template-text);
}

.admin-template .admin-template-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}

.admin-template .admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: 20px 12px;
  border-right: 1px solid var(--template-line);
  background: rgba(255, 253, 249, .92);
  box-shadow: 10px 0 30px rgba(82, 59, 43, .05);
  overflow: hidden;
  z-index: 20;
}

.admin-template .admin-side-brand {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--template-text);
  text-decoration: none;
  padding: 0 8px;
}

.admin-template .side-brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--template-accent);
  color: #fff;
}

.admin-template .side-brand-mark svg,
.admin-template .admin-sidebar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-template .admin-side-brand strong,
.admin-template .admin-side-brand small {
  display: block;
}

.admin-template .admin-side-brand strong {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.admin-template .admin-side-brand small {
  margin-top: 4px;
  color: var(--template-muted);
  font-size: 12px;
}

.admin-template .admin-side-search {
  position: relative;
  display: block;
}

.admin-template .admin-side-search span {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a8d80;
  font-size: 12px;
  pointer-events: none;
}

.admin-template .admin-side-search input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--template-line);
  border-radius: 6px;
  background: #fff;
  color: var(--template-text);
  padding: 0 12px 0 42px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(82, 59, 43, .05);
}

.admin-template .admin-nav-tree {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.admin-template .admin-nav-tree details {
  margin: 10px 0;
}

.admin-template .admin-nav-tree summary,
.admin-template .admin-nav-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
  color: #493f36;
  text-decoration: none;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}

.admin-template .admin-nav-tree summary::-webkit-details-marker {
  display: none;
}

.admin-template .admin-nav-tree summary {
  border: 1px solid var(--template-line);
  background: #f3eee6;
  justify-content: space-between;
}

.admin-template .admin-nav-tree summary::after {
  content: "⌄";
  color: #84776b;
  font-size: 14px;
}

.admin-template .admin-nav-tree details[open] summary::after {
  transform: rotate(180deg);
}

.admin-template .admin-nav-link i,
.admin-template .admin-nav-tree summary i {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  opacity: .72;
}

.admin-template .admin-nav-link.sub {
  min-height: 34px;
  margin: 5px 0 0 34px;
  color: #71675d;
  font-weight: 720;
}

.admin-template .admin-nav-link:hover,
.admin-template .admin-nav-link.active {
  border: 1px solid #f0cfbf;
  background: #fff4ed;
  color: var(--template-accent);
}

.admin-template .admin-side-footer {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--template-line);
  padding: 12px 8px 0;
  color: var(--template-muted);
  font-size: 11px;
}

.admin-template .side-collapse {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #6e6257;
  cursor: pointer;
}

.admin-template .admin-main-shell {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
}

.admin-template .admin-template-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--template-line);
  border-radius: 0;
  background: rgba(255, 253, 249, .9);
  padding: 0 28px;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.admin-template .template-title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.admin-template .template-title strong,
.admin-template .template-title span {
  display: block;
}

.admin-template .template-title strong {
  color: var(--template-text);
  font-size: 14px;
  font-weight: 900;
}

.admin-template .template-title span {
  margin-top: 3px;
  color: var(--template-muted);
  font-size: 12px;
}

.admin-template .top-collapse {
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #574b41;
  cursor: pointer;
  font-size: 17px;
}

.admin-template .top-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.admin-template .icon-link,
.admin-template .admin-body .btn,
.admin-template .btn {
  border-radius: 6px;
}

.admin-template .icon-link {
  min-height: 34px;
  border-color: var(--template-line);
  background: #fff;
  color: #463d34;
  box-shadow: 0 6px 16px rgba(82, 59, 43, .06);
}

.admin-template .icon-link:hover {
  border-color: #e2c7b6;
  color: var(--template-accent);
}

.admin-template .admin-overview,
.admin-template .admin-grid {
  width: min(1680px, calc(100% - 72px));
  margin-left: auto;
  margin-right: auto;
}

.admin-template .admin-guide-panel {
  min-height: 306px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 24px;
  border: 1px dashed #e0a68f;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 119, 89, .11), transparent 320px),
    rgba(255, 253, 249, .72);
  box-shadow: none;
  text-align: center;
}

.admin-template .guide-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4ded3;
  color: var(--template-accent);
}

.admin-template .guide-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-template .admin-guide-panel h1 {
  margin: 0;
  color: var(--template-text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.2;
}

.admin-template .admin-guide-panel p {
  max-width: 620px;
  margin: 0;
  color: var(--template-muted);
  font-size: 14px;
  line-height: 1.8;
}

.admin-template .guide-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: 22px;
  margin-top: 10px;
  text-align: left;
}

.admin-template .guide-steps article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
}

.admin-template .guide-steps b {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--template-accent);
  color: #fff;
  font-size: 13px;
}

.admin-template .guide-steps strong,
.admin-template .guide-steps span {
  display: block;
}

.admin-template .guide-steps strong {
  font-size: 13px;
  font-weight: 900;
}

.admin-template .guide-steps span {
  margin-top: 4px;
  color: var(--template-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-template .admin-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 52px;
}

.admin-template .admin-panel {
  border: 1px solid var(--template-line);
  border-top: 0;
  border-radius: 8px;
  background: rgba(255, 253, 249, .96);
  box-shadow: var(--template-shadow);
  padding: 20px;
}

.admin-template .code-manager-panel {
  order: 1;
}

.admin-template #card-import {
  order: 2;
}

.admin-template .order-desk {
  order: 3;
}

.admin-template .log-panel {
  order: 4;
}

.admin-template .notification-panel {
  order: 5;
}

.admin-template .inventory-panel {
  order: 6;
}

.admin-template .exception-panel {
  order: 7;
}

.admin-template #product-config {
  order: 8;
}

.admin-template #admin-users {
  order: 9;
}

.admin-template #admin-audit {
  order: 10;
}

.admin-template .table-head,
.admin-template .section-head {
  align-items: center;
  margin-bottom: 18px;
}

.admin-template .table-head h2,
.admin-template .section-head h2 {
  color: var(--template-text);
  font-size: 18px;
  font-weight: 950;
}

.admin-template .table-head p,
.admin-template .section-head p {
  color: var(--template-muted);
  font-size: 13px;
}

.admin-template .btn.primary,
.admin-template .btn.secondary,
.admin-template .admin-filterbar button,
.admin-template .admin-filterbar .btn {
  border-color: var(--template-line);
  background: #fff;
  color: #2e271f;
  box-shadow: 0 6px 16px rgba(82, 59, 43, .05);
}

.admin-template .btn.primary,
.admin-template .btn.secondary:hover,
.admin-template .admin-filterbar button:hover {
  border-color: #e5b9a7;
  background: #fff5ee;
  color: var(--template-accent);
}

.admin-template .admin-filterbar {
  grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr) minmax(180px, .8fr) auto;
  align-items: end;
  border-color: var(--template-line);
  background: #fffdf9;
  box-shadow: 0 14px 32px rgba(82, 59, 43, .06);
}

.admin-template .admin-form input,
.admin-template .admin-form select,
.admin-template .admin-form textarea,
.admin-template .field input,
.admin-template .field select,
.admin-template .field textarea,
.admin-template .log-filter input,
.admin-template .status-form input,
.admin-template .status-form select,
.admin-template .code-edit-form input,
.admin-template .code-edit-form select {
  border-color: #deceb9;
  background: #fff;
  color: var(--template-text);
}

.admin-template .batch-summary-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  border: 1px solid var(--template-line);
  border-radius: 8px;
  background: #fffdf9;
  padding: 16px;
}

.admin-template .batch-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-template .batch-summary-head h3 {
  margin: 0;
  color: var(--template-text);
  font-size: 16px;
  font-weight: 950;
}

.admin-template .batch-summary-head p {
  margin: 5px 0 0;
  color: var(--template-muted);
  font-size: 12px;
}

.admin-template .code-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.admin-template .code-summary-card {
  border-color: var(--template-line);
  background: #fbf8f3;
}

.admin-template .code-summary-card dl div {
  border-color: #eadfd2;
}

.admin-template .code-summary-card dl div:hover {
  border-color: #e0a68f;
  background: #fff4ed;
}

.admin-template .code-summary-card dd {
  color: #15110d;
}

.admin-template .code-table-wrap {
  border-color: var(--template-line);
  background: #fff;
}

.admin-template .code-table-wrap table {
  min-width: 1120px;
}

.admin-template table th {
  background: #f6f1ea;
  color: #6f6257;
  font-weight: 850;
}

.admin-template table td {
  border-color: #eee3d8;
}

.admin-template .code-actions {
  min-width: 210px;
  grid-template-columns: 84px minmax(90px, 1fr);
  align-items: start;
}

.admin-template .row-edit {
  position: relative;
}

.admin-template .row-edit summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--template-line);
  border-radius: 6px;
  background: #fff;
  color: #473d33;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.admin-template .row-edit summary::-webkit-details-marker {
  display: none;
}

.admin-template .row-edit[open] summary {
  border-color: #e5b9a7;
  background: #fff4ed;
  color: var(--template-accent);
}

.admin-template .row-edit[open] {
  grid-column: 1 / -1;
}

.admin-template .row-edit[open] .code-edit-form,
.admin-template .row-edit[open] .inline-form {
  margin-top: 8px;
}

.admin-template .code-edit-form {
  grid-template-columns: 118px minmax(180px, 1fr) auto;
}

.admin-template .danger-mini {
  border-color: #f1c3bd !important;
  background: #fff7f4 !important;
}

.admin-template .panel-fold-summary {
  min-height: 54px;
  border-radius: 7px;
  padding: 0 2px;
}

.admin-template .panel-fold-summary strong {
  color: var(--template-text);
  font-size: 17px;
}

.admin-template .panel-fold-summary b {
  border-color: var(--template-line);
  background: #fff;
  color: var(--template-accent);
}

.admin-template .log-item,
.admin-template .inventory-item,
.admin-template .exception-item,
.admin-template .empty-state {
  border-color: var(--template-line);
}

.admin-template .live-indicator {
  border-color: #c9e5d9;
  background: #effaf3;
}

.admin-template .alert {
  width: min(1680px, calc(100% - 72px));
  margin: 14px auto 0;
}

.admin-template .drawer-panel {
  border-color: var(--template-line);
}

.admin-template .sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.admin-template .sidebar-collapsed .admin-sidebar {
  padding-left: 10px;
  padding-right: 10px;
}

.admin-template .sidebar-collapsed .admin-side-brand {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-template .sidebar-collapsed .admin-side-brand span:last-child,
.admin-template .sidebar-collapsed .admin-side-search,
.admin-template .sidebar-collapsed .admin-nav-tree span,
.admin-template .sidebar-collapsed .admin-nav-tree summary::after,
.admin-template .sidebar-collapsed .admin-side-footer span,
.admin-template .sidebar-collapsed .admin-side-footer small {
  display: none;
}

.admin-template .sidebar-collapsed .admin-nav-link,
.admin-template .sidebar-collapsed .admin-nav-tree summary {
  justify-content: center;
  padding: 0;
}

.admin-template .sidebar-collapsed .admin-nav-link.sub {
  margin-left: 0;
}

@media (max-width: 1180px) {
  .admin-template .admin-template-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .admin-template .admin-overview,
  .admin-template .admin-grid,
  .admin-template .alert {
    width: min(100% - 32px, 1120px);
  }

  .admin-template .code-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .admin-template .admin-template-shell,
  .admin-template .sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .admin-template .admin-sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--template-line);
  }

  .admin-template .admin-side-footer {
    display: none;
  }

  .admin-template .admin-nav-tree {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .admin-template .admin-nav-tree details {
    flex: 0 0 auto;
    margin: 0;
  }

  .admin-template .admin-nav-link.sub {
    margin-left: 0;
  }

  .admin-template .admin-template-topbar {
    position: static;
    min-height: auto;
    display: grid;
    padding: 14px 16px;
  }

  .admin-template .top-actions {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .admin-template .admin-guide-panel {
    min-height: 260px;
    padding: 24px 18px;
  }

  .admin-template .guide-steps,
  .admin-template .admin-filterbar,
  .admin-template .code-edit-form {
    grid-template-columns: 1fr;
  }

  .admin-template .code-actions {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .admin-template .admin-panel {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  body {
    background: #f4f2ed;
  }

  .topbar {
    width: calc(100% - 28px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px 0 8px;
  }

  .brand-lockup {
    display: none;
  }

  .product-nav {
    grid-column: 1;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .product-pill,
  .lang-selector .btn {
    min-height: 44px;
    padding: 0 15px;
    white-space: nowrap;
  }

  .lang-selector {
    grid-column: 2;
  }

  .official-layout {
    width: calc(100% - 28px);
    margin: 14px auto 46px;
    gap: 18px;
  }

  .action-column {
    border-radius: 18px;
    padding: 0 0 24px;
    box-shadow: var(--shadow-panel);
  }

  .hero-card {
    padding: 24px 24px 26px;
    border-radius: 17px;
  }

  h1 {
    font-size: 21px;
  }

  h2 {
    font-size: 20px;
  }

  .hero-card p,
  .faq-block p {
    font-size: 15px;
  }

  .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .trust-item {
    min-height: 100px;
    gap: 9px;
  }

  .trust-item i {
    font-size: 26px;
  }

  .trust-item strong {
    font-size: 13px;
  }

  .warning-box {
    padding: 19px 20px;
    border-radius: 17px;
  }

  .steps-container {
    margin: 38px 0 30px;
    padding: 0 34px;
  }

  .step-indicator:not(:last-child)::after {
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }

  .step-number {
    width: 38px;
    height: 38px;
  }

  .step-card,
  .query-card {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    border-radius: 17px;
  }

  .card-header {
    padding: 26px 24px 8px;
  }

  .card-body {
    padding: 18px 24px 28px;
  }

  .form-control {
    min-height: 68px;
    font-size: 16px;
  }

  textarea.form-control.is-singleline {
    height: 68px;
    min-height: 68px;
  }

  .btn-primary {
    min-height: 64px;
    font-size: 18px;
  }

  .query-card {
    margin-top: 26px;
  }

  .query-action-row {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .query-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 390px) {
  .official-layout,
  .topbar {
    width: calc(100% - 20px);
  }

  .step-card,
  .query-card {
    width: calc(100% - 28px);
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* Chongaigo activation desk redesign */
.client-body {
  --desk-bg: #f5f7fb;
  --desk-ink: #101827;
  --desk-text: #182234;
  --desk-muted: #667085;
  --desk-line: #dce3ee;
  --desk-line-strong: #bac6d8;
  --desk-surface: #ffffff;
  --desk-blue: #285bd6;
  --desk-blue-strong: #1e46aa;
  --desk-cyan: #00a8a8;
  --desk-amber: #f5a524;
  --desk-danger: #d94235;
  --desk-shadow: 0 24px 70px rgba(15, 23, 42, .11);
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(16, 24, 39, .045), rgba(16, 24, 39, 0) 310px),
    linear-gradient(90deg, rgba(40, 91, 214, .065) 0 1px, transparent 1px 86px),
    linear-gradient(180deg, rgba(40, 91, 214, .05) 0 1px, transparent 1px 86px),
    var(--desk-bg);
  color: var(--desk-text);
}

.client-body .topbar {
  width: min(1240px, calc(100% - 32px));
  min-height: 76px;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, auto) auto;
  gap: 16px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 227, 238, .95);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 44px rgba(15, 23, 42, .07);
  backdrop-filter: blur(18px);
}

.client-body .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border-color: rgba(40, 91, 214, .22);
  background: #edf3ff;
  color: var(--desk-blue);
  box-shadow: none;
}

.client-body .brand-mark i {
  font-size: 21px;
}

.client-body .brand-lockup strong {
  color: var(--desk-ink);
  font-size: 17px;
  font-weight: 850;
}

.client-body .brand-lockup {
  display: inline-flex;
}

.client-body .brand-lockup small {
  color: var(--desk-muted);
  font-size: 12px;
}

.client-body .product-nav {
  justify-content: flex-end;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--desk-line);
  border-radius: 10px;
  background: #f8fafc;
}

.client-body .nav-label {
  align-self: center;
  color: #7a8494;
  padding: 0 7px 0 4px;
  font-size: 12px;
  font-weight: 800;
}

.client-body .product-pill,
.client-body .lang-selector .btn {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #475467;
  padding: 0 12px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 780;
}

.client-body .product-pill:hover,
.client-body .product-pill.active {
  border-color: rgba(40, 91, 214, .18);
  background: #ffffff;
  color: var(--desk-blue);
  transform: none;
  box-shadow: 0 6px 16px rgba(40, 91, 214, .09);
}

.client-body .lang-selector .btn {
  border-color: var(--desk-line);
  background: #fff;
}

.client-body .official-layout {
  width: min(1240px, calc(100% - 32px));
  grid-template-columns: minmax(330px, 420px) minmax(560px, 1fr);
  gap: 18px;
  align-items: start;
  margin: 18px auto 48px;
}

.client-body .info-column {
  gap: 14px;
  position: sticky;
  top: 18px;
}

.client-body .hero-card,
.client-body .warning-box,
.client-body .action-column,
.client-body .step-card,
.client-body .query-card {
  border: 1px solid var(--desk-line);
  border-radius: 12px;
  background: var(--desk-surface);
  box-shadow: 0 16px 46px rgba(15, 23, 42, .07);
}

.client-body .hero-card {
  min-height: 570px;
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 28px;
  background:
    linear-gradient(145deg, #101827 0%, #16233a 56%, #243c66 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.client-body .hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 76px),
    linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 76px);
  opacity: .45;
  pointer-events: none;
}

.client-body .hero-card > * {
  position: relative;
  z-index: 1;
}

.client-body .hero-title-block {
  margin: 0;
  text-align: left;
}

.client-body .service-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #cde5ff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.client-body h1,
.client-body h2 {
  letter-spacing: 0;
}

.client-body .hero-card h1 {
  margin-top: 18px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.16;
}

.client-body .hero-card p {
  max-width: 330px;
  margin: 14px 0 0;
  color: #d3ddec;
  font-size: 15px;
}

.client-body .trust-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.client-body .trust-item {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-areas: "icon title" "icon desc";
  align-items: center;
  gap: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 14px;
}

.client-body .trust-item i {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  font-size: 20px;
}

.client-body .trust-item strong {
  grid-area: title;
  font-size: 14px;
  font-weight: 850;
}

.client-body .trust-item span {
  grid-area: desc;
  color: #cbd6e8;
  font-size: 12px;
  font-weight: 650;
}

.client-body .faq-block {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 0;
  padding-top: 18px;
}

.client-body .faq-block p {
  color: #d8e2f0;
  font-size: 14px;
}

.client-body .faq-block strong {
  color: #fff;
  font-size: 15px;
}

.client-body .faq-block i {
  color: #7dd3fc;
}

.client-body .warning-box {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  align-items: start;
  padding: 18px;
  border-color: rgba(245, 165, 36, .42);
  background: #fffaf0;
  box-shadow: none;
}

.client-body .warning-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff1cc;
  color: #b87400;
  font-size: 20px;
}

.client-body .warning-box strong {
  color: #1f2937;
  font-size: 15px;
}

.client-body .warning-box p {
  margin: 5px 0 0;
  color: #694a14;
  font-size: 13px;
}

.client-body .action-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--desk-shadow);
}

.client-body .flow-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--desk-line);
}

.client-body .flow-head h2 {
  color: var(--desk-ink);
  font-size: 22px;
  font-weight: 900;
}

.client-body .flow-head p {
  margin: 5px 0 0;
  color: var(--desk-muted);
  font-size: 13px;
}

.client-body #flowProduct {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 168, 168, .22);
  border-radius: 999px;
  background: #ecfeff;
  color: #087f83;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.client-body .steps-container {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: start;
  margin: 0;
  padding: 0;
}

.client-body .step-indicator {
  min-height: 86px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  justify-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--desk-line);
  border-radius: 10px;
  background: #f8fafc;
}

.client-body .step-indicator:not(:last-child)::after {
  display: none;
}

.client-body .step-number {
  width: 38px;
  height: 38px;
  border: 1px solid var(--desk-line-strong);
  border-radius: 8px;
  background: #fff;
  color: #667085;
  font-weight: 900;
}

.client-body .step-number.active,
.client-body .step-number.completed {
  border-color: var(--desk-blue);
  background: var(--desk-blue);
  color: #fff;
  box-shadow: none;
}

.client-body .step-label {
  color: #667085;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}

.client-body .step-label.active,
.client-body .step-label.completed {
  color: var(--desk-ink);
}

.client-body .step-card {
  grid-column: 1;
  margin: 0;
  overflow: hidden;
  box-shadow: none;
}

.client-body .step-card:not(.active) {
  display: none;
}

.client-body .card-header {
  padding: 22px 24px 4px;
  border: 0;
  background: #fff;
}

.client-body .card-header h2 {
  color: var(--desk-ink);
  font-size: 21px;
  font-weight: 900;
}

.client-body .card-body {
  padding: 18px 24px 24px;
}

.client-body .form-label {
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.client-body .form-control {
  min-height: 54px;
  border: 1px solid var(--desk-line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--desk-ink);
  font-size: 15px;
  box-shadow: none;
}

.client-body textarea.form-control {
  min-height: 112px;
}

.client-body textarea.form-control.is-singleline {
  height: 54px;
  min-height: 54px;
}

.client-body .form-control:focus {
  border-color: var(--desk-blue);
  box-shadow: 0 0 0 4px rgba(40, 91, 214, .14);
}

.client-body .form-text {
  color: var(--desk-muted);
}

.client-body .form-text i {
  color: var(--desk-amber);
}

.client-body .btn-primary {
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--desk-blue), #1f76e8);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(40, 91, 214, .2);
}

.client-body .btn-primary:hover {
  background: linear-gradient(135deg, var(--desk-blue-strong), var(--desk-blue));
}

.client-body .soft-alert {
  border: 1px solid #b8eadc;
  border-radius: 8px;
  background: #effdf8;
  color: #0f6b55;
}

.client-body .result-alert {
  border-radius: 8px;
  padding: 12px 14px;
}

.client-body .result-alert.success {
  border: 1px solid #b8eadc;
  background: #effdf8;
  color: #0f6b55;
}

.client-body .result-alert.info {
  border: 1px solid #b9d3ff;
  background: #eef5ff;
  color: #2452ad;
}

.client-body .result-alert.warning {
  border: 1px solid #f6d798;
  background: #fff8e6;
  color: #87540f;
}

.client-body .result-alert.error {
  border: 1px solid #f1b9b2;
  background: #fff1ef;
  color: #b2382e;
}

.client-body .status-text {
  margin-top: 12px;
  color: var(--desk-muted);
  text-align: center;
  font-size: 13px;
}

.client-body .query-card {
  grid-column: 1 / -1;
  margin: 0;
  box-shadow: none;
}

.client-body .query-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: #f8fafc;
  color: var(--desk-ink);
  padding: 16px 18px;
  font-weight: 900;
}

.client-body .query-body {
  border-top: 1px solid var(--desk-line);
  padding: 18px;
}

.client-body .query-action-row {
  display: grid;
  grid-template-columns: minmax(140px, 240px) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.client-body .query-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 110px minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f7;
}

.client-body .query-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: var(--desk-ink);
}

.client-body .query-status {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.client-body .query-status.success {
  background: #eafaf4;
  color: #0f6b55;
}

.client-body .query-status.info {
  background: #eef5ff;
  color: #2452ad;
}

.client-body .query-status.warning {
  background: #fff8e6;
  color: #87540f;
}

.client-body .query-status.error {
  background: #fff1ef;
  color: #b2382e;
}

.client-body .site-footer {
  width: min(1240px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 44px;
  border-top: 1px solid var(--desk-line);
  padding-top: 22px;
  color: var(--desk-muted);
}

.client-body .site-footer strong {
  color: var(--desk-ink);
}

@media (max-width: 1080px) {
  .client-body .topbar {
    grid-template-columns: 1fr;
  }

  .client-body .brand-lockup {
    grid-column: 1;
  }

  .client-body .product-nav {
    justify-content: flex-start;
  }

  .client-body .lang-selector {
    justify-self: start;
  }

  .client-body .official-layout {
    grid-template-columns: 1fr;
  }

  .client-body .info-column {
    position: static;
  }

  .client-body .hero-card {
    min-height: auto;
  }

  .client-body .action-column {
    grid-template-columns: 1fr;
  }

  .client-body .steps-container,
  .client-body .step-card,
  .client-body .query-card {
    grid-column: 1;
  }

  .client-body .steps-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .client-body {
    background:
      linear-gradient(180deg, rgba(16, 24, 39, .05), rgba(16, 24, 39, 0) 260px),
      var(--desk-bg);
  }

  .client-body .topbar,
  .client-body .official-layout,
  .client-body .site-footer {
    width: calc(100% - 24px);
  }

  .client-body .topbar {
    margin-top: 12px;
    padding: 12px;
  }

  .client-body .brand-lockup {
    display: inline-flex;
  }

  .client-body .product-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .client-body .nav-label {
    display: none;
  }

  .client-body .product-pill {
    flex: 0 0 auto;
  }

  .client-body .official-layout {
    margin-top: 12px;
    gap: 12px;
  }

  .client-body .hero-card,
  .client-body .action-column,
  .client-body .warning-box,
  .client-body .step-card,
  .client-body .query-card {
    border-radius: 10px;
  }

  .client-body .hero-card {
    padding: 22px;
  }

  .client-body .hero-card h1 {
    font-size: 28px;
  }

  .client-body .trust-item {
    min-height: 68px;
  }

  .client-body .action-column {
    padding: 14px;
    gap: 14px;
  }

  .client-body .flow-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-body .steps-container {
    grid-template-columns: 1fr;
  }

  .client-body .step-indicator {
    min-height: 58px;
  }

  .client-body .card-header {
    padding: 20px 18px 0;
  }

  .client-body .card-body,
  .client-body .query-body {
    padding: 16px 18px 20px;
  }

  .client-body .query-action-row,
  .client-body .query-row {
    grid-template-columns: 1fr;
  }

  .client-body .site-footer {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 30px;
  }
}

/* Admin console */
.admin-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 248, 238, .96), rgba(244, 242, 237, .52) 32rem),
    linear-gradient(180deg, #f7f5f1 0%, #efede8 100%);
  color: #25211d;
  font-size: 14px;
}

.admin-body a {
  color: inherit;
  text-decoration: none;
}

.admin-body svg {
  display: block;
}

.admin-body .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.admin-body .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff7e8;
  border-color: #ecd9bd;
  color: var(--primary);
}

.admin-body .brand-mark svg {
  width: 23px;
  height: 23px;
}

.admin-body .brand-mark svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.admin-body .brand-mark svg path:not(:first-child) {
  fill: none;
  stroke: #fff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-body .brand strong,
.admin-body .brand small {
  display: block;
  min-width: 0;
}

.admin-body .brand strong {
  color: #211d19;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
}

.admin-body .brand small {
  margin-top: 3px;
  color: #756d64;
  font-size: 12px;
  font-weight: 650;
}

.admin-login-body {
  display: grid;
  place-items: center;
  padding: 32px;
}

.login-shell {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 430px);
  gap: 18px;
  align-items: stretch;
}

.login-intro,
.login-box,
.admin-overview,
.admin-panel {
  border: 1px solid rgba(220, 202, 181, .92);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 52px rgba(52, 43, 34, .09);
}

.login-intro {
  min-height: 510px;
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 34px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 247, 232, .96), rgba(255, 255, 255, .92) 52%),
    #fff;
}

.login-copy {
  max-width: 520px;
}

.admin-eyebrow {
  margin: 0 0 11px;
  color: #a45f4d;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-copy h1,
.overview-copy h1 {
  margin: 0;
  color: #221e1a;
  font-size: 32px;
  font-weight: 880;
  line-height: 1.2;
}

.login-copy p:not(.admin-eyebrow),
.overview-copy p:not(.admin-eyebrow),
.login-form-head p,
.section-head p,
.table-head p {
  color: #726a60;
}

.login-copy p:not(.admin-eyebrow),
.overview-copy p:not(.admin-eyebrow) {
  margin: 14px 0 0;
  font-size: 15px;
}

.login-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-feature-grid span {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
}

.login-feature-grid strong {
  font-size: 14px;
  font-weight: 850;
}

.login-feature-grid small {
  color: #857d74;
  font-size: 12px;
}

.login-box {
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 34px;
  border-radius: 14px;
}

.login-form-head h2 {
  margin: 0;
  color: #221e1a;
  font-size: 24px;
  font-weight: 850;
}

.login-form-head p {
  margin: 8px 0 0;
}

.admin-shell {
  width: min(1460px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

.admin-topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(230, 218, 203, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 36px rgba(50, 42, 34, .06);
  backdrop-filter: blur(16px);
}

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

.admin-body .btn,
.admin-body .icon-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dfd0bf;
  border-radius: 8px;
  background: #fff;
  color: #3f3932;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.admin-body .btn svg,
.admin-body .icon-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.admin-body .btn svg path,
.admin-body .icon-link svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-body .btn:hover,
.admin-body .icon-link:hover {
  transform: translateY(-1px);
  border-color: #cfb99f;
  box-shadow: 0 10px 24px rgba(44, 36, 28, .08);
}

.admin-body .btn.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.admin-body .btn.primary:hover {
  border-color: var(--primary-strong);
  background: var(--primary-strong);
}

.admin-body .btn.secondary {
  background: #fffaf3;
  color: #6c4b3c;
}

.admin-body .btn.full {
  width: 100%;
}

.admin-body .btn.small {
  min-height: 38px;
  padding: 0 13px;
  font-size: 13px;
}

.admin-body .danger-link {
  color: #b7453b;
}

.admin-body .alert {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 760;
}

.admin-body .alert-ok {
  border: 1px solid #bfe5d3;
  background: #edf9f3;
  color: #176447;
}

.admin-body .alert-error {
  border: 1px solid #f1beb8;
  background: #fff0ee;
  color: #ad372e;
}

.admin-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 249, 239, .95), rgba(255, 255, 255, .94) 46%),
    #fff;
}

.overview-copy {
  max-width: 690px;
}

.overview-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.overview-tags span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #eadfce;
  border-radius: 999px;
  background: #fffaf3;
  color: #6d6256;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 760;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
}

.metric-card span {
  color: #766d63;
  font-size: 13px;
  font-weight: 760;
}

.metric-card strong {
  color: #211d19;
  font-size: 30px;
  font-weight: 880;
  line-height: 1;
}

.metric-card small {
  color: #8d8479;
  font-size: 12px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(380px, .9fr) minmax(440px, 1fr);
  gap: 18px;
}

.admin-panel {
  min-width: 0;
  padding: 22px;
  border-radius: 12px;
}

.admin-panel.wide {
  grid-column: 1 / -1;
}

.section-head,
.table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2,
.table-head h2 {
  margin: 0;
  color: #221e1a;
  font-size: 20px;
  font-weight: 850;
}

.section-head p,
.table-head p {
  margin: 6px 0 0;
  font-size: 13px;
}

.admin-form {
  display: grid;
  gap: 15px;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-body .field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-body .field span,
.admin-body .checkline {
  color: #3d3731;
  font-size: 13px;
  font-weight: 820;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  width: 100%;
  border: 1px solid #ded2c4;
  border-radius: 8px;
  background: #fff;
  color: #28231f;
  outline: none;
  box-shadow: none;
}

.admin-body input,
.admin-body select {
  min-height: 46px;
  padding: 0 13px;
}

.admin-body textarea {
  min-height: 146px;
  padding: 13px;
  resize: vertical;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(207, 118, 95, .15);
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.checkline input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  accent-color: var(--primary);
}

.export-field {
  margin-top: 16px;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.inline-form {
  margin: 0;
}

.table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: #fff;
}

.admin-body table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-body th,
.admin-body td {
  padding: 14px 15px;
  border-bottom: 1px solid #f0e8de;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-body th {
  background: #fffaf3;
  color: #766c60;
  font-size: 12px;
  font-weight: 850;
}

.admin-body td {
  color: #352f2a;
  font-size: 13px;
}

.admin-body tbody tr:last-child td {
  border-bottom: 0;
}

.admin-body tbody tr:hover td {
  background: #fffdf8;
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.clipped {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-row {
  color: #8c8378;
  text-align: center;
}

.status-dot {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5d8c9;
  border-radius: 999px;
  background: #fbf7f1;
  color: #6e6257;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 820;
}

.status-unused,
.status-pending,
.status-ready,
.status-confirmed {
  border-color: #e9d2a2;
  background: #fff8e8;
  color: #8a5d14;
}

.status-processing {
  border-color: #b8e1ed;
  background: #eefaff;
  color: #1d6f86;
}

.status-success,
.status-used {
  border-color: #bce2cf;
  background: #effaf4;
  color: #176447;
}

.status-failed,
.status-disabled,
.status-not_found {
  border-color: #f0c2bc;
  background: #fff1ef;
  color: #ad3c32;
}

.status-manual {
  border-color: #d9c9f1;
  background: #f8f3ff;
  color: #65419a;
}

@media (max-width: 1080px) {
  .login-shell,
  .admin-overview,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .login-intro {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .admin-login-body {
    padding: 18px;
  }

  .login-shell {
    gap: 14px;
  }

  .login-intro,
  .login-box,
  .admin-overview,
  .admin-panel {
    border-radius: 12px;
  }

  .login-intro,
  .login-box {
    padding: 22px;
  }

  .login-copy h1,
  .overview-copy h1 {
    font-size: 26px;
  }

  .login-feature-grid,
  .overview-metrics,
  .two-col {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    width: calc(100% - 20px);
    padding-top: 10px;
  }

  .admin-topbar,
  .section-head,
  .table-head {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions,
  .table-actions {
    justify-content: stretch;
  }

  .top-actions .icon-link,
  .table-actions .btn,
  .table-actions .inline-form,
  .table-actions .inline-form .btn {
    width: 100%;
  }

  .admin-overview,
  .admin-panel {
    padding: 20px;
  }

  .admin-body table {
    min-width: 760px;
  }
}

/* Chongaigo admin desk variant */
.admin-body {
  --admin-bg: #f5f7fb;
  --admin-ink: #101827;
  --admin-text: #182234;
  --admin-muted: #667085;
  --admin-line: #dce3ee;
  --admin-blue: #285bd6;
  --admin-blue-strong: #1e46aa;
  --admin-cyan: #00a8a8;
  background:
    linear-gradient(180deg, rgba(16, 24, 39, .05), rgba(16, 24, 39, 0) 340px),
    linear-gradient(90deg, rgba(40, 91, 214, .055) 0 1px, transparent 1px 86px),
    linear-gradient(180deg, rgba(40, 91, 214, .045) 0 1px, transparent 1px 86px),
    var(--admin-bg);
  color: var(--admin-text);
}

.admin-body .brand-mark {
  border-color: rgba(40, 91, 214, .22);
  background: #edf3ff;
  color: var(--admin-blue);
  box-shadow: none;
}

.admin-body .login-intro,
.admin-body .login-box,
.admin-body .admin-overview,
.admin-body .admin-panel,
.admin-body .admin-topbar {
  border-color: var(--admin-line);
  box-shadow: 0 18px 52px rgba(15, 23, 42, .08);
}

.admin-body .login-intro {
  background:
    linear-gradient(145deg, #101827 0%, #17243d 58%, #243f6d 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.admin-body .login-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 76px),
    linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 76px);
  opacity: .45;
}

.admin-body .login-intro > * {
  position: relative;
  z-index: 1;
}

.admin-body .login-intro .brand strong,
.admin-body .login-copy h1,
.admin-body .login-copy p:not(.admin-eyebrow) {
  color: #fff;
}

.admin-body .login-intro .brand small,
.admin-body .login-feature-grid small {
  color: #cbd6e8;
}

.admin-body .login-copy p:not(.admin-eyebrow) {
  color: #d3ddec;
}

.admin-body .admin-eyebrow {
  color: #2f6bff;
  letter-spacing: 0;
}

.admin-body .login-intro .admin-eyebrow {
  color: #7dd3fc;
}

.admin-body .login-feature-grid span {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}

.admin-body .admin-topbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
}

.admin-body .admin-overview {
  background: #fff;
}

.admin-body .overview-tags span,
.admin-body .metric-card,
.admin-body .table-wrap,
.admin-body th,
.admin-body .btn.secondary {
  border-color: var(--admin-line);
  background: #f8fafc;
}

.admin-body .overview-copy h1,
.admin-body .metric-card strong,
.admin-body .section-head h2,
.admin-body .table-head h2,
.admin-body .login-form-head h2,
.admin-body .brand strong {
  color: var(--admin-ink);
}

.admin-body .overview-copy p:not(.admin-eyebrow),
.admin-body .login-form-head p,
.admin-body .section-head p,
.admin-body .table-head p,
.admin-body .metric-card span,
.admin-body .metric-card small,
.admin-body .brand small {
  color: var(--admin-muted);
}

.admin-body .overview-tags span {
  color: #2452ad;
}

.admin-body .metric-card {
  background: #fff;
}

.admin-body .btn.primary {
  border-color: var(--admin-blue);
  background: var(--admin-blue);
  color: #fff;
  box-shadow: 0 12px 26px rgba(40, 91, 214, .18);
}

.admin-body .btn.primary:hover {
  border-color: var(--admin-blue-strong);
  background: var(--admin-blue-strong);
}

.admin-body .btn.secondary,
.admin-body .icon-link {
  color: #344054;
}

.admin-body .btn.secondary:hover,
.admin-body .icon-link:hover {
  border-color: rgba(40, 91, 214, .35);
  color: var(--admin-blue);
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 4px rgba(40, 91, 214, .13);
}

.admin-body th {
  color: #667085;
}

.admin-body tbody tr:hover td {
  background: #f8fbff;
}

.admin-body .status-unused,
.admin-body .status-pending,
.admin-body .status-ready,
.admin-body .status-confirmed {
  border-color: #b9d3ff;
  background: #eef5ff;
  color: #2452ad;
}

.admin-body .status-processing {
  border-color: #a8ecec;
  background: #ecfeff;
  color: #087f83;
}

/* Official service portal v3 */
.portal-body {
  --portal-bg: #f6f8fc;
  --portal-panel: #ffffff;
  --portal-ink: #111827;
  --portal-text: #243145;
  --portal-muted: #667085;
  --portal-line: #d9e2ef;
  --portal-blue: #1456d9;
  --portal-blue-strong: #0f43ad;
  --portal-blue-soft: #eef5ff;
  --portal-green: #0f9275;
  --portal-amber: #b97708;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #eef4ff 0, rgba(238, 244, 255, 0) 260px),
    var(--portal-bg);
  color: var(--portal-text);
}

.portal-body .topbar {
  width: 100%;
  min-height: 78px;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  margin: 0;
  padding: 14px max(24px, calc((100vw - 1240px) / 2));
  border: 0;
  border-bottom: 1px solid var(--portal-line);
  border-radius: 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
}

.portal-body .brand-lockup {
  display: inline-flex;
}

.portal-body .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border-color: #c8d8f6;
  background: #f3f7ff;
  color: var(--portal-blue);
  box-shadow: none;
}

.portal-body .brand-lockup strong {
  color: var(--portal-ink);
  font-size: 18px;
  font-weight: 900;
}

.portal-body .brand-lockup small {
  color: var(--portal-muted);
}

.portal-body .product-nav {
  border-color: var(--portal-line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 4px;
  box-shadow: none;
}

.portal-body .product-pill,
.portal-body .lang-selector .btn {
  border-radius: 6px;
  color: #475467;
  font-weight: 850;
}

.portal-body .product-pill.active,
.portal-body .product-pill:hover {
  border-color: #bfd2f5;
  background: #fff;
  color: var(--portal-blue);
  box-shadow: 0 5px 14px rgba(20, 86, 217, .08);
}

.portal-body .lang-selector .btn {
  border-color: var(--portal-line);
  background: #fff;
}

.portal-body .official-layout {
  width: min(1240px, calc(100% - 36px));
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 20px;
  margin: 24px auto 48px;
}

.portal-body .info-column {
  position: static;
  gap: 14px;
}

.portal-body .hero-card,
.portal-body .warning-box,
.portal-body .action-column,
.portal-body .step-card,
.portal-body .query-card {
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background: var(--portal-panel);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .06);
}

.portal-body .hero-card {
  min-height: auto;
  display: block;
  padding: 24px;
  color: var(--portal-text);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-top: 4px solid var(--portal-blue);
  overflow: visible;
}

.portal-body .hero-card::before {
  display: none;
}

.portal-body .hero-title-block {
  text-align: left;
}

.portal-body .service-chip {
  min-height: 28px;
  border: 1px solid #bfd2f5;
  border-radius: 6px;
  background: var(--portal-blue-soft);
  color: var(--portal-blue);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
}

.portal-body .hero-card h1 {
  margin-top: 16px;
  color: var(--portal-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

.portal-body .hero-card p {
  max-width: none;
  margin-top: 10px;
  color: var(--portal-muted);
  font-size: 14px;
}

.portal-body .trust-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 20px;
}

.portal-body .trust-item {
  min-height: 64px;
  grid-template-columns: 38px 1fr;
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background: #fff;
  color: var(--portal-text);
  padding: 12px;
}

.portal-body .trust-item i {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--portal-blue-soft);
  color: var(--portal-blue);
}

.portal-body .trust-item strong {
  color: var(--portal-ink);
}

.portal-body .trust-item span {
  color: var(--portal-muted);
}

.portal-body .faq-block {
  border-top: 1px solid var(--portal-line);
  margin-top: 18px;
  padding-top: 16px;
}

.portal-body .faq-block p {
  color: var(--portal-muted);
  font-size: 13px;
}

.portal-body .faq-block strong {
  color: var(--portal-ink);
}

.portal-body .faq-block i {
  color: var(--portal-blue);
}

.portal-body .warning-box {
  grid-template-columns: 40px 1fr;
  padding: 16px;
  border-color: #f0d9a7;
  background: #fffaf0;
  box-shadow: none;
}

.portal-body .warning-icon {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: #fff2cc;
  color: var(--portal-amber);
}

.portal-body .action-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 24px;
  border-top: 4px solid var(--portal-blue);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .07);
}

.portal-body .flow-head {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--portal-line);
}

.portal-body .flow-head h2 {
  color: var(--portal-ink);
  font-size: 24px;
}

.portal-body .flow-head p {
  color: var(--portal-muted);
}

.portal-body #flowProduct {
  border-color: #b7e7dd;
  border-radius: 6px;
  background: #ecfdf7;
  color: var(--portal-green);
}

.portal-body .steps-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-body .step-indicator {
  min-height: 76px;
  grid-template-columns: 42px 1fr;
  border-color: var(--portal-line);
  border-radius: 8px;
  background: #f8fbff;
}

.portal-body .step-number {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  border-color: #c7d4e7;
}

.portal-body .step-number.active,
.portal-body .step-number.completed {
  border-color: var(--portal-blue);
  background: var(--portal-blue);
}

.portal-body .step-label {
  color: #526174;
  font-weight: 850;
  white-space: normal;
}

.portal-body .step-label.active,
.portal-body .step-label.completed {
  color: var(--portal-ink);
}

.portal-body .step-card,
.portal-body .query-card {
  border-radius: 8px;
  box-shadow: none;
}

.portal-body .card-header {
  padding: 22px 24px 4px;
}

.portal-body .card-header h2 {
  color: var(--portal-ink);
  font-size: 22px;
}

.portal-body .form-label {
  color: #344054;
}

.portal-body .form-control {
  border-color: #bfccdd;
  border-radius: 7px;
}

.portal-body .form-control:focus {
  border-color: var(--portal-blue);
  box-shadow: 0 0 0 4px rgba(20, 86, 217, .12);
}

.portal-body .btn-primary {
  border-radius: 7px;
  background: var(--portal-blue);
  box-shadow: none;
}

.portal-body .btn-primary:hover {
  background: var(--portal-blue-strong);
}

.portal-body .query-toggle {
  background: #f8fbff;
  color: var(--portal-ink);
}

.portal-body .site-footer {
  width: min(1240px, calc(100% - 36px));
  border-top: 1px solid var(--portal-line);
  color: var(--portal-muted);
}

.portal-body .site-footer strong {
  color: var(--portal-ink);
}

@media (max-width: 1080px) {
  .portal-body .topbar {
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
  }

  .portal-body .official-layout {
    grid-template-columns: 1fr;
    width: min(780px, calc(100% - 28px));
  }
}

@media (max-width: 720px) {
  .portal-body .topbar,
  .portal-body .official-layout,
  .portal-body .site-footer {
    width: 100%;
  }

  .portal-body .topbar {
    padding: 12px;
  }

  .portal-body .official-layout {
    padding: 0 12px;
  }

  .portal-body .hero-card,
  .portal-body .warning-box,
  .portal-body .action-column,
  .portal-body .step-card,
  .portal-body .query-card {
    border-radius: 8px;
  }

  .portal-body .hero-card,
  .portal-body .action-column {
    padding: 18px;
  }

  .portal-body .hero-card h1 {
    font-size: 26px;
  }

  .portal-body .steps-container {
    grid-template-columns: 1fr;
  }

  .portal-body .step-indicator {
    min-height: 58px;
  }

  .portal-body .site-footer {
    padding: 18px 12px 0;
  }
}

.portal-admin.admin-body {
  --official-bg: #f6f8fc;
  --official-line: #d9e2ef;
  --official-blue: #1456d9;
  background:
    linear-gradient(180deg, #eef4ff 0, rgba(238,244,255,0) 300px),
    var(--official-bg);
}

.portal-admin .login-intro,
.portal-admin .login-box,
.portal-admin .admin-overview,
.portal-admin .admin-panel,
.portal-admin .admin-topbar {
  border-color: var(--official-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .06);
}

.portal-admin .login-intro {
  color: #243145;
  border-top: 4px solid var(--official-blue);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.portal-admin .login-intro::before {
  display: none;
}

.portal-admin .login-intro .brand strong,
.portal-admin .login-copy h1,
.portal-admin .login-copy p:not(.admin-eyebrow) {
  color: #111827;
}

.portal-admin .login-intro .brand small,
.portal-admin .login-feature-grid small,
.portal-admin .login-copy p:not(.admin-eyebrow) {
  color: #667085;
}

.portal-admin .login-feature-grid span {
  border-color: var(--official-line);
  background: #f8fbff;
}

.portal-admin .admin-topbar,
.portal-admin .admin-overview,
.portal-admin .admin-panel {
  background: #fff;
}

.portal-admin .admin-overview,
.portal-admin .admin-panel {
  border-top: 3px solid var(--official-blue);
}

.admin-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(140px, .75fr)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.filter-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.live-indicator {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #bce2cf;
  border-radius: 999px;
  background: #effaf4;
  color: #176447;
  font-size: 12px;
  font-weight: 850;
}

.live-indicator i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18a058;
  box-shadow: 0 0 0 4px rgba(24, 160, 88, .12);
}

.live-indicator[data-tone="loading"] {
  border-color: #b8e1ed;
  background: #eefaff;
  color: #1d6f86;
}

.live-indicator[data-tone="loading"] i {
  background: #1d9db4;
}

.live-indicator[data-tone="error"] {
  border-color: #f0c2bc;
  background: #fff1ef;
  color: #ad3c32;
}

.live-indicator[data-tone="error"] i {
  background: #d92d20;
}

.sync-runtime {
  min-height: 38px;
  display: inline-grid;
  align-content: center;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.sync-runtime strong,
.sync-runtime small {
  display: block;
}

.sync-runtime strong {
  color: #101827;
  font-size: 12px;
  font-weight: 850;
}

.sync-runtime small {
  color: #667085;
  font-size: 11px;
}

.sync-runtime.is-ok {
  border-color: #bce2cf;
  background: #effaf4;
}

.sync-runtime.is-error {
  border-color: #f0c2bc;
  background: #fff1ef;
}

.sync-runtime.is-pending {
  border-color: #e9d2a2;
  background: #fff8e8;
}

.admin-body .btn.tiny {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
}

.order-table-wrap table.order-table {
  min-width: 1220px;
}

.order-table td strong,
.order-table td small,
.upstream-cell span,
.upstream-cell small {
  display: block;
}

.order-table td small,
.upstream-cell small {
  max-width: 260px;
  margin-top: 5px;
  color: #667085;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions {
  display: grid;
  gap: 8px;
  min-width: 360px;
}

.status-form {
  display: grid;
  grid-template-columns: 96px minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.status-form select,
.status-form input {
  min-height: 34px;
  border-radius: 6px;
  font-size: 12px;
}

.inventory-list,
.exception-list {
  display: grid;
  gap: 12px;
}

.inventory-item,
.exception-item,
.empty-state {
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.inventory-item {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.inventory-item.is-low {
  border-color: #f0c2bc;
  background: #fff7f5;
}

.inventory-item strong,
.exception-main strong {
  display: block;
  color: #101827;
  font-size: 15px;
  font-weight: 850;
}

.inventory-item span,
.exception-main span,
.exception-main small {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.inventory-item dl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.inventory-item dl div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e5ebf4;
  border-radius: 6px;
  background: #fff;
}

.inventory-item dt,
.inventory-item dd {
  margin: 0;
}

.inventory-item dt {
  color: #667085;
  font-size: 12px;
}

.inventory-item dd {
  margin-top: 4px;
  color: #101827;
  font-size: 20px;
  font-weight: 850;
}

.exception-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.exception-main {
  min-width: 0;
}

.exception-main small {
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exception-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.log-filter {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.log-filter input {
  width: 260px;
  min-height: 38px;
}

.log-list {
  display: grid;
  gap: 10px;
}

.log-item {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #d9e2ef;
  border-left: 4px solid #8aa7d8;
  border-radius: 8px;
  background: #fff;
}

.log-item.log-error {
  border-left-color: #e4584f;
}

.log-item.log-warning {
  border-left-color: #d99a22;
}

.log-item.log-info {
  border-left-color: #285bd6;
}

.log-time strong,
.log-time span,
.log-title strong,
.log-title span,
.log-body p,
.log-body code {
  display: block;
}

.log-time strong {
  color: #101827;
  font-size: 13px;
  font-weight: 850;
}

.log-time span {
  margin-top: 6px;
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.log-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.log-title strong {
  color: #101827;
  font-size: 13px;
}

.log-title span,
.log-body p {
  color: #475467;
  font-size: 13px;
}

.log-body p {
  margin: 7px 0 0;
}

.log-body code {
  margin-top: 8px;
  padding: 9px;
  border-radius: 6px;
  background: #f5f7fb;
  color: #344054;
  font-size: 12px;
  white-space: normal;
  word-break: break-all;
}

.empty-state {
  padding: 18px;
  color: #667085;
  text-align: center;
}

.admin-user-chip {
  min-height: 38px;
  display: inline-grid;
  align-content: center;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.admin-user-chip strong,
.admin-user-chip small {
  display: block;
}

.admin-user-chip strong {
  color: #101827;
  font-size: 12px;
  font-weight: 900;
}

.admin-user-chip small,
.muted-text {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.notification-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.notification-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.notification-item.is-error {
  border-color: #f0c2bc;
  background: #fff7f5;
}

.notification-item.is-warning {
  border-color: #f0d9a7;
  background: #fffaf0;
}

.notification-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: #1456d9;
  font-weight: 900;
}

.notification-item.is-error .notification-icon {
  background: #fff1ef;
  color: #ad3c32;
}

.notification-item.is-warning .notification-icon {
  background: #fff4d8;
  color: #9a6700;
}

.notification-main {
  min-width: 0;
}

.notification-main strong,
.notification-main span,
.notification-main small {
  display: block;
}

.notification-main strong {
  color: #101827;
  font-size: 14px;
  font-weight: 900;
}

.notification-main span,
.notification-main small {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-table-wrap table {
  min-width: 980px;
}

.compact-table-wrap td strong,
.compact-table-wrap td small {
  display: block;
}

.compact-table-wrap td small {
  margin-top: 4px;
  color: #667085;
  font-size: 11px;
}

.admin-user-form {
  margin-bottom: 16px;
}

.admin-user-table table {
  min-width: 760px;
}

body.drawer-open {
  overflow: hidden;
}

.order-drawer[hidden] {
  display: none;
}

.order-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(620px, 100%);
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  box-shadow: -18px 0 44px rgba(16, 24, 40, .18);
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border-bottom: 1px solid #d9e2ef;
}

.drawer-head h2,
.drawer-log-list h3 {
  margin: 0;
  color: #101827;
  font-size: 20px;
  font-weight: 900;
}

.drawer-content {
  overflow: auto;
  padding: 22px;
}

.drawer-summary {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.drawer-summary strong,
.drawer-summary small {
  display: block;
}

.drawer-summary small {
  color: #667085;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.detail-grid div,
.drawer-message,
.drawer-log-item {
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
}

.detail-grid div {
  min-width: 0;
  padding: 12px;
}

.detail-grid dt,
.detail-grid dd {
  margin: 0;
}

.detail-grid dt {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.detail-grid dd {
  margin-top: 5px;
  color: #101827;
  font-size: 13px;
}

.breakable {
  white-space: normal;
  word-break: break-all;
}

.drawer-message {
  padding: 14px;
  background: #f8fbff;
}

.drawer-message strong,
.drawer-message p {
  display: block;
  margin: 0;
}

.drawer-message strong {
  color: #101827;
  font-weight: 900;
}

.drawer-message p {
  margin-top: 6px;
  color: #475467;
  word-break: break-word;
}

.drawer-log-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.drawer-log-item {
  padding: 12px;
  border-left: 4px solid #285bd6;
}

.drawer-log-item.log-error {
  border-left-color: #e4584f;
}

.drawer-log-item.log-warning {
  border-left-color: #d99a22;
}

.drawer-log-item strong,
.drawer-log-item span,
.drawer-log-item code {
  display: block;
}

.drawer-log-item strong {
  color: #101827;
  font-size: 12px;
}

.drawer-log-item span {
  margin-top: 5px;
  color: #475467;
  font-size: 13px;
}

.drawer-log-item code {
  margin-top: 7px;
  padding: 8px;
  border-radius: 6px;
  background: #f5f7fb;
  color: #344054;
  font-size: 12px;
  white-space: normal;
  word-break: break-all;
}

.panel-fold {
  display: grid;
  gap: 16px;
}

.panel-fold-summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
  cursor: pointer;
  list-style: none;
}

.panel-fold-summary::-webkit-details-marker {
  display: none;
}

.panel-fold-summary span,
.panel-fold-summary strong,
.panel-fold-summary small {
  display: block;
}

.panel-fold-summary strong {
  color: #101827;
  font-size: 18px;
  font-weight: 900;
}

.panel-fold-summary small {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.panel-fold-summary b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e2ef;
  border-radius: 999px;
  background: #f8fbff;
  color: #1456d9;
  padding: 0 12px;
  font-size: 12px;
}

.panel-fold[open] .panel-fold-summary b {
  color: #667085;
}

.panel-fold[open] .panel-fold-summary b::before {
  content: "收起";
}

.panel-fold[open] .panel-fold-summary b {
  font-size: 0;
}

.panel-fold[open] .panel-fold-summary b::before {
  font-size: 12px;
}

.code-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.code-summary-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #f8fbff;
}

.code-summary-card strong,
.code-summary-card span {
  display: block;
}

.code-summary-card strong {
  color: #101827;
  font-weight: 900;
}

.code-summary-card span {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
}

.code-summary-card dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.code-summary-card dl div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e5ebf4;
  border-radius: 6px;
  background: #fff;
}

.code-summary-card dt,
.code-summary-card dd {
  margin: 0;
}

.code-summary-card a {
  color: inherit;
  text-decoration: none;
}

.code-summary-card dl div:hover {
  border-color: #b7c6dc;
  background: #eef5ff;
}

.code-summary-card dt {
  color: #667085;
  font-size: 11px;
  font-weight: 850;
}

.code-summary-card dd {
  margin-top: 4px;
  color: #101827;
  font-size: 18px;
  font-weight: 900;
}

.code-filterbar {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .6fr) minmax(150px, .6fr) auto;
}

.code-table-wrap table {
  min-width: 1320px;
}

.code-table-wrap td strong,
.code-table-wrap td small,
.code-table-wrap td span {
  display: block;
}

.code-table-wrap td small {
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}

.code-actions {
  display: grid;
  gap: 8px;
  min-width: 500px;
}

.code-edit-form {
  display: grid;
  grid-template-columns: 110px minmax(180px, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.code-edit-form select,
.code-edit-form input {
  min-height: 34px;
  border-radius: 6px;
  font-size: 12px;
}

.danger-mini {
  color: #ad3c32 !important;
}

.log-item {
  display: block;
  padding: 0;
  overflow: hidden;
}

.log-item summary {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.log-item summary::-webkit-details-marker {
  display: none;
}

.log-time strong,
.log-time em,
.log-title strong,
.log-title em,
.log-title b {
  display: block;
  font-style: normal;
}

.log-title b {
  max-width: 100%;
  margin-top: 6px;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-item[open] .log-title b {
  white-space: normal;
}

.log-item .log-body {
  padding: 0 14px 14px 200px;
}

@media (max-width: 1180px) {
  .admin-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .code-summary-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 720px) {
  .admin-filterbar,
  .status-form,
  .code-filterbar,
  .code-edit-form,
  .inventory-item dl,
  .code-summary-card dl,
  .notification-list,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .filter-actions,
  .filter-actions .btn {
    width: 100%;
  }

  .exception-item {
    display: grid;
  }

  .notification-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .notification-item .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .drawer-panel {
    width: 100%;
  }

  .exception-actions {
    justify-content: flex-start;
  }

  .log-filter,
  .log-filter input,
  .log-filter .btn,
  .log-item {
    width: 100%;
  }

  .log-filter,
  .log-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  .order-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .order-table-wrap table.order-table,
  .order-table thead,
  .order-table tbody,
  .order-table tr,
  .order-table td {
    display: block;
    min-width: 0;
  }

  .order-table thead {
    display: none;
  }

  .order-table tbody {
    display: grid;
    gap: 12px;
  }

  .order-table tr {
    padding: 14px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #fff;
  }

  .admin-body .order-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    border: 0;
    white-space: normal;
  }

  .admin-body .order-table td::before {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
  }

  .admin-body .order-table td:nth-child(1)::before { content: "订单"; }
  .admin-body .order-table td:nth-child(2)::before { content: "产品"; }
  .admin-body .order-table td:nth-child(3)::before { content: "卡密"; }
  .admin-body .order-table td:nth-child(4)::before { content: "账号"; }
  .admin-body .order-table td:nth-child(5)::before { content: "状态"; }
  .admin-body .order-table td:nth-child(6)::before { content: "上游"; }
  .admin-body .order-table td:nth-child(7)::before { content: "处理"; }

  .order-table .row-actions {
    min-width: 0;
  }

  .code-actions {
    min-width: 0;
  }

  .log-item summary,
  .log-item .log-body {
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .order-table .clipped,
  .order-table td small,
  .upstream-cell small {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
  }
}

/* Late overrides for the official admin template. Keep this block after legacy admin rules. */
.admin-template.admin-body {
  background:
    radial-gradient(circle at 78% 0%, rgba(215, 119, 89, .13), transparent 320px),
    linear-gradient(180deg, #faf7f2 0%, #f6f3ee 260px, #f8f6f1 100%);
}

.admin-template .admin-template-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  grid-template-columns: 260px minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

.admin-template .admin-template-topbar {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--template-line);
  border-radius: 0;
  background: rgba(255, 253, 249, .9);
  box-shadow: none;
}

.admin-template .admin-guide-panel,
.admin-template .admin-panel {
  border-color: var(--template-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, .96);
  box-shadow: var(--template-shadow);
}

.admin-template .admin-guide-panel {
  border: 1px dashed #e0a68f;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 119, 89, .11), transparent 320px),
    rgba(255, 253, 249, .72);
  box-shadow: none;
}

.admin-template .code-manager-panel {
  order: 1;
}

.admin-template #card-import {
  order: 2;
}

.admin-template .order-desk {
  order: 3;
}

.admin-template .log-panel {
  order: 4;
}

.admin-template .notification-panel {
  order: 5;
}

.admin-template .inventory-panel {
  order: 6;
}

.admin-template .exception-panel {
  order: 7;
}

.admin-template #product-config {
  order: 8;
}

.admin-template #admin-users {
  order: 9;
}

.admin-template #admin-audit {
  order: 10;
}

.admin-template .admin-filterbar {
  border-color: var(--template-line);
  background: #fffdf9;
}

.admin-template .admin-grid > .admin-panel {
  order: 20;
}

.admin-template .code-manager-panel {
  order: 1;
}

.admin-template #card-import {
  order: 2;
}

.admin-template .order-desk {
  order: 3;
}

.admin-template .log-panel {
  order: 4;
}

.admin-template .notification-panel {
  order: 5;
}

.admin-template .inventory-panel {
  order: 6;
}

.admin-template .exception-panel {
  order: 7;
}

.admin-template #product-config {
  order: 8;
}

.admin-template #admin-users {
  order: 9;
}

.admin-template #admin-audit {
  order: 10;
}

.admin-template #import-batches {
  order: 11;
}

.admin-template .code-table-wrap,
.admin-template .table-wrap {
  border-color: var(--template-line);
}

.admin-template .sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

@media (max-width: 820px) {
  .admin-template .admin-template-shell,
  .admin-template .sidebar-collapsed {
    grid-template-columns: 1fr;
  }
}