/* 统一界面过渡层（T-0364）：旧页面还没逐页改写成 u- 组件之前，先把旧的变量和最常见的旧组件（.btn / .input / 下拉 / 卡片 / 侧栏 / 标签）
   接到 ui.css 的令牌上，全站一次统一成舒展 + 电光紫的样子。这里不许写色值，只引用令牌。
   这个文件在 index.html 里最后加载（压过旧样式）；每迁完一批页面，就删掉这里对应的规则，直到这个文件删空。规矩见 docs/UI-SYSTEM.md。 */

/* ---------- 旧变量 → 新令牌 ---------- */
html:root,body.wb-mode,body.wb-mode.mc-mode{
  --primary:var(--u-primary);--primary-2:var(--u-primary-soft);--primary-ink:var(--u-primary-hover);
  --bg:var(--u-bg);--panel:var(--u-panel);--rail:var(--u-panel);--line:var(--u-line);--line-2:var(--u-line-soft);
  --text:var(--u-text);--text-2:var(--u-text-2);--text-3:var(--u-text-3);
  --ok:var(--u-ok);--ok-2:var(--u-ok-soft);--warn:var(--u-warn);--warn-2:var(--u-warn-soft);--danger:var(--u-danger);--danger-2:var(--u-danger-soft);
  --radius:var(--u-r);--font:var(--u-font);
  --mc-ink:var(--u-text);--mc-muted:var(--u-text-3);--mc-line:var(--u-line);--mc-accent:var(--u-primary);
}
body.wb-mode,body.wb-mode.mc-mode{background:var(--u-bg);color:var(--u-text);font:var(--u-fs)/1.6 var(--u-font)}
body.wb-mode :focus-visible{outline:none;box-shadow:0 0 0 3px var(--u-primary-ring)}
body.wb-mode a{color:var(--u-link)}

/* ---------- 侧栏：浅底、柔和选中块 ---------- */
body.wb-mode .rail,body.wb-mode.mc-mode .rail{background:var(--u-panel);border-right:1px solid var(--u-line-soft);padding:20px 12px 14px}
body.wb-mode .rail a,body.wb-mode .rail .wui-more summary{min-height:var(--u-menu-h);padding:10px 14px;border-radius:10px;color:var(--u-text-2);font-size:var(--u-fs-sm);font-weight:500}
body.wb-mode .rail a:hover,body.wb-mode .rail .wui-more summary:hover{background:var(--u-info-soft);color:var(--u-text)}
body.wb-mode .rail a.on{background:var(--u-primary-soft);color:var(--u-primary);font-weight:600}
body.wb-mode .rail a.wui-brand{color:var(--u-text);font-size:18px;font-weight:700;min-height:0}
body.wb-mode .rail a.wui-brand:hover{background:none}

