/* =========================================================
   一苇科技 · 智算与云业务管理平台  样式系统  v2
   设计基调：层次分明的信息架构 / 克制而清晰的色彩 /
             数据可读性优先（等宽数字、对齐、留白）/
             处处可编辑的交互暗示
   ========================================================= */

:root{
  /* ---- 中性色 ---- */
  --c-bg:#f5f7fb;
  --c-bg-grad-a:#f7f9fd;
  --c-bg-grad-b:#eef1f8;
  --c-surface:#ffffff;
  --c-surface-2:#fafbfd;
  --c-surface-3:#f2f5fa;
  --c-border:#e8ebf2;
  --c-border-2:#dde2ec;
  --c-border-strong:#ccd4e2;

  --c-text:#141c2b;
  --c-text-2:#57627a;
  --c-text-3:#8b95a8;
  --c-text-4:#a9b2c3;

  /* ---- 主色 ---- */
  /* 主色与登录页保持同一套（#2b6bff 蓝），保证登录页与后台视觉连续 */
  --c-primary:#2b6bff;
  --c-primary-2:#478bfd;
  --c-primary-3:#7fb2ff;
  --c-primary-weak:#eef5ff;
  --c-primary-line:#d9e6ff;

  /* ---- 语义色 ---- */
  --c-ok:#0e9f6e;
  --c-ok-2:#10b981;
  --c-ok-weak:#e7f8f1;
  --c-warn:#d97706;
  --c-warn-2:#f59e0b;
  --c-warn-weak:#fef6e7;
  --c-bad:#dc2626;
  --c-bad-2:#ef4444;
  --c-bad-weak:#fdeeee;
  --c-info:#2563eb;
  --c-info-weak:#e8f1fe;
  --c-purple:#7c3aed;
  --c-purple-weak:#f2ecfe;
  --c-cyan:#0891b2;
  --c-cyan-weak:#e3f6fa;

  /* ---- 圆角 / 阴影 ---- */
  --r-xs:4px;
  --r-sm:6px;
  --r:10px;
  --r-lg:14px;
  --r-xl:18px;
  --r-2xl:22px;

  --sh-xs:0 1px 2px rgba(16,24,40,.04);
  --sh-1:0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);
  --sh-2:0 4px 14px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.04);
  --sh-3:0 12px 32px rgba(16,24,40,.13), 0 2px 8px rgba(16,24,40,.06);
  --sh-4:0 24px 60px rgba(16,24,40,.18);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);

  --sidebar-w:248px;
  --topbar-h:62px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--c-bg);
  color:var(--c-text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:var(--c-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#cdd4e0;border-radius:10px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#b6bfd0;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

/* =========================================================
   布局骨架
   ========================================================= */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  border-right:1px solid var(--c-border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:60;
}
.sidebar-head{
  height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;border-bottom:1px solid var(--c-border);
  background:linear-gradient(120deg,#fbfcff,#f4f6fd);
}
/* 品牌区：可点击返回首页 */
.brand{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;border-radius:9px;
  padding:5px 9px;margin-left:-9px;transition:background .16s;}
.brand:hover{background:rgba(43,107,255,.07);}
.brand:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px;}
/* 品牌标：使用一苇官方 logo 的图形部分（PNG 带透明通道，可直接叠在浅色头部上） */
.brand-mark{
  width:54px;height:31px;flex:0 0 54px;display:block;object-fit:contain;
  border-radius:0;background:none;box-shadow:none;
}
.brand-title{font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.2px;}
.brand-sub{font-size:10.5px;color:var(--c-text-3);line-height:1.35;white-space:nowrap;}

.nav{flex:1;overflow-y:auto;padding:12px 10px 16px;}
.nav-group-title{
  font-size:10.5px;color:var(--c-text-4);padding:12px 11px 6px;letter-spacing:1.1px;
  font-weight:700;text-transform:uppercase;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--r);cursor:pointer;
  color:var(--c-text-2);font-size:13.5px;margin-bottom:1px;user-select:none;
  transition:background .16s,color .16s,transform .16s;
  position:relative;
}
.nav-item:hover{background:var(--c-surface-3);color:var(--c-text);}
.nav-item.active{
  background:var(--c-primary-weak);color:var(--c-primary);font-weight:600;
}
.nav-item.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--c-primary);
}
.nav-item .ico{
  width:20px;height:20px;text-align:center;font-size:15px;flex:0 0 20px;
  display:flex;align-items:center;justify-content:center;
}
/* 导航图标改为内联 SVG：统一基线，颜色跟随 currentColor（hover / active 自动变色） */
.nav-item .ico svg{display:block;flex:0 0 auto;}
.nav-item.active .ico svg{stroke-width:1.9;}
.nav-item .badge-lock{margin-left:auto;font-size:10px;color:var(--c-text-4);}

.sidebar-foot{padding:12px;border-top:1px solid var(--c-border);background:var(--c-surface-2);}
.env-tag{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:var(--c-ok);background:var(--c-ok-weak);
  border:1px solid #cdeee0;border-radius:999px;padding:4px 10px;margin-bottom:10px;
  font-weight:600;letter-spacing:.2px;
}
.env-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-ok-2);flex:none;}
.side-user{display:flex;align-items:center;gap:9px;}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:linear-gradient(135deg,var(--c-primary-2),var(--c-primary));
  color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  box-shadow:0 2px 8px rgba(43,107,255,.25);
}
.side-user-name{font-size:13px;font-weight:600;line-height:1.25;}
.side-user-role{font-size:11px;color:var(--c-text-3);}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  height:var(--topbar-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:12px;padding:0 20px;
  position:sticky;top:0;z-index:50;
}
.topbar-title{font-size:16px;font-weight:700;white-space:nowrap;letter-spacing:.2px;}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px;}
.menu-btn{display:none;}
.filter-bar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.dash{color:var(--c-text-4);}

/* ---------- 顶栏账号菜单（头像 + 姓名 + 角色 → 下拉） ---------- */
.user-menu{position:relative;}
.user-trigger{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 9px 0 6px;
  border:1px solid transparent;border-radius:11px;background:transparent;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .16s,border-color .16s;
}
.user-trigger:hover{background:var(--c-surface-3);border-color:var(--c-border);}
.user-trigger[aria-expanded="true"]{background:var(--c-primary-weak);border-color:var(--c-primary-line);}
.user-avatar{width:30px;height:30px;flex:0 0 30px;font-size:12.5px;box-shadow:none;}
.user-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.user-name{font-size:13px;font-weight:600;color:var(--c-text);white-space:nowrap;}
.user-role{font-size:10.5px;color:var(--c-text-3);white-space:nowrap;}
.user-caret{width:14px;height:14px;flex:none;fill:none;stroke:var(--c-text-4);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s,stroke .18s;}
.user-trigger[aria-expanded="true"] .user-caret{transform:rotate(180deg);stroke:var(--c-primary);}

.user-drop{
  position:absolute;right:0;top:calc(100% + 8px);width:254px;z-index:80;
  background:#fff;border:1px solid var(--c-border);border-radius:14px;padding:6px;
  box-shadow:0 18px 44px rgba(18,35,80,.16);
  animation:umIn .16s cubic-bezier(.22,.8,.32,1) both;
}
@keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ud-head{padding:10px 12px 11px;}
.ud-name{font-size:13.5px;font-weight:700;color:var(--c-text);}
.ud-meta{font-size:11.5px;color:var(--c-text-3);margin-top:4px;line-height:1.7;word-break:break-all;}
.ud-sep{height:1px;background:var(--c-border);margin:5px 6px;}
.ud-item{
  width:100%;display:flex;align-items:center;gap:9px;padding:9px 12px;border:0;border-radius:9px;
  background:transparent;color:var(--c-text-2);font-size:13px;font-family:inherit;cursor:pointer;
  text-align:left;transition:background .14s,color .14s;
}
.ud-item:hover{background:var(--c-surface-3);color:var(--c-text);}
.ud-item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.ud-item.ud-danger{color:var(--c-bad);}
.ud-item.ud-danger:hover{background:var(--c-bad-weak);color:var(--c-bad);}

