/* =========================================================
   千牛饮料 B2B CRM — 企业级设计系统
   设计基准：8px 间距栅格 / 4 级字号 / 语义状态色 / 轻量描边分区
   兼容性：类名与旧版完全一致，仅替换视觉令牌
   ========================================================= */
:root{
  /* 品牌主色：暖金 #C9A961
     两档设计（关键取舍）：#C9A961 偏亮，白字压上去对比只有 2.3:1 不可读，
     所以「填充用金、文字用深金、金底配深棕字」——
       --primary      金色填充：主按钮底、进度条、选中块
       --primary-ink  深金文字：链接、选中文字、关键数值（白底 4.9:1，达 AA）
       --primary-on   金底上的字：深棕（5.4:1） */
  --primary:#C9A961;
  --primary-hover:#BB9A4C;
  --primary-active:#AC8A3F;
  --primary-2:#E0C88C;
  --primary-ink:#8A6C2C;
  --primary-ink-strong:#6B5220;
  --primary-on:#43330E;
  --primary-bg:#FBF5E7;
  --primary-border:#E8DABB;
  --primary-light:#FBF5E7;

  /* 页眉（顶栏）配色：换主色只改这一段。
     浅金底 + 深褐字：暖金 #C9A961 是中等亮度，白字压上去只有 2.1:1，糊成一片；
     所以前景整体反转成墨褐（#33260B 对底约 7.8:1），品牌图上也要换深版 bull-ink.png。
     改回深色页眉时：把 --hd-fg 系换回浅色、--hd-line 换深色，并把 index.html 的牛头换回 bull-gold.png。 */
  --hd-1:#DBBF85;              /* 渐变上端：受光面，比主色亮一档 */
  --hd-2:#C9A961;              /* 渐变下端：暖金主色（也是角标描边环的颜色） */
  --hd-line:#A98C4C;           /* 与内容区的分界线 */
  --hd-fg:#33260B;             /* 主文字：墨褐 */
  --hd-fg-2:rgba(51,38,11,.80);  /* 次级：图标、可点文字 */
  --hd-fg-3:rgba(51,38,11,.56);  /* 辅助：副标题、图标描边 */
  --hd-fg-4:rgba(51,38,11,.40);  /* 占位符 */
  --hd-gold:#5A4410;           /* 浅底上的强调：比正文更深一档的褐金 */
  --hd-hi:rgba(255,252,243,.55); /* 浅底上的"提亮"：悬停底、输入槽 */

  /* 中性色阶（整体转暖，与金色同调，避免冷灰发脏） */
  --text-1:rgba(38,30,18,.88);
  --text-2:rgba(38,30,18,.64);
  --text-3:rgba(38,30,18,.44);
  --text-4:rgba(38,30,18,.24);
  --border:#E4DBCB;
  --split:#F1EADC;
  --split-weak:#F7F2E8;
  --fill:#F7F2E8;
  --bg:#F6F1E6;
  --bg-head:#FCFAF4;
  --card:#FFFFFF;

  /* 语义状态色 */
  --ok:#389E0D;      --ok-bg:#F6FFED;
  --warn:#B26A00;    --warn-bg:#FFF6E5;
  --err:#CF1322;     --err-bg:#FFF1F0;
  --info:#0958D9;    --info-bg:#E6F4FF;
  --neutral-bg:#F5F5F5;

  /* 圆角 */
  --r-tag:2px;
  --r-input:4px;
  --r-btn:6px;
  --r-card:8px;

  /* 阴影：仅浮层与卡片微抬起 */
  --shadow-card:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02);
  --shadow-popup:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12);

  /* 兼容旧变量名 */
  --text:#303133;
  --text-sub:rgba(0,0,0,.45);
  --danger:var(--err);
  --warn-c:var(--warn);
  --info-c:var(--info);
  --ok-c:var(--ok);
  --radius:var(--r-card);
  --shadow:var(--shadow-card);
  --sidebar-bg:#FFFDF8;
  --border-c:#F1EADC;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  color:var(--text-1);background:var(--bg);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4{margin:0;}
.num,.s-val,.bar-val,.total,.amount{font-variant-numeric:tabular-nums;}

/* ---------- 图标（统一 16px 线性图标，不随主题变色） ---------- */
svg.ico{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;
        stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;}
svg.ico.lg{width:18px;height:18px;flex-basis:18px;}

/* ---------- 布局骨架 ---------- */
.layout{display:flex;min-height:100vh;padding-top:58px;}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:216px;flex:0 0 216px;background:#FFFDF8;
  border-right:1px solid var(--split);
  position:fixed;left:0;top:58px;bottom:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--split);}
.brand-logo{
  width:32px;height:32px;border-radius:6px;background:var(--primary);
  color:var(--primary-on);font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 32px;
}
.brand-name{font-size:14px;font-weight:600;color:var(--text-1);line-height:1.3;}
.brand-sub{font-size:11px;color:var(--text-3);margin-top:1px;}

.nav{padding:8px 0 4px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:10px;height:36px;margin:1px 8px;padding:0 10px;
  color:var(--text-2);cursor:pointer;font-size:13px;border-radius:6px;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--fill);color:var(--text-1);}
.nav-item.active{background:var(--primary-bg);color:var(--primary-ink);font-weight:500;}
.nav-ico{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center;
         color:var(--text-3);}
.nav-item.active .nav-ico,.nav-item:hover .nav-ico{color:inherit;}

.nav-group{margin:2px 0;}
.nav-group-title{
  display:flex;align-items:center;justify-content:space-between;
  height:30px;margin:6px 8px 2px;padding:0 10px;font-size:12px;color:var(--text-3);
  letter-spacing:.3px;cursor:pointer;user-select:none;border-radius:4px;
}
.nav-group-title:hover{color:var(--text-2);background:var(--split-weak);}
.nav-group-title .caret{width:12px;height:12px;display:flex;align-items:center;justify-content:center;
                        transition:transform .2s;color:var(--text-4);}
.nav-group:not(.open) .nav-group-body{display:none;}
.nav-group:not(.open) .caret{transform:rotate(-90deg);}
.nav-group-body{padding-bottom:2px;}

.sidebar-foot{padding:12px 16px;font-size:11px;color:var(--text-4);border-top:1px solid var(--split);}

/* ---------- 主区域 ---------- */
.main{flex:1;min-width:0;max-width:100%;margin-left:216px;overflow-x:hidden;display:flex;flex-direction:column;}

/* 页眉：锁定在顶部（sticky），滚动内容时不动。
   暖金底（#C9A961→#DBBF85）+ 墨褐字：与页面奶白/米色内容区同一暖调，
   信息层级靠明度拉（金条压深一档、内容区提亮），不靠色相打架。 */
.topbar{
  height:58px;background:linear-gradient(180deg,var(--hd-1),var(--hd-2));
  border-bottom:1px solid var(--hd-line);color:var(--hd-fg);
  display:flex;align-items:center;gap:14px;padding:0 20px;
  position:fixed;left:0;right:0;top:0;z-index:80;
  /* 顶部 1px 内高光 + 底部外投影：金属条感，不然整条金像贴了张色纸 */
  box-shadow:inset 0 1px 0 rgba(255,249,229,.55),0 2px 10px rgba(74,55,18,.22);
}
.topbar .hamburger{color:var(--hd-fg-2);}
.topbar .hamburger:hover{color:#1C1204;}
.hamburger{display:none;border:none;background:transparent;cursor:pointer;color:var(--text-2);
           align-items:center;justify-content:center;padding:4px;}

.tb-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
          padding:4px 6px;border-radius:6px;transition:background .15s;flex:none;}
.tb-brand:hover{background:var(--hd-hi);}
/* 品牌标识：千牛正式牛头标志（源自 qianniu-logo.png）。
   浅金页眉上用深褐版 bull-ink.png —— 金色牛头压在同色金底上会直接糊掉。
   投影走浅色（模拟凹刻），深色影子在浅金底上会显脏。 */
/* 40px 是试出来的下限：再小线稿牛头在 1440 宽页眉里只剩一个色点，认不出是牛。
   不用径向底色——浅金条上一圈淡色圆底会像擦不掉的污渍。 */
.tb-logo{width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;}
/* 浅金底上深褐线稿本来就细，再叠两层半像素同色投影把线宽"喂"实一点，
   不然牛头比旁边的品牌字单薄，看着像没加载完的占位图 */
.tb-logo .tb-bull{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(.5px 0 0 rgba(51,38,11,.85)) drop-shadow(0 .5px 0 rgba(51,38,11,.85));}
.tb-brand:hover .tb-logo .tb-bull{filter:drop-shadow(.5px 0 0 rgba(51,38,11,.95)) drop-shadow(0 .5px 0 rgba(51,38,11,.95)) drop-shadow(0 1px 3px rgba(255,250,236,.75));}
.tb-name{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;
         font-size:14px;font-weight:600;color:var(--hd-fg);letter-spacing:.3px;}
.tb-name small{font-size:9px;letter-spacing:1.8px;color:var(--hd-fg-3);font-weight:500;margin-top:1px;}
.tb-sep{width:1px;height:18px;background:rgba(51,38,11,.22);flex:none;}

.topbar .page-title{font-size:15px;font-weight:500;color:var(--hd-fg);letter-spacing:.3px;flex:none;}
.tb-grow{flex:1;}

.top-search{display:flex;align-items:center;gap:8px;width:272px;height:34px;padding:0 12px;
            background:var(--hd-hi);border:1px solid rgba(120,96,45,.26);
            border-radius:6px;transition:.15s;}
.top-search:focus-within{background:rgba(255,253,247,.80);border-color:rgba(90,70,28,.55);}
.top-search .ico{width:15px;height:15px;flex:0 0 15px;color:var(--hd-fg-3);}
.top-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;
                  color:var(--hd-fg);font-size:13px;}
.top-search input::placeholder{color:var(--hd-fg-4);}

.topbar .env-tag{background:rgba(255,250,238,.52);border:1px solid rgba(107,82,32,.30);
                 color:var(--hd-gold);font-size:11px;padding:0 6px;height:20px;line-height:18px;
                 border-radius:var(--r-tag);font-weight:500;}

.topbar .tb-item{display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;
                 border:none;background:transparent;color:var(--hd-fg-2);
                 font-size:13px;border-radius:6px;cursor:pointer;transition:.15s;}