/* ---------- 按钮：和 .u-btn 一样 ---------- */
body.wb-mode .btn{min-height:var(--u-h);height:auto;padding:0 var(--u-btn-px);border:1px solid var(--u-line);border-radius:var(--u-r);background:var(--u-panel);color:var(--u-text);font-size:var(--u-fs-sm);font-weight:500;box-shadow:var(--u-btn-shadow);gap:6px;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
body.wb-mode .btn:hover{background:var(--u-sunken);border-color:var(--u-line-strong);color:var(--u-text)}
body.wb-mode .btn:active{transform:translateY(1px)}
body.wb-mode .btn.primary{background:var(--u-primary);border-color:var(--u-primary);color:var(--u-on-primary);box-shadow:var(--u-btn-shadow),inset 0 1px 0 rgba(255,255,255,.18)}
body.wb-mode .btn.primary:hover{background:var(--u-primary-hover);border-color:var(--u-primary-hover);color:var(--u-on-primary)}
body.wb-mode .btn.danger{color:var(--u-danger);border-color:var(--u-line)}
body.wb-mode .btn.danger:hover{background:var(--u-danger-soft);border-color:var(--u-danger-line)}
body.wb-mode .btn.ok{color:var(--u-ok)}
body.wb-mode .btn.sm{min-height:30px;padding:0 12px;font-size:var(--u-fs-xs)}
body.wb-mode .btn:disabled,body.wb-mode .btn[disabled]{background:var(--u-sunken);border-color:var(--u-line-soft);color:var(--u-text-3);box-shadow:none;opacity:1;cursor:not-allowed}

/* ---------- 输入框和下拉 ---------- */
body.wb-mode .input,body.wb-mode select.input{min-height:var(--u-h);border:1px solid var(--u-line);border-radius:var(--u-r);background-color:var(--u-panel);color:var(--u-text);font-size:var(--u-fs-sm);padding:8px 12px;box-shadow:var(--u-btn-shadow);transition:border-color .12s,box-shadow .12s}
body.wb-mode .input:hover{border-color:var(--u-line-strong)}
body.wb-mode .input:focus{outline:none;border-color:var(--u-primary);box-shadow:0 0 0 3px var(--u-primary-ring)}
body.wb-mode .input::placeholder{color:var(--u-text-3)}
/* 下拉没法加外壳，用背景图画统一的细箭头（箭头图在 ui.css 的令牌里） */
body.wb-mode select.input,body.wb-mode .mc-brand select,body.wb-mode .u-select select{appearance:none;-webkit-appearance:none;background-image:var(--u-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px;cursor:pointer}
body.wb-mode .u-select::after{display:none}

/* ---------- 卡片和面板 ---------- */
body.wb-mode .card,body.wb-mode .mj-panel,body.wb-mode .mc-asset-card,body.wb-mode .wui-panel{background:var(--u-panel);border:1px solid var(--u-line-soft);border-radius:var(--u-r-lg);box-shadow:var(--u-shadow)}
body.wb-mode .wui-panel{padding:var(--u-pad)}
body.wb-mode .wui-page-heading h1{font-size:var(--u-fs-lg);font-weight:700;letter-spacing:-.01em}

/* ---------- 标签 ---------- */
body.wb-mode .chip,body.wb-mode .mc-chip,body.wb-mode .mc-tag{border-radius:var(--u-r-sm);background:var(--u-info-soft);color:var(--u-info);border:1px solid var(--u-info-line);font-size:var(--u-fs-xs)}

/* ---------- 品牌标：Amiao，品牌渐变 ---------- */
body.wb-mode .wui-logo{background:var(--u-brand-grad);color:var(--u-on-brand);box-shadow:var(--u-brand-glow);border-radius:var(--u-r)}
body.wb-mode .wui-brand small{letter-spacing:.04em;color:var(--u-text-3);font-weight:500;font-size:11px}

/* ---------- 商家设置：顶部分区代替左侧列表（T-0364） ---------- */
body.wb-mode .mc-settings.is-tabs{display:block;background:var(--u-panel);border:1px solid var(--u-line-soft);border-radius:var(--u-sheet-r);padding:var(--u-pad);box-shadow:var(--u-shadow)}
body.wb-mode .mc-settings.is-tabs .u-seg a{text-decoration:none}
body.wb-mode .mc-settings.is-tabs .mc-settings-body{padding:0;border:0;background:none;box-shadow:none}
body.wb-mode .mc-settings.is-tabs .mc-asset-card{padding:20px 24px;margin-top:16px}
body.wb-mode .mj-next .u-flow{margin-bottom:18px}
body.wb-mode .u-seg a{color:var(--u-text-2)}
body.wb-mode .u-seg a.is-active{color:var(--u-primary)}
body.wb-mode .mc-connect.u-inline-form{display:flex;align-items:center;gap:8px}
body.wb-mode .mc-connect.u-inline-form .btn{height:auto;flex:none}

/* ---------- 第二批（T-0365） ---------- */
/* 登录页品牌标 */
.login-card .logo{background:var(--u-brand-grad);color:var(--u-on-brand);box-shadow:var(--u-brand-glow)}
/* 商品流水线：七站换成 u-flow 后去掉旧的格子样式 */
body.wb-mode .u-flow.pl-stations{display:flex;grid-template-columns:none;margin:0 0 20px;padding:18px 8px 14px;background:var(--u-panel);border:1px solid var(--u-line-soft);border-radius:var(--u-r-lg)}
body.wb-mode .u-flow.pl-stations li{border:0;background:none;padding:2px 0 0;display:flex;border-radius:0;min-width:84px;white-space:nowrap}
body.wb-mode .u-flow.pl-stations li span{font-size:var(--u-fs-xs);color:inherit}
body.wb-mode .u-flow.pl-stations li.is-done span{color:var(--u-white)}
body.wb-mode .u-flow.pl-stations li.is-fail span{color:var(--u-white)}
/* 预览的手机 / 电脑切换：分段控件 */
body.wb-mode .pl-vp{display:inline-flex;padding:3px;border-radius:var(--u-r);background:var(--u-info-soft);gap:2px}
body.wb-mode .pl-vp button{border:0;background:none;padding:5px 12px;border-radius:calc(var(--u-r) - 3px);color:var(--u-text-2);font-size:var(--u-fs-xs);font-weight:500;cursor:pointer}
body.wb-mode .pl-vp button.on{background:var(--u-panel);color:var(--u-text);box-shadow:var(--u-btn-shadow)}
/* 指标卡 */
body.wb-mode .wui-metric.u-stat{gap:6px}
body.wb-mode .wui-metric.u-stat .u-stat-value{font-size:var(--u-fs-xl)}
/* 结果页的「近 7 天 / 近 30 天」：和预览切换同一种分段控件 */
body.wb-mode .mr-days{display:inline-flex;padding:3px;border-radius:var(--u-r);background:var(--u-info-soft);gap:2px;align-self:flex-start}
body.wb-mode .mr-days button{border:0;background:none;padding:6px 14px;border-radius:calc(var(--u-r) - 3px);color:var(--u-text-2);font-size:var(--u-fs-sm);font-weight:500;cursor:pointer;box-shadow:none}
body.wb-mode .mr-days button.on{background:var(--u-panel);color:var(--u-text);box-shadow:var(--u-btn-shadow)}
/* 待你确认整块放进一张卡片 */
body.wb-mode #wuiShopDecisions{background:var(--u-panel);border:1px solid var(--u-line-soft);border-radius:var(--u-sheet-r);padding:var(--u-pad);box-shadow:var(--u-shadow)}

/* ---------- 第三批：超管后台（T-0366）。superadmin.html 也加载本文件；超管页没有 body.wb-mode，选择器用 html 开头压过 superadmin.css ---------- */
html:root{--ok-bg:var(--u-ok-soft);--warn-bg:var(--u-warn-soft);--bad:var(--u-danger);--bad-bg:var(--u-danger-soft);--rail-text:var(--u-text-2)}
html body{background:var(--u-bg);color:var(--u-text);font:var(--u-fs)/1.6 var(--u-font)}
html .sa-main{padding:var(--u-main-pad) var(--u-main-pad) 60px}
html .sa-main h1{font-size:var(--u-fs-lg);font-weight:700;letter-spacing:-.01em}
html .sa-muted{color:var(--u-text-3);font-size:var(--u-fs-sm)}
/* 卡片 */
html .sa-card{background:var(--u-panel);border:1px solid var(--u-line-soft);border-radius:var(--u-r-lg);padding:var(--u-pad);box-shadow:var(--u-shadow);margin-bottom:var(--u-gap)}
html .sa-card h2{font-size:var(--u-fs-md);font-weight:600}
/* 按钮 */
html .sa-btn{min-height:var(--u-h);padding:0 var(--u-btn-px);border:1px solid var(--u-line);border-radius:var(--u-r);background:var(--u-panel);color:var(--u-text);font-size:var(--u-fs-sm);font-weight:500;box-shadow:var(--u-btn-shadow);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
html .sa-btn:hover{background:var(--u-sunken);border-color:var(--u-line-strong)}
html .sa-btn:active{transform:translateY(1px)}
html .sa-btn:focus-visible,html .sa-input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--u-primary-ring)}
html .sa-btn.primary{background:var(--u-primary);border-color:var(--u-primary);color:var(--u-on-primary);box-shadow:var(--u-btn-shadow),inset 0 1px 0 rgba(255,255,255,.18)}
html .sa-btn.primary:hover{background:var(--u-primary-hover);border-color:var(--u-primary-hover)}
html .sa-btn.danger{color:var(--u-danger)}
html .sa-btn.danger:hover{background:var(--u-danger-soft);border-color:var(--u-danger-line)}
html .sa-btn.sm{min-height:30px;padding:0 12px;font-size:var(--u-fs-xs)}
html .sa-btn:disabled{background:var(--u-sunken);border-color:var(--u-line-soft);color:var(--u-text-3);box-shadow:none;opacity:1;cursor:not-allowed}
/* 输入框和下拉 */
html .sa-input{min-height:var(--u-h);border:1px solid var(--u-line);border-radius:var(--u-r);padding:8px 12px;background-color:var(--u-panel);color:var(--u-text);font-size:var(--u-fs-sm);box-shadow:var(--u-btn-shadow);transition:border-color .12s,box-shadow .12s}
html .sa-input:hover{border-color:var(--u-line-strong)}
html .sa-input:focus{outline:none;border-color:var(--u-primary);box-shadow:0 0 0 3px var(--u-primary-ring)}
html select.sa-input{appearance:none;-webkit-appearance:none;background-image:var(--u-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px;cursor:pointer}
/* 表格：和 .u-table 一样 */
html .sa-table-wrap{border:1px solid var(--u-line-soft);border-radius:var(--u-r);overflow-x:auto}
html .sa-table{width:100%;border-collapse:collapse;font-size:var(--u-fs-sm)}
html .sa-table th{background:var(--u-sunken);color:var(--u-text-2);font-weight:500;font-size:var(--u-fs-sm);padding:11px 14px;border-bottom:1px solid var(--u-line);white-space:nowrap}
html .sa-table td{padding:12px 14px;border-bottom:1px solid var(--u-line-soft)}
html .sa-table tbody tr:hover td{background:var(--u-sunken)}
html .sa-table tr:last-child td{border-bottom:0}
/* 标签：和 .u-tag 一样（带圆点、浅底细边） */
html .sa-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--u-r-sm);font-size:var(--u-fs-xs);border:1px solid var(--u-info-line);background:var(--u-info-soft);color:var(--u-info)}
html .sa-tag.ok{color:var(--u-ok);background:var(--u-ok-soft);border-color:var(--u-ok-line)}
html .sa-tag.warn{color:var(--u-warn);background:var(--u-warn-soft);border-color:var(--u-warn-line)}
html .sa-tag.bad{color:var(--u-danger);background:var(--u-danger-soft);border-color:var(--u-danger-line)}
html .sa-tag.mid{color:var(--u-primary);background:var(--u-primary-soft);border-color:var(--u-primary-line)}
html .sa-tag.ok::before,html .sa-tag.warn::before,html .sa-tag.bad::before,html .sa-tag.mid::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* 页内分区：和 .u-seg 一样 */
html .bl-tabs{gap:var(--u-s5);border-bottom:1px solid var(--u-line);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
html .bl-tabs a{padding:10px 0;color:var(--u-text-2);white-space:nowrap;font-weight:400}
html .bl-tabs a:hover{color:var(--u-text)}
html .bl-tabs a.on{color:var(--u-primary);border-color:var(--u-primary);font-weight:500}
/* 工作台里的分区（超管各组标签、邮件标签）：和 .u-seg 一样 */
body.wb-mode .wui-tabs,body.wb-mode .wui-mail-tabs{gap:var(--u-s5);border-bottom:1px solid var(--u-line);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
body.wb-mode .wui-tabs a,body.wb-mode .wui-tabs button,body.wb-mode .wui-mail-tabs button{font-size:var(--u-fs-sm);color:var(--u-text-2);padding:10px 0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;background:none;font-weight:400}
body.wb-mode .wui-tabs a:hover,body.wb-mode .wui-tabs button:hover{color:var(--u-text)}
body.wb-mode .wui-tabs .on,body.wb-mode .wui-mail-tabs .on{color:var(--u-primary);border-color:var(--u-primary);font-weight:500}

/* ---------- 第四批：低频页（T-0367） ---------- */
/* 旧表格 .table：和 .u-table 一样（表头浅灰、行悬停、数字对齐交给各页） */
body.wb-mode .table{width:100%;border-collapse:separate;border-spacing:0;background:var(--u-panel);font-size:var(--u-fs-sm)}
body.wb-mode .table th{background:var(--u-sunken);color:var(--u-text-2);font-weight:500;font-size:var(--u-fs-sm);padding:11px 14px;border-bottom:1px solid var(--u-line);white-space:nowrap}
body.wb-mode .table td{padding:12px 14px;border-bottom:1px solid var(--u-line-soft);color:var(--u-text)}
body.wb-mode .table tbody tr:hover td,body.wb-mode .table tr:hover td{background:var(--u-sunken)}
body.wb-mode .table tr:last-child td{border-bottom:0}
body.wb-mode .table.card{border:1px solid var(--u-line-soft);border-radius:var(--u-r-lg);overflow:hidden;padding:0}
body.wb-mode .table.card th:first-child{border-top-left-radius:var(--u-r-lg)}
body.wb-mode .table.card th:last-child{border-top-right-radius:var(--u-r-lg)}
/* 旧分区 .tabs：和 .u-seg 一样 */
body.wb-mode .tabs{gap:var(--u-s5);border-bottom:1px solid var(--u-line);background:none;padding:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
body.wb-mode .tabs button,body.wb-mode .tabs a{height:auto;padding:10px 0;color:var(--u-text-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-size:var(--u-fs-sm);font-weight:400;background:none}
body.wb-mode .tabs button:hover,body.wb-mode .tabs a:hover{color:var(--u-text)}
body.wb-mode .tabs button.on,body.wb-mode .tabs a.on{color:var(--u-primary);border-color:var(--u-primary);font-weight:500}
/* 旧空状态 .empty：和 UI.state("empty") 一样（图标 + 一句话） */
body.wb-mode .empty{padding:36px 16px;text-align:center;color:var(--u-text-3);font-size:var(--u-fs-sm)}
body.wb-mode .empty::before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;background:var(--u-line-strong);-webkit-mask:var(--u-ico-inbox) center/contain no-repeat;mask:var(--u-ico-inbox) center/contain no-repeat}
/* 旧的「灰字」说明统一成三档文字色里的第三档 */
body.wb-mode .muted{color:var(--u-text-3)}