@font-face {
  font-family: "Source Han Sans CN";
  src: url("./assets/fonts/SourceHanSansCN-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Han Sans CN";
  src: url("./assets/fonts/SourceHanSansCN-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Source Han Sans CN";
  src: url("./assets/fonts/SourceHanSansCN-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: oklch(95.2% 0.014 78);
  --surface: oklch(98.8% 0.008 78);
  --surface-muted: oklch(92.8% 0.021 76);
  --ink: oklch(23% 0.026 55);
  --muted: oklch(50% 0.025 62);
  --line: oklch(84% 0.022 73);
  --brand: oklch(34% 0.071 47);
  --brand-soft: oklch(90% 0.055 74);
  --accent: oklch(62% 0.12 59);
  --success: oklch(48% 0.088 137);
  --danger: oklch(51% 0.15 32);
  --warning: oklch(63% 0.12 78);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgb(54 39 28 / 8%), 0 12px 30px rgb(54 39 28 / 7%);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: oklch(18% 0.016 52);
  --surface: oklch(22% 0.021 53);
  --surface-muted: oklch(27% 0.025 54);
  --ink: oklch(91% 0.014 77);
  --muted: oklch(69% 0.02 70);
  --line: oklch(32% 0.025 57);
  --brand: oklch(70% 0.105 69);
  --brand-soft: oklch(29% 0.06 57);
  --accent: oklch(72% 0.105 66);
  --success: oklch(68% 0.105 137);
  --danger: oklch(70% 0.13 30);
  --warning: oklch(74% 0.12 80);
  --shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 16px 38px rgb(0 0 0 / 20%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font: 15px/1.65 "Source Han Sans CN", "Noto Sans SC", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 50%, transparent); outline-offset: 3px; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; padding: 8px 12px; background: var(--brand); color: white; }
.skip-link:focus { top: 12px; }
.number { font-variant-numeric: tabular-nums; }
.danger { color: var(--danger) !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: 236px; padding: 25px 16px 18px;
  display: flex; flex-direction: column;
  color: oklch(91% 0.016 76); background: oklch(27% 0.035 51);
}
.brand { margin: 0 6px 24px; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark, .merchant-avatar {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: "Source Han Sans CN", sans-serif;
}
.brand-mark { width: 42px; height: 42px; color: oklch(30% 0.055 48); background: oklch(76% 0.12 72); font-size: 22px; font-weight: 700; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-family: "Source Han Sans CN", sans-serif; font-size: 19px; letter-spacing: .08em; }
.brand-copy small { color: rgb(255 255 255 / 42%); font-size: 8px; letter-spacing: .11em; }
.workspace-switch { min-height: 58px; margin-bottom: 18px; padding: 8px 9px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; border: 1px solid rgb(255 255 255 / 8%); border-radius: var(--r-md); background: rgb(255 255 255 / 4%); text-align: left; cursor: pointer; }
.merchant-avatar { width: 34px; height: 34px; background: rgb(255 255 255 / 10%); }
.workspace-switch strong, .workspace-switch small { display: block; }
.workspace-switch strong { font-size: 12px; }.workspace-switch small { color: rgb(255 255 255 / 40%); font-size: 9px; }
.side-nav { display: grid; gap: 4px; }
.side-nav a { min-height: 44px; padding: 0 11px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; border-radius: var(--r-sm); color: rgb(255 255 255 / 62%); text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease), transform .15s var(--ease); }
.side-nav a:active { transform: scale(.97); }
.side-nav a.active { color: white; background: rgb(255 255 255 / 10%); }
.side-nav a span:first-child { font-size: 17px; text-align: center; }
.side-nav a b { font-size: 12px; font-weight: 600; }
.side-nav a em { min-width: 23px; padding: 1px 6px; border-radius: 12px; color: oklch(28% 0.04 50); background: oklch(76% 0.12 72); font-size: 10px; text-align: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; display: grid; gap: 7px; }
.sidebar-foot button { min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); color: rgb(255 255 255 / 55%); background: transparent; text-align: left; cursor: pointer; }
.sidebar-foot small { padding: 8px 10px 0; border-top: 1px solid rgb(255 255 255 / 8%); color: rgb(255 255 255 / 28%); }

.main-column { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: 70px; padding: 0 clamp(22px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: color-mix(in oklch, var(--canvas) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.route-context strong, .route-context small { display: block; }.route-context strong { font-size: 13px; }.route-context small { color: var(--muted); font-size: 9px; }
.mobile-brand { display: none; text-decoration: none; }
.top-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.global-search { width: min(290px, 29vw); height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.icon-btn, .notification-btn { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.notification-btn i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.notification-btn i[hidden] { display: none; }
.primary-btn, .secondary-btn, .full-btn {
  min-height: 42px; padding: 0 17px; border-radius: var(--r-sm); cursor: pointer;
  transition: transform .15s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.primary-btn:active, .secondary-btn:active, .full-btn:active, .icon-btn:active { transform: scale(.97); }
.primary-btn, .full-btn { border: 1px solid var(--brand); color: var(--surface); background: var(--brand); font-weight: 600; }
[data-theme="dark"] .primary-btn, [data-theme="dark"] .full-btn { color: oklch(19% 0.02 50); }
.secondary-btn { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.compact { min-height: 36px; padding-inline: 12px; font-size: 11px; }
.full-btn { width: 100%; }
.view-root { min-height: calc(100vh - 70px); }
.view-page { width: min(1420px, 100%); margin: 0 auto; padding: 34px clamp(22px, 4vw, 58px) 70px; animation: enter .34s var(--ease) both; }
.page-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-head h1 { margin: 0; font: 700 clamp(25px, 3vw, 36px)/1.25 "Source Han Sans CN", sans-serif; letter-spacing: .02em; }
.page-head p { max-width: 680px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.page-actions { display: flex; gap: 8px; }

.metric-strip { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.metric-strip > div { min-width: 0; padding: 18px 20px; }.metric-strip > div + div { border-left: 1px solid var(--line); }
.metric-strip span, .metric-strip strong, .metric-strip small { display: block; }
.metric-strip span { color: var(--muted); font-size: 10px; }.metric-strip strong { margin: 3px 0; font: 500 27px/1.2 "Source Han Sans CN", sans-serif; font-variant-numeric: tabular-nums; }.metric-strip small { color: var(--success); font-size: 9px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .72fr); gap: 18px; }
.work-panel, .pipeline-panel, .data-section, .form-panel, .photo-panel, .record-panel, .match-list, .match-source, .candidate-stack, .cart-lines, .cart-summary, .checkout-main, .checkout-summary, .order-detail-main, .order-side, .message-list, .contact-card, .merchant-hero, .merchant-grid, .search-results {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.work-panel, .pipeline-panel, .data-section, .form-panel, .photo-panel, .record-panel, .match-list, .match-source, .candidate-stack, .cart-lines, .cart-summary, .checkout-main, .checkout-summary, .order-detail-main, .order-side, .message-list, .contact-card, .merchant-hero, .merchant-grid, .search-results { padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-head h2, .panel-head h3 { margin: 0; font: 700 18px/1.35 "Source Han Sans CN", sans-serif; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.count-mark { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font: 600 12px "Source Han Sans CN", sans-serif; }
.action-queue { margin-top: 14px; border-top: 1px solid var(--line); }
.action-queue button { width: 100%; min-height: 64px; padding: 7px 3px; display: grid; grid-template-columns: 34px 1fr auto 18px; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.queue-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--surface-muted); }
.action-queue strong, .action-queue small { display: block; }.action-queue strong { font-size: 12px; }.action-queue small { color: var(--muted); font-size: 9px; }.action-queue b { font: 500 15px "Source Han Sans CN", sans-serif; font-variant-numeric: tabular-nums; }
.pipeline-flow { margin: 18px 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pipeline-flow div { padding: 15px 8px; }.pipeline-flow div + div { border-left: 1px solid var(--line); }.pipeline-flow span, .pipeline-flow strong { display: block; }.pipeline-flow span { color: var(--muted); font-size: 9px; }.pipeline-flow strong { font: 500 20px "Source Han Sans CN", sans-serif; font-variant-numeric: tabular-nums; }
.weekly-chart { min-height: 164px; padding-top: 18px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); }
.bars { height: 140px; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; }.bars i { width: 8px; height: var(--h); background: var(--brand); opacity: .82; }.bars i + i { background: var(--accent); opacity: .55; }
.chart-caption { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }
.data-section { margin-top: 18px; }.order-rows { margin-top: 12px; border-top: 1px solid var(--line); }
.order-rows button { width: 100%; min-height: 58px; padding: 8px 0; display: grid; grid-template-columns: 1.2fr 1fr .8fr .7fr 16px; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; font-size: 11px; }.order-rows span { color: var(--muted); }

.toolbar-row, .market-toolbar { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.segmented, .order-tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.segmented button, .order-tabs button, .filter { min-width: max-content; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 20px; color: var(--muted); background: transparent; cursor: pointer; }
.segmented button.active, .order-tabs button.active, .filter.active { color: var(--surface); border-color: var(--brand); background: var(--brand); }
[data-theme="dark"] .segmented button.active, [data-theme="dark"] .order-tabs button.active, [data-theme="dark"] .filter.active { color: oklch(19% 0.02 50); }
.inline-search { height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.inline-search input { min-width: 150px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.inventory-table, .order-table { overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.inventory-head, .inventory-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) .8fr .75fr .7fr .7fr .45fr; align-items: center; gap: 14px; }
.inventory-head, .order-head { min-height: 44px; padding: 0 16px; color: var(--muted); background: var(--surface-muted); font-size: 9px; }
.inventory-row { min-height: 76px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; transition: background-color .18s var(--ease); }
.table-product, .order-product, .checkout-product { display: flex; align-items: center; gap: 11px; min-width: 0; }
.table-product img, .order-product img, .checkout-product img { width: 50px; height: 50px; flex: none; object-fit: cover; background: var(--surface-muted); }
.table-product strong, .table-product small, .order-product strong, .order-product small, .checkout-product strong, .checkout-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-product strong, .order-product strong { font-size: 12px; }.table-product small, .order-product small, .checkout-product small { color: var(--muted); font-size: 9px; }
.status-text { color: var(--muted); font-size: 10px; }.status-text.success { color: var(--success); }.status-text.current { color: var(--accent); }.status-text.danger { color: var(--danger); }
.empty-state { padding: 70px 20px; color: var(--muted); text-align: center; }.empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); font-family: "Source Han Sans CN", sans-serif; font-size: 19px; }

.editor-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .7fr); gap: 18px; align-items: start; }
.form-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.form-grid label, .ship-form label { display: grid; gap: 6px; font-size: 11px; }.full-field { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea, .ship-form input, .ship-form select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: var(--canvas); outline: 0; }
.form-grid textarea { min-height: 96px; resize: vertical; }.form-grid input.invalid, .form-grid select.invalid { border-color: var(--danger); }.field-error { color: var(--danger); font-size: 9px; }
.photo-slots { margin: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-slot { position: relative; aspect-ratio: 1; padding: 7px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line); color: var(--muted); background: var(--canvas); font-size: 9px; text-align: center; cursor: pointer; }
.photo-slot.filled { padding: 0; border-style: solid; }.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot .photo-preview { display: none; }.photo-slot.filled .photo-preview { position: absolute; inset: 0; display: block; filter: brightness(.66); }.photo-slot .ui-icon, .photo-slot small { position: relative; z-index: 1; }.photo-slot.filled small { color: white; }
.form-summary, .note-box, .disclosure, .demo-disclaimer, .demo-payment, .local-only { padding: 12px 14px; color: var(--muted); background: var(--surface-muted); font-size: 10px; }
.detail-layout { display: grid; grid-template-columns: minmax(380px, 1.1fr) minmax(330px, .75fr); gap: 18px; align-items: start; }
.asset-viewer { overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }.asset-viewer > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumb-row { padding: 10px; display: flex; gap: 8px; }.thumb-row button { width: 58px; height: 58px; padding: 0; border: 1px solid var(--line); background: var(--surface-muted); cursor: pointer; }.thumb-row img { width: 100%; height: 100%; object-fit: cover; }
.record-status { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.record-status h2 { margin: 0; font: 700 22px "Source Han Sans CN", sans-serif; }
.spec-grid, .buy-specs { margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.spec-grid div, .buy-specs div { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.spec-grid span, .spec-grid strong, .buy-specs span, .buy-specs strong { display: block; }.spec-grid span, .buy-specs span { color: var(--muted); font-size: 9px; }.spec-grid strong, .buy-specs strong { margin-top: 2px; font-size: 12px; }
.record-actions, .match-actions, .purchase-actions, .aftersale-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.match-workspace { display: grid; grid-template-columns: 260px minmax(330px, .8fr) minmax(390px, 1fr); gap: 14px; align-items: start; }
.match-list { padding: 12px; }.match-list h3 { margin: 4px 7px 12px; font: 700 16px "Source Han Sans CN", sans-serif; }
.match-list button { width: 100%; min-height: 56px; padding: 7px 8px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; }.match-list button.current { border-color: var(--brand); background: var(--brand-soft); }.match-list img { width: 38px; height: 38px; object-fit: cover; }.match-list strong, .match-list small { display: block; }.match-list strong { font-size: 11px; }.match-list small { color: var(--muted); font-size: 8px; }
.source-image { margin: 16px 0; overflow: hidden; }.source-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.source-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.source-spec div { padding: 9px; background: var(--surface-muted); }.source-spec span, .source-spec strong { display: block; }.source-spec span { color: var(--muted); font-size: 8px; }.source-spec strong { font-size: 11px; }
.candidate-card { padding: 15px 0; display: grid; grid-template-columns: 72px 1fr auto; gap: 13px; border-top: 1px solid var(--line); }.candidate-card.selected { padding-inline: 12px; border: 1px solid var(--brand); background: color-mix(in oklch, var(--brand-soft) 45%, transparent); }.candidate-card img { width: 72px; height: 82px; object-fit: cover; }.candidate-card h4 { margin: 0 0 3px; font: 700 15px "Source Han Sans CN", sans-serif; }.candidate-card p { margin: 0; color: var(--muted); font-size: 9px; }.match-value { color: var(--accent); font: 600 20px "Source Han Sans CN", sans-serif; font-variant-numeric: tabular-nums; }
.match-reason { grid-column: 1 / -1; }.reason-metrics { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }.reason-metrics div { padding: 8px; background: var(--surface-muted); }.reason-metrics span, .reason-metrics strong { display: block; }.reason-metrics span { color: var(--muted); font-size: 8px; }.reason-metrics strong { font-size: 11px; }

.market-masthead { margin-bottom: 20px; padding: clamp(24px, 5vw, 56px); color: oklch(94% 0.014 76); background: oklch(29% 0.043 51); }.market-masthead small { color: oklch(77% 0.11 72); letter-spacing: .15em; }.market-masthead h1 { max-width: 740px; margin: 9px 0; font: 700 clamp(30px, 5vw, 54px)/1.18 "Source Han Sans CN", sans-serif; }.market-masthead p { max-width: 620px; margin: 0; color: rgb(255 255 255 / 58%); }
.market-toolbar { align-items: flex-end; }.market-toolbar > div:first-child { display: flex; gap: 5px; overflow-x: auto; }.cart-link { min-width: max-content; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; }.product-image { position: relative; overflow: hidden; background: var(--surface-muted); }.product-image img { width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover; transition: transform .45s var(--ease); }.archive-score { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; color: white; background: rgb(35 24 18 / 78%); font-size: 8px; }.icon-heart { position: absolute; top: 9px; right: 9px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in oklch, var(--surface) 88%, transparent); cursor: pointer; }.icon-heart.active { color: var(--danger); }
.product-copy { padding: 16px; }.product-copy small { color: var(--muted); }.product-copy h3 { min-height: 45px; margin: 7px 0; font: 700 16px/1.4 "Source Han Sans CN", sans-serif; }.product-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.product-copy strong { font: 600 19px "Source Han Sans CN", sans-serif; font-variant-numeric: tabular-nums; }.verified-shop { color: var(--success); font-size: 9px; }
.demo-disclaimer { margin-top: 18px; text-align: center; }
.product-detail { display: grid; grid-template-columns: minmax(390px, 1fr) minmax(350px, .72fr); gap: 20px; align-items: start; }.product-gallery { overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }.product-gallery > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.buy-panel { padding: clamp(22px, 4vw, 38px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }.verified-line { color: var(--success); font-size: 10px; }.buy-panel h1 { margin: 8px 0; font: 700 clamp(25px, 3vw, 36px)/1.3 "Source Han Sans CN", sans-serif; }.product-price { margin: 12px 0; color: var(--brand); font: 600 31px "Source Han Sans CN", sans-serif; }.service-points { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }.service-points li { padding: 10px; border-block: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: center; }.seller-box { margin-top: 15px; padding: 14px; background: var(--surface-muted); }.seller-box strong, .seller-box small { display: block; }.seller-box small { color: var(--muted); }

.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .58fr); gap: 18px; align-items: start; }.cart-lines > article, .checkout-product { min-height: 88px; padding: 10px 0; border-bottom: 1px solid var(--line); }.cart-lines article { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 12px; }.cart-lines img { width: 62px; height: 62px; object-fit: cover; }.cart-lines h3 { margin: 0; font: 700 15px "Source Han Sans CN", sans-serif; }.cart-lines p { margin: 2px 0; color: var(--muted); font-size: 9px; }.cart-lines button { border: 0; background: transparent; color: var(--danger); cursor: pointer; }
.cart-summary, .checkout-summary { position: sticky; top: 88px; }.cart-summary h3, .checkout-summary h3 { margin-top: 0; font: 700 18px "Source Han Sans CN", sans-serif; }.cart-summary p, .checkout-summary p { display: flex; justify-content: space-between; }.cart-summary .total, .checkout-summary .total { padding-top: 12px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 700; }
.checkout-main section + section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }.checkout-main h2 { margin: 0 0 12px; font: 700 18px "Source Han Sans CN", sans-serif; }.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.choice-grid label { padding: 12px; border: 1px solid var(--line); cursor: pointer; }.agreement { margin-top: 14px; display: flex; gap: 7px; color: var(--muted); font-size: 10px; }

.order-tabs { margin-bottom: 14px; }.order-head, .order-row { display: grid; grid-template-columns: minmax(230px, 1.4fr) .75fr .7fr .75fr .55fr; align-items: center; gap: 12px; }.order-row { min-height: 82px; padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer; font-size: 11px; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }.order-state { padding-bottom: 17px; border-bottom: 1px solid var(--line); }.order-state h2 { margin: 0; font: 700 24px "Source Han Sans CN", sans-serif; }.order-state p { margin-bottom: 0; color: var(--muted); }
.timeline { margin: 20px 0; padding-left: 15px; border-left: 1px solid var(--line); }.timeline div { position: relative; padding: 0 0 18px 15px; }.timeline div::before { content: ""; position: absolute; left: -19px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }.timeline div.current::before { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 13%, transparent); }.timeline strong, .timeline small { display: block; }.timeline strong { font-size: 11px; }.timeline small { color: var(--muted); font-size: 9px; }
.order-product-detail { padding: 14px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 12px; background: var(--surface-muted); }.order-product-detail > img { width: 74px; height: 74px; object-fit: cover; }.order-product-detail strong, .order-product-detail small, .order-product-detail a { display: block; }.order-product-detail small { margin: 3px 0; color: var(--muted); font-size: 9px; }.order-product-detail a { font-size: 10px; }.ship-form { margin-top: 18px; display: grid; gap: 12px; }.order-side h3 { margin: 0 0 12px; font: 700 17px "Source Han Sans CN", sans-serif; }.order-side dl { margin: 0; }.order-side dl div { padding: 9px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }.order-side dt { color: var(--muted); font-size: 10px; }.order-side dd { margin: 0; text-align: right; font-size: 10px; }

.message-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }.message-row { width: 100%; min-height: 78px; padding: 10px 4px; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }.message-row.unread { background: color-mix(in oklch, var(--brand-soft) 30%, transparent); }.message-type { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-muted); }.message-row strong, .message-row small { display: block; }.message-row strong { font-size: 12px; }.message-row small { color: var(--muted); font-size: 9px; }.contact-card { position: sticky; top: 88px; }.contact-card h3 { margin: 0; font: 700 18px "Source Han Sans CN", sans-serif; }.contact-card p { color: var(--muted); font-size: 10px; }
.merchant-hero { margin-bottom: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }.merchant-large { width: 72px; height: 72px; font-size: 25px; }.merchant-hero h2 { margin: 0; font: 700 23px "Source Han Sans CN", sans-serif; }.merchant-hero p { margin: 3px 0; color: var(--muted); }.merchant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }.merchant-grid h3 { font: 700 18px "Source Han Sans CN", sans-serif; }.cert-list, .setting-row { padding: 12px 0; border-bottom: 1px solid var(--line); }.cert-list { display: flex; justify-content: space-between; }.cert-list span:last-child { color: var(--success); }.setting-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }.setting-row strong, .setting-row small { display: block; }.setting-row small { color: var(--muted); }
.compact-products { display: grid; gap: 0; }.search-results h2 { margin-top: 0; font: 700 18px "Source Han Sans CN", sans-serif; }
.success-page { max-width: 650px; margin: 8vh auto; padding: 50px 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }.success-page > span { width: 60px; height: 60px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--success); font-size: 26px; }.success-page h1 { margin: 0; font: 700 29px "Source Han Sans CN", sans-serif; }.success-page p { color: var(--muted); }.success-page .page-actions { justify-content: center; }
.skeleton-page { padding: 40px clamp(22px, 4vw, 58px); }.skeleton-page i { height: 18px; margin-bottom: 12px; display: block; background: linear-gradient(90deg, var(--surface-muted), var(--surface), var(--surface-muted)); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }.skeleton-page i:first-child { width: 35%; height: 38px; }.skeleton-page i:nth-child(2) { width: 62%; }.skeleton-page i:nth-child(3) { height: 260px; }
.mobile-nav { display: none; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-sm); color: white; background: oklch(27% 0.035 51); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (hover: hover) {
  .side-nav a:hover, .sidebar-foot button:hover { color: white; background: rgb(255 255 255 / 7%); }
  .inventory-row:hover, .order-row:hover, .action-queue button:hover, .message-row:hover { background: var(--canvas); }
  .product-card:hover .product-image img { transform: scale(1.035); }
}
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }.sidebar { width: 82px; padding-inline: 11px; }.brand { justify-content: center; }.brand-copy, .workspace-switch > span:not(.merchant-avatar), .workspace-switch > b, .side-nav a b, .side-nav a em, .sidebar-foot button b, .sidebar-foot small { display: none; }.workspace-switch, .side-nav a { grid-template-columns: 1fr; padding-inline: 0; }.merchant-avatar { margin: auto; }.main-column { grid-column: 2; }
  .dashboard-layout { grid-template-columns: 1fr; }.match-workspace { grid-template-columns: 220px 1fr; }.candidate-stack { grid-column: 1 / -1; }.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1350px) and (min-width: 801px) {
  .match-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .candidate-stack { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .metric-strip { grid-template-columns: repeat(2, 1fr); }.metric-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.metric-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .editor-layout, .detail-layout, .product-detail, .cart-layout, .checkout-layout, .order-detail-grid, .message-layout { grid-template-columns: 1fr; }.photo-panel { order: initial; }.cart-summary, .checkout-summary, .contact-card { position: static; }.inventory-head, .order-head { display: none; }
  .inventory-row, .order-row { grid-template-columns: 1fr auto; gap: 7px 12px; padding-block: 13px; }.inventory-row > *, .order-row > * { grid-column: 2; }.inventory-row .table-product, .order-row .order-product { grid-column: 1; grid-row: 1 / span 4; }.inventory-row > *::before, .order-row > *::before { margin-right: 7px; color: var(--muted); font-size: 8px; }
  .match-workspace { grid-template-columns: 1fr; }.candidate-stack { grid-column: auto; }
}
@media (max-width: 720px) {
  body { padding-bottom: env(safe-area-inset-bottom); }.app-shell { display: block; }.sidebar { display: none; }.main-column { padding-bottom: 78px; }.topbar { height: 60px; padding: 0 14px; }.route-context, .global-search, .top-actions .primary-btn { display: none; }.mobile-brand { display: flex; align-items: center; gap: 8px; font: 700 16px "Source Han Sans CN", sans-serif; }.mobile-brand span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: oklch(28% 0.04 50); background: oklch(76% 0.12 72); }.top-actions { margin-left: auto; }.view-root { min-height: calc(100vh - 60px); }.view-page { padding: 22px 14px 44px; }.page-head { align-items: flex-start; }.page-head h1 { font-size: 26px; }.page-actions { flex-wrap: wrap; justify-content: flex-end; }
  .toolbar-row, .market-toolbar { align-items: stretch; flex-direction: column; }.inline-search { width: 100%; }.inline-search input { min-width: 0; width: 100%; }.product-grid { grid-template-columns: 1fr; }.product-image img { aspect-ratio: 1.05; }.market-masthead { margin-inline: -14px; }.market-masthead h1 { font-size: 34px; }
  .form-grid { grid-template-columns: 1fr; }.full-field { grid-column: auto; }.photo-slots { grid-template-columns: repeat(2, 1fr); }.reason-metrics { grid-template-columns: repeat(2, 1fr); }.merchant-hero { grid-template-columns: auto 1fr; }.merchant-hero > button { grid-column: 1 / -1; }.merchant-grid { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; z-index: 35; inset: auto 0 0; height: calc(68px + env(safe-area-inset-bottom)); padding: 7px 2px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); color: rgb(255 255 255 / 55%); background: oklch(27% 0.035 51); }.mobile-nav a { min-width: 0; min-height: 54px; display: grid; place-items: center; align-content: center; color: inherit; text-decoration: none; font-size: 9px; }.mobile-nav a span { display: block; font-size: 17px; line-height: 22px; }.mobile-nav a.active { color: oklch(78% 0.11 73); }.mobile-create { position: relative; color: oklch(78% 0.11 73) !important; }.mobile-create span { width: 42px; height: 42px; margin-top: -24px; display: grid !important; place-items: center; border-radius: 50%; color: oklch(28% 0.04 50); background: oklch(78% 0.11 73); box-shadow: 0 0 0 5px oklch(27% 0.035 51); font-size: 24px !important; }.toast { bottom: 82px; }
}
@media (max-width: 390px) {
  .view-page { padding-inline: 11px; }.page-head { display: block; }.page-actions { margin-top: 12px; justify-content: flex-start; }.metric-strip > div { padding: 14px 12px; }.metric-strip strong { font-size: 23px; }.candidate-card { grid-template-columns: 58px 1fr auto; }.candidate-card img { width: 58px; height: 70px; }.service-points { grid-template-columns: 1fr; }.service-points li + li { border-top: 0; }.choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .order-rows .order-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding-block: 12px; }
  .order-rows .order-row > * { grid-column: auto; grid-row: auto; }
  .order-rows .order-row > span:first-child { grid-column: 1 / -1; }
  .order-rows .order-product { grid-column: 1; }
  .order-rows .order-row > .number { grid-column: 2; grid-row: 2; }
  .order-rows .order-row > .status-text { grid-column: 1; grid-row: 3; }
  .order-rows .order-row > i { grid-column: 2; grid-row: 3; }
}