.topbar .tb-item:hover{background:var(--hd-hi);color:#1C1204;}
.topbar .tb-item .ico{width:16px;height:16px;}

.topbar .bell{color:var(--hd-fg-2);width:32px;height:32px;border-radius:6px;}
.topbar .bell:hover{background:var(--hd-hi);color:#1C1204;}
/* 未读角标挂到图标的右上角外侧：默认的 top:1/right:0 会压在铃铛身上，
   浅金页眉上红点很跳，遮住半个铃铛格外显眼 */
.topbar .bell-dot{top:-3px;right:-5px;box-shadow:0 0 0 2px var(--hd-2);}
.tb-user{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:22px;
         cursor:pointer;position:relative;transition:background .15s;}
.tb-user:hover{background:var(--hd-hi);}
/* 头像：金底上不能再放金头像，反转成深褐底 + 浅金字，靠内外双环压住边 */
.tb-avatar{width:30px;height:30px;border-radius:50%;flex:0 0 30px;
           background:linear-gradient(160deg,#4E3A13,#33260B);color:#F2DFB2;
           box-shadow:inset 0 0 0 1px rgba(255,242,212,.28);
           font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;}
.tb-uinfo{display:flex;flex-direction:column;line-height:1.25;max-width:132px;}
.tb-uinfo b{font-size:13px;font-weight:500;color:var(--hd-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-uinfo i{font-size:11px;font-style:normal;color:var(--hd-fg-3);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-caret{width:13px;height:13px;color:var(--hd-fg-3);flex:0 0 13px;}

/* 用户下拉菜单 */
.user-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:216px;padding:6px;
           background:#fff;border:1px solid var(--border);border-radius:10px;
           box-shadow:0 10px 28px rgba(20,14,6,.18);display:none;z-index:90;text-align:left;}
.user-menu.show{display:block;}
.user-menu .um-head{padding:9px 11px 10px;border-bottom:1px solid var(--split);margin-bottom:5px;}
.user-menu .um-name{font-size:14px;font-weight:600;color:var(--text-1);}
.user-menu .um-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;}
.user-menu .um-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:6px;
                    font-size:13px;color:var(--text-2);cursor:pointer;}
.user-menu .um-item:hover{background:var(--primary-bg);color:var(--primary-ink);}
.user-menu .um-item.danger{color:var(--err);}
.user-menu .um-item.danger:hover{background:var(--err-bg);}
.user-menu .um-item .ico{width:15px;height:15px;flex:0 0 15px;}

.topbar-right{display:flex;align-items:center;gap:14px;}
.env-tag{background:#fff;border:1px solid var(--border);color:var(--text-2);font-size:11px;
         padding:0 6px;height:20px;line-height:18px;border-radius:var(--r-tag);font-weight:500;}
.user{font-size:13px;color:var(--text-1);}
.top-user-dept{font-size:11px;color:var(--text-3);margin-left:4px;}
.btn-logout{border:1px solid var(--border);background:#fff;color:var(--text-2);border-radius:var(--r-btn);
            height:30px;padding:0 12px;font-size:13px;cursor:pointer;transition:.15s;}
.btn-logout:hover{border-color:var(--primary);color:var(--primary-ink);}

.content{padding:20px 24px 72px;}

/* ---------- 卡片 / 工具条 ---------- */
.card{background:var(--card);border:1px solid var(--split);border-radius:var(--r-card);
      padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-card);overflow-x:auto;}
.card-title{font-size:15px;font-weight:600;color:var(--text-1);margin-bottom:14px;line-height:1.4;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.card-head .card-title{margin-bottom:0;}
.card-head .muted{font-size:12px;}

.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.toolbar .input{flex:1;min-width:180px;max-width:340px;}
.toolbar .muted{align-self:center;}

.input{
  border:1px solid var(--border);border-radius:var(--r-input);padding:0 10px;height:32px;
  font-size:13px;background:#fff;color:var(--text-1);outline:none;transition:border .15s,box-shadow .15s;
  min-width:0;
}
.input::placeholder{color:var(--text-4);}
.input:hover{border-color:#BDBDBD;}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(201,169,97,.10);}
select.input{height:32px;padding-right:6px;}
textarea.input{height:auto;min-height:72px;resize:vertical;width:100%;padding:8px 10px;line-height:1.5;}
input[type=file].input{padding:5px 8px;height:auto;font-size:12px;line-height:1.6;background:var(--bg-head);}
input[type=checkbox],input[type=radio]{accent-color:var(--primary-ink);width:14px;height:14px;margin:0;vertical-align:-2px;}

.btn{
  border:1px solid var(--border);background:#fff;color:var(--text-1);border-radius:var(--r-btn);
  height:32px;padding:0 14px;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.btn:hover{border-color:var(--primary);color:var(--primary-ink);}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-on);font-weight:500;}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-on);}
.btn-primary:active{background:var(--primary-active);border-color:var(--primary-active);}
.btn:disabled,.btn[disabled]{background:var(--fill);border-color:var(--border);color:var(--text-4);cursor:not-allowed;}
.btn-sm{height:26px;padding:0 10px;font-size:12px;border-radius:4px;}
.btn-link{background:none;border:none;color:var(--primary-ink);cursor:pointer;font-size:13px;padding:0 2px;}
.btn-link:hover{color:var(--primary-hover);text-decoration:underline;}
.btn-danger{background:#fff;border-color:#FFCCC7;color:var(--err);}
.btn-danger:hover{background:var(--err-bg);border-color:var(--err);color:var(--err);}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl thead th{
  text-align:left;background:var(--bg-head);color:var(--text-2);font-weight:500;font-size:13px;
  padding:0 14px;height:44px;border-bottom:1px solid var(--split);white-space:nowrap;
}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--split-weak);color:var(--text-1);
              vertical-align:middle;line-height:1.5;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#FAFCFC;}
.tbl tbody tr.row-alert{background:#FFFBFB;}
.tbl tbody tr.row-alert:hover{background:#FFF6F6;}
.tbl .num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl .muted{font-size:13px;}
.tbl .empty-cell{text-align:center;color:var(--text-3);height:96px;}
/* 加载态：与空态同高，避免数据到达时列表高度跳动；转圈尺寸克制，不做彩色强调 */
.tbl .loading-cell{display:table-cell;}
.spin{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-2px;
  border:2px solid var(--border);border-top-color:var(--text-3);border-radius:50%;
  animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.spin{animation:none;}}
.tbl input.input{height:28px;font-size:13px;}
/* 单据类列表：固定列宽，避免短内容把列拉得忽宽忽窄 */
.fix-tbl{table-layout:fixed;}
.fix-tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 状态标签（浅底 + 深字 + 同色点，2px 圆角） ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:0 7px;height:22px;border-radius:var(--r-tag);
       font-size:12px;font-weight:400;line-height:1;background:var(--neutral-bg);color:var(--text-2);
       white-space:nowrap;}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px;}
.badge:empty{display:none;}

.b-待审核,.b-待回款,.b-未开具,.b-未转化,.b-筹备中,.b-初步接触,
.b-待打样,.b-待微调,.b-待受理,.b-待质检,.b-待审批,.b-跟进中{background:var(--warn-bg);color:var(--warn);}
.b-已审核,.b-已寄出,.b-部分回款,.b-进行中,.b-已开具,.b-需求确认,.b-方案报价,
.b-打样中,.b-已发样,.b-处理中,.b-已签收,.b-待客户确认{background:var(--info-bg);color:var(--info);}
.b-已完成,.b-赢单,.b-已转化,.b-已结束,.b-已确认,.b-已闭环,.b-已转报价,
.b-合格,.b-让步接收{background:var(--ok-bg);color:var(--ok);}
.b-输单,.b-无效,.b-已关闭,.b-未签到{background:var(--neutral-bg);color:var(--text-2);}
.b-谈判{background:var(--info-bg);color:var(--info);}
.b-已拒收,.b-不合格{background:var(--err-bg);color:var(--err);}
/* 客户分级不是流转状态，单列一套暖金样式，避免和状态徽章抢色 */
.badge.b-grade{background:var(--primary-bg);color:var(--primary-ink);border:1px solid var(--primary-border);}
/* 报价单状态机：已生成 → 已确认 → 已转合同 / 已作废 */
.b-已生成{background:var(--warn-bg);color:var(--warn);}
.b-已转合同{background:var(--ok-bg);color:var(--ok);}
.b-已作废{background:var(--neutral-bg);color:var(--text-3);text-decoration:line-through;}
.b-免检{background:var(--neutral-bg);color:var(--text-2);}
/* 打样中与已发样语义区分：已发样偏「待签收」 */
.b-已发样{background:var(--warn-bg);color:var(--warn);}
.b-逾期{background:var(--err-bg);color:var(--err);font-weight:600;}

/* ---------- 详情 kv ---------- */
.kv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--split-weak);font-size:13px;align-items:flex-start;}
.kv:last-child{border-bottom:none;}
.kv b{width:106px;flex:0 0 auto;min-width:106px;color:var(--text-3);font-weight:400;line-height:1.6;
      white-space:nowrap;}
.kv span{color:var(--text-1);flex:1;min-width:0;line-height:1.6;overflow-wrap:anywhere;}
.muted{color:var(--text-3);}
.total{color:var(--text-1);font-weight:600;}
.mt{margin-top:16px;}

/* ---------- 表单 ---------- */
.form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.form-row label{width:104px;flex:0 0 104px;color:var(--text-2);font-size:13px;text-align:right;line-height:1.5;}
.form-row .input{flex:1;}
.form-row .req{color:var(--err);font-style:normal;margin-left:2px;}
.two-in{display:flex;gap:8px;flex:1;min-width:0;}
.two-in .input{flex:1 1 0;width:0;min-width:0;}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.req-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.req-grid.g3 label{width:58px;min-width:58px;flex:0 0 58px;}
.req-grid.g3 .input{width:100%;}
.req-grid .form-row{min-width:0;}
.req-grid .form-row .input{min-width:0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;}
.form-tip{font-size:12px;color:var(--text-3);margin:-4px 0 12px 116px;}

.chk-group{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:12px;max-height:240px;overflow:auto;}
.chk-group label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-1);
                 cursor:pointer;width:auto;flex:none;text-align:left;}
.qty-input{width:56px;border:1px solid var(--border);border-radius:var(--r-input);padding:3px 6px;
           margin-left:4px;height:26px;font-size:13px;}

/* ---------- 工作台统计 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:16px;}
.stat-card{background:#fff;border:1px solid var(--split);border-radius:var(--r-card);
           padding:16px 18px;box-shadow:var(--shadow-card);min-width:0;}
.stat-card .s-label{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.stat-card .s-val{font-size:26px;font-weight:600;color:var(--text-1);margin-top:6px;line-height:1.25;letter-spacing:-.2px;}
.stat-card .s-sub{font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.45;}
.stat-card.alert .s-val{color:var(--err);}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------- 横向条形图（纯色细条，去渐变） ---------- */
.bars{display:flex;flex-direction:column;gap:12px;padding:2px 0;}
.bar-row{display:flex;align-items:center;gap:12px;}
.bar-label{width:104px;flex:0 0 104px;font-size:13px;color:var(--text-2);text-align:right;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;background:var(--fill);border-radius:2px;height:8px;overflow:hidden;}
.bar-fill{height:100%;background:var(--primary);border-radius:2px;transition:width .4s ease;}
.bar-val{width:96px;flex:0 0 96px;font-size:13px;color:var(--text-2);text-align:right;}

/* 销售漏斗 */
.funnel{display:flex;flex-direction:column;gap:14px;padding:4px 0 2px;}
.fn-row{display:flex;align-items:center;gap:12px;}
.fn-label{width:84px;flex:0 0 84px;font-size:13px;color:var(--text-2);text-align:right;white-space:nowrap;}
.fn-track{flex:1;background:var(--fill);border-radius:4px;height:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.fn-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:4px;
         transition:width .45s ease;display:flex;align-items:center;justify-content:flex-start;}
.fn-val{width:64px;flex:0 0 64px;font-size:14px;font-weight:600;color:var(--text-1);text-align:right;}