/* 个人资料弹窗内的只读信息表 */
.um-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r);padding:4px 12px;}
.um-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;}
.um-row + .um-row{border-top:1px solid var(--c-border);}
.um-k{font-size:12.5px;color:var(--c-text-3);flex:none;}
.um-v{font-size:13px;color:var(--c-text);font-weight:500;text-align:right;word-break:break-all;}
.um-v code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:#fff;border:1px solid var(--c-border);border-radius:6px;padding:2px 7px;}
.um-err{color:var(--c-bad);font-size:12.5px;line-height:1.6;min-height:16px;margin-top:7px;}

@media (max-width:900px){
  .user-meta{display:none;}
  .user-trigger{padding:0 7px 0 5px;gap:6px;}
}

.view{flex:1;padding:18px 20px;min-width:0;}
.foot{padding:14px 20px 24px;color:var(--c-text-4);font-size:12px;text-align:center;}

.sidebar-mask{display:none;position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:55;backdrop-filter:blur(2px);}
.tabbar{display:none;}

/* =========================================================
   页面头 / 区块头
   ========================================================= */
.page-head{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;
}
.page-head .ph-main{min-width:0;flex:1;}
.page-head .ph-crumb{
  font-size:11.5px;color:var(--c-text-4);margin-bottom:3px;letter-spacing:.3px;
}
.page-head .ph-crumb b{color:var(--c-text-3);font-weight:600;}
.page-head .ph-title{
  font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.2;
  display:flex;align-items:center;gap:9px;
}
.page-head .ph-title .ph-ico{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--c-primary-weak);color:var(--c-primary);
}
.page-head .ph-sub{font-size:12.5px;color:var(--c-text-3);margin-top:3px;line-height:1.5;}
.page-head .ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.sec-head{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.sec-head .sh-bar{
  width:3px;height:15px;border-radius:3px;background:var(--c-primary);flex:0 0 3px;
}
.sec-head .sh-title{font-size:14.5px;font-weight:700;letter-spacing:.1px;}
.sec-head .sh-sub{font-size:12px;color:var(--c-text-3);}
.sec-head .sh-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* =========================================================
   基础组件
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;border-radius:var(--r);border:1px solid var(--c-border-2);
  background:#fff;color:var(--c-text);cursor:pointer;font-size:13px;font-weight:500;
  transition:.16s;white-space:nowrap;box-shadow:var(--sh-xs);
}
.btn:hover{border-color:var(--c-primary-3);color:var(--c-primary);transform:translateY(-1px);box-shadow:var(--sh-1);}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:linear-gradient(180deg,var(--c-primary-2),var(--c-primary));
  border-color:var(--c-primary);color:#fff;
  box-shadow:0 2px 8px rgba(43,107,255,.25);
}
.btn-primary:hover{
  background:linear-gradient(180deg,var(--c-primary),#1d55e0);
  border-color:#1d55e0;color:#fff;box-shadow:0 4px 14px rgba(43,107,255,.32);
}
.btn-danger{color:var(--c-bad);border-color:#f2c9c9;}
.btn-danger:hover{background:var(--c-bad-weak);border-color:var(--c-bad-2);color:var(--c-bad);}
.btn-ghost{background:var(--c-surface-2);box-shadow:none;}
.btn-ghost:hover{background:var(--c-surface-3);}
.btn-sm{height:29px;padding:0 11px;font-size:12px;border-radius:var(--r-sm);}
.btn-xs{height:24px;padding:0 8px;font-size:11.5px;border-radius:var(--r-sm);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

.icon-btn{
  width:32px;height:32px;border-radius:var(--r);border:1px solid transparent;background:transparent;
  cursor:pointer;color:var(--c-text-2);font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.icon-btn:hover{background:var(--c-surface-3);color:var(--c-primary);}

.sel{
  height:34px;padding:0 9px;border:1px solid var(--c-border-2);border-radius:var(--r);
  background:#fff;font-size:13px;cursor:pointer;max-width:170px;box-shadow:var(--sh-xs);
  transition:.15s;
}
.sel:hover{border-color:var(--c-border-strong);}
.sel:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(43,107,255,.11);}
.date-input{max-width:140px;font-size:12px;}

/* 卡片 */
.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);margin-bottom:16px;overflow:hidden;
  transition:box-shadow .2s,border-color .2s;
}
.card.hoverable:hover{box-shadow:var(--sh-2);border-color:var(--c-border-2);}
.card-head{
  display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--c-border);
  background:linear-gradient(180deg,#fdfdff,#fbfcfe);
}
.card-title{font-size:14px;font-weight:700;letter-spacing:.1px;display:flex;align-items:center;gap:7px;}
.card-sub{font-size:12px;color:var(--c-text-3);margin-top:1px;line-height:1.45;}
.card-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.card-body{padding:16px;}
.card-body.tight{padding:8px 10px 12px;}
.card-body.flush{padding:0;}

.grid{display:grid;gap:16px;}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.big-num{font-size:26px;font-weight:700;line-height:1.2;color:var(--c-text-1);}
.commission-calc{margin-top:12px;border-top:1px dashed #e5e7eb;padding-top:10px;}
.cc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cc-row label{font-size:12px;color:var(--c-text-3);}
.cc-row .inp{width:120px;}
.cc-out{margin-top:8px;font-size:13px;color:var(--c-text-2);}
.cc-out b{color:var(--c-text-1);font-size:15px;}
.g-2-1{grid-template-columns:2fr 1fr;}
/* 月度目标 · 云厂商拆分 */
.tg-vendor{border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;margin-top:10px;}
.tg-vendor-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap;}
.tg-vendor-head b{font-size:13px;color:var(--c-text-1);}
.tg-sum{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-border);font-size:12.5px;color:var(--c-text-2);}
.tg-vline{font-size:11.5px;color:var(--c-text-2);padding:0 0 7px 20px;line-height:1.6;}
.tg-vline b{color:var(--c-text-1);}
.g-1-2{grid-template-columns:1fr 2fr;}
.section-title{font-size:15px;font-weight:700;margin:4px 0 12px;display:flex;align-items:center;gap:8px;}
.section-title .tip{font-size:12px;font-weight:400;color:var(--c-text-3);}