/* Unified local icon and typography layer */
.ui-icon { width: 18px; height: 18px; flex: none; object-fit: contain; }
.primary-btn, .secondary-btn, .full-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.primary-btn .ui-icon { filter: invert(1); }
[data-theme="dark"] .secondary-btn .ui-icon,
[data-theme="dark"] .icon-btn .ui-icon,
[data-theme="dark"] .inline-search .ui-icon,
[data-theme="dark"] .message-row > .ui-icon,
[data-theme="dark"] .order-row > .ui-icon,
[data-theme="dark"] .inventory-row > .ui-icon { filter: invert(1); }
[data-theme="dark"] .verified-shop .ui-icon,
[data-theme="dark"] .verified-line .ui-icon,
[data-theme="dark"] .status-text.success .ui-icon,
[data-theme="dark"] .cert-list .ui-icon { filter: invert(1); }
[data-theme="dark"] .global-search > img { filter: invert(1); }
[data-theme="dark"] .primary-btn > img,
[data-theme="dark"] .primary-btn .ui-icon,
[data-theme="dark"] .full-btn:not(.secondary-btn) > img { filter: none; }
.sidebar .ui-icon, .sidebar img { filter: invert(1); opacity: .74; }
.brand-mark img { width: 23px; height: 23px; filter: none; opacity: 1; }
.workspace-switch > button { width: 30px; height: 30px; padding: 7px; border: 0; border-radius: var(--r-sm); background: rgb(255 255 255 / 8%); }
.workspace-switch > button img { width: 100%; height: 100%; }
.side-nav a { grid-template-columns: 22px 1fr auto; }
.side-nav a > img { width: 18px; height: 18px; justify-self: center; }
.sidebar-foot button, .sidebar-foot a { min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--r-sm); color: rgb(255 255 255 / 60%); background: transparent; text-decoration: none; cursor: pointer; }
.sidebar-foot img { width: 17px; height: 17px; }
.icon-btn { display: inline-grid; place-items: center; }
.icon-btn > img { width: 18px; height: 18px; }
.global-search > img, .primary-btn > img, .secondary-btn > img, .full-btn > img { width: 16px; height: 16px; flex: none; }
.primary-btn > img, .full-btn:not(.secondary-btn) > img { filter: invert(1); }
.notification-btn > img { margin: auto; }
#notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
#notification-dot[hidden] { display: none; }
.topbar { backdrop-filter: none; }
.page-head h1 { letter-spacing: 0; }
.page-head p, .panel-head p { line-height: 1.7; }
.action-queue button > .ui-icon, .order-row > .ui-icon, .inventory-row > .ui-icon, .message-row > .ui-icon { width: 16px; height: 16px; opacity: .58; }
.queue-symbol .ui-icon { width: 16px; height: 16px; }
.weekly-chart { padding-bottom: 24px; }
.bars { gap: 8px; }
.bars i { position: relative; width: 18px; min-height: 8px; }
.bars i span { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.candidate-card > img { width: 72px; height: 82px; object-fit: cover; }
.candidate-select { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.candidate-select[aria-pressed="true"] { color: white; border-color: var(--brand); background: var(--brand); }
.candidate-select .ui-icon { width: 16px; height: 16px; filter: invert(1); }
.photo-slot .ui-icon { width: 20px; height: 20px; opacity: .62; }
.photo-slot.filled .ui-icon { filter: invert(1); opacity: .92; }
.verified-shop, .verified-line, .status-text.success { display: inline-flex; align-items: center; gap: 5px; }
.verified-shop .ui-icon, .verified-line .ui-icon, .status-text.success .ui-icon, .cert-list .ui-icon { width: 14px; height: 14px; }
.cert-list .ui-icon { opacity: .7; }
.timeline .ui-icon { width: 13px; height: 13px; }
.success-page > span .ui-icon { width: 28px; height: 28px; filter: invert(1); }
.empty-state > .ui-icon { width: 34px; height: 34px; margin: 0 auto 12px; opacity: .42; }

/* Public brand landing page */
.landing-mode { background: oklch(16% 0.019 145); }
.landing-mode .app-shell { display: block; }
.landing-mode .sidebar, .landing-mode .topbar, .landing-mode .mobile-nav { display: none; }
.landing-mode .main-column { padding: 0; }
.landing-root { min-height: 100vh; }
.landing {
  --landing-bg: oklch(16% 0.019 145);
  --landing-surface: oklch(20% 0.024 145);
  --landing-line: oklch(34% 0.025 145);
  --landing-ink: oklch(93% 0.012 105);
  --landing-muted: oklch(69% 0.018 120);
  --landing-accent: oklch(75% 0.135 75);
  min-height: 100vh;
  color: var(--landing-ink);
  background: var(--landing-bg);
}
.landing a { text-decoration: none; }
.landing .ui-icon { filter: invert(1); }
.landing-header { position: absolute; inset: 0 0 auto; z-index: 5; height: 72px; padding: 0 clamp(22px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.landing-logo { display: inline-flex; align-items: center; gap: 9px; justify-self: start; }
.landing-logo > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--landing-accent); }
.landing-logo > span .ui-icon { width: 20px; height: 20px; filter: none; }
.landing-logo strong { font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.landing-logo small { margin-left: 3px; color: var(--landing-muted); font-size: 8px; letter-spacing: .12em; }
.landing-header nav { display: flex; align-items: center; gap: 28px; }
.landing-header nav button, .landing-header nav a { padding: 0; border: 0; color: var(--landing-muted); background: transparent; font-size: 12px; cursor: pointer; }
.landing-header nav button:hover, .landing-header nav a:hover { color: var(--landing-ink); }
.landing-login { justify-self: end; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(255 255 255 / 22%); font-size: 12px; }
.landing-login .ui-icon, .landing-actions .ui-icon, .capability-grid a .ui-icon, .landing-final a .ui-icon { width: 16px; height: 16px; }
.landing-hero { min-height: 100svh; padding: 104px clamp(22px, 6vw, 96px) 44px; display: grid; grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.15fr); align-items: center; gap: clamp(38px, 7vw, 112px); }
.landing-hero-copy { padding-bottom: 2vh; }
.landing-kicker { margin: 0 0 18px; color: var(--landing-accent); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.landing-hero h1 { margin: 0; font-size: clamp(44px, 5.1vw, 74px); font-weight: 700; line-height: 1.13; letter-spacing: -.025em; }
.landing-lead { max-width: 27em; margin: 24px 0 0; color: var(--landing-muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.85; }
.landing-actions { margin-top: 34px; display: flex; align-items: center; gap: 11px; }
.landing-primary, .landing-secondary { min-height: 48px; padding: 0 19px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; transition: transform .18s var(--ease), background-color .18s var(--ease); }
.landing-primary { color: oklch(20% 0.025 140); background: var(--landing-accent); }.landing-primary .ui-icon { filter: none; }
.landing-secondary { border: 1px solid var(--landing-line); color: var(--landing-ink); }
.landing-primary:active, .landing-secondary:active, .landing-login:active { transform: scale(.97); }
.landing-hero-media { position: relative; min-height: min(68vh, 660px); }
.landing-hero-media > img { width: 100%; height: min(68vh, 660px); object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.08); }
.landing-hero-media::before { content: ""; position: absolute; inset: 22px -20px -20px 22px; z-index: -1; border: 1px solid var(--landing-line); }
.landing-archive { position: absolute; left: -36px; bottom: 34px; width: 230px; padding: 17px 19px; color: var(--landing-ink); background: oklch(18% 0.025 145 / 94%); border: 1px solid var(--landing-line); }
.landing-archive span, .landing-archive strong, .landing-archive small { display: block; }.landing-archive span { color: var(--landing-accent); font-size: 9px; }.landing-archive strong { margin: 3px 0; font-size: 19px; }.landing-archive small { color: var(--landing-muted); font-size: 9px; line-height: 1.7; }
.landing-standards { margin: 0 clamp(22px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--landing-line); }
.landing-standards > div { min-height: 116px; padding: 24px 0; display: grid; grid-template-columns: 38px 1fr; align-content: center; column-gap: 14px; }.landing-standards > div + div { padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--landing-line); }
.landing-standards span { grid-row: 1 / span 2; color: var(--landing-accent); font-size: 10px; }.landing-standards strong, .landing-standards small { display: block; }.landing-standards strong { font-size: 15px; }.landing-standards small { color: var(--landing-muted); font-size: 10px; }
.landing-capabilities { padding: 130px clamp(22px, 6vw, 96px); scroll-margin-top: 30px; }
.landing-section-title { max-width: 760px; margin-bottom: 52px; }.landing-section-title h2 { max-width: 12em; margin: 0; font-size: clamp(34px, 4vw, 58px); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; }.landing-section-title p { max-width: 39em; margin: 18px 0 0; color: var(--landing-muted); line-height: 1.8; }
.capability-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, minmax(260px, auto)); border: 1px solid var(--landing-line); }
.capability-grid article { position: relative; overflow: hidden; }.capability-grid h3 { margin: 16px 0 8px; font-size: 25px; }.capability-grid p { max-width: 30em; margin: 0; color: var(--landing-muted); line-height: 1.8; }.capability-grid a { margin-top: 24px; display: inline-flex; align-items: center; gap: 7px; color: var(--landing-accent); font-size: 12px; }
.capability-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--landing-line); }.capability-icon .ui-icon { width: 21px; height: 21px; }
.capability-match { grid-row: 1 / 3; display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--landing-line); }.capability-match > div { padding: clamp(28px, 4vw, 52px); }.capability-match > img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; filter: saturate(.72); }
.capability-market, .capability-ops { padding: clamp(28px, 4vw, 52px); }.capability-market { background: var(--landing-surface); border-bottom: 1px solid var(--landing-line); }.capability-ops { background: oklch(18% 0.018 145); }
.landing-flow { margin: 0 clamp(22px, 6vw, 96px); padding: 34px 0; display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; align-items: center; border-block: 1px solid var(--landing-line); }
.landing-flow > .ui-icon { width: 15px; height: 15px; opacity: .38; }.landing-flow div { display: grid; grid-template-columns: 28px 1fr; }.landing-flow span { grid-row: 1 / span 2; color: var(--landing-accent); font-size: 9px; }.landing-flow strong, .landing-flow small { display: block; }.landing-flow strong { font-size: 13px; }.landing-flow small { color: var(--landing-muted); font-size: 9px; }
.landing-origin { padding: 140px clamp(22px, 6vw, 96px); display: grid; grid-template-columns: minmax(380px, 1fr) minmax(360px, .88fr); align-items: center; gap: clamp(48px, 8vw, 130px); scroll-margin-top: 30px; }
.origin-image { position: relative; }.origin-image::after { content: "LAISHUI  ·  HEBEI"; position: absolute; right: -25px; bottom: 18px; padding: 9px 12px; color: var(--landing-bg); background: var(--landing-accent); font-size: 8px; letter-spacing: .12em; }.origin-image img { width: 100%; max-height: 660px; object-fit: cover; filter: saturate(.7); }
.origin-copy > span { display: inline-flex; align-items: center; gap: 7px; color: var(--landing-accent); font-size: 11px; }.origin-copy > span .ui-icon { width: 15px; height: 15px; }.origin-copy h2 { margin: 20px 0; font-size: clamp(34px, 4vw, 56px); line-height: 1.24; }.origin-copy > p { max-width: 37em; color: var(--landing-muted); line-height: 1.9; }
.origin-copy dl { margin: 30px 0 0; }.origin-copy dl div { padding: 15px 0; display: grid; grid-template-columns: 86px 1fr; border-top: 1px solid var(--landing-line); }.origin-copy dt { color: var(--landing-muted); font-size: 10px; }.origin-copy dd { margin: 0; font-size: 11px; }
.landing-final { min-height: 530px; padding: 90px 24px; display: grid; place-items: center; align-content: center; text-align: center; background: var(--landing-surface); }.landing-final > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--landing-accent); }.landing-final > span .ui-icon { width: 26px; height: 26px; filter: none; }.landing-final h2 { margin: 24px 0 30px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.25; }.landing-final a { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; color: oklch(20% 0.025 140); background: var(--landing-accent); font-size: 12px; }.landing-final a .ui-icon { filter: none; }
.landing-footer { min-height: 120px; padding: 30px clamp(22px, 6vw, 96px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--landing-line); }.landing-footer p { color: var(--landing-muted); font-size: 9px; }.landing-footer > a:last-child { justify-self: end; color: var(--landing-muted); font-size: 10px; }

