:root {
  --blue: #0b5cad;
  --blue-strong: #06498d;
  --blue-soft: #eaf3fb;
  --navy: #0b2f55;
  --navy-deep: #07233f;
  --orange: #f59e0b;
  --orange-soft: #fff5df;
  --red: #d92d20;
  --green: #168454;
  --green-soft: #eaf8f1;
  --ink: #16283b;
  --text: #33475b;
  --muted: #74869a;
  --steel: #e8eef4;
  --line: #dce5ed;
  --panel: #ffffff;
  --canvas: #f3f6f8;
  --shadow: 0 8px 24px rgba(11, 47, 85, 0.08);
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", "Segoe UI", sans-serif;
  --data-font: Bahnschrift, "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { min-height: 100%; overflow-x: hidden; }
body { min-height: 100%; margin: 0; color: #1d1d1f; background: #f5f5f7; font-family: var(--body-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body, button, input, select, textarea { font-family: var(--body-font); }
button, input, select, textarea { font-size: 14px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.46; }
input, select, textarea { color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(11, 92, 173, 0.12); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.55); outline-offset: 2px; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
table { width: 100%; border-collapse: collapse; }
[hidden] { display: none !important; }

.btn {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active, .icon-action:active, .config-option:active, .config-brief:active { transform: scale(0.97); transition: transform 100ms ease-out; }
.btn-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-strong); }
.btn-secondary { color: var(--blue); background: #fff; border-color: #b9cce0; }
.btn-secondary:hover { background: var(--blue-soft); }
.btn-block { width: 100%; min-height: 48px; }
.text-btn, .link-btn { padding: 0; color: var(--blue); background: transparent; border: 0; }
.link-btn { margin-right: 10px; font-size: 13px; white-space: nowrap; }
.icon-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text); background: transparent; }
.icon-btn:hover { background: var(--steel); }