/* 转化率 / 指标方块 */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.metric{background:#FDF9F0;border:1px solid var(--split);border-radius:var(--r-card);padding:12px 10px;text-align:center;}
.m-val{font-size:22px;font-weight:700;color:var(--primary-ink-strong);line-height:1.1;}
.m-pct{font-size:13px;font-weight:600;margin-left:1px;}
.m-label{font-size:12px;color:var(--text-2);margin-top:4px;}
.metric-inline{font-size:15px;color:var(--text-1);}
.metric-inline b{font-size:22px;color:var(--primary-ink-strong);}

/* 进度条 */
.progress{height:12px;background:var(--fill);border-radius:6px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:6px;transition:width .45s ease;}
.card-title.mt{margin-top:16px;}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;
            justify-content:center;z-index:100;padding:24px;}
.modal{background:#fff;border-radius:var(--r-card);width:560px;max-width:100%;max-height:86vh;
       display:flex;flex-direction:column;box-shadow:var(--shadow-popup);}
.modal.wide{width:880px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
            border-bottom:1px solid var(--split);font-weight:600;font-size:16px;color:var(--text-1);gap:12px;}
.modal-close{cursor:pointer;color:var(--text-3);line-height:1;display:flex;align-items:center;
             justify-content:center;width:24px;height:24px;border-radius:4px;flex:0 0 24px;
             border:none;background:transparent;font-size:18px;}
.modal-close:hover{background:var(--fill);color:var(--text-1);}
.modal-body{padding:20px;overflow:auto;overflow-x:hidden;}
/* 弹窗底部操作区：取消在左、主操作在右（企业后台惯例），与内容用分割线隔开 */
.modal-body > .mt:last-child{display:flex;gap:8px;justify-content:flex-start;flex-direction:row-reverse;
                             flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--split);margin-top:20px;}
.modal-body > .mt:last-child .btn{margin-left:0 !important;}

/* ---------- 内联表单（新建/编辑，非弹窗） ---------- */
.inline-form{display:none;background:#fff;border:1px solid var(--split);border-radius:var(--r-card);
  box-shadow:var(--shadow-popup);margin:0 0 16px;overflow:hidden;}
.inline-form.show{display:block;animation:slideDown .18s ease;}
.if-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
  border-bottom:1px solid var(--split);font-weight:600;font-size:16px;color:var(--text-1);
  gap:12px;background:var(--bg-head);}
.if-close{cursor:pointer;color:var(--text-3);line-height:1;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;border:none;background:transparent;font-size:18px;}
.if-close:hover{background:var(--fill);color:var(--text-1);}
.if-body{padding:20px;overflow:auto;max-height:80vh;}
.if-body > .mt:last-child{display:flex;gap:8px;justify-content:flex-start;flex-direction:row-reverse;
  flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--split);margin-top:20px;}
.if-body > .mt:last-child .btn{margin-left:0 !important;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ---------- 移动端遮罩 / 底栏 ---------- */
.sidebar-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;}
.bottom-nav{display:none;}

/* =========================================================
   响应式：≤768px 手机端
   ========================================================= */
@media (max-width:768px){
  .sidebar{
    position:fixed;left:0;top:54px;height:calc(100vh - 54px);z-index:50;transform:translateX(-100%);
    transition:transform .25s ease;box-shadow:2px 0 14px rgba(0,0,0,.12);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-mask.show{display:block;}
  .hamburger{display:flex;}
  .content{padding:14px 12px 76px;}
  .topbar{padding:0 12px;gap:10px;}
  .page-title{font-size:15px;}
  .env-tag{display:none;}
  .topbar-right{gap:10px;}

  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-card{padding:13px 14px;}
  .stat-card .s-val{font-size:21px;}
  .dash-row{grid-template-columns:1fr;}

  /* 表格卡片化：左侧标签 + 右侧值 */
  .tbl thead{display:none;}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;}
  .tbl tr{background:#fff;border:1px solid var(--split);border-radius:var(--r-card);
          margin-bottom:10px;padding:8px 12px;}
  .tbl tbody tr:hover{background:#fff;}
  .tbl td{position:relative;border:none;padding:6px 0 6px 42%;text-align:right;
          min-height:24px;overflow-wrap:anywhere;word-break:break-word;}
  .tbl td::before{content:attr(data-label);position:absolute;left:0;top:6px;width:40%;
                  color:var(--text-3);font-weight:400;text-align:left;word-break:normal;}
  .tbl td:last-child{padding-left:0;text-align:left;}
  .tbl td:last-child::before{position:static;display:block;width:auto;margin-bottom:6px;}
  .tbl td:last-child .act-group{justify-content:flex-start;}
  .tbl .empty-cell{height:auto;padding:24px 0;}

  .card{padding:14px;}
  .toolbar .input{max-width:100%;}
  .form-row{flex-direction:column;align-items:stretch;gap:6px;}
  .form-row label{width:auto;text-align:left;flex:none;}
  .form-tip{margin-left:0;}
  .req-grid,.req-grid.g3,.grid-2,.grid-3{grid-template-columns:1fr;gap:0;}
  .modal{width:100%;max-height:92vh;}
  .modal.wide{width:100%;}
  .modal-body{padding:16px;}

  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:54px;background:#fff;
    border-top:1px solid var(--split);z-index:30;
  }
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
           font-size:11px;color:var(--text-3);gap:3px;}
  .bn-item .ico{display:flex;align-items:center;justify-content:center;color:var(--text-3);}
  .bn-item.active{color:var(--primary-ink);}
  .bn-item.active .ico{color:var(--primary-ink);}
  .bar-label,.bar-val{width:76px;flex-basis:76px;font-size:12px;}
}

/* =========================================================
   样品申请全流程
   ========================================================= */
/* 状态筛选：下划线页签（企业后台标准，替代圆角胶囊） */
.tabs{display:flex;gap:22px;margin-bottom:16px;border-bottom:1px solid var(--split);
      overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:8px 1px 9px;border:none;background:none;border-radius:0;
     font-size:13px;color:var(--text-2);cursor:pointer;user-select:none;transition:color .15s;
     border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex:0 0 auto;}
.tab:hover{color:var(--primary-ink);}
.tab.active{color:var(--primary-ink);font-weight:600;border-bottom-color:var(--primary);}

/* 反馈倒计时 */
.overdue{color:var(--err);font-weight:600;}
.due-warn{color:var(--warn);font-weight:600;}
.due-ok{color:var(--text-2);}

/* 分区标题 */
.section-title{margin:20px 0 10px;font-weight:600;color:var(--text-1);font-size:13px;
               border-left:3px solid var(--primary);padding-left:8px;line-height:1.3;}
.modal-body > .section-title:first-child{margin-top:0;}

/* 流程进度条（样品单详情顶部） */
.stepper{display:flex;align-items:flex-start;gap:0;margin:0 0 18px;padding:14px 4px;
         background:var(--bg-head);border:1px solid var(--split);border-radius:var(--r-card);}
.step{flex:1;text-align:center;position:relative;font-size:12px;color:var(--text-3);min-width:0;}
.step .dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:#fff;
           color:var(--text-3);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;
           font-size:11px;position:relative;z-index:2;}
.step .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.step::before{content:"";position:absolute;top:10px;left:0;right:50%;height:1px;background:var(--border);}
.step:first-child::before{display:none;}
.step.done{color:var(--text-2);}
.step.done .dot{background:var(--primary);border-color:var(--primary);color:var(--primary-on);}
.step.done::before{background:var(--primary);}
.step.cur{color:var(--primary-ink);font-weight:600;}
.step.cur .dot{border-color:var(--primary);color:var(--primary-ink);box-shadow:0 0 0 3px rgba(201,169,97,.12);}

/* 状态时间轴 */
.timeline{margin-top:4px;position:relative;padding-left:18px;}
.timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--split);}
.tl-item{position:relative;padding:0 0 16px 6px;}
.tl-item::before{content:"";position:absolute;left:-16px;top:6px;width:6px;height:6px;border-radius:50%;
                 background:var(--primary);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--primary-border);}
.tl-item:last-child{padding-bottom:0;}
.tl-time{font-size:12px;color:var(--text-3);line-height:1.5;}
.tl-main{font-size:13px;color:var(--text-1);line-height:1.6;}
.tl-note{font-size:12px;color:var(--text-3);line-height:1.6;}
.tl-by{font-size:12px;color:var(--text-2);margin-top:2px;}

/* 回款进度条 */
.progress{height:8px;border-radius:6px;background:var(--fill);overflow:hidden;}
.progress-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--primary),var(--primary-hover));transition:width .3s;}

/* 反馈卡片 */
.fb-card{border:1px solid var(--split);border-radius:var(--r-card);padding:12px 14px;
         margin-bottom:10px;background:var(--bg-head);}
.fb-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-3);
         margin-bottom:6px;flex-wrap:wrap;align-items:center;}
.fb-head b{font-size:13px;color:var(--text-1);}
.fb-ops{display:flex;gap:4px;flex-shrink:0;}
.fb-ops .btn-sm2{padding:2px 8px;border:1px solid var(--border);border-radius:var(--r-input);}
.fb-ops .btn-sm2:hover{background:var(--fill);text-decoration:none;}

/* 顶栏提醒铃铛 */
.bell{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;
      width:30px;height:30px;border-radius:6px;color:var(--text-2);}
