/* 百分比商城视觉变量 V1.2（2026-10-22 真实商城用户端现状对照）
 * 依据：百分比商城视觉规范.md；9 张目标视觉图 + 17 张真实商城用户端截图。
 * 非生产官方品牌 Design System；正式商城源码、组件库与 PRD 优先。
 * 后台现用 bp-admin-*；真实商城用户端观察色仅供 bp-mall-ui 显式选择，不全局染色。
 * #15964a 对白约 3.82:1，不适合普通白字小字号；主 CTA 深绿 #0d7839 对白约 5.58:1。 */
:root {
 --bp-brand:#15964a;
 --bp-brand-action:#0d7839;
 --bp-brand-deep:#205c3a;
 --bp-brand-soft:#eaf8f0;
 --bp-brand-border:#c7e8d2;
 --bp-page:#f5f8fa;
 --bp-surface:#ffffff;
 --bp-surface-subtle:#f9fbfc;
 --bp-ink:#19262b;
 --bp-muted:#586b79;
 --bp-border:#e3e9ec;
 --bp-price:#19262b; /* 通用正文价：真实商城首页普通商品价可用深色，交易强调价独立处理 */
 --bp-price-promo:#0d7839; /* 目标母版中的绿色强调价；现有商城用户端交易实付价可选 bp-transaction-price 红色 */
 --bp-discount:#0d7839; /* 优惠金额（不是系统错误／风险提示） */
 --bp-price-risk:#ce372d; /* 可选的风险/正式品牌红色语义 */
 --bp-danger:#c42e30;
 --bp-warning:#a65d15;
 --bp-radius-input:8px;
 --bp-radius-card:12px;
 --bp-radius-pill:999px;
 --bp-shadow-card:0 4px 20px rgba(29,63,46,.045);
 --bp-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
.bp-ui {background:var(--bp-page);color:var(--bp-ink);font:14px/1.6 var(--bp-font);}
.bp-ui *, .bp-ui *::before, .bp-ui *::after {box-sizing:border-box;}
.bp-title {margin:0 0 12px;font:700 26px/1.4 var(--bp-font);}
.bp-section-title {margin:0 0 16px;font:650 17px/1.5 var(--bp-font);}
.bp-help {color:var(--bp-muted);font:12px/1.7 var(--bp-font);}
.bp-card {min-width:0;padding:20px 24px;background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--bp-radius-card);box-shadow:var(--bp-shadow-card);}
.bp-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;color:var(--bp-brand-action);border:1px solid #cddde4;border-radius:var(--bp-radius-input);background:#fff;font:600 13px/1.5 var(--bp-font);cursor:pointer;}
.bp-button--primary {color:#fff;border-color:var(--bp-brand-action);background:var(--bp-brand-action);}
.bp-button--danger {color:var(--bp-danger);border-color:#edcfcf;}
.bp-button:disabled {opacity:.52;cursor:not-allowed;}
.bp-ui :is(.bp-button,.bp-input,.bp-select):focus-visible {outline:3px solid #9fd5b0;outline-offset:2px;}
.bp-input, .bp-select {min-height:40px;max-width:100%;width:100%;padding:8px 12px;border:1px solid #d8e2e7;border-radius:var(--bp-radius-input);color:var(--bp-ink);background:#fff;font:13px/1.6 var(--bp-font);}
.bp-table-wrap {max-width:100%;overflow-x:auto;}
.bp-table {width:100%;border-collapse:collapse;text-align:left;font:13px/1.6 var(--bp-font);}
.bp-table th, .bp-table td {padding:12px 14px;border-bottom:1px solid var(--bp-border);}
.bp-table th {white-space:nowrap;color:var(--bp-muted);background:var(--bp-surface-subtle);font-weight:600;}
.bp-tag {display:inline-flex;gap:4px;align-items:center;padding:3px 9px;border-radius:6px;color:#52616a;background:#eef2f4;font:600 12px/1.5 var(--bp-font);}
.bp-tag--success {color:#187445;background:#e7f7eb;}
.bp-tag--warning {color:var(--bp-warning);background:#fff2e1;}
.bp-tag--error {color:var(--bp-danger);background:#fff0ed;}
.bp-price {color:var(--bp-price);font-weight:700;font-variant-numeric:tabular-nums;}
.bp-price--promo {color:var(--bp-price-promo);}
.bp-price--discount {color:var(--bp-discount);}
.bp-price--risk {color:var(--bp-price-risk);}
.bp-original-price {color:var(--bp-muted);text-decoration:line-through;font-variant-numeric:tabular-nums;}

/* 真实商城用户端现状配色，仅显式套 .bp-mall-ui 时可采用。
 * 近似采样色，并非蓝湖官方设计 token；请勿覆盖后台或直接改掉既有品牌变量。
 * 亮黄绿可用于背景或暗字装饰，不直接配小号白字作为按钮。 */
.bp-mall-ui {--bp-live-lime:#70d020;--bp-live-price:#f02820;--bp-live-installment:#ff7b2b;}
.bp-mall-ui .bp-transaction-price{color:var(--bp-live-price);font-variant-numeric:tabular-nums;font-weight:700}
.bp-mall-ui .bp-installment-accent{color:var(--bp-live-installment)}
.bp-mall-ui .bp-accent-surface{background:var(--bp-live-lime);color:var(--bp-ink)}
.bp-mobile-cta {min-height:44px;padding:9px 22px;border:0;border-radius:var(--bp-radius-pill);color:#fff;background:var(--bp-brand-action);font:650 14px/1.5 var(--bp-font);}
@media(prefers-reduced-motion:reduce){.bp-ui *{scroll-behavior:auto!important;transition-duration:.01ms!important;}}


/* ===== 后台三类典型页面的可复用布局/组件基线 V1.2 =====
 * 仅 .bp-admin-* 作用域；复制/接入至项目时保留语义类名。
 * 页面字段/菜单/指标/步骤取自项目业务，不由这里强制生成。
 * 下列类名是可执行组件契约：壳层、标题、筛选、表格、配置、详情。
 */
.bp-admin-shell{--bp-admin-line:#e5ece8;--bp-admin-light:#f6f9f8;--bp-admin-control-h:38px;color:var(--bp-ink);background:var(--bp-page);font:14px/1.55 var(--bp-font);min-width:0}
.bp-admin-shell .bp-admin-sidebar{background:#fff;border-right:1px solid var(--bp-admin-line)}
.bp-admin-shell .bp-admin-main{min-width:0;background:var(--bp-page)}
.bp-admin-shell .bp-admin-topbar{min-height:54px;background:#fff;border-bottom:1px solid var(--bp-admin-line)}
.bp-admin-shell .bp-admin-page{min-width:0;width:100%;padding:20px clamp(16px,2vw,28px) 32px}
.bp-admin-shell .bp-admin-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 17px}
.bp-admin-shell .bp-admin-pagehead h1{margin:0;font-size:26px;line-height:1.4;letter-spacing:-.025em;color:#192b25}
.bp-admin-shell .bp-admin-pagehead p{margin:5px 0 0;color:#63766c;font-size:12px;line-height:1.6}
.bp-admin-shell .bp-admin-pagehead .heading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;min-width:0}
.bp-admin-shell .bp-admin-panel{min-width:0;overflow:hidden;background:#fff;border:1px solid var(--bp-admin-line);border-radius:13px;box-shadow:0 6px 20px rgba(25,55,36,.032)}
.bp-admin-shell .bp-admin-filterbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 16px;margin:0;background:#fff;border-bottom:1px solid var(--bp-admin-line);min-height:69px}
.bp-admin-shell .bp-admin-filterbar label{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:10px;font-size:12px;line-height:1.4;color:#566b62;font-weight:500;white-space:nowrap;margin:0}
.bp-admin-shell .bp-admin-filterbar :is(input,select){height:var(--bp-admin-control-h);min-height:var(--bp-admin-control-h);max-width:100%;width:240px;padding:7px 12px;border:1px solid #d8e4dd;border-radius:8px;background:#fff;color:var(--bp-ink);font-size:13px;outline-offset:2px}
.bp-admin-shell .bp-admin-filterbar :is(button,.btn){height:var(--bp-admin-control-h);min-height:var(--bp-admin-control-h);padding:7px 15px;font-size:12px;border-radius:8px}
.bp-admin-shell .bp-admin-tabstrip{display:flex;align-items:center;gap:20px;min-height:49px;padding:0 18px;border-bottom:1px solid var(--bp-admin-line);background:#fff;overflow-x:auto}
.bp-admin-shell .bp-admin-tabstrip>button{flex:0 0 auto;min-height:49px;padding:0 0 1px;font-size:13px;white-space:nowrap;border-bottom:2px solid transparent}
.bp-admin-shell .bp-admin-tabstrip>button.active{border-bottom-color:var(--bp-brand-action);color:var(--bp-brand-action);font-weight:700}
.bp-admin-shell .bp-admin-table{width:100%;min-width:0;overflow-x:auto}
.bp-admin-shell .bp-admin-table table{width:100%;border-collapse:collapse;table-layout:auto}
.bp-admin-shell .bp-admin-table th{background:#f7f9fa;color:#5c6f69;font-size:12px;font-weight:600;padding:11px 16px;white-space:nowrap;text-align:left;border-bottom:1px solid var(--bp-admin-line)}
.bp-admin-shell .bp-admin-table td{padding:14px 16px;font-size:13px;line-height:1.5;color:#283b33;vertical-align:middle;border-bottom:1px solid #eef1ef}
.bp-admin-shell .bp-admin-table tbody tr:last-child td{border-bottom:0}
.bp-admin-shell .bp-admin-table tbody tr:hover{background:#fafdfa}
.bp-admin-shell .bp-admin-table td small{display:block;margin-top:4px;color:#7a8981;font-size:11px;line-height:1.5}
.bp-admin-shell .bp-admin-table .entity-name{font-weight:650;color:#1e3128;font-size:13px;text-decoration:none}
.bp-admin-shell .bp-admin-table .actions-cell{white-space:nowrap}
.bp-admin-shell .bp-admin-table .actions-cell :is(a,button){display:inline-block;vertical-align:middle;margin:0 8px 0 0;color:var(--bp-brand-action);font-size:12px;font-weight:600}
.bp-admin-shell .bp-admin-tabstrip span{font-size:11px}
.bp-admin-shell .bp-admin-table-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;min-height:42px;padding:10px 16px;color:#76867c;font-size:11px;border-top:1px solid var(--bp-admin-line)}
.bp-admin-shell .bp-admin-thumbs{display:flex;align-items:center;gap:0;padding-left:4px;min-height:43px}
.bp-admin-shell .bp-admin-thumbs .product-art{width:41px;height:41px;flex:0 0 41px;object-fit:cover;border-radius:8px;border:2px solid #fff!important;margin-left:-5px;background:#f4f8f4}
.bp-admin-shell .bp-admin-edit{border-radius:13px;background:#fff;box-shadow:0 6px 20px rgba(25,55,36,.032);border:1px solid var(--bp-admin-line)}
.bp-admin-shell .bp-admin-edit-tabs{display:flex;gap:18px;min-height:53px;padding:0 20px;border-bottom:1px solid var(--bp-admin-line);background:#fff}
.bp-admin-shell .bp-admin-edit-tabs button{font-size:13px;font-weight:500;padding:0 4px;border-bottom:2px solid transparent}
.bp-admin-shell .bp-admin-edit-tabs button.active{color:var(--bp-brand-action);border-bottom-color:var(--bp-brand-action);font-weight:700}
.bp-admin-shell .bp-admin-edit-content{padding:20px clamp(18px,2.2vw,32px);min-width:0}
.bp-admin-shell .bp-admin-edit-content :is(h2,h3){color:#21382b}
.bp-admin-shell .bp-admin-edit-content .form-fields{display:grid;grid-template-columns:minmax(0,780px);gap:20px}
.bp-admin-shell .bp-admin-edit-content .field{max-width:100%}
.bp-admin-shell .bp-admin-edit-content :is(input,textarea,select){border-color:#dce6e0;border-radius:8px}
.bp-admin-shell .bp-admin-edit-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 20px;border-top:1px solid var(--bp-admin-line);background:#fff}
.bp-admin-shell .bp-admin-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 17px}
.bp-admin-shell .bp-admin-detail-stats>div{min-width:0;padding:16px 18px;min-height:91px;border:1px solid var(--bp-admin-line);border-radius:12px;background:#fff}
.bp-admin-shell .bp-admin-detail-stats span{display:block;font-size:12px;color:#73827a}
.bp-admin-shell .bp-admin-detail-stats b{font-size:25px;line-height:1.3;color:#1e3127}
.bp-admin-shell .bp-admin-detail-stats b small{font-size:12px;font-weight:450;margin-left:5px}
.bp-admin-shell .bp-admin-details-panel{min-width:0}
.bp-admin-shell .bp-admin-details-panel .detail-fields{padding:20px 24px}
.bp-admin-shell .bp-admin-details-panel .detail-fields dt{font-size:12px;color:#6b7e73}
.bp-admin-shell .bp-admin-details-panel .detail-fields dd{font-size:13px;color:#20352a}
@media(max-width:1150px){.bp-admin-shell .bp-admin-page{padding:18px 16px 28px}.bp-admin-shell .bp-admin-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-admin-shell .bp-admin-filterbar label{white-space:normal}}
@media(max-width:750px){.bp-admin-shell .bp-admin-pagehead{align-items:flex-start}.bp-admin-shell .bp-admin-pagehead h1{font-size:22px}.bp-admin-shell .bp-admin-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-admin-shell .bp-admin-edit-content{padding:16px}.bp-admin-shell .bp-admin-filterbar{gap:8px}.bp-admin-shell .bp-admin-filterbar label{flex-wrap:wrap}.bp-admin-shell .bp-admin-filterbar label input{width:100%}}


/* 详情页与通用页签：修正多层卡片边框、按钮态污染（V1.2 共用基线补充） */
.bp-admin-shell .bp-admin-detail-stats{padding:0;border:0;background:transparent;box-shadow:none}
.bp-admin-shell .bp-admin-detail-stats>div{box-shadow:0 5px 15px rgba(25,55,36,.028)}
.bp-admin-shell .bp-admin-tabstrip>button{border:0!important;border-bottom:2px solid transparent!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0 2px!important;min-height:49px!important;color:#617168!important}
.bp-admin-shell .bp-admin-tabstrip>button:hover{color:var(--bp-brand-action)!important}
.bp-admin-shell .bp-admin-tabstrip>button.active{color:var(--bp-brand-action)!important;border-bottom:2px solid var(--bp-brand-action)!important;font-weight:700!important}