/* =========================================================
   指标卡（v2：含迷你趋势 / 进度 / 状态）
   ========================================================= */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.kpi-grid.g-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.kpi{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:14px 16px 13px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-1px);}
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--c-primary-2),var(--c-primary));
}
.kpi.ok::before{background:linear-gradient(180deg,var(--c-ok-2),var(--c-ok));}
.kpi.warn::before{background:linear-gradient(180deg,var(--c-warn-2),var(--c-warn));}
.kpi.bad::before{background:linear-gradient(180deg,var(--c-bad-2),var(--c-bad));}
.kpi-label{
  font-size:12.5px;color:var(--c-text-2);display:flex;align-items:center;gap:6px;
  font-weight:500;line-height:1.4;
}
.kpi-label .kpi-hint{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;font-size:9px;
  background:var(--c-surface-3);color:var(--c-text-3);cursor:help;flex:0 0 14px;
}
.kpi-value{
  font-size:27px;font-weight:800;letter-spacing:-.8px;margin:7px 0 3px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kpi-value .unit{font-size:13px;font-weight:600;color:var(--c-text-3);margin-left:3px;letter-spacing:0;}
.kpi-foot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--c-text-3);flex-wrap:wrap;}
.delta{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-variant-numeric:tabular-nums;}
.delta.up{color:var(--c-ok);} .delta.down{color:var(--c-bad);} .delta.flat{color:var(--c-text-3);}
.kpi-top{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;}
.kpi-status{
  flex:0 0 auto;max-width:100%;margin-left:auto;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-status.ok{background:var(--c-ok-weak);color:var(--c-ok);}
.kpi-status.warn{background:var(--c-warn-weak);color:var(--c-warn);}
.kpi-status.bad{background:var(--c-bad-weak);color:var(--c-bad);}
/* 迷你趋势条 */
.kpi-spark{display:flex;align-items:flex-end;gap:2px;height:22px;margin:6px 0 2px;}
.kpi-spark i{
  flex:1;background:var(--c-primary-3);border-radius:2px 2px 0 0;min-height:2px;opacity:.55;
}
.kpi-spark i:last-child{opacity:1;background:var(--c-primary);}

/* =========================================================
   标签 / 徽章 / 药丸
   ========================================================= */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:600;line-height:19px;
  white-space:nowrap;
}
.tag i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75;}
.tag-gray{background:var(--c-surface-3);color:var(--c-text-2);}
.tag-blue{background:var(--c-info-weak);color:var(--c-info);}
.tag-green{background:var(--c-ok-weak);color:var(--c-ok);}
.tag-orange{background:var(--c-warn-weak);color:var(--c-warn);}
.tag-red{background:var(--c-bad-weak);color:var(--c-bad);}
.tag-purple{background:var(--c-purple-weak);color:var(--c-purple);}
.tag-cyan{background:var(--c-cyan-weak);color:var(--c-cyan);}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:20px;font-size:12px;
  background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text-2);
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;margin-left:auto;border-radius:9px;background:var(--c-bad);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;
}
.dot-unread{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c-bad);vertical-align:middle;}

/* 分段控件 */
.seg{
  display:inline-flex;align-items:center;gap:3px;padding:3px;
  background:var(--c-surface-3);border-radius:var(--r);border:1px solid var(--c-border);
}
.seg button{
  height:26px;padding:0 11px;border:none;background:transparent;border-radius:7px;
  font-size:12.5px;color:var(--c-text-2);cursor:pointer;transition:.15s;font-weight:500;
  white-space:nowrap;
}
.seg button:hover{color:var(--c-text);}
.seg button.on{background:#fff;color:var(--c-primary);font-weight:600;box-shadow:var(--sh-1);}

/* =========================================================
   表格
   ========================================================= */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:640px;}