.status { display: inline-flex; min-height: 24px; padding: 2px 8px; border: 1px solid; border-radius: 4px; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-blue { color: var(--blue); background: var(--blue-soft); border-color: #bfd6ec; }
.status-amber { color: #a15f00; background: var(--orange-soft); border-color: #f1d59f; }
.status-green { color: var(--green); background: var(--green-soft); border-color: #b8dfcc; }
.status-red { color: var(--red); background: #fff0ee; border-color: #f1c0ba; }
.status-gray { color: #66788a; background: #f3f6f8; border-color: #d6e0e7; }

#toast-root { position: fixed; top: 18px; left: 50%; z-index: 1000; transform: translateX(-50%); pointer-events: none; }
.toast { min-width: 260px; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid #bdd9ca; border-radius: 6px; display: flex; align-items: center; gap: 10px; color: #0b6240; background: #effaf4; box-shadow: var(--shadow); animation: toast-in 180ms ease-out; }
.toast b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile shell */
.mobile-shell { width: 100%; max-width: 430px; min-height: 100vh; margin: 0 auto; position: relative; background: #f5f5f7; box-shadow: 0 0 34px rgba(11, 47, 85, 0.12); }
.mobile-header { height: 54px; padding: 7px 12px; border-bottom: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr) 68px; align-items: center; background: rgba(249,249,251,0.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 30; }
.mobile-header > div:first-child { min-width: 0; }
.mobile-header .icon-btn { font-size: 34px; line-height: 1; }
.location { max-width: 72px; padding: 0; border: 0; display: flex; align-items: center; gap: 5px; font-weight: 700; background: transparent; white-space: nowrap; }
.location i { color: var(--orange); font-size: 9px; font-style: normal; }
.location span { color: var(--muted); }
.mobile-title { min-width: 0; text-align: center; }
.mobile-title h1 { overflow: hidden; font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mobile-title p { margin-top: 2px; color: var(--muted); font-size: 10px; }
.mini-program-menu { width: 64px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; justify-self: end; background: #fff; font-family: var(--data-font); }
.mini-program-menu b { font-size: 15px; }
.mobile-content { min-width: 0; padding-bottom: 72px; }
.mobile-nav { width: min(100%, 430px); height: 58px; padding: 4px calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); border-top: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: 0; left: 50%; z-index: 40; transform: translateX(-50%); background: rgba(249,249,251,0.84); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 -1px 0 rgba(0,0,0,0.08); }
.mobile-nav a { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #718194; font-size: 10px; }
.mobile-nav a i { height: 21px; font-size: 18px; line-height: 21px; font-style: normal; }
.mobile-nav a.active { color: var(--blue); font-weight: 700; }
.mobile-nav a.active::before { content: ""; width: 26px; height: 3px; position: absolute; top: -6px; border-radius: 0 0 3px 3px; background: var(--blue); }
.mobile-nav em { width: 17px; height: 17px; position: absolute; top: 0; left: calc(50% + 8px); display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 9px; font-style: normal; }

/* Login */
.login-page { width: 100%; max-width: 430px; min-height: 100vh; margin: 0 auto; background: #fff; box-shadow: 0 0 34px rgba(11, 47, 85, 0.12); }
.login-visual { height: 300px; position: relative; overflow: hidden; color: #fff; background: var(--navy); }
.login-visual::after { content: ""; position: absolute; inset: 0; background: rgba(7, 35, 63, 0.48); }
.login-visual img { width: 100%; height: 100%; object-fit: cover; }
.login-brand { position: absolute; top: 22px; left: 22px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.login-brand i { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #fff; color: var(--navy); background: #fff; font-family: var(--data-font); font-style: normal; font-weight: 800; }
.login-brand p { font-weight: 800; }
.login-statement { max-width: 330px; position: absolute; left: 24px; right: 24px; bottom: 30px; z-index: 2; }
.login-statement small { color: #b9d9f5; font-family: var(--data-font); font-size: 11px; }
.login-statement h1 { margin: 7px 0 8px; font-size: 31px; line-height: 1.16; }
.login-statement p { color: #e3eef7; font-size: 13px; }
.login-form-wrap { padding: 22px 24px 28px; }
.login-form-wrap header span { display: inline-block; padding: 4px 8px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 700; }
.login-form-wrap header h2 { margin-top: 8px; font-size: 24px; }
.login-form-wrap header p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.login-form-wrap form { margin-top: 18px; }
.login-form-wrap form > label, .checkout-form label, .filter-grid label, .settings-form label, .modal-form label { display: flex; flex-direction: column; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; }
.login-form-wrap input, .checkout-form input, .checkout-form select, .checkout-form textarea, .filter-grid input, .filter-grid select, .settings-form input, .settings-form textarea, .modal-form input, .modal-form select, .modal-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.login-form-wrap form > label + label { margin-top: 15px; }
.form-row { margin: 14px 0 20px; display: flex; align-items: center; justify-content: space-between; }
.form-row .check { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.form-row .check input { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: none; box-shadow: none; }
.admin-entry { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--steel); display: flex; justify-content: space-between; color: var(--blue); font-size: 13px; font-weight: 700; }

/* Mobile home */
.dealer-strip { min-height: 44px; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy); color: #fff; }
.dealer-strip div { min-width: 0; }
.dealer-strip small { display: block; color: #91c4ec; font-size: 9px; }
.dealer-strip b { display: block; margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dealer-strip > span { flex: none; padding: 3px 7px; border: 1px solid rgba(255,255,255,0.3); color: #dcecf8; font-size: 9px; }
.mobile-search { height: 40px; margin: 8px 12px; padding-left: 12px; border: 1px solid #a9c5de; border-radius: 20px; display: flex; align-items: center; gap: 7px; background: #fff; }
.mobile-search > i { color: var(--blue); font-size: 20px; font-style: normal; }
.mobile-search input { min-width: 0; flex: 1; border: 0; background: transparent; }
.mobile-search input:focus { box-shadow: none; }
.mobile-search button { height: 34px; margin-right: 2px; padding: 0 16px; border: 0; border-radius: 17px; color: #fff; background: var(--blue); font-weight: 700; }
.cargo-hero { height: 222px; margin: 0 12px; position: relative; overflow: hidden; border-radius: 6px; color: #fff; background: var(--navy); touch-action: pan-y; }
.carousel-track { height: 100%; display: flex; will-change: transform; }
.hero-slide { height: 100%; position: relative; flex: 0 0 100%; overflow: hidden; }
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: rgba(7, 35, 63, 0.34); }
.cargo-hero-copy { width: 68%; padding: 20px 0 0 18px; position: absolute; inset: 0 auto 0 0; z-index: 2; background: rgba(7, 35, 63, 0.83); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.cargo-hero-copy small { color: #9ccdf0; font-family: var(--data-font); font-size: 10px; }
.cargo-hero-copy h2 { width: 190px; margin-top: 8px; font-size: 25px; line-height: 1.2; }
.cargo-hero-copy p { width: 180px; margin-top: 7px; color: #d7e8f5; font-size: 10px; line-height: 1.55; }
.cargo-hero-copy a { margin-top: 13px; display: inline-flex; gap: 8px; color: #fff; font-size: 10px; font-weight: 700; }
.cargo-hero-copy a span { color: var(--orange); }
.carousel-arrow, .gallery-arrow { width: 28px; height: 36px; padding: 0; border: 0; border-radius: 8px; position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; color: #fff; background: rgba(29,29,31,0.38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 25px; line-height: 1; transform: translateY(-50%); opacity: 0; transition: opacity 160ms ease, background 160ms ease; }
.cargo-hero:hover .carousel-arrow, .vehicle-gallery:hover .gallery-arrow, .carousel-arrow:focus-visible, .gallery-arrow:focus-visible { opacity: 1; }
.carousel-arrow.previous, .gallery-arrow.previous { left: 7px; }
.carousel-arrow.next, .gallery-arrow.next { right: 7px; }
.carousel-arrow:active, .gallery-arrow:active { background: rgba(29,29,31,0.62); }
.carousel-dots { padding: 5px 7px; border-radius: 9px; position: absolute; right: 10px; bottom: 9px; z-index: 5; display: flex; gap: 5px; background: rgba(29,29,31,0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.carousel-dots button, .gallery-pagination button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.52); transition: width 180ms ease, background 180ms ease; }
.carousel-dots button.active, .gallery-pagination button.active { width: 16px; border-radius: 4px; background: #fff; }

@media (hover: none) {
  .carousel-arrow, .gallery-arrow { opacity: 0.82; }
}
.load-ruler { height: 28px; padding: 0 12px; position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 4px; color: #fff; background: rgba(7,35,63,0.8); font-family: var(--data-font); font-size: 9px; }
.load-ruler i { width: 12px; height: 1px; background: var(--orange); }
.quick-order-band { margin: 8px 12px 0; padding: 10px; border-left: 3px solid var(--orange); display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; background: #fff; box-shadow: 0 3px 14px rgba(11,47,85,0.06); }
.quick-order-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--blue); font-weight: 800; }
.quick-order-band h2 { font-size: 14px; }
.quick-order-band p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.quick-order-band .btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.mobile-section { padding: 16px 12px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-heading small, .panel-header small, .settings-heading small, .editor-heading small, .order-detail-panel > header small { color: var(--blue); font-family: var(--data-font); font-size: 9px; font-weight: 700; }
.section-heading h2 { margin-top: 2px; font-size: 18px; }
.section-heading > a { color: var(--blue); font-size: 11px; }
.product-scroll { margin: 9px -12px 0; padding: 0 12px 3px; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.product-scroll::-webkit-scrollbar { display: none; }
.product-card { width: 148px; flex: 0 0 148px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff; }
.product-card figure { height: 98px; position: relative; overflow: hidden; background: #e7edf2; }
.product-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.product-card:hover figure img { transform: scale(1.025); }
.product-card figure em { padding: 3px 7px; position: absolute; top: 0; left: 0; color: #fff; background: var(--orange); font-size: 9px; font-style: normal; }
.product-card > div { padding: 8px; }
.product-card strong, .product-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card strong { font-size: 13px; }
.product-card span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.product-card p { margin-top: 7px; color: var(--red); font-family: var(--data-font); font-size: 17px; font-weight: 800; }
.product-card p small { color: var(--muted); font-family: var(--body-font); font-size: 9px; font-weight: 400; }
.scene-grid { margin: 12px 12px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: #fff; }
.scene-grid a { min-width: 0; padding: 10px 8px; border-right: 1px solid var(--line); }
.scene-grid a:last-child { border-right: 0; }
.scene-grid b, .scene-grid span { display: block; }
.scene-grid b { color: var(--navy); font-size: 13px; }
.scene-grid span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.service-row { margin: 8px 12px 12px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; }
.service-row > * { min-width: 0; padding: 9px 6px; border: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; background: transparent; }
.service-row > *:last-child { border-right: 0; }
.service-row i { color: var(--blue); font-size: 18px; font-style: normal; }
.service-row b { margin-top: 5px; font-size: 11px; }
.service-row span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

/* Catalog */
.catalog-search { margin-bottom: 8px; }
.filter-rail { padding: 0 14px 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-rail::-webkit-scrollbar { display: none; }
.filter-rail a { min-height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 16px; display: inline-flex; align-items: center; flex: none; color: var(--text); background: #fff; font-size: 11px; }
.filter-rail a.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.catalog-summary { margin: 6px 12px 0; padding: 12px 14px; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; background: var(--navy); }
.catalog-summary small { color: #9cc6e6; font-size: 9px; }
.catalog-summary h2 { margin-top: 3px; font-size: 20px; }
.catalog-summary > span { color: #d6e8f5; font-family: var(--data-font); font-size: 11px; }
.catalog-list { padding: 0 12px 14px; background: #fff; }
.catalog-item { min-height: 112px; padding: 11px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 94px minmax(0,1fr) 26px; align-items: center; gap: 10px; }
.catalog-item > a:first-child { width: 94px; height: 78px; overflow: hidden; background: var(--steel); }
.catalog-item img { width: 100%; height: 100%; object-fit: cover; }
.catalog-item > div { min-width: 0; }
.catalog-item small { color: var(--blue); font-family: var(--data-font); font-size: 8px; }
.catalog-item h3 { margin-top: 3px; overflow-wrap: anywhere; font-size: 14px; }
.catalog-item p { margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-item strong { margin-top: 7px; display: block; color: var(--red); font-family: var(--data-font); font-size: 17px; }
.catalog-item strong i { color: var(--muted); font-family: var(--body-font); font-size: 9px; font-style: normal; }
.round-action { width: 28px; height: 28px; border: 1px solid #b9cde0; border-radius: 50%; display: grid; place-items: center; color: var(--blue); }
.empty-state { min-height: 180px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); background: #fff; text-align: center; }
.empty-state b { color: var(--ink); }
.empty-state span { margin-top: 7px; font-size: 11px; }

/* Detail and configuration */
.vehicle-showcase { background: #fff; }
.vehicle-gallery { height: 202px; position: relative; overflow: hidden; background: #e8eef2; touch-action: pan-y; }
.detail-gallery-track { height: 100%; display: flex; will-change: transform; }
.vehicle-view { height: 100%; position: relative; flex: 0 0 100%; overflow: hidden; }
.vehicle-view img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vehicle-view.view-front img { width: 128%; height: 128%; transform: translate(-4%, -10%); }
.vehicle-view.view-cargo img { width: 128%; height: 128%; transform: translate(-22%, -7%); }
.vehicle-view > i { position: absolute; inset: 0; background: var(--vehicle-tint); mix-blend-mode: color; opacity: 0.13; pointer-events: none; }
.vehicle-gallery.color-changing .vehicle-view > i { animation: color-preview 280ms ease-out; }
@keyframes color-preview { 0% { opacity: 0; } 55% { opacity: 0.25; } 100% { opacity: 0.13; } }
.gallery-badge, .gallery-color-note { padding: 5px 8px; border-radius: 6px; position: absolute; z-index: 4; color: #fff; background: rgba(29,29,31,0.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 8px; }
.gallery-badge { top: 10px; left: 10px; }
.gallery-color-note { top: 10px; right: 10px; }
.gallery-color-note b { font-weight: 700; }
.gallery-pagination { padding: 5px 8px; border-radius: 10px; position: absolute; right: 10px; bottom: 9px; z-index: 4; display: flex; align-items: center; gap: 7px; color: #fff; background: rgba(29,29,31,0.48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 8px; }
.gallery-pagination > div { display: flex; gap: 4px; }
.vehicle-intro { padding: 12px 14px 11px; }
.product-title-line { display: flex; align-items: center; justify-content: space-between; }
.product-title-line > small { padding: 3px 7px; border-radius: 5px; color: #8a5700; background: #fff4d8; font-size: 9px; font-weight: 700; }
.product-title-line > span { color: #86868b; font-family: var(--data-font); font-size: 8px; }
.vehicle-intro h2 { margin-top: 6px; font-size: 20px; line-height: 1.2; }
.vehicle-intro > p { margin-top: 4px; color: #6e6e73; font-size: 10px; }
.spec-ruler { margin-top: 9px; padding: 8px 0; border: 0; border-radius: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f5f5f7; }
.spec-ruler span { position: relative; min-width: 0; text-align: center; }
.spec-ruler span + span { border-left: 1px solid #dedee3; }
.spec-ruler span::before { display: none; }
.spec-ruler b, .spec-ruler small { display: block; }
.spec-ruler b { font-family: var(--data-font); font-size: 13px; }
.spec-ruler small { margin-top: 2px; color: #86868b; font-size: 7px; }
.guide-price { margin-top: 8px; display: flex; align-items: baseline; gap: 4px; }
.guide-price > span { color: #86868b; font-size: 9px; }
.guide-price strong { color: var(--red); font-family: var(--data-font); font-size: 23px; }
.guide-price small { color: var(--muted); font-size: 9px; }
.detail-commerce-panel { margin-top: 8px; background: #fff; }
.config-brief, .delivery-brief { width: 100%; min-height: 64px; padding: 10px 14px; border: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 8px; background: #fff; text-align: left; }
.config-brief { border-bottom: 1px solid #ececf0; }
.config-brief > span, .delivery-brief > span { align-self: start; padding-top: 1px; color: #1d1d1f; font-size: 10px; font-weight: 700; }
.config-brief > div, .delivery-brief > div { min-width: 0; }
.config-brief b, .delivery-brief b { display: block; overflow: hidden; color: #1d1d1f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.config-brief small, .delivery-brief small { margin-top: 4px; display: block; overflow: hidden; color: #86868b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.config-brief em, .delivery-brief em { color: #86868b; font-size: 14px; font-style: normal; white-space: nowrap; }
.detail-fit { margin-top: 8px; padding: 11px 14px; background: #fff; }
.detail-fit > header { display: flex; align-items: center; justify-content: space-between; }
.detail-fit h3 { font-size: 12px; }
.detail-fit header small { color: #86868b; font-size: 8px; }
.detail-fit > div { margin-top: 8px; display: flex; gap: 6px; }
.detail-fit > div span { min-height: 26px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; color: #3a3a3c; background: #f2f2f7; font-size: 9px; }
.detail-assurance { min-height: 55px; margin-top: 1px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.detail-assurance span { border-right: 1px solid #eeeeF2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.detail-assurance span:last-child { border-right: 0; }
.detail-assurance b { color: #1d1d1f; font-size: 9px; }
.detail-assurance small { margin-top: 3px; color: #86868b; font-size: 7px; }
body[data-view="detail"] .mobile-content { padding-bottom: 136px; }
.detail-actions { width: min(100%, 430px); min-height: 64px; padding: 8px 12px; position: fixed; bottom: 58px; left: 50%; z-index: 35; display: grid; grid-template-columns: 38px 38px minmax(0,1fr) minmax(0,1fr); gap: 7px; transform: translateX(-50%); background: rgba(249,249,251,0.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 -1px 0 rgba(0,0,0,0.08); }
.detail-actions .direct-order { min-height: 46px; font-size: 12px; }
.detail-actions .btn { min-width: 0; min-height: 46px; padding: 0 8px; font-size: 11px; }
.icon-action { padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6e6e73; background: transparent; font-size: 8px; }
.icon-action i { font-size: 18px; font-style: normal; }
.icon-action.active { color: var(--orange); }

.sheet-open { overflow: hidden; }
.sku-sheet-layer { width: min(100%, 430px); position: fixed; inset: 0 auto 0 50%; z-index: 120; transform: translateX(-50%); }
.sku-sheet-scrim { width: 100%; height: 100%; padding: 0; border: 0; position: absolute; inset: 0; background: rgba(0,0,0,0.34); opacity: 0; transition: opacity 260ms ease; }
.sku-sheet { height: min(82vh, 700px); border-radius: 16px 16px 0 0; position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-rows: 22px auto minmax(0,1fr) auto; overflow: hidden; background: rgba(252,252,253,0.96); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 -14px 44px rgba(0,0,0,0.18); transform: translateY(102%); transition: transform 300ms cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.sku-sheet-layer.open .sku-sheet { transform: translateY(0); }
.sku-sheet-layer.open .sku-sheet-scrim { opacity: 1; }
.sku-sheet-layer.dragging .sku-sheet, .sku-sheet-layer.dragging .sku-sheet-scrim { transition: none; }
.sku-sheet-handle { display: grid; place-items: center; touch-action: none; cursor: grab; }
.sku-sheet-handle:active { cursor: grabbing; }
.sku-sheet-handle i { width: 38px; height: 5px; border-radius: 3px; background: #c7c7cc; }
.sku-sheet-product { min-height: 74px; padding: 5px 14px 10px; display: grid; grid-template-columns: 72px minmax(0,1fr) 30px; align-items: center; gap: 10px; }
.sku-sheet-product img { width: 72px; height: 62px; border-radius: 7px; object-fit: cover; background: #f2f2f7; }
.sku-sheet-product > div { min-width: 0; }
.sku-sheet-product small { color: #86868b; font-family: var(--data-font); font-size: 8px; }
.sku-sheet-product h2 { margin-top: 2px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sku-sheet-product strong { margin-top: 4px; display: block; color: var(--red); font-family: var(--data-font); font-size: 18px; }
.sku-sheet-product > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; align-self: start; display: grid; place-items: center; color: #6e6e73; background: #ededf0; font-size: 18px; }
.sku-sheet-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.configuration-panel { padding: 3px 14px 8px; background: transparent; }
.configuration-panel > .section-heading { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: rgba(252,252,253,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.option-group { padding: 9px 0; border-bottom: 1px solid #e5e5ea; }
.option-group > header { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; }
.option-group > header h3 { font-size: 12px; }
.option-group > header > small { color: #86868b; font-size: 8px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.config-option { min-width: 0; min-height: 44px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #f0f0f3; text-align: left; }
.config-option b { max-width: 100%; overflow-wrap: anywhere; font-size: 10px; }
.config-option span { margin-top: 2px; color: #86868b; font-size: 8px; }
.config-option em { position: absolute; top: 5px; right: 6px; color: var(--red); font-family: var(--data-font); font-size: 7px; font-style: normal; }
.config-option.selected { border-color: #0071e3; color: #0066cc; background: #edf5ff; }
.config-option.selected::after { content: "✓"; width: 16px; height: 16px; border-radius: 6px 0 6px 0; position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; color: #fff; background: #0071e3; font-size: 9px; }
.color-swatch { width: 17px; height: 17px; margin-bottom: 3px; border: 1px solid rgba(0,0,0,0.08); border-radius: 50%; background: var(--swatch); }
.sku-sheet-footer { min-height: 72px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,0.08); display: grid; grid-template-columns: 108px minmax(0,1fr) 104px; align-items: center; gap: 8px; background: rgba(250,250,252,0.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.quantity-control { display: grid; grid-template-columns: 32px repeat(3, 26px); align-items: center; }
.quantity-control > span { margin: 0; font-size: 9px; font-weight: 700; }
.quantity-control button, .quantity-control b { height: 28px; border: 1px solid #d2d2d7; display: grid; place-items: center; background: #fff; font-size: 10px; }
.quantity-control b { border-left: 0; border-right: 0; font-family: var(--data-font); }
.total-block { min-width: 0; }
.total-block > span { display: block; color: #86868b; font-size: 8px; }
.total-block strong { margin-top: 1px; display: block; color: var(--red); font-family: var(--data-font); font-size: 18px; }
.sku-sheet-footer > .btn { min-height: 44px; padding: 0 10px; font-size: 11px; }

/* Checkout and mobile orders */
.checkout-notice { margin: 10px 12px; padding: 10px; border: 1px solid #efd29c; display: flex; gap: 9px; color: #744700; background: var(--orange-soft); }
.checkout-notice > i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: #fff; background: var(--orange); font-size: 10px; font-style: normal; font-weight: 700; }
.checkout-notice b, .checkout-notice span { display: block; }
.checkout-notice b { font-size: 12px; }
.checkout-notice span { margin-top: 4px; font-size: 9px; line-height: 1.5; }
.checkout-form { padding: 0 12px 16px; }
.form-section { margin-bottom: 8px; padding: 12px; background: #fff; }
.form-section > header { margin-bottom: 15px; display: flex; align-items: center; gap: 9px; }
.form-section > header small { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--navy); font-family: var(--data-font); font-size: 9px; }
.form-section > header h2 { font-size: 15px; }
.checkout-form label + label { margin-top: 10px; }
.checkout-form textarea { resize: vertical; }
.checkout-product { min-width: 0; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 9px; align-items: start; }
.checkout-product img { width: 72px; height: 58px; object-fit: cover; background: var(--steel); }
.checkout-product > div { min-width: 0; }
.checkout-product h3 { overflow-wrap: anywhere; font-size: 12px; }
.checkout-product p { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.checkout-product span { margin-top: 5px; display: block; color: var(--blue); font-size: 9px; }
.checkout-product > strong { color: var(--red); font-family: var(--data-font); font-size: 14px; white-space: nowrap; }
.checkout-product-list { display: grid; gap: 10px; }
.checkout-product-list .checkout-product + .checkout-product { padding-top: 10px; border-top: 1px solid var(--steel); }
.validation-message { margin-bottom: 10px; padding: 10px 12px; border-left: 3px solid var(--red); color: var(--red); background: #fff0ee; font-size: 11px; }
.checkout-total { margin-bottom: 8px; padding: 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.checkout-total > span { font-size: 12px; font-weight: 700; }
.checkout-total small { margin-top: 3px; display: block; color: var(--muted); font-size: 8px; font-weight: 400; }
.checkout-total strong { color: var(--red); font-family: var(--data-font); font-size: 23px; }
.submit-order { min-height: 50px; }
.success-result { padding: 52px 22px 34px; color: #fff; background: var(--navy); text-align: center; }
.success-mark { width: 58px; height: 58px; margin: 0 auto 18px; border: 2px solid #fff; display: grid; place-items: center; color: var(--navy); background: #fff; font-size: 27px; }
.success-result small { color: #9cc7e7; font-family: var(--data-font); font-size: 10px; }
.success-result h2 { margin-top: 7px; font-size: 24px; }
.success-result p { margin-top: 10px; color: #d7e6f2; font-size: 11px; }
.success-result p b { color: #fff; font-family: var(--data-font); }
.offline-steps { margin: 14px; padding: 18px; background: #fff; }
.offline-steps > header { padding-bottom: 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.offline-steps h3 { font-size: 15px; }
.offline-steps header span { color: var(--blue); font-size: 9px; }
.offline-steps ol { margin: 0; padding: 8px 0 0; list-style: none; }
.offline-steps li { min-height: 66px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; position: relative; }
.offline-steps li:not(:last-child)::after { content: ""; width: 1px; position: absolute; top: 28px; bottom: 0; left: 14px; background: var(--line); }
.offline-steps li > i { width: 28px; height: 28px; z-index: 1; display: grid; place-items: center; color: #fff; background: #9aabb9; font-family: var(--data-font); font-size: 10px; font-style: normal; }
.offline-steps li.active > i { background: var(--orange); }
.offline-steps li b, .offline-steps li span { display: block; }
.offline-steps li b { font-size: 12px; }
.offline-steps li span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.result-actions { margin: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-chip-row { padding: 12px 14px; display: flex; gap: 7px; overflow-x: auto; background: #fff; scrollbar-width: none; }
.order-chip-row button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; flex: none; color: var(--text); background: #fff; font-size: 10px; }
.order-chip-row button.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.mobile-order-list { padding: 8px 12px 14px; }
.mobile-order-card { margin-bottom: 8px; background: #fff; }
.mobile-order-card > header, .mobile-order-card > footer { min-height: 36px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; }
.mobile-order-card > header { border-bottom: 1px solid var(--steel); }
.mobile-order-card > header > span { color: var(--muted); font-family: var(--data-font); font-size: 10px; }
.mobile-order-card > a { padding: 9px 10px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 9px; }
.mobile-order-card img { width: 72px; height: 58px; object-fit: cover; }
.mobile-order-card h3 { font-size: 12px; }
.mobile-order-card p { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.mobile-order-card a span { margin-top: 4px; display: block; color: var(--blue); font-size: 9px; }
.mobile-order-card a > strong { color: var(--red); font-family: var(--data-font); font-size: 14px; }
.mobile-order-card > footer { border-top: 1px solid var(--steel); color: var(--muted); font-size: 9px; }
.mobile-order-card > footer a { color: var(--blue); font-weight: 700; }
.order-state-hero { padding: 26px 18px; color: #fff; background: var(--navy); }
.order-state-hero h2 { margin-top: 11px; font-size: 21px; }
.order-state-hero p { margin-top: 6px; color: #c9dce9; font-size: 10px; }
.order-state-hero > small { margin-top: 16px; display: block; color: #8fb9d8; font-family: var(--data-font); }
.order-timeline { padding: 18px 10px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); background: #fff; }
.order-timeline > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #9aabba; font-size: 8px; text-align: center; }
.order-timeline > div:not(:last-child)::after { content: ""; height: 1px; position: absolute; top: 11px; left: calc(50% + 11px); right: calc(-50% + 11px); background: var(--line); }
.order-timeline i { width: 22px; height: 22px; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #9aabba; font-family: var(--data-font); font-size: 8px; font-style: normal; }
.order-timeline .active { color: var(--blue); font-weight: 700; }
.order-timeline .active i { background: var(--blue); }
.detail-section { margin-top: 10px; padding: 16px 14px; background: #fff; }
.detail-section > header { margin-bottom: 13px; display: flex; justify-content: space-between; }
.detail-section > header h3 { font-size: 14px; }
.detail-section > header span { color: var(--blue); font-size: 10px; }
.info-list, .money-list { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 10px; font-size: 10px; line-height: 1.5; }
.info-list dt, .money-list dt { color: var(--muted); }
.info-list dd, .money-list dd { min-width: 0; overflow-wrap: anywhere; }
.money-list dd strong { color: var(--red); }
.order-detail-actions { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; background: #fff; }

/* Cart and personal center */
body[data-view="cart"] .mobile-content { padding-bottom: 142px; }
.cart-toolbar { min-height: 42px; padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #fff; font-size: 11px; }
.cart-toolbar .check, .cart-settlement .check { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 11px; }
.cart-toolbar input, .cart-settlement input, .cart-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.cart-toolbar > span { color: var(--muted); }
.cart-list { padding: 8px 12px 0; }
.cart-item { margin-bottom: 8px; padding: 10px; display: grid; grid-template-columns: 20px 80px minmax(0,1fr); gap: 9px; align-items: center; background: #fff; }
.cart-check { align-self: stretch; display: grid; place-items: center; }
.cart-image img { width: 80px; height: 72px; object-fit: cover; background: var(--steel); }
.cart-item-body { min-width: 0; }
.cart-item-body h3 { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-body p { margin-top: 4px; display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cart-item-body > strong { margin-top: 6px; display: block; color: var(--red); font-family: var(--data-font); font-size: 15px; }
.cart-item-controls { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; }
.mini-stepper { display: grid; grid-template-columns: repeat(3, 28px); }
.mini-stepper > * { height: 27px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; font-size: 11px; }
.mini-stepper b { border-right: 0; border-left: 0; font-family: var(--data-font); }
.delete-icon { width: 28px; height: 28px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 21px; }
.cart-empty .btn, .empty-state .btn { margin-top: 16px; }
.cart-benefits { margin: 8px 12px 0; padding: 10px 8px; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--muted); background: #fff; font-size: 8px; text-align: center; }
.cart-recommend { padding-top: 13px; }
.cart-settlement { width: min(100%, 430px); min-height: 64px; padding: 8px 10px; border-top: 1px solid var(--line); position: fixed; bottom: 58px; left: 50%; z-index: 36; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; transform: translateX(-50%); background: rgba(255,255,255,0.98); box-shadow: 0 -5px 16px rgba(11,47,85,0.08); }
.cart-settlement > div { min-width: 0; text-align: right; }
.cart-settlement > div span { color: var(--muted); font-size: 9px; }
.cart-settlement > div strong { margin-left: 3px; color: var(--red); font-family: var(--data-font); font-size: 17px; }
.cart-settlement > div small { display: block; color: var(--muted); font-size: 7px; }
.cart-settlement .btn { min-height: 42px; padding: 0 13px; font-size: 11px; }
.cart-settlement .btn b { font-family: var(--data-font); }

.profile-hero { min-height: 142px; padding: 22px 14px 28px; position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; color: #fff; background: var(--navy); }
.profile-avatar { width: 54px; height: 54px; border: 2px solid rgba(255,255,255,0.7); display: grid; place-items: center; color: var(--navy); background: #fff; font-size: 22px; font-weight: 800; }
.profile-hero > div { min-width: 0; }
.profile-hero small { color: #9fc8e6; font-size: 9px; }
.profile-hero h2 { margin-top: 3px; font-size: 19px; }
.profile-hero p { margin-top: 4px; overflow: hidden; color: #d9e8f3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero span { margin-top: 5px; display: block; color: #a8c6dc; font-family: var(--data-font); font-size: 10px; }
.profile-edit-link { color: #dcecf7; font-size: 9px; white-space: nowrap; }
.profile-stats { margin: -18px 12px 8px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; box-shadow: var(--shadow); }
.profile-stats a { min-height: 66px; border-right: 1px solid var(--steel); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.profile-stats a:last-child { border-right: 0; }
.profile-stats b { color: var(--navy); font-family: var(--data-font); font-size: 20px; }
.profile-stats span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profile-panel { margin: 8px 12px; background: #fff; }
.profile-panel > header { min-height: 42px; padding: 8px 11px; border-bottom: 1px solid var(--steel); display: flex; align-items: center; justify-content: space-between; }
.profile-panel > header h3 { font-size: 13px; }
.profile-panel > header a { color: var(--muted); font-size: 9px; }
.order-overview > div { display: grid; grid-template-columns: repeat(4, 1fr); }
.order-overview > div a { min-height: 70px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.order-overview i { color: var(--blue); font-size: 21px; font-style: normal; }
.order-overview span { font-size: 9px; }
.order-overview em { width: 16px; height: 16px; position: absolute; top: 7px; right: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--red); font-size: 8px; font-style: normal; }
.profile-menu > a, .profile-menu > button { width: 100%; min-height: 58px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--steel); display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; background: #fff; text-align: left; }
.profile-menu > :last-child { border-bottom: 0; }
.profile-menu > * > i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); font-style: normal; }
.profile-menu div { min-width: 0; }
.profile-menu b, .profile-menu span { display: block; }
.profile-menu b { font-size: 11px; }
.profile-menu span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu em { color: #9baab8; font-size: 18px; font-style: normal; }
.profile-logout { margin: 10px 12px 14px; min-height: 42px; display: grid; place-items: center; color: var(--red); background: #fff; font-size: 11px; }
.profile-form { padding: 10px 12px 18px; }
.profile-form > section { margin-bottom: 8px; padding: 13px 12px; background: #fff; }
.profile-form header { margin-bottom: 13px; }
.profile-form header small { color: var(--blue); font-family: var(--data-font); font-size: 8px; }
.profile-form header h2 { margin-top: 2px; font-size: 14px; }
.profile-form label { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 10px; font-weight: 700; }
.profile-form input, .profile-form textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 12px; }
.profile-form textarea { resize: vertical; }
.history-heading { min-height: 62px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.history-heading small { color: var(--blue); font-family: var(--data-font); font-size: 8px; }
.history-heading h2 { margin-top: 2px; font-size: 15px; }
.history-heading button { padding: 5px 9px; border: 1px solid var(--line); color: var(--muted); background: #fff; font-size: 9px; }
.personal-list { padding: 8px 12px; }
.personal-list article { margin-bottom: 8px; position: relative; background: #fff; }
.personal-list article > a { padding: 9px 38px 9px 9px; display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; }
.personal-list img { width: 84px; height: 72px; object-fit: cover; background: var(--steel); }
.personal-list article > a > div { min-width: 0; }
.personal-list small { color: var(--blue); font-size: 8px; }
.personal-list h3 { margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-list p { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.personal-list strong { margin-top: 7px; display: block; color: var(--red); font-family: var(--data-font); font-size: 14px; }
.personal-list strong i { color: var(--muted); font-family: var(--body-font); font-size: 8px; font-style: normal; }
.personal-list article > button { width: 34px; height: 100%; padding: 0; border: 0; position: absolute; top: 0; right: 0; color: var(--orange); background: transparent; font-size: 18px; }
.history-list article > button { color: var(--muted); font-size: 20px; }

/* Admin shell */
.admin-shell { min-width: 0; min-height: 100vh; display: grid; grid-template-columns: 210px minmax(0,1fr); color: var(--ink); background: var(--canvas); transition: grid-template-columns 180ms ease; }
.admin-sidebar { min-height: 100vh; position: relative; align-self: stretch; color: #fff; background: var(--navy); overflow: hidden; }
.admin-brand { height: 56px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 9px; }
.admin-brand > i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--navy); background: #fff; font-family: var(--data-font); font-style: normal; font-weight: 800; }
.admin-brand > span { overflow: hidden; font-size: 17px; font-weight: 800; white-space: nowrap; }
.admin-brand strong { margin-top: 2px; display: block; color: #9fc1dc; font-size: 9px; font-weight: 500; }
.sidebar-context { margin: 12px 12px 6px; padding: 8px 9px; border-left: 3px solid var(--orange); background: rgba(255,255,255,0.07); }
.sidebar-context small, .sidebar-context b { display: block; white-space: nowrap; }
.sidebar-context small { color: #8eb4d1; font-size: 9px; }
.sidebar-context b { margin-top: 4px; font-size: 11px; }
.admin-sidebar nav { padding: 8px; }
.admin-sidebar nav a { height: 43px; padding: 0 11px; margin-bottom: 2px; border-radius: 4px; display: grid; grid-template-columns: 26px minmax(0,1fr) 12px; align-items: center; gap: 7px; color: #d7e5ef; }
.admin-sidebar nav a > i { font-size: 18px; font-style: normal; }
.admin-sidebar nav a span { overflow: hidden; font-size: 12px; white-space: nowrap; }
.admin-sidebar nav a > b { color: #7499b7; }
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.07); }
.admin-sidebar nav a.active { color: #fff; background: var(--blue); }
.admin-sidebar nav a.active::before { content: ""; width: 3px; position: absolute; left: 0; top: 8px; bottom: 8px; background: var(--orange); }
.admin-sidebar nav a { position: relative; }
.admin-sidebar > footer { height: 58px; padding: 0 12px 0 18px; position: absolute; right: 0; bottom: 0; left: 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: minmax(0,1fr) auto 34px; align-items: center; gap: 8px; }
.admin-sidebar > footer > span { color: #86a9c4; font-size: 9px; }
.admin-sidebar > footer > b { display: flex; align-items: center; gap: 5px; font-size: 9px; white-space: nowrap; }
.admin-sidebar > footer > b i { width: 7px; height: 7px; border-radius: 50%; background: #37c47a; }
.admin-sidebar > footer .icon-btn { color: #fff; }
.admin-main { min-width: 0; min-height: 100vh; }
.admin-topbar { height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #fff; }
.admin-search { width: 360px; height: 38px; padding: 0 10px; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: #f8fafb; }
.admin-search > i { color: var(--blue); font-size: 19px; font-style: normal; }
.admin-search input { min-width: 0; flex: 1; border: 0; background: transparent; }
.admin-search input:focus { box-shadow: none; }
.admin-search kbd { padding: 2px 5px; border: 1px solid var(--line); color: var(--muted); background: #fff; font-size: 10px; }
.top-actions { display: flex; align-items: center; gap: 13px; }
.top-actions > span { width: 1px; height: 28px; background: var(--line); }
.top-actions .icon-btn { position: relative; }
.top-actions .icon-btn em { width: 16px; height: 16px; position: absolute; top: 0; right: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 8px; font-style: normal; }
.admin-user { display: flex; align-items: center; gap: 9px; }
.admin-user > b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); }
.admin-user strong, .admin-user small { display: block; }
.admin-user strong { font-size: 12px; }
.admin-user small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.admin-user > i { color: var(--muted); font-style: normal; }
.page-header { min-height: 68px; padding: 12px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; }
.page-header > div:first-child { min-width: 0; }
.page-header small { color: var(--blue); font-family: var(--data-font); font-size: 9px; font-weight: 700; }
.page-header h1 { margin-top: 2px; font-size: 22px; }
.page-actions { display: flex; gap: 8px; }
.admin-content { min-width: 0; padding: 12px 14px 20px; }
.admin-footer { padding: 0 18px 20px; color: #91a0ad; font-size: 9px; text-align: center; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: 0 2px 10px rgba(11,47,85,0.03); }
.panel-header { min-height: 52px; padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-header h2 { margin-top: 3px; font-size: 16px; }
.panel-header > a { color: var(--blue); font-size: 11px; }
.table-wrap { width: 100%; overflow-x: auto; }
th { height: 36px; padding: 7px 9px; color: #506377; background: #f4f7f9; font-size: 9px; text-align: left; white-space: nowrap; }
td { height: 49px; padding: 7px 9px; border-bottom: 1px solid var(--steel); color: var(--text); font-size: 9px; vertical-align: middle; }
td b { color: var(--ink); font-weight: 700; }
td small { margin-top: 3px; display: block; color: var(--muted); font-size: 8px; }
tbody tr:hover { background: #f7fbfe; }
tbody tr.selected { background: #eef6fc; }
.table-image { width: 58px; height: 45px; object-fit: cover; background: var(--steel); }
.pagination { min-height: 48px; padding: 8px 13px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--muted); font-size: 9px; }
.pagination > span { margin-right: auto; }
.pagination button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.pagination button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.filter-bar { min-height: 56px; padding: 10px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar.compact { align-items: flex-start; }
.filter-bar select, .filter-bar input { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.search-control { width: 260px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; gap: 7px; background: #fff; }
.search-control i { color: var(--blue); font-size: 17px; font-style: normal; }
.search-control input { min-width: 0; padding: 0; flex: 1; border: 0; }
.search-control input:focus { box-shadow: none; }
.table-tools { min-height: 48px; padding: 8px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-tools > span { font-size: 12px; font-weight: 700; }
.table-tools > div:first-child span, .table-tools > div:first-child small { display: block; }
.table-tools > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 400; }
.table-tools > div { display: flex; gap: 7px; }

/* Dashboard */
.operations-ribbon { min-height: 74px; padding: 11px 16px; border-left: 4px solid var(--orange); display: grid; grid-template-columns: 190px minmax(320px,1fr) auto; align-items: center; gap: 18px; color: #fff; background: var(--navy); }
.operations-ribbon > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 10px; }
.operations-ribbon > div span { font-size: 11px; }
.operations-ribbon > div strong { color: var(--orange); font-family: var(--data-font); font-size: 31px; }
.operations-ribbon > div small { grid-column: 1 / -1; color: #9ab8cf; font-size: 9px; }
.operations-ribbon ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); list-style: none; }
.operations-ribbon li { padding: 0 18px; border-left: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; gap: 9px; }
.operations-ribbon li i { width: 25px; height: 25px; display: grid; place-items: center; color: var(--navy); background: #fff; font-family: var(--data-font); font-size: 10px; font-style: normal; font-weight: 800; }
.operations-ribbon li span { font-size: 10px; white-space: nowrap; }
.operations-ribbon > a { padding: 9px 12px; border: 1px solid rgba(255,255,255,0.4); font-size: 10px; white-space: nowrap; }
.kpi-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.kpi-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.kpi-card header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.kpi-card header i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 800; }
.tone-blue { background: var(--blue); }.tone-green { background: var(--green); }.tone-amber { background: var(--orange); }.tone-navy { background: var(--navy); }
.kpi-card > strong { margin-top: 9px; display: block; overflow-wrap: anywhere; font-family: var(--data-font); font-size: 24px; }
.kpi-card footer { margin-top: 10px; display: flex; gap: 6px; color: var(--muted); font-size: 9px; }
.kpi-card footer b { color: var(--muted); }
.kpi-card footer b.up { color: var(--green); }
.dashboard-grid { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 10px; }
.segmented { padding: 3px; display: flex; background: var(--steel); }
.segmented button { min-height: 28px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font-size: 9px; }
.segmented button.active { color: var(--blue); background: #fff; font-weight: 700; }
.bar-chart { height: 220px; padding: 20px 16px 13px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; gap: 7px; }
.bar-chart > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.bar-chart i { width: 62%; height: var(--bar); min-height: 5px; display: block; background: var(--blue); opacity: .82; }
.bar-chart > div:nth-child(10) i { background: var(--orange); opacity: 1; }
.bar-chart span { color: var(--muted); font-family: var(--data-font); font-size: 8px; }
.status-panel { padding-bottom: 10px; }
.status-panel > div.status-donut { width: 128px; height: 128px; margin: 20px auto 14px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blue) 0 42%, var(--orange) 42% 66%, var(--green) 66% 94%, #b8c6d1 94% 100%); position: relative; }
.status-donut::after { content: ""; width: 82px; height: 82px; position: absolute; border-radius: 50%; background: #fff; }
.status-donut > div { z-index: 1; text-align: center; }
.status-donut strong, .status-donut span { display: block; }
.status-donut strong { font-family: var(--data-font); font-size: 24px; }
.status-donut span { color: var(--muted); font-size: 8px; }
.status-panel ul { margin: 0; padding: 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; list-style: none; color: var(--muted); font-size: 9px; }
.status-panel li { display: flex; align-items: center; gap: 6px; }
.status-panel li b { margin-left: auto; color: var(--text); }
.dot-blue, .dot-amber, .dot-green, .dot-gray { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.dot-blue { background: var(--blue); }.dot-amber { background: var(--orange); }.dot-green { background: var(--green); }.dot-gray { background: #aebcc7; }
.recent-panel { margin-top: 10px; }

/* Dealers and configuration */
.summary-strip { margin-bottom: 9px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: #fff; }
.summary-strip > div { padding: 10px 14px; border-right: 1px solid var(--line); }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip small, .summary-strip b { display: block; }
.summary-strip small { color: var(--muted); font-size: 9px; }
.summary-strip b { margin-top: 5px; font-family: var(--data-font); font-size: 21px; }
.text-amber { color: #af6800 !important; }
.dealer-level { padding: 3px 7px; border: 1px solid var(--line); font-size: 9px; }
.level-核心 { color: #8a5200; background: var(--orange-soft); border-color: #efd4a0; }.level-标准 { color: var(--blue); background: var(--blue-soft); }.level-观察 { color: var(--muted); background: #f3f6f8; }
.model-workspace { display: grid; grid-template-columns: minmax(520px, .95fr) minmax(520px, 1.05fr); gap: 12px; align-items: start; }
.model-list-panel table { min-width: 650px; }
.config-editor { min-width: 0; }
.editor-tabs { height: 47px; padding: 0 11px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
.editor-tabs button { padding: 0 14px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; }
.editor-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.editor-heading { min-height: 56px; padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-heading h2 { margin-top: 3px; font-size: 15px; }
.attribute-list { padding: 0 12px; }
.attribute-row { margin-bottom: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; }
.attribute-row > header { display: flex; justify-content: space-between; gap: 12px; }
.attribute-row h3 { font-size: 11px; }
.attribute-row h3 span { margin-left: 6px; color: var(--green); font-size: 8px; font-weight: 500; }
.attribute-row header small { margin-top: 3px; display: block; color: var(--muted); font-family: var(--data-font); font-size: 8px; }
.attribute-values { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.attribute-values > span, .attribute-values > button { min-height: 26px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; color: var(--text); background: #f9fbfc; font-size: 8px; }
.attribute-values > button { color: var(--blue); background: #fff; }
.small-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch); }
.rule-section { margin-top: 13px; border-top: 1px solid var(--line); }
.rule-section table { min-width: 500px; }

/* Admin orders */
.order-command-bar { margin-bottom: 12px; padding: 20px 24px; border-left: 4px solid var(--orange); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; background: linear-gradient(110deg, #07233f 0%, #0b3d69 68%, #0b5cad 100%); }
.order-command-bar small { color: #9fc9e8; font-size: 10px; }
.order-command-bar h2 { margin-top: 6px; font-size: 22px; letter-spacing: -0.5px; }
.order-command-bar p { margin-top: 7px; color: #d5e7f4; font-size: 11px; }
.order-command-bar p b { color: var(--orange); font-size: 15px; }
.command-metrics { display: flex; gap: 28px; }
.command-metrics span { min-width: 108px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.22); }
.command-metrics b, .command-metrics small { display: block; }
.command-metrics b { font-family: var(--data-font); font-size: 20px; }
.command-metrics small { margin-top: 5px; color: #9fc9e8; font-size: 9px; }
.order-filter-panel { margin-bottom: 12px; }
.filter-caption { padding: 12px 14px 0; display: flex; align-items: baseline; gap: 10px; }
.filter-caption span { font-size: 13px; font-weight: 800; }
.filter-caption small { color: var(--muted); font-size: 10px; }
.filter-grid { padding: 14px; display: grid; grid-template-columns: minmax(150px,1fr) minmax(180px,1.2fr) minmax(130px,.8fr) 150px auto auto; gap: 10px; align-items: end; }
.filter-grid input, .filter-grid select { min-height: 36px; }
.order-workspace { min-width: 0; display: grid; grid-template-columns: minmax(650px,1fr) 340px; gap: 12px; align-items: start; }
.order-list-panel table { min-width: 0; table-layout: fixed; }
.order-list-panel th, .order-list-panel td { padding-right: 5px; padding-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list-panel th:nth-child(1) { width: 34px; }
.order-list-panel th:nth-child(2) { width: 96px; }
.order-list-panel th:nth-child(3) { width: 150px; }
.order-list-panel th:nth-child(4) { width: 106px; }
.order-list-panel th:nth-child(5), .order-list-panel th:nth-child(6), .order-list-panel th:nth-child(7) { width: 72px; }
.order-list-panel th:nth-child(8) { width: 76px; }
.order-list-panel th:nth-child(9) { width: 68px; }
.order-list-panel td b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list-panel .link-btn { margin-right: 0; font-size: 10px; }
.order-link { color: var(--blue); font-family: var(--data-font); }
.order-detail-panel { border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.order-detail-panel > header { min-height: 61px; padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.order-detail-panel > header h2 { margin-top: 3px; font-size: 16px; }
.order-detail-panel > section { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.order-detail-panel h3 { margin-bottom: 11px; font-size: 11px; }
.admin-info { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 7px; font-size: 9px; line-height: 1.45; }
.admin-info dt { color: var(--muted); }
.admin-info dd { min-width: 0; overflow-wrap: anywhere; }
.admin-timeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.admin-timeline > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #9aa9b5; font-size: 7px; text-align: center; }
.admin-timeline > div:not(:last-child)::after { content: ""; height: 1px; position: absolute; top: 9px; left: calc(50% + 9px); right: calc(-50% + 9px); background: var(--line); }
.admin-timeline i { width: 18px; height: 18px; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #9aa9b5; font-family: var(--data-font); font-size: 7px; font-style: normal; }
.admin-timeline .active { color: var(--blue); }
.admin-timeline .active i { background: var(--blue); }
.admin-product { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 9px; }
.admin-product img { width: 70px; height: 57px; object-fit: cover; }
.admin-product > div { min-width: 0; }
.admin-product b, .admin-product span, .admin-product small { display: block; }
.admin-product b { font-size: 9px; }
.admin-product span { margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.admin-product small { margin-top: 3px; color: var(--blue); font-size: 8px; }
.admin-product > strong { grid-column: 1 / -1; color: var(--red); font-family: var(--data-font); font-size: 13px; text-align: right; }
.address-block b, .address-block span { display: block; font-size: 9px; line-height: 1.45; }
.address-block span { margin-top: 5px; color: var(--muted); }
.order-detail-panel textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 4px; resize: vertical; font-size: 9px; }
.order-detail-panel > footer { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 7px; }

/* Analytics */
.report-filter { min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.report-filter > div { padding: 3px; display: flex; background: var(--steel); }
.report-filter > div button { min-height: 29px; padding: 0 12px; border: 0; color: var(--muted); background: transparent; font-size: 9px; }
.report-filter > div button.active { color: var(--blue); background: #fff; font-weight: 700; }
.report-filter label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.report-filter input { height: 34px; padding: 0 8px; border: 1px solid var(--line); }
.analytics-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.7fr); gap: 12px; }
.chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 8px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.line-chart { padding: 15px 18px 12px; }
.line-chart svg { width: 100%; height: 245px; overflow: visible; }
.grid-lines path { fill: none; stroke: #e5ecf1; stroke-width: 1; }
.line-primary, .line-accent { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-primary { stroke: var(--blue); }.line-accent { stroke: var(--orange); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--data-font); font-size: 8px; }
.ranking ol { margin: 0; padding: 6px 14px 12px; list-style: none; }
.ranking li { min-height: 53px; border-bottom: 1px solid var(--steel); display: grid; grid-template-columns: 22px 44px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.ranking li > i { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); background: var(--steel); font-family: var(--data-font); font-size: 8px; font-style: normal; }
.ranking li:first-child > i { color: #fff; background: var(--orange); }
.ranking img { width: 44px; height: 35px; object-fit: cover; }
.ranking b, .ranking span { display: block; }
.ranking b { font-size: 9px; }
.ranking span { margin-top: 3px; color: var(--muted); font-size: 7px; }
.ranking strong { font-family: var(--data-font); font-size: 10px; }
.region-panel { margin-top: 12px; }
.region-bars { padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
.region-bars > div { min-width: 0; }
.region-bars span, .region-bars strong { display: block; font-size: 9px; }
.region-bars i { height: 7px; margin: 8px 0; display: block; background: var(--steel); }
.region-bars i b { width: var(--region); height: 100%; display: block; background: var(--blue); }
.region-bars strong { color: var(--blue); font-family: var(--data-font); }

/* Permissions and settings */
.permission-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 12px; align-items: start; }
.role-panel { overflow: hidden; }
.role-row { width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; background: #fff; text-align: left; }
.role-row:hover, .role-row.active { background: #f3f8fc; }
.role-row.active { border-left: 3px solid var(--blue); }
.role-row div { min-width: 0; }
.role-row b, .role-row span { display: block; }
.role-row b { font-size: 11px; }
.role-row span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.role-row em { color: var(--blue); font-family: var(--data-font); font-size: 9px; font-style: normal; }
.permission-tree { padding: 12px; }
.permission-tree section { margin-bottom: 8px; border: 1px solid var(--line); }
.permission-tree section > header { min-height: 42px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; background: #f6f8fa; }
.permission-tree header label { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.permission-tree header span { color: var(--muted); font-size: 8px; }
.permission-tree section > div { padding: 10px 12px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.permission-tree section > div label { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 9px; }
.account-panel { margin-top: 12px; }
.settings-layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 12px; align-items: start; }
.settings-nav { border: 1px solid var(--line); background: #fff; }
.settings-nav button { width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; color: var(--text); background: #fff; text-align: left; }
.settings-nav button.active { color: var(--blue); background: #eef6fc; font-weight: 700; }
.settings-nav i { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: var(--navy); font-size: 9px; font-style: normal; }
.settings-panel { min-height: 520px; padding: 22px; }
.settings-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.settings-heading h2 { margin-top: 4px; font-size: 18px; }
.settings-heading p { margin-top: 7px; color: var(--muted); font-size: 9px; }
.settings-form { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.settings-form .span-2, .modal-form .span-2 { grid-column: 1 / -1; }
.form-actions { padding-top: 5px; }
.switch-row { min-height: 64px; padding: 11px 2px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; position: relative; }
.switch-row span { min-width: 0; }
.switch-row b, .switch-row small { display: block; }
.switch-row b { font-size: 10px; }
.switch-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.switch-row input { width: 38px; height: 20px; position: absolute; right: 0; opacity: 0; }
.switch-row > i { width: 38px; height: 20px; padding: 2px; border-radius: 10px; display: block; background: #b8c5cf; }
.switch-row > i::after { content: ""; width: 16px; height: 16px; display: block; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
.switch-row input:checked + i { background: var(--blue); }
.switch-row input:checked + i::after { transform: translateX(18px); }
.dictionary-list { margin-top: 15px; }
.dictionary-list > div { min-height: 58px; padding: 10px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.dictionary-list b { font-size: 10px; }
.dictionary-list span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

/* Modal */
.modal-layer { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(7,35,63,0.46); opacity: 0; transition: opacity 160ms ease; }
.modal-layer.visible { opacity: 1; }
.modal { width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 40px); border-radius: 6px; overflow: auto; background: #fff; box-shadow: 0 18px 50px rgba(7,35,63,0.28); transform: translateY(8px); transition: transform 160ms ease; }
.modal-layer.visible .modal { transform: translateY(0); }
.modal > header, .modal > footer { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; }
.modal > header { border-bottom: 1px solid var(--line); justify-content: space-between; }
.modal > header h3 { font-size: 16px; }
.modal-body { padding: 18px 16px; }
.modal > footer { border-top: 1px solid var(--line); justify-content: flex-end; gap: 8px; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sidebar-collapsed { grid-template-columns: 70px minmax(0,1fr); }
.sidebar-collapsed .admin-brand { justify-content: center; padding: 0; }
.sidebar-collapsed .admin-brand > span, .sidebar-collapsed .sidebar-context, .sidebar-collapsed .admin-sidebar nav a span, .sidebar-collapsed .admin-sidebar nav a > b, .sidebar-collapsed .admin-sidebar > footer > span, .sidebar-collapsed .admin-sidebar > footer > b { display: none; }
.sidebar-collapsed .admin-sidebar nav a { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.sidebar-collapsed .admin-sidebar > footer { grid-template-columns: 1fr; padding: 0; justify-items: center; }
.sidebar-collapsed .admin-sidebar > footer .icon-btn { transform: rotate(180deg); }

@media (min-width: 431px) {
  body[data-view="login"], body[data-view="home"], body[data-view="catalog"], body[data-view="detail"], body[data-view="cart"], body[data-view="checkout"], body[data-view="submit-success"], body[data-view="mobile-orders"], body[data-view="mobile-order-detail"], body[data-view="profile"], body[data-view="profile-edit"], body[data-view="favorites"], body[data-view="history"] { background: #dfe6ec; }
}

@media (max-width: 1180px) {
  .admin-shell { grid-template-columns: 190px minmax(0,1fr); }
  .admin-brand > span { font-size: 14px; }
  .model-workspace { grid-template-columns: 1fr; }
  .order-workspace { grid-template-columns: 1fr; }
  .order-detail-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .order-detail-panel > header, .order-detail-panel > footer { grid-column: 1 / -1; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 70px minmax(0,1fr); }
  .admin-brand { justify-content: center; padding: 0; }
  .admin-brand > span, .sidebar-context, .admin-sidebar nav a span, .admin-sidebar nav a > b, .admin-sidebar > footer > span, .admin-sidebar > footer > b { display: none; }
  .admin-sidebar nav a { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .admin-sidebar > footer { grid-template-columns: 1fr; padding: 0; justify-items: center; }
  .admin-search { width: 250px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid, .analytics-grid, .permission-layout, .settings-layout { grid-template-columns: 1fr; }
  .operations-ribbon { grid-template-columns: 1fr auto; }
  .operations-ribbon ol { grid-row: 2; grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .mobile-shell, .login-page { max-width: none; box-shadow: none; }
  .login-visual { height: 290px; }
  .cargo-hero-copy h2 { font-size: 27px; }
  .quick-order-band { grid-template-columns: 40px minmax(0,1fr) auto; }
}

@media (max-width: 360px) {
  .cargo-hero-copy { width: 73%; }
  .quick-order-band .btn { padding: 0 8px; }
  .configuration-summary { grid-template-columns: 1fr; }
  .detail-actions { grid-template-columns: 34px 34px minmax(0,1fr) minmax(0,1fr); gap: 5px; }
  .detail-actions .btn { padding: 0 5px; font-size: 10px; }
  .cart-settlement { gap: 6px; }
  .cart-settlement .btn { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-header, .mobile-nav, .detail-actions, .sku-sheet, .sku-sheet-footer { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 2026 visual refresh */
:root{--apple-bg:#f5f5f7;--apple-blue:#0071e3;--admin-bg:#f7f8fa;--admin-line:#e6e8eb}
body{background:var(--apple-bg);color:#1d1d1f}
.mobile-shell,.login-page{max-width:480px;background:var(--apple-bg);box-shadow:0 0 50px rgba(0,0,0,.08)}
.mobile-header{height:64px;padding:8px 18px;background:rgba(255,255,255,.72);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.mobile-title h1{font-size:18px;letter-spacing:-.35px}.mobile-title p{color:#86868b}
.mini-program-menu{height:34px;border:0;background:rgba(118,118,128,.12)}
.dealer-strip{margin:0 14px;min-height:58px;padding:12px 15px;border-radius:18px;background:#1d1d1f;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.dealer-strip small{color:#a1a1a6}.dealer-strip b{font-size:13px}
.mobile-search{height:46px;margin:14px;padding-left:15px;border:0;border-radius:15px;background:rgba(118,118,128,.12)}
.mobile-search button{height:38px;border-radius:12px;background:var(--apple-blue)}
.cargo-hero{height:260px;margin:0 14px;border-radius:24px;box-shadow:0 18px 38px rgba(0,0,0,.14)}
.cargo-hero-copy{width:72%;padding:24px 0 0 22px;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.08));clip-path:none}
.cargo-hero-copy h2{width:220px;margin-top:10px;font-size:29px;letter-spacing:-1px}.cargo-hero-copy p{width:210px;font-size:11px}
.quick-order-band{margin:14px;padding:14px;border:0;border-radius:18px;box-shadow:0 9px 26px rgba(0,0,0,.07)}
.quick-order-mark{width:42px;height:42px;border-radius:13px;background:var(--apple-blue)}.quick-order-band h2{font-size:15px}.quick-order-band .btn{min-height:38px;border-radius:12px;background:var(--apple-blue)}
.mobile-section{padding:22px 14px 0}.section-heading h2{font-size:21px;letter-spacing:-.6px}.section-heading small{color:#86868b;font-family:var(--body-font)}.section-heading>a{color:var(--apple-blue)}
.product-scroll{margin:13px -14px 0;padding:0 14px 6px;gap:12px}.product-card{width:176px;flex-basis:176px;border:0;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:transform 180ms ease,box-shadow 180ms ease}.product-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(0,0,0,.11)}.product-card figure{height:126px}.product-card figure em{top:10px;left:10px;border-radius:8px;background:rgba(0,0,0,.62)}.product-card>div{padding:13px}.product-card strong{font-size:14px}.product-card span{color:#86868b;font-size:10px}.product-card p{font-size:19px}
.scene-grid{margin:18px 14px 0;border:0;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05)}.scene-grid a{padding:16px 12px;background:rgba(255,255,255,.78)}.scene-grid b{font-size:14px}.scene-grid span{color:#86868b}
.service-row{margin:12px 14px 16px;border:0;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05)}.service-row>*{padding:14px 6px;background:rgba(255,255,255,.78)}
.mobile-nav{height:72px;background:rgba(255,255,255,.8);box-shadow:0 -1px 0 rgba(0,0,0,.07)}.mobile-nav a{color:#8e8e93;transition:color 160ms ease,transform 160ms ease}.mobile-nav a.active{color:var(--apple-blue)}.mobile-nav a:active{transform:scale(.92)}.mobile-nav a.active::before{background:var(--apple-blue)}
.detail-gallery{height:310px}.detail-summary{padding:18px 16px 20px;background:rgba(255,255,255,.82)}.detail-summary h1{font-size:28px;letter-spacing:-.9px}.detail-summary .price{font-size:27px}
.detail-commerce-panel,.detail-fit,.detail-section{margin-top:12px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.88);box-shadow:0 7px 22px rgba(0,0,0,.045)}.detail-fit{padding:16px}.detail-fit>div span{min-height:32px;border-radius:10px;background:rgba(118,118,128,.12)}.detail-actions{min-height:76px;bottom:72px;padding:10px 14px;background:rgba(255,255,255,.82)}.detail-actions .btn{min-height:52px;border-radius:15px}.detail-actions .direct-order{background:var(--apple-blue)}
.admin-shell{grid-template-columns:236px minmax(0,1fr);background:var(--admin-bg);color:#17202a}.admin-sidebar{background:#202124}.admin-brand{height:72px;padding:0 20px;border-bottom-color:rgba(255,255,255,.09)}.admin-brand>i{border-radius:10px}.sidebar-context{margin:18px 16px 10px;padding:12px;border:0;border-radius:12px;background:rgba(255,255,255,.08)}.admin-sidebar nav{padding:10px}.admin-sidebar nav a{height:44px;margin-bottom:4px;border-radius:11px;color:#aeb1b7}.admin-sidebar nav a.active{background:#34363b;color:#fff}.admin-sidebar nav a.active::before{width:3px;top:11px;bottom:11px;border-radius:3px;background:#0a84ff}
.admin-topbar{height:72px;padding:0 28px;background:rgba(255,255,255,.78)}.admin-search{width:420px;height:40px;border:0;border-radius:12px;background:rgba(118,118,128,.1)}.admin-user> b{border-radius:12px;background:#0a84ff}.page-header{min-height:96px;padding:22px 30px;border-bottom:0;background:transparent}.page-header small{color:#8a9099;font-family:var(--body-font)}.page-header h1{font-size:28px;letter-spacing:-.7px}.admin-content{padding:0 30px 26px}.panel,.summary-strip,.report-filter{border:0;border-radius:16px;box-shadow:0 7px 24px rgba(20,30,40,.045)}.panel-header{min-height:64px;padding:14px 18px}.panel-header h2{font-size:17px}.operations-ribbon,.order-command-bar{border:0;border-radius:20px;background:#202124;box-shadow:0 14px 30px rgba(0,0,0,.12)}.kpi-card{border:0;border-radius:16px;box-shadow:0 7px 24px rgba(20,30,40,.045)}.kpi-card header i{border-radius:10px}.bar-chart{height:250px}.bar-chart i{border-radius:7px 7px 2px 2px}.filter-grid input,.filter-grid select,.search-control{border:0;border-radius:10px;background:#f1f2f4}.btn{min-height:40px;border-radius:10px;transition:transform 160ms ease,box-shadow 160ms ease}.btn:hover{box-shadow:0 7px 16px rgba(0,113,227,.16)}.btn-primary{background:#0a84ff;border-color:#0a84ff}.table-tools{min-height:64px;padding:12px 18px}.th{background:#f7f8fa}th{height:42px;background:#f7f8fa;color:#69717c;font-size:10px}td{height:58px;font-size:10px}.tbody tr{transition:background 140ms ease}.order-detail-panel{border:0;border-radius:16px;box-shadow:0 7px 24px rgba(20,30,40,.045)}
@media(max-width:760px){.admin-shell{display:block}.admin-sidebar{display:none}.admin-topbar{height:60px;padding:0 14px}.admin-search{width:100%}.top-actions{display:none}.page-header{min-height:76px;padding:16px 14px}.page-header h1{font-size:24px}.admin-content{padding:0 14px 20px}.order-command-bar{display:block;padding:18px}.command-metrics{margin-top:18px;gap:18px}.order-workspace{grid-template-columns:1fr}}

/* Unified Quiet Industrial system */
:root{--paper:#f3f1ed;--surface:#fffdfa;--surface-2:#ebe7e0;--charcoal:#242321;--brown:#9a5d35;--brown-dark:#744329;--brown-soft:#f3e7dc;--action:#7b4b2d;--text-size:14px;--meta-size:12px;--label-size:11px}
body{font-size:var(--text-size);background:var(--paper);color:var(--charcoal)}
body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;font-size:var(--text-size)}
button,input,select,textarea{line-height:1.4}.muted,.section-heading small,.panel-header small,.page-header small,.settings-heading small,.editor-heading small{font-size:var(--meta-size)}
.btn{min-height:40px;padding:0 16px;border-radius:12px;font-size:13px}.btn-primary{background:var(--action);border-color:var(--action)}.btn-primary:hover{background:var(--brown-dark)}.btn-secondary{color:var(--action);border-color:#d8c8bb;background:var(--surface)}
.status{font-size:var(--label-size);border-radius:999px;padding:3px 9px}.link-btn,.text-btn{font-size:var(--label-size);color:var(--action)}
/* mobile */
.mobile-shell,.login-page{background:var(--paper)}.mobile-header{background:rgba(255,253,250,.82)}.mobile-title h1{font-size:18px}.mobile-title p{font-size:var(--label-size)}
.dealer-strip{background:var(--charcoal)}.dealer-strip small{font-size:var(--label-size);color:#c5b9ae}.dealer-strip b{font-size:var(--text-size)}.dealer-strip>span{font-size:var(--label-size);border-color:#7e6d60}
.mobile-search{background:rgba(255,255,255,.72);border:1px solid #ded6cc}.mobile-search input{font-size:var(--text-size)}.mobile-search button{background:var(--action);font-size:13px}
.cargo-hero{box-shadow:0 16px 34px rgba(71,48,32,.15)}.cargo-hero-copy{background:linear-gradient(90deg,rgba(37,29,23,.78),rgba(37,29,23,.08))}.cargo-hero-copy small{font-size:var(--label-size);color:#ead4c2}.cargo-hero-copy h2{font-size:29px}.cargo-hero-copy p{font-size:var(--meta-size)}.cargo-hero-copy a{font-size:13px}.cargo-hero-copy a span{color:#e3a06f}
.quick-order-band{background:var(--surface)}.quick-order-band h2{font-size:var(--text-size)}.quick-order-band p{font-size:var(--meta-size)}.quick-order-band .btn{font-size:13px;background:var(--action)}
.mobile-section{padding-top:24px}.section-heading h2{font-size:21px}.section-heading small{font-size:var(--meta-size)}.section-heading>a{font-size:var(--meta-size);color:var(--action)}
.product-card{background:var(--surface);box-shadow:0 8px 22px rgba(71,48,32,.08)}.product-card strong{font-size:var(--text-size)}.product-card span{font-size:var(--meta-size);color:#81766d}.product-card p{font-size:19px}.product-card p small{font-size:var(--label-size)}
.scene-grid,.service-row{box-shadow:0 8px 22px rgba(71,48,32,.06)}.scene-grid a,.service-row>*{background:var(--surface)}.scene-grid b{font-size:var(--text-size)}.scene-grid span,.service-row span{font-size:var(--meta-size);color:#81766d}.service-row b{font-size:var(--text-size)}
.mobile-nav{background:rgba(255,253,250,.88)}.mobile-nav a{font-size:var(--label-size)}.mobile-nav a.active{color:var(--action)}.mobile-nav a.active::before{background:var(--action)}
/* detail */
.detail-summary h1{font-size:28px}.detail-summary .price{font-size:27px;color:var(--brown-dark)}.detail-fit h3,.detail-section>header h3{font-size:var(--text-size)}.detail-fit header small,.detail-section>header span{font-size:var(--meta-size)}.detail-fit>div span{font-size:var(--label-size);color:var(--action)}.detail-assurance b{font-size:var(--label-size)}.detail-assurance small{font-size:var(--label-size)}.detail-actions .btn{font-size:13px}.detail-actions .direct-order{background:var(--action)}
/* admin */
.admin-shell{background:var(--paper);color:var(--charcoal)}.admin-sidebar{background:var(--charcoal)}.admin-brand>span{font-size:16px}.admin-brand strong{font-size:var(--label-size);color:#c7b7aa}.sidebar-context small{font-size:var(--label-size)}.sidebar-context b{font-size:var(--text-size)}.admin-sidebar nav a span{font-size:var(--text-size)}.admin-sidebar nav a.active{background:var(--brown-dark)}.admin-sidebar nav a.active::before{background:#dfa174}
.admin-topbar{background:rgba(255,253,250,.88)}.admin-search input{font-size:var(--text-size)}.admin-user strong{font-size:var(--text-size)}.admin-user small{font-size:var(--label-size)}.page-header h1{font-size:30px}.page-header small{font-size:var(--meta-size);color:#8d8076}.page-actions .btn{font-size:13px}.admin-content{font-size:var(--text-size)}
.panel,.summary-strip,.report-filter{background:var(--surface);box-shadow:0 8px 24px rgba(71,48,32,.06)}.panel-header h2{font-size:18px}.panel-header small{font-size:var(--meta-size);color:var(--brown)}
.operations-ribbon,.order-command-bar{background:var(--charcoal);box-shadow:0 14px 30px rgba(36,35,33,.18)}.operations-ribbon>div span,.operations-ribbon li span{font-size:var(--meta-size)}.operations-ribbon>div strong{font-size:32px;color:#e3a06f}.operations-ribbon>div small{font-size:var(--label-size)}
.kpi-card{background:var(--surface);box-shadow:0 8px 24px rgba(71,48,32,.06)}.kpi-card header{font-size:var(--meta-size)}.kpi-card header i{border-radius:10px;background:var(--brown)}.kpi-card>strong{font-size:26px}.kpi-card footer{font-size:var(--label-size)}
th{font-size:var(--label-size);color:#766b62;background:#f2eee8}td{font-size:var(--text-size);color:#4d463f}td small{font-size:var(--label-size);color:#91857b}.table-tools>span,.table-tools>div:first-child span{font-size:var(--text-size)}.table-tools>div:first-child small{font-size:var(--meta-size)}
.order-command-bar h2{font-size:24px}.order-command-bar p{font-size:var(--meta-size)}.order-command-bar p b{font-size:16px;color:#e3a06f}.command-metrics b{font-size:22px}.command-metrics small{font-size:var(--label-size)}.filter-caption span{font-size:var(--text-size)}.filter-caption small{font-size:var(--meta-size)}.filter-grid label,.settings-form label,.modal-form label{font-size:var(--label-size)}.filter-grid input,.filter-grid select,.search-control{font-size:var(--text-size);background:#f1ede7}.order-list-panel .link-btn{font-size:var(--label-size)}
.chart-legend{font-size:var(--meta-size)}.chart-axis{font-size:var(--label-size);color:#766b62}.status-panel ul{font-size:var(--meta-size)}.status-panel li b{font-size:var(--meta-size)}.ranking b{font-size:var(--text-size)}.ranking span{font-size:var(--label-size)}.ranking strong{font-size:var(--meta-size)}.region-bars span,.region-bars strong{font-size:var(--meta-size)}
.admin-info,.address-block b,.address-block span{font-size:var(--meta-size)}.order-detail-panel h3{font-size:var(--text-size)}.admin-product b{font-size:var(--text-size)}.admin-product span{font-size:var(--label-size)}.admin-product small{font-size:var(--meta-size)}.order-detail-panel textarea{font-size:var(--text-size)}
.permission-tree header label,.permission-tree section>div label{font-size:var(--meta-size)}.role-row b{font-size:var(--text-size)}.role-row span{font-size:var(--meta-size)}.settings-heading h2{font-size:20px}.settings-heading p,.switch-row small,.dictionary-list span{font-size:var(--meta-size)}.switch-row b,.dictionary-list b{font-size:var(--text-size)}
@media(max-width:760px){.admin-topbar{background:rgba(255,253,250,.92)}.page-header h1{font-size:26px}.order-command-bar h2{font-size:21px}}