/* ============================================================
   2.0 后台 · 在 ds.css（设计系统）之上的少量工程补充
   原则：能直接用 ds.css 的类就用 ds.css；这里只放设计稿里没有的东西。
         —— 侧栏分组折叠开关、图标尺寸、登录页、顶栏细节
   ============================================================ */

/* ---------- 侧栏：分组折叠 ----------
   ds.css 的 `.nav .grp` 是静态分组标签，这里把它变成可点击的折叠开关。
   2026-09-26：一级分组头加图标（menu_tree.html 渲染 .ic，icons.js 注入 SVG）；
   展开逻辑改手风琴（app.js：同屏最多展开一个分组、不再用 localStorage）。 */
.nav .navgrp{margin:0}
.nav .grp.grp-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;user-select:none;transition:color .15s}
.nav .grp.grp-toggle:hover{color:#8fb4d8}
.nav .grp.grp-toggle.open{color:#8fb4d8}
/* 标题占满中段；图标定宽、随文字色（分组收起时略淡，展开/悬停时提亮） */
.nav .grp.grp-toggle>.tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .grp.grp-toggle>.ic{flex:0 0 16px;width:16px;height:16px;opacity:.75}
.nav .grp.grp-toggle:hover>.ic,.nav .grp.grp-toggle.open>.ic{opacity:1}
.nav .grp .caret{width:0;height:0;flex:0 0 auto;opacity:.55;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .2s ease}
.nav .grp.grp-toggle.open .caret{transform:rotate(180deg)}
/* 分组头图标尺寸（.it .ic 那条只覆盖叶子菜单项，这里补分组头） */
.nav .grp.grp-toggle .ic svg{width:16px;height:16px}

/* ---------- 侧栏：底部版本 ---------- */
.sidefoot{padding:10px 16px;border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;color:#5f83ab;letter-spacing:.4px}

/* ---------- 图标尺寸（图标由 icons.js 注入 SVG） ---------- */
.nav .it .ic svg{width:16px;height:16px}
.nav .it .ic{display:flex;align-items:center;justify-content:center}
.top .icobtn svg,.top .search svg{width:15px;height:15px;flex:0 0 15px}
.side .brand .mk svg{display:none}
[data-ic]{display:inline-flex;align-items:center;justify-content:center}
[data-ic] svg{width:100%;height:100%}

/* ---------- 顶栏细节 ---------- */
.top .topright .mebtn{font-size:12px}
.top .topright .btn{height:30px;padding:0 11px;font-size:12px}
.top .crumb .cur{color:var(--t1);font-weight:500}
@media(max-width:1100px){.top .search{display:none}}

/* ---------- 登录页 ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(64,150,255,.28), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(26,188,156,.16), transparent 60%),
    linear-gradient(150deg,#0d2540 0%,#123a61 55%,#1b4f86 100%);
  padding:20px}
.login-card{width:400px;background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(8,30,60,.35);
  padding:30px 30px 24px;animation:lgIn .35s ease}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.login-card .lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.login-card .lg-brand .mk{width:36px;height:36px;flex:0 0 36px;border-radius:9px;position:relative;
  background:linear-gradient(150deg,#3aa0ff,#1565cf);box-shadow:0 4px 12px rgba(28,110,220,.35)}
/* 2026-10-14 LOGO 换图片（logo.jpg） */
.login-card .lg-brand .mk::before{content:none}
.login-card .lg-brand .mk img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:9px;display:block}
.login-card h1{font-size:17px;font-weight:600;color:var(--t1);line-height:1.35}
.login-card .lg-sub{font-size:11.5px;color:var(--t3);letter-spacing:.6px;margin-top:3px}
.login-card .lg-form{margin-top:22px}
.login-card .fd{margin-bottom:14px}
.login-card .fd label{display:block;font-size:12px;color:var(--t2);margin-bottom:6px}
.login-card .inp{width:100%;height:38px;border:1px solid var(--line);border-radius:6px;
  padding:0 12px;font-size:13px;background:#fbfdff;transition:border-color .15s,box-shadow .15s}
.login-card .inp:focus{outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(27,111,224,.1)}
.login-card .cap-row{display:flex;gap:9px;align-items:center}
.login-card .cap-row .inp{flex:1}
.login-card .cap-row img{height:38px;width:106px;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.login-card .btn-login{width:100%;height:40px;border-radius:6px;font-size:14px;font-weight:500;
  background:var(--primary);color:#fff;margin-top:6px;transition:background .15s}
.login-card .btn-login:hover{background:var(--primary-600)}
.login-card .btn-login:disabled{opacity:.6;cursor:not-allowed}
.login-card .lg-err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);
  font-size:12.5px;padding:8px 11px;border-radius:6px;margin-bottom:13px;display:none}
.login-card .lg-err.on{display:block}
.login-card .lg-foot{margin-top:18px;text-align:center;font-size:11px;color:var(--t4);line-height:1.7}

/* ---------- 登录页 · 三种方式 Tab（2026-10-14） ---------- */
.login-card .lg-tabs{position:relative;display:flex;margin:16px 0 14px;border-bottom:1px solid var(--line)}
.login-card .lg-tabs .tab{flex:1;background:none;border:0;padding:9px 0 11px;font-size:13px;
  color:var(--t3);cursor:pointer;font-weight:500;letter-spacing:.5px}
.login-card .lg-tabs .tab.on{color:var(--t1)}
.login-card .lg-tabs .tab-line{position:absolute;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#3aa0ff,#1565cf);transition:left .25s ease,width .25s ease}
.login-card .pane{display:none}
.login-card .pane.on{display:block;animation:paneIn .22s ease}
@keyframes paneIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.login-card .wx-box{text-align:center;padding:14px 0 6px}
.login-card .wx-box .wx-ic{width:72px;height:72px;margin:0 auto 10px;border-radius:18px;
  background:#eefaf2;display:flex;align-items:center;justify-content:center}
.login-card .wx-box .wx-t{font-size:14px;font-weight:600;color:var(--t1);margin:0 0 8px}
.login-card .wx-box .wx-s{font-size:12px;color:var(--t3);line-height:1.8;margin:0 0 16px}
.login-card .btn-wx{width:100%;height:40px;border:0;border-radius:9px;cursor:pointer;font-size:13.5px;
  color:#fff;background:linear-gradient(90deg,#34b96f,#2aae67);box-shadow:0 6px 16px rgba(42,174,103,.28)}
.login-card .btn-wx:hover{filter:brightness(1.05)}

/* ---------- 登录页 · 找回密码辅助查询（2026-10-14） ---------- */
.fgm .fg-find{padding:10px 12px;border-radius:9px;background:#f6f9fd;border:1px dashed #c9dcf2;margin-bottom:14px}
.fgm .fg-find .fd{margin-bottom:6px}
.fgm .fd-rst{font-size:12px;color:var(--t2);line-height:1.8;min-height:16px}
.fgm .fd-rst.ok{color:#0a7a43}
.fgm .fd-rst.bad{color:var(--danger,#d92d20)}

/* ---------- 登录页 · 注册浮层（2026-10-14） ---------- */
.login-card{position:relative}
.lg-reg{position:absolute;top:14px;right:18px;font-size:12.5px;color:#1565cf;text-decoration:none;
  padding:4px 12px;border:1px solid #cfe0f5;border-radius:20px;background:#f4f9ff}
.lg-reg:hover{background:#e8f2ff}
.rgm{width:430px;max-width:94vw}
.rgm .rg-tabs{display:flex;gap:8px;margin-bottom:12px}
.rgm .rg-tabs .rtab{flex:1;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:13px;color:var(--t2);cursor:pointer}
.rgm .rg-tabs .rtab.on{color:#1565cf;border-color:#8db8ea;background:#f0f7ff;font-weight:600}
.rgpane{display:none}
.rgpane.on{display:block}
.rgm .rg-tip{font-size:11.5px;color:var(--t3);line-height:1.7;background:#f7f9fb;border-radius:8px;padding:8px 10px;margin-top:10px}
.fg-err.ok{background:#e9f9f0;border-color:#b9e8cd;color:#0a7a43}

/* ---------- 登录页 · 忘记密码（2026-10-14） ---------- */
.login-card .lg-aux{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.login-card .lg-aux a{font-size:12.5px;color:var(--t3);text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:999px;background:#f4f8fd;border:1px solid #dfe9f5;transition:.15s}
.login-card .lg-aux a svg{color:#5b87b8}
.login-card .lg-aux a:hover{color:var(--p,#1565cf);border-color:#bcd4ef;background:#ecf4fc}
.login-card .lg-aux a:hover svg{color:var(--p,#1565cf)}
.login-card .lg-aux .aux-sep{width:1px;height:14px;background:#d8e4f0}
.modal.fgm{width:400px;max-width:92vw}
.fgm .modal-b{max-height:62vh;overflow:auto}
.fgm .fg-err{display:none;background:var(--danger-bg,#fdecec);border:1px solid var(--danger-line,#f6c6c6);
  color:var(--danger,#d92d20);padding:8px 12px;border-radius:8px;font-size:12.5px;margin-bottom:12px}
.fgm .fg-err.on{display:block}
.fgm .fd label{display:block;font-size:12px;color:var(--t2);margin-bottom:6px}
.fgm .cap-row{display:flex;gap:9px;align-items:center}
.fgm .cap-row .inp{flex:1}
.fgm .cap-row img{height:38px;width:106px;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.fgm .cap-row .btn{height:38px;flex:0 0 118px;font-size:12.5px}

/* ---------- 补充：ds.css 未覆盖的少量通用件 ---------- */
.kpis.k7{grid-template-columns:repeat(7,1fr)}
.kpis.k8{grid-template-columns:repeat(8,1fr)}
/* 可点击的指标卡（用工总览 8 张汇总卡）。
   ds.css 的 .kpi 是给 <div> 设计的，换成 <a> 之后必须显式补：
     color:inherit        —— 否则整卡变成链接蓝
     text-decoration:none —— 否则下划线
     display:block        —— 否则 <a> 是行内元素，grid 的列宽撑不开
   hover 只做边框 + 上浮 1px：整站没有花哨动效，这里也不引入。 */
a.kpi{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.kpi:hover{border-color:var(--primary);box-shadow:var(--sh-2);transform:translateY(-1px)}
a.kpi:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.tbl td.tc,.tbl th.tc{text-align:center}
.tbl td.ops,.tbl th.ops{white-space:nowrap}

/* ---------- 行内操作按钮（2026-09-26，覆盖 ds.css 的纯文字链接） ----------
   「查看/编辑/删除/模块入口」从裸文字升级为描边胶囊小按钮：图标 + 文字。
   设计语言对齐 ds.css 的 .btn-d（白底描边、hover 染色）：
     常规  = 白底灰字灰边，hover 蓝（--primary）
     删除  = 白底红字（.dg），hover 红
   图标由 list.js 用 UI_ICON() 内联 SVG（12px），不依赖 DOM 注入时序。
   特异性与 ds.css 的 `.tbl .ops a` 相同、靠后加载胜出。 */
.tbl .ops{gap:6px}
.tbl .ops a{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;
  border:1px solid var(--line-2);border-radius:6px;background:#fff;
  font-size:12px;line-height:1;color:var(--t2);cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.tbl .ops a svg{width:12px;height:12px;flex:0 0 12px}
.tbl .ops a:hover{color:var(--primary);border-color:#9ec4f0;background:#f5f9ff;text-decoration:none}
.tbl .ops a.dg{color:var(--danger)}
.tbl .ops a.dg:hover{color:var(--danger);border-color:#eba8a8;background:var(--danger-bg)}
/* 单行不换行的长文本列（施工单位这类）：宁可让表格横向滚动，也不折成两行。
   超出时省略号 + title 提示完整值（模板里已给 title）。 */
.tbl td.nw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.empty-row td{text-align:center;color:var(--t3);padding:44px 0!important}
.btn.btn-p[disabled]{opacity:.5;cursor:not-allowed}
.alert .f1{flex:1;min-width:0}
.mt14{margin-top:14px}
.mb0{margin-bottom:0!important}
.mb14{margin-bottom:14px}

/* ---------- 授权勾选树（角色 → 功能权限 role/priv） ----------
   ds.css 只在 `.tbl .ck` 里定义了复选框，授权页的复选框不在表格里，这里补齐；
   不往 ds.css 里加 —— 那份文件与 UI设计/assets/ds.css 保持逐字节一致，
   2.0 的工程补充一律落在本文件。 */
.ck{width:15px;height:15px;flex:0 0 15px;accent-color:var(--primary);
  cursor:pointer;margin:0;vertical-align:middle}
.card-h h3 .ck,.panelbox .ph .ck{margin-right:1px}
.panelbox .ph>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panelbox .pb label{user-select:none}
.panelbox .pb label:hover{color:var(--primary-600)}

/* 只读展示字段（crud/edit 的 readonly 分支、日志详情）*/
.form .inp[disabled]{background:#f7f9fc;color:var(--t2);cursor:default}
.form textarea.inp[disabled]{background:#f7f9fc;color:var(--t2)}


/* ============================================================
   统计报表（report/*）—— ds.css 之外的三处补充
   设计稿 report.html 用到的类都在 ds.css 里；这里只补它没有的：
   ① 条形列表的第 4 列（辅助口径，如「注 1,024 人」）
   ② 报表目录卡片网格与「当前页」高亮
   ③ 时间序列柱子太多时的横向滚动
   ============================================================ */

/* ① 条形列表第 4 列：辅助口径 */
.barlist .bl.r4{grid-template-columns:150px 1fr 84px 84px}
.barlist .bl .sub{color:var(--t3);text-align:right;font-size:11.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ② 报表目录：与设计稿 report.html 的 .grid.g3 等价，但需要"当前页"态 */
.rnav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rnav .panelbox{transition:border-color .15s,box-shadow .15s}
.rnav .panelbox:hover{border-color:var(--primary-300,#9cc4f0)}
.rnav .panelbox.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(27,111,224,.10)}
.rnav .panelbox .pb .fs11{line-height:1.6;min-height:34px}
@media(max-width:1180px){.rnav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.rnav{grid-template-columns:1fr}}

/* ③ 时间序列柱子超过 12 根时允许横向滚动，别把柱子压成线 */
.cols.scroll{overflow-x:auto;overflow-y:visible;padding-bottom:6px}
.cols.scroll .col{min-width:40px}



/* ============================================================
   用工管理（labor/*）—— ds.css 之外的补充
   设计稿 labor.html 里的类都在 ds.css 中；这里只补它没有的三样：
   ① 弹窗（ds.css 只有埋点 .phone 的示意，没有真弹窗）
   ② 多级班组树（劳务公司 → 班组 → 子班组，靠 padding-left 表达层级）
   ③ 风险命中面板（加人时"跳出来让用人单位做参考"的那一块）
   ============================================================ */

/* ---------- ① 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;z-index:900;background:rgba(13,37,64,.45);
  display:none;align-items:flex-start;justify-content:center;padding:52px 16px;overflow:auto}
.modal-mask.on{display:flex}
.modal{width:620px;max-width:100%;background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden}
.modal.wide{width:840px}
.modal-h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.modal-h h3{flex:1;min-width:0;font-size:14px;font-weight:600}
.modal-h .x{width:26px;height:26px;flex:0 0 26px;border-radius:7px;color:var(--t3);font-size:17px;
  display:flex;align-items:center;justify-content:center}
.modal-h .x:hover{background:var(--line-2);color:var(--t1)}
.modal-b{padding:16px 18px;max-height:64vh;overflow:auto}
.modal-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 18px;border-top:1px solid var(--line-2);background:#fafcff}
.modal-f .tip{margin-right:auto;font-size:11.5px;color:var(--t3)}
/* 只读值（弹窗里展示不可改的字段，如「公示周期」） */
.modal .ro{padding:0 11px;height:34px;line-height:32px;border:1px dashed var(--line);
  border-radius:6px;background:#f7f9fc;color:var(--t2);font-size:12.5px}
/* ------------------------------------------------------------------
 * ⚠️ 防御性规则：裸 .modal（没有 .modal-mask 父节点）一律不渲染。
 * 原因：position:fixed/inset:0/display:flex 都写在 .modal-mask 上，.modal 只有
 *   width/背景/圆角。少了父节点，弹窗就退化成普通块级元素 —— 因为它写在模板
 *   最末尾，肉眼看到的就是「点了新增没弹窗，表单跑到页面最底下」。
 * 宁可它直接不可见（配上 app.js 里 openModal 的 console.warn），
 * 也不要静默走形成"页面多出来一段表单"。
 * ------------------------------------------------------------------ */
.modal:not(.modal-mask .modal){display:none}

/* ---------- 工时上报进度条（labor/hours 第一眼） ---------- */
.missbar{display:flex;align-items:center;gap:12px;padding:11px 15px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--r-lg);font-size:12.5px;line-height:1.5}
.missbar .n{flex:0 0 auto;font-size:20px;font-weight:700;line-height:1;letter-spacing:-.5px}
.missbar .tx{flex:1 1 auto;min-width:0}
.missbar .go{flex:0 0 auto}
.missbar .go-wrap{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.missbar.bad{border-color:#f0d3a8;background:#fff9f0}
.missbar.bad .n{color:var(--warn)}
.missbar.ok{border-color:#bfe3cd;background:#f4fcf7}
.missbar.ok .n{color:var(--ok)}
/* 缺口条里的可点「药丸」：用工总览用它一眼点名"缺什么、缺多少" */
.missbar .items{display:flex;gap:10px;flex-wrap:wrap}
.missbar .it{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;padding:4px 12px;font-size:12px;color:var(--t1);text-decoration:none;background:#fff}
.missbar .it:hover{border-color:var(--primary)}
.missbar .it b{font-size:15px;font-weight:700;letter-spacing:-.3px}
.missbar .it.bad{border-color:#f0d3a8;background:#fff5e6}
.missbar .it.bad b{color:var(--warn)}
.missbar .it.ok{border-color:#bfe3cd;background:#f3fbf6}
.missbar .it.ok b{color:var(--ok)}

/* ---------- 复选框列表（指派劳资员弹窗） ---------- */
.cklist{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;padding:4px}
.cklist .ck{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:5px;
  font-size:12.5px;color:var(--t1);cursor:pointer}
.cklist .ck:hover{background:var(--primary-50)}
.cklist .ck input{width:14px;height:14px;flex:0 0 auto;accent-color:var(--primary);cursor:pointer}
.cklist .ck .ck-tx{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form .fd{margin-bottom:12px}
.form .fd label{display:block;font-size:12px;color:var(--t2);margin-bottom:5px}
.form .fd label .req{color:var(--danger);margin-left:2px}
.form .fd .hint{font-size:11px;color:var(--t3);margin-top:4px}
.form .inp{width:100%;height:34px;border:1px solid var(--line);border-radius:6px;padding:0 11px;
  font-size:12.5px;background:#fbfdff}
.form textarea.inp{height:auto;padding:8px 11px;line-height:1.6}
.form .inp:focus{outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(27,111,224,.1)}
.fx2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ---------- ② 多级班组树 ---------- */
.treewrap{max-height:560px;overflow:auto}

/* 用工工作台（labor/team）两栏宽度：左=班组树，右=成员名册
   为什么不用设计稿的 .g-3-2（3fr:2fr）：
     左树占 60%，右栏只剩约 480px，而成员表 8 列需要约 920px ——
     「籍贯」正好卡在可视边界外，用户看到的就是"籍贯这一列不显示"
     （数据其实 100% 有值，不是没数据）。
   这里改成「左固定窄栏 + 右自适应」：树名过长走省略号（.tnm 已支持），
   成员表拿到全部剩余宽度，不再需要横向滚动。
   ⚠️ 不改 ds.css —— 那份文件与 UI设计/assets/ds.css 逐字节一致，
     2.0 的工程补充一律落在本文件。
   ⚠️ 右侧必须是 minmax(0,1fr) 而不是 1fr：1fr 的最小尺寸是 min-content，
     会被表格内容顶宽，导致整行溢出（CSS Grid 的经典坑）。 */
.grid.g-tree-mem{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
@media (max-width:1200px){.grid.g-tree-mem{grid-template-columns:minmax(0,1fr)}}

.tree{padding:4px 0}
.tree .tn{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:6px;
  cursor:pointer;transition:background .12s}
.tree .tn:hover{background:var(--primary-50)}
.tree .tn.on{background:var(--primary-50);box-shadow:inset 2px 0 0 var(--primary)}
.tree .tn .tw{width:14px;flex:0 0 14px;color:var(--t3);font-size:9px;text-align:center;
  transition:transform .15s;line-height:1}
.tree .tn .tw.open{transform:rotate(90deg)}
.tree .tn .tw.leaf{visibility:hidden}
.tree .tn .tnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.tree .tn.on .tnm{font-weight:600;color:var(--primary-700)}
.tree .tn .tmeta{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.tree .tn .tcnt{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tree .tn .rk{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.tree .tn .rk.red{background:var(--danger)}
.tree .tn .rk.orange{background:var(--warn)}

/* ---------- ③ 风险命中面板 ---------- */
.riskbox{border:1px solid var(--danger-line);background:var(--danger-bg);
  border-radius:var(--r);padding:11px 13px;margin-bottom:12px}
.riskbox.clear{border-color:var(--ok-line);background:var(--ok-bg)}
.riskbox .rh{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--danger)}
.riskbox.clear .rh{color:var(--ok)}
.riskbox .rh .n{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--t3)}
.riskbox .rsub{font-size:11.5px;color:var(--t2);margin-top:4px;line-height:1.6}
.riskl{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.riskl .ri{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 10px;
  border-left-width:3px;border-left-style:solid}
.riskl .ri.red{border-left-color:var(--danger)}
.riskl .ri.orange{border-left-color:var(--warn)}
.riskl .ri.yellow{border-left-color:var(--t4)}
.riskl .ri .rt{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  margin-bottom:3px;flex-wrap:wrap}
.riskl .ri .rt .tm{margin-left:auto;font-weight:400;font-size:11px;color:var(--t3)}
.riskl .ri .rd{font-size:12px;color:var(--t2);line-height:1.65;word-break:break-all}
.riskl .ri .rm{font-size:11px;color:var(--t3);margin-top:4px}
.ackrow{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding-top:11px;
  border-top:1px dashed var(--danger-line);font-size:12px;color:var(--t2);cursor:pointer;user-select:none}
.ackrow input{margin-top:2.5px;flex:0 0 15px}

/* 成员/班组表里的小标记 */
.tbl td .rkdot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;
  margin-right:5px}
.tbl td .rkdot.red{background:var(--danger)}
.tbl td .rkdot.orange{background:var(--warn)}
.tbl .sub{display:block;font-size:11px;color:var(--t3);margin-top:1px}
.bzmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--t2);margin-top:2px}
.bzmeta b{color:var(--t1);font-weight:600}
/* 班组信息条右侧的操作链接（编辑班组 / 删除班组，2026-09-25） */
.bzmeta a{color:var(--primary);cursor:pointer;white-space:nowrap}
.bzmeta a:hover{text-decoration:underline}
.bzmeta a.act-delbz{color:var(--danger)}

/* ---------- 班组与成员页（labor/banzu，2026-09-25） ---------- */

/* 缺口条：无班组 / 空班组 全览统计，三个数字都是下钻链接 */
.gapbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12.5px;color:var(--t2)}
.gapbar .gi{padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--t2);cursor:default}
.gapbar a.gi{cursor:pointer;transition:all .15s ease}
.gapbar a.gi:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}
.gapbar .gi.on{background:var(--primary);border-color:var(--primary);color:#fff}
.gapbar .gi.on b{color:#fff}
.gapbar .gi.gi-lb{border:none;padding-left:0;font-weight:600;color:var(--t1)}
.gapbar .gi b{font-weight:700;color:var(--t1);margin-left:2px}
.gapbar a.gi.gi-danger:hover,.gapbar a.gi.gi-danger.on{background:var(--danger);border-color:var(--danger);color:#fff}
.gapbar a.gi.gi-danger b{color:var(--danger)}
.gapbar a.gi.gi-danger.on b{color:#fff}
.gapbar a.gi.gi-warn:hover,.gapbar a.gi.gi-warn.on{background:#c47f00;border-color:#c47f00;color:#fff}
.gapbar a.gi.gi-warn b{color:#c47f00}
.gapbar a.gi.gi-warn.on b{color:#fff}

/* 「工作台」行内按钮：小胶囊 + 四格图标，hover 反白填充（替代裸文字链接） */
.wkbtn{display:inline-flex;align-items:center;gap:5px;padding:3.5px 12px;border:1px solid var(--primary);
  border-radius:999px;color:var(--primary);font-size:12px;font-weight:600;background:transparent;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}
.wkbtn svg{width:12px;height:12px;flex:none}
.wkbtn:hover{background:var(--primary);color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(20,90,180,.22)}

/* ---------- ④ 补 ds.css 没有的几处小东西 ---------- */

/* 标题旁的浅色说明（设计稿 labor.html 用 <span class="hint">，但 ds.css 没定义） */
.phead h1 .hint{font-size:11.5px;font-weight:400;color:var(--t3);letter-spacing:0;
  padding-left:10px;border-left:1px solid var(--line)}

/* 树的"父子关系异常"黄点 —— .rk 只定义了 red / orange */
.tree .tn .rk.yellow{background:var(--t4)}

/* 行内代码（口径说明里用得多，默认 monospace 在中文里偏挤） */
.card code,.alert code,.panelbox code{font-family:var(--mono);font-size:11.5px;
  background:rgba(27,111,224,.07);border:1px solid rgba(27,111,224,.14);
  border-radius:4px;padding:1px 5px;margin:0 2px;white-space:nowrap}

/* 树里的标签/说明文字要能跟着行高收缩 */
.tree .tn .tnm .tag{transform:scale(.92);transform-origin:left center}
.tree .tn .tnm .muted{margin-left:4px}

/* 面板头里放控件时的紧凑高度（成员名册那一栏） */
.panelbox .ph .inp{height:28px;font-size:12px}
.panelbox .ph .btn{height:28px;padding:0 10px;font-size:12px}

/* 树容器为空时，.empty 的 46px 上下留白在窄栏里太大 */
.treewrap .empty{padding:34px 14px}
.treewrap .empty .d{line-height:1.7}

/* 弹窗里的表单：page.css 的 .fx2 是 1fr 1fr，弹窗里再收一点间距 */
.modal .form .fx2{gap:12px}
.modal .alert{margin-bottom:0}



/* ================================================================
 *  用工管理 · 月度工时 / 工资公示 / 违章预警 / 投诉调处
 *  （2026-09-24 补：这四页新增的元素类型）
 * ================================================================ */

/* 表单标签里的必填星号 */
.fi .lb em{color:var(--danger);font-style:normal;font-weight:600;margin-left:2px}

/* 导入结果提示条（成功绿 / 失败红） */
.impmsg{padding:10px 14px;border-radius:8px;font-size:12.5px;margin:0 0 10px}
.impmsg.ok{background:rgba(24,160,88,.09);border:1px solid rgba(24,160,88,.24);color:#0f7a43}
.impmsg.bad{background:rgba(214,58,58,.08);border:1px solid rgba(214,58,58,.22);color:#a72424}

/* 多文件/多段表单的横排（导入那一行 4 个控件） */
.panelbox .ph .fx2{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.panelbox .ph .fx2 .fi{display:flex;flex-direction:column;gap:4px}
.panelbox .ph .fx2 .lb{font-size:12px;color:var(--t2)}

/* 「新增/更新/失败」这类计数标签在结果区里换行排 */
.panelbox .ph .tag{margin:0 6px 6px 0}

/* 详情键值区（投诉详情） */
.caseinfo{border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
.caseinfo .fx2{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.caseinfo .fi{display:flex;flex-direction:column;gap:3px}
.caseinfo .lb{font-size:11.5px;color:var(--t3)}
.caseinfo .fv{font-size:12.5px;color:var(--t1);line-height:1.6;word-break:break-all}
.caseinfo > .fi{margin-top:10px}

/* 详情底部的动作条 */
.opsbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px 0;margin:12px 0 0;border-top:1px solid var(--line)}

/* 办理记录时间轴 */
.tl{margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
.tlh{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:10px}
.tli{position:relative;padding:0 0 12px 16px;border-left:1px solid var(--line)}
.tli:last-child{border-left-color:transparent;padding-bottom:0}
.tli::before{content:"";position:absolute;left:-3.5px;top:3px;width:6px;height:6px;
  border-radius:50%;background:var(--primary)}
.tld{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;margin-bottom:3px}
.tlc{font-size:12.5px;color:var(--t1);line-height:1.65;word-break:break-word}

/* 表格行可点（投诉清单左侧点编号进详情；这里给整行 hover 反馈） */
.tbl tbody tr.js-row{cursor:default}
.tbl tbody tr.js-row.on{background:rgba(27,111,224,.055)}
.tbl tbody tr.js-row:hover{background:rgba(27,111,224,.035)}

/* 宽版弹窗（录入投诉字段多） */
.mbox-lg{width:min(880px,94vw)}
.modal .form .fi .tip{font-size:11.5px;color:var(--t3);margin-top:3px}
.modal .form textarea.inp{resize:vertical;line-height:1.6;padding:8px 10px;height:auto}

/* 空态兜底（详情栏没选案件时） */
.panelbox .empty{padding:46px 16px;text-align:center;color:var(--t3);font-size:12.5px;line-height:1.8}

/* ---- 我的工作台：快捷入口列表 ----
   入口**只从当前身份可见菜单生成**（见 Index::entries()），
   所以不会出现"点了就 403"的死链。 */
.qlinks{display:flex;flex-direction:column;gap:7px}
.qlink{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  text-decoration:none;transition:border-color .15s,background .15s}
.qlink:hover{border-color:var(--primary);background:#f6f9ff}
.qlink .qt{font-size:13px;color:var(--t1);font-weight:500}
.qlink .qg{font-size:11px;color:var(--t3);flex:0 0 auto}

/* ---- 我的工作台 & 查看页通用补充（2026-09-25）----
   index/index 视图按驾驶舱原型类名编写，但这批类从未落进 CSS → 整页裸渲染。
   grid-2/grid-4/pill/notice/btn-ghost/btn-sm 在 company/project 查看页同样使用。 */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-4,.grid-2{grid-template-columns:1fr}}

.stat{position:relative;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px}
.stat .lb{font-size:12.5px;color:var(--t2)}
.stat .vl{font-size:24px;font-weight:700;color:var(--t1);margin-top:6px;line-height:1.25}
.stat .vl small{font-size:12px;font-weight:400;color:var(--t3);margin-left:3px}
.stat .ft{font-size:11px;color:var(--t3);margin-top:7px}

.card > h3{font-size:14px;font-weight:600;color:var(--t1);margin:0 0 10px;
  display:flex;align-items:center;gap:8px}
.card > h3::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--primary)}

.todo{display:flex;align-items:flex-start;gap:11px;padding:11px 2px}
.todo + .todo{border-top:1px dashed var(--line)}
.todo .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:6px;background:#c0c7d1}
.todo .dot.warn{background:var(--warn)}
.todo .dot.danger{background:var(--danger)}
.todo .dot.ok{background:var(--ok)}
.todo .dot.info{background:var(--info)}
.todo .tt{font-size:13px;color:var(--t1);font-weight:600}
.todo .ct{color:var(--danger);font-weight:600;margin-left:3px}
.todo .ds{font-size:12px;color:var(--t3);margin-top:3px}
.todo .btn{flex:0 0 auto;margin-left:4px}

.pill{display:inline-block;font-size:11px;line-height:1.7;color:var(--t2);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:0 9px;vertical-align:1px;white-space:nowrap}
.pill-info{color:var(--primary);background:var(--primary-50);border-color:var(--primary-200)}

.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--t2)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-50)}
.btn-sm{padding:3px 11px;font-size:12px}

.notice{font-size:12.5px;line-height:1.9;color:var(--t2);background:var(--info-bg);
  border:1px solid var(--info-line);border-radius:var(--r);padding:12px 14px}
.notice b{color:var(--t1)}

/* ---- 月度工作量汇总（wage 半年矩阵，2026-09-25）---- */
.hybar .hy-cur{font-size:13px;font-weight:600;color:var(--t1)}
.cellst{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:58px;
  text-align:center;font-size:12px;font-weight:600;line-height:1.6;padding:4px 13px;
  border-radius:6px;cursor:pointer;white-space:nowrap;border:1px solid transparent;
  transition:box-shadow .15s,transform .15s,filter .15s}
.cellst.done{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.cellst.miss{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
.cellst.miss em{font-style:normal;font-size:10.5px;opacity:.8;margin-left:1px;
  border-bottom:1px dotted currentColor;line-height:1}
.cellst.done:hover,.cellst.miss:hover{filter:brightness(1.03)}
.cellst:hover{text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.25);transform:translateY(-1px)}
.cellst:active{transform:translateY(0);filter:brightness(.93)}
.hybar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fbfdff,#f6f9fd)}
.hybar .hybtn{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;border-radius:999px;
  font-weight:600;border-color:var(--primary-200);color:var(--primary);background:#fff}
.hybar .hybtn:hover{background:var(--primary);border-color:var(--primary);color:#fff;text-decoration:none;
  box-shadow:0 2px 8px rgba(20,90,180,.28)}
.wage-mx td{vertical-align:middle}

/* ---- 姓名联想下拉（加人弹窗，2026-09-25）---- */
.fd{position:relative}
.nmsug{position:absolute;top:100%;left:0;z-index:40;margin-top:3px;max-height:212px;
  overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 22px rgba(20,40,80,.14);display:none;
  min-width:340px;max-width:min(460px,80vw)}
.nmsug .nmi{display:flex;align-items:center;gap:12px;padding:7px 12px;font-size:12.5px;
  cursor:pointer;white-space:nowrap}
.nmsug .nmi:hover{background:#f6f9ff}
.nmsug .nmi b{color:var(--t1);font-weight:600}
.nmsug .nmi .mono{color:var(--t2);font-family:var(--mono);font-size:11.5px}
.nmsug .nmi .t3{color:var(--t3);font-size:11px;margin-left:auto}

/* ---- 内联 SVG 兜底：不设尺寸的 SVG 默认 300×150，会把容器撑爆
      （2026-09-25 实测：风险提示框的警示三角把加人弹窗撑开了）---- */
.riskbox .rh svg{width:15px;height:15px;flex:none}
svg{max-width:28px;max-height:28px}

/* ---- 矩阵「项目名称」列：长了截断，不换行（悬浮 title 看全名）---- */
.wage-mx .ellip{max-width:380px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wage-mx .ellip a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  vertical-align:bottom}
/* ---- 列表「事由」类长文本（投诉原因等）：td 内单行截断，悬浮 title 看全文 ---- */
.tbl .ellip{display:inline-block;max-width:340px;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   2026-10-11：清单表头自主排序 + 班组工作台风险卡
   ============================================================ */
/* ---- 可排序列头：app.js bootTableSort 自动加 .sortable，点击切 asc/desc ---- */
.tbl th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:18px}
.tbl th.sortable:hover{color:var(--primary)}
.tbl th.sortable::after{content:"\2195";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-size:10px;opacity:.35;font-weight:normal}
.tbl th.sortable.asc::after{content:"\25B2";opacity:1;color:var(--primary)}
.tbl th.sortable.desc::after{content:"\25BC";opacity:1;color:var(--primary)}

/* ---- 班组工作台「风险提示」卡（labor/team 右侧，命中条目可点击查看） ---- */
.riskcard{border:1px solid var(--danger-line,#f3c1c1);background:var(--danger-bg,#fdf3f3);
  border-radius:8px;padding:10px 12px;margin:0 0 10px}
.riskcard .rc-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;
  color:var(--danger,#b42318);margin-bottom:8px}
.riskcard .rc-it{display:flex;flex-direction:column;gap:2px;padding:7px 9px;margin-bottom:6px;
  background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:6px;color:inherit;
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.riskcard .rc-it:hover{border-color:var(--danger,#b42318);box-shadow:var(--sh-1,0 1px 4px rgba(0,0,0,.06))}
.riskcard .rc-it.lv-red{border-left:3px solid #d92d20}
.riskcard .rc-it.lv-orange{border-left:3px solid #f79009}
.riskcard .rc-it.lv-yellow{border-left:3px solid #f2c94c}
.riskcard .rc-t{font-size:12.5px;font-weight:600}
.riskcard .rc-t b{color:var(--danger,#b42318)}
.riskcard .rc-badge{display:inline-block;font-size:10.5px;color:#fff;background:#d92d20;
  border-radius:4px;padding:0 5px;line-height:16px;vertical-align:1px}
.riskcard .rc-i{font-size:12px;color:var(--t2,#374151)}
.riskcard .rc-m{font-size:11px;color:var(--t3,#9ca3af)}

/* ---- 导入页：套餐按钮组 / 文件选择美化（2026-10-14c） ---- */
.plangrid{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 4px}
.planbtn{border:1.5px solid #e3e9f2;border-radius:10px;background:#fff;padding:10px 16px;font-size:13px;cursor:pointer;transition:all .12s;color:var(--t1,#1f2937)}
.planbtn:hover{border-color:var(--primary,#2f6fed);color:var(--primary,#2f6fed)}
.planbtn.on{border-color:var(--primary,#2f6fed);background:var(--primary,#2f6fed);color:#fff;font-weight:600}
.filepick{display:flex;flex-direction:column;gap:3px;border:1.5px dashed #c9d4e5;border-radius:10px;background:#f9fbfe;padding:18px 16px;cursor:pointer;transition:all .12s;max-width:560px}
.filepick:hover{border-color:var(--primary,#2f6fed);background:#f2f6ff}
.filepick input[type=file]{position:absolute;left:-9999px}
.filepick .fp-t{font-size:13.5px;font-weight:600;color:var(--primary,#2f6fed)}
.filepick .fp-n{font-size:12.5px;color:#0f9d63;font-weight:600;min-height:16px}
.filepick .fp-s{font-size:12px;color:#8a94a6;line-height:1.5}

/* ---- 体检预约 · 预约月历（2026-10-14d 美化版：单月视图+翻页，绿=可约，灰=停约/已满，描边=今天） ---- */
.mcalwrap{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px;max-width:640px}
.mcal{border:1px solid #e3e9f2;border-radius:12px;background:#fff;padding:14px 16px;box-shadow:0 1px 3px rgba(13,37,64,.05)}
.mcalnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mcal .mt{font-weight:700;font-size:14.5px;color:var(--t1,#1f2937);letter-spacing:.5px}
.mcal .mn{font-size:12.5px;color:var(--primary,#2f6fed);background:#f2f6ff;border:1px solid #d8e4ff;border-radius:999px;padding:4px 13px;cursor:pointer;user-select:none;transition:all .12s}
.mcal .mn:hover{background:var(--primary,#2f6fed);color:#fff;border-color:var(--primary,#2f6fed)}
.mcal table{border-collapse:separate;border-spacing:3px 2px;width:100%;table-layout:fixed}
.mcal th{font-size:11px;color:#8a94a6;font-weight:600;padding:3px 0;text-align:center}
.mcal td{text-align:center;padding:0}
.mcal td .d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;border-radius:9px;font-size:13px;line-height:1.15;color:#c4cbd7;cursor:default;background:#f6f8fb;transition:all .12s}
.mcal td .d i{font-style:normal;font-size:9.5px;color:#7fb99d;margin-top:2px}
.mcal td.avail .d{background:#e8f7ef;color:#0b7a4b;font-weight:600;cursor:pointer}
.mcal td.avail .d i{color:#0f9d63;font-weight:700}
.mcal td.avail .d:hover{background:#0f9d63;color:#fff;transform:translateY(-1px);box-shadow:0 3px 9px rgba(15,157,99,.32)}
.mcal td.avail .d:hover i{color:#eafff4}
.mcal td.sel .d{background:var(--primary,#2f6fed)!important;color:#fff!important;box-shadow:0 0 0 3px rgba(47,111,237,.22)}
.mcal td.sel .d i{color:#dbe9ff!important}
.mcal td.today .d{box-shadow:inset 0 0 0 1.5px #f59e0b}
.mcal td.today:not(.avail) .d{color:#b45309}
.mcal td.today .d::after{content:'今';position:absolute;top:2px;right:4px;font-size:8.5px;color:#f59e0b;font-weight:700}
.mcal td.weekend:not(.avail) .d{background:#faf6f6;color:#e5dcdc}
.mcal .mlegend{display:flex;gap:18px;font-size:11.5px;color:#8a94a6;margin-top:10px;padding-left:2px;flex-wrap:wrap}
.mcal .mlegend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.mcal .mlegend .lg-ok::before{background:#0f9d63}
.mcal .mlegend .lg-no::before{background:#e3e9f2}
.mcal .mlegend .lg-today::before{background:#fff;box-shadow:inset 0 0 0 1.5px #f59e0b}

/* ---- 体检预约 · 日期资源墙 / 时段快选（2026-10-14） ---- */
.daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:6px 0 14px}
.daycard{border:1px solid #e3e9f2;border-radius:9px;padding:8px 6px;text-align:center;cursor:pointer;background:#fff;user-select:none;transition:all .12s}
.daycard:hover{border-color:var(--primary,#2f6fed);color:var(--primary,#2f6fed)}
.daycard.on{border-color:var(--primary,#2f6fed);background:var(--primary,#2f6fed);color:#fff}
.daycard.on .d2{opacity:.9}
.daycard .d1{font-size:12.5px;font-weight:600}
.daycard .d2{font-size:11px;opacity:.7;margin-top:2px}
.daycard.off{opacity:.45;cursor:not-allowed;background:#f6f8fb}
.slotgrid{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;align-items:center}
.slotbtn{border:1px solid #e3e9f2;border-radius:8px;padding:6px 12px;font-size:12.5px;cursor:pointer;background:#fff;transition:all .12s}
.slotbtn:hover{border-color:var(--primary,#2f6fed);color:var(--primary,#2f6fed)}
.slotbtn.on{border-color:var(--primary,#2f6fed);background:var(--primary,#2f6fed);color:#fff}
.slotbtn.off{opacity:.45;cursor:not-allowed}