.bell:hover{background:var(--fill);color:var(--text-1);}
.bell-dot{position:absolute;top:1px;right:0;min-width:15px;height:15px;border-radius:8px;
          background:var(--err);color:#fff;font-size:10px;font-style:normal;line-height:15px;
          text-align:center;padding:0 4px;display:none;box-shadow:0 0 0 2px #fff;}
.bell-dot.show{display:block;}
/* 弹层挂在页眉下沿：原先写死 top:52px，页眉 58px 高时会盖住页眉底部 6px，
   深色页眉下不明显，换成墨绿后那道压在绿色上的白边就露出来了 */
.notify-pop{position:absolute;right:16px;top:calc(100% + 8px);width:340px;max-height:70vh;overflow:auto;background:#fff;
            border:1px solid var(--split);border-radius:var(--r-card);box-shadow:var(--shadow-popup);
            z-index:60;text-align:left;}
.notify-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
             border-bottom:1px solid var(--split);font-weight:600;font-size:13px;
             position:sticky;top:0;background:#fff;}
.notify-item{padding:10px 14px;border-bottom:1px solid var(--split-weak);cursor:pointer;}
.notify-item:hover{background:var(--bg-head);}
.notify-item.unread{background:#F7FBFA;}
.notify-item.unread .ni-title::before{content:"";display:inline-block;width:5px;height:5px;
       border-radius:50%;background:var(--err);margin-right:6px;vertical-align:2px;}
.ni-title{font-size:13px;color:var(--text-1);font-weight:500;line-height:1.5;}
.ni-body{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.5;}
.ni-role{display:inline-block;font-size:11px;background:var(--primary-bg);color:var(--primary-ink);
         border-radius:var(--r-tag);padding:0 5px;margin-right:6px;line-height:18px;}

/* 图片缩略 */
.thumb-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.thumb{width:72px;height:72px;border:1px solid var(--split);border-radius:var(--r-input);display:flex;
       align-items:center;justify-content:center;font-size:11px;color:var(--text-4);
       background:var(--bg-head);overflow:hidden;text-align:center;position:relative;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-del{position:absolute;top:0;right:0;width:18px;height:18px;padding:0;border:none;
           border-radius:0 0 0 4px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;
           line-height:18px;text-align:center;cursor:pointer;}
.thumb-del:hover{background:var(--err);}
.thumb-hint{font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.5;}
a.thumb{text-decoration:none;}

/* 表格内操作：文本按钮，降低视觉噪音 */
.act-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-sm2{padding:0;border:none;background:none;color:var(--primary-ink);cursor:pointer;font-size:13px;
         line-height:1.6;white-space:nowrap;border-radius:2px;}
.btn-sm2:hover{color:var(--primary-hover);text-decoration:underline;}
.btn-sm2.warn{color:var(--warn);}
.btn-sm2.warn:hover{color:#AD6800;}
.btn-sm2.ok{color:var(--ok);}
.btn-sm2.ok:hover{color:#237804;}
.btn-sm2.ghost{color:var(--text-2);}
.btn-sm2.ghost:hover{color:var(--text-1);}
.btn-sm2.danger{color:var(--err);}
.btn-sm2.danger:hover{color:#A8071A;}
/* 独立成块的次要动作（如「+ 添加联系人」）保留描边感 */
.section-title .btn-sm2{border:1px solid var(--border);padding:3px 9px;border-radius:var(--r-input);
                         font-weight:400;margin-left:10px;vertical-align:1px;}
.section-title .btn-sm2:hover{background:var(--fill);text-decoration:none;}

/* =========================================================
   客户档案 / 报价单 / 合同 —— 业务页专用
   ========================================================= */
/* 档案头 */
.profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
              padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--split);flex-wrap:wrap;}
.profile-name{font-size:18px;font-weight:600;color:var(--text-1);line-height:1.4;}
.profile-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;font-size:13px;color:var(--text-2);}
.profile-meta span{display:inline-flex;align-items:center;gap:5px;}
.profile-meta i{font-style:normal;color:var(--text-3);}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* 表格内主名称 / 次编号（两级信息，减少粗体滥用） */
.prod-name{font-weight:500;color:var(--text-1);}
.prod-code{color:var(--text-3);font-size:12px;line-height:1.4;}

/* 报价单明细表 */
.pick-tbl td{vertical-align:middle;}
.pick-tbl .qty{display:block;margin-left:auto;width:76px;text-align:right;}
.pick-tbl tbody tr.selected{background:#F7FBFA;}
.pick-tbl .prod-name{font-weight:500;}
.pick-tbl .prod-code{color:var(--text-3);font-size:12px;}
.sum-bar{display:flex;align-items:center;justify-content:flex-end;gap:28px;flex-wrap:wrap;
         padding:16px 0 0;border-top:1px solid var(--split);margin-top:4px;}
.sum-bar .sum-item{font-size:13px;color:var(--text-2);}
.sum-bar .sum-item b{color:var(--text-1);font-weight:600;}
.sum-bar .sum-money{font-size:22px;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums;}

/* 单据抬头（报价单 / 合同） */
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
          padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--split);flex-wrap:wrap;}
.doc-no{font-size:16px;font-weight:600;color:var(--text-1);}
.doc-sub{font-size:12px;color:var(--text-3);margin-top:4px;}
.doc-facts{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13px;color:var(--text-2);margin-bottom:14px;}
.doc-facts span{display:inline-flex;gap:6px;}
.doc-facts i{font-style:normal;color:var(--text-3);}
/* 单据主体：工商全称是财务核对的第一信息，字重提升一级，品牌与税号保持弱化 */
.doc-facts .doc-party{font-weight:600;color:var(--text-1);}
.tbl tfoot td{padding:12px 14px;border-top:1px solid var(--split);font-weight:600;color:var(--text-1);
              background:var(--bg-head);font-size:14px;}
.doc-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap;}

/* 校验提示条 */
.notice{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-input);
        font-size:13px;line-height:1.55;border:1px solid transparent;}