table.tbl th{
  text-align:left;padding:10px 12px;
  background:linear-gradient(180deg,#fafbfd,#f6f8fc);
  color:var(--c-text-2);font-weight:600;font-size:12px;
  border-bottom:1px solid var(--c-border);white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl th.sortable{cursor:pointer;user-select:none;}
table.tbl th.sortable:hover{color:var(--c-primary);}
table.tbl td{padding:9px 12px;border-bottom:1px solid #f1f4f9;vertical-align:middle;}
table.tbl tbody tr{transition:background .12s;}
table.tbl tbody tr:hover{background:#f8fafd;}
table.tbl tbody tr.clickable{cursor:pointer;}
table.tbl tbody tr:last-child td{border-bottom:none;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.mono{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px;}
.strong{font-weight:600;}
.muted{color:var(--c-text-3);}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;display:inline-block;vertical-align:bottom;}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}

/* 可编辑单元格提示 */
.td-edit{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:var(--r-sm);
  border:1px dashed transparent;cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums;
}
.td-edit:hover{border-color:var(--c-primary-3);background:var(--c-primary-weak);}
.td-edit::after{content:"✎";font-size:10px;color:var(--c-text-4);}
.td-edit:hover::after{color:var(--c-primary);}

.empty{padding:44px 16px;text-align:center;color:var(--c-text-3);font-size:13px;}
.empty .big{font-size:34px;display:block;margin-bottom:10px;opacity:.35;}
.empty .eh{font-weight:600;color:var(--c-text-2);margin-bottom:4px;font-size:14px;}

/* =========================================================
   工具栏 / 搜索
   ========================================================= */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.toolbar .search{
  height:34px;padding:0 11px;border:1px solid var(--c-border-2);border-radius:var(--r);
  min-width:180px;flex:1;max-width:300px;background:#fff;box-shadow:var(--sh-xs);
}
.toolbar .search:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(43,107,255,.11);}

/* =========================================================
   图表
   ========================================================= */
.chart{width:100%;height:300px;}
.chart-sm{height:240px;}
.chart-lg{height:380px;}
.chart-box{position:relative;}

/* =========================================================
   进度条 / 能力条 / 环形仪表
   ========================================================= */
.progress{height:9px;background:#eef1f6;border-radius:20px;overflow:hidden;position:relative;}
.progress .bar{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--c-primary-3),var(--c-primary));}
.progress .bar.ok{background:linear-gradient(90deg,#34d399,var(--c-ok));}
.progress .bar.warn{background:linear-gradient(90deg,#fbbf24,var(--c-warn));}
.progress .bar.bad{background:linear-gradient(90deg,#f87171,var(--c-bad));}
.progress .mark{position:absolute;top:-3px;width:2px;height:15px;background:var(--c-text-2);}
.progress-lg{height:16px;border-radius:20px;}
.progress-lg .mark{top:-3px;height:22px;}

/* 能力条：标签 + 数值 + 条 */
.cap{display:flex;flex-direction:column;gap:5px;}
.cap-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.cap-label{flex:0 0 62px;color:var(--c-text-2);font-size:12px;}
.cap-track{flex:1;height:7px;background:#eef1f6;border-radius:20px;overflow:hidden;}
.cap-fill{height:100%;border-radius:20px;transition:width .35s ease;}
.cap-fill.ok{background:linear-gradient(90deg,#34d399,var(--c-ok));}
.cap-fill.mid{background:linear-gradient(90deg,#60a5fa,var(--c-info));}
.cap-fill.warn{background:linear-gradient(90deg,#fbbf24,var(--c-warn));}
.cap-fill.bad{background:linear-gradient(90deg,#f87171,var(--c-bad));}
.cap-fill.mute{background:linear-gradient(90deg,#cbd5e1,#94a3b8);}
.cap-val{flex:0 0 auto;min-width:52px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:12px;}
.cap-val small{font-weight:500;color:var(--c-text-3);font-size:11px;}

/* 环形仪表（利用率等） */
.gauge{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.gauge svg{transform:rotate(-90deg);display:block;}
.gauge .g-track{stroke:#eef1f6;}
.gauge .g-fill{transition:stroke-dashoffset .5s ease;stroke-linecap:round;}
.gauge .g-txt{
  position:absolute;text-align:center;line-height:1.15;
}
.gauge .g-txt .gv{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.gauge .g-txt .gl{font-size:9.5px;color:var(--c-text-3);margin-top:1px;}

/* 目标进度头图 */
.goal-hero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:center;
  background:linear-gradient(135deg,#f6f8ff 0%,#fdfdff 60%,#f7f5ff 100%);
  border:1px solid var(--c-primary-line);border-radius:var(--r-xl);
  padding:18px 20px;box-shadow:var(--sh-1);
}
.goal-hero .goal-num{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.1;}
.goal-hero .goal-sub{color:var(--c-text-2);font-size:13px;}
.goal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.goal-stat{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r);padding:9px 11px;
  box-shadow:var(--sh-xs);
}
.goal-stat .l{font-size:11.5px;color:var(--c-text-3);}
.goal-stat .v{font-size:17px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums;}

/* 图例 / 排名 */
.legend-list{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.legend-row{display:flex;align-items:center;gap:9px;font-size:13px;}
.legend-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;}
.legend-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.legend-val{font-variant-numeric:tabular-nums;font-weight:600;}
.legend-pct{color:var(--c-text-3);width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;}

.rank-list{display:flex;flex-direction:column;gap:11px;}
.rank-row{display:flex;align-items:center;gap:11px;}
.rank-no{
  width:23px;height:23px;border-radius:7px;flex:0 0 23px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--c-surface-3);color:var(--c-text-2);
}
.rank-no.top1{background:#fff2d6;color:#c98a08;} .rank-no.top2{background:#eceff3;color:#7a869a;} .rank-no.top3{background:#fbe9db;color:#b5702f;}
.rank-main{flex:1;min-width:0;}
.rank-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;}
.rank-bar{height:6px;background:#eef1f6;border-radius:20px;margin-top:5px;overflow:hidden;}
.rank-bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--c-primary-3),var(--c-primary));}
.rank-val{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px;text-align:right;min-width:82px;}
.rank-val small{display:block;font-weight:500;color:var(--c-text-3);font-size:11.5px;}

/* =========================================================
   供应商卡片（v2：能力具象化）
   ========================================================= */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;}
.sup-card{
  border:1px solid var(--c-border);border-radius:var(--r-lg);padding:0;background:#fff;
  box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s,border-color .2s;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.sup-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--c-border-2);}
.sup-card.paused{background:var(--c-surface-2);}
.sup-card.paused .sup-name{color:var(--c-text-2);}
.sup-top{padding:14px 15px 12px;border-bottom:1px solid var(--c-border);background:linear-gradient(180deg,#fdfdff,#fff);}
.sup-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px;}
.sup-logo{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
  background:linear-gradient(135deg,var(--c-primary-weak),#e8ecff);color:var(--c-primary);
}
.sup-card.model .sup-logo{background:linear-gradient(135deg,var(--c-purple-weak),#ede8ff);color:var(--c-purple);}
.sup-name{font-weight:700;font-size:14.5px;line-height:1.3;letter-spacing:.1px;}
.sup-meta{font-size:11.5px;color:var(--c-text-3);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.sup-meta .sep{color:var(--c-text-4);}
.sup-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:8px;}

/* 能力区 */
.sup-body{padding:12px 15px;display:flex;flex-direction:column;gap:11px;flex:1;}
.sup-capgrid{display:flex;align-items:center;gap:13px;}
.sup-gauge-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;}
.sup-gauge-cap{font-size:10.5px;color:var(--c-text-3);}
.sup-caps{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}

.sup-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
}
.sup-metric{
  background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:6px 8px;min-width:0;
}
.sup-metric .l{font-size:10.5px;color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sup-metric .v{
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sup-metric .v small{font-size:11px;font-weight:600;color:var(--c-text-3);}
.sup-metric.acc-ok .v{color:var(--c-ok);}
.sup-metric.acc-warn .v{color:var(--c-warn);}
.sup-metric.acc-bad .v{color:var(--c-bad);}

/* 资源/模型清单 */
.sup-list{display:flex;flex-direction:column;gap:0;}
.sup-list-head{
  font-size:11px;color:var(--c-text-3);font-weight:600;letter-spacing:.3px;
  display:flex;align-items:center;gap:6px;margin-bottom:5px;
}
.sup-list-head .cnt{
  background:var(--c-surface-3);color:var(--c-text-2);border-radius:10px;
  padding:0 6px;font-size:10.5px;font-weight:700;
}
.machine-row{
  display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px dashed var(--c-border);font-size:12.5px;
}
.machine-row:last-child{border-bottom:none;}
.machine-name{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.machine-spec{color:var(--c-text-4);font-size:11px;}
.gen-badge{display:inline-block;font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:4px;margin-right:4px;vertical-align:middle;color:#fff;font-family:var(--font-ui);}
.gen-A{background:#5b8def;}
.gen-H{background:#22b07d;}
.gen-B{background:#8b5cf6;}
.gen-hw{background:#e5484d;}
.cn-badge{display:inline-block;font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:4px;margin-left:3px;vertical-align:middle;}
.cn-badge.ok{background:rgba(34,176,125,.14);color:#1b9c63;border:1px solid rgba(34,176,125,.4);}
.cn-badge.bad{background:rgba(229,72,77,.14);color:#d23b40;border:1px solid rgba(229,72,77,.4);}
.machine-row .gen-badge,.machine-row .cn-badge{margin-right:3px;}
.draft-bar{display:flex;align-items:center;gap:6px;font-size:12px;background:rgba(70,130,220,.08);border:1px solid rgba(70,130,220,.28);border-radius:8px;padding:7px 10px;margin-bottom:12px;}
.draft-bar .db-ico{font-size:13px;}
.draft-bar #draftMsg{font-weight:500;color:var(--c-text-2);}
.draft-bar .db-discard{margin-left:auto;}
.follow-item{padding:10px 0;border-bottom:1px solid var(--c-border);}

/* 待跟进待办卡 */
.follow-todo{margin-bottom:14px;}
.follow-todo .card-sub{font-size:11.5px;}
.todo-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.todo-stat{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-surface-2);cursor:pointer;transition:.15s;}
.todo-stat:hover{border-color:var(--c-primary);}
.todo-stat b{font-size:20px;line-height:1;color:var(--c-text);}
.todo-stat span{font-size:11.5px;color:var(--c-text-2);}
.todo-stat.on{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,var(--c-surface-2));}
.todo-stat.on b{color:var(--c-primary);}
.todo-stat-bad b{color:var(--c-bad);}
.todo-list{display:flex;flex-direction:column;gap:6px;}
.todo-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-surface-2);cursor:pointer;transition:.15s;}
.todo-item:hover{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 6%,var(--c-surface-2));}
.todo-name{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.todo-owner{color:var(--c-text-3);font-weight:400;font-size:11px;}
.todo-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11.5px;color:var(--c-text-2);}
.todo-empty{padding:10px;color:var(--c-text-3);font-size:12.5px;text-align:center;}
.follow-item:last-child{border-bottom:none;}
.fi-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.fi-at{font-weight:600;font-size:12.5px;color:var(--c-text);}
.fi-by{font-size:11.5px;color:var(--c-text-3);margin-left:auto;}
.fi-text{font-size:13px;color:var(--c-text-2);line-height:1.5;}
.fi-next{font-size:11.5px;color:var(--c-text-3);margin-top:3px;}
.text-bad{color:var(--c-bad);font-weight:600;}
.text-warn{color:var(--c-warn);font-weight:600;}
.text-ok{color:var(--c-ok);font-weight:600;}

/* ---- 全局淡水印（姓名 + 手机后 4 位）----
   覆盖整页且不拦截交互；z-index 高于抽屉 / 模态框但不高于 Toast，
   便于截图溯源，同时对表单可读性影响可忽略（透明度约 5%）。 */
.watermark{
  position:fixed;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;
  z-index:300;background-repeat:repeat;background-position:0 0;
}

/* ---- 导航：灰度模块标记 ---- */
.badge-gray{display:inline-block;margin-left:6px;padding:0 5px;border-radius:6px;font-size:10.5px;line-height:16px;
  background:var(--c-purple-weak);color:var(--c-purple);border:1px solid transparent;}

/* ---- 商机漏斗：阶段明细迷你条 ---- */
.fn-mini{margin-top:5px;height:5px;width:120px;background:var(--c-surface-3);border-radius:4px;overflow:hidden;}
.fn-mini i{display:block;height:100%;background:linear-gradient(90deg,#9db4f0,#5b8def);border-radius:4px;}

/* ---- 商机漏斗：阶段行点击 → 联动客户列表 ---- */
.fn-row-click{cursor:pointer;transition:background .15s;}
.fn-row-click:hover{background:var(--c-surface-2);}
.fn-go{display:inline-block;margin-top:4px;font-size:11px;color:var(--c-primary);}
.fn-row-click:hover .fn-go{text-decoration:underline;}
/* 客户列表：阶段联动筛选提示条 */
.stage-filter-bar .btn{margin-left:10px;vertical-align:middle;}

/* ---- 趋势：总结与建议卡 ---- */
.trend-insight{border-left:3px solid var(--c-primary);}
.ti-head{font-size:14px;font-weight:700;color:var(--c-text-1);line-height:1.7;margin-bottom:12px;
  padding:10px 12px;background:var(--c-primary-weak);border-radius:10px;}
.ti-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ti-item{border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;background:var(--c-surface);}
.ti-item.warn{border-color:var(--c-warn-weak);background:var(--c-warn-weak);}
.ti-item.ok{border-color:var(--c-ok-weak);}
.ti-item.info{border-color:var(--c-border);}
.ti-t{font-size:12.5px;font-weight:700;color:var(--c-text-1);margin-bottom:5px;}
.ti-x{font-size:12.5px;color:var(--c-text-2);line-height:1.65;}
.ti-a{font-size:11.5px;color:var(--c-text-3);line-height:1.6;margin-top:6px;padding-top:6px;border-top:1px dashed var(--c-border);}
@media (max-width:1000px){ .ti-list{grid-template-columns:1fr;} }

/* ---- 云线：双口径与返点档位卡 ---- */
.mbox{border:1px solid var(--c-border);border-radius:var(--r);padding:12px 14px;background:var(--c-surface-2);}
.mbox-l{font-size:11.5px;color:var(--c-text-3);}
.mbox-v{font-size:19px;font-weight:700;margin:4px 0 3px;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.mbox-f{font-size:11.5px;color:var(--c-text-3);line-height:1.5;}
.rb-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px dashed var(--c-border);}
.rb-row:first-child{border-top:none;}
.rb-name{flex:0 0 128px;font-size:13px;display:flex;align-items:center;gap:6px;padding-top:2px;}
.rb-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block;}
.rb-body{flex:1;min-width:0;}
.rb-top{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--c-text-2);align-items:center;}
.rb-top b{color:var(--c-text);}
.rb-bar{height:6px;background:var(--c-surface-3);border-radius:4px;overflow:hidden;margin-top:8px;}
.rb-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#9db4f0,#3b5bfd);}
@media (max-width:760px){ .rb-row{flex-direction:column;gap:6px;} .rb-name{flex:none;} }

/* ---- 趋势：明细合计行 ---- */
.trend-total{margin-top:-1px;}
.trend-total td{border-top:2px solid var(--c-border-strong);background:var(--c-surface-2);}

/* ---- 资金占用：回款延迟敏感性 ---- */
.cash-sens{display:flex;flex-direction:column;gap:4px;}
.cs-row{display:grid;grid-template-columns:88px 1fr 92px;gap:10px;align-items:center;}
.cs-label{font-size:12.5px;color:var(--c-text-2);font-weight:600;}
.cs-track{height:14px;background:var(--c-surface-3);border-radius:7px;overflow:hidden;}
.cs-bar{display:block;height:100%;border-radius:7px;transition:width .3s;}
.cs-bar.ok{background:linear-gradient(90deg,#7fd0b6,#0f9d76);}
.cs-bar.warn{background:linear-gradient(90deg,#f2ce8e,#e0952a);}
.cs-bar.bad{background:linear-gradient(90deg,#f2a6a6,#e5484d);}
.cs-val{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.cs-note{font-size:11px;color:var(--c-text-4);margin:0 0 8px 98px;}
.cs-note:last-child{margin-bottom:0;}

/* ---- 资金占用：12 个月现金流结构 ---- */
.cash-facts{display:flex;flex-direction:column;}
.cf-row{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;padding:9px 0;border-bottom:1px dashed var(--c-border);}
.cf-row:last-of-type{border-bottom:none;}
.cf-k{font-size:12.5px;color:var(--c-text-3);}
.cf-v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;justify-self:end;}
.cf-s{grid-column:1 / -1;font-size:11px;color:var(--c-text-4);line-height:1.5;}
@media (max-width:760px){ .cs-row{grid-template-columns:72px 1fr 72px;} .cs-note{margin-left:82px;} .cf-row{grid-template-columns:1fr;} .cf-v{justify-self:start;} }

/* ---- 成本上报：其他成本可自定义类目 ---- */
.cost-other{margin:14px 0 4px;border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;background:var(--c-surface-3);}
.cost-other .co-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.co-list{display:flex;flex-direction:column;gap:6px;}
.co-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 28px;gap:6px;align-items:center;}
.co-row input{padding:6px 8px;border:1px solid var(--c-border);border-radius:7px;font-size:13px;background:var(--c-bg);width:100%;box-sizing:border-box;}
.co-row .co-name{font-weight:500;}
.co-del{border:none;background:transparent;color:var(--c-text-3);cursor:pointer;font-size:14px;line-height:1;}
.co-del:hover{color:var(--c-bad);}
.co-sum{margin-top:8px;text-align:right;font-size:13px;color:var(--c-text-3);}
.co-sum b{color:var(--c-text);}
.co-empty{font-size:12px;color:var(--c-text-3);padding:6px 2px;}
.lock{font-size:11px;color:var(--c-text-3);border:1px solid var(--c-border);border-radius:6px;padding:1px 5px;margin-left:4px;background:var(--c-bg);}

/* 草稿箱入口按钮 + 列表 */
#btnDraftBox{position:relative;}
#btnDraftBox .badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--c-bad,#e0533d);color:#fff;font-size:11px;font-weight:600;line-height:1;}
.draft-list{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;}
.draft-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c-border,#e6e9f0);border-radius:10px;background:var(--c-bg,#fff);}
.draft-item:hover{border-color:var(--c-primary,#5b8def);}
.di-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.di-tag{flex:none;font-size:11px;padding:1px 7px;border-radius:6px;background:rgba(70,130,220,.12);color:var(--c-primary,#3a6fd8);font-weight:600;}
.di-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.di-time{flex:none;font-size:11px;color:var(--c-text-4,#9aa3b2);}
.di-act{flex:none;display:flex;gap:6px;}
.di-discard{color:var(--c-text-3,#7a8499);}
.machine-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px;}

.machine-chips{display:flex;flex-wrap:wrap;gap:5px;}
.chip{
  background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:2px 7px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--c-text-2);
}
.chip b{font-weight:700;color:var(--c-primary);}
.chip.pill-model{background:var(--c-purple-weak);border-color:#e4dcfd;color:#6d28d9;}
.chip.pill-model b{color:var(--c-purple);}
.chip-row .chip{cursor:pointer;transition:background .12s,border-color .12s,color .12s;user-select:none;}
.chip-row .chip:hover{background:var(--c-surface-3);border-color:var(--c-border-2);}
.chip-row .chip.chip-on{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:600;}
.model-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;margin:0 4px 4px 0;
  border:1px solid var(--c-border-2);border-radius:20px;background:var(--c-surface-2);
  font-size:11.5px;color:var(--c-text-2);
}
.model-chip b{color:var(--c-text);font-weight:700;font-variant-numeric:tabular-nums;}

/* 卡片底部：商务条件 + 操作 */
.sup-foot{
  padding:10px 15px;border-top:1px solid var(--c-border);background:var(--c-surface-2);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.sup-terms{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex:1;min-width:0;}
.term{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--c-text-2);
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r-sm);padding:2px 7px;
  cursor:pointer;transition:.15s;
}
.term:hover{border-color:var(--c-primary-3);color:var(--c-primary);}
.term b{font-weight:700;color:var(--c-text);font-variant-numeric:tabular-nums;}
.term.warn{background:var(--c-warn-weak);border-color:#f6e3bd;color:#92610a;}
.term.warn b{color:#92610a;}
.term.bad{background:var(--c-bad-weak);border-color:#f5cdcd;color:#b91c1c;}
.term.bad b{color:#b91c1c;}
.term-add{border-style:dashed;color:var(--c-text-4);}
.sup-ops{display:flex;gap:6px;align-items:center;margin-left:auto;}

/* 内联编辑 */
.ie{
  display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-sm);
  border:1px dashed transparent;padding:1px 5px;cursor:pointer;transition:.15s;
  font-variant-numeric:tabular-nums;
}
.ie:hover{border-color:var(--c-primary-3);background:var(--c-primary-weak);}
.ie::after{content:"✎";font-size:9.5px;color:var(--c-text-4);}
.ie:hover::after{color:var(--c-primary);}
.ie-input{
  height:26px;padding:0 6px;border:1px solid var(--c-primary);border-radius:var(--r-sm);
  font-size:12.5px;width:96px;background:#fff;font-variant-numeric:tabular-nums;
}
.ie-input:focus{outline:none;box-shadow:0 0 0 3px rgba(43,107,255,.12);}

/* 价格对比 */
.price-cmp{display:flex;flex-direction:column;gap:5px;}
.price-row{
  display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 7px;border-radius:var(--r-sm);
  background:var(--c-surface-2);border:1px solid var(--c-border);
}
.price-row.best{background:var(--c-ok-weak);border-color:#bfe9d7;}
.price-row .pk{flex:0 0 66px;color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.price-row .pv{flex:1;font-weight:700;font-variant-numeric:tabular-nums;}
.price-row .pg{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.price-row .pg.good{color:var(--c-ok);}
.price-row .pg.bad{color:var(--c-bad);}

/* =========================================================
   快捷操作菜单 / 抽屉
   ========================================================= */
.qa-wrap{position:relative;display:inline-flex;}
.qa-menu{
  position:absolute;right:0;top:calc(100% + 5px);z-index:120;min-width:172px;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:5px;animation:qain .14s ease-out;
}
@keyframes qain{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.qa-menu .qa-i{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:12.5px;color:var(--c-text-2);cursor:pointer;white-space:nowrap;transition:.12s;
}
.qa-menu .qa-i:hover{background:var(--c-primary-weak);color:var(--c-primary);}
.qa-menu .qa-i.danger:hover{background:var(--c-bad-weak);color:var(--c-bad);}
.qa-menu .qa-i .qi{width:15px;text-align:center;font-size:13px;flex:0 0 15px;}
.qa-menu .qa-sep{height:1px;background:var(--c-border);margin:4px 2px;}

/* 抽屉（详情面板） */
.drawer-mask{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:210;backdrop-filter:blur(2px);}
.drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(560px,100vw);background:#fff;z-index:211;
  box-shadow:var(--sh-4);display:flex;flex-direction:column;animation:slidein .22s cubic-bezier(.22,1,.36,1);
}
@keyframes slidein{from{transform:translateX(28px);opacity:.6;}to{transform:none;opacity:1;}}
.drawer-head{
  padding:15px 18px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:11px;
  background:linear-gradient(120deg,#fbfcff,#f5f7fd);
}
.drawer-title{font-size:15px;font-weight:700;}
.drawer-sub{font-size:11.5px;color:var(--c-text-3);margin-top:1px;}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px;}
.drawer-foot{
  padding:12px 18px;border-top:1px solid var(--c-border);background:var(--c-surface-2);
  display:flex;gap:8px;justify-content:flex-end;
}
.dsec{margin-bottom:18px;}
.dsec-t{
  font-size:11px;font-weight:700;color:var(--c-text-4);letter-spacing:1px;text-transform:uppercase;
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.dsec-t::after{content:"";flex:1;height:1px;background:var(--c-border);}
.kv{display:grid;grid-template-columns:88px 1fr;gap:7px 10px;font-size:12.5px;align-items:center;}
.kv .k{color:var(--c-text-3);}
.kv .v{font-weight:500;}
.kv .v.e{color:var(--c-text-4);font-style:italic;font-weight:400;}

/* 时间线（沟通记录） */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:16px;}
.timeline::before{
  content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1.5px;background:var(--c-border);
}
.tl-item{position:relative;padding:0 0 12px 4px;}
.tl-item::before{
  content:"";position:absolute;left:-15.5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--c-primary-3);border:2px solid #fff;box-shadow:0 0 0 1px var(--c-primary-3);
}
.tl-t{font-size:12.5px;font-weight:600;}
.tl-m{font-size:11px;color:var(--c-text-4);margin-top:1px;}
.tl-c{font-size:12px;color:var(--c-text-2);margin-top:3px;line-height:1.55;}

/* =========================================================
   模态框 / 表单
   ========================================================= */
.modal-mask{
  position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;
  backdrop-filter:blur(2px);
}
.modal{
  background:#fff;border-radius:var(--r-2xl);box-shadow:var(--sh-4);
  width:100%;max-width:640px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  animation:pop .18s cubic-bezier(.22,1,.36,1);
}
.modal.lg{max-width:940px;} .modal.sm{max-width:420px;}
@keyframes pop{from{transform:translateY(10px) scale(.985);opacity:0;}to{transform:none;opacity:1;}}
.modal-head{
  display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--c-border);
  background:linear-gradient(120deg,#fbfcff,#f6f8fd);border-radius:var(--r-2xl) var(--r-2xl) 0 0;
}
.modal-title{font-size:15px;font-weight:700;}
.modal-body{padding:16px 20px;overflow-y:auto;}
.modal-foot{
  display:flex;justify-content:flex-end;gap:9px;padding:13px 20px;border-top:1px solid var(--c-border);
  background:var(--c-surface-2);border-radius:0 0 var(--r-2xl) var(--r-2xl);
}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px;color:var(--c-text-2);font-weight:500;}
.field label .req{color:var(--c-bad);}
.field input,.field select,.field textarea{
  height:34px;padding:0 10px;border:1px solid var(--c-border-2);border-radius:var(--r);background:#fff;width:100%;
  transition:.15s;
}
.field textarea{height:74px;padding:8px 10px;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(43,107,255,.11);
}
.field .hint{font-size:11.5px;color:var(--c-text-4);line-height:1.45;}
/* 模态内嵌小表格的输入框 */
.mini-inp{
  width:100%;height:29px;border:1px solid var(--c-border-2);border-radius:var(--r-sm);
  padding:0 7px;font-size:12.5px;background:#fff;
}
.mini-inp:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(43,107,255,.1);}
textarea.mini-inp{height:auto;padding:6px 7px;resize:vertical;}

.switch-row{
  display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px dashed var(--c-border);gap:12px;
}
.switch-row:last-child{border-bottom:none;}
.switch-row .t{font-size:13px;font-weight:600;}
.switch-row .d{font-size:11.5px;color:var(--c-text-3);}
.switch{position:relative;width:42px;height:23px;flex:0 0 42px;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .sl{position:absolute;inset:0;background:#cfd6e4;border-radius:23px;cursor:pointer;transition:.18s;}
.switch .sl::before{
  content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.18s;box-shadow:var(--sh-1);
}
.switch input:checked + .sl{background:var(--c-primary);}
.switch input:checked + .sl::before{transform:translateX(19px);}
.switch input:disabled + .sl{opacity:.45;cursor:not-allowed;}

/* =========================================================
   Toast / 提示条
   ========================================================= */
.toast-root{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:400;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  background:#1f2739;color:#fff;padding:9px 16px;border-radius:var(--r);font-size:13px;
  box-shadow:var(--sh-3);animation:tin .2s cubic-bezier(.22,1,.36,1);max-width:88vw;
}
.toast.ok{background:var(--c-ok);} .toast.bad{background:var(--c-bad);} .toast.warn{background:var(--c-warn);}
@keyframes tin{from{transform:translateY(-10px);opacity:0;}to{transform:none;opacity:1;}}

.notice{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r);
  font-size:12.5px;margin-bottom:14px;border:1px solid;line-height:1.6;
}
.notice.info{background:var(--c-info-weak);border-color:#c9dcf8;color:#1a56a8;}
.notice.warn{background:var(--c-warn-weak);border-color:#f6e3bd;color:#8f5f08;}
.notice.ok{background:var(--c-ok-weak);border-color:#bde8da;color:#07704f;}
.notice .ni{font-size:15px;line-height:1.3;flex:0 0 auto;}

.spec-table td:first-child{font-weight:600;white-space:nowrap;}

/* 登录/切换账号 */
.user-list{display:flex;flex-direction:column;gap:9px;}
.user-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--c-border);
  border-radius:var(--r);cursor:pointer;transition:.15s;
}
.user-item:hover{border-color:var(--c-primary-3);background:var(--c-primary-weak);}
.user-item.current{border-color:var(--c-primary);background:var(--c-primary-weak);}
.user-item .ui-name{font-weight:600;font-size:13.5px;}
.user-item .ui-meta{font-size:11.5px;color:var(--c-text-3);}
.user-item .ui-right{margin-left:auto;text-align:right;}

/* =========================================================
   商机漏斗 / 通知 / 厂商 / 对账
   ========================================================= */
.funnel{display:flex;flex-direction:column;gap:8px;}
.fn-row{display:flex;align-items:center;gap:10px;}
.fn-label{flex:0 0 68px;font-size:12.5px;font-weight:600;color:var(--c-text-2);text-align:right;}
.fn-bar-wrap{flex:1;min-width:0;height:30px;background:var(--c-surface-3);border-radius:var(--r-sm);overflow:hidden;}
.fn-bar{
  height:100%;min-width:60px;display:flex;align-items:center;padding:0 9px;
  background:linear-gradient(90deg,var(--c-primary-3),var(--c-primary-2));border-radius:var(--r-sm);
  transition:width .35s ease;
}
.fn-txt{color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;}
.fn-meta{flex:0 0 auto;min-width:150px;font-size:11.5px;color:var(--c-text-3);display:flex;align-items:center;gap:5px;}

.notif-item{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;margin-bottom:8px;
  border:1px solid var(--c-border);border-radius:var(--r);background:#fff;transition:.15s;
}
.notif-item:hover{border-color:var(--c-border-strong);box-shadow:var(--sh-1);}
.notif-item.read{background:var(--c-surface-2);opacity:.75;}
.notif-item:last-child{margin-bottom:0;}
.notif-icon{
  flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--c-primary-weak);font-size:14px;
}
.notif-icon.warn{background:#fdf0e6;}
.notif-title{font-size:13.5px;font-weight:600;color:var(--c-text);}
.notif-content{font-size:12.5px;color:var(--c-text-2);line-height:1.6;margin-top:2px;}
.notif-meta{font-size:11px;color:var(--c-text-3);margin-top:5px;}

.sup-tabs{display:flex;gap:8px;flex-wrap:wrap;}

.vendor-row{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--c-border);border-radius:var(--r);margin-bottom:7px;background:#fff;
  transition:.15s;
}
.vendor-row:hover{border-color:var(--c-border-strong);box-shadow:var(--sh-1);}
.vendor-row.off{opacity:.55;background:var(--c-surface-2);}
.vendor-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.vendor-name{font-weight:600;font-size:13.5px;}
.vendor-k{font-size:11px;color:var(--c-text-3);font-family:var(--mono);}

.rec-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px;}
.rec-sum .rs{padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--r);background:var(--c-surface-2);}
.rec-sum .rs .l{font-size:11.5px;color:var(--c-text-3);}
.rec-sum .rs .v{font-size:18px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;}
.tag-red-line{color:var(--c-bad);font-weight:600;}

/* 悬浮快捷新增 */
.fab{
  position:fixed;right:22px;bottom:26px;z-index:90;
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--c-primary-2),var(--c-primary));color:#fff;
  font-size:23px;font-weight:300;line-height:1;
  box-shadow:0 6px 20px rgba(43,107,255,.38);
  display:none;align-items:center;justify-content:center;transition:.18s;
}
.fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(43,107,255,.45);}
.fab.show{display:flex;}

/* =========================================================
   打印
   ========================================================= */
@media print{
  .sidebar,.topbar,.tabbar,.card-tools,.toolbar,.row-actions,.fab{display:none !important;}
  .view{padding:0;}
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:1400px){
  .kpi-grid.g-5{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi-grid.g-5{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-2-1,.g-1-2{grid-template-columns:1fr;}
  .goal-hero{grid-template-columns:1fr;}
}

@media (max-width:1024px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--sh-4);
  }
  .sidebar.open{transform:none;}
  .sidebar-mask.show{display:block;}
  .menu-btn{display:flex;}
  .topbar{padding:0 12px;gap:8px;}
  .topbar-title{font-size:15px;}
  .filter-bar{gap:5px;}
  .sel{max-width:130px;font-size:12px;padding:0 6px;}
  .date-input{max-width:118px;}
  .view{padding:14px 12px 90px;}
  .fab{right:16px;bottom:78px;width:46px;height:46px;font-size:21px;}
}

@media (max-width:720px){
  body{font-size:13.5px;}
  .topbar{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 12px;}
  .topbar-title{order:1;flex:1;font-size:14.5px;}
  .topbar-tools{order:2;width:100%;margin-left:0;justify-content:space-between;gap:6px;}
  .filter-bar{flex:1;flex-wrap:wrap;gap:5px;}
  .filter-bar .sel{flex:1;max-width:none;min-width:0;}
  .filter-bar .date-input{flex:1;max-width:none;min-width:0;}
  .filter-bar .dash{display:none;}
  .kpi-grid,.kpi-grid.g-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .kpi{padding:12px 12px;}
  .kpi-value{font-size:22px;}
  .kpi-status{font-size:10.5px;}
  .page-head .ph-title{font-size:18px;}
  .grid{gap:12px;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .card{margin-bottom:12px;border-radius:var(--r);}
  .card-head{padding:11px 13px;flex-wrap:wrap;}
  .card-body{padding:13px;}
  .chart{height:250px;} .chart-lg{height:300px;} .chart-sm{height:220px;}
  .form-grid{grid-template-columns:1fr;}
  .modal{max-width:none;border-radius:var(--r-lg);}
  .goal-stats{grid-template-columns:1fr;}
  .sup-grid{grid-template-columns:1fr;}
  .sup-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}
  .drawer{width:100vw;}
  .foot{padding:10px 12px 76px;font-size:11px;}

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--c-border);z-index:70;padding:5px 2px calc(5px + env(safe-area-inset-bottom));
    overflow-x:auto;box-shadow:0 -2px 12px rgba(16,24,40,.06);
  }
  .tabbar::-webkit-scrollbar{display:none;}
  .tab-item{
    flex:1 0 auto;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:4px 6px;color:var(--c-text-3);font-size:10.5px;cursor:pointer;border-radius:var(--r-sm);
  }
  .tab-item .ti{font-size:17px;line-height:1.1;display:flex;align-items:center;justify-content:center;height:19px;}
  .tab-item .ti svg{display:block;}
  .tab-item.active{color:var(--c-primary);background:var(--c-primary-weak);}
}

/* ---- 角色权限矩阵：可编辑开关 ---- */
.perm-toggle{
  border:1px solid var(--c-border);background:var(--c-surface-3);border-radius:8px;
  padding:4px 12px;cursor:pointer;font-size:13px;line-height:1.4;transition:all .12s ease;
  color:var(--c-text-3);min-width:48px;
}
.perm-toggle:hover{filter:brightness(.97);}
.perm-toggle.on{background:var(--c-ok-weak);border-color:var(--c-ok);color:var(--c-ok);font-weight:600;}
.perm-toggle.off{background:var(--c-surface-3);color:var(--c-text-3);}

/* =========================================================
   我要反馈（内部论坛式）—— fb- 前缀
   ========================================================= */
.fb-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.fb-sum-c{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
  padding:11px 13px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-xs);
}
.fb-sum-c b{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--c-text);line-height:1.15;}
.fb-sum-c span{font-size:11.5px;color:var(--c-text-3);}
.fb-sum-c.hot{background:var(--c-warn-weak);border-color:#f6e3bd;}
.fb-sum-c.hot b{color:var(--c-warn);}

.fb-tool{border-bottom:1px dashed var(--c-border);padding-bottom:10px;margin-bottom:12px;}
.fb-tool-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px;}
.fb-tool-row:last-child{margin-bottom:0;}
.fb-tool-k{font-size:11.5px;color:var(--c-text-3);flex:0 0 30px;}
.fb-sort{margin-left:auto;display:flex;gap:6px;}

.fb-list{display:flex;flex-direction:column;gap:10px;}
.fb-loading{text-align:center;color:var(--c-text-3);font-size:13px;padding:34px 0;}

.fb-card{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--c-border);border-radius:var(--r);padding:13px 14px;
  background:var(--c-surface);cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s;
}
.fb-card:hover{border-color:var(--c-primary-line);box-shadow:var(--sh-1);transform:translateY(-1px);}

.fb-vote{
  flex:0 0 46px;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--c-border);border-radius:10px;padding:6px 0;background:var(--c-surface-2);
  color:var(--c-text-3);transition:.16s;user-select:none;
}
.fb-vote:hover{border-color:var(--c-primary-3);color:var(--c-primary);background:var(--c-primary-weak);}
.fb-vote.on{border-color:var(--c-primary);background:var(--c-primary-weak);color:var(--c-primary);}
.fb-vote-ico{font-size:11px;line-height:1;}
.fb-vote-n{font-size:13.5px;font-weight:700;line-height:1.2;}

.fb-main{flex:1;min-width:0;}
.fb-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.fb-title{font-size:14.5px;font-weight:700;color:var(--c-text);line-height:1.45;margin-bottom:4px;}
.fb-sub{font-size:12.5px;color:var(--c-text-2);line-height:1.65;}

.fb-st{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  border-radius:999px;padding:2px 9px;border:1px solid transparent;white-space:nowrap;
}
.fb-st-todo{background:var(--c-warn-weak);color:var(--c-warn);border-color:#f6e3bd;}
.fb-st-doing{background:var(--c-info-weak);color:var(--c-info);border-color:#cfe0fb;}
.fb-st-adopted{background:var(--c-purple-weak);color:var(--c-purple);border-color:#e4dcfd;}
.fb-st-done{background:var(--c-ok-weak);color:var(--c-ok);border-color:#cdeee0;}
.fb-st-drop{background:var(--c-surface-3);color:var(--c-text-3);border-color:var(--c-border);}

.fb-pin{font-size:11px;color:var(--c-warn);background:var(--c-warn-weak);border:1px solid #f6e3bd;
  border-radius:999px;padding:2px 9px;font-weight:600;}
.fb-newdot{font-size:11px;color:var(--c-bad);background:var(--c-bad-weak);border:1px solid #f7d4d4;
  border-radius:999px;padding:2px 9px;font-weight:600;}

.fb-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11.5px;color:var(--c-text-3);margin-top:8px;}
.fb-author{font-weight:600;color:var(--c-text-2);}
.fb-dot{color:var(--c-text-4);}

.fb-official{
  margin-top:9px;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  background:var(--c-ok-weak);border:1px solid #cdeee0;border-left:3px solid var(--c-ok);
  border-radius:var(--r-sm);padding:8px 11px;
}
.fb-off-tag{font-size:11px;font-weight:700;color:var(--c-ok);flex:none;}
.fb-off-txt{font-size:12.5px;color:var(--c-text-2);line-height:1.6;flex:1;min-width:0;}
.fb-reward{font-size:11.5px;font-weight:700;color:var(--c-warn);background:#fff7e6;
  border:1px solid #f6e3bd;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.fb-official.big{display:block;margin-top:16px;padding:12px 14px;}
.fb-official.big .fb-off-txt{margin-top:6px;}
.fb-off-meta{font-size:11.5px;color:var(--c-text-3);margin-top:7px;}

.fb-ops{flex:0 0 auto;display:flex;align-items:center;}

/* ---------------- 详情 ---------------- */
.fb-d-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px;}
.fb-d-title{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.4;margin:0 0 8px;color:var(--c-text);}
.fb-d-body{font-size:13.5px;line-height:1.95;color:var(--c-text-2);white-space:normal;}
.fb-imgs{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px;}
.fb-img{display:block;border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden;
  width:164px;height:112px;background:var(--c-surface-2);}
.fb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s;}
.fb-img:hover img{transform:scale(1.04);}

.fb-d-acts{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border);}
.fb-d-sec{font-size:12.5px;font-weight:700;color:var(--c-text-3);margin:18px 0 9px;letter-spacing:.3px;}

.fb-replies{display:flex;flex-direction:column;gap:9px;}
.fb-reply{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:9px 12px;}
.fb-reply.admin{background:var(--c-purple-weak);border-color:#e4dcfd;}
.fb-reply-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-text-3);margin-bottom:4px;}
.fb-reply-h b{color:var(--c-text-2);}
.fb-reply-t{font-size:13px;line-height:1.75;color:var(--c-text-2);white-space:pre-wrap;word-break:break-word;}

.fb-reply-box{display:flex;gap:8px;align-items:flex-end;margin-top:12px;}
.fb-reply-box textarea{
  flex:1;min-height:58px;max-height:150px;padding:9px 11px;border:1px solid var(--c-border-2);
  border-radius:var(--r-sm);font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;
  color:var(--c-text);background:var(--c-surface-2);
}
.fb-reply-box textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(43,107,255,.11);background:#fff;}

/* ---------------- 发帖表单 ---------------- */
.fb-radio{display:flex;gap:7px;flex-wrap:wrap;}
.fb-drop{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.fb-thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px;}
.fb-thumb{position:relative;width:104px;height:76px;border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface-2);}
.fb-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.fb-thumb-x{
  position:absolute;right:3px;top:3px;width:20px;height:20px;border:0;border-radius:50%;
  background:rgba(16,24,40,.62);color:#fff;font-size:11px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.fb-thumb-x:hover{background:var(--c-bad);}

@media (max-width:900px){
  .fb-sum{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fb-tool-k{flex-basis:100%;}
  .fb-sort{margin-left:0;}
  .fb-card{flex-wrap:wrap;}
  .fb-vote{flex-direction:row;gap:5px;flex-basis:auto;padding:4px 11px;}
  .fb-img{width:calc(50% - 5px);height:104px;}
}