/* ============================================================
 * 周鲜生会员商店管理后台 · 原生版基础样式 base.css（零封装）
 * 由原 index.html 内联 <style>（L20-36 图标辅助 + L50-575 主样式）迁移，
 * 纯 CSS 零依赖；组件视觉由 ui.css 原生原语接管（Element Plus 已移除）。
 * 品牌三色体系：浅橙(#1D2129/#1D2129/#1D2129) × 浅灰白(#F6F4EC/#F6F4EC) × 白
 * ============================================================ */

/* ============ 2026-09-21 v1.4.175 全局思源黑体（本地字体文件注册） ============
 * body 字体栈首选 'Noto Sans SC'（思源黑体），三字重本地 woff2 自托管
 * （static/fonts/，无外网依赖离线可用）；font-display:swap 系统字体先行渲染，
 * 字体就绪后无缝替换。小程序端经后端 /fonts/{file} 端点 loadFontFace 同源注入。 */
@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../static/fonts/noto-sans-sc-400.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../static/fonts/noto-sans-sc-500.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../static/fonts/noto-sans-sc-700.woff2') format('woff2');
}

/* ============ 原生图标 · 黑色简约风格（2026-09-10 零字体库版） ============ */
/* 渲染原理：.vi 为 1em×1em 方块，background-color:currentColor 提供颜色，
 * mask 用 /icons/<名称>.svg 镂空成图形 → 图标随 font-size 缩放、随 color 染色。
 * 图标由 App.icon(name) 工厂生成（style 里挂 --ic 变量指向 svg 文件），
 * 文件未上传时仅显示空白占位，不报错不破版。命名清单见 /icons/README.md */