@media (max-width: 960px) {
  .landing-header { grid-template-columns: 1fr auto; }.landing-header nav { display: none; }
  .landing-hero { grid-template-columns: 1fr; padding-top: 118px; }.landing-hero-copy { padding: 24px 0; }.landing-hero-media, .landing-hero-media > img { min-height: 520px; height: 58vh; }.landing-archive { left: 18px; }
  .landing-origin { grid-template-columns: 1fr; }.origin-image img { max-height: 560px; }
}
@media (max-width: 720px) {
  .landing-mode .main-column { padding-bottom: 0; }
  .landing-header { height: 64px; padding-inline: 16px; }.landing-logo small { display: none; }.landing-login { min-height: 38px; padding-inline: 12px; font-size: 10px; }
  .landing-hero { min-height: auto; padding: 104px 16px 58px; gap: 42px; }.landing-hero h1 { font-size: clamp(38px, 11.5vw, 52px); }.landing-lead { margin-top: 20px; font-size: 14px; }.landing-actions { align-items: flex-start; flex-direction: column; }.landing-primary, .landing-secondary { min-height: 46px; }
  .landing-hero-media, .landing-hero-media > img { min-height: 420px; height: 56vh; }.landing-hero-media::before { inset: 12px -7px -12px 12px; }.landing-archive { left: 12px; right: 12px; bottom: 14px; width: auto; }
  .landing-standards { margin-inline: 16px; grid-template-columns: 1fr; }.landing-standards > div { min-height: 92px; }.landing-standards > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--landing-line); }
  .landing-capabilities { padding: 92px 16px; }.landing-section-title { margin-bottom: 34px; }.landing-section-title h2 { font-size: 36px; }
  .capability-grid { display: block; }.capability-match { display: block; border-right: 0; border-bottom: 1px solid var(--landing-line); }.capability-match > img { min-height: 300px; max-height: 430px; }.capability-market, .capability-ops { min-height: 250px; }.capability-grid h3 { font-size: 22px; }
  .landing-flow { margin-inline: 16px; padding: 18px 0; grid-template-columns: 1fr; }.landing-flow > .ui-icon { margin: 7px 0 7px 7px; transform: rotate(90deg); }.landing-flow div { padding: 8px 0; }
  .landing-origin { padding: 96px 16px; gap: 42px; }.origin-image::after { right: -5px; }.origin-copy h2 { font-size: 36px; }
  .landing-final { min-height: 460px; padding-inline: 20px; }.landing-final h2 { font-size: 37px; }
  .landing-footer { padding: 26px 16px; grid-template-columns: 1fr auto; }.landing-footer p { grid-column: 1 / -1; grid-row: 2; }.landing-footer .landing-logo small { display: none; }
}
@media (max-width: 390px) {
  .landing-logo strong { font-size: 16px; }.landing-login .ui-icon { display: none; }.landing-hero h1 { font-size: 38px; }.landing-final h2 { font-size: 33px; }
}

