@charset "utf-8";
/* ============================================================
   OTTPINS PC 工作台 · 第 1 步：外壳样式
   作用域：body.wb-mode（由 user/nav.php 自动添加，会员页专属）
   首页 / 商品页 / 购物车 不加载本文件效果
   ============================================================ */

:root{
  --wb-rail:236px;
  --wb-top:56px;
  --wb-brand:#E23B4F;
  --wb-brand-dark:#B82A3B;
  --wb-brand-soft:#FCEDEF;
  --wb-ink:#1F2430;
  --wb-ink2:#5A6473;
  --wb-muted:#8B93A3;
  --wb-line:#ECEFF5;
  --wb-line2:#E2E6ED;
  --wb-canvas:#F4F6F9;
  --wb-radius:8px;
}

body.wb-mode{ background:var(--wb-canvas); }

/* ---------- 隐藏原营销头部（仅会员页） ---------- */
body.wb-mode .ui-topbar,
body.wb-mode .header{ display:none !important; }
body.wb-mode .ui-bar{ display:none !important; }

/* ---------- 顶部工具条 ---------- */
.wb-top{
  position:fixed; top:0; left:var(--wb-rail); right:0; height:var(--wb-top);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:#fff; border-bottom:1px solid var(--wb-line);
  z-index:1001; box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.wb-top-l{ display:flex; align-items:center; gap:10px; min-width:0; }
.wb-top-title{ font-size:16px; font-weight:600; color:var(--wb-ink); letter-spacing:.3px; }
.wb-top-sep{ width:1px; height:14px; background:var(--wb-line2); }
.wb-top-sub{ font-size:12.5px; color:var(--wb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-top-tools{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.wb-top-btn{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border:1px solid var(--wb-line2); border-radius:6px; background:#fff;
  font-size:13px; color:var(--wb-ink2); text-decoration:none; line-height:32px;
  transition:border-color .15s,color .15s,background .15s;
}
.wb-top-btn:hover{ border-color:#D5DAE3; color:var(--wb-ink); background:#FAFBFC; }
.wb-top-btn.is-primary{ background:var(--wb-brand); border-color:var(--wb-brand); color:#fff; }
.wb-top-btn.is-primary:hover{ background:var(--wb-brand-dark); border-color:var(--wb-brand-dark); color:#fff; }
.wb-top-btn svg{
  width:15px; height:15px; flex:0 0 15px;
  stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.wb-top-who{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px 0 6px;
  border-radius:16px; background:#F7F8FA; text-decoration:none; margin-left:4px;
}
.wb-top-who img{
  width:24px; height:24px; border-radius:50%; object-fit:cover; display:block; background:#DDE2EA;
}
.wb-top-who span{
  font-size:13px; color:var(--wb-ink2); max-width:96px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 左侧固定导航 ---------- */
.wb-side{
  position:fixed; top:0; left:0; bottom:0; width:var(--wb-rail);
  display:flex; flex-direction:column;
  background:#fff; border-right:1px solid var(--wb-line);
  z-index:1002; box-sizing:border-box; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.wb-brand{
  display:flex; align-items:center; gap:10px; height:var(--wb-top);
  padding:0 18px; flex:0 0 var(--wb-top); border-bottom:1px solid var(--wb-line);
}
.wb-brand-mark{
  width:30px; height:30px; border-radius:50%; background:var(--wb-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; letter-spacing:.5px; flex:0 0 30px;
  box-shadow:0 2px 8px rgba(226,59,79,.28);
}
.wb-brand-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.wb-brand-txt strong{ font-size:14px; color:var(--wb-ink); letter-spacing:.6px; }
.wb-brand-txt i{ font-size:11.5px; font-style:normal; color:var(--wb-muted); letter-spacing:.4px; }

.wb-nav{ flex:1 1 auto; overflow-y:auto; padding:10px 10px 14px; }
.wb-nav::-webkit-scrollbar{ width:6px; }
.wb-nav::-webkit-scrollbar-thumb{ background:#E3E7EE; border-radius:3px; }

.wb-nav-h{
  padding:14px 10px 6px; font-size:11.5px; color:var(--wb-muted);
  letter-spacing:1px; user-select:none;
}
.wb-nav-item{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 10px;
  border-radius:6px; font-size:13.5px; color:var(--wb-ink2);
  text-decoration:none; margin-bottom:1px; box-sizing:border-box;
  transition:background .15s,color .15s;
}
.wb-nav-item svg{
  width:16px; height:16px; flex:0 0 16px;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.wb-nav-item span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-nav-item:hover{ background:#F7F8FA; color:var(--wb-ink); }
.wb-nav-item:hover svg{ opacity:1; }
.wb-nav-item.is-on{
  background:var(--wb-brand-soft); color:var(--wb-brand-dark); font-weight:600;
}
.wb-nav-item.is-on svg{ stroke:var(--wb-brand); opacity:1; }

.wb-side-ft{ flex:0 0 auto; border-top:1px solid var(--wb-line); padding:10px; }
.wb-side-ft a{
  display:flex; align-items:center; gap:10px; height:36px; padding:0 10px;
  border-radius:6px; font-size:13px; color:var(--wb-muted); text-decoration:none;
}
.wb-side-ft a:hover{ background:#F7F8FA; color:var(--wb-ink2); }
.wb-side-ft svg{
  width:16px; height:16px; flex:0 0 16px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 内容画布：给固定导航和顶部条让位 ---------- */
body.wb-mode .bg_body_inner{
  margin:var(--wb-top) 0 0 var(--wb-rail);
  padding:20px 24px 40px;
  background:var(--wb-canvas);
  border-top:0;
  min-height:calc(100vh - var(--wb-top));
  box-sizing:border-box;
}
body.wb-mode .bg_body_inner > .width{
  width:100% !important;
  max-width:1280px;
  margin:0 auto;
  padding:0;
}

/* 面包屑由顶部条接管，不再重复 */
body.wb-mode .ui-bread{ display:none !important; }

/* 把原来的「白卡片 + 左侧窄栏」拆掉，交给 .wb-side 承担导航 */
body.wb-mode .box-user{
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  margin:0 !important;
  min-height:0 !important;
}
body.wb-mode .box-user > .usernav{
  float:none !important;
  width:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  overflow:visible !important;
}
body.wb-mode .box-user > .ui-col-10{
  float:none !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
}
.wb-side .wb-track-none{ display:none; }

/* ---------- 页脚 ---------- */
body.wb-mode .bg_footer{ margin-left:var(--wb-rail); }
body.wb-mode .footnavs{ display:none !important; }

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  :root{ --wb-rail:196px; }
  .wb-brand-txt i{ display:none; }
  .wb-nav-item{ font-size:13px; }
}
@media (max-width:900px){
  :root{ --wb-rail:0px; --wb-top:52px; }
  .wb-side{ position:static; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--wb-line); }
  .wb-top{ left:0; }
  body.wb-mode .bg_body_inner{ margin:0; padding:14px; }
  body.wb-mode .bg_footer{ margin-left:0; }
  body.wb-mode .ui-topbar, body.wb-mode .header{ display:block !important; }
  .wb-top{ display:none; }
  .wb-side{ display:none; }
}

/* ============================================================
   第 2 步：首页组件（身份条 / 指标卡 / 卡片 / 表格 / 快捷入口）
   ============================================================ */

/* ---------- 身份条 ---------- */
.wb-idstrip{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--wb-line); border-radius:var(--wb-radius);
  padding:18px 22px; box-sizing:border-box;
}
.wb-face{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%;
  overflow:hidden; background:#E9EEF5;
}
.wb-face img{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.wb-idmain{ flex:1 1 auto; min-width:0; }
.wb-idname{
  display:flex; align-items:center; gap:10px;
  font-size:17px; font-weight:600; color:var(--wb-ink); line-height:1.3;
}
.wb-idname em{
  font-style:normal; font-size:11.5px; font-weight:600; color:var(--wb-brand-dark);
  background:var(--wb-brand-soft); border-radius:10px; padding:2px 8px;
}
.wb-idmeta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:7px; font-size:12.5px; color:var(--wb-muted);
}
.wb-idmeta a{ color:var(--wb-brand); text-decoration:none; }
.wb-idmeta .wb-edit{
  color:var(--wb-muted); text-decoration:none; display:inline-flex; align-items:center;
}
.wb-idmeta .wb-edit svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
.wb-idstats{ display:flex; flex:0 0 auto; }
.wb-idstats dl{
  margin:0; padding:0 20px; text-align:center; border-left:1px solid var(--wb-line);
}
.wb-idstats dl:first-child{ border-left:0; }
.wb-idstats dt{ font-size:11.5px; color:var(--wb-muted); margin-bottom:5px; }
.wb-idstats dd{ margin:0; font-size:17px; font-weight:600; color:var(--wb-ink); }
.wb-idstats dd small{ font-size:11px; font-weight:400; color:var(--wb-muted); margin-left:2px; }

/* ---------- 指标卡 ---------- */
.wb-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.wb-kpi{
  position:relative; background:#fff; border:1px solid var(--wb-line); border-radius:var(--wb-radius);
  padding:16px 18px; min-height:96px; box-sizing:border-box; overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.wb-kpi:hover{ border-color:#F2C6CC; box-shadow:0 4px 14px rgba(226,59,79,.06); }
.wb-kpi-h{ font-size:12.5px; color:var(--wb-muted); }
.wb-kpi-v{
  font-size:26px; font-weight:700; color:var(--wb-ink);
  line-height:1.15; margin-top:9px; letter-spacing:-.3px;
}
.wb-kpi-v small{ font-size:12px; font-weight:400; color:var(--wb-muted); margin-left:4px; letter-spacing:0; }
.wb-kpi-t{ margin-top:9px; font-size:12px; color:var(--wb-ink2); }
.wb-kpi .wb-kpi-mark{
  position:absolute; right:-18px; bottom:-18px; width:58px; height:58px; border-radius:50%;
  background:var(--wb-brand-soft);
}

/* ---------- 卡片容器 ---------- */
.wb-grid{ display:grid; grid-template-columns:8fr 4fr; gap:14px; margin-top:14px; align-items:start; }
.wb-card{
  background:#fff; border:1px solid var(--wb-line); border-radius:var(--wb-radius);
  overflow:hidden;
}
.wb-card-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--wb-line);
}
.wb-card-hd h3{ margin:0; font-size:14px; font-weight:600; color:var(--wb-ink); }
.wb-card-hd .wb-more{ font-size:12.5px; color:var(--wb-muted); text-decoration:none; }
.wb-card-hd .wb-more:hover{ color:var(--wb-brand); }
.wb-card-bd{ padding:16px 18px; }

/* ---------- 数据表格 ---------- */
.wb-table{ width:100%; border-collapse:collapse; font-size:13px; }
.wb-table th{
  text-align:left; font-weight:500; font-size:12px; color:var(--wb-muted);
  padding:10px 14px; background:#FAFBFC; border-bottom:1px solid var(--wb-line); white-space:nowrap;
}
.wb-table td{ padding:12px 14px; border-bottom:1px solid #F3F5F9; color:var(--wb-ink2); vertical-align:middle; }
.wb-table tr:last-child td{ border-bottom:0; }
.wb-table tbody tr:hover{ background:#FCFCFD; }
.wb-table td b{ color:var(--wb-ink); font-weight:600; }
.wb-table a{ color:var(--wb-brand); text-decoration:none; }
.wb-table a:hover{ text-decoration:underline; }
.wb-pill{
  display:inline-block; padding:2px 9px; border-radius:10px; font-size:12px;
  background:var(--wb-brand-soft); color:var(--wb-brand-dark); white-space:nowrap;
}
.wb-pill.is-warn{ background:#FFF4E2; color:#B77300; }
.wb-pill.is-ok{ background:#E8F5EC; color:#12884A; }
.wb-empty{ padding:30px 0; text-align:center; color:var(--wb-muted); font-size:13px; }

/* ---------- 快捷入口 ---------- */
.wb-quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wb-quick a{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border:1px solid var(--wb-line); border-radius:6px; box-sizing:border-box;
  font-size:13px; color:var(--wb-ink2); text-decoration:none;
  transition:border-color .15s,background .15s,color .15s;
}
.wb-quick a:hover{ border-color:#F2C6CC; background:#FFF9FA; color:var(--wb-brand-dark); }
.wb-quick svg{
  width:16px; height:16px; flex:0 0 16px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}

/* ---------- 签到条 ---------- */
.wb-sign-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:13px; border-top:1px dashed var(--wb-line);
  font-size:13px; color:var(--wb-ink2);
}
.wb-sign-bar code{
  background:#FFF1F3; color:var(--wb-brand-dark); font-weight:600;
  padding:1px 7px; border-radius:4px; font-size:13px;
}

/* ---------- 按钮/强调色统一到品牌红 ---------- */
body.wb-mode .ui-btn-blue{ background:var(--wb-brand); border-color:var(--wb-brand); color:#fff; }
body.wb-mode .ui-btn-blue:hover{ background:var(--wb-brand-dark); border-color:var(--wb-brand-dark); }
body.wb-mode .ui-btn-outline-blue{ background:#fff; border:1px solid var(--wb-brand); color:var(--wb-brand); }
body.wb-mode .ui-btn-outline-blue:hover{ background:var(--wb-brand); border-color:var(--wb-brand); color:#fff; }

/* ---------- 组件响应式 ---------- */
@media (max-width:1180px){
  .wb-kpis{ grid-template-columns:1fr 1fr; }
  .wb-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .wb-kpis{ grid-template-columns:1fr; }
  .wb-idstrip{ flex-wrap:wrap; }
  .wb-idstats{ width:100%; justify-content:space-between; }
  .wb-idstats dl{ padding:0 10px; }
  .wb-quick{ grid-template-columns:1fr; }
}