/* ==========================================================

   工作台外壳样式（截图风格窄侧边栏）

   —— 基础组件（卡片/表格/按钮/弹窗）仍由 _theme.css 提供

   ========================================================== */

:root{

  --wb-sidebar:#fff;

  --wb-bg:#f5f3ef;

  --wb-text:#232019;

  --wb-muted:#6b645a;

  --wb-line:#e6e2d9;

  --wb-green:#6b5133;

  --wb-green-bg:#eae8e0;

}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;

  background:var(--wb-bg); color:var(--wb-text); -webkit-font-smoothing:antialiased; }

.hidden{ display:none !important; }



/* ---------- 登录（Apple 浅色风：苹果灰底 + 磨砂卡片 + 系统蓝点缀） ---------- */

.wb-login{ min-height:100vh; display:flex; align-items:center; justify-content:center;

  background:

    radial-gradient(1100px 620px at 18% -12%, #ebe8e1 0%, rgba(245,239,230,0) 62%),

    radial-gradient(900px 520px at 100% 0%, #eeebe4 0%, rgba(236,233,226,0) 58%),

    linear-gradient(180deg, #fbfcfd 0%, #f2f3f7 100%); }

.wb-login-box{ background:rgba(255,255,255,.82);

  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);

  border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:40px; width:360px;

  box-shadow:0 1px 2px rgba(35,32,25,.04), 0 12px 32px -8px rgba(35,32,25,.10),

             0 32px 64px -24px rgba(35,32,25,.14); }

.wb-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px; }

.wb-brand img{ width:38px; height:38px; border-radius:9px; background:#fff; padding:2px;

  box-shadow:0 1px 3px rgba(35,32,25,.06); }

.wb-brand h1{ font-size:20px; font-weight:600; letter-spacing:.4px; color:#232019; }

.wb-login-box input{ width:100%; height:46px; border:1px solid rgba(0,0,0,.08); border-radius:12px;

  padding:0 14px; margin-bottom:14px; font-size:14px; outline:none; color:#232019;

  background:rgba(255,255,255,.9);

  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }

.wb-login-box input::placeholder{ color:#a19a8e; }

.wb-login-box input:focus{ border-color:#8a6a45; background:#fff;

  box-shadow:0 0 0 3px rgba(138,106,69,.14); }

.wb-login-btn{ width:100%; height:46px; background:#8a6a45; color:#fff;

  border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; letter-spacing:3px;

  box-shadow:0 4px 14px -2px rgba(138,106,69,.35);

  transition:background .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }

.wb-login-btn:hover{ background:#9c7a52; box-shadow:0 8px 20px -4px rgba(138,106,69,.42);

  transform:translateY(-1px); }

.wb-login-btn:active{ background:#8a6a45; transform:translateY(0);

  box-shadow:0 2px 8px -2px rgba(138,106,69,.35); }

.wb-login-box .err{ color:#d93025; font-size:13px; margin-bottom:12px; text-align:center; }



/* ---------- 布局 ---------- */

.wb-layout{ display:flex; height:100vh; overflow:hidden; }

.wb-sidebar{ width:92px; background:var(--wb-sidebar); border-right:1px solid var(--wb-line);

  flex-shrink:0; display:flex; flex-direction:column; align-items:center;

  padding:18px 8px 12px; gap:14px; overflow-y:auto; }

.wb-avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff;

  flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.06); }

.wb-avatar img{ width:100%; height:100%; object-fit:contain; }

.wb-nav{ display:flex; flex-direction:column; gap:4px; width:100%; }

.wb-bottom{ margin-top:auto; width:100%; border-top:1px solid #f5f3ef; padding-top:8px;

  display:flex; flex-direction:column; gap:4px; }

.wb-navitem{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;

  padding:10px 2px; border-radius:14px; cursor:pointer; color:var(--wb-muted); font-size:12px;

  font-weight:500; border:none; background:transparent; transition:.18s; font-family:inherit; }

.wb-navitem:hover{ background:#f5f3ef; color:var(--wb-text); }

.wb-navitem.active{ background:var(--wb-green-bg); color:var(--wb-green); }

.wb-navitem svg{ width:22px; height:22px; }

.wb-navitem span{ white-space:nowrap; }



.wb-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.wb-topbar{ height:60px; background:#fff; border-bottom:1px solid var(--wb-line); flex-shrink:0;

  display:flex; align-items:center; justify-content:space-between; padding:0 24px; gap:16px; }

.wb-topbar h2{ font-size:17px; font-weight:700; white-space:nowrap; }

.wb-topbar-right{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--wb-muted); }

.wb-user{ font-weight:600; color:var(--wb-text); }

.wb-lang{ height:30px; border:1px solid var(--wb-line); border-radius:8px; padding:0 6px;

  font-size:12px; background:#fff; color:var(--wb-text); outline:none; }

.wb-ghost{ height:30px; padding:0 12px; border:1px solid var(--wb-line); border-radius:8px;

  background:#fff; color:var(--wb-text); font-size:12px; cursor:pointer; transition:.18s; }

.wb-ghost:hover{ background:#f5f3ef; }

.wb-content{ flex:1; overflow:auto; padding:22px 24px 40px; }



/* ---------- 修正 _theme.css 与外壳的冲突 ----------

   _theme.css 的表头 sticky(top:73px) 和 .card 上边距

   是为旧版 index.html 的置顶大标题预留的，这里改为内容区内聚 */

.wb-content thead th{ position:static; }

.wb-content .card{ margin:0 0 16px; }

.wb-content .stat-grid{ margin:0 0 16px; }

.wb-content .subtabs{ margin:0 0 16px; }

.wb-content .toolbar{ margin:0 0 16px; }

.wb-content .tab-panel > h2{ display:none; }



/* ---------- 商品模块 · 板块标识条（阶段九） ----------

   两个板块（茶叶茶具 / 茶席茶服）共用一份商品面板 DOM，

   切二级 TAB 时靠这条说明让人一眼看出「现在在哪、走什么链路」，

   它替代了原来那个「业务板块」下拉框（已删除，状态源统一收敛到二级 TAB）。 */

.biz-head{ display:flex; align-items:center; gap:9px; padding:11px 15px;

  margin:0 0 16px; background:#fff; border:1px solid var(--wb-line); border-radius:14px;

  box-shadow:0 1px 2px rgba(35,32,25,.04); }

.biz-head .bh-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:#8a6a45; }

.biz-head .bh-dot[data-biz="tea"]{ background:#8a6a45; }

.biz-head .bh-dot[data-biz="wear"]{ background:#93794f; }

.biz-head .bh-dot[data-biz="vegan"]{ background:#6b5133; }

.biz-head .bh-name{ font-size:15px; font-weight:600; color:#232019; white-space:nowrap; }

.biz-head .bh-desc{ font-size:12.5px; color:var(--wb-muted); line-height:1.5; }

/* 弹窗里的一行板块说明（商品板块提示 / 分类板块提示） */

.form-hint{ font-size:12.5px; color:#6b645a; line-height:1.6;

  margin:-4px 0 12px; padding:8px 11px; background:#f5f3ef; border-radius:9px; }

/* 商品分类页的「分类板块」次级选择器：

   和顶部二级 TAB 是同样两个板块名，若长得一模一样会让人分不清层级 ——

   这里改用更小的内嵌胶囊 + 「分类板块」前缀标签，视觉上明确是「挑一个板块看它的分类」。 */

.biz-seg-row{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; flex-wrap:wrap; }

.biz-seg-label{ font-size:12.5px; color:#8b8478; white-space:nowrap; }

.subtabs.biz-seg{ margin:0; padding:3px; gap:2px; background:#ece9e2;

  box-shadow:inset 0 1px 2px rgba(35,32,25,.05); }

.subtabs.biz-seg .subtab{ padding:6px 13px; font-size:12.5px; border-radius:999px; }

.subtabs.biz-seg .subtab.active{ color:#8a6a45; box-shadow:0 1px 3px rgba(35,32,25,.13); }

@media (max-width: 900px){

  .biz-head{ flex-wrap:wrap; gap:3px 8px; padding:11px 13px; }

  .biz-head .bh-desc{ width:100%; font-size:12px; }

  .form-hint{ font-size:12px; }

  .biz-seg-row{ gap:6px; }

}



/* ---------- 帮助页 ---------- */

.wb-help{ max-width:760px; line-height:1.9; }

.wb-help h3{ font-size:16px; margin-bottom:10px; }

.wb-help p{ font-size:14px; color:#3d362b; margin-bottom:6px; }



/* ---------- 首页常用功能（可自定义） ---------- */

.wb-shortcuts{ padding:18px 20px; }

.wb-sc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

.wb-sc-head h3{ font-size:15px; font-weight:700; }

.wb-sc-edit{ height:30px; padding:0 12px; border:1px solid var(--wb-line); border-radius:8px;

  background:#fff; font-size:12px; cursor:pointer; color:var(--wb-text); transition:.18s; }

.wb-sc-edit:hover{ background:#f5f3ef; border-color:#d4cfc5; }

.wb-sc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:12px; }

.wb-sc-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;

  padding:16px 8px; border:1px solid var(--wb-line); border-radius:14px; background:#fff;

  cursor:pointer; transition:.18s; color:var(--wb-text); font-size:13px; font-weight:500; text-align:center; }

.wb-sc-item:hover{ border-color:var(--wb-green); color:var(--wb-green); background:var(--wb-green-bg);

  transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(107,81,51,.55); }

.wb-sc-item svg{ width:24px; height:24px; }

.wb-sc-item small{ display:block; font-size:11px; color:var(--wb-muted); font-weight:400; margin-top:2px; }

.wb-sc-empty{ padding:26px; text-align:center; color:var(--wb-muted); font-size:13px; }



/* 自定义弹窗 */

.wb-sc-tip{ font-size:12px; color:var(--wb-muted); margin-bottom:10px; line-height:1.6; }

.wb-sc-list{ max-height:38vh; overflow:auto; margin-bottom:6px; }

.wb-sc-row{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; }

.wb-sc-row:hover{ background:#f5f3ef; }

.wb-sc-row input[type=checkbox]{ width:16px; height:16px; cursor:pointer; }

.wb-sc-row .nm{ flex:1; font-size:13px; }

.wb-sc-row .cat{ font-size:12px; color:var(--wb-muted); }

.wb-sc-order{ display:flex; gap:4px; }

.wb-sc-order button{ width:24px; height:24px; border:1px solid var(--wb-line); border-radius:6px;

  background:#fff; cursor:pointer; font-size:12px; line-height:1; color:var(--wb-text); }

.wb-sc-order button:hover{ background:#f5f3ef; }



/* ---------- 手机端：自定义常用功能 iOS 卡片样式 ----------

   initShortcuts 默认就在两种端都渲染（共用 DOM），仅通过此处的媒体查询调样式，

   不再有第二个"常用功能"块。 */

@media (max-width: 900px){

  .wb-shortcuts{

    padding:11px 11px 13px;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(20px) saturate(180%);

    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border:0.5px solid rgba(0,0,0,.06);

    border-radius:11px;

    box-shadow:0 1px 2px rgba(0,0,0,.04), 0 5px 14px -8px rgba(0,0,0,.10);

    margin-top:3px;

  }

  .wb-sc-head h3{

    font-size:16px; font-weight:700; color:#232019; letter-spacing:-0.15px;

  }

  .wb-sc-edit{

    height:24px; padding:0 11px; border-radius:12px;

    font-size:12px;

  }

  .wb-sc-grid{

    grid-template-columns:repeat(4, 1fr) !important;

    gap:9px;

  }

  .wb-sc-item{

    padding:4px 1px 3px !important;

    border:none !important; background:transparent !important;

    font-size:13px; color:#232019; gap:4px;

    box-shadow:none !important; transform:none !important;

    border-radius:7px;

  }

  .wb-sc-item:hover, .wb-sc-item:active{

    border:none !important; color:#232019 !important;

    background:rgba(0,0,0,.04) !important;

    transform:none !important; box-shadow:none !important;

  }

  .wb-sc-item:active{ transform:scale(.96) !important; }

  .wb-sc-item svg{ width:19px !important; height:19px !important; }

  .wb-sc-item small{ font-size:10px !important; color:#8b8478 !important; margin-top:1px !important; }

  .wb-sc-empty{ font-size:12px !important; padding:30px 15px !important; }

}



/* ---------- 全站列表自动分页 ---------- */

.wb-pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:14px;

  font-size:13px; color:var(--wb-muted); }

.wb-pager button{ min-width:30px; height:30px; padding:0 9px; border:1px solid var(--wb-line);

  border-radius:8px; background:#fff; color:var(--wb-text); font-size:12px; cursor:pointer;

  transition:.15s; font-family:inherit; }

.wb-pager button:hover:not([disabled]):not(.cur){ background:#f5f3ef; border-color:#d4cfc5; }

.wb-pager button.cur{ background:var(--wb-green); border-color:var(--wb-green); color:#fff; font-weight:600; }

.wb-pager button[disabled]{ opacity:.4; cursor:not-allowed; }

.wb-pager .wb-pager-info{ margin-right:4px; }



/* ==========================================================

   手机端布局：苹果风格浅色 + iOS 底部 Tab

   ========================================================== */



/* 手机端表格横向滚动包装（默认不显示） */

.wb-tbl-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.wb-tbl-scroll::-webkit-scrollbar{ height:3px; }



/* ---------- 后台表格通用：保证横滑时可读 ---------- */

.wb-content table{

  border-collapse:separate; border-spacing:0;

  width:100%; min-width:380px;                 /* 桌面列宽最小需要；手机端触发横滑 */

}

.wb-content table th,

.wb-content table td{

  white-space:nowrap; vertical-align:middle;    /* 不再被压成竖排 */

}

.wb-content table td img.thumb{

  width:40px; height:40px; border-radius:4px; object-fit:cover; background:#f5f3ef;

}



/* ---------- 手机端商品列表：iOS 卡片视图（仅 mobile-*-dom 渲染区可见） ---------- */

.mobile-product-list{ display:none; }

body.wb-mobile .mobile-product-list{ display:block; }

body.wb-mobile .desktop-only-table{ display:none !important; }



.mpl-toolbar{

  position:sticky; top:-7px; z-index:5;

  background:rgba(245,243,239,.92); backdrop-filter:blur(20px) saturate(180%);

  -webkit-backdrop-filter:blur(20px) saturate(180%);

  padding:6px 0 7px; margin-bottom:8px;

}

.mpl-search-row{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }

.mpl-input{

  flex:1; height:34px; border-radius:9px; background:#fff;

  border:0.5px solid rgba(0,0,0,.12); padding:0 11px;

  font-size:13px; color:#232019; font-family:inherit;

}

.mpl-search-btn{

  height:34px; padding:0 14px; border-radius:9px; border:none;

  background:#8a6a45; color:#fff; font-size:13px;

}

.mpl-pills{ display:flex; gap:5px; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.mpl-pills::-webkit-scrollbar{ display:none; }

.mpl-pill{

  height:24px; padding:0 11px; border-radius:12px; background:#fff;

  border:0.5px solid rgba(0,0,0,.10); color:#232019; font-size:12px;

  display:flex; align-items:center; white-space:nowrap; flex-shrink:0;

}

.mpl-pill.on{ background:#8a6a45; color:#fff; border-color:#8a6a45; }



.mpl-cards{ display:flex; flex-direction:column; gap:8px; padding-bottom:20px; }

.mpl-card{

  background:#fff; border-radius:10px; padding:10px 11px;

  display:flex; flex-direction:column; gap:7px;

}

.mpl-head{ display:flex; gap:9px; align-items:center; }

.mpl-thumb{

  width:65px; height:65px; border-radius:8px; background:#f5f3ef;

  flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;

}

.mpl-thumb img{ width:100%; height:100%; object-fit:cover; }

.mpl-info{ flex:1; min-width:0; }

.mpl-title{ font-size:14px; font-weight:600; color:#232019; line-height:1.35; }

.mpl-meta{

  font-size:11px; color:#8b8478; margin-top:4px;

  display:flex; flex-wrap:wrap; gap:3px 7px;

}

.mpl-meta .sep{ color:#d7d2c7; }

.mpl-tag{

  flex-shrink:0; font-size:11px; padding:0 7px; height:19px;

  border-radius:4.5px; display:inline-flex; align-items:center;

}

.mpl-tag.on{ background:rgba(138,106,69,.10); color:#6b5133; }

.mpl-tag.off{ background:rgba(0,0,0,.06); color:#8b8478; }

.mpl-tag.recycle{ background:rgba(217,72,58,.10); color:#d9483a; }



.mpl-stats{

  display:flex; justify-content:space-between; align-items:center;

  padding:7px 0; border-top:0.5px solid rgba(0,0,0,.06); border-bottom:0.5px solid rgba(0,0,0,.06);

}

.mpl-price{ font-size:17px; font-weight:700; color:#d9483a; line-height:1.1; }

.mpl-price .ccy{ font-size:11px; font-weight:500; margin-right:2px; }

.mpl-stat-row{ display:flex; gap:12px; }

.mpl-stat{ font-size:12px; color:#232019; }

.mpl-stat .muted{ color:#8b8478; margin-right:3px; font-weight:400; font-size:11px; }

.mpl-stat b{ font-weight:600; }



.mpl-actions{ display:flex; gap:6px; }

.mpl-btn{

  flex:1; height:33px; border-radius:16.5px; font-size:13px;

  display:flex; align-items:center; justify-content:center;

  border:0.5px solid rgba(0,0,0,.10); background:#fff; color:#232019;

  cursor:pointer; user-select:none;

}

.mpl-btn.warn{ background:linear-gradient(135deg,#ffaa6e,#ff6a3e); color:#fff; border:none; }

.mpl-btn.success{ background:linear-gradient(135deg,#c2ab8c,#8a6a45); color:#fff; border:none; }

.mpl-btn.danger{ background:linear-gradient(135deg,#ff7066,#d9483a); color:#fff; border:none; }

.mpl-btn.primary{ background:linear-gradient(135deg,#c2ab8c,#8a6a45); color:#fff; border:none; }

.mpl-empty{

  text-align:center; padding:60px 15px; color:#8b8478;

  font-size:13px; background:#fff; border-radius:9px;

}

.wb-tbl-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:1.5px; }



/* ---------- 断点 ≤ 900px 触发手机端样式 ---------- */

@media (max-width: 900px){

  /* 登录页：填满手机宽度 */

  .wb-login-box{ width:88vw; max-width:360px; padding:32px 24px; }

  .wb-login-box h1{ font-size:18px; }



  /* 主体：取消左右布局，sidebar 变成底部 Tab */

  body.wb-mobile .wb-layout{ display:block; height:auto; min-height:100vh; overflow:visible; }



  /* 底部 Tab Bar（iOS 风格：磨砂白 + 顶光照 + 多层柔影 + 安全区） */

  body.wb-mobile .wb-sidebar{

    position:fixed; left:0; right:0; bottom:0; z-index:1000;

    width:100%; height:calc(63px + env(safe-area-inset-bottom));

    padding:5px 0 calc(4px + env(safe-area-inset-bottom));

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(28px) saturate(200%);

    -webkit-backdrop-filter:blur(28px) saturate(200%);

    border-top:none; border-right:none; border-radius:0;

    flex-direction:row; align-items:stretch; gap:0; overflow:visible;

    box-shadow:

      0 -5px 18px rgba(0,0,0,.10),

      0 -1px 5px rgba(0,0,0,.06),

      inset 0 0.5px 0 rgba(255,255,255,.95);

  }

  /* 顶光照线（两端淡出，模拟玻璃边缘） */

  body.wb-mobile .wb-sidebar::before{

    content:''; position:absolute; top:0; left:0; right:0; height:1px;

    background:linear-gradient(90deg,

      rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.12) 82%, rgba(0,0,0,0) 100%);

    pointer-events:none;

  }

  body.wb-mobile .wb-avatar, body.wb-mobile .wb-bottom{ display:none; }

  body.wb-mobile .wb-nav{ flex-direction:row; justify-content:space-around; align-items:stretch; width:100%; gap:0; }

  body.wb-mobile .wb-navitem{ display:none; }

  body.wb-mobile .wb-navitem[data-mob]{

    position:relative;

    display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center;

    gap:4px; padding:7px 1px 4px;

    font-size:11px; color:#8b8478;

    transition:color .18s ease;

  }

  body.wb-mobile .wb-navitem[data-mob]:active{ transform:none; }

  body.wb-mobile .wb-navitem[data-mob] svg{

    width:21px; height:21px; padding:0;

    color:#8b8478;

    border-radius:7px;

    transition:all .18s ease;

  }

  body.wb-mobile .wb-navitem[data-mob] span{ font-size:11px; line-height:1; }

  body.wb-mobile .wb-navitem[data-mob].active{

    background:transparent; color:#8a6a45;

  }

  /* 激活态：图标上圆角浅蓝背板，文字加粗 + 蓝色 */

  body.wb-mobile .wb-navitem[data-mob].active svg{

    color:#fff;

    background:linear-gradient(135deg, #c2ab8c 0%, #8a6a45 100%);

    box-shadow:0 3px 8px -2px rgba(138,106,69,.55), 0 1px 2px -0.5px rgba(138,106,69,.30);

  }

  body.wb-mobile .wb-navitem[data-mob].active span{ color:#8a6a45; font-weight:600; }

  /* 激活态顶部小圆点（iOS 风格指示器） */

  body.wb-mobile .wb-navitem[data-mob].active::before{

    content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%);

    width:3px; height:3px; border-radius:50%;

    background:#8a6a45;

    box-shadow:0 0 3px rgba(138,106,69,.6);

  }



  /* 主区：占满宽，下方留出底栏高度 */

  body.wb-mobile .wb-main{ width:100%; min-height:100vh; padding-bottom:calc(63px + env(safe-area-inset-bottom)); }

  body.wb-mobile .wb-topbar{

    position:sticky; top:0; z-index:50; height:44px; padding:0 12px;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(20px) saturate(180%);

    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border-bottom:1px solid rgba(0,0,0,.05);

  }

  body.wb-mobile .wb-topbar h2{ font-size:16px; font-weight:600; letter-spacing:.1px; }

  body.wb-mobile .wb-topbar-right .wb-lang,

  body.wb-mobile .wb-topbar-right .wb-ghost,

  body.wb-mobile .wb-topbar-right .wb-shop{ display:none; }

  body.wb-mobile .wb-topbar-right{ gap:3px; }

  body.wb-mobile .wb-user{ font-size:12px; }



  body.wb-mobile .wb-content{ padding:14px 14px 20px; }

  body.wb-mobile .wb-content .tab-panel > h2{ display:none; }

  body.wb-mobile .wb-content .card{ margin:0 0 12px; padding:12px; border-radius:12px; }

  body.wb-mobile .wb-content .stat-grid{ grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 12px; }

  body.wb-mobile .wb-content .stat-grid > *{ border-radius:8px; }



  /* 工具栏：手机端横向换行，输入框独占一行，按钮两列紧凑排 */

  body.wb-mobile .wb-content .toolbar{ flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:6px; margin:0 0 8px; }

  body.wb-mobile .wb-content .toolbar input,

  body.wb-mobile .wb-content .toolbar select{ width:100%; height:40px; font-size:15px; }

  body.wb-mobile .wb-content .toolbar .btn,

  body.wb-mobile .wb-content .toolbar button{

    flex:1; min-width:calc(50% - 3px); height:40px; font-size:14px; font-weight:500;

    border-radius:10px; background:#fff !important; color:#232019 !important;

    border:0.5px solid rgba(0,0,0,.14) !important;

    -webkit-appearance:none; appearance:none;

  }

  body.wb-mobile .wb-content .toolbar .btn:first-of-type,

  body.wb-mobile .wb-content .toolbar button:first-of-type{

    background:#8a6a45 !important; color:#fff !important; border-color:#8a6a45 !important; font-weight:600;

  }

  body.wb-mobile .wb-content .toolbar select{

    width:100%; height:48px !important; font-size:17px !important;

    background:#fff !important;

    background-image:linear-gradient(45deg,transparent 50%,#8b8478 50%),linear-gradient(135deg,#8b8478 50%,transparent 50%) !important;

    background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50% !important;

    background-size:6px 6px !important; background-repeat:no-repeat !important;

    padding-right:36px !important; border-radius:12px !important;

    border:0.5px solid rgba(0,0,0,.14) !important; color:#232019 !important;

  }

  body.wb-mobile .wb-content .toolbar .btn.btn-primary,

  body.wb-mobile .wb-content .toolbar button.btn-primary,

  body.wb-mobile .wb-content .toolbar .btn.btn-success,

  body.wb-mobile .wb-content .toolbar button.btn-success{

    background:#8a6a45 !important; color:#fff !important; border-color:#8a6a45 !important;

  }

  body.wb-mobile .wb-content .toolbar .btn.btn-danger,

  body.wb-mobile .wb-content .toolbar button.btn-danger{

    background:#d9483a !important; color:#fff !important; border-color:#d9483a !important;

  }

  body.wb-mobile .wb-content .toolbar .btn{ font-weight:600; }



  /* 商品页：手机端使用独立卡片搜索区，隐藏原桌面 toolbar */

  body.wb-mobile #tab-products .toolbar{ display:none; }



  /* 覆盖 toolbar 里带内联宽度的输入框 */

  body.wb-mobile .wb-content .toolbar input[style*="width"]{ width:100% !important; }



  /* 卡片内说明文字：手机端收小 */

  body.wb-mobile .wb-content .card > .muted{

    font-size:13px !important; color:#8b8478 !important; line-height:1.45 !important;

  }



  /* 顶部二级 tabs：横向滚动 */

  /* 二级 tab：复刻电脑端分段控件（浅灰底板 + 白色选中胶囊），文字已精简单行放下 */

  body.wb-mobile .wb-content .subtabs{

    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px;

    background:#ece9e2; padding:4px; border-radius:12px;

    box-shadow:inset 0 1px 2px rgba(35,32,25,.06);

    margin:0 0 14px; -webkit-overflow-scrolling:touch;

  }

  body.wb-mobile .wb-content .subtabs::-webkit-scrollbar{ display:none; }

  body.wb-mobile .wb-content .subtab{

    flex:none; white-space:nowrap; text-align:center; box-sizing:border-box;

    height:36px; padding:0 16px; border-radius:9px;

    background:transparent; border:none; color:#6b645a;

    font-size:13.5px; font-weight:600; line-height:36px;

  }

  body.wb-mobile .wb-content .subtab.active{

    background:#fff; color:#8a6a45;

    box-shadow:0 1px 3px rgba(35,32,25,.12);

  }



  /* 表格：横向滚动包装（由 JS 套 .wb-tbl-scroll） */

  body.wb-mobile .wb-content .card table{ font-size:14px; }

  body.wb-mobile .wb-content .card th, body.wb-mobile .wb-content .card td{ padding:9px 11px; }

  body.wb-mobile .wb-content .card .btn{ min-height:34px; padding:0 14px; font-size:13.5px; }



  /* 弹窗：铺满屏幕 */

  body.wb-mobile .modal{ width:92vw !important; max-width:none; max-height:88vh; border-radius:11px; }

  body.wb-mobile .modal-head{ padding:12px 13px; font-size:15px; }

  body.wb-mobile .modal-body{ padding:12px 13px; }



  /* ========== 通用卡片化（表格列表页一键美化）========== */

  /* 由 mobileTablesToCards() 给所有非内嵌、非已显式标注横滑的根级 table 加 wb-mobile-cards。 */

  body.wb-mobile .wb-content table.wb-mobile-cards{

    display:block !important; min-width:0 !important; width:100% !important; border:0 !important;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > thead{ display:none !important; }

  /* 兼容没用 <thead> 的写法（head 行直接放在 tbody 里或 table 第一个 tr） */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr.wb-cards-headrow,

  body.wb-mobile .wb-content table.wb-mobile-cards > tr.wb-cards-headrow{ display:none !important; }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody{ display:block; }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr{

    display:block !important;

    background:#fff;

    border-radius:12px;

    margin:0 0 9px;

    padding:10px 13px 11px;

    box-shadow:0 1px 2px rgba(0,0,0,.04);

    border:0.5px solid rgba(0,0,0,.05);

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td{

    display:flex !important; align-items:baseline; justify-content:space-between;

    padding:4.5px 0 !important; border:0 !important;

    border-bottom:0.5px solid #e3dfd6 !important;

    white-space:normal !important; word-break:break-word;

    font-size:14.5px !important; color:#232019;

    text-align:right;

    line-height:1.5;

    vertical-align:top;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td:first-child{ padding-top:0 !important; }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td:last-of-type{

    border-bottom:0 !important; padding-bottom:0 !important;

  }

  /* 操作列与上方数据之间加一道淡色顶线，替代 margin */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="操作"],

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th=""]{

    border-top:0.5px solid #e6e2d9 !important; padding-top:6px !important; margin-top:3px;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th]::before{

    content:attr(data-th);

    color:#8b8478;

    font-size:12.5px;

    margin-right:9px;

    flex-shrink:0;

    text-align:left;

    font-weight:400;

    max-width:30%;

  }

  /* 值域：左对齐兜底，避免长内容贴右 */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > *:first-child{

    text-align:right;

  }

  /* 长文本列（内容/备注/地址）：全宽独占一行，标签在上 */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="内容"],

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="备注"],

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="地址"]{

    flex-direction:column; align-items:flex-start; gap:3px;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="内容"]::before,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="备注"]::before,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="地址"]::before{

    margin-right:0; max-width:none;

  }

  /* 空白/操作列：隐藏标签 */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th=""]::before,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="操作"]::before{

    content:''; display:none;

  }

  /* 操作列：整行底部大按钮 */

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th="操作"],

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td[data-th=""]{

    display:flex !important; justify-content:flex-end; gap:5px;

    padding-top:6px !important; margin-top:3px;

    border-top:0.5px solid #e6e2d9 !important;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards .inline-btns{

    display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards .inline-btns .btn,

  body.wb-mobile .wb-content table.wb-mobile-cards .inline-btns button{

    min-height:34px !important; padding:0 14px !important; border-radius:9px !important;

    font-size:13.5px !important; font-weight:500; margin:0 !important;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button{

    min-height:34px !important; padding:0 14px !important; border-radius:9px !important;

    font-size:13.5px !important; font-weight:500;

    background:#fff; color:#8a6a45; border:0.5px solid rgba(138,106,69,.35);

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.btn-primary,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.btn-primary,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.primary,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.primary{

    background:#8a6a45; color:#fff; border-color:#8a6a45;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.btn-success,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.btn-success{

    background:#8a6a45; color:#fff; border-color:#8a6a45;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.btn-warn,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.btn-warn{

    background:#e0862c; color:#fff; border-color:#e0862c;

  }

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.btn-danger,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.btn-danger,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > .btn.danger,

  body.wb-mobile .wb-content table.wb-mobile-cards > tbody > tr > td > button.danger{

    background:#d9483a; color:#fff; border-color:#d9483a;

  }

  /* 状态 pill：醒目但不占空间 */

  body.wb-mobile .wb-content table.wb-mobile-cards .pill,

  body.wb-mobile .wb-content table.wb-mobile-cards .tag,

  body.wb-mobile .wb-content table.wb-mobile-cards .badge{

    font-size:12px !important; padding:2px 8px !important; border-radius:5px;

  }



  /* ========== 默认按钮（卡片内大按钮）：iOS 蓝色胶囊 ========== */

  body.wb-mobile .wb-content .card > button,

  body.wb-mobile .wb-content .card > .btn,

  body.wb-mobile .wb-content button.block,

  body.wb-mobile .wb-content .btn.block{

    display:block; width:100%;

    height:44px; line-height:44px; padding:0 14px;

    border-radius:12px; font-size:15px;

    background:#8a6a45; color:#fff; border:0; font-weight:600;

    text-align:center; box-sizing:border-box;

  }

  body.wb-mobile .wb-content .card > button.btn-warn,

  body.wb-mobile .wb-content .btn.block.btn-warn,

  body.wb-mobile .wb-content button.btn-warn.block{ background:#e0862c; }

  body.wb-mobile .wb-content .card > button.btn-danger,

  body.wb-mobile .wb-content .btn.block.btn-danger,

  body.wb-mobile .wb-content button.btn-danger.block{ background:#d9483a; }

  body.wb-mobile .wb-content .card > button.btn-outline,

  body.wb-mobile .wb-content .btn.block.btn-outline,

  body.wb-mobile .wb-content button.btn-outline.block{

    background:transparent; color:#232019;

    border:0.5px solid rgba(0,0,0,.18);

  }

  body.wb-mobile .wb-content .card > button + button,

  body.wb-mobile .wb-content .card > .btn + .btn{ margin-top:6px; }



  /* ========== 普通按钮（行内小按钮）：圆角胶囊 ========== */

  body.wb-mobile .wb-content button,

  body.wb-mobile .wb-content .btn{

    min-height:32px; padding:0 12px; font-size:13.5px;

    border-radius:9px;

  }



  /* ========== 输入控件统一圆角触控区 ========== */

  body.wb-mobile .wb-content input[type="text"],

  body.wb-mobile .wb-content input[type="number"],

  body.wb-mobile .wb-content input[type="email"],

  body.wb-mobile .wb-content input[type="search"],

  body.wb-mobile .wb-content input[type="tel"],

  body.wb-mobile .wb-content input[type="password"],

  body.wb-mobile .wb-content textarea{

    height:40px !important; line-height:40px; padding:0 12px !important;

    border-radius:9px !important;

    border:0.5px solid rgba(0,0,0,.12) !important;

    background:#fff !important; font-size:15px !important; box-sizing:border-box;

    -webkit-appearance:none; appearance:none;

  }

  body.wb-mobile .wb-content textarea{ height:auto !important; min-height:72px; line-height:1.5; padding:10px 12px !important; }

  body.wb-mobile .wb-content select{

    height:40px !important; padding:0 30px 0 12px !important;

    border-radius:9px !important;

    border:0.5px solid rgba(0,0,0,.12) !important;

    background:#fff !important; font-size:15px !important;

    background-image:linear-gradient(45deg,transparent 50%,#8b8478 50%),linear-gradient(135deg,#8b8478 50%,transparent 50%) !important;

    background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50% !important;

    background-size:4px 4px !important; background-repeat:no-repeat !important;

    -webkit-appearance:none; appearance:none;

  }



  /* ========== 文章列表：移动端专用卡片 ========== */

  body.wb-mobile .wb-article-cards{ display:flex; flex-direction:column; gap:10px; }

  body.wb-mobile .wb-acard{

    background:#fff; border-radius:14px; padding:12px;

    box-shadow:0 1px 3px rgba(35,32,25,.06);

  }

  body.wb-mobile .wb-acard-top{ display:flex; gap:10px; align-items:flex-start; }

  body.wb-mobile .wb-acard-top img{

    width:84px; height:56px; object-fit:cover; border-radius:10px;

    background:#f5f3ef; flex:none;

  }

  body.wb-mobile .wb-acard-nocover{

    width:84px; height:56px; border-radius:10px; background:#f5f3ef; flex:none;

    display:flex; align-items:center; justify-content:center;

    font-size:11px; color:#c6c0b6;

  }

  body.wb-mobile .wb-acard-title{

    font-size:15px; font-weight:600; line-height:1.35; color:#232019;

    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;

  }

  body.wb-mobile .wb-acard-title .tag{ font-size:11px; vertical-align:1px; }

  body.wb-mobile .wb-acard-sum{

    font-size:12.5px; color:#8b8478; margin-top:3px; line-height:1.4;

    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;

  }

  body.wb-mobile .wb-acard-meta{

    display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;

    margin-top:9px; font-size:12.5px; color:#8b8478;

  }

  body.wb-mobile .wb-acard-time{ margin-left:auto; font-variant-numeric:tabular-nums; }

  body.wb-mobile .wb-acard-btns{

    display:flex; gap:8px; margin-top:10px; padding-top:10px;

    border-top:0.5px solid rgba(0,0,0,.06);

  }

  body.wb-mobile .wb-acard-btns .btn{

    flex:1; height:34px; font-size:13.5px; border-radius:9px; margin:0;

  }



  /* ========== 卡片间距更紧 ========== */

  body.wb-mobile .wb-content .card{ padding:11px 12px; }

  body.wb-mobile .wb-content .card > h3,

  body.wb-mobile .wb-content .card .card-title{

    font-size:15.5px !important; margin-bottom:8px !important; font-weight:600;

  }

}