@media (max-width: 800px) {
  .inventory-row { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding-block: 13px; }
  .inventory-row > * { min-width: 0; grid-column: 2; }
  .inventory-row .table-product { grid-column: 1; grid-row: 1 / span 6; }
  .inventory-row .table-product > span { min-width: 0; }
}
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Final component alignment for the operational demo. */
.metric-strip > article { min-width: 0; padding: 18px 20px; }
.metric-strip > article + article { border-left: 1px solid var(--line); }
.pipeline-flow { grid-template-columns: repeat(5, 1fr); }
.weekly-chart { display: block; }
.inventory-head, .inventory-row { grid-template-columns: minmax(220px, 1.4fr) .8fr .75fr .7fr .7fr .65fr 18px; }
.market-masthead { min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr); align-items: center; gap: 35px; overflow: hidden; }
.market-masthead > div > span { color: oklch(77% 0.11 72); font-size: 10px; letter-spacing: .15em; }
.market-masthead img { width: 100%; height: 280px; object-fit: cover; box-shadow: 18px 18px 0 rgb(255 255 255 / 6%); }
.product-image { width: 100%; padding: 0; border: 0; cursor: pointer; }
.product-copy p { margin: 0; display: flex; justify-content: space-between; }
.product-copy > button { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.product-copy ul { margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
.product-copy li { padding: 2px 6px; color: var(--success); background: color-mix(in oklch, var(--success) 8%, transparent); font-size: 8px; }
.product-copy > div { padding-top: 11px; border-top: 1px solid var(--line); }
.service-points span { padding: 10px; border-block: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: center; }
.seller-box { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; }
.seller-box button { min-height: 36px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.merchant-large { display: grid; place-items: center; border-radius: 50%; color: var(--surface); background: var(--brand); font: 700 25px "Source Han Sans CN", sans-serif; }
.merchant-hero h1 { margin: 0; font: 700 23px "Source Han Sans CN", sans-serif; }
.merchant-hero dl { display: flex; gap: 20px; }.merchant-hero dl div { text-align: center; }.merchant-hero dt { color: var(--muted); font-size: 8px; }.merchant-hero dd { margin: 0; font: 600 18px "Source Han Sans CN", sans-serif; }
.cert-list { display: block; }.cert-list > div { padding: 12px 0; display: grid; grid-template-columns: 1fr auto 20px; gap: 10px; border-bottom: 1px solid var(--line); }.cert-list i { color: var(--success); }
.success-page > div { margin: 18px 0; display: flex; justify-content: center; gap: 8px; }
.skeleton-page span { height: 18px; margin-bottom: 12px; display: block; background: linear-gradient(90deg, var(--surface-muted), var(--surface), var(--surface-muted)); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
@media (max-width: 800px) {
  .metric-strip > article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .metric-strip > article:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (min-width: 1300px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mobile-nav a > img { width: 18px; height: 18px; margin-bottom: 3px; filter: invert(1); opacity: .72; }
  .mobile-nav a.active > img { opacity: 1; }
  .mobile-create img { width: 20px; height: 20px; }
}
@media (max-width: 720px) {
  .market-masthead { grid-template-columns: 1fr; min-height: 0; }
  .market-masthead img { height: 210px; }
  .merchant-hero dl { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .metric-strip > article { padding: 14px 12px; }
  .market-masthead { margin-inline: -11px; }
  .service-points span + span { border-top: 0; }
}

/* Final product polish: legibility, state fidelity and local-demo craft. */
button, a, input, select, textarea { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.45); }
h1, h2, h3, .page-head p, .landing-lead { text-wrap: balance; }
.note-box p, .disclosure p, .contact-card p, .landing-origin p { text-wrap: pretty; }

.pair-summary { margin-top: 12px; padding: 14px; display: grid; gap: 3px; color: var(--ink); background: color-mix(in oklch, var(--success) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--success) 24%, transparent); }
.pair-summary span { display: flex; align-items: center; gap: 7px; color: var(--success); font-size: 11px; }
.pair-summary strong { font-size: 14px; }
.pair-summary small { color: var(--muted); font-size: 11px; line-height: 1.65; }
.note-box p.editing { min-height: 72px; padding: 9px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand); outline: 0; }

.order-line-list { display: grid; gap: 8px; }
.order-product-detail { margin: 0; }
.order-product em { margin-left: 7px; padding: 2px 6px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-style: normal; }
.merchant-editor { max-width: 820px; }
.merchant-editor > .primary-btn { margin-top: 20px; }

.photo-slot.view-1 .photo-preview { object-position: 24% 48%; transform: scale(1.08); }
.photo-slot.view-2 .photo-preview { object-position: 72% 44%; transform: scale(1.1) rotate(1.5deg); }
.photo-slot.view-3 .photo-preview { object-position: 42% 70%; transform: scale(1.16) rotate(-2deg); }
.photo-slot.view-4 .photo-preview { object-position: 82% 68%; transform: scale(1.14) rotate(2deg); }
.photo-slot .photo-preview { outline: 1px solid rgb(0 0 0 / 10%); outline-offset: -1px; }
.archive-main-image, .product-main-image { transition-property: transform, object-position, filter; transition-duration: 280ms; transition-timing-function: var(--ease); }
.asset-viewer[data-view="1"] .archive-main-image, .product-gallery[data-view="1"] .product-main-image { object-position: 72% 48%; transform: scale(1.06) rotate(1deg); }
.asset-viewer[data-view="2"] .archive-main-image, .product-gallery[data-view="2"] .product-main-image { object-position: 28% 58%; transform: scale(1.1) rotate(-1.5deg); }
.asset-viewer[data-view="3"] .archive-main-image, .product-gallery[data-view="3"] .product-main-image { object-position: 76% 62%; transform: scale(1.1) rotate(1.5deg); }
.asset-viewer[data-view="4"] .archive-main-image { object-position: 50% 30%; transform: scale(1.14); }
.asset-viewer[data-view="5"] .archive-main-image { object-position: 50% 78%; transform: scale(1.14) rotate(2deg); }

.market-masthead { min-height: 300px; padding-block: 36px; }
.market-masthead img { height: 230px; }

.action-queue small, .pipeline-flow span, .table-product small, .order-product small, .checkout-product small, .candidate-card p, .candidate-card small, .timeline small, .order-product-detail small, .message-row small, .verified-shop, .form-summary, .note-box, .disclosure, .demo-disclaimer, .demo-payment, .local-only { font-size: 11px; line-height: 1.6; }
.inventory-head, .order-head, .form-grid label, .ship-form label, .status-text { font-size: 11px; }
.chart-caption, .match-list small, .source-spec span, .reason-metrics span, .archive-score, .product-copy li, .merchant-hero dt { font-size: 10px; }
.mobile-nav a { font-size: 11px; }

@media (max-width: 720px) {
  html { scroll-padding-bottom: 92px; }
  input, select, textarea, button { scroll-margin-bottom: 92px; }
  .market-masthead { min-height: 0; padding-block: 28px; }
  .market-masthead img { height: 180px; }
  .photo-panel .full-btn { margin-bottom: 8px; }
  .inventory-row > *::before, .order-row > *::before { font-size: 10px; }
  .candidate-card { gap: 10px; }
  .candidate-card small { display: block; margin-top: 4px; }
}