.notice-ok{background:var(--ok-bg);border-color:#D9F7BE;color:var(--ok);}
.notice-warn{background:var(--warn-bg);border-color:#FFF1B8;color:var(--warn);}
.notice-err{background:var(--err-bg);border-color:#FFCCC7;color:var(--err);}
.notice-info{background:var(--info-bg);border-color:#BAE0FF;color:var(--info);}

/* 空状态 */
.empty-state{text-align:center;padding:32px 12px;color:var(--text-3);font-size:13px;}
.empty-state svg{width:28px;height:28px;stroke:var(--text-4);margin-bottom:8px;}

/* 严重度标签 */
.sev{display:inline-block;padding:0 6px;height:22px;line-height:20px;border-radius:var(--r-tag);
     font-size:12px;font-weight:400;white-space:nowrap;}
.sev-emg{background:var(--err-bg);color:var(--err);border:1px solid #FFCCC7;}
.sev-high{background:var(--warn-bg);color:var(--warn);border:1px solid #FFE7A3;}
.sev-mid{background:var(--info-bg);color:var(--info);border:1px solid #BAE0FF;}
.sev-low{background:var(--neutral-bg);color:var(--text-2);border:1px solid var(--split);}

.cmp-head{margin:0 0 4px;font-size:13px;color:var(--text-3);}
.chk-inline{display:inline-flex;align-items:center;gap:6px;width:auto;flex:none;color:var(--text-1);
            font-size:13px;cursor:pointer;text-align:left;}
.form-row label.chk-inline{width:auto;flex:0 0 auto;white-space:nowrap;text-align:left;}
/* .chk-inline 里包着的 option label 不能继承 form-row 的固定标签宽度，否则"新增或更新（推荐）"会折行 */
.chk-inline label{width:auto;flex:0 0 auto;white-space:nowrap;text-align:left;min-width:0;}

/* 员工与部门 */
.users-tbl{table-layout:fixed;}
.users-tbl th:nth-child(1){width:100px;}
.users-tbl th:nth-child(2){width:100px;}
.users-tbl th:nth-child(3){width:96px;}
.users-tbl th:nth-child(4){width:104px;}
.users-tbl th:nth-child(5){width:96px;}
.users-tbl th:nth-child(7){width:132px;}
.users-tbl td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:10px;padding-bottom:10px;}
.users-tbl td:nth-child(7){font-variant-numeric:tabular-nums;letter-spacing:.2px;}
.users-tbl td:nth-child(6){white-space:normal;word-break:break-word;font-size:12px;color:var(--text-2);}
@media (max-width:768px){
  .users-tbl{table-layout:auto;}
  .users-tbl td{white-space:normal;overflow:visible;}
}

/* =========================================================
   权限 / 账号 / 导入导出
   ========================================================= */
.tb-gap{flex:1 1 auto;min-width:8px;}

/* 顶栏账号入口 */
.user{cursor:pointer;border-radius:var(--r-btn);padding:4px 8px;transition:background .15s;}
.user:hover{background:var(--primary-bg);}

/* 账号弹窗头部 */
.acct-head{display:flex;align-items:center;gap:12px;padding:4px 0 14px;border-bottom:1px solid var(--split);margin-bottom:14px;}
.acct-avatar{width:44px;height:44px;border-radius:50%;background:var(--primary-bg);color:var(--primary-ink);
            display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex:none;}
.acct-name{font-size:15px;font-weight:600;color:var(--text-1);}

/* 员工列表 */
.row-muted td{color:var(--text-3);}
.users-tbl td{white-space:nowrap;}
.users-tbl .act-group{display:flex;gap:12px;flex-wrap:nowrap;}
.users-tbl .badge{white-space:nowrap;}
.users-tbl th:nth-child(1),.users-tbl td:nth-child(1){width:150px;}
.users-tbl th:nth-child(5),.users-tbl td:nth-child(5){width:130px;}
.users-tbl th:last-child,.users-tbl td:last-child{width:200px;}

/* 角色列表 + 权限矩阵 */
.role-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:16px;align-items:start;}
.role-list-card{padding:0;overflow:hidden;}
.role-list{padding:6px;}
.role-item{padding:10px 12px;border-radius:var(--r-btn);cursor:pointer;border:1px solid transparent;}
.role-item:hover{background:var(--fill);}
.role-item.active{background:var(--primary-bg);border-color:var(--primary-border);}
.role-item-name{font-size:14px;font-weight:500;color:var(--text-1);display:flex;align-items:center;gap:6px;}
.role-item.active .role-item-name{color:var(--primary-ink);}
.role-item-sub{font-size:12px;color:var(--text-3);margin-top:2px;}
.role-item .tag{font-size:11px;padding:1px 5px;border-radius:var(--r-tag);background:var(--neutral-bg);color:var(--text-2);font-weight:400;}
.role-head-ops{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.role-head-ops .muted{font-size:12px;max-width:280px;}

.perm-matrix{padding:0 16px 16px;}
/* 权限项有 16 个模块，单列会拖成一条长龙，宽屏下排两列 */
@media (min-width:1100px){ .perm-matrix{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;} }
.perm-matrix > .notice{grid-column:1/-1;margin-bottom:4px;}
.perm-group{padding:12px 0;border-bottom:1px solid var(--split);}
.perm-group:last-child{border-bottom:0;}
.perm-group-head{font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:8px;display:flex;align-items:baseline;gap:8px;}
.perm-group-sub{font-size:12px;font-weight:400;color:var(--text-3);}
.perm-chips{display:flex;flex-wrap:wrap;gap:8px;}
.perm-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);
          border-radius:var(--r-btn);font-size:13px;color:var(--text-2);cursor:pointer;background:var(--card);
          transition:all .15s;user-select:none;}
.perm-chip:hover{border-color:var(--primary-border);color:var(--primary-ink);}
.perm-chip:has(input:checked){background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary-ink);}
.perm-chip input{margin:0;accent-color:var(--primary-ink);}
.perm-chip input:disabled{cursor:not-allowed;}
.perm-chip:has(input:disabled){opacity:.75;cursor:default;}

/* 批量重置：可勾选列表 */
.pick-list{max-height:320px;overflow:auto;border:1px solid var(--split);border-radius:var(--r-input);padding:4px 8px;}
.pick-row{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--split-weak);font-size:13px;cursor:pointer;}
.pick-row:last-child{border-bottom:0;}
.pick-row:hover{background:var(--fill);}
.pick-name{min-width:96px;font-weight:500;color:var(--text-1);}

/* 导入 */
.import-drop{border:1px dashed var(--border);border-radius:var(--r-card);padding:22px 16px;text-align:center;
            background:var(--bg-head);cursor:pointer;transition:all .15s;margin-bottom:12px;}
.import-drop:hover,.import-drop.over{border-color:var(--primary);background:var(--primary-bg);}
.import-drop .ico{color:var(--primary-ink);margin-bottom:6px;}
.import-drop-main{font-size:14px;color:var(--text-1);margin-bottom:4px;}
.imp-actions{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.imp-actions .muted{font-size:12px;}
.imp-preview{max-height:260px;overflow:auto;border:1px solid var(--split);border-radius:var(--r-input);}
.imp-preview .tbl{margin:0;}
.imp-preview .tbl th{position:sticky;top:0;background:var(--bg-head);z-index:1;}
.imp-check{display:flex;align-items:center;gap:10px;margin:12px 0;}
.imp-check .muted{font-size:12px;}
.imp-fail{border:1px solid #FFCCC7;border-radius:var(--r-input);overflow:hidden;}
.imp-fail-row{display:flex;gap:10px;padding:7px 10px;font-size:13px;border-bottom:1px solid #FFF1F0;background:var(--err-bg);}
.imp-fail-row:last-child{border-bottom:0;}
.imp-fail-row b{color:var(--err);flex:none;min-width:64px;font-weight:500;}
.imp-fail-row span{color:var(--text-1);}

/* 移动端 */
@media (max-width:768px){
  .role-layout{grid-template-columns:1fr;}
  .role-head-ops{width:100%;justify-content:flex-start;}
  .perm-matrix{padding:0 12px 12px;}
  .tb-gap{display:none;}
  .users-tbl .act-group{flex-wrap:wrap;}
}

/* 操作审计 */
.audit-card{margin-top:16px;}
.audit-tbl td{white-space:normal;word-break:break-all;}

/* =========================================================
   核心链路导航条：客户 → 产品 → 样品 → 报价 → 合同
   让"打通一条链路"在页面上可见、可一触跳转（桌面/手机通用）
   ========================================================= */
.chain-bar{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:10px 12px;margin-bottom:16px;background:var(--card);border:1px solid var(--split);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);}
.chain-bar::-webkit-scrollbar{display:none;}
.chain-node{border:1px solid var(--border);background:#fff;color:var(--text-2);border-radius:var(--r-btn);
  height:30px;padding:0 12px;font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s;flex:0 0 auto;}
.chain-node:hover{border-color:var(--primary);color:var(--primary-ink);}
.chain-node.is-current{background:var(--primary);border-color:var(--primary);color:var(--primary-on);font-weight:600;}
.chain-sep{color:var(--text-4);flex:0 0 auto;user-select:none;font-size:15px;line-height:1;}
@media (max-width:768px){
  .chain-bar{margin:0 -12px 14px;padding:10px;width:auto;border-left:none;border-right:none;border-radius:0;}
  .chain-node{height:28px;padding:0 10px;font-size:12px;}
}

/* ===== 客户 360 页签（企业级：克制的下划线页签 + 统一操作条） ===== */
.cust-tabs-wrap{position:sticky;top:0;z-index:6;background:var(--card);border-bottom:1px solid var(--border);margin:6px 0 14px;}
.cust-tabs{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cust-tabs::-webkit-scrollbar{height:4px;}
.cust-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.cust-tab{border:0;background:none;padding:11px 14px;font-size:14px;color:var(--text-2);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s;}
.cust-tab:hover{color:var(--text-1);}
.cust-tab.active{color:var(--primary-ink);border-bottom-color:var(--primary);font-weight:600;}
.cust-tab-body{min-height:140px;}
.cust-tab-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px;}
.cust-tab-title{font-size:15px;font-weight:600;color:var(--text-1);}
.cust-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.cust-file{border:1px solid var(--border);border-radius:var(--r-card);padding:10px;background:var(--card);}
.cust-file-thumb{display:flex;align-items:center;justify-content:center;height:96px;border-radius:var(--r-input);overflow:hidden;background:var(--fill);color:var(--text-3);font-size:12px;margin-bottom:8px;}
.cust-file-thumb img{width:100%;height:100%;object-fit:cover;}
.cust-file-name{font-size:13px;color:var(--text-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cust-file-meta{font-size:12px;color:var(--text-3);margin:3px 0 8px;}
.cust-file-ops{display:flex;gap:8px;}
.cust-file-thumb.file{background:var(--fill);}
.cust-file-ext{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 8px;
  border-radius:8px;background:var(--card);border:1px solid var(--border);color:var(--text-2);
  font-size:12px;font-weight:600;letter-spacing:.6px;}

/* 部门管理弹窗：顶部新增行 + 表格 */
.dept-add-row{display:flex;gap:8px;align-items:center;}
.dept-add-row .input{flex:1;max-width:320px;}
.dept-add-row .btn{flex:0 0 auto;}

@media (max-width:768px){
  .cust-tab{padding:10px 12px;font-size:13px;}
  .cust-file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

/* =========================================================
   手机端专项优化（≤768px）
   目标：单手可操作、触控目标够大、长单据信息不挤、iOS 输入不缩放
   仅覆盖移动端，桌面端样式不受影响
   ========================================================= */
@media (max-width:768px){
  /* 1) 安全区：底部导航与内容都不被 iPhone Home 条压住 */
  .content{padding:12px 12px calc(70px + env(safe-area-inset-bottom,0px));}
  .bottom-nav{height:calc(56px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -1px 0 var(--split),0 -6px 16px rgba(16,24,40,.04);}
  .bn-item{cursor:pointer;font-size:10px;gap:2px;padding-top:3px;min-width:0;}
  .bn-item .ico svg{width:20px;height:20px;height:20px;}
  .bn-item:active{background:var(--fill);}

  /* 2) iOS 聚焦不缩放：输入类控件字号 >=16px，同时把高度做到 40px 便于点按 */
  .input,select.input,textarea.input,.tbl input.input{font-size:16px;}
  .input{height:40px;border-radius:8px;}
  select.input{height:40px;}
  textarea.input{min-height:88px;padding:10px;}
  input[type=checkbox],input[type=radio]{width:18px;height:18px;}

  /* 3) 触控目标：主按钮 40px，行内操作改为可点的胶囊（原来是 13px 文字链接） */
  .btn{height:40px;padding:0 16px;font-size:14px;border-radius:8px;}
  .btn-sm2{min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:8px;
    background:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center;}
  .btn-sm2:hover{text-decoration:none;background:var(--fill);}
  .act-group{gap:8px;}
  .toolbar{gap:8px;}
  .toolbar .input{min-width:0;flex:1 1 100%;max-width:100%;}
  .toolbar .btn{flex:1 1 auto;}

  /* 4) 表格卡片化微调：标签列收窄，操作区独立一行，数字等宽对齐 */
  .tbl tr{padding:10px 12px;}
  .tbl td{padding:7px 0 7px 38%;font-size:13px;}
  .tbl td::before{width:36%;font-size:12px;top:8px;}
  .tbl td.num{font-variant-numeric:tabular-nums;letter-spacing:.2px;}
  .tbl td:last-child{padding:8px 0 2px;margin-top:6px;border-top:1px dashed var(--split);}
  .tbl td:last-child::before{margin-bottom:8px;}

  /* 5) 客户 360 页签：可横滑 + 右侧渐隐，避免"还有页签却看不出" */
  .cust-tabs-wrap{position:sticky;top:56px;margin:2px -12px 10px;padding:0 12px;}
  .cust-tabs{scroll-snap-type:x proximity;padding-right:22px;}
  .cust-tab{scroll-snap-align:start;padding:11px 12px;font-size:13px;}
  .cust-tabs-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:22px;pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),var(--card));}
  .cust-tab-actions{flex-wrap:wrap;gap:8px;}
  .cust-tab-actions .btn-sm2{flex:1 1 auto;}

  /* 6) 样品流程步骤条：横向可滑，标签不再被挤成省略号 */
  .stepper{overflow-x:auto;padding:12px 8px;scrollbar-width:none;}
  .stepper::-webkit-scrollbar{display:none;}
  .stepper .step{min-width:62px;}
  .step .lbl{font-size:11px;}

  /* 7) 报价勾选表：复选框独占一行，选中行高亮，数量框够宽 */
  .pick-tbl tr{position:relative;}
  .pick-tbl td:first-child{padding:0 0 7px;text-align:left;margin-bottom:2px;border-bottom:1px dashed var(--split);}
  .pick-tbl td:first-child::before{display:none;}
  .pick-tbl tr.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(201,169,97,.10);}
  .pick-tbl .qty{width:88px;height:36px;text-align:center;}

  /* 8) 弹窗按底部抽屉呈现：头尾固定，正文滚动，底部留安全区 */
  .modal-mask{align-items:flex-end;}
  .modal{width:100%;max-width:100%;border-radius:14px 14px 0 0;max-height:88vh;}
  .modal.wide{width:100%;}
  .modal-head{padding:14px 16px;border-bottom:1px solid var(--split);}
  .modal-body{padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px));}
  .modal-mask{overscroll-behavior:contain;}

  /* 9) 客户档案头部：标题与操作按钮分行，按钮等宽 */
  .profile-head{flex-wrap:wrap;gap:12px;}
  .profile-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px;}
  .profile-actions .btn{flex:1 1 calc(50% - 8px);}
  .profile-meta{flex-wrap:wrap;gap:8px 14px;}

  /* 10) 文档（报价/合同）页头操作按钮换行，金额不被挤出屏幕 */
  .doc-head{flex-wrap:wrap;gap:10px;}
  .doc-head .profile-actions{width:100%;}
  .doc-facts{flex-wrap:wrap;gap:8px 16px;}
  .sum-bar{flex-wrap:wrap;gap:10px;}
  .sum-bar .btn{width:100%;}
}

/* 仅手机端显示的操作（如"返回列表"） */
.only-mobile{display:none !important;}
@media (max-width:768px){
  .only-mobile{display:inline-flex !important;}
  .cust-tab-actions .btn-sm2{flex:0 0 auto;margin-left:auto;}
}

/* ---------- 手机端：报价勾选表改为两列紧凑卡片 ---------- */
@media (max-width:768px){
  .pick-tbl tr{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:6px;padding:12px;}
  .pick-tbl td{display:block;padding:0 !important;margin:0;text-align:left;min-height:0;font-size:13px;}
  .pick-tbl td::before{position:static;display:block;width:auto;margin:0 0 2px;font-size:11px;color:var(--text-4);}
  .pick-tbl td:first-child{grid-column:1 / -1;border-bottom:1px dashed var(--split);padding-bottom:8px !important;text-align:left;}
  .pick-tbl td:first-child::before{display:none;}
  .pick-tbl td:nth-child(2){grid-column:1 / -1;font-size:15px;font-weight:600;color:var(--text-1);}
  .pick-tbl td:nth-child(2)::before{display:none;}
  .pick-tbl td:last-child{grid-column:1 / -1;border-top:1px dashed var(--split);padding-top:8px !important;text-align:right;}
  .pick-tbl td:last-child::before{position:static;display:inline;width:auto;margin-right:6px;text-align:left;}
  .pick-tbl td.subtotal{font-weight:600;color:var(--primary-ink);font-size:15px;}
  .pick-tbl .qty{width:100%;height:36px;text-align:center;}

  /* 横向滚动区加右侧渐隐，提示"还有内容" */
  .tabs,.chain-bar{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);
                   mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent);}
  .tabs{gap:16px;}
}

/* ---------- 手机端：单据明细表（报价/合同/对账预览）保持表格 + 横向滑动 ---------- */
.doc-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;}
@media (max-width:768px){
  .doc-tbl-wrap .tbl{display:table;width:100%;min-width:520px;border-collapse:collapse;}
  .doc-tbl-wrap .tbl thead{display:table-header-group;}
  .doc-tbl-wrap .tbl tbody{display:table-row-group;}
  .doc-tbl-wrap .tbl tfoot{display:table-footer-group;}
  .doc-tbl-wrap .tbl tr{display:table-row;border:0;margin:0;padding:0;background:transparent;border-radius:0;}
  .doc-tbl-wrap .tbl th,.doc-tbl-wrap .tbl td{display:table-cell;padding:8px 8px;text-align:left;
    border-bottom:1px solid var(--split);font-size:12px;white-space:nowrap;}
  .doc-tbl-wrap .tbl th.num,.doc-tbl-wrap .tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
  .doc-tbl-wrap .tbl td::before{display:none;}
  .doc-tbl-wrap .tbl td:last-child{border-top:0;margin:0;padding:8px;}
  .doc-tbl-wrap .tbl .prod-code{font-size:11px;}
}

