/* Shared visual hierarchy for the consumer app and both PC portals. */
:root {
  --xx-ink: #182f25;
  --xx-body: #324d3e;
  --xx-muted: #5a6e61;
  --xx-brand: #145c40;
  --xx-line: #d8e3dc;
  --xx-paper: #f5f8f6;
  --ink: #182f25;
  --green: #18583e;
  --muted: #5a6e61;
  --paper: #f5f8f6;
  --line: #d8e3dc;
}
body {
  font-family: "Microsoft YaHei UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
input::placeholder, textarea::placeholder { color: #687b6f; opacity: 1; }

/* The white surface and deeper text replace the previous pale grey wash. */
.shop-body { background: #edf3ef; color: var(--xx-ink); }
.shop-shell { background: #f7faf8; box-shadow: 0 0 40px #173d2910; }
.shop-body header { background: #fff; border-bottom-color: var(--xx-line); }
.shop-body header b { color: #153d2a; font-weight: 800; }
.shop-mark { background: #145c40; color: #e3f98d; }
.shop-hero { background: linear-gradient(125deg, #124a35, #176043); }
.shop-hero h1 { font-weight: 800; }
.shop-hero p { color: #e0efe5; }
.shop-search { border-color: #d1dfd6; box-shadow: 0 2px 8px #224c3310; }
.shop-search input { color: var(--xx-ink); }
.shop-search button { color: var(--xx-brand); font-weight: 700; }
.shop-heading h2, .shop-card h3 { color: #172f23; font-weight: 800; }
.shop-heading span, .shop-hot-label small, .shop-popular-note { color: var(--xx-muted); }
.shop-categories button { color: #425b4b; border-color: #d4e0d8; font-weight: 500; }
.shop-categories button.active { background: var(--xx-brand); border-color: var(--xx-brand); color: #fff; font-weight: 700; }
.shop-hot-label b { color: #244c34; font-weight: 700; }
.shop-hot-terms button { color: #355d43; border-color: #d4e1d6; }
.shop-hot-terms i { color: #526f5c; }
.shop-popular { background: linear-gradient(120deg, #eaf5e9, #f8fcf7); border-color: #d2e2d3; }
.shop-popular .shop-heading button { color: #265b38; font-weight: 600; }
.shop-popular-card, .shop-card, .shop-product {
  background: #fff;
  border-color: #d9e4dc;
  box-shadow: 0 3px 12px #24493206;
}
.shop-popular-card > small, .shop-popular-card > span:last-child { color: #526d58; }
.shop-popular-card > b, .shop-product h3 { color: #1a3225; font-weight: 700; }
.shop-popular-card > strong, .shop-prices strong { color: #105c3a; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-badge { color: #205c39; border-color: #cfe1d1; background: #edf6e9; font-weight: 700; }
.shop-role { color: #48654f; font-weight: 600; }
.shop-sales { color: #526b59; font-weight: 500; }
.shop-prices small { color: #536b59; }
.shop-prices .box { color: #3a6148; font-weight: 600; }
.shop-toolbar button, .shop-toolbar select { color: #34563f; font-weight: 600; }
.shop-card p, .shop-highlights { color: #344d3b; }
.shop-card small, .shop-muted, .shop-empty { color: var(--xx-muted); }
.shop-body #shopContent label { color: #3e5a45; font-weight: 600; }
.shop-body #shopContent input, .shop-body #shopContent textarea, .shop-body #shopContent select { color: #24412e; font-weight: 400; }
.shop-card h2, .shop-detail-title { color: #172e22; font-weight: 800; }
.shop-detail-prices > div { background: #f0f8f2; border-color: #cfe1d3; }
.shop-detail-prices small { color: #46644e; font-weight: 600; }
.shop-detail-prices strong { color: #105c3a; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-detail-prices strong i { font-weight: 500; }
.shop-fulfill { border-color: #dce6de; }
.shop-fulfill b { color: #214832; font-weight: 700; }
.shop-fulfill small { color: #536c5b; }
.shop-code { background: #f2f7f3; border: 1px solid #dce7de; }
.shop-code small { color: #526c59; }
.shop-code b { color: #1c4530; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-code button { color: #1c5738; border-color: #c6dacb; font-weight: 600; }
.shop-row > span { color: #526a59; }
.shop-row > strong { color: #223d2b; font-weight: 600; }
.shop-supplier { background: #f1f8ef; border-color: #d0e2cc; color: #2b5635; }
.shop-supplier b { font-weight: 700; }
.shop-supplier small { color: #52704f; }
.shop-profile h2 { color: #173c28; font-weight: 800; }
.shop-profile small { color: #576d5d; }
.shop-services button { color: #284f35; font-weight: 600; background: #f5f9f3; border-color: #dce7d8; }
.shop-cart-line b, .shop-checkout-line b { color: #203e2b; font-weight: 700; }
.shop-total { color: #105c3a; font-weight: 800; }
.shop-body #shopNav { border-color: #d4e0d7; background: #fff; box-shadow: 0 -3px 14px #24493206; }
.shop-body #shopNav button { color: #5b7061; font-weight: 500; }
.shop-body #shopNav button.active { background: #eaf4eb; color: #105b38; font-weight: 700; }
.shop-detail-actions { border-color: #d2e0d5; box-shadow: 0 -3px 12px #24493208; }
.shop-detail-actions button { font-weight: 700; }
.shop-detail-actions button:not(.secondary) { background: var(--xx-brand); }
.shop-detail-actions button.secondary { color: #165737; border-color: #165737; }
.shop-modal { background: #fff; color: var(--xx-ink); }
.shop-modal h2 { color: #203d2a; font-weight: 800; }
.shop-modal label { color: #36553d; font-weight: 600; }
.shop-modal input, .shop-modal select, .shop-modal textarea { background: #fff; border-color: #c9dacd; color: #203a29; font-weight: 400; }
.shop-error, .shop-body .biz-status { color: #a13d2c; }

/* PC workspaces use the same green identity with clear, readable tables. */
.unified-console { background: #f4f7f5; color: #20382a; }
.unified-console > header { border-color: #dae5dd; box-shadow: 0 2px 12px #173d2905; }
.unified-console > header > b { color: #155536; font-weight: 800; }
.unified-console > header > span { color: #526a5a; font-weight: 500; }
.unified-console #nav { border-color: #dae5dc; box-shadow: 0 3px 14px #234a3005; }
.unified-console #nav .console-group { color: #536c5c; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.unified-console #nav button { color: #3f5848; font-weight: 500; }
.unified-console #nav button.active { background: #e6f2e9; color: #165a37; font-weight: 700; box-shadow: inset 3px 0 #257448; }
.unified-console #nav button:hover { color: #165a37; background: #edf6ef; }
.unified-console .panel { border-color: #dbe5de; box-shadow: 0 3px 16px #254a3105; }
.unified-console .panel h2, .unified-console .panel h3 { color: #213e2c; font-weight: 700; }
.unified-console .panel > p, .unified-console .item p { color: #3f5948; }
.unified-console label, .unified-console legend { color: #3e5a46; font-weight: 600; }
.unified-console input, .unified-console textarea, .unified-console select { background: #fff; border-color: #cddcd1; color: #223f2c; font-weight: 400; }
.unified-console button { font-weight: 600; }
.unified-console button:not(.secondary):not([data-page]):not([data-biz]):not([data-cloudop]) { background-color: #185c40; }
.unified-console .secondary { color: #235f3a; background: #eaf4e9; }
.unified-console .item b { color: #213d2b; font-weight: 700; }
.unified-console .item small, .unified-console td small { color: #5d7163; }
.unified-console th { background: #f1f6f2; color: #425e4b; font-weight: 700; border-color: #dbe5dd; }
.unified-console td { color: #344e3d; border-color: #e3ebe5; }
.unified-console .notice { color: #526334; background: #f3f7e9; }
.ft-page-heading h1 { color: #1c3a28; font-weight: 800; }
.ft-page-heading small { color: #53705e; font-weight: 600; letter-spacing: 1.5px; }
.ft-page-heading p { color: #5b7062; }
.ft-metrics > button { background: #fff; color: #284b34; border-color: #d8e4dc; box-shadow: 0 3px 12px #20462b05; }
.ft-metrics small { color: #526d5b; font-weight: 600; }
.ft-metrics strong { color: #155a37; font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-metrics span { color: #496f55; font-weight: 500; }
.ft-quick-grid button { background: #edf7ee; border-color: #cfe1d0; color: #28583a; }
.ft-quick-grid b, .ft-quick-grid strong { color: #245735; font-weight: 700; }
.ft-quick-grid span { color: #507254; }
.ft-section-title h2 { color: #25432f; font-weight: 700; }
.unified-console .ft-table th { color: #405e49; font-size: 12px; font-weight: 700; background: #eff5f0; }
.unified-console .ft-table td { color: #35513f; }
.unified-console .ft-table td > b { color: #243e2d; font-weight: 700; }
.unified-console .ft-table small { color: #5a7160; font-size: 11px; }
.ft-table .secondary { color: #1e6239; background: #e9f4e9; }
.ft-status { color: #52675a; background: #eef3ef; font-weight: 600; font-size: 11px; }
.ft-status.pending, .ft-status.accepted { color: #22623c; background: #e6f4e9; }
.ft-status.partial, .ft-status.shipped { color: #265e96; background: #eaf2fd; }
.ft-status.held, .ft-status.blocked, .ft-status.unassigned, .ft-status.awaiting_payment { color: #805419; background: #fff3d9; }
.ft-status.completed { color: #2c6540; background: #edf6ed; }
.ft-detail-head { background: #fff; border-color: #d8e4dc; }
.ft-detail-head b, .ft-delivery b { color: #274633; font-weight: 700; }
.ft-detail-head p, .ft-delivery small, .ft-package > small, .ft-package p > small, .ft-order-summary small, .ft-timeline small, .ft-muted { color: #5c7163; }
.ft-delivery { background: #f3f8f4; }
.ft-package { border-color: #dbe6de; }
.ft-order-summary b { color: #234631; font-weight: 700; }
.ft-timeline p { color: #4b6653; }
.ft-companies article { background: #f5faf5; border-color: #d5e3d6; }
.ft-companies b { color: #274932; font-weight: 700; }
.ft-companies p, .ft-companies span { color: #4d7354; }
.ft-empty { color: #617565; }
.ft-empty h3 { color: #395c42; font-weight: 700; }
.unified-console .cb-editor-intro, .unified-console .cb-section-heading p, .unified-console .cb-help, .unified-console .cb-variants-wrap p { color: #5d7163; }
.unified-console .cb-section-heading h3 { color: #254730; font-weight: 700; }
.unified-console .cb-section-heading > span { background: #e4f2e7; color: #286941; font-weight: 700; }
.unified-console .cb-product-section label { color: #3d5c46; font-weight: 600; }
.unified-console .cb-product-section input, .unified-console .cb-product-section textarea, .unified-console .cb-product-section select { color: #203d2a; border-color: #ccdbd0; font-weight: 400; }
.unified-console .cb-product-parameters { background: #f5f9f5; border-color: #e0e9e0; }
.unified-console .cb-upload { background: #fafdfa; border-color: #a9c8b0; }
.unified-console .cb-upload-toolbar > span { color: #4d6e57; font-weight: 600; }
.unified-console .cb-upload-toolbar .cb-upload-button { color: #fff; background: #185c40; font-weight: 600; }
.unified-console .cb-image-actions > small, .unified-console .cb-image-name { color: #586e5e; }
.unified-console .cb-upload-empty { color: #5c7463; }
.unified-console .cb-upload-empty strong { color: #345d40; font-weight: 700; }
.unified-console .cb-highlights > label { background: #f7faf7; border-color: #dde8df; }
.unified-console .cb-highlights b { color: #365c42; font-weight: 600; }
.unified-console .cb-highlight-number { color: #2b6640; background: #e5f2e7; font-weight: 700; }
.unified-console .cb-product-form > .cb-form-footer { background: #fff; border-color: #cedfd2; box-shadow: 0 5px 24px #234c3214; backdrop-filter: none; }

/* Shared account, service and settlement components. */
.biz-shell { color: #274330; }
.biz-card { border-color: #d9e5db; box-shadow: 0 3px 12px #234a3005; }
.biz-card h3, .biz-row > b { color: #24462f; font-weight: 700; }
.biz-card small, .biz-timeline small, .biz-muted { color: #5b705f; }
.biz-field { color: #405e47; font-weight: 600; }
.biz-field input, .biz-field textarea, .biz-field select { background: #fff; color: #274330; border-color: #cdddcf; font-weight: 400; }
.biz-metrics span { color: #4b6853; background: #eff7ee; }
.biz-metrics strong { color: #245c35; font-weight: 800; }
.biz-tabs button, .biz-button { color: #295e3b; border-color: #c9ddcd; font-weight: 600; }
.biz-tabs .active, .biz-button.primary { color: #fff; background: #185c40; border-color: #185c40; font-weight: 700; }
.unified-console .panel [role="alert"], .unified-console .panel [data-error], .unified-console .panel [data-ft-error], .shop-card .ui-form-error, .shop-body [data-cb-error] { color: #a13d2c; }

/* Existing local HTML demos receive the same visual treatment. */
.xx-legacy-shop { background: #edf3ef; }
.xx-legacy-shop .shell, .xx-legacy-shop #productPage, .xx-legacy-shop #supplierDirectoryPage { background: #f7faf8; }
.xx-legacy-shop .card, .xx-legacy-shop .srch-product, .xx-legacy-shop .sd-intro, .xx-legacy-shop .sd-products { background: #fff; border-color: #d5e2d7; box-shadow: 0 3px 12px #24493206; }
.xx-legacy-shop .prod-title, .xx-legacy-shop .srch-product h3, .xx-legacy-shop .sd-product-copy h3, .xx-legacy-shop .pd-primary .detail-title { color: #1d3828; font-weight: 800; }
.xx-legacy-shop .prod-sub, .xx-legacy-shop .section-head small, .xx-legacy-shop .delivery, .xx-legacy-shop .srch-meta, .xx-legacy-shop .pd-primary .detail-desc { color: #586d5c; }
.xx-legacy-shop .price, .xx-legacy-shop .srch-prices strong, .xx-legacy-shop .pd-primary .detail-price-grid strong { color: #155e3b; font-weight: 800; }
.xx-legacy-shop .sd-intro p, .xx-legacy-shop .sd-intro > small, .xx-legacy-shop .sd-product-copy p, .xx-legacy-shop .sd-product-copy small, .xx-legacy-shop .pd-primary .detail-price-grid > div > span, .xx-legacy-shop .pd-primary .detail-price-grid em { color: #526c58; }
.xx-legacy-console { background: #f4f7f5; color: #233d2d; }
.xx-legacy-console .merchant-nav > small, .xx-legacy-console .merchant-sidebar .sidebar-brand small, .xx-legacy-console .merchant-sidebar .sidebar-store small { color: #597260; font-weight: 600; }
.xx-legacy-console .merchant-nav button { color: #405e49; font-weight: 500; }
.xx-legacy-console .merchant-nav button.active { color: #1d6038; background: #e8f4e9; font-weight: 700; }
.xx-legacy-console th { color: #405e49; background: #f0f6f0; font-weight: 700; }
.xx-legacy-console td { color: #35523e; }
.xx-legacy-console label { color: #3f5c47; font-weight: 600; }
.xx-legacy-console input, .xx-legacy-console select, .xx-legacy-console textarea { color: #243e2c; font-weight: 400; }
.xx-legacy-supplier { background: #f5f8f6; color: #243f2e; }
.xx-legacy-supplier .brand small { color: #526f5b; font-weight: 500; }
.xx-legacy-supplier label, .xx-legacy-supplier legend { color: #3f5e47; font-weight: 600; }
.xx-legacy-supplier input, .xx-legacy-supplier textarea, .xx-legacy-supplier select { color: #263f2e; font-weight: 400; }

@media (hover: hover) {
  .shop-product:hover, .shop-popular-card:hover { border-color: #a9c9b0; box-shadow: 0 5px 18px #234b3210; }
  .ft-metrics > button:hover { border-color: #adcbb4; }
}