:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-subtle: #f8fafb;
  --ink: #17191c;
  --muted: #6f7782;
  --line: #dfe3e7;
  --line-strong: #cdd3d8;
  --black: #111315;
  --green: #16a064;
  --green-soft: #eaf7f1;
  --red: #e24949;
  --red-soft: #fff0f0;
  --blue: #2878d0;
  --blue-soft: #edf5ff;
  --amber: #b66a00;
  --amber-soft: #fff5df;
  --sidebar-width: 146px;
  font-family: "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

button, input, select { font: inherit; letter-spacing: 0; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

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

.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 30;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--black);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: 18px; white-space: nowrap; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.system-state { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.system-state strong { color: var(--ink); font-weight: 600; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: #aab0b7; box-shadow: 0 0 0 4px #f0f2f4; }
.state-dot.online { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.state-dot.offline { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.top-divider { width: 1px; height: 18px; background: var(--line); }
.top-logout { padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #fff; cursor: pointer; }
.top-logout:hover { color: var(--ink); border-color: var(--line-strong); }

.sidebar {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.nav-group { margin-bottom: 22px; }
.nav-group p { margin: 0 12px 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.nav-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.nav-item svg { width: 17px; height: 17px; color: var(--muted); }
.nav-item:hover { background: var(--surface-subtle); }
.nav-item.active { background: #f2f3f4; border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--black); font-weight: 700; }
.nav-item.active svg { color: var(--ink); }
.sidebar-footer { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 12px; }
.sidebar-footer svg { width: 15px; }

.main-content { min-width: 0; padding: 16px; }
.view { display: none; }
.view.active { display: block; }
.users-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.users-page-head h1 { margin: 0 0 6px; font-size: 24px; }
.users-page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.users-table-frame { background: #fff; }
.users-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.users-table th { padding: 13px 16px; color: #667388; background: #f7f9fc; font-size: 12px; font-weight: 600; text-align: left; }
.users-table td { padding: 14px 16px; border-top: 1px solid #edf0f4; vertical-align: middle; }
.users-table .empty-cell { padding: 50px; color: var(--muted); text-align: center; }
.permission-cell { max-width: 620px; color: #58677d; line-height: 1.7; }
.role-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #40516b; background: #eef2f7; font-size: 12px; }
.role-badge.admin { color: #a65b00; background: #fff3dd; }
.user-actions { display: flex; gap: 8px; white-space: nowrap; }
.table-action { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.table-action:hover { border-color: var(--line-strong); background: #f8fafc; }
.table-action.danger { color: var(--red); }
.table-action:disabled { opacity: .45; cursor: not-allowed; }

.auth-overlay { position: fixed; inset: 0; z-index: 20000; display: none; place-items: center; padding: 20px; background: linear-gradient(145deg, #f5f7fa, #e9edf3); }
.auth-overlay.visible { display: grid; }
.login-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(30, 45, 65, .16); }
.login-card > .brand-mark { width: 44px; height: 44px; }
.login-card h1 { margin: 0; font-size: 24px; }
.login-card > p { margin: -8px 0 4px; color: var(--muted); }
.login-card label, .user-modal-card > label { display: flex; flex-direction: column; gap: 7px; color: #526174; font-size: 12px; }
.login-card input, .user-modal-card input, .user-modal-card select { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
.login-card input:focus, .user-modal-card input:focus, .user-modal-card select:focus { outline: 2px solid rgba(40, 120, 208, .18); border-color: var(--blue); }
.login-error { min-height: 18px; color: var(--red); font-size: 12px; }
.login-submit { width: 100%; min-height: 42px; }
.modal-backdrop[hidden] { display: none; }
.user-modal-card { width: min(660px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 12px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.modal-title-row h2 { margin: 0 0 5px; font-size: 20px; }
.modal-title-row p { margin: 0; color: var(--muted); font-size: 12px; }
.permission-fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.permission-fieldset legend { padding: 0 6px; color: #526174; font-size: 12px; }
.permission-fieldset.disabled { opacity: .68; }
.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.permission-grid label { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #edf0f4; border-radius: 6px; background: #fafbfc; font-size: 12px; }
.permission-grid input { width: auto; min-height: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.secondary-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }

.summary-strip {
  min-height: 106px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 16px 0;
  border-radius: 8px;
  background: #050505;
  color: #fff;
}
.summary-cell { min-width: 0; padding: 0 28px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #313131; }
.summary-cell:last-child { border-right: 0; }
.summary-cell span { color: #aeb3b8; font-size: 13px; }
.summary-cell strong { margin-top: 5px; font-size: 27px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-cell small { margin-top: 7px; color: #8f959b; font-size: 12px; }
.jzt-summary-strip { grid-template-columns: minmax(340px, 1.65fr) repeat(4, minmax(0, 1fr)); }
.jzt-cost-summary-cell { display: grid; grid-template-columns: minmax(122px, 1fr) minmax(150px, 1.08fr); align-items: center; gap: 16px; }
.jzt-cost-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.jzt-business-compare { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-left: 18px; border-left: 1px solid #313131; }
.jzt-business-compare span, .jzt-business-compare small { color: #aeb3b8; font-size: 11px; white-space: nowrap; }
.jzt-business-compare strong { color: #fff; font-size: 17px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jzt-business-compare small { color: #8f959b; }
.jzt-paid-ratio-label { margin-top: 4px; }
.jzt-paid-ratio-label b { color: #f6c344; font-weight: 700; font-variant-numeric: tabular-nums; }

.control-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  min-height: 46px;
}
.period-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.period-button, .icon-text-button, .primary-button, select, .icon-button {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
}
.period-button { min-width: 62px; padding: 0 14px; cursor: pointer; color: var(--muted); }
.period-button:hover { border-color: #9ca3aa; color: var(--ink); }
.period-button.active { background: var(--black); border-color: var(--black); color: #fff; font-weight: 700; }

.filters, .heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.search-box {
  width: min(300px, 30vw);
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
}
.search-box.wide { width: min(420px, 42vw); }
.search-box:focus-within { border-color: #858d96; box-shadow: 0 0 0 3px #e9ecef; }
.search-box svg { width: 16px; color: var(--muted); flex: 0 0 auto; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-box input::placeholder { color: #9aa1a8; }
select { min-width: 128px; padding: 0 32px 0 11px; color: #3b4147; outline: 0; cursor: pointer; }
select:focus { border-color: #858d96; box-shadow: 0 0 0 3px #e9ecef; }

.icon-button { width: 38px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.icon-button svg { width: 17px; height: 17px; }
.icon-text-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; cursor: pointer; white-space: nowrap; }
.icon-text-button svg, .primary-button svg { width: 16px; height: 16px; }
.icon-text-button:hover, .icon-button:hover { background: #f2f4f5; border-color: #aeb5bb; }
.primary-button { background: var(--black); border-color: var(--black); color: #fff; }
.primary-button:hover { background: #292c2f; }
.mobile-menu { display: none; }

.collection-status { min-height: 20px; margin: -4px 2px 8px; color: var(--muted); font-size: 12px; }
.collection-status.loading { color: var(--blue); }
.collection-status.error { color: var(--red); }
.collection-status.has-failures { color: var(--red); }
.collection-failure-link {
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 12px;
}

.jzt-channel-band {
  min-height: 66px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 12px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.jzt-channel-band > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  border-right: 1px solid var(--line);
}
.jzt-channel-band > div:last-child { border-right: 0; }
.jzt-channel-band span { color: var(--muted); font-size: 12px; }
.jzt-channel-band strong { margin-top: 5px; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.store-list { display: grid; gap: 12px; }
.store-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035);
}
.store-card.error-card { border-color: #efcaca; }
.store-header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 1px dashed var(--line); }
.store-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.store-identity h2 { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.manager-chip, .group-chip, .type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: #f1f3f4;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.type-chip { margin-left: auto; }
.store-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.store-header-meta { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.business-jzt-balance { color: var(--muted); font-size: 12px; white-space: nowrap; }
.business-jzt-balance strong { margin-left: 5px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.jzt-store-meta { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; }
.jzt-store-meta strong { margin-left: 4px; color: var(--ink); font-size: 14px; }
.jzt-store-channels {
  min-height: 42px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 0 20px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.jzt-store-channels span { min-width: 0; padding-right: 12px; overflow-wrap: anywhere; }
.jzt-store-channels strong { margin-left: 4px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 20px 0; }
.business-metric-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.metric { min-width: 0; padding: 0 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 7px; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.metric-rate { min-height: 18px; margin-top: 8px; font-weight: 600; font-size: 12px; }
.metric-rate.up { color: var(--red); }
.metric-rate.down { color: var(--green); }
.metric-rate.neutral { color: var(--muted); }
.business-jzt-spend .metric-value { font-weight: 700; }
.jzt-spend-rate { min-height: 18px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.jzt-spend-rate.up { color: var(--red); }
.jzt-spend-rate.down { color: var(--green); }
.jzt-spend-rate.neutral { color: var(--muted); }
.metric-baseline { margin-top: 7px; color: #8e959c; font-size: 12px; line-height: 1.65; }
.jzt-metric-grid { row-gap: 24px; }
.jzt-metric:nth-child(5n) { border-right: 0; }
.jzt-metric-compare { min-height: 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 8px; }
.jzt-metric-compare small { color: #8e959c; font-size: 11px; }

.shop-star-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.shop-star-page-head h1 { margin: 0; font-size: 22px; }
.shop-star-page-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.shop-star-controls { flex-wrap: nowrap; }
.shop-star-list { display: grid; gap: 14px; }
.shop-star-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .04); overflow: hidden; }
.shop-star-card.error-card { border-color: #efcaca; }
.shop-star-card-head { background: linear-gradient(90deg, #fff, #f8faff); }
.shop-star-metric-grid { display: grid; grid-template-columns: 1.12fr repeat(6, 1fr); align-items: stretch; padding: 18px 6px; }
.shop-star-metric { min-width: 0; min-height: 96px; padding: 4px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.shop-star-metric:last-child { border-right: 0; }
.shop-star-metric-label { min-height: 20px; color: #3f464d; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.shop-star-metric-value { margin-top: 7px; color: #17191c; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.shop-star-metric-value small { margin-left: 2px; font-size: 12px; font-weight: 400; }
.shop-star-rating-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.shop-star-rating-row strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.shop-star-icons { display: flex; gap: 1px; }
.shop-star-icon { font-size: 15px; background: linear-gradient(90deg, #f6a800 var(--star-fill), #dfe3e8 var(--star-fill)); color: transparent; background-clip: text; -webkit-background-clip: text; }
.shop-star-level { padding: 2px 5px; border-radius: 3px; color: #d97706; background: #fff4dd; font-size: 10px; line-height: 1.1; }
.shop-star-level.low { color: #ef4444; background: #fff0f0; }
.shop-star-trend { min-height: 18px; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.shop-star-trend.up { color: var(--red); }
.shop-star-trend.down { color: var(--green); }
.shop-star-trend.neutral { color: var(--muted); }
.shop-star-weight { margin-top: 4px; color: #969da5; font-size: 11px; }

.price-star-list { display: grid; gap: 14px; }
.price-star-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .04); overflow: hidden; }
.price-star-card.error-card { border-color: #efcaca; }
.price-star-card-head { background: linear-gradient(90deg, #fff, #f7faff); }
.price-power-chip { padding: 4px 9px; border: 1px solid #a9d3ff; border-radius: 4px; color: #1685f8; background: #eef7ff; font-size: 11px; }
.price-star-metric-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 18px 14px 14px; background: #f8faff; }
.price-star-metric { min-width: 0; min-height: 88px; padding: 13px 14px; border: 1px solid #dfe7f2; border-radius: 6px; background: #fff; }
.price-star-metric.emphasized { border-color: #8eb5ff; }
.price-star-metric-label { color: #66758a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-star-metric-value { margin-top: 8px; color: #20324d; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.price-star-metric.emphasized .price-star-metric-value { color: #326bff; }
.price-star-metric small { display: block; margin-top: 9px; color: #8a9ab0; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-star-distribution { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-top: 1px solid #e5ebf3; background: #f8faff; }
.price-star-distribution-label { margin-right: 4px; color: #748399; font-size: 12px; }
.price-star-level-chip { padding: 4px 10px; border: 1px solid #dbe4ef; border-radius: 5px; color: #42516a; background: #fff; font-size: 12px; }
.price-star-level-chip b { margin-right: 5px; }
.price-star-level-chip small { margin-left: 4px; color: #8797aa; }

.company-tax-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.company-tax-head h1 { margin: 0 0 6px; color: #172033; font-size: 24px; }
.company-tax-head p { margin: 0; color: var(--muted); font-size: 13px; }
.company-tax-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.company-tax-summary span { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; color: var(--muted); background: #fff; font-size: 12px; }
.company-tax-summary strong { color: #27364d; font-size: 17px; font-weight: 650; }
.company-tax-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.company-tax-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.company-tax-table th { padding: 14px 16px; color: #526277; background: #f7f9fc; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.company-tax-table td { padding: 16px; border-top: 1px solid #edf0f4; color: #263449; font-size: 13px; }
.company-tax-table tbody tr:hover { background: #fafcff; }
.company-tax-table .money-column { text-align: right; font-variant-numeric: tabular-nums; }
.company-tax-table .empty-cell { padding: 52px 20px; color: var(--muted); text-align: center; }
.company-tax-table .shop-cell { color: #627188; }
.finance-balance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.finance-balance-summary { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.finance-balance-summary span { display: flex; flex-direction: column; gap: 5px; min-width: 190px; padding: 12px 16px; color: var(--muted); font-size: 12px; }
.finance-balance-summary span + span { border-left: 1px solid var(--line); }
.finance-balance-summary strong { color: #27364d; font-size: 16px; }
.finance-balance-total-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(31, 51, 81, .04); }
.finance-balance-total-grid > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; }
.finance-balance-total-grid > div + div { border-left: 1px solid #edf0f4; }
.finance-balance-total-grid span { display: flex; align-items: center; gap: 5px; color: #65748a; font-size: 12px; }
.finance-balance-total-grid span svg { width: 14px; height: 14px; }
.finance-balance-total-grid span small { color: #9aa5b5; }
.finance-balance-total-grid strong { color: #27364d; font-size: 24px; font-variant-numeric: tabular-nums; }
.finance-balance-total-grid > div:first-child strong, .finance-balance-total-grid > div:nth-child(2) strong { color: #e33d4f; }
.finance-balance-list { display: grid; gap: 14px; }
.finance-balance-card { overflow: hidden; border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(31, 51, 81, .04); }
.finance-balance-card.unavailable { border-style: dashed; }
.finance-balance-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #edf0f4; background: #fafbfe; }
.finance-balance-card-head h2 { margin: 0 0 4px; color: #24334a; font-size: 15px; }
.finance-balance-card-head small, .finance-balance-card-head > span { color: var(--muted); font-size: 12px; }
.finance-balance-error { color: #d9485f !important; }
.finance-balance-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.finance-balance-metrics > div { display: flex; flex-direction: column; gap: 12px; min-height: 82px; padding: 17px 18px; }
.finance-balance-metrics > div + div { border-left: 1px solid #edf0f4; }
.finance-balance-metrics span { display: flex; align-items: center; gap: 5px; color: #65748a; font-size: 12px; }
.finance-balance-metrics span svg { width: 14px; height: 14px; }
.finance-balance-metrics span small { color: #9aa5b5; }
.finance-balance-metrics strong { color: #27364d; font-size: 22px; font-variant-numeric: tabular-nums; }
.finance-balance-metrics > div:first-child strong, .finance-balance-metrics > div:nth-child(2) strong { color: #e33d4f; }

@media (max-width: 1400px) {
  .shop-star-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  .shop-star-metric:nth-child(4n) { border-right: 0; }
  .price-star-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shop-star-page-head { flex-direction: column; }
  .shop-star-controls { width: 100%; flex-wrap: wrap; }
  .shop-star-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-star-metric:nth-child(4n) { border-right: 1px solid var(--line); }
  .shop-star-metric:nth-child(2n) { border-right: 0; }
  .price-star-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-star-distribution { flex-wrap: wrap; }
  .company-tax-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-tax-head { align-items: stretch; flex-direction: column; }
  .finance-balance-toolbar { align-items: stretch; flex-direction: column; }
  .finance-balance-summary { width: 100%; }
  .finance-balance-summary span { min-width: 0; flex: 1; }
  .finance-balance-total-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-balance-total-grid > div + div { border-left: 0; }
  .finance-balance-total-grid > div:nth-child(even) { border-left: 1px solid #edf0f4; }
  .finance-balance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-balance-metrics > div + div { border-left: 0; }
  .finance-balance-metrics > div:nth-child(even) { border-left: 1px solid #edf0f4; }
}
.jzt-rate { font-size: 12px; font-weight: 600; }
.jzt-rate.up { color: var(--red); }
.jzt-rate.down { color: var(--green); }
.jzt-rate.neutral { color: var(--muted); }
.error-body { padding: 30px 22px; display: flex; align-items: center; gap: 10px; color: var(--red); }
.error-body svg { width: 18px; }
.error-body .relogin-button { margin-left: auto; }

.skeleton-card { height: 184px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.skeleton-line { height: 12px; margin: 22px; background: #edf0f2; border-radius: 4px; animation: pulse 1.4s ease-in-out infinite; }
.skeleton-line.short { width: 22%; }
.skeleton-blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; padding: 20px; }
.skeleton-blocks span { height: 72px; background: #edf0f2; border-radius: 5px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 16px; }
.page-heading h1 { margin: 0; font-size: 24px; }
.page-heading p { margin: 6px 0 0; color: var(--muted); }
.account-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 180px)); gap: 10px; }
.stat-filter { min-height: 68px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 10px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.stat-filter span { color: var(--muted); font-size: 12px; }
.stat-filter strong { margin-top: 5px; font-size: 20px; }
.stat-filter.active { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.stat-filter.failure-filter strong { color: var(--red); }
.account-controls { justify-content: flex-start; }
.account-controls .icon-button { margin-left: -6px; }

.table-frame { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.account-table { width: 100%; min-width: 1320px; border-collapse: collapse; }
.account-table th { height: 44px; padding: 0 13px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.account-table td { height: 54px; padding: 7px 13px; border-bottom: 1px solid #eaedef; vertical-align: middle; }
.account-table tr:last-child td { border-bottom: 0; }
.account-table tbody tr:hover { background: #fafbfc; }
.account-table .id-cell { color: var(--muted); font-size: 12px; }
.account-table .shop-cell { max-width: 210px; font-weight: 600; overflow-wrap: anywhere; }
.account-table .account-cell { max-width: 190px; color: #535b63; overflow-wrap: anywhere; }
.inline-input { width: 110px; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; background: #fff; }
.inline-input.code { width: 100px; font-variant-numeric: tabular-nums; }
.inline-input:focus { border-color: #858d96; box-shadow: 0 0 0 3px #e9ecef; }
.status-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-badge.valid { color: var(--green); background: var(--green-soft); }
.status-badge.invalid { color: var(--red); background: var(--red-soft); }
.status-badge.warning { color: var(--amber); background: var(--amber-soft); }
.status-badge.neutral { color: var(--muted); background: #eef1f3; }
.collection-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.collection-cell { display: flex; align-items: center; gap: 8px; min-width: 240px; }
.collection-state small {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  color: var(--red);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-table tr.account-failed { background: #fff8f8; }
.account-table tr.account-failed:hover { background: #fff3f3; }
.relogin-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #e5a8a8;
  border-radius: 6px;
  background: var(--surface);
  color: #c23535;
  cursor: pointer;
  white-space: nowrap;
}
.relogin-button:hover { background: var(--red-soft); border-color: #d87d7d; }
.relogin-button:disabled { cursor: wait; opacity: .65; }
.relogin-button.compact { min-height: 30px; padding: 0 9px; font-size: 12px; }
.relogin-button svg { width: 15px; height: 15px; }
.date-cell { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mobile-account-list { display: none; }

.after-sale-toolbar {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.after-sale-date-range, .after-sale-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.after-sale-date-range label { color: var(--muted); font-size: 12px; font-weight: 600; }
.after-sale-date-range input { width: 148px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: var(--surface); }
.after-sale-date-range span { color: var(--muted); }
.after-sale-status { min-height: 20px; color: var(--muted); font-size: 12px; }
.after-sale-status.loading { color: var(--blue); }
.after-sale-status.error { color: var(--red); }
.after-sale-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.after-sale-summary-card { min-width: 0; min-height: 82px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; text-align: left; }
.after-sale-summary-card:hover { border-color: #aeb5bb; }
.after-sale-summary-card span { color: var(--muted); font-size: 12px; }
.after-sale-summary-card strong { margin-top: 7px; font-size: 22px; font-variant-numeric: tabular-nums; }
.after-sale-summary-card.active { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.after-sale-quick-filters { display: flex; align-items: flex-start; gap: 12px; min-height: 46px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.after-sale-quick-label { flex: 0 0 auto; padding-top: 3px; color: var(--muted); font-size: 12px; }
.after-sale-quick-options { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.after-sale-quick-option { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 12px; cursor: pointer; white-space: nowrap; }
.after-sale-quick-option input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.after-sale-quick-option strong { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.after-sale-filters { margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.after-sale-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.after-sale-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.after-sale-field span { color: var(--muted); font-size: 12px; }
.after-sale-field input, .after-sale-field select { width: 100%; min-width: 0; height: 38px; }
.after-sale-field-wide { grid-column: span 2; }
.after-sale-filter-actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 12px; }
.after-sale-table-frame { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.after-sale-table-head, .after-sale-item-grid { min-width: 1320px; display: grid; grid-template-columns: minmax(280px, 2.15fr) minmax(180px, 1.2fr) minmax(110px, .7fr) minmax(150px, 1fr) minmax(160px, 1.25fr) minmax(150px, 1fr) minmax(116px, .82fr); }
.after-sale-table-head { min-height: 44px; align-items: center; padding: 0 12px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
.after-sale-table-head span { min-width: 0; padding: 0 10px; white-space: nowrap; }
.after-sale-list { display: grid; gap: 10px; padding: 10px; background: #f7f8f9; }
.after-sale-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.after-sale-item-header { min-height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; }
.after-sale-item-header strong { color: var(--ink); font-weight: 600; }
.after-sale-countdown { color: var(--red) !important; font-weight: 700; }
.after-sale-work-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font-size: 11px; }
.after-sale-work-tag select { height: 26px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 11px; }
.after-sale-work-tag-select.todo { color: var(--red); border-color: #e9a3a3; }
.after-sale-work-tag-select.working { color: var(--amber); border-color: #e6c27a; }
.after-sale-work-tag-select.followed { color: var(--blue); border-color: #9bb5ea; }
.after-sale-work-tag-select.done { color: var(--green); border-color: #9ed0ad; }
.after-sale-type { padding: 3px 7px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.after-sale-item-grid { min-height: 138px; align-items: stretch; }
.after-sale-item-grid > div { min-width: 0; padding: 14px 12px; border-right: 1px solid var(--line); }
.after-sale-item-grid > div:last-child { border-right: 0; }
.after-sale-product { display: flex; gap: 10px; }
.after-sale-product img, .after-sale-image-placeholder { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; background: #f0f2f3; }
.after-sale-image-placeholder { display: grid; place-items: center; color: #8b949c; }
.after-sale-image-placeholder svg { width: 24px; }
.after-sale-product > div, .after-sale-reason, .after-sale-refund, .after-sale-customer, .after-sale-remark, .after-sale-logistics { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.after-sale-customer { align-items: flex-start; }
.after-sale-customer .order-remark-content { max-width: 100%; }
.after-sale-customer .order-remark-badge { max-width: 100%; }
.after-sale-customer .order-remark-content em { color: var(--muted); font-size: 11px; font-style: normal; }
.after-sale-product strong, .after-sale-reason strong, .after-sale-customer strong { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.after-sale-product span, .after-sale-product small, .after-sale-reason span, .after-sale-refund span, .after-sale-refund small, .after-sale-customer span, .after-sale-customer small, .after-sale-remark span, .after-sale-logistics span { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.after-sale-product small { font-size: 11px; }
.after-sale-state { align-self: flex-start; max-width: 100%; padding: 3px 6px; border-radius: 4px; font-weight: 600; }
.after-sale-state.pending { color: var(--red); background: var(--red-soft); }
.after-sale-state.complete { color: var(--green); background: var(--green-soft); }
.after-sale-refund strong { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.after-sale-tag { align-self: flex-start; max-width: 100%; padding: 2px 5px; border-radius: 3px; background: #fff5df; color: var(--amber) !important; }
.after-sale-operate { display: flex; align-items: center; justify-content: center; }
.after-sale-process-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 5px; background: #4e67e8; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.after-sale-process-button:hover { background: #3f56d0; }
.after-sale-process-button:disabled { cursor: wait; opacity: .72; }
.after-sale-process-button svg { width: 14px; height: 14px; }
.after-sale-skeleton { height: 170px; border-radius: 7px; background: linear-gradient(90deg, #edf0f2 25%, #f7f8f9 50%, #edf0f2 75%); background-size: 200% 100%; animation: after-sale-skeleton 1.3s ease-in-out infinite; }
@keyframes after-sale-skeleton { 50% { background-position: -100% 0; } }

.order-heading { margin-bottom: 14px; }
.order-workbench-search { margin-bottom: 14px; padding: 18px 22px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 8px rgba(15,23,42,.03); }
.order-search-row { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(250px, 1fr) minmax(240px, .9fr) auto; gap: 18px; align-items: end; }
.order-search-row label { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.order-search-row label input { min-width: 0; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); }
.order-search-row label input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,156,255,.12); }
.order-search-row b { font-weight: 400; color: var(--muted); }
.order-search-actions { display: flex; gap: 8px; }
.order-search-actions button { min-width: 76px; height: 40px; }
.order-search-more { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--accent); text-align: center; font-size: 12px; cursor: pointer; }
.order-tabs { align-items: center; gap: 27px; min-height: 54px; margin: 0 0 8px; padding: 0 6px; border-bottom: 1px solid var(--line); }
.order-tabs .period-button { position: relative; padding: 12px 0; border: 0; background: transparent; color: var(--ink); font-size: 15px; }
.order-tabs .period-button.active { color: var(--accent); background: transparent; box-shadow: none; }
.order-tabs .period-button.active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.order-tabs .period-button b { display: inline-grid; min-width: 22px; height: 22px; margin-left: 3px; padding: 0 6px; place-items: center; border-radius: 999px; background: #fff1f1; color: #e53935; font-size: 11px; }
.order-tabs .period-button.active b { background: #fff1f1; color: #e53935; }
.order-sync-status { color: var(--muted); font-size: 12px; }
.order-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.order-summary > div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 12px 20px; border-right: 1px solid var(--line); }
.order-summary > div:last-child { border-right: 0; }
.order-summary span { color: var(--muted); font-size: 12px; }
.order-summary strong { margin-top: 5px; font-size: 21px; font-variant-numeric: tabular-nums; }
.order-tabs { display: flex; gap: 7px; margin: 14px 0; overflow-x: auto; scrollbar-width: thin; }
.order-tabs .period-button { flex: 0 0 auto; }
.order-date-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: -4px 0 12px; }
.order-date-presets-label { margin-right: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
.order-date-presets .period-button { flex: 0 0 auto; }
.order-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.order-filters label { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.order-account-filter { position: relative; }
.order-account-filter input { margin-bottom: 2px; }
.order-filters label span, .order-cell-label { color: var(--muted); font-size: 12px; }
.order-filters input, .order-filters select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); }
.order-filter-actions { display: flex; align-items: flex-end; gap: 8px; }
.order-filter-actions button { flex: 1; }
.order-failure-notice { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #f0b9b9; border-radius: 7px; background: var(--red-soft); color: #9f3434; font-size: 12px; }
.order-list { display: grid; gap: 10px; }
.order-bulk-toolbar { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.order-bulk-toolbar label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.order-bulk-toolbar input, .order-select-box input { width: 18px; height: 18px; accent-color: #3b9cff; }
.order-profit-totals { display: flex; align-items: center; gap: 22px; margin-left: auto; padding-left: 18px; border-left: 1px solid var(--line); color: #dc2626; white-space: nowrap; }
.order-profit-totals span { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; }
.order-profit-totals strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.order-profit-totals small { color: var(--muted); font-size: 11px; }
.order-profit-totals.negative { color: #2563eb; }
.order-selected-count { color: var(--muted); font-size: 13px; }
.order-select-box { display: inline-flex; align-items: center; margin-right: 2px; }
.order-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.order-card-header { min-height: 45px; display: grid; grid-template-columns: minmax(360px, 2.1fr) minmax(210px, 1.05fr) minmax(180px, .9fr) minmax(150px, .75fr); align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
.order-card-header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.order-card-header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.order-card-header span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.order-card-primary { flex-wrap: wrap; gap: 5px 12px !important; }
.order-card-header .order-card-primary { grid-column: 1 / span 2; }
.order-card-primary > span { display: inline-flex; align-items: center; gap: 2px; }
.order-card-procurement-summary { grid-column: 3 / -1; justify-content: space-between; flex-wrap: nowrap; }
.order-card-procurement-label { flex: 0 0 auto; color: var(--ink) !important; font-size: 13px !important; font-weight: 600; white-space: nowrap; }
.order-card-header .order-warehouse { min-width: 0; }
.order-card-header .order-state { flex: 0 0 auto; }
.order-card-order-id { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.order-warehouse { max-width: 360px; overflow: hidden; color: var(--red) !important; font-size: 15px !important; font-weight: 800; text-overflow: ellipsis; }
.copy-order { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.copy-order:hover { background: #e9edf0; }
.order-remark-button { border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--accent); cursor: pointer; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 400; }
.order-remark-button:hover { background: #eef4ff; }
.order-remark-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; overflow: hidden; padding: 5px 9px; border-radius: 5px; font-size: 14px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.order-remark-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.order-remark-badge.level-0 { color: #64748b; background: #f1f5f9; }
.order-remark-badge.level-1 { color: #dc2626; background: #fee2e2; }
.order-remark-badge.level-2 { color: #ea580c; background: #ffedd5; }
.order-remark-badge.level-3 { color: #16a34a; background: #dcfce7; }
.order-remark-badge.level-4 { color: #2563eb; background: #dbeafe; }
.order-remark-badge.level-5 { color: #9333ea; background: #f3e8ff; }
.order-remark-modal { width: min(520px, calc(100vw - 32px)); padding: 18px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .48); }
.modal-backdrop .modal { position: relative; max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.order-remark-modal header, .order-remark-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-remark-modal header h3 { margin: 0; }
.order-remark-modal header button { border: 0; background: transparent; cursor: pointer; font-size: 22px; }
.remark-levels { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.remark-level-options { display: flex; flex-wrap: wrap; gap: 7px; }
.remark-level-option { display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border: 1px solid transparent; border-radius: 5px; background: #f5f6f7; color: var(--muted); cursor: pointer; }
.remark-level-option svg { width: 14px; height: 14px; }
.remark-level-option.active { border-color: currentColor; box-shadow: 0 0 0 2px currentColor inset; font-weight: 700; }
.remark-level-option.level-0 { color: #64748b; }
.remark-level-option.level-1 { color: #dc2626; }
.remark-level-option.level-2 { color: #ea580c; }
.remark-level-option.level-3 { color: #16a34a; }
.remark-level-option.level-4 { color: #2563eb; }
.remark-level-option.level-5 { color: #9333ea; }
.order-remark-modal textarea { width: 100%; min-height: 150px; margin: 14px 0; resize: vertical; }
.order-remark-modal footer { justify-content: flex-end; }
.order-remark-modal footer [data-clear-remarks] { margin-right: auto; border: 1px solid #fecaca; border-radius: 5px; background: #fff1f2; color: #dc2626; cursor: pointer; padding: 7px 11px; }
.order-remark-modal footer [data-clear-remarks]:hover { background: #fee2e2; }
.order-export-modal { width: min(980px, calc(100vw - 32px)); padding: 20px; }
.order-export-modal > header, .order-export-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-export-modal > header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order-export-modal > header h3, .order-export-modal > header p { margin: 0; }
.order-export-modal > header p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.order-export-modal > header > button { border: 0; background: transparent; cursor: pointer; font-size: 24px; }
.order-export-scope { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 12px 22px; margin: 16px 0; padding: 14px; border: 1px solid #dbeafe; border-radius: 8px; background: #f8fbff; }
.order-export-scope label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.order-export-scope label.disabled { color: var(--muted); cursor: not-allowed; }
.order-export-actions { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.order-export-actions [data-export-selected-count] { margin-left: auto; color: var(--muted); font-size: 13px; }
.order-export-actions button, .order-export-field-group header button { border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; padding: 6px 10px; }
.order-export-field-group { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.order-export-field-group > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f8fafc; }
.order-export-field-group h4 { margin: 0; }
.order-export-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 6px 14px 12px; }
.order-export-field { display: flex; align-items: center; gap: 8px; min-height: 38px; padding-right: 10px; cursor: pointer; }
.order-export-field input { width: 16px; height: 16px; }
.order-export-split { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; }
.order-export-split small { color: var(--muted); }
.order-export-modal > footer { justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--line); }
.order-export-modal > footer > button:not(.primary-button) { border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; padding: 8px 14px; }
#order-export[hidden] { display: none; }
@media (max-width: 760px) {
  .order-export-scope { grid-template-columns: 1fr; }
  .order-export-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-export-actions { flex-wrap: wrap; }
  .order-export-actions [data-export-selected-count] { width: 100%; margin-left: 0; }
}
.copy-order svg { width: 14px; }
.order-state { justify-self: end; padding: 3px 7px; border-radius: 4px; font-weight: 600; }
.order-state.pending { color: var(--amber); background: var(--amber-soft); }
.order-state.complete { color: var(--green); background: var(--green-soft); }
.order-state.danger { color: var(--red); background: var(--red-soft); }
.order-state.muted { color: var(--muted); background: #edf0f2; }
.order-card-body { min-width: 980px; display: grid; grid-template-columns: minmax(360px, 2.1fr) minmax(210px, 1.05fr) minmax(180px, .9fr) minmax(150px, .75fr); }
.order-card-body > div { min-width: 0; padding: 14px; border-right: 1px solid var(--line); }
.order-card-body > div:last-child { border-right: 0; }
.order-products { display: grid; gap: 9px; }
.order-product { display: flex; min-width: 0; gap: 10px; }
.order-product img, .order-product-image { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; background: #f0f2f3; }
.order-product img[data-order-image-preview] { cursor: zoom-in; }
.order-image-preview { position: fixed; z-index: 10000; width: min(340px, calc(100vw - 24px)); height: min(340px, calc(100vw - 24px)); overflow: hidden; padding: 8px; border: 1px solid #d8dee8; border-radius: 10px; background: #fff; box-shadow: 0 18px 48px rgba(15, 23, 42, .28); pointer-events: none; }
.order-image-preview[hidden] { display: none; }
.order-image-preview img { display: block; width: 100%; height: 100%; border-radius: 6px; background: #f8fafc; object-fit: contain; }
.order-product-image { display: grid; place-items: center; color: var(--muted); }
.order-product-image svg { width: 21px; }
.order-product-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.order-product-copy strong { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-product-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.order-sku-line { display: inline-flex; align-items: center; gap: 2px; }
.copy-sku { width: 20px; height: 20px; }
.copy-sku svg { width: 12px; height: 12px; }
.order-product-copy em { color: var(--ink); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.order-product-copy > a { color: inherit; text-decoration: none; }
.order-source-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.order-source-line small { max-width: 150px; }
.order-source-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #bfdbfe; border-radius: 5px; background: #eff6ff; color: #2563eb; cursor: pointer; font-size: 11px; font-weight: 700; }
.order-source-button:hover { background: #dbeafe; }
.order-source-button svg { width: 13px; height: 13px; }
.order-add-shipment { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #a7f3d0; border-radius: 5px; background: #ecfdf5; color: #059669; cursor: pointer; font-size: 11px; font-weight: 700; }
.order-add-shipment:hover { background: #d1fae5; }
.order-add-shipment svg { width: 13px; height: 13px; }
.supplemental-shipment-list { border-top: 1px solid #bfdbfe; background: #f8fbff; }
.supplemental-shipment { min-width: 980px; display: grid; grid-template-columns: minmax(150px,.65fr) minmax(360px,1.7fr) minmax(160px,.7fr) minmax(250px,1.1fr); align-items: stretch; border-bottom: 1px solid var(--line); }
.supplemental-shipment:last-child { border-bottom: 0; }
.supplemental-shipment > div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); }
.supplemental-shipment > div:last-child { border-right: 0; }
.supplemental-shipment-title { display: flex; flex-direction: column; gap: 5px; color: #0369a1; }
.supplemental-shipment-title small { color: var(--muted); }
.supplemental-shipment-actions { display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: 5px; }
.source-link-chip { max-width: 125px; overflow: hidden; padding: 3px 6px; border-radius: 4px; background: #ecfdf5; color: #047857 !important; font-size: 11px; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.source-link-chip:hover { background: #d1fae5; }
.source-link-modal { width: min(820px, calc(100vw - 32px)); padding: 20px; }
.source-link-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.source-link-modal header h3 { margin: 0 0 5px; }
.source-link-modal header small { color: var(--muted); }
.source-link-modal header > button { border: 0; background: transparent; cursor: pointer; font-size: 24px; }
.source-link-list { display: grid; gap: 8px; max-height: 310px; overflow: auto; margin: 18px 0; }
.source-link-empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: 7px; color: var(--muted); text-align: center; }
.source-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; }
.source-link-row > div { min-width: 0; display: grid; grid-template-columns: auto auto minmax(120px, 1fr); align-items: center; gap: 6px 10px; }
.source-link-row strong { font-size: 13px; }
.source-link-row span { padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: var(--muted); font-size: 11px; }
.source-link-row small { overflow: hidden; color: #2563eb; text-overflow: ellipsis; white-space: nowrap; }
.source-link-row em { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-style: normal; }
.source-link-row > a, .source-link-row > button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 12px; text-decoration: none; }
.source-link-row .danger-text { color: #dc2626; }
.source-link-form { display: grid; grid-template-columns: 150px minmax(180px, 1fr); gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.source-link-form label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.source-link-form label span { color: var(--muted); font-size: 12px; }
.source-link-form input, .source-link-form select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.source-url-field, .source-note-field { grid-column: 1 / -1; }
.source-link-form footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.source-link-form footer button { padding: 8px 14px; }
@media (max-width: 700px) {
  .source-link-row { grid-template-columns: 1fr repeat(3, auto); }
  .source-link-row > div { grid-column: 1 / -1; }
  .source-link-form { grid-template-columns: 1fr; }
  .source-url-field, .source-note-field, .source-link-form footer { grid-column: 1; }
}
.order-customer, .order-fulfillment, .order-amount { display: flex; flex-direction: column; gap: 6px; }
.procurement-payment-row { display: flex; align-items: baseline; gap: 3px; min-width: 0; line-height: 1.35; }
.procurement-payment-row > span { flex: 0 0 auto; color: var(--muted); }
.procurement-payment-row > strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.procurement-payment-row > em { flex: 0 0 auto; color: var(--text); font-size: 12px; font-style: normal; }
.procurement-payment-row .procurement-order-number { color: #2563eb; }
.order-customer strong, .order-fulfillment strong { font-size: 13px; }
.order-customer span, .order-fulfillment span, .order-amount span { font-size: 12px; }
.order-customer-line { display: flex; align-items: center; gap: 9px; }
.order-customer-line > span { color: var(--ink); font-variant-numeric: tabular-nums; }
.order-address { color: var(--ink) !important; }
.order-decrypt-hint { margin-left: 4px; color: var(--blue) !important; cursor: default; }
.order-remark-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.order-remark-inline > span:first-child { color: var(--muted); }
.order-remark-inline em { color: var(--muted); font-size: 11px; font-style: normal; }
.order-remark-content { min-width: 0; display: inline-flex; align-items: center; }
.order-profit-summary { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 12px; }
.order-profit-summary strong { font-size: 14px; }
.order-profit-summary.positive { color: #dc2626; }
.order-profit-summary.negative { color: #2563eb; }
.order-profit-summary.pending { color: var(--muted); }
.order-remark-inline .order-remark-badge { max-width: 210px; padding: 3px 6px; font-size: 11px; }
.order-payment-line { margin-top: 1px; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.order-phone-line { display: flex; align-items: center; gap: 5px; }
.order-phone-button { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--blue); cursor: pointer; }
.order-phone-button:hover { background: #eaf2f8; }
.order-phone-button:disabled { opacity: .5; cursor: wait; }
.order-phone-button svg { width: 15px; height: 15px; }
.order-phone-button .lucide-loader-circle { animation: spin .8s linear infinite; }
.order-virtual-number { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-left: 3px solid var(--blue); border-radius: 4px; background: #eef6fb; }
.order-virtual-number[hidden] { display: none; }
.order-virtual-number strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.order-virtual-number small { color: var(--muted); font-size: 10px; }
.order-customer small, .order-fulfillment small, .order-amount small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-pin { overflow: hidden; color: var(--blue); text-overflow: ellipsis; white-space: nowrap; }
.order-amount strong { font-size: 18px; font-variant-numeric: tabular-nums; }

.pagination { min-height: 54px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.page-button { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; }
.page-button:hover:not(:disabled) { border-color: #979fa6; }
.page-button.active { background: var(--black); border-color: var(--black); color: #fff; }
.page-button:disabled { opacity: .4; cursor: not-allowed; }
.page-info { margin-right: 8px; color: var(--muted); font-size: 12px; }
.order-page-size { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.order-page-size select { width: 64px; height: 34px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.page-jump-form { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.page-jump-form label { display: inline-flex; align-items: center; gap: 4px; }
.page-jump-form input { width: 64px; height: 34px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); text-align: center; }
.page-jump-form button { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.page-jump-form button:hover { border-color: #979fa6; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 240px; max-width: min(360px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid var(--line-strong); border-left: 4px solid var(--green); border-radius: 7px; background: #fff; box-shadow: 0 8px 28px rgba(20, 24, 28, .14); }
.toast.error { border-left-color: var(--red); }
.empty-state { min-height: 240px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface); }

.todo-heading-actions { display: flex; align-items: center; gap: 12px; }
.todo-refresh-status { color: var(--muted); font-size: 12px; white-space: nowrap; }
.todo-controls { justify-content: flex-start; }
.todo-controls input[type="search"] { min-width: 260px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: var(--surface); }
.todo-controls input[type="search"]:focus { border-color: #858d96; box-shadow: 0 0 0 3px #e9ecef; }
.todo-auto-refresh { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.todo-count { min-width: 22px; color: var(--red); font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.todo-count:not(.has-count) { color: #9aa1a8; }
.todo-count-unknown { color: #b4bac0 !important; }
.todo-store-list { display: grid; gap: 14px; }
.todo-store-card { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .035); }
.todo-store-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 11px 18px; border-bottom: 1px dashed var(--line); }
.todo-store-header h2 { margin: 0; font-size: 16px; }
.todo-store-header small, .todo-store-meta { color: var(--muted); font-size: 12px; }
.todo-store-meta { white-space: nowrap; }
.todo-sync-details { padding: 0 18px 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.todo-groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.todo-group-card { min-width: 0; padding: 11px 12px; border: 1px solid #eef0f2; border-radius: 7px; background: var(--surface-subtle); }
.todo-group-card h3 { margin: 0 0 9px; font-size: 14px; }
.todo-group-items { display: grid; gap: 7px; }
.todo-item-link { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--ink); text-decoration: none; font-size: 12px; }
.todo-item-link > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item-link:hover { color: var(--blue); }
.todo-item-link.route-only { color: var(--muted); }
.todo-store-error { border-color: #efcaca; }
.todo-store-error-text { color: var(--red); font-size: 12px; }

@media (max-width: 1400px) {
  .todo-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1400px) {
  .business-controls { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; justify-content: flex-start; }
  .search-box { width: min(420px, 100%); }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .metric:nth-child(3) { border-right: 0; }
  .metric:nth-child(n+4) { padding-top: 2px; }
  .jzt-summary-strip { grid-template-columns: minmax(340px, 1.65fr) repeat(4, minmax(0, 1fr)); }
  .jzt-metric:nth-child(5n) { border-right: 1px solid var(--line); }
  .jzt-metric:nth-child(3n) { border-right: 0; }
  .after-sale-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .after-sale-field-wide { grid-column: span 1; }
  .order-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 0px; }
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 62px minmax(0, 1fr); }
  .topbar { height: 62px; padding: 0 12px; }
  .mobile-menu { display: inline-grid; flex: 0 0 auto; }
  .brand { margin-right: auto; margin-left: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small { display: none; }
  .system-state #system-state-text, .admin-label, .top-divider { display: none; }
  .system-state { gap: 7px; }
  .sidebar { position: fixed; top: 62px; left: 0; width: 220px; height: calc(100vh - 62px); transform: translateX(-105%); transition: transform .18s ease; box-shadow: 12px 0 28px rgba(15, 20, 24, .12); }
  .sidebar.open { transform: translateX(0); }
  .main-content { padding: 10px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cell { padding: 16px; border-bottom: 1px solid #313131; }
  .summary-cell:nth-child(2) { border-right: 0; }
  .summary-cell:nth-child(n+3) { border-bottom: 0; }
  .summary-cell strong { font-size: 22px; }
  .period-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .period-button { min-width: 0; padding: 0 8px; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-box { grid-column: 1 / -1; width: 100%; }
  .filters select, .filters .icon-text-button { width: 100%; min-width: 0; }
  .store-header { min-height: 64px; align-items: flex-start; padding: 12px 14px; }
  .store-identity { align-items: flex-start; flex-wrap: wrap; }
  .store-identity h2 { width: 100%; font-size: 15px; }
  .type-chip { display: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 0; row-gap: 22px; }
  .metric { padding: 0 14px; }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-child(3) { border-right: 1px solid var(--line); }
  .metric-value { font-size: 19px; }
  .jzt-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jzt-summary-strip .summary-cell { margin-top: 0; }
  .jzt-summary-strip .summary-cell:nth-child(3) { border-right: 1px solid #313131; }
  .jzt-summary-strip .summary-cell:nth-child(2n) { border-right: 0; }
  .jzt-summary-strip .summary-cell:nth-child(-n+4) { border-bottom: 1px solid #313131; }
  .jzt-summary-strip .summary-cell:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .jzt-summary-strip .jzt-cost-summary-cell { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr); gap: 12px; border-right: 0; border-bottom: 1px solid #313131; }
  .jzt-business-compare { padding-left: 9px; }
  .jzt-channel-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jzt-channel-band > div { min-height: 58px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
  .jzt-channel-band > div:nth-child(2n) { border-right: 0; }
  .jzt-channel-band > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .jzt-store-meta { align-items: flex-end; flex-direction: column; gap: 5px; }
  .jzt-store-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 14px; }
  .jzt-store-channels span:last-child { grid-column: 1 / -1; }
  .jzt-metric:nth-child(3n), .jzt-metric:nth-child(5n) { border-right: 1px solid var(--line); }
  .jzt-metric:nth-child(2n) { border-right: 0; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 20px; }
  .todo-heading { flex-direction: column; }
  .todo-heading-actions { width: 100%; justify-content: space-between; }
  .todo-controls .filters { grid-template-columns: 1fr; }
  .todo-controls input[type="search"] { min-width: 0; width: 100%; }
  .todo-groups { grid-template-columns: 1fr; }
  .todo-store-header { align-items: flex-start; flex-direction: column; }
  .todo-store-meta { white-space: normal; }
  .heading-actions span { display: none; }
  .heading-actions .icon-text-button, .heading-actions .primary-button { width: 38px; padding: 0; }
  .account-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat-filter { min-width: 0; padding: 8px 10px; }
  .stat-filter strong { font-size: 17px; }
  .account-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .account-controls .search-box { grid-column: 1 / -1; width: 100%; }
  .account-controls select { width: 100%; min-width: 0; }
  .account-controls .icon-button { margin-left: 0; }
  .account-table { display: none; }
  .mobile-account-list { display: grid; }
  .mobile-account-card { padding: 14px; border-bottom: 1px solid var(--line); }
  .mobile-account-card:last-child { border-bottom: 0; }
  .mobile-account-card h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
  .mobile-account-card .mobile-account-name { margin: 5px 0 12px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
  .mobile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
  .mobile-field .inline-input { width: 100%; }
  .mobile-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .mobile-card-footer > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mobile-card-footer .collection-state small { display: none; }
  .mobile-card-footer small { color: var(--muted); }
  .pagination { justify-content: center; flex-wrap: wrap; }
  .page-info { width: 100%; margin: 0 0 4px; text-align: center; }
  .after-sale-toolbar { align-items: stretch; flex-direction: column; }
  .after-sale-date-range { display: grid; grid-template-columns: 1fr auto 1fr; }
  .after-sale-date-range label { grid-column: 1 / -1; }
  .after-sale-date-range input { width: 100%; min-width: 0; }
  .after-sale-toolbar-actions { justify-content: space-between; }
  .after-sale-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .after-sale-summary-card { min-height: 68px; padding: 10px 12px; }
  .after-sale-summary-card:last-child { grid-column: 1 / -1; }
  .after-sale-summary-card strong { font-size: 18px; }
  .after-sale-quick-filters { align-items: flex-start; flex-direction: column; gap: 7px; }
  .after-sale-quick-options { gap: 8px 12px; }
  .after-sale-filter-grid { grid-template-columns: 1fr; }
  .after-sale-field-wide { grid-column: 1; }
  .after-sale-filter-actions .primary-button, .after-sale-filter-actions .icon-text-button { flex: 1; }
  .after-sale-table-frame { overflow: visible; border: 0; background: transparent; }
  .after-sale-table-head { display: none; }
  .after-sale-list { gap: 8px; padding: 0; background: transparent; }
  .after-sale-item-header { min-height: 0; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; white-space: normal; }
  .after-sale-item-header strong { width: calc(100% - 82px); }
  .after-sale-item-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after-sale-item-grid > div { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .after-sale-item-grid > div:nth-child(2n) { border-right: 0; }
  .after-sale-item-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .after-sale-product { grid-column: 1 / -1; min-height: 112px !important; border-right: 0 !important; }
  .after-sale-operate { grid-column: 1 / -1; min-height: 58px !important; border-right: 0 !important; }
  .after-sale-process-button { width: 100%; }
  .order-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-summary > div { min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .order-summary > div:nth-child(2n) { border-right: 0; }
  .order-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .order-filters { grid-template-columns: 1fr; }
  .order-filter-actions { align-items: stretch; }
  .order-card { overflow: hidden; }
  .order-card-header { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; }
  .order-card-header > div:first-child { grid-column: 1 / -1; grid-row: 1; }
  .order-card-header .order-card-procurement-summary { grid-column: 1 / -1; grid-row: 2; }
  .order-card-header .order-warehouse { max-width: 100%; }
  .order-card-body { min-width: 0; grid-template-columns: 1fr; }
  .order-bulk-toolbar { flex-wrap: wrap; }
  .order-profit-totals { width: 100%; margin-left: 0; padding: 9px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .supplemental-shipment { min-width: 0; grid-template-columns: 1fr; }
  .supplemental-shipment > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .order-card-body > div { padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .order-card-body > div:last-child { border-bottom: 0; }
  .order-product-copy small { white-space: normal; }
}

@media (max-width: 390px) {
  .brand-copy strong { font-size: 13px; }
  .system-state strong { font-size: 12px; }
  .summary-cell { padding: 13px; }
  .summary-cell span { font-size: 11px; }
  .summary-cell strong { font-size: 19px; }
  .filters { grid-template-columns: 1fr; }
  .search-box { grid-column: 1; }
  .after-sale-item-grid { grid-template-columns: 1fr; }
  .after-sale-item-grid > div, .after-sale-item-grid > div:nth-child(2n), .after-sale-item-grid > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .after-sale-item-grid > div:last-child { border-bottom: 0; }
}
  .procurement-link-action { margin-left: 7px; padding: 2px 7px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #475569; font: inherit; font-size: 12px; cursor: pointer; }
  .procurement-link-action:hover { border-color: #1677ff; color: #1677ff; }
  .modal-hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
  .modal-field { display: grid; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 13px; }
  .modal-field input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; font: inherit; color: var(--text); }