/* Promoter surface: shares the life channel's cream/teal/gold vocabulary with the
   consumer pages; commissions dashboard gets a gold accent. Scoped to this view only. */
.commerce-promoter{--paper:#f6f4ef;--ink:#193d37;color:var(--ink)}
.commerce-promoter .app,.commerce-promoter .scr{background:var(--paper)}
.commerce-promoter [hidden]{display:none!important}
/* ── 顶栏 ── */
.commerce-promoter .appbar{flex-shrink:0;padding:13px 18px;background:var(--paper);border-bottom:1px solid #193d370a;gap:11px}
.commerce-promoter .bk{background:#fff9;border:1px solid #193d370d;color:var(--ink);font-size:25px}
.commerce-promoter .ttl{font-size:18px;letter-spacing:.04em;min-width:0;flex:1}
.commerce-promoter .ttl small{font-size:10px;letter-spacing:.04em;color:#737c70;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promoter-account{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:8px;min-width:0}
.promoter-account span{font-size:11px;color:#737c70;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promoter-account button{background:transparent;border:1px solid #193d3726;border-radius:20px;color:var(--brand-deep);padding:8px 14px;font-size:12px;flex-shrink:0}
/* ── 滚动区 ── */
.commerce-promoter .scr{padding:0;overscroll-behavior:contain}
.commerce-promoter .commerce-content{padding:16px 18px 8px;gap:14px}
.commerce-promoter #commerce-status:not(:empty){margin:12px 18px 0}
.promoter-loading{text-align:center;color:#737c70;font-size:12px;padding:44px 18px;border-radius:16px}
/* ── 卡片底版 ── */
.commerce-promoter .commerce-card{border-color:#193d370c;border-radius:16px;box-shadow:0 4px 16px #233c3103}
.commerce-promoter .commerce-card h2,.commerce-promoter .commerce-card h3{color:var(--ink)}
.commerce-promoter .commerce-card p{font-size:12px;color:#6c7967}
/* ── 推广封面 hero ── */
.commerce-promoter .commerce-hero{position:relative;isolation:isolate;overflow:hidden;border:0;padding:24px 20px;color:#fff;background:linear-gradient(135deg,#14594f,#0b3d36 55%,#0e2f2a)}
.commerce-promoter .commerce-hero::after{content:"";position:absolute;right:-42px;top:-42px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#d6ab674a,transparent 68%)}
.commerce-promoter .commerce-hero .eyebrow{color:#f6f4efb3;margin-bottom:10px}
.commerce-promoter .commerce-hero h2{font:500 24px/1.4 var(--serif);letter-spacing:.04em;color:#fffcef;margin:0 0 8px}
.commerce-promoter .commerce-hero p{color:#fffce8b8;font-size:12px;line-height:1.8;margin:0}
/* ── 推广选品：紧凑决策卡（佣金比例 + 我的转化 + 筛选排序）── */
.promoter-controls{display:grid;gap:7px}
.promoter-row{display:flex;align-items:center;gap:9px;min-width:0}
.pr-label{flex-shrink:0;font-size:10px;color:#8a938a;letter-spacing:.08em}
.promoter-sort{display:flex;gap:7px;align-items:center;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent)}
.promoter-sort::-webkit-scrollbar{display:none}
.promoter-sort button{border:1px solid #193d3726;background:#fff9;border-radius:999px;padding:6px 13px;font-size:11px;color:#5c6a5f;cursor:pointer;flex-shrink:0}
.promoter-sort button[aria-pressed="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:#f4ead0}
.pf-sep{flex-shrink:0;width:1px;height:16px;background:#193d3720}
.promoter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* 2026-10-02 对齐电商紧凑卡：整卡可点（data-action 在 article），品类图标随 --cat-bg/--cat-fg（共享 _commerce.css 色板） */
.promoter-mini{display:flex;flex-direction:column;padding:12px 12px 11px;border-radius:14px;cursor:pointer}
.pm-top{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.pm-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--cat-bg,#e9eee5);color:var(--cat-fg,#446456);flex-shrink:0}
.pm-icon svg{width:20px;height:20px}
.pm-channel{background:#f3ecd9;color:#8a6a1f;border-radius:6px;padding:2px 7px;font-size:10px;flex-shrink:0}
.pm-icon+*{margin-left:auto}
.pm-rate{background:#f6ecd7;color:#8a6a1f;font-weight:700;border-radius:6px;padding:2px 7px;font-size:11px;flex-shrink:0}
.pm-rate.is-demo{background:#eef0ec;color:#737c70;font-weight:600}
.promoter-mini h3{font:600 13px/1.45 var(--serif);margin:0 0 8px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.pm-money{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pm-money .money{font:700 17px var(--serif);color:var(--gold-deep)}
.pm-comm{font-size:10px;color:#8a6a1f;background:#f6ecd7;border-radius:6px;padding:2px 6px}
.pm-comm.is-demo{color:#737c70;background:#eef0ec}
.pm-stats{margin:8px 0 10px;font-size:10px;color:#737c70;line-height:1.6}
.promoter-mini .btn{margin-top:auto;border-radius:10px;padding:8px 10px;font-size:11px;text-align:center}
/* ── 推广商品卡 ── */
.commerce-promoter .product-card{display:flex;flex-direction:column}
.commerce-promoter .product-card .commerce-badge{align-self:flex-start}
.commerce-promoter .product-card h2{font:600 16px/1.5 var(--serif);margin:4px 0 6px}
.commerce-promoter .product-card>p{margin:0 0 4px}
.commerce-promoter .product-benefits{margin:8px 0 12px}
.commerce-promoter .product-benefits span{background:#e9eee5;border:0;color:#446456;padding:5px 9px;font-size:10px;border-radius:8px}
.commerce-promoter .product-bottom{border-top:1px dashed #193d3714;padding-top:12px;margin-top:auto}
.commerce-promoter .product-bottom .money{font:700 24px var(--serif)}
.commerce-promoter .product-bottom .btn{border-radius:12px;padding:10px 16px;font-size:12px}
/* ── 推广记录看板 ── */
.commerce-promoter .commerce-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.commerce-promoter .commerce-kpi{background:#fff;border:1px solid #193d370f;border-radius:12px;padding:13px 14px;box-shadow:0 2px 10px #233c3105}
.commerce-promoter .commerce-kpi span{display:block;font-size:10px;letter-spacing:.05em;color:#737c70}
.commerce-promoter .commerce-kpi b{font:700 21px var(--serif);color:var(--brand-deep);margin:6px 0 0}
/* 金额链路（佣金→结算中→已到账）统一金色；量级指标保持青绿 */
.commerce-promoter .commerce-kpi:nth-child(3) b,.commerce-promoter .commerce-kpi:nth-child(5) b,.commerce-promoter .commerce-kpi:nth-child(6) b{color:var(--gold-deep)}
/* KPI 即入口：数字可点击，箭头暗示 + 按压反馈 */
button.commerce-kpi{cursor:pointer;text-align:left;font:inherit;width:100%;position:relative;transition:transform .12s}
button.commerce-kpi::after{content:"›";position:absolute;top:11px;right:12px;font-size:13px;color:#b3bab2}
button.commerce-kpi:active{transform:translateY(1px)}
button.commerce-kpi:focus-visible{outline:3px solid #d6ab67;outline-offset:2px}
/* ── 明细抽屉（details 默认收起）── */
.promoter-fold{padding:0;overflow:hidden}
.promoter-fold>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:15px 16px;cursor:pointer}
.promoter-fold>summary::-webkit-details-marker{display:none}
.promoter-fold>summary h2{margin:0;font-size:15px;flex:1}
.fold-count{font-size:10px;color:#737c70;background:#eef0ec;border-radius:999px;padding:2px 9px;flex-shrink:0}
.fold-arrow{font-style:normal;color:#8a938a;font-size:15px;transition:transform .15s;flex-shrink:0}
.promoter-fold[open]>summary .fold-arrow{transform:rotate(90deg)}
.promoter-fold[open]>summary{border-bottom:1px solid #193d370f}
.promoter-fold .fold-body{padding:2px 16px 14px}
/* 数据面板即时呈现：kpi-in 级联淡入会让 fullPage 截图/慢设备拍在 opacity:0 帧 */
.commerce-promoter .commerce-grid .commerce-kpi{animation:none}
.commerce-promoter .consumer-footnote{margin:10px 0 0;text-align:left;padding:0}
.commerce-promoter .commerce-card>p b{color:#ad4438}
/* ── 资格状态与明细列表 ── */
.promoter-qual{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#e9eee5;color:#446456;font-size:11px;line-height:1.7}
.promoter-qual.is-ok{background:#eaf3ec;color:#2f6a4f}
.promoter-qual.is-no{background:#fdf1ee;color:#ad4438}
.promoter-record{padding:12px 0;border-bottom:1px dashed #193d3714}
.promoter-record:last-child{border-bottom:0;padding-bottom:2px}
.promoter-record .pr-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.promoter-record .pr-top b{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.promoter-record .pr-top .money{font:700 16px var(--serif);color:var(--gold-deep);flex-shrink:0}
.promoter-record .pr-sub{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:5px;font-size:11px;color:#737c70}
.promoter-record .pr-sub em{font-style:normal;color:#737c70;flex-shrink:0}
.promoter-record .pr-sub em.is-run{color:var(--brand-deep)}
.promoter-record .pr-sub em.is-paid{color:var(--gold-deep)}
.promoter-record .pr-sub em.is-bad{color:#ad4438}
.promoter-record .commerce-badge{margin:0 6px 0 0;vertical-align:1px}
/* ── 底部跨端导航 ── */
.promoter-footer{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:16px 14px 26px;margin-top:6px}
.promoter-footer a{border:1px solid #193d3720;border-radius:999px;background:#fff9;padding:8px 15px;font-size:11px;color:#5c6a5f;text-decoration:none}
.promoter-footer a.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#f4ead0}
/* ── 底部页签（图标 + 文案）── */
.commerce-promoter .commerce-tabs{flex-shrink:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:8px 8px max(9px,env(safe-area-inset-bottom));border:0;border-top:1px solid #193d3710;background:#fffcf7;box-shadow:0 -4px 18px #16382c03;z-index:20}
.commerce-promoter .commerce-tabs button{border:0;border-radius:10px;padding:6px 2px;background:transparent;color:#889083;font-size:10px;line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.commerce-promoter .commerce-tabs button svg{width:22px;height:22px}
.commerce-promoter .commerce-tabs .on{color:var(--brand-deep);background:#e9eee5;font-weight:600}
/* ── 分享对话框 ── */
.commerce-promoter .commerce-dialog{max-width:430px;border-radius:20px;background:#fffef9}
.commerce-promoter #share-result textarea{font-size:11px;line-height:1.6;background:#f7f6f0;word-break:break-all}
.commerce-promoter #share-result .btn{margin-top:10px;border-radius:12px}
/* 分享链接二维码：面对面推广扫码即达 */
.commerce-promoter .share-qr{width:176px;margin:2px auto 12px;padding:9px;background:#fff;border:1px solid #e7e1d2;border-radius:12px;box-shadow:0 2px 10px #233c3108}
.commerce-promoter .share-qr svg{display:block;width:100%;height:auto}
.commerce-promoter #share-result{text-align:left}
.commerce-promoter .empty-mark{color:var(--brand-2)}
@media(max-width:359px){.commerce-promoter .commerce-content{padding-left:13px;padding-right:13px}.commerce-promoter .commerce-hero{padding:20px 16px}.commerce-promoter .commerce-hero h2{font-size:21px}.promoter-account span{display:none}}
@media(prefers-reduced-motion:reduce){.commerce-promoter *{scroll-behavior:auto!important;transition:none!important}}

/* ── 2026-10-02 美化轮：决策卡悬浮反馈（hover 设备生效，触屏不变） ── */
.promoter-mini{transition:transform .15s ease,box-shadow .15s ease}
@media(hover:hover){
 .promoter-mini:hover{transform:translateY(-2px);box-shadow:0 10px 24px #233c3112}
 .promoter-footer a{transition:border-color .15s ease,color .15s ease}
 .promoter-footer a:hover{border-color:var(--brand-deep);color:var(--brand-deep)}
}
@media(prefers-reduced-motion:reduce){.promoter-mini{transition:none}}