/* 手机端：单据合计金额单独置顶显示，不必横向滑到表尾才看得到 */
.doc-total{display:none;}
@media (max-width:768px){
  .doc-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding:10px 2px 8px;font-size:13px;color:var(--text-2);}
  .doc-total b{font-size:18px;color:var(--text-1);font-variant-numeric:tabular-nums;}
  .doc-tbl-wrap .tbl tfoot{display:none;}
  .doc-tbl-wrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);
                mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);}
}

@media (max-width:768px){
  .card-head{gap:8px;}
  .card-head .input{max-width:100%;width:100%;flex:1 1 100%;}
  .card-head .muted{font-size:12px;}
}

.tbl td.nowrap{white-space:nowrap;}
@media (max-width:768px){ .tbl td.nowrap{white-space:normal;} }

@media (max-width:768px){
  /* 底部抽屉贴合屏幕边缘：去掉遮罩内边距，圆角只留上方 */
  .modal-mask{padding:0;}
  .modal,.modal.wide{border-radius:16px 16px 0 0;max-height:90vh;}
  .modal-body{border-radius:0;}
}

/* =========================================================
   页眉（锁定）手机端：只留「菜单 + 品牌标识 + 页面名 + 提醒 + 头像」
   搜索框在手机上让位给各页自身的筛选条（客户页/产品页都有）
   ========================================================= */
@media (max-width:768px){
  .topbar{height:54px;gap:8px;padding:0 10px;}
  .tb-brand{padding:0 2px;gap:0;}
  /* 手机页眉只有 54px，牛头顶到 40px 会压过标题；缩到 30px 与头像、汉堡同量级 */
  .tb-logo{width:30px;height:30px;flex:0 0 30px;}
  .tb-name,.tb-sep{display:none;}
  .topbar .page-title{font-size:15px;font-weight:600;color:var(--hd-fg);
    max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .top-search{display:none;}
  .tb-uinfo,.tb-caret{display:none;}
  .tb-user{padding:3px;}
  .topbar .tb-item{padding:0 7px;}
  .topbar .tb-item .tb-text{display:none;}
  .topbar .env-tag{display:none;}
  .notify-pop{right:8px;top:calc(100% + 6px);width:calc(100vw - 16px);max-height:66vh;}
  .user-menu{right:-2px;min-width:192px;}
}

/* 作废单据：整行弱化但仍可查（不删除，留痕） */
.tbl tr.row-void td{background:#FAF7F0;color:var(--text-3);}
.tbl tr.row-void .prod-name{text-decoration:line-through;color:var(--text-3);}

@media (max-width:768px){
  .layout{min-height:100vh;padding-top:54px;}
  .main{margin-left:0;}
}

/* 合同列表：作废徽章另起一行，合同号不换行被截断 */
.tbl td .prod-name.nowrap{white-space:nowrap;}
.tbl tr.row-void .badge{opacity:.9;}

/* 页眉里的外链入口（邮箱）与按钮保持一致 */
.topbar a.tb-item{text-decoration:none;}

@media (max-width:768px){
  /* 手机端页眉只留必要项：邮箱这类外链在手机上是负担，走抽屉里的入口更合适 */
  .topbar .tb-mail{display:none;}
}

/* =========================================================
   开票信息（客户档案摘要 / 发票页签卡片 / 合同档案）
   三要素（开户行、账号、开票地址电话）用「标签 + 值」的窄行排，
   比 8 列表格更省宽度，手机端也不会挤成一条缝。
   ========================================================= */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;margin-top:4px;}
.inv-card{border:1px solid var(--border);border-radius:var(--r-card);padding:12px 14px;background:var(--card);
  display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow-card);}
.inv-card.is-default{border-color:var(--primary-2);background:var(--primary-bg);}
.inv-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:2px;}
.inv-head b{font-size:13.5px;color:var(--text-1);overflow-wrap:anywhere;line-height:1.45;}
.inv-line{display:flex;gap:8px;font-size:12.5px;line-height:1.55;}
.inv-line i{flex:0 0 42px;color:var(--text-3);font-style:normal;}
.inv-line span{flex:1;min-width:0;color:var(--text-1);overflow-wrap:anywhere;}
.inv-ops{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:auto;padding-top:8px;border-top:1px solid var(--split-weak);}
.inv-empty{padding:12px 14px;border:1px dashed var(--border);border-radius:var(--r-card);
  background:#FBF7EE;color:var(--text-2);font-size:13px;line-height:1.6;}
.inv-empty .btn-link{margin-left:2px;}

/* 表单字段说明（如"登录名与姓名一致"） */
.field-hint{font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.5;}

/* 税号批量补录表：一行一个客户，输入框要够长（税号 18 位） */
.bt-tbl td{padding:6px 8px;vertical-align:middle;}
.bt-tbl .input{min-width:230px;}
.bt-tbl .prod-code{font-size:12px;color:var(--text-3);margin-top:2px;}

@media (max-width:768px){
  .inv-grid{grid-template-columns:1fr;}
  .bt-tbl .input{min-width:0;width:100%;}
  .inv-ops .btn-sm2{flex:1;justify-content:center;}
}

/* 员工表：登录名一列要同时放"登录名 + 待统一徽章"，操作列多了"改为姓名"按钮，
   原 100px / 200px 会把徽章和按钮都截断 */
@media (min-width:769px){
  .users-tbl th:nth-child(2),.users-tbl td:nth-child(2){width:124px;white-space:normal;overflow:visible;text-overflow:clip;}
  .users-tbl th:last-child,.users-tbl td:last-child{width:268px;}
  .users-tbl .act-group{gap:10px;}
}

/* =========================================================
   发票抬头页顶部统计条：和客户档案对齐的"还差什么"
   ========================================================= */
.title-stat{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;
  padding:9px 14px;margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r-card);
  background:#FBF7EE;font-size:13px;color:var(--text-2);line-height:1.5;}
.title-stat:empty{display:none;}
.title-stat.warn{border-color:var(--primary-2);background:var(--primary-bg);}
.title-stat .ts-base{color:var(--text-1);font-weight:600;}
.title-stat .ts-msg b{color:var(--primary-ink-strong);font-size:14px;margin:0 1px;}
.title-stat .ts-msg.ok{color:var(--primary-ink);}
.title-stat .btn-sm2{margin-left:auto;}

@media (max-width:768px){
  .title-stat{padding:10px 12px;align-items:flex-start;flex-direction:column;gap:8px;}
  .title-stat .btn-sm2{margin-left:0;width:100%;justify-content:center;height:38px;}
}

/* =========================================================
   发票抬头表：8 列里 5 列是长文本（全称、税号、开户行、账号），
   不加列宽约束时浏览器会把"抬头名称"压成三行、操作列竖着堆按钮。
   桌面端固定列宽 + 允许横向滚动；手机端仍走卡片化布局。
   ========================================================= */
@media (min-width:769px){
  #rows-invoice_titles{overflow-x:auto;}
  #rows-invoice_titles .tbl{table-layout:fixed;min-width:1144px;}
  #rows-invoice_titles td,#rows-invoice_titles th{overflow:hidden;text-overflow:ellipsis;}
  #rows-invoice_titles th:nth-child(1),#rows-invoice_titles td:nth-child(1){width:240px;white-space:normal;line-height:1.45;}
  #rows-invoice_titles th:nth-child(2),#rows-invoice_titles td:nth-child(2){width:100px;white-space:normal;}
  #rows-invoice_titles th:nth-child(3),#rows-invoice_titles td:nth-child(3){width:190px;white-space:nowrap;}
  #rows-invoice_titles th:nth-child(4),#rows-invoice_titles td:nth-child(4){width:162px;white-space:normal;}
  #rows-invoice_titles th:nth-child(5),#rows-invoice_titles td:nth-child(5){width:188px;white-space:nowrap;}
  #rows-invoice_titles th:nth-child(6),#rows-invoice_titles td:nth-child(6){width:80px;white-space:nowrap;}
  #rows-invoice_titles th:last-child,#rows-invoice_titles td:last-child{width:174px;}
  #rows-invoice_titles .tt-name{display:block;overflow-wrap:anywhere;}
  #rows-invoice_titles .tt-sub{font-size:12px;color:var(--text-3);margin-top:2px;}
  #rows-invoice_titles .act-group{flex-wrap:nowrap;gap:12px;}
}
@media (min-width:769px){
  .title-stat .ts-msg{margin-left:4px;padding-left:14px;border-left:1px solid var(--border);}
}
@media (max-width:768px){
  .title-stat .ts-msg{padding-left:0;border-left:none;}
}

/* 带说明文字的表单字段：外面包的一层要自己撑满，否则里面的 input 拿不到 .form-row .input 的 flex:1，
   会缩成默认 20 字符宽度（登录名、抬头名称这些长文本字段尤其明显） */
.form-row .fr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;}
.form-row .fr-body .input{width:100%;flex:0 0 auto;}

/* ===== 合同回款计划（Stage2） ===== */
.recv-plan{margin-top:4px;}
.recv-plan-sum{display:flex;flex-wrap:wrap;gap:18px;padding:10px 12px;background:var(--bg);
  border:1px solid var(--split);border-radius:var(--r-card);margin-bottom:10px;font-size:13px;}
.recv-plan-sum b{font-weight:600;}
.recv-ovd{color:var(--err);font-weight:600;}
/* 卡片最小宽度抬到 210px：弹窗里 3 张挤一行时，期次名与「计划/已回/计划日」会被迫折成碎行 */
.recv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.recv-card{background:var(--card);border:1px solid var(--split);border-radius:var(--r-card);padding:10px 12px;min-width:0;}
.recv-card.is-ovd{border-color:var(--err);box-shadow:0 0 0 1px var(--err-bg) inset;}
.recv-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:8px;}
.recv-pno{font-weight:600;font-size:13px;min-width:0;line-height:1.4;overflow-wrap:anywhere;}
.recv-card-h .badge{flex:0 0 auto;}
.recv-card-b{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--text-2);}
.recv-card-b>div{white-space:nowrap;}
.recv-card-b i{font-style:normal;color:var(--text-3);margin-right:3px;}
.plan-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.plan-row .input{padding:6px 8px;height:32px;}
/* 向导里的「替换已有计划」提示：独立于 notice，别让复选框挤在黄条里 */
.plan-replace{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text);
  padding:8px 10px;margin-bottom:10px;background:var(--card);border:1px solid var(--split);
  border-left:3px solid var(--err);border-radius:var(--r-card);cursor:pointer;}
.plan-replace input{width:15px;height:15px;accent-color:var(--err);cursor:pointer;}
/* 期次卡片底部：直达该笔应收的登记回款 */
.recv-card-f{margin-top:9px;padding-top:7px;border-top:1px solid var(--split);text-align:right;}
/* 阶段3 经营预警条：核心指标置顶，逾期才用红，正常用绿，避免天天红色疲劳 */
.bi-alert{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;
  border-radius:var(--r-card);font-size:13px;}
.bi-alert.is-bad{background:var(--err-bg);border:1px solid var(--err);color:var(--err);}
.bi-alert.is-ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);}
.bi-alert b{font-weight:600;}
.bi-alert .btn-link{color:inherit;text-decoration:underline;}

/* =========================================================
   报表中心：概览 → 明细下钻
   设计基准（shadcn/ui 骨架 + 企业级 B 端规范）：
   - 中性底 + 1px 描边分区，留白代替色块，主色只用于「可点击」提示
   - 8px 间距栅格；4 级字号；数值一律 tabular-nums 右对齐
   - 微过渡统一 160ms / ease-out，遵守 prefers-reduced-motion 降级
   ========================================================= */
