:root {
  --green: #0b8f55;
  --green-dark: #07683e;
  --green-pale: #e8f6ee;
  --ink: #15201a;
  --muted: #718078;
  --line: #e3eae6;
  --paper: #fff;
  --canvas: #f3f6f4;
  --blue: #2b72c4;
  --amber: #c3832f;
  --red: #c24f4f;
  --violet: #785bb8;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(11, 143, 85, .22);
  outline-offset: 2px;
}

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(450px, 1.08fr) minmax(420px, .92fr);
  background: #fff;
}
.login-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px clamp(42px, 6vw, 100px);
  color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(88, 223, 152, .22), transparent 28%),
    radial-gradient(circle at 12% 85%, rgba(255, 255, 255, .12), transparent 25%),
    linear-gradient(145deg, #043d2d 0%, #08784b 58%, #0b965a 100%);
}
.login-visual::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -170px; bottom: 80px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
}
.brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  color: #08784b; background: #fff;
  font-weight: 900; font-size: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.brand strong { display: block; font-size: 22px; letter-spacing: 2px; }
.brand small { opacity: .68; letter-spacing: .5px; }
.login-copy { position: relative; z-index: 1; max-width: 670px; margin: 80px 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  color: #8cf0ba; text-transform: uppercase;
}
.kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.login-copy h1 {
  margin: 20px 0; max-width: 600px;
  font-size: clamp(42px, 5vw, 72px); line-height: 1.12; letter-spacing: -2px;
}
.login-copy p { margin: 0; max-width: 570px; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.9; }
.flow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-top: 50px; position: relative;
}
.flow::before { content: ""; position: absolute; left: 7%; right: 7%; top: 21px; height: 1px; background: rgba(255,255,255,.22); }
.flow div { position: relative; text-align: center; font-size: 12px; color: rgba(255,255,255,.65); }
.flow i {
  width: 43px; height: 43px; margin: 0 auto 11px; display: grid; place-items: center;
  border-radius: 50%; font-style: normal; font-size: 18px;
  color: #d4f8e4; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.login-stats { display: flex; gap: 55px; position: relative; z-index: 1; }
.login-stats strong { display: block; font-size: 27px; }
.login-stats span { font-size: 12px; color: rgba(255,255,255,.57); }
.login-panel { display: grid; place-items: center; padding: 50px clamp(28px, 6vw, 92px); }
.login-box { width: 100%; max-width: 510px; }
.mobile-brand { display: none; color: var(--green-dark); margin-bottom: 36px; }
.login-box > span { color: var(--green); font-size: 13px; font-weight: 700; }
.login-box h2 { margin: 9px 0 8px; font-size: 31px; }
.login-box > p { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.role-list { display: grid; gap: 10px; }
.role-card {
  border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 13px 15px;
  display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 13px; text-align: left;
  color: var(--ink); transition: .2s;
}
.role-card:hover { border-color: #a9d8bf; transform: translateY(-1px); }
.role-card.active { border-color: var(--green); background: #f5fcf8; box-shadow: 0 0 0 3px rgba(11,143,85,.08); }
.role-card img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--green-pale); }
.role-card strong, .role-card small { display: block; }
.role-card strong { font-size: 14px; margin-bottom: 3px; }
.role-card small { color: var(--muted); }
.check {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  color: transparent; border: 1px solid #ced7d2; font-size: 12px;
}
.role-card.active .check { color: #fff; border-color: var(--green); background: var(--green); }
.account-box {
  display: grid; grid-template-columns: 1fr 1fr; padding: 14px 17px; margin: 18px 0;
  border-radius: 12px; background: var(--canvas); border: 1px solid var(--line);
}
.account-box span, .account-box strong { display: block; font-size: 12px; }
.account-box span { color: var(--muted); margin-bottom: 3px; }
.login-fields { display: grid; gap: 12px; margin: 18px 0; }
.login-fields label > span { display: block; margin-bottom: 6px; color: #445249; font-size: 11px; font-weight: 700; }
.login-fields input {
  width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink); background: #fff;
}
.api-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.api-input-row .secondary { padding-inline: 12px; white-space: nowrap; font-size: 11px; }
.login-error {
  margin: 0 0 13px; padding: 10px 12px; border: 1px solid #f1cccc; border-radius: 9px;
  color: #a33f3f; background: #fff2f1; font-size: 11px; line-height: 1.6;
}
.primary, .secondary {
  border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 700; transition: .2s;
}
.primary { color: #fff; background: var(--green); box-shadow: 0 8px 20px rgba(11,143,85,.18); }
.primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.primary:disabled { opacity: .62; cursor: wait; transform: none; }
.secondary { color: #3c4a42; background: #fff; border: 1px solid var(--line); }
.secondary:hover { border-color: #a9b9b0; }
.enter { width: 100%; height: 50px; }
.login-note { margin: 16px 0 0; text-align: center; color: #96a099; font-size: 12px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 254px 1fr; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 254px;
  display: flex; flex-direction: column; padding: 24px 15px;
  color: #dbe9e1; background: #092d22;
}
.sidebar .brand { padding: 0 9px 20px; }
.sidebar .brand-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 18px; }
.sidebar .brand strong { font-size: 17px; }
.sidebar .brand small { font-size: 10px; }
.role-switch {
  position: relative; margin: 4px 0 20px;
  border-radius: 12px; background: rgba(255,255,255,.07);
}
.role-switch > button {
  width: 100%; display: grid; grid-template-columns: 39px 1fr 18px; gap: 10px; align-items: center;
  padding: 10px; border: 0; color: inherit; text-align: left; background: transparent;
}
.role-switch img { width: 39px; height: 39px; border-radius: 9px; object-fit: cover; background: #dff4e8; }
.role-switch small, .role-switch strong { display: block; }
.role-switch small { color: #829d90; font-size: 10px; }
.role-switch strong { font-size: 13px; margin-top: 2px; }
.role-menu {
  display: none; position: absolute; top: 58px; left: 0; right: 0; z-index: 3;
  padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
  background: #113c2f; box-shadow: 0 18px 35px rgba(0,0,0,.25);
}
.role-menu.open { display: grid; }
.role-menu button {
  display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 8px;
  color: #dbe9e1; background: transparent; text-align: left;
}
.role-menu button:hover { background: rgba(255,255,255,.08); }
.role-menu img { width: 28px; height: 28px; }
.nav-label { padding: 0 12px 7px; color: #668276; font-size: 10px; letter-spacing: 1.5px; }
.nav { min-height: 0; display: grid; align-content: start; gap: 4px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.nav button {
  width: 100%; display: grid; grid-template-columns: 27px 1fr auto; align-items: center;
  padding: 10px 11px; border: 0; border-radius: 9px; text-align: left;
  color: #a8beb3; background: transparent; font-size: 13px;
}
.nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav button.active { color: #fff; background: var(--green); }
.nav-icon { font-style: normal; text-align: center; font-size: 15px; }
.badge { min-width: 20px; padding: 2px 6px; border-radius: 20px; text-align: center; font-size: 10px; background: rgba(255,255,255,.13); }
.sidebar-bottom { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-bottom button { width: 100%; padding: 10px; border: 0; color: #91aa9e; background: transparent; text-align: left; }
.main { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 70px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.menu-btn { display: none; border: 0; background: transparent; font-size: 22px; }
.crumb { color: var(--muted); font-size: 11px; }
.topbar h2 { margin: 1px 0 0; font-size: 17px; }
.top-actions { display: flex; align-items: center; gap: 13px; }
.search { display: flex; align-items: center; gap: 8px; width: 250px; padding: 9px 12px; border-radius: 9px; background: var(--canvas); }
.search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
.demo-pill { padding: 6px 10px; border-radius: 20px; color: var(--amber); background: #fff5df; font-size: 11px; font-weight: 700; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 10px; font-weight: 700; }
.api-online { color: var(--green); font-size: 11px; font-weight: 700; }
.content { padding: 28px; }

.api-state {
  min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; border: 1px solid var(--line); border-radius: 16px; text-align: center; background: #fff;
}
.api-state > span:not(.spinner) {
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 15px;
  border-radius: 50%; color: #fff; background: var(--red); font-size: 24px; font-weight: 800;
}
.api-state strong { font-size: 16px; }
.api-state p { max-width: 560px; margin: 8px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.spinner {
  width: 36px; height: 36px; margin-bottom: 18px; border: 3px solid var(--green-pale);
  border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.api-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.api-kv > div { min-width: 0; padding: 12px; border-radius: 9px; background: var(--canvas); }
.api-kv span, .api-kv strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-kv span { margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.api-kv strong { font-size: 11px; }

.hero {
  position: relative; overflow: hidden; min-height: 205px; padding: 36px 40px;
  border-radius: 20px; color: #fff;
  background: linear-gradient(120deg, #087547, #0a9c59);
  box-shadow: 0 18px 40px rgba(5,104,61,.15);
}
.hero::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -50px; top: -80px;
  border: 44px solid rgba(255,255,255,.06); border-radius: 50%;
}
.hero-content { position: relative; z-index: 1; max-width: 670px; }
.verified { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 20px; background: rgba(255,255,255,.13); font-size: 11px; }
.hero h1 { margin: 14px 0 8px; font-size: clamp(26px, 3vw, 38px); }
.hero p { margin: 0; color: rgba(255,255,255,.72); }
.hero-art { position: absolute; right: 60px; bottom: -5px; z-index: 1; width: 158px; height: 158px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.2)); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.metric {
  position: relative; overflow: hidden; padding: 19px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 7px 20px rgba(25,50,37,.035);
}
.metric::after { content: ""; position: absolute; width: 55px; height: 55px; right: -18px; top: -18px; border-radius: 50%; background: var(--tone-pale, var(--green-pale)); }
.metric span { color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin: 8px 0 4px; font-size: 25px; }
.metric small { color: var(--tone, var(--green)); font-size: 10px; }
.tone-blue { --tone: var(--blue); --tone-pale: #e9f2fc; }
.tone-amber { --tone: var(--amber); --tone-pale: #fff3df; }
.tone-violet { --tone: var(--violet); --tone-pale: #f1ecfb; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 17px; margin-top: 17px; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.panel-head button { border: 0; color: var(--green); background: transparent; font-size: 11px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick {
  padding: 17px 10px; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); background: #fbfcfb; text-align: center;
}
.quick:hover { border-color: #a8d7bd; background: #f4fbf7; }
.quick i { display: block; font-style: normal; font-size: 22px; margin-bottom: 7px; }
.quick strong { font-size: 11px; }
.tasks { display: grid; }
.task {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
  padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left;
}
.task:last-child { border-bottom: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px #fff3df; }
.task strong, .task small { display: block; }
.task strong { font-size: 12px; }
.task small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.status { display: inline-block; padding: 4px 8px; border-radius: 20px; font-style: normal; font-size: 10px; white-space: nowrap; }
.status.warning, .status.neutral { color: #94601b; background: #fff2dd; }
.status.info { color: #2b66a3; background: #e8f1fb; }
.status.success { color: #087747; background: #e7f6ee; }
.status.danger { color: #ad4141; background: #fbe9e8; }
.chart { display: flex; align-items: end; gap: 10px; height: 150px; padding-top: 12px; }
.bar { flex: 1; position: relative; height: var(--h); border-radius: 7px 7px 2px 2px; background: linear-gradient(#33b979, #0c8e55); }
.bar::after { content: attr(data-label); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 9px; }
.orders { margin-top: 17px; }
.order-row, .table-row {
  display: grid; align-items: center; gap: 14px; padding: 13px 10px; border-top: 1px solid var(--line); font-size: 11px;
}
.order-row { grid-template-columns: 1.1fr 1.6fr 1.4fr 1fr .7fr; }
.order-row.header, .table-row.header { color: var(--muted); border-top: 0; background: #f8faf9; font-size: 10px; }
.mono { font-family: Consolas, monospace; }
.amount { font-weight: 700; }

.module-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.module-head h1 { margin: 5px 0; font-size: 27px; }
.module-head p { margin: 0; color: var(--muted); font-size: 12px; }
.module-head small { color: var(--green); font-weight: 700; }
.actions { display: flex; gap: 9px; }
.toolbar {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0;
}
.toolbar .search { flex: 1; width: auto; max-width: 430px; }
.filters { display: flex; gap: 5px; }
.filters button { padding: 7px 11px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; }
.filters button.active { color: var(--green-dark); background: var(--green-pale); font-weight: 700; }
.data-table { overflow: auto; border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: #fff; }
.table-row { grid-template-columns: minmax(190px, 1.8fr) 1fr 1.2fr .8fr .7fr .7fr .6fr; min-width: 950px; }
.record-title { display: flex; align-items: center; gap: 9px; }
.record-symbol { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-pale); }
.record-title strong, .record-title small { display: block; }
.record-title small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.view-btn { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--green-dark); background: #fff; font-size: 10px; }
.empty { padding: 50px; text-align: center; color: var(--muted); }
.table-foot { display: flex; justify-content: space-between; padding: 13px 16px; min-width: 950px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.drawer-layer, .modal-layer { position: fixed; inset: 0; z-index: 60; }
.backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,20,13,.48); backdrop-filter: blur(2px); }
.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(510px, 94vw); overflow: auto;
  padding: 26px; background: #fff; box-shadow: -20px 0 60px rgba(0,0,0,.16); animation: slide .22s ease-out;
}
@keyframes slide { from { transform: translateX(100%); } }
.drawer-head, .modal-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.icon-close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--canvas); }
.drawer-title { padding: 22px 0; }
.drawer-title h3 { margin: 0 0 5px; }
.drawer-title p { margin: 0; color: var(--muted); font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-grid div { padding: 13px; border-radius: 10px; background: var(--canvas); }
.detail-grid span, .detail-grid strong { display: block; font-size: 11px; }
.detail-grid span { color: var(--muted); margin-bottom: 5px; }
.drawer-section { margin-top: 22px; }
.drawer-section h4 { margin: 0 0 9px; font-size: 13px; }
.drawer-section p { margin: 0; color: #5d6c63; font-size: 12px; line-height: 1.8; }
.json-view {
  max-height: 330px; overflow: auto; margin: 0; padding: 14px; border-radius: 10px;
  color: #c9f2dc; background: #102c20; font: 10px/1.7 Consolas, monospace; white-space: pre-wrap; word-break: break-all;
}
.timeline { display: grid; gap: 14px; border-left: 2px solid var(--line); padding-left: 17px; }
.timeline div { position: relative; }
.timeline div::before { content: "✓"; position: absolute; left: -26px; top: 0; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 9px; }
.timeline strong, .timeline small { display: block; }
.timeline strong { font-size: 11px; }
.timeline small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 28px; }
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(510px, 92vw); padding: 25px; border-radius: 17px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.22);
}
.modal h3 { margin: 3px 0 0; }
.modal label { display: block; margin-top: 15px; }
.modal label span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; }
.modal input, .modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; resize: vertical; }
.modal-note { margin-top: 14px; padding: 10px; border-radius: 9px; color: var(--green-dark); background: var(--green-pale); font-size: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 11px 17px; border-radius: 10px; color: #fff; background: #163c2c;
  box-shadow: 0 14px 35px rgba(0,0,0,.18); font-size: 12px; animation: toast .2s ease-out;
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }
.mask { display: none; }

/* 商户、供应商、仓储桌面工作台 */
.business-page { max-width: 1480px; margin: 0 auto; }
.business-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px;
}
.business-page-head small, .business-hero small {
  color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1.7px;
}
.business-page-head h1 { margin: 7px 0 6px; font-size: 29px; letter-spacing: -.5px; }
.business-page-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.business-head-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.business-page-back {
  display: block; margin: 0 0 10px; padding: 0; border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 700;
}
.business-hero {
  position: relative; min-height: 224px; overflow: hidden; display: flex; align-items: center;
  padding: 40px 46px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(144,239,181,.25), transparent 27%),
    linear-gradient(120deg,#063d2e 0%,#087348 56%,#0e9a5b 100%);
  box-shadow: 0 18px 42px rgba(6,78,48,.14);
}
.business-hero::before {
  content:""; position:absolute; width:360px; height:360px; right:-70px; top:-170px;
  border: 54px solid rgba(255,255,255,.055); border-radius:50%;
}
.business-hero > div { position: relative; z-index: 1; max-width: 760px; }
.business-hero small { color: #91eab9; }
.business-hero h1 { margin: 13px 0 9px; font-size: clamp(28px,3vw,42px); }
.business-hero p { margin: 0; color: rgba(255,255,255,.73); font-size: 14px; }
.business-hero > div > div { display: flex; align-items: center; gap: 18px; margin-top: 25px; }
.business-hero > div > div span { color: rgba(255,255,255,.66); font-size: 11px; }
.business-hero-primary {
  padding: 11px 20px; border: 0; border-radius: 9px; color: #08633d; background: #fff; font-weight: 800;
}
.business-hero img {
  position: absolute; right: 70px; bottom: -3px; z-index: 1; width: 188px; height: 188px; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.22));
}
.business-flow-card {
  margin: 17px 0; padding: 18px 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff;
}
.business-flow-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.business-flow-title span { font-size: 13px; font-weight: 800; }
.business-flow-title small { color: var(--muted); font-size: 10px; }
.business-flow-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.business-flow-steps > div {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; padding-right: 25px;
}
.business-flow-steps i {
  flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: #07804c; background: #e8f7ef; border: 1px solid #ccebd9; font-style: normal; font-weight: 800;
}
.business-flow-steps strong, .business-flow-steps small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-flow-steps strong { font-size: 11px; }
.business-flow-steps small { margin-top: 3px; color: #95a098; font-size: 9px; }
.business-flow-steps b { position: absolute; right: 10px; color: #c5d2ca; font-weight: 400; }
.role-subpages { margin: 17px 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.role-subpages > header { margin-bottom: 14px; }
.role-subpages h2 { margin: 0; font-size: 15px; }
.role-subpages header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.role-subpages > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.role-subpages > div > button {
  min-width: 0; display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 15px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fbfcfb; text-align: left;
}
.role-subpages > div > button:hover { border-color: #9fd4b6; background: #f3fbf7; transform: translateY(-1px); }
.role-subpages button i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--green-pale); font-style: normal; font-size: 17px; }
.role-subpages button strong, .role-subpages button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-subpages button strong { font-size: 12px; }
.role-subpages button small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.role-subpages button b { color: var(--green); font-size: 9px; white-space: nowrap; }
.business-dashboard-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 17px; margin-top: 17px; }
.business-panel { padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.business-panel > header {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px;
}
.business-panel h2, .business-list-head h2 { margin: 0; font-size: 15px; }
.business-panel header p, .business-list-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.business-panel header > button { border: 0; color: var(--green); background: transparent; font-size: 11px; }
.business-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.business-shortcuts button {
  min-width: 0; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center;
  padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fbfcfb; text-align: left;
}
.business-shortcuts button:hover { border-color: #a6d8bd; background: #f4fbf7; transform: translateY(-1px); }
.business-shortcuts i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--green-pale); font-style: normal; }
.business-shortcuts strong, .business-shortcuts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-shortcuts strong { font-size: 11px; }
.business-shortcuts small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.business-shortcuts b { color: #9ca9a1; font-size: 17px; }
.business-todos { display: grid; }
.business-todos > button {
  display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; padding: 13px 2px;
  border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left;
}
.business-todos > button:last-child { border-bottom: 0; }
.business-todos > button > i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px #fff2dd; }
.business-todos > button > i.success { background: var(--green); box-shadow: 0 0 0 4px var(--green-pale); }
.business-todos > button > i.danger { background: var(--red); box-shadow: 0 0 0 4px #fbe9e8; }
.business-todos strong, .business-todos small { display: block; }
.business-todos strong { font-size: 11px; }
.business-todos small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.business-overview { margin-top: 17px; }
.business-kv { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.business-kv > div { padding: 13px; border-radius: 10px; background: #f6f8f7; }
.business-kv span, .business-kv strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-kv span { color: var(--muted); font-size: 9px; }
.business-kv strong { margin-top: 5px; font-size: 12px; }
.business-list-head {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 17px; padding: 17px 19px;
  border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #fff;
}
.business-tools { display: flex; align-items: center; gap: 10px; }
.business-tools .search { width: 280px; }
.business-product-grid {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 14px 14px; overflow: hidden; background: #fff;
}
.business-product-card { min-width: 0; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.business-product-card:nth-child(4n) { border-right: 0; }
.business-product-image {
  position: relative; height: 148px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #f4f7f5;
}
.business-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.business-product-image > span {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--green); background: var(--green-pale); font-size: 25px; font-weight: 900;
}
.business-product-image em { position: absolute; top: 9px; right: 9px; }
.business-product-body { padding: 13px 2px 10px; }
.business-product-body > small { color: var(--green); font-size: 9px; }
.business-product-body h3 { height: 36px; margin: 5px 0; overflow: hidden; font-size: 13px; line-height: 18px; }
.business-product-body p { height: 18px; margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.business-product-body > div { display: flex; align-items: end; justify-content: space-between; margin-top: 12px; }
.business-product-body > div strong { color: #f05235; font-size: 16px; }
.business-product-body > div span { color: var(--muted); font-size: 9px; }
.business-product-card footer { padding-top: 11px; border-top: 1px solid var(--line); }
.business-table { overflow: auto; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.business-table-row {
  min-width: 960px; display: grid; grid-template-columns: minmax(210px,1.8fr) 1fr 1.1fr .75fr .65fr minmax(175px,1fr);
  gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 11px;
}
.business-table-header { border-top: 0; color: var(--muted); background: #f8faf9; font-size: 10px; }
.business-table > footer { min-width: 960px; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.business-row-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.business-row-actions button { padding: 6px 9px; border-radius: 7px; font-size: 9px; font-weight: 700; }
.business-row-actions button.primary { border: 0; color: #fff; background: var(--green); box-shadow: none; }
.business-row-actions button.ghost { border: 1px solid #e9c8c4; color: #af4b40; background: #fff7f5; }
.business-empty { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; color: var(--muted); background: #fff; }
.business-empty i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-pale); font-style: normal; }
.business-empty strong { color: var(--ink); font-size: 13px; }
.business-empty span { font-size: 10px; }
.business-empty button { margin-top: 8px; }
.business-empty.compact { min-height: 180px; border: 0; }
.business-modal { width: min(700px,92vw); max-height: 90vh; overflow: auto; }
.business-modal-intro { margin: 15px 0 5px; color: var(--muted); font-size: 11px; }
.business-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
.business-modal select {
  width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff;
}
.procurement-dock {
  position: sticky; z-index: 12; bottom: 18px; display: flex; align-items: center; gap: 10px; margin: 16px auto 0;
  width: min(680px,calc(100% - 24px)); padding: 13px 15px; border: 1px solid #cce8d8; border-radius: 15px;
  background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(13,65,40,.16); backdrop-filter: blur(12px);
}
.procurement-dock > div { flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto 1fr; gap: 9px; align-items: center; }
.procurement-dock small { color: var(--green); font-weight: 800; }
.procurement-dock strong { font-size: 12px; }
.procurement-dock span { color: #f05235; font-size: 12px; font-weight: 800; }
.procurement-dock button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* 商户端五个一级页面 */
.merchant-command-page { padding-bottom: 24px; }
.merchant-command-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 21px;
}
.merchant-command-head small { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.merchant-command-head h1 { margin: 7px 0 6px; font-size: 29px; letter-spacing: -.65px; }
.merchant-command-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.merchant-command-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.merchant-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 16px; }
.merchant-kpi {
  position: relative; min-width: 0; overflow: hidden; padding: 18px 19px; border: 1px solid var(--line);
  border-radius: 15px; background: #fff;
}
.merchant-kpi::after { content:""; position: absolute; width: 58px; height: 58px; right: -19px; top: -19px; border-radius: 50%; background: #e2f3ea; }
.merchant-kpi.amber::after { background: #fff0d8; }
.merchant-kpi.blue::after { background: #e2eefb; }
.merchant-kpi.violet::after { background: #eee7fa; }
.merchant-kpi span,.merchant-kpi strong,.merchant-kpi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-kpi span { color: #65736b; font-size: 10px; }
.merchant-kpi strong { margin: 9px 0 6px; font-size: 25px; letter-spacing: -.4px; }
.merchant-kpi small { color: var(--green); font-size: 9px; }
.merchant-kpi.amber small { color: #d67c13; }
.merchant-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.merchant-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.merchant-panel > header h2 { margin: 0; font-size: 14px; }
.merchant-panel > header span { color: var(--muted); font-size: 9px; }
.merchant-dashboard-layout { display: grid; grid-template-columns: 1.4fr .96fr .78fr; gap: 14px; }
.merchant-trend-chart {
  height: 202px; border-bottom: 1px solid #e5ebe7;
  background: repeating-linear-gradient(to bottom,transparent 0,transparent 49px,#edf1ee 50px);
}
.merchant-trend-chart svg { width: 100%; height: 100%; }
.merchant-chart-legend { display: flex; gap: 18px; margin-top: 11px; color: var(--muted); font-size: 9px; }
.merchant-chart-legend span { display: flex; align-items: center; gap: 5px; }
.merchant-chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.merchant-chart-legend span:nth-child(2) i { background: var(--amber); }
.merchant-todo-list { display: grid; }
.merchant-todo-list button {
  display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; padding: 10px 0;
  border: 0; border-bottom: 1px solid #edf1ee; color: var(--ink); background: transparent; text-align: left;
}
.merchant-todo-list button:last-child { border-bottom: 0; }
.merchant-todo-list button > i {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  color: var(--green); background: var(--green-pale); font-style: normal; font-weight: 800;
}
.merchant-todo-list strong,.merchant-todo-list small { display: block; }
.merchant-todo-list strong { font-size: 11px; }
.merchant-todo-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.merchant-todo-list em { padding: 4px 7px; border-radius: 10px; color: #d2780d; background: #fff0dc; font-size: 8px; font-style: normal; }
.merchant-quick-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.merchant-quick-grid button {
  min-height: 68px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  background: #f8faf9; text-align: left;
}
.merchant-quick-grid button:hover { border-color: #9fd4b6; background: #f1faf5; }
.merchant-quick-grid i { display: block; margin-bottom: 7px; color: var(--green); font-size: 17px; font-style: normal; }
.merchant-quick-grid span { font-size: 10px; }
.merchant-health-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.merchant-health-strip button {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 13px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left;
}
.merchant-health-strip i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: #eef8f3; font-style: normal; }
.merchant-health-strip strong,.merchant-health-strip small { display: block; }
.merchant-health-strip strong { font-size: 10px; }
.merchant-health-strip small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.merchant-summary-band { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 13px; }
.merchant-summary-band > div { padding: 15px 17px; border: 1px solid #d6e9de; border-radius: 13px; background: linear-gradient(135deg,#e5f5ec,#f9fcfa); }
.merchant-summary-band span,.merchant-summary-band strong { display: block; }
.merchant-summary-band span { color: var(--muted); font-size: 9px; }
.merchant-summary-band strong { margin-top: 7px; font-size: 19px; }
.merchant-procurement-toolbar { display: flex; gap: 9px; margin-bottom: 13px; }
.merchant-procurement-toolbar label { flex: 1; display: flex; align-items: center; height: 39px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #fff; }
.merchant-procurement-toolbar input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 9px; background: transparent; }
.merchant-procurement-toolbar > button { padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; color: #536159; background: #fff; font-size: 10px; }
.merchant-procurement-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.62fr); gap: 13px; }
.merchant-source-table { min-width: 760px; }
.merchant-panel:has(.merchant-source-table) { overflow-x: auto; }
.merchant-source-table .head,.merchant-source-table .row {
  display: grid; grid-template-columns: 1.8fr 1.05fr .58fr .7fr .8fr; gap: 10px; align-items: center;
}
.merchant-source-table .head { padding: 9px 10px; color: var(--muted); background: #f7f9f8; font-size: 9px; }
.merchant-source-table .row { padding: 10px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.merchant-source-table .row:last-child { border-bottom: 0; }
.merchant-source-table .row > span > small,.merchant-source-table .source-product b small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }
.merchant-source-table .source-product { min-width: 0; display: flex; gap: 9px; align-items: center; }
.merchant-source-table .source-product img,.merchant-source-table .source-product > i {
  flex: 0 0 41px; width: 41px; height: 41px; object-fit: contain; padding: 3px; border-radius: 9px; background: #f1f5f2;
}
.merchant-source-table .source-product > i { display: grid; place-items: center; color: var(--green); font-style: normal; }
.merchant-source-table .source-product b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-source-table .business-row-actions .view-btn { display: none; }
.merchant-procurement-side { display: grid; align-content: start; gap: 12px; }
.merchant-supplier-list > div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 10px 0; border-bottom: 1px solid #edf1ee; }
.merchant-supplier-list > div:last-child { border-bottom: 0; }
.merchant-supplier-list span b,.merchant-supplier-list span small { display: block; }
.merchant-supplier-list span b { font-size: 10px; }
.merchant-supplier-list span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.merchant-supplier-list em { color: var(--green); font-size: 11px; font-style: normal; }
.merchant-supplier-list > div > i { grid-column: 1/-1; height: 5px; overflow: hidden; border-radius: 4px; background: #ebf1ed; }
.merchant-supplier-list > div > i b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.merchant-purchase-cart { padding: 17px; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#073d2e,#08764f); }
.merchant-purchase-cart small,.merchant-purchase-cart strong,.merchant-purchase-cart span { display: block; }
.merchant-purchase-cart small { color: #a8d8c2; }
.merchant-purchase-cart strong { margin: 8px 0 5px; font-size: 24px; }
.merchant-purchase-cart span { color: #c6e4d6; font-size: 9px; }
.merchant-purchase-cart button { width: 100%; margin-top: 13px; color: #087247; background: #fff; }
.merchant-purchase-cart button:disabled { opacity: .5; cursor: not-allowed; }
.merchant-child-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.merchant-child-links button {
  min-width: 0; display: grid; grid-template-columns: 37px 1fr auto; gap: 10px; align-items: center; padding: 13px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left;
}
.merchant-child-links button:hover { border-color: #9fd4b6; background: #f4fbf7; transform: translateY(-1px); }
.merchant-child-links i { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--green-pale); font-style: normal; }
.merchant-child-links strong,.merchant-child-links small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-child-links strong { font-size: 10px; }
.merchant-child-links small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.merchant-child-links button > b { color: var(--green); font-size: 9px; white-space: nowrap; }
.merchant-operations-layout { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(290px,.68fr); gap: 13px; }
.merchant-operation-side { display: grid; align-content: start; gap: 12px; }
.merchant-order-flow { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 17px; }
.merchant-order-flow > div { text-align: center; }
.merchant-order-flow i { width: 35px; height: 35px; display: grid; place-items: center; margin: 0 auto 6px; border-radius: 50%; color: var(--green); background: var(--green-pale); font-style: normal; font-weight: 800; }
.merchant-order-flow span { color: var(--muted); font-size: 9px; }
.merchant-order-flow > b { flex: 1; height: 1px; margin: -16px 8px 0; overflow: hidden; color: transparent; background: #d4e4dc; }
.merchant-orders-table .head,.merchant-orders-table .row { display: grid; grid-template-columns: 1.15fr .9fr .62fr .72fr .52fr; gap: 9px; align-items: center; }
.merchant-orders-table .head { padding: 9px 10px; color: var(--muted); background: #f7f9f8; font-size: 9px; }
.merchant-orders-table .row { padding: 11px 10px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.merchant-orders-table .row:last-child { border-bottom: 0; }
.merchant-orders-table .row button { border: 0; color: var(--green); background: transparent; font-size: 9px; }
.merchant-stock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.merchant-stock-grid > div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.merchant-stock-grid b { font-size: 10px; }
.merchant-stock-grid i { display: block; height: 5px; margin-top: 9px; overflow: hidden; border-radius: 4px; background: #e9efeb; }
.merchant-stock-grid i span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.merchant-stock-grid i .amber { background: var(--amber); }
.merchant-stock-grid i .blue { background: #7895b5; }
.merchant-ranking { display: grid; }
.merchant-ranking button { display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; padding: 9px 0; border: 0; border-bottom: 1px solid #edf1ee; color: var(--ink); background: transparent; text-align: left; }
.merchant-ranking button:last-child { border-bottom: 0; }
.merchant-ranking i { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; color: var(--green); background: var(--green-pale); font-size: 8px; font-style: normal; font-weight: 800; }
.merchant-ranking span,.merchant-ranking b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.merchant-ranking b { color: #ed6c25; }
.merchant-analytics-layout { display: grid; grid-template-columns: 1.5fr .62fr; gap: 13px; }
.merchant-donuts { min-height: 220px; display: flex; align-items: center; justify-content: space-around; gap: 14px; }
.merchant-donut { width: 102px; height: 102px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 69%,#e5ede8 69%); position: relative; }
.merchant-donut::after { content:""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.merchant-donut.amber { background: conic-gradient(var(--amber) 0 42%,#e5ede8 42%); }
.merchant-donut b,.merchant-donut span { z-index: 1; position: absolute; }
.merchant-donut b { margin-top: -10px; font-size: 17px; }
.merchant-donut span { margin-top: 25px; color: var(--muted); font-size: 7px; }
.merchant-analytics-bottom { display: grid; grid-template-columns: 1.5fr .62fr; gap: 13px; margin-top: 13px; }
.merchant-fund-card { padding: 19px; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#073c2e,#087850); }
.merchant-fund-card small,.merchant-fund-card strong { display: block; }
.merchant-fund-card small { color: #acd8c4; font-size: 9px; }
.merchant-fund-card strong { margin: 8px 0 15px; font-size: 25px; }
.merchant-fund-card > div { display: flex; gap: 17px; color: #c8e6d8; font-size: 8px; }
.merchant-fund-card button { margin-top: 20px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 9px; }
.merchant-store-hero { display: grid; grid-template-columns: 1.45fr .55fr; gap: 13px; margin-bottom: 13px; }
.merchant-store-hero > .merchant-store-profile {
  min-width: 0; display: flex; align-items: center; gap: 15px; padding: 21px; border-radius: 15px;
  color: #fff; background: linear-gradient(120deg,#073c2e,#087951);
}
.merchant-store-profile > img,.merchant-store-profile > i { flex: 0 0 61px; width: 61px; height: 61px; display: grid; place-items: center; object-fit: contain; padding: 5px; border-radius: 14px; color: var(--green); background: #fff; font-size: 25px; font-style: normal; font-weight: 900; }
.merchant-store-hero h2 { margin: 0 0 6px; font-size: 17px; }
.merchant-store-profile p { margin: 0; color: #c0dfd1; font-size: 9px; }
.merchant-store-profile span { display: inline-block; margin-top: 9px; padding: 4px 8px; border-radius: 9px; color: #087247; background: #e9f8f0; font-size: 8px; }
.merchant-store-profile > b { margin-left: auto; text-align: center; font-size: 25px; }
.merchant-store-profile > b small { display: block; margin-top: 4px; color: #b9dfcd; font-size: 8px; font-weight: 400; }
.merchant-health-list p { display: flex; justify-content: space-between; margin: 10px 0; font-size: 9px; }
.merchant-health-list p b { color: var(--green); }
.merchant-store-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 13px; }
.merchant-store-side { display: grid; align-content: start; gap: 12px; }
.merchant-setting-list > div { display: grid; grid-template-columns: 34px 1fr 32px; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf1ee; }
.merchant-setting-list > div:last-child { border-bottom: 0; }
.merchant-setting-list i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-pale); font-style: normal; }
.merchant-setting-list b,.merchant-setting-list small { display: block; }
.merchant-setting-list b { font-size: 10px; }
.merchant-setting-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.merchant-setting-list em { width: 32px; height: 18px; padding: 3px; border-radius: 12px; background: var(--green); }
.merchant-setting-list em::after { content:""; display: block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; background: #fff; }
.merchant-staff-preview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.merchant-staff-preview button { padding: 10px 4px; border: 0; border-radius: 10px; color: var(--ink); background: #f7f9f8; }
.merchant-staff-preview i { width: 31px; height: 31px; display: grid; place-items: center; margin: 0 auto 6px; border-radius: 50%; color: var(--green); background: #dfefe7; font-style: normal; }
.merchant-staff-preview b,.merchant-staff-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-staff-preview b { font-size: 9px; }
.merchant-staff-preview small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.merchant-permission-link { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; }
.merchant-permission-link b,.merchant-permission-link small { display: block; }
.merchant-permission-link b { font-size: 9px; }
.merchant-permission-link small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.merchant-permission-link em { color: var(--green); font-size: 8px; font-style: normal; }

/* 供应商端五个一级页面 */
.supplier-products-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(265px,.58fr); gap: 13px; }
.supplier-product-side,.supplier-inbound-side,.supplier-company-side { display: grid; align-content: start; gap: 12px; }
.merchant-panel:has(.supplier-product-table),.merchant-panel:has(.supplier-inbound-table),.merchant-panel:has(.supplier-sales-table) { overflow-x: auto; }
.supplier-product-table { min-width: 800px; }
.supplier-product-table .head,.supplier-product-table .row {
  display: grid; grid-template-columns: 1.7fr 1fr .7fr .65fr .65fr 1fr; gap: 10px; align-items: center;
}
.supplier-product-table .head { padding: 9px 10px; color: var(--muted); background: #f7f9f8; font-size: 9px; }
.supplier-product-table .row { padding: 10px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.supplier-product-table .row:last-child { border-bottom: 0; }
.supplier-product-table .row > span > small,.supplier-product-cell b small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }
.supplier-product-cell { min-width: 0; display: flex; align-items: center; gap: 9px; }
.supplier-product-cell img,.supplier-product-cell > i {
  flex: 0 0 41px; width: 41px; height: 41px; display: grid; place-items: center; object-fit: contain;
  padding: 3px; border-radius: 9px; color: var(--green); background: #f0f5f2; font-style: normal;
}
.supplier-product-cell b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-product-table .business-row-actions .view-btn,.supplier-inbound-table .business-row-actions .view-btn,.supplier-sales-table .business-row-actions .view-btn { display: none; }
.supplier-quality-list > div { padding: 11px 0; border-bottom: 1px solid #edf1ee; }
.supplier-quality-list > div:last-child { border-bottom: 0; }
.supplier-quality-list span { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; }
.supplier-quality-list span em { color: var(--green); font-style: normal; }
.supplier-quality-list > div > i { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: #e9efeb; }
.supplier-quality-list > div > i b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.supplier-quality-list > div > i b.amber { background: var(--amber); }
.supplier-primary-page .merchant-purchase-cart > button { border: 0; box-shadow: none; }
.supplier-inbound-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 13px; }
.supplier-inbound-table { min-width: 800px; }
.supplier-inbound-table .head,.supplier-inbound-table .row {
  display: grid; grid-template-columns: 1.45fr 1fr .58fr .72fr .62fr .9fr; gap: 9px; align-items: center;
}
.supplier-inbound-table .head { padding: 9px 10px; color: var(--muted); background: #f7f9f8; font-size: 9px; }
.supplier-inbound-table .row { padding: 11px 10px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.supplier-inbound-table .row:last-child { border-bottom: 0; }
.supplier-inbound-table .row > span > small,.supplier-sales-table .row > span > small { display: block; margin-top: 4px; color: var(--muted); }
.supplier-warehouse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.supplier-warehouse-grid button { padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #f8faf9; text-align: left; }
.supplier-warehouse-grid button:hover { border-color: #9fd4b6; background: #f2faf6; }
.supplier-warehouse-grid b,.supplier-warehouse-grid small,.supplier-warehouse-grid em { display: block; }
.supplier-warehouse-grid b { font-size: 9px; }
.supplier-warehouse-grid small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.supplier-warehouse-grid em { margin-top: 7px; color: var(--green); font-size: 8px; font-style: normal; }
.supplier-sales-bottom { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.62fr); gap: 13px; margin-top: 13px; }
.supplier-sales-table { min-width: 780px; }
.supplier-sales-table .head,.supplier-sales-table .row {
  display: grid; grid-template-columns: 1.45fr 1fr .55fr .7fr .62fr .9fr; gap: 9px; align-items: center;
}
.supplier-sales-table .head { padding: 9px 10px; color: var(--muted); background: #f7f9f8; font-size: 9px; }
.supplier-sales-table .row { padding: 11px 10px; border-bottom: 1px solid #edf1ee; font-size: 9px; }
.supplier-sales-table .row:last-child { border-bottom: 0; }
.supplier-company-hero { display: grid; grid-template-columns: 1.45fr .55fr; gap: 13px; margin-bottom: 13px; }
.supplier-company-profile {
  min-width: 0; display: flex; align-items: center; gap: 15px; padding: 21px; border-radius: 15px;
  color: #fff; background: linear-gradient(120deg,#073c2e,#087951);
}
.supplier-company-profile > i { flex: 0 0 61px; width: 61px; height: 61px; display: grid; place-items: center; border-radius: 14px; color: var(--green); background: #fff; font-size: 25px; font-style: normal; font-weight: 900; }
.supplier-company-profile h2 { margin: 0 0 6px; font-size: 17px; }
.supplier-company-profile p { margin: 0; color: #c0dfd1; font-size: 9px; }
.supplier-company-profile span { display: inline-block; margin-top: 9px; padding: 4px 8px; border-radius: 9px; color: #087247; background: #e9f8f0; font-size: 8px; }
.supplier-company-profile > b { margin-left: auto; text-align: center; font-size: 25px; }
.supplier-company-profile > b small { display: block; margin-top: 4px; color: #b9dfcd; font-size: 8px; font-weight: 400; }
.supplier-company-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 13px; }
.supplier-primary-page .merchant-setting-list > div { grid-template-columns: 34px 1fr auto; }
.supplier-primary-page .merchant-setting-list > div > strong { color: var(--green); font-size: 8px; white-space: nowrap; }
.supplier-primary-page .merchant-setting-list.compact > div { padding: 9px 0; }

@media (max-width: 1250px) {
  .merchant-dashboard-layout { grid-template-columns: 1.25fr .9fr; }
  .merchant-dashboard-layout > :last-child { grid-column: 1/-1; }
  .merchant-quick-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .merchant-procurement-layout,.merchant-operations-layout { grid-template-columns: 1fr; }
  .merchant-procurement-side { grid-template-columns: 1fr 1fr; }
  .merchant-operation-side { grid-template-columns: 1fr 1fr; }
  .supplier-products-layout,.supplier-inbound-layout { grid-template-columns: 1fr; }
  .supplier-product-side,.supplier-inbound-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .merchant-command-head { align-items: flex-start; flex-direction: column; }
  .merchant-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .merchant-dashboard-layout,.merchant-analytics-layout,.merchant-analytics-bottom,.merchant-store-hero,.merchant-store-layout,.supplier-sales-bottom,.supplier-company-hero,.supplier-company-layout { grid-template-columns: 1fr; }
  .merchant-dashboard-layout > :last-child { grid-column: auto; }
  .merchant-child-links,.merchant-health-strip { grid-template-columns: 1fr; }
  .merchant-procurement-side,.merchant-operation-side { grid-template-columns: 1fr; }
  .supplier-product-side,.supplier-inbound-side { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .merchant-kpis,.merchant-summary-band { grid-template-columns: 1fr; }
  .merchant-procurement-toolbar { align-items: stretch; flex-direction: column; }
  .merchant-procurement-toolbar > button { height: 38px; }
  .merchant-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .merchant-command-actions { width: 100%; }
  .merchant-command-actions button { flex: 1; }
}

/* 消费者商城首页 */
.consumer-shell {
  min-height: 100vh;
  color: #252d28;
  background: #f5f6f5;
}
.consumer-shell button { color: inherit; }
.consumer-wrap { width: min(1296px, calc(100% - 40px)); margin-inline: auto; }
.consumer-utility {
  height: 34px; color: #59625d; background: #f7f8f7; border-bottom: 1px solid #ecefed;
  font-size: 12px;
}
.consumer-utility .consumer-wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.consumer-utility b { color: #0a8350; }
.consumer-slogan { color: #168b54; font-weight: 700; }
.consumer-utility nav { display: flex; align-items: center; gap: 21px; margin-left: auto; }
.consumer-utility nav button { padding: 0; border: 0; background: transparent; font-size: 12px; }
.consumer-header { background: #fff; }
.consumer-header-main { height: 104px; display: grid; grid-template-columns: 235px minmax(360px, 1fr) 190px; align-items: center; gap: 35px; }
.consumer-logo {
  display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; text-align: left;
}
.consumer-logo i {
  position: relative; width: 55px; height: 55px; display: grid; place-items: center; overflow: hidden;
  color: transparent; background: linear-gradient(145deg, #8cbe39, #278548); border-radius: 70% 20% 70% 20%; font-style: normal; font-weight: 900;
}
.consumer-logo i::before {
  content: ""; position: absolute; width: 23px; height: 31px; left: 8px; bottom: 4px;
  border-radius: 100% 0 100% 0; background: rgba(255,255,255,.95); transform: rotate(-15deg);
}
.consumer-logo i::after {
  content: ""; position: absolute; width: 12px; height: 31px; left: 29px; top: 3px;
  border-radius: 100% 0 100% 0; background: rgba(255,255,255,.92); transform: rotate(35deg);
}
.consumer-logo strong, .consumer-logo small { display: block; color: #39863a; }
.consumer-logo strong { font-size: 28px; letter-spacing: 2px; }
.consumer-logo small { margin-top: 2px; font-size: 11px; letter-spacing: 5px; }
.consumer-search-wrap { align-self: center; }
.consumer-search {
  height: 42px; display: grid; grid-template-columns: 38px 1fr 82px; align-items: center;
  border: 2px solid #09804a; border-radius: 4px; overflow: hidden; background: #fff;
}
.consumer-search > span { color: #a8b0ab; text-align: center; font-size: 20px; }
.consumer-search input { min-width: 0; height: 100%; border: 0; outline: 0; }
.consumer-search > button { height: 100%; border: 0; color: #fff; background: #087a47; font-weight: 700; }
.consumer-hotwords { display: flex; gap: 15px; margin-top: 8px; color: #929994; font-size: 11px; }
.consumer-hotwords button { padding: 0; border: 0; color: #6f7772; background: transparent; font-size: 11px; }
.consumer-cart {
  position: relative; height: 42px; border: 1px solid #dfe5e1; border-radius: 4px; background: #fff; font-weight: 700;
}
.consumer-cart span { margin-right: 7px; font-size: 19px; }
.consumer-cart b {
  position: absolute; right: 18px; top: 5px; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 12px; color: #fff; background: #f58415; font-size: 11px;
}
.consumer-nav { height: 48px; background: #fff; border-bottom: 1px solid #e7ebe8; }
.consumer-nav .consumer-wrap { height: 100%; display: flex; align-items: stretch; gap: 10px; }
.consumer-nav button { min-width: 90px; padding: 0 14px; border: 0; background: transparent; font-weight: 700; font-size: 14px; }
.consumer-nav button.active { position: relative; color: #087a47; }
.consumer-nav button.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: #087a47; }
.consumer-nav .category-title { width: 230px; flex: 0 0 230px; color: #fff; background: linear-gradient(135deg,#087a47,#0c9255); border-radius: 8px 8px 0 0; text-align: left; }
.consumer-home { padding: 14px 0 42px; background: linear-gradient(#f3f6f4 0 580px,#f7f8f7 580px); }
.consumer-main-grid { display: grid; grid-template-columns: 230px minmax(0,1fr) 280px; gap: 12px; }
.consumer-categories {
  min-height: 376px; padding: 8px 0; border-radius: 0 0 12px 12px; background: linear-gradient(155deg,#123f30,#1d6748);
  box-shadow: 0 12px 30px rgba(18,63,48,.12);
}
.consumer-categories > button {
  width: 100%; height: 36px; min-height: 36px; display: grid; grid-template-columns: 29px 1fr 15px; align-items: center;
  gap: 5px; padding: 3px 14px; border: 0; color: #fff; background: transparent; text-align: left;
}
.consumer-categories > button:hover { padding-left: 18px; background: rgba(255,255,255,.11); }
.consumer-categories i { font-style: normal; font-size: 14px; }
.consumer-categories i img { width: 18px; height: 18px; object-fit: contain; }
.consumer-categories i span { display: block; line-height: 1; }
.consumer-categories strong, .consumer-categories small { display: block; }
.consumer-categories strong { font-size: 12px; line-height: 1.15; }
.consumer-categories small { margin-top: 1px; color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consumer-categories b { color: rgba(255,255,255,.6); font-size: 18px; }
.consumer-center { min-width: 0; }
.consumer-hero-banner {
  position: relative; overflow: hidden; height: 298px; border-radius: 12px;
  background: radial-gradient(circle at 80% 20%, #ddefc4, transparent 38%), linear-gradient(100deg,#e8f5df,#f8f9e8);
  box-shadow: 0 12px 32px rgba(30,93,55,.08);
}
.consumer-hero-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.consumer-hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(236,248,226,.98) 0%,rgba(236,248,226,.78) 36%,transparent 70%); }
.consumer-hero-copy { position: relative; z-index: 2; width: 58%; padding: 40px 0 0 46px; color: #246c37; }
.consumer-hero-copy > small { display: block; margin-bottom: 8px; color: #73a779; font-size: 8px; font-weight: 700; letter-spacing: 2.4px; }
.consumer-hero-copy > em { display: inline-block; margin-bottom: 9px; padding: 4px 10px; border-radius: 12px; color: #247445; background: rgba(255,255,255,.7); font-size: 10px; font-style: normal; }
.consumer-hero-copy h1 { margin: 0 0 10px; font-size: clamp(28px,2.3vw,40px); letter-spacing: 1px; }
.consumer-hero-copy p { margin: 0 0 22px; color: #4c8057; font-size: 14px; }
.consumer-hero-copy button { padding: 10px 19px; border: 0; border-radius: 22px; color: #fff; background: linear-gradient(135deg,#238149,#3c9657); box-shadow: 0 8px 20px rgba(31,118,65,.2); font-size: 12px; }
.consumer-hero-copy button span { margin-left: 8px; }
.consumer-dots { position: absolute; z-index: 3; left: 50%; bottom: 13px; display: flex; gap: 8px; }
.consumer-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.75); }
.consumer-dots i.active { width: 20px; border-radius: 10px; background: #4ca05d; }
.consumer-guarantees {
  height: 68px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center;
  margin-top: 10px; border: 1px solid #edf1ee; border-radius: 10px; background: rgba(255,255,255,.92);
}
.consumer-guarantees > div { display: flex; justify-content: center; align-items: center; gap: 9px; border-right: 1px solid #edf0ee; }
.consumer-guarantees > div:last-child { border-right: 0; }
.consumer-guarantees i { color: #09804a; font-style: normal; font-size: 24px; }
.consumer-guarantees strong, .consumer-guarantees small { display: block; }
.consumer-guarantees strong { font-size: 12px; }
.consumer-guarantees small { margin-top: 3px; color: #9aa19d; font-size: 9px; }
.consumer-account { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8ede9; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(32,70,48,.06); }
.consumer-welcome, .consumer-orders-head, .consumer-order-links, .consumer-notices { background: #fff; }
.consumer-welcome { position: relative; display: flex; align-items: center; gap: 11px; min-height: 94px; padding: 15px; background: linear-gradient(135deg,#f2faf5,#fff); }
.consumer-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(#d7dcec,#8d9cbd); font-size: 20px; }
.consumer-welcome span, .consumer-welcome strong, .consumer-welcome small { display: block; }
.consumer-welcome span { margin-bottom: 3px; color: #7d8881; font-size: 9px; }
.consumer-welcome strong { font-size: 13px; }
.consumer-welcome small { width: 145px; overflow: hidden; margin-top: 4px; color: #9ba29e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.consumer-welcome > button { position: absolute; right: 14px; top: 17px; padding: 0; border: 0; color: #168451; background: transparent; font-size: 9px; }
.consumer-account-orders { border-top: 1px solid #edf1ee; border-bottom: 1px solid #edf1ee; }
.consumer-orders-head { display: flex; justify-content: space-between; padding: 11px 14px 4px; }
.consumer-orders-head strong { font-size: 12px; }
.consumer-orders-head button { padding: 0; border: 0; background: transparent; font-size: 10px; }
.consumer-order-links { display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 8px 10px; }
.consumer-order-links button { position: relative; border: 0; background: transparent; font-size: 9px; }
.consumer-order-links i, .consumer-order-links span { display: block; }
.consumer-order-links i { margin-bottom: 5px; font-style: normal; font-size: 19px; }
.consumer-order-links b { position: absolute; top: -3px; right: 5px; color: #e66325; }
.consumer-notices { flex: 1; padding: 11px 14px 8px; }
.consumer-notices > div { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 10px; }
.consumer-notices > div button { padding: 0; border: 0; color: #7c857f; background: transparent; font-size: 9px; }
.consumer-notices p { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 7px 0; color: #717a74; font-size: 9px; }
.consumer-notices p i { flex: 0 0 17px; height: 17px; display: grid; place-items: center; border-radius: 4px; color: #14824e; background: #eaf7ef; font-style: normal; font-size: 8px; }
.consumer-notices p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consumer-notices p small { color: #a5aaa7; }
.consumer-account-service { min-height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; color: #486e59; background: #f4faf6; }
.consumer-account-service > span { display: grid; grid-template-columns: 25px 1fr; }
.consumer-account-service i { grid-row: 1/3; font-style: normal; font-size: 21px; }
.consumer-account-service b { font-size: 10px; }
.consumer-account-service small { color: #91a097; font-size: 8px; }
.consumer-account-service button { padding: 6px 10px; border: 1px solid #b8d9c5; border-radius: 14px; color: #168451; background: #fff; font-size: 9px; }
.consumer-showcase-grid { height: 274px; display: grid; grid-template-columns: minmax(0,2.15fr) minmax(260px,.85fr); gap: 12px; margin-top: 14px; }
.consumer-block { overflow: hidden; border-radius: 9px; background: #fff; }
.consumer-section-head { height: 54px; display: flex; align-items: center; gap: 13px; padding: 0 16px; border-bottom: 1px solid #eff1ef; }
.consumer-section-head h2 { margin: 0; font-size: 17px; }
.consumer-section-head h2 span { color: #e74532; }
.consumer-section-head > div:not(.consumer-tabs,.consumer-recommend-title) { color: #777f7a; font-size: 10px; }
.consumer-flash .consumer-section-head > div:first-child span { display: block; margin-bottom: 2px; color: #e65236; font-size: 8px; letter-spacing: 1px; }
.consumer-flash .consumer-section-head > div:first-child h2 { font-size: 17px; }
.consumer-countdown { display: flex; align-items: center; gap: 4px; }
.consumer-countdown i { color: #7a817d; font-style: normal; }
.consumer-section-head > div b { padding: 3px 5px; border-radius: 3px; color: #fff; background: #272b29; }
.consumer-section-head > button { margin-left: auto; padding: 0; border: 0; color: #747d77; background: transparent; font-size: 10px; }
.consumer-product-grid { display: grid; grid-template-columns: repeat(4,1fr); height: 220px; min-height: 0; }
.consumer-flash .consumer-product-image { padding: 9px 12px; }
.consumer-flash .consumer-product-image img,
.consumer-recommend .consumer-product-image img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 88%;
  object-fit: scale-down;
  transform: none;
}
.consumer-flash .consumer-product:hover .consumer-product-image img,
.consumer-recommend .consumer-product:hover .consumer-product-image img {
  transform: none;
}
.consumer-product { min-width: 0; padding: 12px; border-right: 1px solid #edf0ee; background: #fff; }
.consumer-product:last-child { border-right: 0; }
.consumer-product-image { height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #f4f7f4; }
.consumer-product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.consumer-product:hover .consumer-product-image img { transform: scale(1.05); }
.consumer-product-image > span { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #8fca65; font-size: 25px; font-weight: 900; }
.consumer-product h3 { height: 35px; overflow: hidden; margin: 9px 0 3px; font-size: 11px; line-height: 1.55; font-weight: 500; }
.consumer-product p { overflow: hidden; margin: 0; color: #a1a6a3; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.consumer-product-meta { display: flex; align-items: end; justify-content: space-between; margin-top: 7px; }
.consumer-product-meta b { display: block; color: #f0472f; font-size: 15px; }
.consumer-product-meta small { color: #a6aaa8; font-size: 8px; }
.consumer-product-meta button { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #1ab25d; font-family: Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1; text-align: center; }
.consumer-category-grid { display: grid; grid-template-columns: repeat(5,1fr); height: 216px; padding: 10px 8px; gap: 7px 4px; }
.consumer-category-grid button { min-width: 0; padding: 6px 2px; border: 0; border-radius: 7px; background: transparent; font-size: 9px; }
.consumer-category-grid i { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 5px; border-radius: 11px; color: #e85543; background: #eff9e9; font-style: normal; font-size: 22px; }
.consumer-category-grid button:nth-child(5n+2) i { background: #fff4df; }
.consumer-category-grid button:nth-child(5n+3) i { background: #fff0ed; }
.consumer-category-grid button:nth-child(5n+4) i { background: #eaf6ff; }
.consumer-category-grid button:nth-child(5n+5) i { background: #edf8ef; }
.consumer-category-grid i span { display: grid; place-items: center; line-height: 1; }
.consumer-category-grid i img { width: 34px; height: 34px; object-fit: contain; }
.consumer-coupon { position: relative; padding: 24px 20px 18px; background: linear-gradient(145deg,#fff9f1,#fff1df); }
.consumer-coupon::after { content: "礼"; position: absolute; right: -12px; top: -18px; color: rgba(232,104,47,.06); font-size: 140px; font-weight: 900; }
.consumer-coupon-copy { position: relative; z-index: 1; }
.consumer-coupon-copy > span { color: #e68b58; font-size: 8px; letter-spacing: 2px; }
.consumer-coupon-copy h2 { margin: 6px 0; color: #d9572f; font-size: 23px; }
.consumer-coupon-copy p { margin: 0; color: #a96d50; font-size: 10px; line-height: 1.7; }
.consumer-coupon-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 15px 0 12px; }
.consumer-coupon-list > div { padding: 9px 2px; border: 1px dashed #f0b590; border-radius: 6px; color: #e75b34; background: rgba(255,255,255,.72); text-align: center; }
.consumer-coupon-list strong, .consumer-coupon-list small { display: block; }
.consumer-coupon-list strong { font-size: 15px; }
.consumer-coupon-list small { margin-top: 4px; font-size: 7px; }
.consumer-coupon-list > p { grid-column: 1/-1; color: #a47f6e; text-align: center; font-size: 10px; }
.consumer-coupon-action { position: relative; z-index: 1; width: 100%; height: 34px; margin: 0; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(90deg,#ef7446,#e95036); font-size: 10px; }
.consumer-coupon-action span { margin-left: 8px; }
.consumer-recommend { margin-top: 14px; border: 1px solid #edf0ee; border-radius: 12px; }
.consumer-tabs { display: flex; align-items: center; gap: 28px; }
.consumer-tabs h2 { color: #087b49; }
.consumer-tabs span { font-size: 13px; }
.consumer-recommend-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.consumer-recommend .consumer-section-head { height: 72px; padding-inline: 20px; }
.consumer-recommend-title > span { display: block; color: #86a68f; font-size: 8px; letter-spacing: 1.8px; }
.consumer-recommend-title h2 { display: inline-block; margin-top: 3px; color: #087b49; }
.consumer-recommend-title p { display: inline-block; margin: 0 0 0 15px; color: #8c9590; font-size: 9px; }
.consumer-recommend .consumer-section-head > button { padding: 7px 13px; border: 1px solid #d7e5dc; border-radius: 16px; color: #397653; background: #f8fbf9; }
.consumer-recommend .consumer-product { display: block; padding: 15px; border-bottom: 1px solid #edf0ee; }
.consumer-recommend .consumer-product-body { min-width: 0; }
.consumer-recommend .consumer-product-image { height: 150px; padding: 14px 16px; background: #f6f8f6; }
.consumer-recommend .consumer-product h3 { height: 38px; margin: 10px 0 2px; font-size: 12px; line-height: 1.55; }
.consumer-recommend .consumer-product p { font-size: 9px; }
.consumer-recommend .consumer-product-meta { margin-top: 8px; }
.consumer-recommend .consumer-product-meta > span { min-width: 0; }
.consumer-recommend .consumer-product-meta b { font-size: 15px; white-space: nowrap; }
.consumer-recommend .consumer-product-meta small { display: block; }
.consumer-recommend .consumer-product-meta button { flex: 0 0 27px; width: 27px; height: 27px; font-size: 17px; }
.consumer-brands { min-height: 72px; display: grid; grid-template-columns: 160px repeat(8,1fr); align-items: center; margin-top: 14px; padding: 0 20px; border: 1px solid #edf0ee; border-radius: 12px; background: #fff; }
.consumer-brands > div span, .consumer-brands > div strong { display: block; }
.consumer-brands > div span { margin-bottom: 3px; color: #94a29a; font-size: 7px; letter-spacing: 1.4px; }
.consumer-brands strong { font-size: 17px; }
.consumer-brands button, .consumer-brands span { overflow: hidden; padding: 0 12px; border: 0; color: #246546; background: transparent; text-align: center; white-space: nowrap; font-size: 14px; font-weight: 700; }
.consumer-empty { grid-column: 1/-1; display: grid; place-items: center; min-height: 100px; color: #929a95; font-size: 12px; }
.consumer-float {
  position: fixed; z-index: 25; right: 12px; top: 62%; transform: translateY(-50%);
  width: 54px; border: 1px solid #e3e8e5; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 8px 25px rgba(20,60,40,.08);
}
.consumer-float button { width: 100%; height: 60px; display: grid; place-items: center; gap: 0; padding: 7px 0; border: 0; border-bottom: 1px solid #edf0ee; background: #fff; font-size: 18px; }
.consumer-float button:last-child { border-bottom: 0; }
.consumer-float span { display: block; font-size: 9px; }

/* 消费者端内页 */
.consumer-subpage { min-height: calc(100vh - 186px); padding: 0 0 38px; background: #f6f7f6; }
.consumer-shell > .api-state { width: min(1296px, calc(100% - 40px)); min-height: 520px; margin: 20px auto; }
.consumer-breadcrumb { height: 42px; display: flex; align-items: center; gap: 9px; color: #8c948f; font-size: 11px; }
.consumer-breadcrumb button { padding: 0; border: 0; color: #198650; background: transparent; }
.consumer-breadcrumb strong { color: #5d6660; font-weight: 500; }
.consumer-page-head { height: 54px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #edf0ee; }
.consumer-page-head h1 { margin: 0; font-size: 19px; }
.consumer-page-head small { color: #e75b37; font-size: 12px; }

.consumer-category-page { display: grid; grid-template-columns: 190px 1fr; min-height: 650px; border: 1px solid #e2e7e4; border-radius: 9px; overflow: hidden; background: #fff; }
.consumer-category-side { background: #f7f8f7; border-right: 1px solid #e7ebe8; }
.consumer-category-side h2 { margin: 0; padding: 15px 18px; color: #fff; background: #0d8a51; font-size: 16px; }
.consumer-category-side button { width: 100%; height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; background: transparent; text-align: left; font-size: 12px; }
.consumer-category-side button:hover, .consumer-category-side button.active { color: #087b49; background: #fff; font-weight: 700; }
.consumer-category-side div { padding-bottom: 5px; }
.consumer-category-side small { display: inline-block; margin: 2px 0 3px 18px; color: #8c948f; font-size: 9px; }
.consumer-category-content { min-width: 0; padding: 0 18px 20px; }
.consumer-category-title { height: 83px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0ee; }
.consumer-category-title h1 { margin: 0 0 6px; font-size: 21px; }
.consumer-category-title p, .consumer-category-title > span { margin: 0; color: #8b938e; font-size: 10px; }
.consumer-filter-bar { height: 43px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #edf0ee; }
.consumer-filter-bar strong { margin-right: 8px; font-size: 11px; }
.consumer-filter-bar button { padding: 6px 14px; border: 0; border-radius: 4px; background: transparent; font-size: 10px; }
.consumer-filter-bar button.active { color: #fff; background: #0c8a50; }
.consumer-catalog-grid { display: grid; grid-template-columns: repeat(5,1fr); }
.consumer-catalog-grid .consumer-product { border-bottom: 1px solid #edf0ee; }
.consumer-catalog-grid .consumer-product-image { height: 130px; }
.consumer-catalog-grid .consumer-product h3 { font-size: 12px; }
.consumer-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 18px 0 0; }
.consumer-pagination button, .consumer-pagination b { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #dfe5e1; border-radius: 4px; background: #fff; font-size: 9px; }
.consumer-pagination b { color: #fff; border-color: #0b8750; background: #0b8750; }

.consumer-detail-card { display: grid; grid-template-columns: 42% 1fr; gap: 38px; padding: 28px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-gallery-main { height: 430px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #f4f6f4; }
.consumer-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.consumer-gallery-main > span { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #76b95a; font-size: 48px; }
.consumer-thumbs { display: flex; gap: 9px; margin-top: 12px; }
.consumer-thumbs button { width: 58px; height: 58px; padding: 3px; border: 1px solid #dce3de; border-radius: 5px; background: #fff; }
.consumer-thumbs button.active { border-color: #0b8750; }
.consumer-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.consumer-product-info h1 { margin: 7px 0 8px; font-size: 24px; line-height: 1.45; }
.consumer-detail-subtitle { margin: 0 0 17px; color: #646d67; font-size: 13px; }
.consumer-detail-price { min-height: 68px; display: flex; align-items: center; gap: 15px; padding: 12px 16px; background: #f8faf8; }
.consumer-detail-price span, .consumer-product-info dt { color: #8b938e; font-size: 11px; }
.consumer-detail-price strong { color: #ef432f; font-size: 27px; }
.consumer-detail-price del { color: #999f9b; font-size: 11px; }
.consumer-detail-price b { padding: 4px 7px; color: #ef5b43; background: #fff0eb; font-size: 9px; }
.consumer-product-info dl { margin: 13px 0; }
.consumer-product-info dl > div { display: grid; grid-template-columns: 58px 1fr; align-items: center; min-height: 36px; border-bottom: 1px dashed #e9ecea; }
.consumer-product-info dt, .consumer-product-info dd { margin: 0; font-size: 11px; }
.consumer-spec-row, .consumer-qty-row { min-height: 50px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; font-size: 11px; }
.consumer-spec-row > span, .consumer-qty-row > span { color: #8b938e; }
.consumer-spec-row button { margin-right: 7px; padding: 6px 13px; border: 1px solid #dfe5e1; border-radius: 4px; background: #fff; font-size: 10px; }
.consumer-spec-row button.active { color: #087b49; border-color: #0b8750; background: #f2fbf6; }
.consumer-qty-row > div, .consumer-stepper { display: inline-grid; grid-template-columns: 29px 36px 29px; align-items: center; text-align: center; }
.consumer-qty-row button, .consumer-stepper button { height: 29px; border: 1px solid #dfe5e1; background: #f8faf8; }
.consumer-qty-row b, .consumer-stepper b { height: 29px; display: grid; place-items: center; border-block: 1px solid #dfe5e1; font-size: 11px; }
.consumer-qty-row small { color: #8b938e; }
.consumer-detail-actions { display: flex; gap: 12px; margin-top: 20px; }
.consumer-detail-actions button { width: 168px; height: 46px; border: 0; border-radius: 5px; color: #fff; background: #087b49; font-weight: 700; }
.consumer-detail-actions button.light { color: #087b49; border: 1px solid #a6d2b9; background: #edf8f2; }
.consumer-detail-tabs { margin-top: 14px; border: 1px solid #e1e6e3; border-radius: 9px; overflow: hidden; background: #fff; }
.consumer-detail-tabs > div { height: 49px; display: flex; border-bottom: 1px solid #e9ecea; }
.consumer-detail-tabs > div button { min-width: 125px; border: 0; background: transparent; font-size: 11px; }
.consumer-detail-tabs > div button.active { color: #087b49; border-bottom: 2px solid #087b49; font-weight: 700; }
.consumer-detail-tabs > section { padding: 22px; }
.consumer-detail-tabs h2 { margin: 0 0 6px; color: #378246; font-size: 25px; }
.consumer-detail-tabs p { margin: 0; color: #6f7872; font-size: 11px; }
.consumer-detail-panel { min-height: 260px; }
.consumer-detail-intro > span, .consumer-parameter-panel > header span { color: #8aad91; font-size: 9px; letter-spacing: 1.4px; }
.consumer-detail-features { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; border: 1px solid #e5ebe7; border-radius: 7px; }
.consumer-detail-features > div { display: grid; grid-template-columns: 38px 1fr; padding: 15px 20px; }
.consumer-detail-features > div + div { border-left: 1px solid #e5ebe7; }
.consumer-detail-features i { grid-row: 1 / 3; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #087b49; background: #e7f5ec; font-style: normal; font-weight: 700; }
.consumer-detail-features strong { font-size: 12px; }
.consumer-detail-features small { margin-top: 3px; color: #929a95; font-size: 9px; }
.consumer-parameter-panel > header { display: flex; align-items: end; padding-bottom: 18px; border-bottom: 1px solid #edf0ee; }
.consumer-parameter-panel > header h2 { margin: 3px 0 0; font-size: 21px; }
.consumer-parameter-panel > header p { margin-left: auto; }
.consumer-parameter-grid { display: grid; grid-template-columns: repeat(2,1fr); margin: 0; border: 1px solid #e4e9e6; border-radius: 7px; overflow: hidden; }
.consumer-parameter-grid > div { display: grid; grid-template-columns: 125px 1fr; min-height: 45px; border-bottom: 1px solid #edf0ee; }
.consumer-parameter-grid > div:nth-child(odd) { border-right: 1px solid #edf0ee; }
.consumer-parameter-grid dt, .consumer-parameter-grid dd { display: flex; align-items: center; margin: 0; padding: 10px 14px; font-size: 11px; }
.consumer-parameter-grid dt { color: #717a74; background: #f7f9f7; }
.consumer-parameter-grid dd { color: #242c27; }
.consumer-quality-card { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: 7px; color: #17683d; background: #eff9f3; }
.consumer-quality-card > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #129657; font-style: normal; }
.consumer-quality-card div { flex: 1; }
.consumer-quality-card strong { font-size: 12px; }
.consumer-quality-card p { margin-top: 4px; }
.consumer-quality-card > span { padding: 5px 14px; border-radius: 15px; background: #d9f1e3; font-size: 10px; }
.consumer-review-summary { display: grid; grid-template-columns: 150px 180px 1fr; align-items: center; min-height: 105px; padding: 15px 25px; border-radius: 7px; background: #f8fbf9; }
.consumer-review-summary > div:first-child { text-align: center; border-right: 1px solid #e0e8e3; }
.consumer-review-summary > div:first-child strong { display: block; color: #ef4d32; font-size: 31px; }
.consumer-review-summary > div:first-child span { color: #757e78; font-size: 10px; }
.consumer-review-summary > div:nth-child(2) { display: grid; gap: 4px; padding-left: 25px; }
.consumer-review-summary b { font-size: 14px; }
.consumer-review-summary small { color: #929a95; font-size: 9px; }
.consumer-review-stars, .consumer-review-item header > span { color: #f4ad22; letter-spacing: 2px; }
.consumer-review-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.consumer-review-tags span { padding: 7px 15px; border: 1px solid #dfe7e2; border-radius: 16px; color: #68716b; background: #fff; font-size: 10px; }
.consumer-review-tags span.active { color: #087b49; border-color: #9bcbb1; background: #edf8f2; }
.consumer-review-item { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 4px; border-bottom: 1px solid #edf0ee; }
.consumer-review-avatar { width: 42px; height: 42px; overflow: hidden; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#9dc1aa,#6c9c7d); font-weight: 700; }
.consumer-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.consumer-review-item header { display: flex; align-items: center; gap: 12px; }
.consumer-review-item header strong { font-size: 11px; }
.consumer-review-item header time { margin-left: auto; color: #9aa19d; font-size: 9px; }
.consumer-review-item p { margin-top: 10px; color: #424a45; line-height: 1.7; }
.consumer-review-labels, .consumer-review-pictures { display: flex; gap: 7px; margin-top: 9px; }
.consumer-review-labels span { padding: 4px 9px; border-radius: 3px; color: #598168; background: #eff7f2; font-size: 9px; }
.consumer-review-pictures img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; background: #f4f6f4; }
.consumer-review-reply { margin-top: 10px; padding: 10px 12px; color: #68716b; background: #f7f9f7; font-size: 10px; }
.consumer-trace-verified { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid #cbe6d5; border-radius: 8px; background: linear-gradient(90deg,#effaf3,#f8fcf9); }
.consumer-trace-verified > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #119557; font-style: normal; font-size: 20px; }
.consumer-trace-verified > div { flex: 1; }
.consumer-trace-verified strong { color: #126b40; font-size: 14px; }
.consumer-trace-verified p { margin-top: 4px; }
.consumer-trace-verified > span { padding: 5px 12px; border-radius: 14px; color: #087b49; background: #dff3e7; font-size: 10px; }
.consumer-trace-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }
.consumer-trace-grid article, .consumer-trace-timeline { padding: 18px; border: 1px solid #e3e9e5; border-radius: 8px; }
.consumer-trace-panel h3 { margin: 0 0 13px; font-size: 14px; }
.consumer-trace-grid dl { margin: 0; }
.consumer-trace-grid dl > div { display: flex; min-height: 34px; align-items: center; border-bottom: 1px dashed #e7ebe8; font-size: 10px; }
.consumer-trace-grid dt { width: 85px; color: #89918c; }
.consumer-trace-grid dd { flex: 1; margin: 0; text-align: right; }
.consumer-trace-grid dd.passed { color: #099154; font-weight: 700; }
.consumer-trace-timeline { margin-top: 14px; padding-left: 25px; }
.consumer-trace-node { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; min-height: 82px; }
.consumer-trace-node::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 1px; background: #b7dbc6; }
.consumer-trace-node:last-child::before { display: none; }
.consumer-trace-node > i { position: relative; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #129657; font-style: normal; font-size: 10px; }
.consumer-trace-node header { display: flex; align-items: center; }
.consumer-trace-node header strong { color: #196a42; font-size: 12px; }
.consumer-trace-node time { margin-left: auto; color: #929a95; font-size: 9px; }
.consumer-trace-node b { display: block; margin-top: 6px; font-size: 10px; }
.consumer-trace-node p { margin-top: 4px; }
.consumer-detail-banner { position: relative; overflow: hidden; height: 160px; margin-top: 18px; padding: 35px; border-radius: 7px; background: radial-gradient(circle at 85% 45%,#86bd64 0 12%,transparent 13%),linear-gradient(100deg,#e7f4df,#cae7b7); }
.consumer-detail-banner::after { content: "●"; position: absolute; right: 80px; top: 20px; color: #d74132; font-size: 95px; text-shadow: 52px 25px 0 #e86b3e; }
.consumer-detail-banner span, .consumer-detail-banner strong, .consumer-detail-banner small { position: relative; z-index: 1; display: block; }
.consumer-detail-banner span { color: #55985d; }
.consumer-detail-banner strong { margin: 7px 0; color: #2a753a; font-size: 27px; }
.consumer-detail-banner small { color: #5b875f; }
.consumer-related { margin-top: 14px; }
.consumer-related .consumer-product-image {
  height: 150px;
  padding: 12px 14px;
}
.consumer-related .consumer-product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.consumer-related .consumer-product:hover .consumer-product-image img {
  transform: none;
}

.consumer-cart-page { position: relative; padding-bottom: 68px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-cart-row { display: grid; grid-template-columns: 70px minmax(280px,1fr) 105px 125px 105px 65px; align-items: center; min-height: 96px; padding: 0 18px; border-bottom: 1px solid #edf0ee; font-size: 11px; }
.consumer-cart-row.header { min-height: 42px; color: #737c76; background: #fafbfa; }
.consumer-check { width: 18px; height: 18px; padding: 0; border: 1px solid #b9c6be; border-radius: 4px; color: transparent; background: #fff; font-size: 11px; }
.consumer-check.checked { color: #fff; border-color: #0b8750; background: #0b8750; }
.consumer-cart-product { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.consumer-cart-product img { width: 66px; height: 66px; object-fit: contain; border-radius: 6px; background: #f5f7f5; }
.consumer-cart-product strong, .consumer-cart-product small { display: block; }
.consumer-cart-product strong { margin-bottom: 8px; }
.consumer-cart-product small { color: #919994; }
.consumer-cart-row > strong { color: #ef432f; }
.consumer-remove { border: 0; color: #777f7a; background: transparent; font-size: 10px; }
.consumer-cart-recommend { padding: 12px 18px; }
.consumer-cart-recommend h2 { margin: 0 0 8px; font-size: 14px; }
.consumer-cart-recommend .consumer-catalog-grid { grid-template-columns: repeat(4,1fr); }
.consumer-cart-recommend .consumer-product { display: grid; grid-template-columns: 100px 1fr; gap: 9px; border: 1px solid #edf0ee; }
.consumer-cart-recommend .consumer-product-image { height: 85px; }
.consumer-cart-total { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; padding-left: 20px; border-top: 1px solid #dfe5e1; background: #fff; }
.consumer-cart-total > span { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.consumer-cart-total p { margin-left: auto; font-size: 11px; }
.consumer-cart-total p b, .consumer-cart-total p strong { color: #ef432f; }
.consumer-cart-total p strong { font-size: 20px; }
.consumer-cart-total > button:last-child { width: 145px; height: 100%; margin-left: 20px; border: 0; color: #fff; background: #087b49; font-size: 15px; font-weight: 700; }
.consumer-cart-total > button:disabled, .consumer-submit-order button:disabled { opacity: .45; cursor: not-allowed; }

/* 购物车设计稿 */
.consumer-cart-utility nav { gap: 14px; }
.consumer-cart-utility nav i { width: 1px; height: 12px; background: #d9dedb; }
.consumer-cart-utility nav span { color: #303833; }
.consumer-cart-header { border-bottom: 1px solid #e8ece9; background: #fff; }
.consumer-cart-header-main { height: 92px; display: grid; grid-template-columns: 420px minmax(360px,1fr) 160px; align-items: center; gap: 38px; }
.consumer-cart-brand { display: flex; align-items: center; }
.consumer-cart-brand .consumer-logo strong { color: #202723; font-size: 25px; letter-spacing: 5px; }
.consumer-cart-brand .consumer-logo small { color: #59625c; letter-spacing: 5px; }
.consumer-cart-brand > b { width: 1px; height: 48px; margin: 0 22px; background: #dce2de; }
.consumer-cart-brand h1 { margin: 0; font-size: 22px; font-weight: 600; }
.consumer-cart-search { height: 40px; display: grid; grid-template-columns: 1fr 86px; border: 1px solid #d7ded9; border-radius: 4px; overflow: hidden; }
.consumer-cart-search input { min-width: 0; padding: 0 14px; border: 0; outline: 0; }
.consumer-cart-search button { border: 0; color: #fff; background: #0b934c; font-size: 14px; font-weight: 700; }
.cart-page-button { width: 150px; }

.consumer-cart-screen { min-height: calc(100vh - 126px); padding: 15px 0 34px; background: #f7f8f7; }
.consumer-cart-tabs { height: 50px; display: flex; align-items: stretch; border-bottom: 1px solid #e5eae7; }
.consumer-cart-tabs > button { position: relative; min-width: 125px; padding: 0 12px; border: 0; background: transparent; font-size: 13px; }
.consumer-cart-tabs > button.active { color: #078047; font-weight: 700; }
.consumer-cart-tabs > button.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: #078047; }
.consumer-cart-tabs sup { min-width: 17px; height: 17px; display: inline-grid; place-items: center; margin-left: 2px; border-radius: 10px; color: #fff; background: #f04735; font-size: 9px; }
.consumer-cart-tabs > div { display: flex; align-items: center; gap: 15px; margin-left: auto; font-size: 11px; }
.consumer-cart-tabs > div span { display: flex; align-items: center; gap: 7px; }
.consumer-cart-tabs > div button:not(.consumer-check) { padding: 0; border: 0; background: transparent; font-size: 11px; }
.consumer-cart-tabs > div i { width: 1px; height: 15px; background: #dfe4e1; }
.consumer-cart-benefit { min-height: 48px; display: flex; align-items: center; gap: 12px; margin: 13px 0; padding: 0 18px; border: 1px solid #d7eadf; border-radius: 7px; background: linear-gradient(90deg,#eef9f2,#f8fcf9); font-size: 12px; }
.consumer-cart-benefit > span { color: #0b934c; font-size: 18px; }
.consumer-cart-benefit p { flex: 1; margin: 0; color: #48534c; }
.consumer-cart-benefit button { width: 98px; height: 28px; border: 0; border-radius: 4px; color: #fff; background: #0b934c; font-size: 11px; }
.consumer-cart-benefit b { color: #8c9690; font-size: 18px; font-weight: 400; }
.consumer-cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 20px; }
.consumer-cart-main { min-width: 0; }
.consumer-cart-store { overflow: hidden; border: 1px solid #dfe5e1; border-radius: 7px; background: #fff; }
.consumer-cart-store > header { height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 18px; border-bottom: 1px solid #e6ebe8; }
.consumer-cart-store > header > span { display: flex; align-items: center; gap: 7px; }
.consumer-cart-store > header strong { font-size: 12px; }
.consumer-cart-store > header em { padding: 2px 7px; border-radius: 2px; color: #fff; background: #0b934c; font-size: 9px; font-style: normal; }
.consumer-cart-store > header small { padding: 2px 6px; border: 1px solid #ffb16f; border-radius: 2px; color: #f1761c; font-size: 9px; }
.consumer-cart-store > header > button { margin-left: auto; border: 0; color: #748078; background: transparent; font-size: 10px; }
.consumer-cart-line { min-height: 112px; display: grid; grid-template-columns: 35px minmax(280px,1fr) 95px 105px 105px 70px; align-items: center; padding: 0 17px; border-bottom: 1px solid #edf0ee; font-size: 11px; }
.consumer-cart-line.invalid { opacity: .55; background: #fafafa; }
.consumer-cart-line .consumer-cart-product { gap: 14px; min-width: 0; }
.consumer-cart-line .consumer-cart-product img, .consumer-cart-image-fallback { width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; object-fit: contain; border: 1px solid #edf0ee; border-radius: 5px; background: #fafbfa; }
.consumer-cart-line .consumer-cart-product > span { min-width: 0; }
.consumer-cart-line .consumer-cart-product strong { overflow: hidden; margin-bottom: 7px; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.consumer-cart-line .consumer-cart-product small { margin-bottom: 5px; color: #8a938d; font-size: 9px; }
.consumer-cart-line .consumer-cart-product em { padding: 2px 5px; border: 1px solid #91caa8; border-radius: 2px; color: #168b50; font-size: 8px; font-style: normal; }
.consumer-cart-price del, .consumer-cart-price strong { display: block; }
.consumer-cart-price del { margin-bottom: 6px; color: #999f9b; font-size: 9px; }
.consumer-cart-price strong { color: #303733; font-weight: 600; }
.consumer-cart-line .consumer-stepper { display: grid; grid-template-columns: 29px 36px 29px; }
.consumer-cart-line .consumer-stepper button, .consumer-cart-line .consumer-stepper b { width: auto; height: 28px; background: #fff; }
.consumer-cart-subtotal { color: #242b27; font-size: 12px; }
.consumer-cart-actions button { display: block; width: 100%; padding: 3px 0; border: 0; color: #7a837d; background: transparent; font-size: 9px; }
.consumer-cart-store > footer { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 10px; }
.consumer-cart-store > footer span { display: flex; align-items: center; gap: 7px; }
.consumer-cart-store > footer > button { padding: 0; border: 0; color: #717b74; background: transparent; font-size: 10px; }
.consumer-cart-store > footer i { width: 1px; height: 14px; background: #dfe5e1; }
.consumer-cart-store > footer p { margin-left: auto; }
.consumer-cart-store > footer p b { color: #0b8a4d; }
.consumer-cart-store > footer p strong { margin-left: 8px; color: #ef5b17; font-size: 18px; }
.consumer-cart-empty { padding: 70px 20px; text-align: center; }
.consumer-cart-empty > span { font-size: 42px; }
.consumer-cart-empty h2 { margin: 10px 0 5px; font-size: 17px; }
.consumer-cart-empty p { color: #8b948e; }
.consumer-cart-empty button { width: 100px; height: 34px; border: 0; border-radius: 4px; color: #fff; background: #0b934c; }

.consumer-cart-summary { position: sticky; top: 12px; overflow: hidden; border: 1px solid #dfe5e1; border-radius: 7px; background: #fff; }
.consumer-cart-summary > header { height: 50px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #e8ece9; }
.consumer-cart-summary > header h2 { margin: 0; font-size: 16px; }
.consumer-cart-summary > header span { margin-left: auto; color: #7d8981; font-size: 9px; }
.consumer-cart-side-recommend { padding: 14px 18px 12px; border-bottom: 1px solid #e7ebe8; }
.consumer-cart-side-recommend > div { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; }
.consumer-cart-side-recommend > div button { border: 0; background: transparent; font-size: 9px; }
.consumer-cart-side-recommend main { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.consumer-cart-side-recommend main button { position: relative; min-width: 0; padding: 6px; border: 1px solid #e4e9e6; border-radius: 5px; background: #fff; }
.consumer-cart-side-recommend main span { height: 62px; display: grid; place-items: center; overflow: hidden; background: #fafbfa; }
.consumer-cart-side-recommend main img { width: 100%; height: 100%; object-fit: contain; }
.consumer-cart-side-recommend main b { display: block; margin-top: 5px; font-size: 9px; }
.consumer-cart-selected > div > span { color: #7e8982; font-size: 9px; }
.consumer-cart-selected main { overflow: visible; }
.consumer-cart-selected-toggle { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; color: #7e8982; background: transparent; font-size: 9px; }
.consumer-cart-selected-toggle i { display: inline-block; font-style: normal; transition: transform .18s ease; }
.consumer-cart-selected.expanded .consumer-cart-selected-toggle i { transform: rotate(180deg); }
.consumer-cart-selected main button small { position: absolute; right: 5px; bottom: 5px; color: #8b948e; font-size: 8px; }
.consumer-cart-selected-empty { margin: 0; padding: 36px 8px; color: #929a95; font-size: 10px; text-align: center; }
.consumer-cart-bill { padding: 12px 18px 8px; border-bottom: 1px solid #e7ebe8; }
.consumer-cart-bill p { display: flex; justify-content: space-between; margin: 10px 0; font-size: 10px; }
.consumer-cart-bill b { font-weight: 500; }
.consumer-cart-bill .discount { color: #ef4635; }
.consumer-cart-payable { height: 58px; display: flex; align-items: center; padding: 0 18px; }
.consumer-cart-payable span { font-size: 11px; font-weight: 700; }
.consumer-cart-payable strong { margin-left: auto; color: #ed5a14; font-size: 23px; }
.consumer-cart-checkout-button { width: calc(100% - 36px); height: 44px; margin: 0 18px; border: 0; border-radius: 5px; color: #fff; background: #0b934c; font-size: 15px; font-weight: 700; }
.consumer-cart-checkout-button:disabled { opacity: .45; cursor: not-allowed; }
.consumer-cart-security { display: block; padding: 18px; color: #7d8881; font-size: 8px; text-align: center; }
.consumer-cart-like { margin-top: 12px; padding: 12px 14px; border: 1px solid #dfe5e1; border-radius: 7px; background: #fff; }
.consumer-cart-like h2 { margin: 0 0 10px; font-size: 13px; }
.consumer-cart-like > div { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.consumer-cart-like-item { min-width: 0; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: 1fr auto; gap: 0 8px; padding: 6px; border: 0; border-radius: 5px; background: #fafbfa; text-align: left; }
.consumer-cart-like-item span { grid-row: 1/3; width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; }
.consumer-cart-like-item img { width: 100%; height: 100%; object-fit: contain; }
.consumer-cart-like-item b { overflow: hidden; align-self: center; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.consumer-cart-like-item strong { color: #ed4d31; font-size: 10px; }

.consumer-checkout-steps { height: 72px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-checkout-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0b8750; font-size: 10px; }
.consumer-checkout-steps b:nth-of-type(n+2) { color: #a5ada8; background: #e6e9e7; }
.consumer-checkout-steps strong, .consumer-checkout-steps span { font-size: 11px; }
.consumer-checkout-steps i { width: 100px; height: 1px; background: #dfe5e1; }
.consumer-checkout-card { margin-top: 12px; padding: 17px; border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-checkout-card h2 { margin: 0 0 13px; padding-bottom: 12px; border-bottom: 1px solid #edf0ee; font-size: 15px; }
.consumer-checkout-card h3 { margin: 14px 0 8px; font-size: 11px; }
.consumer-address { position: relative; padding: 14px; border: 1px solid #a9d4bb; border-radius: 6px; background: #fbfefc; }
.consumer-address strong { font-size: 11px; }
.consumer-address p { margin: 7px 0 0; color: #616a64; font-size: 10px; }
.consumer-address small { position: absolute; right: 15px; top: 15px; padding: 2px 6px; color: #0b8750; background: #eaf7ef; }
.empty-address { color: #939b96; font-size: 11px; }
.consumer-delivery-methods, .consumer-pay-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.consumer-delivery-methods button, .consumer-pay-methods button { min-height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; border: 1px solid #dfe5e1; border-radius: 5px; background: #fff; text-align: left; }
.consumer-delivery-methods button.active, .consumer-pay-methods button.active { color: #087b49; border-color: #82c49e; background: #f7fcf9; }
.consumer-delivery-methods b { font-size: 10px; }
.consumer-delivery-methods small { color: #8f9792; font-size: 9px; }
.consumer-pay-methods button { justify-content: flex-start; font-size: 10px; }
.consumer-checkout-items > div { display: grid; grid-template-columns: 52px 1fr 1fr auto; align-items: center; gap: 12px; min-height: 67px; border-bottom: 1px solid #edf0ee; font-size: 10px; }
.consumer-checkout-items img { width: 48px; height: 48px; object-fit: contain; }
.consumer-checkout-items small { color: #8d9590; }
.consumer-checkout-summary { width: 310px; margin: 12px 0 0 auto; }
.consumer-checkout-summary p { display: flex; justify-content: space-between; margin: 8px 0; font-size: 10px; }
.consumer-checkout-summary .discount { color: #ef432f; }
.consumer-checkout-summary strong { color: #ef432f; font-size: 16px; }
.consumer-submit-order { height: 64px; display: flex; justify-content: flex-end; align-items: center; margin-top: 12px; padding-left: 20px; border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-submit-order span { font-size: 12px; }
.consumer-submit-order strong { color: #ef432f; font-size: 21px; }
.consumer-submit-order button { width: 145px; height: 100%; margin-left: 20px; border: 0; border-radius: 0 8px 8px 0; color: #fff; background: #087b49; font-weight: 700; }

.consumer-member-page { display: grid; grid-template-columns: 190px 1fr; border: 1px solid #e2e7e4; border-radius: 9px; overflow: hidden; background: #fff; }
.consumer-member-nav { background: #f7f8f7; border-right: 1px solid #e6ebe7; }
.consumer-member-nav h2 { margin: 0; padding: 17px 18px; color: #fff; background: #0c8750; font-size: 16px; }
.consumer-member-nav button { width: 100%; height: 45px; padding: 0 20px; border: 0; background: transparent; text-align: left; font-size: 11px; }
.consumer-member-nav button.active { color: #087b49; background: #fff; font-weight: 700; }
.consumer-member-page > main { min-width: 0; }
.consumer-member-hero { min-height: 145px; display: grid; grid-template-columns: 60px 1fr 55%; align-items: center; gap: 14px; padding: 20px 28px; color: #fff; background: linear-gradient(120deg,#147d4c,#329762); }
.consumer-member-hero .consumer-avatar { background: rgba(255,255,255,.84); color: #33835a; }
.consumer-member-hero span, .consumer-member-hero strong, .consumer-member-hero small { display: block; }
.consumer-member-hero span { font-size: 10px; }
.consumer-member-hero strong { margin: 6px 0; font-size: 17px; }
.consumer-member-hero small { display: inline-block; padding: 3px 7px; border-radius: 10px; background: rgba(255,255,255,.16); }
.consumer-member-hero dl { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; }
.consumer-member-hero dl div { text-align: center; border-left: 1px solid rgba(255,255,255,.2); }
.consumer-member-hero dt { color: rgba(255,255,255,.7); font-size: 9px; }
.consumer-member-hero dd { margin: 8px 0 0; font-size: 16px; font-weight: 700; }
.consumer-member-panel { padding: 15px 20px; border-bottom: 1px solid #e8ece9; }
.consumer-member-panel > h2 { margin: 0 0 13px; font-size: 13px; }
.consumer-member-orders { display: grid; grid-template-columns: repeat(5,1fr); }
.consumer-member-orders button, .consumer-member-tools button { position: relative; padding: 10px; border: 0; background: transparent; }
.consumer-member-orders i, .consumer-member-orders span, .consumer-member-tools i, .consumer-member-tools span { display: block; }
.consumer-member-orders i, .consumer-member-tools i { margin-bottom: 8px; color: #26332b; font-style: normal; font-size: 22px; }
.consumer-member-orders span, .consumer-member-tools span { font-size: 10px; }
.consumer-member-orders b { position: absolute; top: 3px; left: 55%; color: #ee5437; }
.consumer-member-tools { display: grid; grid-template-columns: repeat(5,1fr); }
.consumer-member-panel .consumer-catalog-grid { grid-template-columns: repeat(4,1fr); }
.consumer-member-panel .consumer-product { display: grid; grid-template-columns: 100px 1fr; gap: 9px; }
.consumer-member-panel .consumer-product-image { height: 85px; }

.consumer-orders-page { min-height: 620px; padding: 20px; border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-orders-page > h1 { margin: 0 0 15px; font-size: 20px; }
.consumer-order-tabs { height: 42px; display: flex; align-items: stretch; gap: 25px; border-bottom: 1px solid #e8ece9; }
.consumer-order-tabs button { border: 0; background: transparent; font-size: 11px; }
.consumer-order-tabs button.active { color: #087b49; border-bottom: 2px solid #087b49; font-weight: 700; }
.consumer-order-list { display: grid; gap: 12px; margin-top: 14px; }
.consumer-order-list > article { border: 1px solid #e2e7e4; border-radius: 7px; overflow: hidden; }
.consumer-order-list header { height: 39px; display: flex; align-items: center; gap: 28px; padding: 0 15px; color: #79817c; background: #fafbfa; font-size: 9px; }
.consumer-order-list header b { margin-left: auto; color: #0b8750; }
.consumer-order-body { display: grid; grid-template-columns: 1fr 185px; }
.consumer-order-product { display: grid; grid-template-columns: 60px 1fr 90px 45px; align-items: center; gap: 12px; min-height: 78px; padding: 8px 15px; border-bottom: 1px solid #edf0ee; font-size: 10px; }
.consumer-order-product:last-child { border-bottom: 0; }
.consumer-order-product img { width: 58px; height: 58px; object-fit: contain; }
.consumer-order-product strong, .consumer-order-product small { display: block; }
.consumer-order-product small { margin-top: 5px; color: #919994; }
.consumer-order-body > aside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-left: 1px solid #edf0ee; font-size: 10px; }
.consumer-order-body > aside strong { font-size: 14px; }
.consumer-order-body > aside button { padding: 7px 15px; border: 1px solid #83c39d; border-radius: 4px; color: #087b49; background: #fff; }

.consumer-order-detail { border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-detail-back { height: 54px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #edf0ee; }
.consumer-detail-back h1 { margin: 0; font-size: 17px; }
.consumer-detail-back button { position: absolute; margin-left: -1140px; border: 0; color: #087b49; background: transparent; }
.consumer-order-progress { display: grid; grid-template-columns: repeat(5,1fr); padding: 28px 70px; }
.consumer-order-progress > div { position: relative; text-align: center; color: #a1a8a3; }
.consumer-order-progress > div::after { content: ""; position: absolute; left: 58%; right: -42%; top: 14px; height: 2px; background: #dce4df; }
.consumer-order-progress > div:last-child::after { display: none; }
.consumer-order-progress i { position: relative; z-index: 1; width: 29px; height: 29px; display: grid; place-items: center; margin: 0 auto 7px; border: 2px solid #ccd5cf; border-radius: 50%; background: #fff; font-style: normal; font-size: 10px; }
.consumer-order-progress strong, .consumer-order-progress small { display: block; font-size: 9px; }
.consumer-order-progress small { margin-top: 4px; }
.consumer-order-progress > div.active { color: #087b49; }
.consumer-order-progress > div.active i { color: #087b49; border-color: #087b49; }
.consumer-order-progress > div.active::after { background: #47a474; }
.consumer-order-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 15px; padding: 0 20px 20px; }
.consumer-order-detail-grid main > section, .consumer-logistics { margin-top: 12px; padding: 15px; border: 1px solid #e7ebe8; border-radius: 6px; }
.consumer-order-detail-grid h2 { margin: 0 0 13px; font-size: 13px; }
.consumer-order-detail-grid main > section > p { margin: 6px 0; color: #69716c; font-size: 10px; }
.consumer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 25px; }
.consumer-info-grid p { display: flex; margin: 0; font-size: 10px; }
.consumer-info-grid span { width: 75px; color: #8c948f; }
.consumer-logistics > strong, .consumer-logistics > small { display: block; font-size: 10px; }
.consumer-logistics > small { margin: 5px 0 16px; color: #929a95; }
.consumer-logistics > div { padding-left: 8px; border-left: 1px solid #b7d8c4; }
.consumer-logistics p { display: flex; gap: 10px; margin: 0; padding: 0 0 20px; }
.consumer-logistics p i { width: 7px; height: 7px; margin-left: -12px; border-radius: 50%; background: #0b8750; }
.consumer-logistics p b, .consumer-logistics p small { display: block; font-size: 9px; }
.consumer-logistics p small { margin-top: 5px; color: #929a95; }
.consumer-order-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #e8ece9; }
.consumer-order-actions button { padding: 8px 22px; border: 1px solid #dce3de; border-radius: 4px; background: #fff; }

.consumer-onboarding-hero { min-height: 315px; display: grid; grid-template-columns: 1fr 420px; align-items: center; padding: 35px 65px; border: 1px solid #deebe3; border-radius: 9px; background: linear-gradient(110deg,#eef8f2,#e5f6ed); }
.consumer-onboarding-hero small { color: #399263; }
.consumer-onboarding-hero h1 { margin: 9px 0; color: #176e42; font-size: 34px; }
.consumer-onboarding-hero p { color: #5f7d6b; font-size: 14px; }
.consumer-onboarding-hero button { padding: 10px 27px; border: 0; border-radius: 20px; color: #fff; background: #0b8750; }
.consumer-onboarding-hero ul { display: flex; gap: 30px; padding: 0; margin-top: 28px; list-style: none; color: #347756; font-size: 10px; }
.consumer-store-art { position: relative; width: 250px; height: 190px; display: grid; place-items: center; margin-left: auto; border: 13px solid #fff; border-top: 45px solid #20a66a; border-radius: 12px; color: #fff; background: #59c98e; box-shadow: 30px 20px 0 rgba(41,143,91,.12); }
.consumer-store-art::before { content: ""; position: absolute; left: -25px; right: -25px; top: -60px; height: 45px; border-radius: 35px 35px 4px 4px; background: repeating-linear-gradient(90deg,#18a563 0 35px,#fff 35px 68px); }
.consumer-store-art strong { font-size: 24px; }
.consumer-store-art span { position: absolute; bottom: 18px; padding: 5px 14px; color: #147847; background: #fff; border-radius: 15px; font-size: 10px; }
.consumer-onboarding-section { margin-top: 14px; padding: 22px; border: 1px solid #e2e7e4; border-radius: 9px; background: #fff; }
.consumer-onboarding-section h2 { margin: 0 0 20px; font-size: 17px; }
.consumer-onboarding-section > div { display: grid; grid-template-columns: repeat(5,1fr); }
.consumer-onboarding-section > div > span { position: relative; text-align: center; }
.consumer-onboarding-section > div i { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 9px; border-radius: 50%; color: #087b49; background: #eaf7ef; font-style: normal; font-size: 20px; }
.consumer-onboarding-section > div strong { display: block; font-size: 11px; }
.consumer-onboarding-section > div b { position: absolute; right: -5px; top: 18px; color: #7ebd99; }
.consumer-onboarding-section > p { display: grid; grid-template-columns: 20px 180px 1fr; margin: 0; padding: 11px 0; border-bottom: 1px solid #edf0ee; font-size: 10px; }
.consumer-onboarding-section > p i { color: #2b9d65; }
.consumer-onboarding-section > p span { color: #89918c; }

.consumer-store-page-head { min-height: 105px; display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-radius: 9px; color: #fff; background: linear-gradient(120deg,#137c4b,#35a168); }
.consumer-store-page-head small { color: rgba(255,255,255,.72); }
.consumer-store-page-head h1 { margin: 7px 0 0; font-size: 22px; }
.consumer-store-page-head p { margin: 0; font-size: 12px; }
.consumer-store-tabs, .consumer-favorite-tabs { height: 53px; display: flex; align-items: flex-end; gap: 30px; margin-top: 12px; padding: 0 20px; border: 1px solid #e2e7e4; border-radius: 9px 9px 0 0; background: #fff; }
.consumer-store-tabs button, .consumer-favorite-tabs button { height: 100%; padding: 0 6px; border: 0; background: transparent; font-size: 11px; }
.consumer-store-tabs button.active, .consumer-favorite-tabs button.active { color: #087b49; border-bottom: 2px solid #087b49; font-weight: 700; }
.consumer-store-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; padding-top: 13px; }
.consumer-store-card { overflow: hidden; border: 1px solid #e0e6e2; border-radius: 9px; background: #fff; transition: .2s; }
.consumer-store-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,75,48,.08); }
.consumer-store-cover { position: relative; height: 145px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg,#edf7f0,#dcefe3); }
.consumer-store-cover img { width: 100%; height: 100%; object-fit: cover; }
.consumer-store-cover > span { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: #24a066; font-size: 28px; font-weight: 700; }
.consumer-store-cover > b { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 13px; color: #fff; background: rgba(15,54,34,.72); font-size: 9px; }
.consumer-store-card > div:last-child { padding: 15px; }
.consumer-store-card small { color: #168d56; }
.consumer-store-card h2 { margin: 6px 0 8px; font-size: 16px; }
.consumer-store-card p { height: 30px; overflow: hidden; margin: 0; color: #7a837d; font-size: 10px; line-height: 1.5; }
.consumer-store-card > div:last-child > div { display: flex; gap: 12px; margin: 11px 0; color: #68716b; font-size: 9px; }
.consumer-store-card > div:last-child > div span:first-child { color: #e68225; }
.consumer-store-card button { padding: 7px 15px; border: 1px solid #8dc8a5; border-radius: 4px; color: #087b49; background: #fff; font-size: 10px; }
.consumer-store-card button.subtle { margin-left: 7px; color: #7a837d; border-color: #dfe5e1; }
.consumer-store-detail-hero { display: grid; grid-template-columns: 165px 1fr auto; align-items: center; gap: 22px; min-height: 190px; padding: 22px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-store-detail-hero .consumer-store-cover { width: 165px; height: 140px; border-radius: 7px; }
.consumer-store-detail-hero small { color: #168d56; }
.consumer-store-detail-hero h1 { margin: 7px 0; font-size: 24px; }
.consumer-store-detail-hero p { color: #69726c; font-size: 11px; }
.consumer-store-detail-hero > div:nth-child(2) > div { display: flex; gap: 22px; margin-top: 18px; font-size: 10px; }
.consumer-store-detail-hero > button { padding: 9px 17px; border: 1px solid #84c59e; border-radius: 5px; color: #087b49; background: #f6fcf8; }
.consumer-store-products { margin-top: 13px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-store-products .consumer-section-head > span { margin-left: auto; color: #8a938d; font-size: 10px; }

.consumer-coupon-hero { height: 170px; display: flex; align-items: center; justify-content: space-between; padding: 30px 55px; border-radius: 9px; color: #fff; background: radial-gradient(circle at 80% 30%,rgba(255,255,255,.25),transparent 20%),linear-gradient(120deg,#ff8959,#f15643); }
.consumer-coupon-hero h1 { margin: 6px 0; font-size: 31px; }
.consumer-coupon-hero p { margin: 0; color: rgba(255,255,255,.8); }
.consumer-coupon-hero > span { padding: 13px 25px; border: 2px dashed rgba(255,255,255,.6); border-radius: 9px; font-size: 22px; letter-spacing: 4px; transform: rotate(-5deg); }
.consumer-coupon-page, .consumer-favorites-page { margin-top: 13px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-coupon-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 16px; }
.consumer-coupon-cards > article { min-height: 125px; display: grid; grid-template-columns: 120px 1fr 90px; align-items: center; overflow: hidden; border: 1px solid #ffd9cb; border-radius: 8px; background: #fffaf8; }
.consumer-coupon-cards > article > div { height: 100%; display: grid; place-content: center; text-align: center; color: #ef5b40; border-right: 1px dashed #f4c5b4; }
.consumer-coupon-cards > article > div strong { font-size: 27px; }
.consumer-coupon-cards > article > div span { font-size: 9px; }
.consumer-coupon-cards section { padding: 12px 16px; }
.consumer-coupon-cards section small { color: #ef5b40; }
.consumer-coupon-cards section h2 { margin: 5px 0; font-size: 14px; }
.consumer-coupon-cards section p { margin: 0; color: #8a928d; font-size: 9px; }
.consumer-coupon-cards > article > button { padding: 8px 0; margin-right: 14px; border: 0; border-radius: 16px; color: #fff; background: #f26449; font-size: 10px; }
.consumer-coupon-cards > article > button:disabled { background: #c9cecb; }
.consumer-campaigns { margin-top: 13px; padding: 18px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-campaigns > h2 { margin: 0 0 13px; font-size: 16px; }
.consumer-campaigns > article { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0ee; }
.consumer-campaigns i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #f07150; font-style: normal; }
.consumer-campaigns strong, .consumer-campaigns small { display: block; }
.consumer-campaigns small { margin-top: 4px; color: #909893; }
.consumer-campaigns b { color: #ef5b40; font-size: 10px; }

.consumer-membership-card { min-height: 190px; display: flex; align-items: center; justify-content: space-between; padding: 32px 48px; border-radius: 12px; color: #f9efd4; background: radial-gradient(circle at 83% 20%,rgba(255,230,169,.17),transparent 25%),linear-gradient(135deg,#143f31,#1d7050); box-shadow: 0 18px 35px rgba(10,66,43,.15); }
.consumer-membership-card h1 { margin: 7px 0; color: #fff; font-size: 25px; }
.consumer-membership-card p { margin: 0 0 9px; font-size: 10px; }
.consumer-membership-card > div > div { width: 420px; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.16); }
.consumer-membership-card > div > div i { display: block; height: 100%; background: #e8c77a; }
.consumer-membership-card > div > span { display: block; margin-top: 7px; color: rgba(255,255,255,.6); font-size: 9px; }
.consumer-membership-card > button { width: 95px; height: 95px; border: 1px solid rgba(255,231,170,.6); border-radius: 50%; color: #70541f; background: linear-gradient(#f8e7b6,#dcb965); font-weight: 700; }
.consumer-membership-card > button small { font-size: 9px; }
.consumer-member-assets { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 13px; }
.consumer-member-assets article { padding: 18px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; text-align: center; }
.consumer-member-assets span, .consumer-member-assets strong, .consumer-member-assets small { display: block; }
.consumer-member-assets span { color: #737c76; font-size: 10px; }
.consumer-member-assets strong { margin: 7px 0; color: #087b49; font-size: 22px; }
.consumer-member-assets small { color: #a0a6a2; font-size: 9px; }
.consumer-membership-panel { margin-top: 13px; padding: 20px; border: 1px solid #e1e6e3; border-radius: 9px; background: #fff; }
.consumer-membership-panel > h2 { margin: 0 0 16px; font-size: 16px; }
.consumer-benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.consumer-benefit-grid article { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 13px; border-radius: 7px; background: #f8faf8; }
.consumer-benefit-grid i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #9b792e; background: #f5e9c9; font-style: normal; font-size: 18px; }
.consumer-benefit-grid strong, .consumer-benefit-grid p { margin: 0; font-size: 10px; }
.consumer-benefit-grid p { margin-top: 4px; color: #919994; }
.consumer-benefit-grid > article > span { color: #9b792e; font-size: 9px; }
.consumer-task-list > div { display: grid; grid-template-columns: 38px 1fr 70px; align-items: center; gap: 10px; min-height: 58px; border-top: 1px solid #edf0ee; }
.consumer-task-list i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #087b49; background: #eaf7ef; font-style: normal; }
.consumer-task-list strong, .consumer-task-list small { display: block; font-size: 10px; }
.consumer-task-list small { margin-top: 4px; color: #969d98; }
.consumer-task-list button { padding: 6px; border: 1px solid #84c49d; border-radius: 4px; color: #087b49; background: #fff; font-size: 9px; }

.consumer-favorite-tabs { margin: 0; border-width: 0 0 1px; border-radius: 0; }
.consumer-favorites-page > .consumer-catalog-grid { padding: 14px; }
.consumer-favorite-item { position: relative; border: 1px solid #edf0ee; }
.consumer-favorite-item > .consumer-product { border: 0; }
.consumer-favorite-item > button { width: calc(100% - 20px); margin: 0 10px 10px; padding: 6px; border: 1px solid #dfe5e1; border-radius: 4px; color: #747d77; background: #fff; font-size: 9px; }
.consumer-favorites-page > .consumer-store-grid { padding: 14px; }

.consumer-message-page { min-height: 610px; display: grid; grid-template-columns: 200px 1fr; border: 1px solid #e1e6e3; border-radius: 9px; overflow: hidden; background: #fff; }
.consumer-message-page > aside { background: #f7f9f7; border-right: 1px solid #e4e9e6; }
.consumer-message-page > aside h2 { margin: 0; padding: 18px; font-size: 17px; }
.consumer-message-page > aside button { width: 100%; height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border: 0; background: transparent; text-align: left; font-size: 11px; }
.consumer-message-page > aside button.active { color: #087b49; background: #fff; font-weight: 700; }
.consumer-message-page > aside b { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #ee5a3e; font-size: 8px; }
.consumer-message-page > main > header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e8ece9; }
.consumer-message-page > main h1 { margin: 0; font-size: 16px; }
.consumer-message-page > main header button { border: 0; color: #087b49; background: transparent; font-size: 10px; }
.consumer-message-page > main > div > article { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; min-height: 90px; align-items: center; padding: 13px 20px; border-bottom: 1px solid #edf0ee; }
.consumer-message-page > main > div > article > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #087b49; background: #eaf7ef; font-style: normal; }
.consumer-message-page article strong { font-size: 11px; }
.consumer-message-page article p { overflow: hidden; margin: 6px 0; color: #727b75; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.consumer-message-page article small { color: #a1a7a3; font-size: 9px; }
.consumer-message-page article > b { position: absolute; right: 20px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: #ef5c41; }
.consumer-message-page article.read { opacity: .65; }

.consumer-service-page { min-height: 620px; display: grid; grid-template-columns: 285px 1fr; border: 1px solid #dfe5e1; border-radius: 9px; overflow: hidden; background: #fff; }
.consumer-service-page > aside { padding: 22px; background: #f6faf7; border-right: 1px solid #e2e8e4; }
.consumer-service-page > aside > div { text-align: center; }
.consumer-service-page > aside > div i { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: #fff; background: #168c56; font-style: normal; font-size: 27px; }
.consumer-service-page > aside h1 { margin: 10px 0 4px; font-size: 17px; }
.consumer-service-page > aside p { margin: 0; color: #89918c; font-size: 9px; }
.consumer-service-page > aside h2 { margin: 26px 0 8px; font-size: 12px; }
.consumer-service-page > aside > button { width: 100%; height: 41px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border: 0; border-bottom: 1px solid #e7ebe8; background: transparent; text-align: left; font-size: 10px; }
.consumer-service-page > aside > section { display: flex; justify-content: space-between; margin-top: 18px; padding: 12px; border-radius: 6px; color: #087b49; background: #e8f6ee; font-size: 10px; }
.consumer-service-page > main { display: grid; grid-template-rows: 66px 1fr 68px; min-width: 0; }
.consumer-service-page > main > header { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid #e7ebe8; }
.consumer-service-page > main > header .consumer-avatar { width: 40px; height: 40px; }
.consumer-service-page > main > header strong, .consumer-service-page > main > header small { display: block; }
.consumer-service-page > main > header strong { font-size: 12px; }
.consumer-service-page > main > header small { margin-top: 4px; color: #168c56; font-size: 9px; }
.consumer-chat { overflow: auto; padding: 22px; background: #fbfcfb; }
.consumer-chat > div { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 16px; }
.consumer-chat > div.user { align-items: flex-end; }
.consumer-chat > div span { max-width: 70%; padding: 10px 13px; border-radius: 4px 14px 14px; background: #fff; box-shadow: 0 4px 12px rgba(24,61,40,.06); font-size: 10px; line-height: 1.6; }
.consumer-chat > div.user span { color: #fff; border-radius: 14px 4px 14px 14px; background: #168c56; }
.consumer-chat > div small { margin-top: 4px; color: #a0a6a2; font-size: 8px; }
.consumer-service-page form { display: grid; grid-template-columns: 1fr 75px; gap: 10px; padding: 12px 18px; border-top: 1px solid #e7ebe8; }
.consumer-service-page form input { min-width: 0; border: 1px solid #dfe5e1; border-radius: 5px; padding: 0 12px; }
.consumer-service-page form button { border: 0; border-radius: 5px; color: #fff; background: #087b49; }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .business-dashboard-grid { grid-template-columns: 1fr; }
  .business-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .business-product-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .business-product-card:nth-child(3n) { border-right: 0; }
  .business-kv { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-art { opacity: .55; right: 25px; }
  .login { grid-template-columns: 1fr 1fr; }
  .login-visual { padding: 45px; }
  .consumer-header-main { grid-template-columns: 205px minmax(300px,1fr) 160px; gap: 20px; }
  .consumer-logo strong { font-size: 23px; }
  .consumer-main-grid { grid-template-columns: 210px minmax(0,1fr); }
  .consumer-categories { min-height: 365px; }
  .consumer-account { display: none; }
  .consumer-showcase-grid { grid-template-columns: minmax(0,1fr) 270px; }
  .consumer-coupon { display: block; }
  .consumer-recommend-grid { grid-template-columns: repeat(4,1fr); }
  .consumer-recommend .consumer-product:nth-child(n+5) { display: none; }
  .consumer-nav button { min-width: auto; padding-inline: 9px; font-size: 12px; }
  .consumer-catalog-grid { grid-template-columns: repeat(4,1fr); }
  .consumer-detail-card { grid-template-columns: 43% 1fr; gap: 24px; }
  .consumer-gallery-main { height: 360px; }
  .consumer-cart-row { grid-template-columns: 55px minmax(240px,1fr) 85px 105px 90px 50px; }
  .consumer-cart-header-main { grid-template-columns: 350px minmax(280px,1fr) 145px; gap: 20px; }
  .consumer-cart-brand > b { margin-inline: 14px; }
  .consumer-cart-layout { grid-template-columns: minmax(0,1fr) 300px; gap: 12px; }
  .consumer-cart-line { grid-template-columns: 30px minmax(230px,1fr) 75px 95px 85px 55px; padding-inline: 12px; }
  .consumer-cart-like > div { grid-template-columns: repeat(3,1fr); }
  .consumer-detail-back button { position: static; margin: 0 auto 0 0; }
  .consumer-detail-back h1 { margin-right: auto; }
  .consumer-store-grid { grid-template-columns: repeat(2,1fr); }
  .consumer-coupon-cards { grid-template-columns: 1fr; }
  .consumer-benefit-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 850px) {
  .login { display: block; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 35px 24px; }
  .mobile-brand { display: flex; }
  .shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .22s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-btn { display: block; }
  .mask { display: block; position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(0,0,0,.35); }
  .search.global { display: none; }
  .business-page-head { align-items: flex-start; flex-direction: column; }
  .business-head-actions { justify-content: flex-start; }
  .business-hero { padding: 32px; }
  .business-hero img { right: 20px; opacity: .35; }
  .business-flow-card { overflow: auto; }
  .business-flow-steps { min-width: 700px; }
  .role-subpages > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-list-head { align-items: flex-start; flex-direction: column; }
  .business-tools { width: 100%; }
  .business-tools .search { flex: 1; width: auto; }
  .business-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-product-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .business-product-card:nth-child(2n) { border-right: 0; }
  .consumer-wrap { width: min(100% - 24px, 720px); }
  .consumer-utility { display: none; }
  .consumer-header-main { height: auto; grid-template-columns: 1fr auto; gap: 12px; padding-block: 14px; }
  .consumer-logo i { width: 40px; height: 40px; }
  .consumer-logo strong { font-size: 20px; }
  .consumer-logo small { display: none; }
  .consumer-search-wrap { grid-column: 1/-1; grid-row: 2; width: 100%; }
  .consumer-hotwords { overflow: hidden; white-space: nowrap; }
  .consumer-cart { width: 48px; font-size: 0; }
  .consumer-cart span { margin: 0; font-size: 20px; }
  .consumer-cart b { right: 2px; top: -7px; }
  .consumer-nav { overflow: auto; }
  .consumer-nav .consumer-wrap { width: max-content; min-width: 100%; }
  .consumer-nav .category-title { width: auto; flex-basis: auto; border-radius: 0; }
  .consumer-main-grid { display: block; }
  .consumer-categories { display: none; }
  .consumer-hero-banner { height: 245px; }
  .consumer-hero-copy { width: 75%; padding: 38px 0 0 28px; }
  .consumer-guarantees { grid-template-columns: repeat(5,130px); overflow: auto; }
  .consumer-showcase-grid { height: auto; grid-template-columns: 1fr; }
  .consumer-coupon { margin-top: 12px; }
  .consumer-product-grid { overflow: auto; grid-template-columns: repeat(4,150px); }
  .consumer-category-grid { grid-template-columns: repeat(5,1fr); }
  .consumer-recommend-grid { overflow: auto; grid-template-columns: repeat(8,150px); }
  .consumer-recommend .consumer-product:nth-child(n) { display: block; }
  .consumer-brands { overflow: auto; grid-template-columns: 130px repeat(8,120px); }
  .consumer-float { display: none; }
  .consumer-subpage { min-height: calc(100vh - 172px); }
  .consumer-category-page, .consumer-member-page { grid-template-columns: 145px 1fr; }
  .consumer-category-side small { display: none; }
  .consumer-category-side button { padding-inline: 14px; }
  .consumer-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .consumer-detail-card { grid-template-columns: 1fr; }
  .consumer-gallery-main { height: 390px; }
  .consumer-product-info h1 { font-size: 21px; }
  .consumer-cart-table { overflow-x: auto; }
  .consumer-cart-row { min-width: 800px; }
  .consumer-cart-recommend .consumer-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .consumer-cart-header-main { height: auto; grid-template-columns: 1fr 48px; gap: 12px; padding-block: 13px; }
  .consumer-cart-brand .consumer-logo strong { font-size: 20px; }
  .consumer-cart-brand > b { height: 35px; margin-inline: 10px; }
  .consumer-cart-brand h1 { font-size: 17px; }
  .consumer-cart-search { grid-column: 1/-1; grid-row: 2; }
  .consumer-cart-screen { min-height: calc(100vh - 139px); }
  .consumer-cart-tabs { overflow-x: auto; }
  .consumer-cart-tabs > button { min-width: 105px; }
  .consumer-cart-tabs > div { min-width: 245px; padding-left: 12px; }
  .consumer-cart-layout { display: block; }
  .consumer-cart-store { overflow-x: auto; }
  .consumer-cart-store > header, .consumer-cart-store > footer, .consumer-cart-line { min-width: 790px; }
  .consumer-cart-summary { position: static; margin-top: 12px; }
  .consumer-cart-side-recommend main { grid-template-columns: repeat(6,1fr); }
  .consumer-cart-side-recommend main button:nth-child(n+7) { display: none; }
  .consumer-cart-selected main { grid-template-columns: repeat(3,1fr); }
  .consumer-cart-selected main button:nth-child(n) { display: block; }
  .consumer-delivery-methods, .consumer-pay-methods { grid-template-columns: 1fr; }
  .consumer-member-hero { grid-template-columns: 55px 1fr; }
  .consumer-member-hero dl { grid-column: 1/-1; margin-top: 10px; }
  .consumer-order-body { grid-template-columns: 1fr 150px; }
  .consumer-order-detail-grid { grid-template-columns: 1fr; }
  .consumer-onboarding-hero { grid-template-columns: 1fr 260px; padding: 30px; }
  .consumer-store-art { transform: scale(.78); transform-origin: right center; }
  .consumer-store-detail-hero { grid-template-columns: 130px 1fr; }
  .consumer-store-detail-hero .consumer-store-cover { width: 130px; height: 115px; }
  .consumer-store-detail-hero > button { grid-column: 1/-1; width: 150px; }
  .consumer-membership-card { padding: 28px; }
  .consumer-membership-card > div > div { width: min(420px,55vw); }
  .consumer-message-page { grid-template-columns: 155px 1fr; }
  .consumer-service-page { grid-template-columns: 230px 1fr; }
}
@media (max-width: 620px) {
  .topbar { height: 62px; padding: 0 16px; }
  .content { padding: 16px; }
  .demo-pill { display: none; }
  .api-online { display: none; }
  .hero { padding: 26px 23px; min-height: 180px; }
  .hero-art { width: 110px; height: 110px; right: 8px; opacity: .4; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric { padding: 15px; }
  .metric strong { font-size: 20px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .module-head { display: block; }
  .actions { margin-top: 15px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .search { max-width: none; }
  .filters { overflow: auto; }
  .order-row { grid-template-columns: 1fr 1fr .7fr; }
  .order-row span:nth-child(3), .order-row span:nth-child(4) { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .api-kv { grid-template-columns: 1fr; }
  .api-input-row { grid-template-columns: 1fr; }
  .business-page-head h1 { font-size: 24px; }
  .business-head-actions .secondary:first-of-type { display: none; }
  .business-hero { min-height: 215px; padding: 26px 23px; }
  .business-hero h1 { font-size: 27px; }
  .business-hero > div > div { align-items: flex-start; flex-direction: column; }
  .business-hero img { width: 125px; height: 125px; right: 3px; }
  .business-shortcuts { grid-template-columns: 1fr; }
  .role-subpages > div { grid-template-columns: 1fr; }
  .business-kv { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-tools { align-items: stretch; flex-direction: column; }
  .business-tools .filters { width: 100%; }
  .business-product-grid { grid-template-columns: 1fr; }
  .business-product-card, .business-product-card:nth-child(n) { border-right: 0; }
  .business-product-image { height: 190px; }
  .business-form-grid { grid-template-columns: 1fr; }
  .procurement-dock { align-items: stretch; flex-wrap: wrap; bottom: 8px; }
  .procurement-dock > div { flex-basis: 100%; }
  .procurement-dock > button { flex: 1; }
  .consumer-header-main { grid-template-columns: 1fr 45px; }
  .consumer-search { grid-template-columns: 34px 1fr 60px; }
  .consumer-hotwords { display: none; }
  .consumer-nav { height: 42px; }
  .consumer-nav button { font-size: 11px; }
  .consumer-home { padding-top: 8px; }
  .consumer-hero-banner { height: 205px; }
  .consumer-hero-copy { width: 88%; padding: 28px 20px; }
  .consumer-hero-copy h1 { font-size: 26px; }
  .consumer-hero-copy p { font-size: 13px; }
  .consumer-hero-copy div { gap: 8px; font-size: 10px; }
  .consumer-guarantees { grid-template-columns: repeat(4,120px); height: 58px; }
  .consumer-section-head { overflow: hidden; }
  .consumer-section-head > div { white-space: nowrap; }
  .consumer-product-grid { grid-template-columns: repeat(4,142px); }
  .consumer-tabs { gap: 13px; }
  .consumer-tabs span { font-size: 10px; }
  .consumer-recommend-grid { grid-template-columns: repeat(8,142px); }
  .consumer-breadcrumb { height: 34px; }
  .consumer-category-page, .consumer-member-page { display: block; }
  .consumer-category-side { display: flex; overflow: auto; border-right: 0; border-bottom: 1px solid #e7ebe8; }
  .consumer-category-side h2 { display: none; }
  .consumer-category-side > button, .consumer-category-side div > button { width: max-content; min-width: 95px; }
  .consumer-category-side div { display: flex; padding: 0; }
  .consumer-category-content { padding-inline: 10px; }
  .consumer-category-title { height: 65px; }
  .consumer-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .consumer-catalog-grid .consumer-product-image { height: 105px; }
  .consumer-detail-card { padding: 14px; }
  .consumer-gallery-main { height: 300px; }
  .consumer-thumbs button { width: 48px; height: 48px; }
  .consumer-detail-price { gap: 8px; padding-inline: 9px; }
  .consumer-detail-price strong { font-size: 22px; }
  .consumer-detail-actions button { flex: 1; width: auto; }
  .consumer-detail-tabs > div { overflow: auto; }
  .consumer-detail-tabs > div button { min-width: 100px; }
  .consumer-detail-tabs > section { padding: 14px; }
  .consumer-detail-features, .consumer-parameter-grid, .consumer-trace-grid { grid-template-columns: 1fr; }
  .consumer-detail-features > div + div { border-left: 0; border-top: 1px solid #e5ebe7; }
  .consumer-parameter-grid > div:nth-child(odd) { border-right: 0; }
  .consumer-parameter-grid > div { grid-template-columns: 100px 1fr; }
  .consumer-parameter-panel > header { display: block; }
  .consumer-parameter-panel > header p { margin-top: 5px; }
  .consumer-review-summary { grid-template-columns: 105px 1fr; padding: 12px; }
  .consumer-review-summary > div:nth-child(2) { padding-left: 15px; }
  .consumer-review-tags { grid-column: 1 / -1; margin-top: 12px; }
  .consumer-review-item { grid-template-columns: 36px 1fr; }
  .consumer-review-avatar { width: 34px; height: 34px; }
  .consumer-review-item header { flex-wrap: wrap; gap: 6px; }
  .consumer-review-item header time { width: 100%; margin-left: 0; }
  .consumer-trace-verified > span { display: none; }
  .consumer-cart-recommend .consumer-product, .consumer-member-panel .consumer-product { display: block; }
  .consumer-cart-brand .consumer-logo small { display: none; }
  .consumer-cart-brand > b, .consumer-cart-brand h1 { display: none; }
  .consumer-cart-benefit { padding: 9px 12px; }
  .consumer-cart-benefit button { width: 82px; }
  .consumer-cart-benefit b { display: none; }
  .consumer-cart-side-recommend main { grid-template-columns: repeat(3,1fr); }
  .consumer-cart-side-recommend main button:nth-child(n) { display: block; }
  .consumer-cart-like > div { grid-template-columns: repeat(2,1fr); }
  .consumer-cart-total p { font-size: 0; }
  .consumer-cart-total p strong { font-size: 17px; }
  .consumer-cart-total > button:last-child { width: 105px; margin-left: 10px; }
  .consumer-checkout-steps { gap: 6px; }
  .consumer-checkout-steps i { width: 25px; }
  .consumer-checkout-items > div { grid-template-columns: 45px 1fr auto; }
  .consumer-checkout-items > div small { display: none; }
  .consumer-checkout-summary { width: 100%; }
  .consumer-submit-order strong { font-size: 18px; }
  .consumer-submit-order button { width: 110px; margin-left: 10px; }
  .consumer-member-nav { display: none; }
  .consumer-member-hero { padding: 17px; }
  .consumer-member-hero dl { overflow: auto; grid-template-columns: repeat(4,90px); }
  .consumer-member-orders, .consumer-member-tools { grid-template-columns: repeat(5,90px); overflow: auto; }
  .consumer-member-panel .consumer-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .consumer-orders-page { padding: 12px; }
  .consumer-order-tabs { gap: 10px; overflow: auto; }
  .consumer-order-tabs button { min-width: 55px; }
  .consumer-order-list header span:nth-child(2) { display: none; }
  .consumer-order-body { display: block; }
  .consumer-order-product { grid-template-columns: 50px 1fr 65px 30px; padding-inline: 8px; }
  .consumer-order-body > aside { flex-direction: row; justify-content: flex-end; padding: 10px; border-left: 0; border-top: 1px solid #edf0ee; }
  .consumer-order-progress { padding: 20px 6px; }
  .consumer-order-progress strong { font-size: 8px; }
  .consumer-info-grid { grid-template-columns: 1fr; }
  .consumer-onboarding-hero { display: block; padding: 25px; }
  .consumer-onboarding-hero h1 { font-size: 27px; }
  .consumer-store-art { display: none; }
  .consumer-onboarding-section { padding: 15px; }
  .consumer-onboarding-section > div { grid-template-columns: repeat(5,100px); overflow: auto; }
  .consumer-onboarding-section > p { grid-template-columns: 18px 120px 1fr; }
  .consumer-store-page-head { padding: 18px; }
  .consumer-store-page-head p { display: none; }
  .consumer-store-grid { grid-template-columns: 1fr; }
  .consumer-store-detail-hero { display: block; }
  .consumer-store-detail-hero .consumer-store-cover { width: 100%; height: 180px; margin-bottom: 15px; }
  .consumer-store-detail-hero > div:nth-child(2) > div { flex-wrap: wrap; gap: 9px 16px; }
  .consumer-store-detail-hero > button { margin-top: 15px; }
  .consumer-coupon-hero { height: 140px; padding: 23px; }
  .consumer-coupon-hero > span { display: none; }
  .consumer-coupon-cards { padding: 9px; }
  .consumer-coupon-cards > article { grid-template-columns: 85px 1fr 68px; }
  .consumer-coupon-cards > article > div strong { font-size: 20px; }
  .consumer-coupon-cards section { padding: 9px; }
  .consumer-coupon-cards > article > button { margin-right: 7px; font-size: 8px; }
  .consumer-membership-card { padding: 22px; }
  .consumer-membership-card > div > div { width: min(220px,58vw); }
  .consumer-membership-card > button { width: 72px; height: 72px; font-size: 10px; }
  .consumer-member-assets { grid-template-columns: repeat(2,1fr); }
  .consumer-benefit-grid { grid-template-columns: 1fr; }
  .consumer-message-page { display: block; }
  .consumer-message-page > aside { display: flex; overflow: auto; border-right: 0; border-bottom: 1px solid #e4e9e6; }
  .consumer-message-page > aside h2 { display: none; }
  .consumer-message-page > aside button { min-width: 95px; }
  .consumer-service-page { display: block; }
  .consumer-service-page > aside { display: none; }
  .consumer-service-page > main { min-height: 600px; }
}