.vi{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em;background-color:currentColor;color:#333333;-webkit-mask:var(--ic,none) center/contain no-repeat;mask:var(--ic,none) center/contain no-repeat}
/* 内联小图标：嵌在按钮/标题/标签文字中，跟随文字色（黑色简约） */
.vi-in{vertical-align:-2px;margin-right:4px;font-size:14px;color:inherit}
/* 侧边栏菜单图标：随文字色联动（active 时主色，平时深灰） */
.menu-item .vi{font-size:15px;margin-right:7px;color:inherit}
/* 顶栏按钮图标 */
.icon-btn .vi{font-size:18px;color:#333333}
@media (max-width:900px){
  .kpi-icon .vi,.kpi-icon{width:32px;height:32px}
  .kpi-icon .vi{font-size:17px}
}

:root{
  /* ===== 2026-09-23 四色设计规范 v2.0（老板指令版，design/DESIGN-SPEC-v2.md）=====
   * 只用四色：白 · 黑 · 绿 · 渐变橙（图基准=联营商工作台截图）
   * 渐变橙 #1D2129→#1D2129（头部/主按钮/选中）· 橙 #1D2129 主 / #1D2129 亮 /
   *   #1D2129 深 / #F9EDE3 浅橙底 / #F1D4BC 浅橙描边
   * 绿 #1FA45B（收益/成功/收入）· #27B068 亮 · 渐变绿 #27B068→#1FA45B（余额卡）
   * 黑 #1D2129 主 / #333333 正文(支出/负向)
   * 白 #FFFFFF 卡 / #FFFFFF 页面底(v1.4.389 老板指令背景只用白/橙/绿) / #F0EDE2 线
   * 2026-09-30 v1.4.389 老板指令「背景按钮只用白/橙/绿三色、其他字深黑」：
   * 渐变全部收纯色（橙 #1D2129 / 绿 #1FA45B / 黑点 #1D2129），页面/登录底改纯白，
   * 灰次级字全部升 #1D2129；橙色/绿色字保持不变；红撤除归橙
   * （服务异常/告警横幅/日志 error 全部转橙），占位符/禁用态灰保留 */
  --c-primary:#1D2129;
  --c-primary-grad:#1D2129;
  --c-primary-strong:#1D2129;
  --c-blue:#1FA45B;
  --c-green:#1FA45B;
  --c-orange:#1D2129;
  --c-purple:#1D2129;
  --c-title:#1D2129;
  --c-body:#333333;
  --c-aux:#1D2129;
  --c-weak:#1D2129;
  --c-orange-bg:#F9EDE3;
  --c-orange-border:#F1D4BC;
  --c-page:#F4F6F4;
  --c-card:#ffffff;
  --c-border:#E8ECE8;
  --shadow-light:0 2px 10px rgba(29,33,41,.04);
  --shadow-mid:0 4px 14px rgba(29,33,41,.06);
  --shadow-card:0 2px 10px rgba(29,33,41,.04);
  --radius-s:8px;
  --radius-m:10px;
  --radius-l:14px;
  /* 2026-10-15 v1.4.820 侧栏换血（v4 设计稿一模一样搬入）：深墨绿底 + 白字系 + 选中亮绿块 */
  --sidebar-bg:#12291C;
  --sidebar-border:rgba(255,255,255,.07);
  --sidebar-text:rgba(255,255,255,.72);
  --sidebar-text-active:#FFFFFF;
  --sidebar-bg-active:#1FA45B;
  --sidebar-text-hover:#FFFFFF;
  --sidebar-bg-hover:rgba(255,255,255,.07);
  --sidebar-strong:#FFFFFF;
  --sidebar-icon-muted:rgba(255,255,255,.60);
  /* 原生 UI 原语主色（ui.css 使用，替代原 Element Plus 主题变量）
   * 四色按钮 token：--grad-black / --grad-green / --grad-orange（与小程序全局一致） */
  --grad-orange:#1D2129;
  --grad-green:#1FA45B;
  --grad-black:#1D2129;
  --green-solid:#27B068;
  --green-ink:#1FA45B;
  --ui-primary:#1FA45B;
  --ui-primary-light-3:#52BB80;
  --ui-primary-light-5:#8FD3A8;
  --ui-primary-light-7:#CBE7D6;
  --ui-primary-light-8:#E0F2E7;
  --ui-primary-light-9:#E9F5EE;
  --ui-primary-dark-2:#178A4E;
  --ui-radius:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden 属性强覆盖：布局类自带 display:flex/none 会压过 UA 默认，必须 !important */
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--c-page);color:var(--c-body);font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
#app{height:100vh}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#F0EDE2;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#bfc3cf}
::-webkit-scrollbar-track{background:transparent}

/* ============ 主布局 ============ */
.app-layout{height:100vh;display:flex}

/* 侧边栏 - v1.4.820 深墨绿（v4 设计稿）：宽236 + 墨绿渐变底 + 白字系 */
.sidebar{width:236px;background:linear-gradient(180deg,#12291C 0%,#0E291B 100%);color:var(--sidebar-text);display:flex;flex-direction:column;flex-shrink:0;transition:width .28s ease;position:relative;z-index:20;border-right:none}
.sidebar.collapsed{width:43px}
.sidebar-logo{height:64px;display:flex;align-items:center;padding:0 18px;gap:10px;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.07)}
/* v1.4.723 照设计图：绿色圆角块白「周」；v1.4.820 墨绿底上白字 */
.sidebar-logo .logo-icon{width:30px;height:30px;background:#1FA45B;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff;font-weight:800}
.sidebar-logo .logo-text{font-size:17px;font-weight:800;color:#FFFFFF;letter-spacing:.5px}
.sidebar-logo .logo-text .sub{display:block;font-size:9px;font-weight:400;color:rgba(255,255,255,.45);letter-spacing:1.5px;margin-top:1px}
.sidebar-menu{flex:1;overflow-y:auto;padding:10px 12px}
.sidebar-menu::-webkit-scrollbar{width:3px}
.sidebar-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.menu-item{display:flex;align-items:center;justify-content:flex-start;padding:0 12px;min-height:38px;cursor:pointer;color:var(--sidebar-text);font-size:13.5px;font-weight:500;transition:all .2s;white-space:nowrap;position:relative;border-radius:10px;margin-bottom:3px;text-align:left;letter-spacing:.3px;border:none}
.menu-item:hover{color:var(--sidebar-text-hover);background:var(--sidebar-bg-hover);border-color:transparent}
/* ============ 2026-10-14 v1.4.723 侧栏定稿（老板设计图 1:1）：白底 + 选中项=绿色实底圆角白字 ============ */
.menu-item.active{color:#FFFFFF;background:#1FA45B;font-weight:700;border-color:transparent;box-shadow:0 4px 10px rgba(31,164,91,.28)}
.menu-item.active::before{display:none}
.menu-item.active .vi{color:#FFFFFF}
.menu-item.active .mi-desc{color:rgba(255,255,255,.82);opacity:1}
.menu-item.active .mi-badge{background:#FFFFFF;color:#1FA45B}
/* 2026-09-05 后台整改：菜单两行布局（标题+一句话用途），解决"分不清功能用处" */
.mi-text{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0;padding:3px 0;overflow:hidden}
.mi-title{font-size:13px}
.mi-desc{font-size:10px;font-weight:400;color:var(--c-aux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-item.active .mi-desc{color:rgba(255,255,255,.82);opacity:1}
/* 2026-09-22 设计稿 v172 对齐：菜单「新」角标（系统设置），仅展示不打断两行布局 */
.mi-title-row{display:inline-flex;align-items:center;gap:5px}
.mi-badge{flex:none;padding:1px 5px;border-radius:8px;background:#1FA45B;color:#fff;font-size:9.5px;font-weight:700;line-height:1.4;letter-spacing:.5px}
.menu-item.active .mi-badge{background:#1FA45B;color:#fff}

/* ============ v1.4.740 侧栏手风琴（老板指令「子菜单移左边主菜单 主菜单展开显示子菜单」）============
 * 主菜单：点击展开子菜单+进默认落点，再点收起（页停留）；当前激活主菜单自动展开
 * 子菜单：缩进+引导线+圆点，点击 switchView(宿主,{tab}) 直达页签/板块锚点；
 * 高亮两级：主菜单绿底常亮（.active），当前子菜单橙底（.sub-active） */
.menu-item .mi-caret{font-size:12px;margin-left:6px;color:var(--c-aux);transition:transform .18s;flex-shrink:0}
.menu-item.m-open .mi-caret{transform:rotate(90deg)}
.menu-item.active .mi-caret{color:rgba(255,255,255,.85)}
.menu-item.m-open:not(.active){background:var(--sidebar-bg-hover)}
.menu-sub{display:flex;align-items:center;gap:7px;padding:0 10px 0 12px;min-height:30px;margin:1px 7px 1px 24px;cursor:pointer;border-radius:8px;font-size:12.5px;color:rgba(255,255,255,.72);font-weight:500;white-space:nowrap;border-left:2px solid rgba(255,255,255,.15);transition:all .15s}
.menu-sub .ms-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;flex-shrink:0}
.menu-sub .mi-title{font-size:12.5px}
.menu-sub:hover{color:#FFFFFF;background:var(--sidebar-bg-hover)}
.menu-sub.sub-active{color:#FFFFFF;background:rgba(31,164,91,.22);font-weight:700;border-left-color:#1FA45B}
.menu-sub.sub-active .ms-dot{opacity:1}
/* v1.4.822 侧栏分组小标题（v4 设计稿）：浅白小字组名 */
.menu-ngroup{font-size:10.5px;color:rgba(255,255,255,.35);letter-spacing:1.5px;padding:14px 10px 6px;font-weight:600}
.menu-badge.sub{background:#F5F2E9;color:#86909C;font-size:10px;font-weight:700;padding:0 5px;min-width:16px;height:16px;line-height:16px;border-radius:8px;text-align:center}
/* v1.4.840 死样式清退：menu-section-label/menu-section-divider（740 手风琴时代分组标签，
 * 822 被 menu-ngroup 替代后零调用） */

/* ============ v1.4.828 页级统一页头（设计稿 pghead 一模一样搬入）：圆底图标块 + 大标题 + 一句话描述 ============ */
.pghead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pghead .icbig{width:42px;height:42px;border-radius:13px;background:#F0EDE2;color:#1D2129;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pghead .icbig.g{background:#E5F4EB;color:#1FA45B}
.pghead .icbig .vi{font-size:19px;color:inherit}
.pghead .pgt{min-width:0}
.pghead h1{font-size:20px;font-weight:800;letter-spacing:-.2px;color:#182420;line-height:1.2}
.pghead .desc{font-size:12px;color:#93A09A;margin-top:3px}
.pghead .sp{flex:1}

/* ============ v1.4.831 口径说明框（设计稿 notebox 全局组件）：浅暖底+虚线边+灰字 ============ */
.notebox{margin-top:12px;padding:10px 14px;background:#FAF9F4;border:1px dashed #E3DDD3;border-radius:8px;font-size:12px;color:#6B6F76;line-height:2}
.notebox b{color:#6B6F76}

/* ============ v1.4.755 订单中心改版：KPI 卡行（v1.4.827 分时卡撤除，od-topgrid 随之退役） ============ */
/* v1.4.816 全后台 KPI 卡带统一：flex 均分整行（4/5/6/8 张都不留空洞），卡多自动换行 */
.od-kpis{display:flex;gap:10px;flex-wrap:wrap}
.od-kpis>*{flex:1 1 0;min-width:170px}
/* v1.4.840 死样式清退：odfn 订单漏斗条（v1.4.813 漏斗卡撤除后零调用） */

/* v1.4.840 死样式清退：menu-sec-head/menu-sec-body/ms-sec-ico/ms-name 及
 * menu-section-divider.tone-* 五档色（v1.4.188→723 两次分组头改造遗留，
 * 现 renderMenu 分组=menu-ngroup、手风琴=menu-item mi-caret，均零调用）；
 * crumb-dot 面包屑色点有活引用保留 */
/* 面包屑分组色点（与侧栏 chip 同色系） */
.crumb-dot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px;vertical-align:middle}
.crumb-dot-orange{background:#1D2129}
.crumb-dot-green{background:#1FA45B}
.crumb-dot-dorange{background:#1D2129}
.crumb-dot-black{background:#1D2129}
.crumb-dot-gray{background:#1D2129}
.menu-item.collapsed{justify-content:center;padding:0}
.menu-icon-collapsed,.collapsed-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:15px;font-weight:700;background:var(--sidebar-bg-hover);color:var(--sidebar-text);transition:all .2s}
.menu-item.active .menu-icon-collapsed,.menu-item.active .collapsed-icon{background:#1FA45B;color:#fff}
.collapsed-icon{background:transparent}
/* v1.4.723 照设计图：侧栏底部版权区撤显（设计图侧栏底部干净） */
.sidebar-footer{display:none}
.sidebar-toggle-btn{height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sidebar-text);border-top:1px solid var(--sidebar-border);transition:all .2s;font-size:12px;flex-shrink:0}
.sidebar-toggle-btn:hover{color:var(--ui-primary);background:var(--sidebar-bg-hover)}

/* ============ 2026-09-05 三端消息角标：菜单项红点数字 + 顶栏铃铛面板 ============ */
.menu-item{position:relative}
.menu-badge{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:#1D2129;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:1.5px solid #fff;box-sizing:content-box;flex-shrink:0;
}
.menu-item.active .menu-badge{background:#fff;color:#1D2129;border-color:#1D2129}
/* 图标收拢模式下角标退化为右上角小红点 */
.menu-badge.dot{right:-2px;top:-2px;transform:none;min-width:8px;height:8px;padding:0;font-size:0;border-width:1.5px}

/* ============ v1.4.242 侧栏图标条 rail + flyout（工作台中心化）============
 * collapsed 态升级：仪表盘直达 + 五组彩色渐变 chip（38×38，与 .ms-chip 同色系），
 * 点组 chip 在右侧弹 flyout 浮层（组头 + 组内菜单列表，含角标）；
 * 默认开启、localStorage 持久化（zxsAdminRail），手机端抽屉保持全量不受影响 */
.rail-chip{position:relative;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin:5px auto;cursor:pointer;color:#fff;box-shadow:0 2px 6px rgba(29,33,41,.16);transition:transform .15s,box-shadow .15s}
.rail-chip .vi{font-size:19px;margin:0;color:#fff}
.rail-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(29,33,41,.24)}
.rail-chip.active{outline:2px solid #1FA45B;outline-offset:2px}
.rail-chip-orange{background:#1D2129}
.rail-chip-green{background:#1FA45B}
.rail-chip-dorange{background:#1D2129}
.rail-chip-black{background:#1D2129}
.rail-chip-gray{background:#1D2129}
.rail-chip .menu-badge.dot{right:-3px;top:-3px}
.rail-flyout{position:fixed;z-index:2100;background:#fff;border:1px solid #F0EDE2;border-radius:12px;box-shadow:0 8px 28px rgba(29,33,41,.16);padding:8px;min-width:236px}
.rail-flyout-title{display:flex;align-items:center;gap:8px;padding:6px 8px 10px;border-bottom:1px solid #F5F2E9;margin-bottom:6px}
.rft-name{font-size:13px;font-weight:700;color:#1D2129;white-space:nowrap}
.rft-hint{font-size:11px;color:#1D2129;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-flyout-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:#1D2129}
.rail-flyout-item .vi{font-size:16px;margin:0;color:#1D2129}
.rail-flyout-item:hover{background:#FBFAF4}
.rail-flyout-item:hover .vi{color:#1D2129}
.rail-flyout-item.active{background:#E9F5EE;color:var(--ui-primary);font-weight:600}
.rail-flyout-item.active .vi{color:var(--ui-primary)}
.rail-flyout-item .rfi-title{flex:1;white-space:nowrap}
.rail-flyout-item .menu-badge{position:static;margin-left:auto;transform:none}
.rail-flyout-item.active .menu-badge{background:#1FA45B;color:#fff;border-color:#fff}
/* 顶栏铃铛计数 */
.bell-count{
  position:absolute;top:0px;right:0px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#1D2129;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:1.5px solid #fff;box-sizing:content-box;
}
.icon-btn{position:relative}
/* 铃铛消息面板 */
.bell-panel{position:fixed;top:52px;right:16px;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--c-border);border-radius:12px;box-shadow:0 12px 32px rgba(29,33,41,.14);z-index:300;overflow:hidden}
.bell-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #F6F4EC;font-weight:700;color:var(--c-title)}
.bell-panel-time{font-size:11px;color:var(--c-aux);font-weight:400}
.bell-panel-item{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;border-bottom:1px solid #F6F4EC;transition:background .15s}
.bell-panel-item:hover{background:#E9F5EE}
.bell-panel-item.zero{cursor:default}
.bell-panel-item.zero:hover{background:#fff}
.bp-label{font-size:13px;font-weight:600;color:var(--c-body);flex-shrink:0}
.bp-detail{font-size:11px;color:var(--c-aux);flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-count{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:#1D2129;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bp-ok{font-size:11px;color:var(--c-green);flex-shrink:0}
.bell-panel-foot{padding:8px 14px;font-size:11px;color:var(--c-aux);background:var(--c-page)}
/* 域名绑定页：可复制链接样式（2026-09-05） */
.domain-url{font-size:12px;color:#1d6fd0;cursor:pointer;border-bottom:1px dashed #9ec3f3;word-break:break-all;transition:color .15s}
.domain-url:hover{color:#0a4fa8}
/* 手机端菜单遮罩（mobile-open 时点击收拢） */
.sidebar-mask{display:none}

/* 主区域 */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:margin-right .3s cubic-bezier(.32,.72,.35,1)}
/* v1.4.824 抽屉 push 模式（v4 设计稿「不遮挡表格」）：主区右让 540px */
body.drawer-push-open .main-area{margin-right:540px}
.drw-push{position:fixed;right:0;top:0;bottom:0;width:540px;max-width:100vw;background:#fff;border-radius:20px 0 0 20px;box-shadow:-10px 0 32px rgba(24,36,32,.10);z-index:60;display:flex;flex-direction:column;animation:drwPushIn .3s cubic-bezier(.32,.72,.35,1)}
.drw-push.closing{transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,.35,1)}
@keyframes drwPushIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.topbar{height:56px;background:#fff;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--c-border);gap:16px;z-index:10}
.topbar .collapse-btn{font-size:20px;cursor:pointer;color:var(--c-body);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}
.topbar .collapse-btn:hover{background:#F6F4EC;color:var(--ui-primary)}
/* 手机端汉堡胶囊文字标签（桌面隐藏，≤768px 显示，2026-09-05 顶部展开提示） */
.topbar .collapse-btn .cb-label{display:none;font-size:13px;font-weight:600;margin-left:2px}
.topbar .breadcrumb{font-size:15px;font-weight:600;color:var(--c-title);display:flex;align-items:center;gap:8px}
.topbar .breadcrumb .sep{color:#F0EDE2;font-weight:400}
.topbar .breadcrumb .crumb-first{color:var(--c-aux);font-weight:400}
/* 2026-10-14 v1.4.718 顶栏全局菜单搜索（老板设计稿） */
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--c-page,#F6F4EC);border:1px solid var(--c-border);border-radius:10px;padding:0 12px;height:38px;width:340px;position:relative;transition:border-color .2s,background .2s}
.topbar-search:focus-within{border-color:var(--ui-primary);background:#fff}
.topbar-search .ts-icon{color:var(--c-aux);font-size:15px;flex-shrink:0}
.topbar-search .ts-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-title);font-weight:600;white-space:nowrap;border-right:1px solid var(--c-border);padding-right:10px}
.topbar-search .ts-crumb .crumb-first{color:var(--c-aux);font-weight:400}
.topbar-search .ts-crumb .sep{color:#F0EDE2}
.topbar-search input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:var(--c-title);min-width:0}
.topbar-search input::placeholder{color:var(--c-aux)}
.ts-panel{position:absolute;top:44px;left:0;width:100%;background:#fff;border:1px solid var(--c-border);border-radius:10px;box-shadow:0 12px 32px rgba(29,33,41,.14);z-index:300;overflow:hidden}
.ts-item{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #F6F4EC;font-size:13px;color:var(--c-title)}
.ts-item:hover{background:#E9F5EE}
.ts-item .vi{color:var(--c-aux);font-size:14px}
.ts-item .ts-title{font-weight:600;flex:1}
.ts-item .ts-sec{font-size:11px;color:var(--c-aux)}
.ts-empty{padding:14px;text-align:center;font-size:13px;color:var(--c-aux)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.topbar .server-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-green);background:#E7F6ED;padding:5px 12px;border-radius:4px}
.topbar .server-status .dot{width:7px;height:7px;border-radius:50%;background:var(--c-green);animation:pulse 2s infinite}
/* 2026-09-30 v1.4.372 状态灯真检测：后端健康检查失败 → 红灯态（撤脉冲动画） */
.topbar .server-status.down{color:#1D2129;background:#F9EDE3}
.topbar .server-status.down .dot{background:#1D2129;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.topbar .icon-btn{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-aux);font-size:18px;transition:all .2s;position:relative}
.topbar .icon-btn:hover{background:#F6F4EC;color:var(--ui-primary)}
.topbar .icon-btn .badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--c-primary);border:2px solid #fff}
.topbar .admin-info{display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:4px;transition:background .2s}
.topbar .admin-info:hover{background:#F6F4EC}
.topbar .admin-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2CB86C,#1FA45B);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}
.topbar .admin-meta{display:flex;flex-direction:column;line-height:1.3}
.topbar .admin-name{font-size:13px;font-weight:600;color:var(--c-title)}
.topbar .admin-role{font-size:11px;color:var(--c-aux)}
.topbar .tb-divider{width:1px;height:22px;background:var(--c-border);flex-shrink:0}
/* ============ 2026-10-14 v1.4.723 顶栏照设计图精简 ============ */
/* 桌面端隐藏「菜单」收拢钮（侧栏默认展开；手机端保留作抽屉开关） */
@media (min-width:901px){.topbar .collapse-btn{display:none}}
/* 账号胶囊「主账号 ▾」+ 下拉面板（服务器状态/修改密码/退出收进面板） */
.topbar .account-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:10px;transition:background .2s}
.topbar .account-chip:hover{background:#F6F4EC}
.topbar .account-chip .admin-avatar{width:30px;height:30px;border-radius:50%;background:#1FA45B;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.topbar .account-chip .admin-name{font-size:13px;font-weight:600;color:var(--c-title)}
.topbar .account-chip .ac-caret{font-size:12px;color:#6B6F76;transition:transform .2s}
.topbar .account-chip.open .ac-caret{transform:rotate(180deg)}
.account-panel{position:fixed;top:58px;right:16px;width:224px;background:#fff;border:1px solid var(--c-border);border-radius:12px;box-shadow:0 12px 32px rgba(29,33,41,.14);z-index:300;overflow:hidden}
.account-panel .ap-head{padding:12px 14px;border-bottom:1px solid #F6F4EC;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.account-panel .ap-role{font-size:11px;color:#6B6F76;font-weight:600}
.account-panel .ap-server{margin:0}
.account-panel .ap-item{display:flex;width:100%;align-items:center;gap:8px;padding:11px 14px;border:none;background:#fff;cursor:pointer;font-size:13px;color:var(--c-title);transition:background .15s;text-align:left;font-family:inherit}
.account-panel .ap-item:hover{background:#E9F5EE}
.content-area{flex:1;overflow-y:auto;padding:24px;background:var(--c-page);max-width:1600px;margin:0 auto;width:100%}
.content-area::-webkit-scrollbar{width:8px}
.content-area::-webkit-scrollbar-thumb{background:#F0EDE2;border-radius:4px}
.page-enter{animation:pageEnter .35s ease}
@keyframes pageEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============ 通用卡片 ============ */
.card{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(24,36,32,.04),0 4px 16px rgba(24,36,32,.04);padding:16px}
/* v1.4.821 订单速览 KPI 卡（v4 设计稿）：圆底图标 + 大数字 + 底部副行 + 迷你走势 */
.od-kpi{position:relative;overflow:hidden}
.od-kpi .ktop{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.od-kpi .kico{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.od-kpi .kico.g{background:#E5F4EB;color:#1FA45B}
.od-kpi .kico.o{background:#F0EDE2;color:#1D2129}
.od-kpi .kico.n{background:#EEF1EE;color:#5E6B64}
.od-kpi .klab{font-size:12px;color:#5E6B64;font-weight:500}
.od-kpi .kval{font-size:25px;font-weight:800;color:#182420;letter-spacing:-.5px;line-height:1.05}
.od-kpi .kval.hot{color:#1D2129}
.od-kpi .kbot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:11px;color:#93A09A;min-height:16px}
/* v1.4.825 环比涨跌胶囊（真实环比：上一等长周期 pv* 字段） */
.od-kpi .delta{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:7px;white-space:nowrap}
.od-kpi .delta.up{color:#1FA45B;background:#E5F4EB}
.od-kpi .delta.dn{color:#1D2129;background:#F0EDE2}
.od-kpi .kspark{position:absolute;right:14px;bottom:12px;opacity:.92}
.card-title{font-size:15px;font-weight:600;color:var(--c-title);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.card-title .t-text{display:flex;align-items:center;gap:8px}
.card-title .t-text::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--ui-primary)}
.card-title .sub{font-size:12px;color:var(--c-aux);font-weight:400}

/* v1.4.840 死样式清退（grep js 零调用）：kpi-grid 系列容器、chart-grid/chart-card/
 * chart-title/chart-body 图表段、monitor-grid/monitor-card/monitor-header/server-list
 * 服务器监控段、order-flow/order-flow-node/flow-arrow 订单流程段——均为旧仪表盘/
 * 旧首页遗留，现视图零引用 */

/* ============ 表格工具栏 / 状态徽章 ============ */
.table-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;background:#fff;border-radius:12px;border:1px solid #F6F4EC;box-shadow:var(--shadow-card);padding:16px 20px}
.table-toolbar .toolbar-left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.table-toolbar .toolbar-right{margin-left:auto;display:flex;gap:8px}
.stat-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5}
.stat-badge.green{background:#E7F6ED;color:#1FA45B;border:1px solid #C9EED9}
.stat-badge.orange{background:#F9EDE3;color:#1D2129;border:1px solid #F1D4BC}
.stat-badge.blue{background:#fff;color:#1D2129;border:1px solid #F1D4BC}
.stat-badge.red{background:#F9EDE3;color:#1D2129;border:1px solid #F1D4BC}
.stat-badge.gray{background:#F6F4EC;color:#333333;border:1px solid #F0EDE2}
.stat-badge.purple{background:#F9EDE3;color:#1D2129;border:1px solid #F1D4BC}
.stat-badge.cyan{background:#F6F4EC;color:#1D2129;border:1px solid #F0EDE2}
.best-quote-row{background:#E7F6ED!important}
.best-quote-row:hover{background:#E7F6ED!important}
/* 2026-09-06 用户需求：商品三价一排芯片显示（与小程序 pp-price-chip 同风格同配色） */
.price-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;line-height:1.6;white-space:nowrap}
.price-chip.supply{background:#FFFFFF;color:#1D2129;border:1px solid #F0EDE2}
.price-chip.member{background:#F9EDE3;color:#1D2129;font-weight:700}
.price-chip.retail{background:#FFFFFF;color:#1D2129;border:1px solid #F0EDE2}

/* v1.4.840 死样式清退：order-flow/order-flow-node/flow-arrow 订单流程段（零调用） */

/* ============ 详情抽屉 ============ */
.detail-drawer{padding:0}
.detail-section{background:#F6F4EC;border-radius:10px;border:1px solid var(--c-border);padding:16px 18px;margin-bottom:16px}
.detail-section .sec-title{font-size:13px;font-weight:600;color:var(--c-title);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.detail-section .sec-title::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--ui-primary)}
.detail-row{display:flex;padding:10px 0;border-bottom:1px solid #F6F4EC}
.detail-row:last-child{border-bottom:none}
.detail-label{width:100px;color:var(--c-aux);font-size:13px;flex-shrink:0}
.detail-value{flex:1;font-size:13px;color:var(--c-title);font-weight:500}

/* ============ 提示条 ============ */
.alert-bar{background:#F9EDE3;border:1px solid #F1D4BC;border-radius:4px;padding:12px 18px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:#1D2129}

/* v1.4.839 死样式清退：服务器高峰期警报 peak-*（仪表盘板块撤除后零调用）、
 * 日志 log-list/log-level、realtime-dot/qps-display、basket-card——grep 实锤零调用；
 * slideInDown/peakPulse/shake 三个 keyframes 仅 peak 块引用随块删；pulse 有活引用（顶栏
 * server-status）其 keyframes 定义保留在前段 */

/* ============ 登录页 ============ */
.login-page{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--c-page);position:relative;overflow:hidden}
.login-page::before,.login-page::after{display:none}
.login-box{background:#fff;border-radius:16px;border:1px solid #F6F4EC;box-shadow:0 8px 30px rgba(29,33,41,.08);padding:48px 40px;width:400px;position:relative;z-index:2}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo .icon{width:72px;height:72px;background:var(--c-primary);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:16px}
.login-logo .title{font-size:24px;font-weight:700;color:var(--c-title);letter-spacing:1px}
.login-logo .subtitle{font-size:13px;color:var(--c-aux);margin-top:6px}
/* 登录表单：原生 .ipt 大号输入（原 el-input size=large → .ipt.ipt-lg，样式见 ui.css） */
.login-form .ipt{display:flex;width:100%;margin-bottom:18px}
.login-form .ipt input{height:44px;font-size:14px}
.login-form .ipt .ipt-prefix{width:40px}
/* v1.4.836 登录按钮随全局换血橙→绿（主操作=品牌绿，对齐 btn-primary）；logo 橙图为
 * v1.4.245 老板指令保留的品牌图不动。**选择器必须 .btn.login-btn**（ui.css 后加载，
 * 单 class 的 .login-btn 会被 .btn 白底覆盖——历史按钮一直显示白色的根因） */
.btn.login-btn{width:100%;height:46px;font-size:16px;font-weight:600;border:none;border-radius:10px;background:#1FA45B;box-shadow:0 6px 18px rgba(31,164,91,.25);letter-spacing:4px}
.btn.login-btn:hover{background:#23B465;opacity:1}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-tip{text-align:center;margin-top:18px;font-size:12px;color:var(--c-aux)}
.login-tip code{background:#F6F4EC;padding:2px 6px;border-radius:4px;color:var(--ui-primary);font-family:inherit}

/* v1.4.839 死样式整段清退（grep js 零调用）：旧仪表盘「实时/节点网格/指标卡片/API 卡」
 * qps-number/qps-label/empty-tip/node-grid/node-card/metric-grid/metric-card/api-grid/api-card、
 * 旧押金筐 basket-grid、旧设置页 setting-section/setting-item/settings-footer——
 * 均为 690 时代旧首页/旧设置页遗留，现视图零引用 */

/* ============ 视图页通用（原生新增） ============ */
.section-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.section-header .s-title{font-size:16px;font-weight:800;color:var(--c-title);display:flex;align-items:center;gap:8px}
.form-item{display:flex;align-items:flex-start;gap:10px}
.form-item>label{width:90px;font-size:13px;color:var(--c-aux);padding-top:8px;flex-shrink:0;text-align:right}
.form-item .form-label{width:90px;font-size:13px;color:var(--c-aux);padding-top:8px;flex-shrink:0;text-align:right}
.form-item .fctrl{flex:1;min-width:0}
/* v1.4.840 死样式清退：filter-bar/form-grid/order-flow-container/order-flow-arrow
 * （grep js 零调用；漏斗箭头随 v1.4.813 漏斗卡撤除遗留） */

/* ============ 平板自适应（768px-1024px） ============ */
@media (max-width:1024px){
  .sidebar{width:150px}
  .sidebar.collapsed{width:43px}
  .menu-item{font-size:11px;height:26px}
  .topbar{padding:0 16px;gap:12px}
  .topbar .breadcrumb{font-size:14px}
  .content-area{padding:16px}
  .card{padding:16px}
  /* 原生弹窗平板适配（原 el-dialog 90% 宽规则） */
  .dlg{width:90%!important;max-width:600px}
}

/* ============ 手机端自适应（<768px） ============ */
@media (max-width:768px){
  .app-layout{flex-direction:row}
  /* 2026-09-05 二次改造（用户反馈：收拢图标条看不清菜单字、展开收拢方式不直观）：
   * 1) 撤掉 48px 图标条——侧栏整体移出屏幕（transform 纯 CSS 驱动，与 JS 判端解耦）；
   * 2) 顶部汉堡按钮改橙色胶囊「☰ 菜单」显式展开提示；
   * 3) mobile-open 滑入 180px 全文字抽屉 + 半透明遮罩，点菜单项/遮罩自动收拢 */
  .sidebar{width:180px;position:fixed;top:0;left:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .28s ease}
  .sidebar.mobile-open{transform:translateX(0);box-shadow:2px 0 16px rgba(0,0,0,.2)}
  .sidebar-mask{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(29,33,41,.38);z-index:150}
  .sidebar-logo{height:54px;padding:0 12px}
  .sidebar-logo .logo-text{display:block;font-size:13px}
  .menu-item{font-size:12px;height:32px;padding:0 10px}
  .sidebar-footer{display:none}
  .main-area{margin-left:0;flex:1;min-width:0}
  /* 顶部汉堡改橙色胶囊「☰ 菜单」展开提示（手机端显式可点） */
  .topbar .collapse-btn{width:auto;min-width:62px;height:32px;padding:0 12px;gap:4px;background:#E9F5EE;border:1px solid var(--ui-primary-light-5);color:var(--ui-primary);border-radius:10px}
  .topbar .collapse-btn .cb-label{display:inline;font-size:13px;font-weight:600}
  .bell-panel{top:44px;right:8px;width:calc(100vw - 24px)}
  .topbar{height:48px;padding:0 12px;gap:8px}
  .topbar .breadcrumb{font-size:13px}
  .topbar .server-status{display:none}
  .topbar .admin-meta{display:none}
  .topbar .icon-btn{width:32px;height:32px;font-size:16px}
  .content-area{padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .card{padding:12px;margin-bottom:12px}
  .card-title{font-size:14px;margin-bottom:12px}
  .table-toolbar{flex-direction:column;gap:8px;align-items:stretch}
  .toolbar-left{flex-wrap:wrap;gap:6px}
  .toolbar-left .ipt,.toolbar-left .sel,.toolbar-left .dr{width:100%!important;max-width:100%}
  .toolbar-right{flex-wrap:wrap;gap:6px;justify-content:flex-start}
  .toolbar-right .btn{margin-left:0!important}
  .nt{font-size:12px}
  .nt th{font-size:11px;padding:6px 4px}
  .nt td{padding:6px 4px}
  .dlg{width:95%!important;margin:5vh auto!important}
  .dlg .dlg-body{padding:16px}
  .form-item>label,.form-item .form-label{font-size:13px}
  .btn{font-size:13px}
  .tabs .tab{font-size:13px;padding:0 12px}
  .alert-bar{font-size:12px;padding:8px 12px}
  .login-box{width:92%!important;padding:24px 20px}
  .login-box h2{font-size:20px}
  .content-area > div{max-width:100%}
  .content-area > .card{max-width:100%}
}

/* ============ 超小屏幕自适应（<480px） ============ */
@media (max-width:480px){
  .content-area{padding:8px}
  .card{padding:10px}
  .nt{font-size:11px}
  .nt th{font-size:10px}
  .topbar{padding:0 8px}
  .topbar .breadcrumb{font-size:12px}
  /* 2026-09-05 二次改造：撤图标条后抽屉恒 180px，小屏不再缩窄 */
}

/* ============ v1.4.774 定稿骨架：UI.tabs 文字页签（v1.4.840 od-ttabs 死样式清退，
 * 其唯一调用方订单状态标签条 v1.4.377 起为内联样式渲染） ============ */
.tabs .tab{border-bottom:2.5px solid transparent}
.tabs .tab.active{color:#1D2129;font-weight:800;border-bottom-color:var(--ui-primary)}