.rep-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--split);}
.rep-kicker{font-size:11px;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;margin-bottom:5px;}
.rep-desc{font-size:13px;color:var(--text-2);}
.rep-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rep-tools .muted{font-size:12px;white-space:nowrap;}
.rep-tools .input{width:132px;flex:0 0 132px;height:32px;padding:5px 9px;font-size:13px;}

/* 指标卡：可点击态只加描边与箭头，不加阴影/渐变，避免视觉噪音 */
.stat-card.is-drill{cursor:pointer;transition:border-color .16s ease-out,background .16s ease-out;}
.stat-card.is-drill:hover,.stat-card.is-drill:focus-visible{border-color:var(--primary);background:var(--primary-bg);outline:none;}
.stat-card .s-more{display:block;margin-top:7px;font-size:12px;color:var(--primary-ink);}

/* 全模块明细入口：等宽栅格，每格一个模块 */
.rep-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:20px;}
.mod-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;
  background:var(--card);border:1px solid var(--split);border-radius:var(--r-card);
  padding:12px 14px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .16s ease-out,background .16s ease-out;}
.mod-chip:hover,.mod-chip:focus-visible{border-color:var(--primary);background:var(--primary-bg);outline:none;}
.mod-chip .m-main{display:block;flex:1 1 auto;min-width:0;}
.mod-chip .m-label{display:block;font-size:13px;color:var(--text-1);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
.mod-chip .m-sub{display:block;font-size:11px;color:var(--text-3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
.mod-chip .m-val{flex:0 0 auto;font-size:19px;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums;line-height:1.1;}
.mod-chip .m-arrow{color:var(--primary-ink);font-size:13px;flex:0 0 auto;}
.mod-chip.is-locked{opacity:.52;cursor:not-allowed;}
.mod-chip.is-locked:hover{border-color:var(--split);background:var(--card);}

/* 柱条可点：hover 只给一层浅底，不改变数值位置 */
.bar-row.is-drill{cursor:pointer;border-radius:var(--r-input);transition:background .16s ease-out;}
.bar-row.is-drill:hover{background:var(--fill);}
.bar-row.is-drill .bar-label{color:var(--primary-ink);}

/* 明细层 */
.drill-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--split);}
.drill-crumb{font-size:13px;color:var(--text-3);flex:1;min-width:160px;}
.drill-crumb span{margin:0 6px;color:var(--text-4);}
.drill-crumb b{color:var(--text-1);font-weight:600;font-size:15px;}
.drill-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.drill-tools .input{width:210px;max-width:210px;height:32px;padding:5px 9px;font-size:13px;}
.drill-summary{display:flex;flex-wrap:wrap;gap:22px;align-items:center;padding:12px 18px;margin-bottom:12px;}
.drill-summary .ds-item{min-width:96px;}
.drill-summary .ds-label{font-size:12px;color:var(--text-3);}
.drill-summary .ds-val{font-size:18px;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums;margin-top:2px;}
.drill-summary .ds-val.is-bad{color:var(--err);}
.drill-card{padding:0;overflow-x:auto;}
.drill-card .tbl thead th{position:sticky;top:0;background:var(--bg-head);z-index:1;}
.drill-card .tbl tbody tr{cursor:default;}
.drill-card .tbl tbody tr.has-link{cursor:pointer;}
.drill-note{font-size:12px;color:var(--text-3);line-height:1.6;}

/* 手机：工具条占满一行，明细卡内边距收敛 */
@media(max-width:768px){
  .rep-head{align-items:flex-start;}
  .rep-tools{width:100%;}
  .rep-mods{grid-template-columns:repeat(2,1fr);gap:8px;}
  .mod-chip{padding:10px 11px;}
  .mod-chip .m-val{font-size:16px;}
  .drill-tools{width:100%;}
  .drill-tools .input{flex:1;min-width:0;max-width:none;width:auto;}
  .drill-summary{gap:14px;padding:11px 13px;}
}
@media(prefers-reduced-motion:reduce){
  .stat-card.is-drill,.mod-chip,.bar-row.is-drill,.bar-fill,.fn-fill{transition:none!important;}
}

/* ---------- 客户表单内嵌联系人控件 ----------
   沿用同一套 token：1px 边框分层、留白分区、状态色只用于语义。
   一行一位联系人，次要字段折叠，避免建档弹窗被十几个输入框撑满。 */
.ct-editor{border:1px solid var(--split);border-radius:var(--r-card);background:var(--bg-head);padding:12px 14px;}
.ct-rows{display:flex;flex-direction:column;gap:10px;}
.ct-row{border:1px solid var(--border);border-radius:var(--r-input);background:var(--card);padding:10px 12px;}
.ct-row-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.ct-idx{font-size:12px;font-weight:600;color:var(--text-2);flex:1;min-width:90px;}
.ct-major{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);white-space:nowrap;cursor:pointer;}
.ct-major input{accent-color:var(--primary-active);margin:0;}
.ct-del{border:1px solid var(--border);border-radius:var(--r-input);background:var(--card);color:var(--text-2);
  font-size:12px;padding:3px 9px;cursor:pointer;}
.ct-del:hover{color:var(--err);border-color:var(--err);background:var(--err-bg);}
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;}
.ct-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ct-field>span{font-size:12px;color:var(--text-2);line-height:1.5;}
.ct-field .input{width:100%;box-sizing:border-box;min-width:0;}
.ct-field textarea.input{min-height:56px;resize:vertical;}
.ct-more{margin-top:10px;border-top:1px dashed var(--split);padding-top:8px;}
.ct-more summary{cursor:pointer;font-size:12px;color:var(--text-3);list-style:none;user-select:none;}
.ct-more summary::-webkit-details-marker{display:none;}
.ct-more summary::before{content:'\25B8';display:inline-block;margin-right:6px;color:var(--text-3);}
.ct-more[open] summary::before{content:'\25BE';}
.ct-more .ct-grid{padding-top:10px;}
.ct-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;}
.ct-bar .btn-sm2{border:1px solid var(--border);padding:4px 10px;border-radius:var(--r-input);
  background:var(--card);cursor:pointer;}
.ct-bar .btn-sm2:hover{border-color:var(--primary-active);color:var(--primary-ink-strong);}
.ct-hint{font-size:12px;color:var(--text-3);line-height:1.6;}
.ct-empty{padding:6px 0;color:var(--text-3);font-size:13px;}
@media(max-width:768px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-editor{padding:10px;}
}

/* ---------- 产品库：不可报价行 / 编辑表单只读参考区 ---------- */
.tbl tr.row-disabled{opacity:.56;}
.tbl tr.row-disabled .prod-name{font-weight:400;}
.form-row .fr-body .kv{padding:5px 0;}
.form-row .fr-body .kv b{width:106px;min-width:106px;}
.prod-form-tip{font-size:12px;color:var(--text-3);line-height:1.6;}
@media(max-width:768px){
  .form-row .fr-body .kv b{width:88px;min-width:88px;}
}

/* ---------- 对账回款：合同金额事实（应付 / 已付自动计算） ----------
   数据前置、金额右对齐感由等宽数字承担；只读事实区用描边分区，不伪装成输入框。 */
.fin-box{margin:2px 0 14px;}
.fin-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-input);overflow:hidden;}
.fin-cell{background:var(--card);padding:10px 12px;min-width:0;}
.fin-cell i{display:block;font-style:normal;font-size:12px;color:var(--text-3);
  margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-cell b{display:block;font-size:14px;font-weight:600;color:var(--text-1);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-cell .fin-key{color:var(--primary-ink-strong);font-size:15px;}
.fin-hint{margin-top:8px;font-size:12px;color:var(--text-3);line-height:1.6;}
.fin-hint.fin-warn{color:#9A6200;}
.fin-st{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;
  font-weight:600;margin-right:6px;vertical-align:1px;white-space:nowrap;}
.fin-st-ok{background:#E8F4EA;color:#1F7A3D;}
.fin-st-part{background:#FFF2DC;color:#9A6200;}
.fin-st-none{background:#EFF1F4;color:#5B6472;}
@media(max-width:768px){
  .fin-facts{grid-template-columns:repeat(2,1fr);}
  .fin-cell{padding:8px 10px;}
}
/* 发票列表增加派生列后表宽变大，横向滚动而不是把列压到看不清。
   13 列时若按 100% 均分，合同号 HT-20261113-821、日期会被折成两行，
   因此桌面端给最小宽度 + 单元格禁止换行；手机端仍走卡片化布局，不受影响。 */
#rows-invoices{overflow-x:auto;}
@media (min-width:769px){
  #rows-invoices .tbl{min-width:1380px;}
  #rows-invoices .tbl thead th,
  #rows-invoices .tbl tbody td{white-space:nowrap;}
  /* 列多到需要横向滚动时，把「操作」列冻在右侧，否则编辑/删除会被推出屏幕 */
  #rows-invoices .tbl thead th:last-child,
  #rows-invoices .tbl tbody td:last-child{
    position:sticky;right:0;z-index:2;background:var(--card);
    box-shadow:-10px 0 10px -10px rgba(16,24,40,.18);
  }
  #rows-invoices .tbl tbody tr:hover td:last-child{background:#FAFCFC;}
}

/* =========================================================
   手机端（≤768px）导航与报表中心收尾优化
   1) 底栏第 5 格由「更多」改为「报表」：抽屉入口统一收到页眉汉堡，
      抽屉本身也要为底栏让出 56px，否则最后两组菜单永远被压住。
   2) 报表中心在 375px 下：工具条不再各占一行、模块格改单列不截断副标题、
      柱条标签给足宽度（原来 76px 会把「A类客户-战略级大客户」切掉）。
   ========================================================= */
@media (max-width:768px){
  /* 抽屉：上下都定位，别让 iPhone Home 条和底栏吃掉最后两项 */
  .sidebar{
    top:54px;height:auto;
    bottom:calc(56px + env(safe-area-inset-bottom,0px));
    padding-bottom:8px;
  }
  .sidebar-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));font-size:10px;}

  /* 底栏文字：报表/合同降级时不换行、不抖动 */
  .bn-item .bn-txt{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bn-item.active .ico{transform:translateY(-1px);}

  /* 报表中心：工具条两行排布（下拉占满 + 刷新/导出并排） */
  .rep-head{gap:10px;margin-bottom:14px;padding-bottom:12px;}
  .rep-kicker{font-size:10px;letter-spacing:.12em;}
  .rep-desc{font-size:12px;line-height:1.55;}
  .rep-tools{width:100%;gap:8px;}
  .rep-tools .muted{display:none;}
  .rep-tools .input{flex:1 1 100%;width:100%;min-width:0;height:40px;font-size:15px;}
  .rep-tools .btn{flex:1 1 0;min-width:0;height:40px;padding:0 10px;font-size:13.5px;}

  /* 模块格：375px 两列时每格只剩 ~90px 文本，副标题必被截断，改单列 */
  .rep-mods{grid-template-columns:1fr;gap:8px;margin-bottom:16px;}
  .mod-chip{padding:11px 13px;align-items:center;}
  .mod-chip .m-label{white-space:normal;font-size:14px;line-height:1.35;}
  .mod-chip .m-sub{white-space:normal;font-size:11.5px;margin-top:2px;line-height:1.45;}
  .mod-chip .m-val{font-size:18px;min-width:44px;text-align:right;}
  .mod-chip .m-arrow{font-size:15px;}

  /* 柱条：标签列加宽并允许两行，数值列等宽对齐 */
  .bar-row{gap:8px;}
  .bar-label{width:92px;flex:0 0 92px;font-size:11.5px;line-height:1.35;white-space:normal;}
  .bar-val{width:78px;flex:0 0 78px;font-size:11.5px;}

  /* 指标卡上的「查看明细 →」原来只有 12px 文字，点击区域太小 */
  .stat-card .s-more{padding:5px 0 1px;font-size:12.5px;}
}

/* 手机端触控目标补足：页眉汉堡 26px、链路节点 28px、行内文字链接 17px 都偏小，
   手指点按容易打偏。只放大命中区，不改视觉字号与图标大小。 */
@media (max-width:768px){
  .hamburger{width:40px;height:40px;margin-left:-4px;}
  .chain-node{height:32px;padding:0 11px;}
  .btn-link{display:inline-flex;align-items:center;min-height:32px;padding:0 3px;
    font-size:13.5px;line-height:1.3;}
  /* 表格卡片化后操作格里的链接独占一行，给足高度并左对齐 */
  .tbl td:last-child .btn-link{min-height:34px;padding:0 4px;}
}

/* 内联表单被 scrollIntoView 滚到顶部时，给固定页眉留出高度，
   否则「登记回款 / 新建客户」的表单标题会被压在页眉下面看不见 */
.inline-form{scroll-margin-top:72px;}
@media (max-width:768px){
  .inline-form{scroll-margin-top:64px;}
}

/* =========================================================
   市场活动（阶段 1）：列表加宽 + 客户 360「参与活动」页签
   活动列表从 8 列涨到 10 列（预算/参与/签到），375px 卡片化不受影响，
   桌面端给足 min-width 并冻结操作列，避免「参与客户」按钮被挤到屏幕外。
   ========================================================= */
#rows-activities{overflow-x:auto;}
@media (min-width:769px){
  /* 12 列（含操作）在 1440 下刚好排满：min-width 只用来兜住 1280 的小屏，
     不再冻结操作列——冻结列会把紧邻的「状态」压在下面，反而看不清 */
  #rows-activities .tbl{min-width:1040px;}
  #rows-activities .tbl thead th,
  #rows-activities .tbl tbody td{white-space:nowrap;}
}

/* 参与活动：一行一场，左侧活动名与时间地点，右侧签到状态 */
.act-list{display:flex;flex-direction:column;}
.act-row{display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-bottom:1px solid var(--split);}
.act-row:last-child{border-bottom:0;}
.act-main{min-width:0;flex:1 1 auto;}
.act-main b{font-weight:500;font-size:13.5px;color:var(--text-1);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-sub{margin-top:3px;font-size:12px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-row .badge{flex:0 0 auto;}
@media (max-width:768px){
  .act-row{padding:12px 0;}
  .act-main b{white-space:normal;font-size:14px;line-height:1.4;}
  .act-sub{white-space:normal;line-height:1.45;}
}

/* 实际费用超预算：只用一个红色数值提示，不加底色，避免和状态徽章抢注意力 */
.act-over{color:var(--err);font-weight:500;}

/* 手机端下钻工具条：归因窗口下拉和搜索框各占一行，否则两个控件挤在一行，
   下拉只剩 80px，显示成「活动后 9…」，用户根本不知道自己选的是 30 还是 90 天。 */
@media (max-width:768px){
  .drill-tools{row-gap:8px;}
  #drillWin{flex:1 1 100%;width:100%;max-width:none;}
  #drillKw{flex:1 1 100%;}
  .drill-tools .btn{flex:1 1 0;min-width:0;}
}

/* =========================================================
   系统设置页（2026-11-14）
   一个入口 · 七个分区：桌面左栏固定，手机左栏变顶部横向滚动条。
   颜色与圆角全部复用上方令牌，不新增色值。
   ========================================================= */
.set-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:16px;align-items:start;}
.set-side{position:sticky;top:12px;min-width:0;}
.set-nav{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-card);padding:8px;box-shadow:var(--shadow-card);}
.set-nav-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 10px;
  border:0;border-left:3px solid transparent;border-radius:var(--r-btn);background:transparent;
  cursor:pointer;font:inherit;color:var(--text-1);transition:background .12s,border-color .12s;}
.set-nav-item b{font-size:13px;font-weight:600;}
.set-nav-item span{font-size:11px;color:var(--text-3);line-height:1.4;}
.set-nav-item:hover{background:var(--split-weak);}
.set-nav-item.active{background:var(--primary-bg);border-left-color:var(--primary);}
.set-nav-item.active b{color:var(--primary-ink-strong);}
.set-side-foot{margin-top:10px;padding:0 4px;font-size:11px;line-height:1.7;color:var(--text-4);}

.set-body{min-width:0;display:flex;flex-direction:column;gap:12px;}
.set-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:16px 18px;}
.set-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--split);}
.set-card-head b{font-size:14px;}
.set-card-head .muted{font-size:12px;}

.set-form{display:flex;flex-direction:column;gap:12px;max-width:720px;}
.set-field{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:start;}
.set-field>label{font-size:13px;color:var(--text-2);padding-top:7px;}
.set-ctrl .input{width:100%;}
.set-secret{display:flex;align-items:center;gap:8px;}
.set-secret .input{flex:1;min-width:0;}
.set-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
.set-actions .muted{font-size:12px;}
.set-danger{margin-top:10px;padding-top:10px;border-top:1px dashed var(--split);}

/* 模块开关 */
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 0;}
.sw-main b{font-size:13px;}
.sw-main .muted{font-size:12px;margin-top:3px;line-height:1.6;}
.sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--fill);
  border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer;font:inherit;font-size:12px;color:var(--text-2);}
.sw i{width:30px;height:18px;border-radius:999px;background:#D8CFBD;position:relative;transition:background .15s;}
.sw i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .15s;}
.sw.on{border-color:var(--primary-border);background:var(--primary-bg);color:var(--primary-ink-strong);}
.sw.on i{background:var(--primary);}
.sw.on i::after{transform:translateX(12px);}

/* 组织入口 */
.set-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.set-link{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:1px solid var(--border);
  border-radius:var(--r-card);background:var(--card);cursor:pointer;font:inherit;color:var(--text-1);}
.set-link b{font-size:13px;}
.set-link span{font-size:12px;color:var(--text-3);line-height:1.6;}
.set-link:hover{border-color:var(--primary-border);background:var(--primary-bg);}

.set-table-wrap{overflow-x:auto;}
.set-tbl{min-width:420px;}

/* 业务字典 */
.dict-group{margin-top:14px;}
.dict-group-head{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--split);}
.dict-group-head b{font-size:13px;color:var(--primary-ink-strong);}
.dict-type{margin-top:12px;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;}
.dict-type.is-readonly{background:var(--split-weak);}
.dict-type-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-head);
  border-bottom:1px solid var(--split);}
.dict-type-head b{font-size:13px;}
.dict-type-head .muted{font-size:11px;margin-left:auto;}
.dict-items{display:flex;flex-direction:column;}
.dict-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--split-weak);}
.dict-item:last-child{border-bottom:0;}
.dict-item.is-off .dict-lbl{text-decoration:line-through;color:var(--text-4);}
.dict-lbl{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dict-use{font-size:11px;color:var(--text-3);white-space:nowrap;}
.dict-ops{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.dict-rename{height:28px;max-width:220px;}
.dict-add{display:flex;gap:8px;padding:8px 12px;background:var(--bg-head);border-top:1px solid var(--split);}
.dict-add .input{flex:1;min-width:0;height:30px;}
.dict-empty{padding:10px 12px;font-size:12px;}

/* 权限矩阵补充 */
.perm-scope{margin-bottom:14px;padding:12px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-head);}
.perm-scope-head{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;margin-bottom:8px;}
.perm-scope-head .muted{font-weight:400;font-size:11px;}
.scope-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.scope-card{text-align:left;border:1px solid var(--border);background:var(--card);border-radius:var(--r-btn);
  padding:9px 10px;cursor:pointer;font:inherit;color:var(--text-1);}
.scope-card b{display:block;font-size:12px;}
.scope-card span{display:block;font-size:11px;color:var(--text-3);line-height:1.5;margin-top:2px;}
.scope-card.active{border-color:var(--primary);background:var(--primary-bg);}
.scope-card.active b{color:var(--primary-ink-strong);}
.scope-card:disabled{cursor:default;opacity:.6;}
.perm-sep{display:flex;align-items:center;gap:10px;margin:16px 0 8px;padding-top:12px;border-top:1px dashed var(--border);}
.perm-sep span{font-size:13px;font-weight:600;color:var(--warn);}
.perm-sep i{font-size:11px;color:var(--text-3);font-style:normal;}
.perm-hidden-tip{margin-top:14px;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--r-btn);
  background:var(--split-weak);font-size:12px;color:var(--text-3);}
.perm-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--split);}
.perm-foot .muted{font-size:11px;}
.role-view{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;}
.role-view-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-btn);font-size:13px;}
.role-view-row span{font-size:11px;padding:1px 6px;border-radius:var(--r-tag);background:var(--ok-bg);color:var(--ok);}
.role-view-row.off{color:var(--text-4);}
.role-view-row.off span{background:var(--neutral-bg);color:var(--text-3);}
.form-more{margin:2px 0 4px;}

@media (max-width:768px){
  .set-layout{grid-template-columns:minmax(0,1fr);gap:10px;}
  .set-side{position:static;}
  .set-nav{flex-direction:row;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none;}
  .set-nav::-webkit-scrollbar{display:none;}
  /* 桌面是竖排 width:100%，手机必须重置成按内容宽度，否则一个 tab 占满整行、
     后面几个被推到滚动区外，看起来像只有一个分区 */
  .set-nav-item{flex:0 0 auto;width:auto;min-width:auto;border-left:0;border-bottom:3px solid transparent;
    padding:7px 12px;align-items:center;white-space:nowrap;}
  .set-nav-item span{display:none;}
  .set-nav-item.active{border-bottom-color:var(--primary);}
  .set-side-foot{display:none;}
  .set-card{padding:12px;min-width:0;}
  .set-field{grid-template-columns:1fr;gap:4px;}
  .set-field>label{padding-top:0;font-size:12px;}
  .set-form{max-width:none;}
  .sw-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .dict-item{flex-wrap:wrap;gap:6px;}
  .dict-lbl{white-space:normal;}
  .dict-ops{width:100%;margin-left:0;justify-content:flex-start;}
  .dict-add .input{height:34px;}
  .set-actions .btn{flex:1 1 auto;}
  .role-head-ops{flex-wrap:wrap;gap:6px;}
  .role-head-ops .btn{flex:1 1 auto;}
  .scope-cards{grid-template-columns:1fr;}
  /* 手机上 8 个角色竖排会占满一整屏，权限矩阵被推到很下面；
     改成一行可横滑的角色条，选完立刻看到权限。 */
  .role-list{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding:8px;scrollbar-width:none;}
  .role-list::-webkit-scrollbar{display:none;}
  .role-item{flex:0 0 auto;min-width:132px;border:1px solid var(--border);}
  .role-item-sub{white-space:nowrap;}
  .role-list-card .card-head{display:none;}
}