/* =====================================================================
   云鹊工作台 · 全局样式（严格按原型配色与风格）
   配色 / 布局 / 圆角 / 阴影 均来自《云鹊工作台.html》原型
   ---------------------------------------------------------------------
   改动原则（见 docs/前端样式交接文档.md 第八节）：
   只改视觉，不动 C# 逻辑 / 字段 / 事件绑定 / 权限控制。
   ===================================================================== */

:root{
  --bg:#F4F6F9; --card:#FFFFFF; --card2:#FBFCFE;
  --ink:#1C1C1E; --ink2:#26262A; --ink3:#3A3A40;
  --tx:#1F242C; --tx2:#69727D; --tx3:#9AA4AE;
  /* 兼容别名：历史代码与交接文档中曾写作 --tx1，统一指向 --tx，避免变量未定义 */
  --tx1:var(--tx);
  --brand:#FFC72C; --brand-ink:#1C1C1E; --brand-soft:#FFF6DA;
  --line:#E7ECF1; --line2:#F1F4F8;
  --red:#E5484D; --red2:#FDECEC; --orange:#F08C00; --orange2:#FFF2E0;
  --green:#16A34A; --green2:#E8F7EE; --blue:#2D7FF9; --blue2:#E9F1FF;
  --purple:#7B61FF; --purple2:#F0ECFF;
  --r:18px; --r2:12px; --r3:9px;
  --sh:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --sbw:248px;
  --topbar-h:60px;
}

html, body {
  margin:0; padding:0;
  background: var(--bg); color: var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* =====================================================================
   一、顶栏（原型 .topbar 风格：白底、1px 底线、无阴影）
   ===================================================================== */
.mud-appbar {
  background: #fff !important;
  color: var(--tx) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  height: var(--topbar-h);
}

.yq-brand{
  display:flex; align-items:center; gap:10px; flex:none;
}
.yq-brand .lg{
  width:32px; height:32px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#FFD84D,#FFB300);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-ink); font-weight:800; font-size:15px;
  box-shadow:0 4px 12px rgba(255,183,0,.32);
}
.yq-brand .bt{ display:flex; flex-direction:column; line-height:1.2; }
.yq-brand .bt b{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.yq-brand .bt span{ font-size:11px; color:var(--tx3); white-space:nowrap; }

/* 顶栏当前页标题（接在品牌后，原型为面包屑） */
.yq-topbar-title{
  display:flex; align-items:center; gap:8px;
  padding-left:14px; margin-left:4px;
  border-left:1px solid var(--line);
  font-size:15px; font-weight:700; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yq-topbar-title .crumb{ font-size:12px; font-weight:500; color:var(--tx3); }

/* 用户胶囊（原型 .userpill） */
.yq-userpill{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 10px 0 4px;
  border:1px solid var(--line); border-radius:20px;
  background:#fff; font-size:13.5px; font-weight:600; color:var(--tx);
  transition:.15s;
}
.yq-userpill:hover{ border-color:var(--brand); background:var(--brand-soft); }
.yq-avsm{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FFD84D,#FFB300);
  color:var(--brand-ink); font-size:13px; font-weight:700;
}

/* 铃铛（原型 .bell） */
.yq-bell{
  position:relative; width:38px; height:38px; border-radius:12px;
  border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--tx2); transition:.15s;
}
.yq-bell:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.yq-bell .badge{
  position:absolute; top:-5px; right:-5px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-sizing:content-box; pointer-events:none;
}

/* =====================================================================
   二、侧栏（原型 .sidebar：深底 + 品牌块 + 分组标题 + 激活黄色竖条）
   ===================================================================== */
.mud-drawer {
  background: var(--ink) !important;
  color: #fff;
}
.mud-drawer .mud-drawer-content{ padding:0 !important; }

.yq-sidebar{
  display:flex; flex-direction:column;
  height:100%; min-height:100%; padding:10px 0 12px; overflow-y:auto;
}
.yq-sidebar .mud-navmenu{ padding:0 !important; background:transparent !important; }

/* 侧栏品牌块。
   留白刻意收紧：原来上下左右各留 16~22px，Logo 与标题被大片深色包围，
   视觉上「显得很小」——用户反馈的主因就是留白，而不是尺寸本身。 */
.yq-side-brand{
  display:flex; align-items:center; gap:10px;
  padding:2px 18px 6px; flex:none;
}
.yq-side-brand .lg{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,#FFD84D,#FFB300);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-ink); font-weight:800; font-size:18px;
  box-shadow:0 4px 14px rgba(255,183,0,.35);
}
.yq-side-brand .bt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.yq-side-brand .bt b{ font-size:15.5px; font-weight:700; color:#fff; white-space:nowrap; }
.yq-side-brand .bt span{ font-size:11.5px; color:#9aa0a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 分组小标题（原型 .navlabel）。左内边距保持 24px 不动，才能和导航项文字对齐 */
.yq-navlabel{
  font-size:11px; color:#6b7178; letter-spacing:.6px;
  padding:8px 24px 4px; font-weight:600;
}

/* 导航项 */
.mud-nav-link {
  position:relative;
  color: #c6ccd4 !important;
  border-radius: 12px !important;
  margin: 2px 14px !important;
  padding: 10px 12px !important;
  font-size:14px; font-weight:500;
  transition:.15s;
}
.mud-nav-link:hover { background: var(--ink2) !important; color:#fff !important; }

/* ⚠️ MudBlazor 8 激活态的真实类名是 .active（不是 .mud-nav-link-active），
      之前写成 .mud-nav-link-active 导致高亮从未生效，此处已修正 */
.mud-nav-link.active,
.mud-nav-item.active .mud-nav-link {
  background: linear-gradient(90deg, rgba(255,199,44,.16), rgba(255,199,44,.04)) !important;
  color: #fff !important;
  font-weight:600;
}
.mud-nav-link.active::before,
.mud-nav-item.active .mud-nav-link::before {
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--brand);
}
.mud-nav-link .mud-nav-link-icon { color: inherit !important; }
/* 让文字区撑满并两端对齐，使 .yq-cnt 角标能靠右 */
.mud-nav-link .mud-nav-link-text{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}

/* 数量角标（= 该页面未读消息数；父节点显示子节点之和）
   ⚠️ 角标恒定黄色：不随「激活/未激活」切换配色，方便一眼扫到哪些页面有未读。
      子元素自带 color，父级 .mud-nav-link(.active/:hover) 的 color 不会覆盖它。 */
.yq-cnt{
  margin-left:auto; font-size:11px; min-width:20px; text-align:center;
  background:var(--brand); color:var(--brand-ink); font-weight:700;
  padding:1px 8px; border-radius:9px;
  white-space:nowrap; flex:none;   /* 角标不换行、不被压缩，避免 99+ 折行 */
}

/* 侧栏分组头（自定义折叠） */
.yq-group-head{
  display:flex;align-items:center;gap:10px;
  color:#c6ccd4;border-radius:12px;margin:2px 14px;padding:10px 12px;
  font-size:14px;font-weight:500;cursor:pointer;transition:.15s;
}
.yq-group-head:hover{background:var(--ink2);color:#fff}
.yq-group-head.on{background:linear-gradient(90deg,rgba(255,199,44,.16),rgba(255,199,44,.04));color:#fff}
.yq-group-head .mud-icon-root{opacity:.85}
.yq-group-head .yq-caret{margin-left:auto;opacity:.7}
/* 分组头里有角标时：角标吃掉自动外边距，收起箭头紧跟其后 */
.yq-group-head .yq-cnt{margin-left:auto}
.yq-group-head .yq-cnt + .yq-caret{margin-left:8px}
.yq-child{margin-left:16px}
.yq-child .mud-nav-link{font-size:13.5px;padding:8px 12px !important}

/* 侧栏底部状态（原型 .sidefoot / .sync） */
.yq-side-foot{
  margin-top:auto; display:flex; flex-direction:column; gap:8px;
  padding:12px 16px 0; border-top:1px solid rgba(255,255,255,.08);
}
.yq-sync{
  display:flex; align-items:center; gap:7px; font-size:12px; color:#aeb4bc;
  padding:8px 12px; background:rgba(255,255,255,.05); border-radius:10px;
}
.yq-sync .dot{ width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 3px rgba(61,220,132,.2); flex:none; }

/* =====================================================================
   三、主内容区与页头（原型 .main / .main-top）
   ===================================================================== */
.mud-main-content { background: var(--bg); }

.yq-main{ padding:22px 26px 40px; min-width:0; }

.yq-page-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; flex-wrap:wrap;
}
.yq-page-head h1{
  font-size:21px; font-weight:800; margin:0; letter-spacing:.3px; color:var(--tx);
}
.yq-page-head .crumb{ font-size:13px; color:var(--tx3); margin-left:2px; }
.yq-page-head .sp{ flex:1; }

/* =====================================================================
   四、按钮（原型 .btn / .btn-p / .btn-g / .btn-d）
   主按钮为深色，黄色仅作强调（hover 边框 / 激活态 / 品牌 / 进度条）
   ===================================================================== */
.yq-btn{
  height:40px; padding:0 15px; border-radius:10px; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; background:#fff; color:var(--tx);
  cursor:pointer; transition:.15s; text-decoration:none; white-space:nowrap;
}
.yq-btn:disabled{ opacity:.5; cursor:not-allowed; }
.yq-btn-p{ background:var(--ink); color:#fff; }
.yq-btn-p:hover{ background:#000; transform:translateY(-1px); }
.yq-btn-g{ background:#fff; color:var(--tx2); border-color:var(--line); }
.yq-btn-g:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.yq-btn-d{ background:var(--red2); color:var(--red); border-color:#F7CFCF; }
.yq-btn-d:hover{ background:var(--red); color:#fff; }
.yq-btn-sm{ height:30px; padding:0 11px; border-radius:8px; font-size:12px; }

/* MudBlazor 主色按钮：深色底，避免黄底白字对比度问题 */
.mud-button-filled.mud-button-filled-primary{
  background-color: var(--ink) !important;
  color: #fff !important;
  box-shadow: var(--sh);
}
.mud-button-filled.mud-button-filled-primary:hover{
  background-color:#000 !important;
}
.mud-button-outlined.mud-button-outlined-primary{
  color: var(--tx) !important;
  border-color: var(--line) !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover{
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

/* =====================================================================
   五、卡片 / 通用容器
   ===================================================================== */
.mud-card { border-radius: var(--r) !important; border:1px solid var(--line); box-shadow: var(--sh) !important; }

.yq-panel{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh); padding:18px;
}

.text-brand { color: var(--brand); }
.bg-surface { background: var(--card); }

/* 空状态 */
.yq-empty{ padding:24px 14px; text-align:center; color:var(--tx3); font-size:13px; }

/* Tabs（原型 .tabs / .tab） */
.yq-tabs{
  display:flex; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:6px; margin-bottom:18px; box-shadow:var(--sh); overflow-x:auto;
}
.yq-tab{
  flex:1; min-width:104px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:14px; color:var(--tx2); font-weight:600; white-space:nowrap;
  transition:.15s; cursor:pointer; border:none; background:none; font-family:inherit;
}
.yq-tab:hover{ background:var(--line2); }
.yq-tab.on{ background:var(--ink); color:#fff; }

/* 筛选栏（原型 .fbar） */
.yq-fbar{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:16px; }
.yq-fsp{ flex:1; }

/* =====================================================================
   六、顶部「今天要处理」区块（还原原型 today 卡片）
   ===================================================================== */
.today-card{
  background:linear-gradient(135deg,#FFFDF5,#FFFFFF);
  border:1px solid #F1E6C4; border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden;
}
.today-card .today-hd{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid #F3ECCA; background:linear-gradient(90deg,var(--brand-soft),transparent 70%);
}
.today-card .today-hd .dt{ margin-left:auto; font-size:12.5px; color:var(--tx2); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-cell{ padding:14px 18px; border-right:1px solid #F3ECCA; display:flex; align-items:center; gap:12px; }
.stat-cell:last-child{ border-right:none; }
.stat-cell .ic{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
}
.stat-cell .sl{ font-size:12.5px; color:var(--tx2); line-height:1.35; }
.stat-cell .sl b{ display:block; font-size:21px; color:var(--tx); font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }

/* 今日待办条目（原型 .titem） */
.tl{ padding:6px 18px 16px; }
.tl-sec{ margin-top:12px; }
.tl-sec h4{ margin:0 0 8px; font-size:12.5px; color:var(--tx2); font-weight:600; display:flex; align-items:center; gap:7px; }
.tl-sec h4 i{ width:7px; height:7px; border-radius:50%; }
.titem{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--r2); background:var(--line2); margin-bottom:7px;
}
.titem.od{ background:var(--red2); border:1px solid #F7CFCF; }
.titem.td{ background:var(--orange2); border:1px solid #FBE2BD; }
.titem .tn{ flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.titem .tm{ font-size:12px; color:var(--tx2); white-space:nowrap; flex:none; }

/* =====================================================================
   七、任务看板
   ⚠️ 任务看板实际为「六列」，原 repeat(4,1fr) 会导致换行错位，已改为 6 列
   ===================================================================== */
.board{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.board-col{ background:var(--card2); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; min-height:120px; }
.board-col-hd{ display:flex; align-items:center; gap:8px; padding:13px 14px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:700; }
.board-col-hd i{ width:9px; height:9px; border-radius:3px; flex:none; }
.board-col-hd .n{ margin-left:auto; font-size:12px; color:var(--tx3); font-weight:600; }
.board-col-bd{ padding:10px; display:flex; flex-direction:column; gap:9px; min-height:60px; max-height:62vh; overflow-y:auto; }

/* ===== 任务页工具栏：白卡单行 ===== */
.task-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin-bottom:14px; }
.task-toolbar .mud-input-control{ margin-top:0 !important; margin-bottom:0 !important; }

/* ===== 看板：流水线四列（待办→待协同响应→进行中→待验收） ===== */
.board-pipe{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:10px; align-items:stretch; }
.board-arrow{ display:flex; align-items:center; justify-content:center; color:var(--tx3); font-size:15px; }

/* ===== 归档抽屉（已完成·已取消，默认折叠） ===== */
.board-archive{ margin-top:14px; display:flex; align-items:center; gap:14px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r2); padding:11px 14px; cursor:pointer; user-select:none; transition:.15s; }
.board-archive:hover{ border-color:var(--brand); }
.board-archive .arr{ color:var(--tx3); font-size:12px; }
.board-archive .ttl{ font-size:13.5px; font-weight:700; color:var(--tx2); }
.board-archive .cnt{ font-size:12px; color:var(--tx2); }
.board-archive .hint{ margin-left:auto; font-size:12px; color:var(--tx3); }
.board-archive-cols{ margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; opacity:.85; }
@media (max-width:1100px){ .board-pipe{ grid-template-columns:1fr; } .board-arrow{ transform:rotate(90deg); padding:2px 0; } }

/* ===== 任务卡片 ===== */
.task-card{ border:1px solid var(--line); border-radius:var(--r2); padding:11px 12px; background:#fff; cursor:pointer; transition:.15s; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.task-card:hover{ border-color:var(--brand); box-shadow:0 4px 14px rgba(16,24,40,.08); }
.task-card.done{ opacity:.6; }
.task-card .t-title{ font-size:13.5px; font-weight:600; line-height:1.45; margin-bottom:8px; word-break:break-word; }
/* .done = 已取消：划线 + 变灰弱化 */
.task-card.done .t-title{ text-decoration:line-through; color:var(--tx3); }
/* .finish = 已完成：保持可读，标题前绿色对勾 + 左侧淡绿描边（完成=正向完成态） */
.task-card.finish{ border-left:3px solid #16A34A; }
.task-card.finish .t-title::before{ content:"✓ "; color:#16A34A; font-weight:700; }
.task-card .card-c{ margin-top:6px; font-size:11px; color:var(--tx3); padding-top:6px; border-top:1px solid var(--line2); }
.task-card .card-p{ margin-top:3px; font-size:11px; color:var(--tx3); }
.card-m{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.card-f{
  display:flex; align-items:center; gap:6px; margin-top:9px; padding-top:8px;
  border-top:1px dashed var(--line); font-size:11.5px; color:var(--tx3);
}
.card-f .who{ display:flex; align-items:center; gap:4px; color:var(--tx2); }
.card-f .due{ margin-left:auto; display:flex; align-items:center; gap:4px; }
/* 逾期日期：强制纯红字，绝不允许出现红色背景块（防御 MudBlazor/缓存/上级规则污染） */
.card-f .due.red{ color:var(--red)!important; font-weight:700; background:transparent!important; background-color:transparent!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; }

/* ===== 标签 ===== */
.tag{ font-size:11px; padding:2px 8px; border-radius:6px; white-space:nowrap; background:var(--line2); color:var(--tx2); }
.tag.p0{ background:var(--red2); color:var(--red); font-weight:700; }
.tag.p1{ background:var(--orange2); color:var(--orange); font-weight:700; }
.tag.p2{ background:var(--line2); color:var(--tx3); }
.tag.dpt{ background:var(--brand-soft); color:#9a7400; font-weight:600; }
.tag.od{ background:var(--red); color:#fff; font-weight:700; }
.tag.st0{background:#9AA4AE;color:#fff} .tag.st1{background:var(--orange);color:#fff}
.tag.st2{background:var(--blue);color:#fff} .tag.st3{background:var(--purple);color:#fff}
.tag.st4{background:var(--green);color:#fff} .tag.st5{background:#9AA4AE;color:#fff}

/* =====================================================================
   八、项目卡片
   ===================================================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh); cursor:pointer; transition:.15s; display:flex; flex-direction:column; }
.pcard:hover{ border-color:var(--brand); box-shadow:0 10px 26px rgba(16,24,40,.1); transform:translateY(-1px); }
.pc-top{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.pc-name{ font-size:15.5px; font-weight:700; line-height:1.4; word-break:break-word; }
.pc-ring{ flex:none; }
.pc-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tag.hw{ background:var(--green2); color:var(--green); font-weight:600; }
.tag.ho{ background:var(--orange2); color:var(--orange); font-weight:600; }
.tag.hr{ background:var(--red2); color:var(--red); font-weight:600; }
.bar{ height:9px; border-radius:6px; background:var(--line2); overflow:hidden; margin-bottom:12px; }
.bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--brand),#FFB300); transition:width .4s; }
.bar i.warn{ background:linear-gradient(90deg,#F6A623,#F08C00); }
.bar i.risk{ background:linear-gradient(90deg,#F2695C,#E5484D); }
.pc-desc{ font-size:12.5px; color:var(--tx2); line-height:1.6; margin-bottom:12px; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-collabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.mchip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tx2); background:var(--line2); border-radius:20px; padding:3px 9px 3px 4px; }
.mchip i{ width:16px; height:16px; border-radius:50%; background:var(--brand); color:#fff; font-style:normal; font-size:9px; display:inline-flex; align-items:center; justify-content:center; }

/* 数据范围（权限管理 · 数据范围 Tab） */
.ds-legend{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tx2); }
.ds-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.ds-opt{ display:inline-flex; align-items:center; gap:6px; }
.ds-opt i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.pc-bt{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); font-size:12px; color:var(--tx2); }
.pc-bt .own{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.pc-bt .own::before{ content:"👤"; font-size:11px; }
.pc-bt .sp{ flex:1; }
.pc-bt .cnt{ color:var(--tx3); }
.icon-btn{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--tx2); font-size:13px; cursor:pointer; transition:.15s; }
.icon-btn:hover{ border-color:var(--brand); color:var(--brand); background:#FFF6DA; }
.icon-btn.sm{ width:24px; height:24px; font-size:12px; }
.gantt-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.gantt-legend .lg-item{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tx2); }
.gantt-legend .lg-item i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.gantt-legend .lg-item.today{ color:#E5484D; font-weight:600; }

/* 阶段模板管理弹窗 */
.stg-tpl{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; cursor:pointer; font-size:12.5px; }
.stg-tpl .nm{ color:var(--tx1); }
.stg-tpl .cnt{ color:var(--tx3); font-size:11px; }
.stg-tpl.on{ border-color:#1C1C1E; background:var(--line2); }
.stg-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.stg-row input[type=color]{ width:34px; height:34px; padding:2px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; flex-shrink:0; }

/* =====================================================================
   八-B、甘特图（工作台核心组件）
   结构：.yq-gantt > .yq-gantt-wrap > [左侧名称列 | 右侧滚动时间轴]
   ===================================================================== */
.yq-gantt{
  border:1px solid var(--line); border-radius:var(--r2);
  overflow:hidden; background:#fff;
}
.yq-gantt-wrap{ display:flex; align-items:stretch; }

/* --- 左侧名称列 --- */
.yq-gantt-labels{ flex:none; border-right:1px solid var(--line); background:var(--card2); }
.yq-gantt-labels-hd{
  height:56px; display:flex; align-items:flex-end; padding:0 12px 7px;
  font-size:11px; color:var(--tx3); font-weight:700; border-bottom:1px solid var(--line);
  box-sizing:border-box;
}
.yq-gantt-label{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:0 12px; border-bottom:1px solid var(--line2); box-sizing:border-box; overflow:hidden;
}
.yq-gantt-label .n{
  font-size:12.5px; font-weight:600; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yq-gantt-label .s{
  font-size:10.5px; color:var(--tx3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- 右侧时间轴 --- */
.yq-gantt-body{ flex:1; overflow-x:auto; min-width:0; }
.yq-gantt-inner{ position:relative; min-width:100%; }

.yq-gantt-hd{
  position:sticky; top:0; z-index:5; height:56px;
  background:#F8FAFC; border-bottom:1px solid var(--line); box-sizing:border-box;
}
.yq-gantt-months{ position:relative; height:28px; }
.yq-gantt-month{
  position:absolute; top:0; height:28px; box-sizing:border-box;
  display:flex; align-items:center; padding-left:8px;
  font-size:11px; font-weight:700; color:var(--tx2);
  border-left:1px solid var(--line); white-space:nowrap; overflow:hidden;
}
.yq-gantt-ticks{ position:relative; height:28px; }
.yq-gantt-tick{
  position:absolute; top:0; height:28px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--tx3);
  border-left:1px solid var(--line2); white-space:nowrap; overflow:hidden;
}

.yq-gantt-canvas{ position:relative; }
.yq-gantt-we{ position:absolute; top:0; bottom:0; background:rgba(15,23,42,.035); }
.yq-gantt-gline{ position:absolute; top:0; bottom:0; width:1px; background:var(--line2); }

.yq-gantt-row{ position:relative; border-bottom:1px solid var(--line2); box-sizing:border-box; }
.yq-gantt-row.alt{ background:#FAFBFD; }
.yq-gantt-row:hover{ background:var(--brand-soft); }

.yq-gantt-bar{
  position:absolute; top:50%; transform:translateY(-50%); height:20px;
  border-radius:6px; border:1px solid rgba(16,24,40,.12);
  overflow:hidden; cursor:pointer; transition:filter .15s, box-shadow .15s;
}
.yq-gantt-bar:hover{ filter:brightness(1.04); box-shadow:0 2px 8px rgba(16,24,40,.2); }
/* 长期项目（无截止日）：右端虚线 + 渐隐，表示还会往后延续 */
.yq-gantt-bar.open{ border-right:2px dashed rgba(16,24,40,.4); }
.yq-gantt-bar.open::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:28px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8));
  pointer-events:none;
}
.yq-gantt-fill{ position:absolute; left:0; top:0; bottom:0; transition:width .35s; }
.yq-gantt-bartext{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; color:var(--tx2);
  white-space:nowrap; pointer-events:none;
}

.yq-gantt-today{ position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--red); z-index:4; }
.yq-gantt-today span{
  position:absolute; top:3px; left:4px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700;
  padding:1px 5px; border-radius:4px; white-space:nowrap;
}

/* 甘特图工具栏（缩放 / 图例） */
.yq-gantt-bar-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.yq-gantt-zoom{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.yq-gantt-zoom button{
  height:30px; padding:0 12px; border:0; background:none; color:var(--tx2);
  font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s;
}
.yq-gantt-zoom button + button{ border-left:1px solid var(--line); }
.yq-gantt-zoom button:hover{ background:var(--line2); color:var(--tx); }
.yq-gantt-zoom button.on{ background:var(--ink); color:#fff; }

/* ===== 挂起的甘特图（标签页） ===== */
.pin-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#F3F4F6; border:1px solid var(--line); border-radius:var(--r2); padding:10px 12px; margin-bottom:14px; }
.pin-bar-ttl{ font-size:13px; font-weight:700; color:var(--tx2); }
.pin-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.pin-tab{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--tx3); background:transparent; border:1px solid transparent; border-radius:999px; padding:4px 6px 4px 12px; cursor:pointer; transition:.15s; user-select:none; }
.pin-tab:hover{ background:rgba(255,255,255,.85); color:var(--tx2); border-color:var(--line); }
.pin-tab.on{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 2px 8px rgba(16,24,40,.14); font-weight:700; }
.pin-tab i{ font-style:normal; width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; background:rgba(0,0,0,.08); cursor:pointer; }
.pin-tab.on i{ background:rgba(0,0,0,.08); }
.pin-tab i:hover{ background:#E5484D; color:#fff; }

/* =====================================================================
   九、成员卡片
   ===================================================================== */
.mcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; gap:12px; cursor:pointer; transition:.15s; }
.mcard:hover{ border-color:var(--brand); box-shadow:0 4px 14px rgba(16,24,40,.07); }
.av{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex:none; }
.lb{ font-size:11px; padding:2px 8px; border-radius:6px; font-weight:600; }
.lb.busy{ background:#FDECEC; color:var(--red); }
.lb.over{ background:#FDE0D8; color:#E0653B; }
.lb.free{ background:var(--green2); color:var(--green); }
.lb.od{ background:var(--red2); color:var(--red); }

/* =====================================================================
   十、业务 KPI
   ===================================================================== */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--sh); position:relative; overflow:hidden; }
.kpi .kh{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); font-weight:600; }
.kpi .kh i{ width:9px; height:9px; border-radius:3px; }
.kpi .kv{ font-size:26px; font-weight:800; color:var(--tx); margin:8px 0 2px; font-variant-numeric:tabular-nums; letter-spacing:.3px; }
.kpi .kv small{ font-size:14px; font-weight:600; color:var(--tx2); margin-left:2px; }
.kpi .ch{ font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.kpi .ch.up{ color:var(--green); } .kpi .ch.down{ color:var(--red); }

/* =====================================================================
   十一、组织树
   ===================================================================== */
.yq-tree-row{display:flex;align-items:center;gap:6px;padding:8px 8px;border-radius:8px;cursor:pointer;color:var(--tx);font-size:14px}
.yq-tree-row:hover{background:var(--line2)}
.yq-tree-row.sel{background:var(--brand-soft);color:#9a7400;font-weight:600}
/* 树形层级引导线（Windows 注册表风格）：每层渲染一个 .yq-tree-guide 占位 span。
   踩坑记录：不要用 ::before absolute / background-image——两者画在 padding box 左边缘，
   会被同一行的 flex item（.yq-cb 复选框）盖住，导致只有最外层能看到线。
   改用参与 flex 布局的真实 DOM 占位元素，每层一条竖线，绝对可见且逐层递进。
   margin-right:-6px 抵消 .yq-tree-row 的 gap:6px，让相邻层级竖线首尾相接呈"连续树线"。 */
.yq-tree-guide{
  width:18px; flex:none; align-self:stretch;
  border-left:1.5px dashed var(--tx3);
  margin-right:-6px;
}
.yq-tree-caret{width:14px;font-size:12px;color:var(--tx3);flex:none;cursor:pointer}
.yq-tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yq-tree-meta{margin-left:auto;color:var(--tx3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;flex:none}

/* 复选框树：组织节点三态（on=全选 / ind=半选）/ 成员二态 */
.yq-cb{ width:15px; height:15px; border:1.5px solid var(--tx3); border-radius:4px; flex:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; transition:.12s; background:#fff; }
.yq-cb:hover{ border-color:var(--brand-ink); }
.yq-cb.on{ background:var(--brand-ink); border-color:var(--brand-ink); }
.yq-cb.on::after{ content:"✓"; color:#fff; font-size:11px; line-height:1; font-weight:700; }
.yq-cb.ind{ background:var(--brand-ink); border-color:var(--brand-ink); }
.yq-cb.ind::after{ content:""; width:7px; height:2px; background:#fff; border-radius:1px; }

/* =====================================================================
   十二、通知铃铛下拉（原型 .notice-pop，样式由 NotificationBell 内联移入此处）
   ===================================================================== */
.yq-notify-pop{ width:min(360px,92vw); display:flex; flex-direction:column; overflow:hidden; }
/* 通知面板由 MudMenu 承载，去掉列表自带内边距，否则面板四周会有空隙 */
.mud-list:has(> .yq-notify-pop){ padding:0 !important; }
.mud-list:has(> .yq-notify-pop) > .mud-list-item{ padding:0 !important; }
.yq-notify-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line2);
  font-weight:700; font-size:15px;
}
.yq-notify-bd{ max-height:380px; overflow:auto; }
.yq-notify-ft{ padding:8px 12px; border-top:1px solid var(--line2); text-align:center; }
.yq-notify-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:0; border-bottom:1px solid var(--line2);
  background:transparent; cursor:pointer; font-family:inherit; font-size:14px;
}
.yq-notify-row:hover{ background:var(--line2); }
.yq-notify-row.unread{ background:#FFF9E8; }
.yq-notify-row .ntext{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.yq-notify-row .ntext .c{
  font-size:12.5px; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px;
}
.yq-notify-row .ntext .t{ font-size:11px; color:var(--tx3); }
.yq-notify-row .unread-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.yq-ndot{
  width:30px; height:30px; border-radius:9px; color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:13px;
}

/* =====================================================================
   十三、遮罩居中弹窗
   ===================================================================== */
.yq-modal-mask{position:fixed;inset:0;background:rgba(20,22,28,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.yq-modal-box{background:#fff;border-radius:var(--r);padding:22px;width:min(460px,94vw);max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.28)}

/* 弹窗标题行：标题(flex:1) + 右上角 × 关闭按钮。
   编辑类卡片走 EditModal.razor，只读卡片走 ModalCloseX.razor，两者共用这套样式。
   关法：右上角 ×、底部「取消」、点卡片外 —— 三者等价（有未保存改动时先弹询问）。 */
.yq-modal-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.yq-modal-title{ flex:1; min-width:0; font-weight:600; }
.yq-modal-x{
  flex:none; width:28px; height:28px; padding:0; border:none; border-radius:8px;
  background:transparent; color:var(--tx3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.yq-modal-x:hover{ background:rgba(0,0,0,.06); color:var(--tx); }
.yq-modal-x:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
/* 新建卡片带出草稿时的提示条 */
.yq-draft-hint{
  display:flex; align-items:center; gap:10px; margin:-4px 0 12px;
  padding:7px 10px; border:1px solid #F0DFA8; border-radius:8px;
  background:#FFF9E6; font-size:12px; color:var(--tx2);
}
.yq-draft-hint button{
  margin-left:auto; padding:0; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:12px; color:var(--tx2); text-decoration:underline;
}
.yq-draft-hint button:hover{ color:var(--tx); }

.yq-date-input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:14px;color:var(--tx);outline:none;background:#fff;font-family:inherit}
.yq-date-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,199,44,.18)}
/* 弹窗里"点选 X"的 button（共用 .yq-date-input 类）默认文字居中（UA button 样式），
   强制左对齐，统一所有"点选..."按钮的呈现（不改各组件内部代码） */
button.yq-date-input{ display:flex; align-items:center; justify-content:flex-start }

/* 首页四大模块卡片（可点击跳转） */
.yq-mod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.yq-mod{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--sh); cursor:pointer; transition:.15s;
  display:flex; flex-direction:column; gap:6px; text-align:left; font-family:inherit;
}
.yq-mod:hover{ border-color:var(--brand); box-shadow:0 10px 26px rgba(16,24,40,.1); transform:translateY(-1px); }
.yq-mod .mh{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); font-weight:600; }
.yq-mod .mh i{ width:9px; height:9px; border-radius:3px; flex:none; }
.yq-mod .mv{ font-size:26px; font-weight:800; color:var(--tx); font-variant-numeric:tabular-nums; line-height:1.1; }
.yq-mod .mv small{ font-size:14px; font-weight:600; color:var(--tx2); margin-left:2px; }
.yq-mod .md{ font-size:12.5px; color:var(--tx3); }

/* =====================================================================
   十四、响应式（还原原型移动端）
   ===================================================================== */
@media(max-width:1500px){
  .board{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1200px){
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .yq-mod-grid{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:860px){
  .yq-mod-grid{ grid-template-columns:1fr 1fr; }
  .yq-main{ padding:16px 14px 24px; }
  .yq-page-head h1{ font-size:18px; }
  .board{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:1fr; }
  .yq-brand .bt{ display:none; }
  .yq-topbar-title{ padding-left:10px; margin-left:0; }
}
@media(max-width:420px){
  .kpis{ grid-template-columns:1fr; }
  .stat-cell .sl b{ font-size:18px; }
}

/* ================= 工作台 · 智能提醒 ================= */
.hp-alerts{ padding:0 16px 14px; }
.hp-alert{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; margin-top:8px; cursor:pointer; transition:.15s; }
.hp-alert:hover{ border-color:var(--brand); box-shadow:0 2px 8px rgba(16,24,40,.06); }
.hp-alert .bar{ width:4px; align-self:stretch; border-radius:2px; flex:none; }
.hp-alert .kind{ flex:none; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.hp-alert .tt{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-alert .dt{ flex:none; font-size:12px; color:var(--tx3); white-space:nowrap; }
.hp-alert-more{ display:block; margin:10px auto 0; border:1px dashed var(--line); background:transparent; color:var(--tx2); font-size:12.5px; padding:5px 16px; border-radius:999px; cursor:pointer; transition:.15s; }
.hp-alert-more:hover{ border-color:var(--brand); color:var(--tx); }

/* ================= 工作台 · 我的挂起（浏览器标签式） ================= */
.pin-bar-hint{ font-size:12.5px; color:var(--tx3); }
.hp-tab{ padding:4px 8px 4px 8px; }
.hp-tab .pt-name{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-type{ font-style:normal; width:17px; height:17px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex:none; }
.pt-type.proj{ background:#EDE9FE; color:#7B61FF; }
.pt-type.task{ background:#EAF3FE; color:#2D7FF9; }
.pin-tab.on .pt-type.proj{ background:#EDE9FE; color:#7B61FF; }
.pin-tab.on .pt-type.task{ background:#EAF3FE; color:#2D7FF9; }
/* 灵感墙挂起：品牌黄一档，与「增长」标签同族但更浅，避免和强调黄撞色 */
.pin-tab.on .pt-type.insp{ background:#FFF6DA; color:#8A6A00; }
/* 右侧 ×：浏览器风格，hover 标签才显现 */
.pt-x{ font-style:normal; width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1; background:rgba(0,0,0,.08); cursor:pointer; flex:none; opacity:0; transition:.15s; }
.pin-tab:hover .pt-x{ opacity:1; }
.pin-tab.on .pt-x{ background:rgba(0,0,0,.08); }
.pt-x:hover{ background:#E5484D !important; color:#fff; opacity:1; }
.pt-x.always{ opacity:1; }
/* 拖动排序 */
.pin-tab.dragging{ opacity:.45; }
.pin-tab.drag-over{ border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); }
/* 更多 +N */
.pin-more-wrap{ position:relative; }
.pin-more-btn{ border:1px solid var(--line); background:var(--card2); color:var(--tx2); font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer; transition:.15s; }
.pin-more-btn:hover{ border-color:var(--brand); color:var(--tx); }
.pin-more-panel{ position:absolute; top:calc(100% + 6px); right:0; z-index:40; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(16,24,40,.14); padding:6px; min-width:240px; display:flex; flex-direction:column; }
.pin-more-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; }
.pin-more-item:hover{ background:var(--card2); }
.pin-more-item .pt-name{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.pm-state{ flex:none; font-size:11px; color:var(--tx3); }
.pm-state.on{ color:#16A34A; }

/* ================= 工作台 · 挂起面板（只读） ================= */
.hp-panel{ border:1px solid var(--line); border-radius:var(--r2); padding:12px 14px; background:#fff; box-shadow:var(--sh); display:flex; flex-direction:column; gap:10px; }
/* 灵感挂起面板的封面：固定高度裁切，避免不同比例的图把同排面板撑得高矮不一 */
.hp-insp-cover{ width:100%; height:148px; object-fit:cover; display:block; border-radius:9px; border:0.5px solid var(--line2); background:#F7F8FA; }
.hp-ph{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hp-pname{ flex:1; min-width:0; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-stats{ display:flex; gap:14px; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--line2); font-size:12px; color:var(--tx3); }
.hp-stats b{ color:var(--tx); font-size:13px; margin-left:2px; }
.hp-kv{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--tx2); }
.hp-desc{ font-size:12.5px; color:var(--tx3); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hp-red{ color:#E5484D !important; }
.hp-go{ align-self:flex-end; border:none; background:transparent; color:var(--tx2); font-size:12.5px; font-weight:700; cursor:pointer; padding:4px 2px; transition:.15s; }
.hp-go:hover{ color:var(--ink); text-decoration:underline; }
.hp-more-note{ font-size:11.5px; color:var(--tx3); text-align:center; }

/* 任务卡片 / 项目卡片上的挂起图钉（hover 显现，已挂起常显） */
.card-pin{ position:absolute; top:8px; right:8px; width:24px; height:24px; border:none; border-radius:7px; background:transparent; color:var(--tx3); font-size:14px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:.15s; z-index:2; }
.task-card:hover .card-pin, .pcard:hover .card-pin, .insp-card:hover .card-pin{ opacity:1; }
.card-pin:hover{ background:var(--brand-soft); color:#9a7400; }
.card-pin.pinned{ opacity:1; color:#9a7400; background:var(--brand-soft); }
.task-card, .pcard, .insp-card{ position:relative; }
/* 灵感卡的图钉压在封面图上，透明底在图片上会看不见 —— 给个半透明白底 + 投影 */
.insp-card .card-pin{
  background:rgba(255,255,255,.88);
  color:#3A3F45;
  box-shadow:0 1px 5px rgba(16,24,40,.22);
}
.insp-card .card-pin:hover{ background:#fff; color:#9a7400; }
.insp-card .card-pin.pinned{ background:var(--brand); color:#3A2B00; }

/* ===== 头像裁剪器（原图本地处理，正方形选框 + 圆形遮罩预览）===== */
.yq-crop-mask{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.62); z-index:9999; align-items:center; justify-content:center; }
.yq-crop-dialog{ background:#fff; border-radius:14px; padding:18px 20px 14px; box-shadow:0 20px 60px rgba(16,24,40,.28); max-width:96vw; }
.yq-crop-hd{ margin-bottom:12px; }
.yq-crop-hd b{ font-size:15px; display:block; margin-bottom:3px; }
.yq-crop-hd span{ font-size:12px; color:var(--tx3); }
.yq-crop-stage{ position:relative; display:inline-block; line-height:0; border-radius:10px; overflow:hidden; background:#0f172a; touch-action:none; }
.yq-crop-stage canvas{ display:block; }
.yq-crop-shade{ position:absolute; background:rgba(16,24,40,.55); pointer-events:none; }
.yq-crop-box{ position:absolute; box-sizing:border-box; border:2px solid #fff; cursor:move; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.yq-crop-ring{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2000px rgba(16,24,40,.0); border:1px dashed rgba(255,255,255,.75); pointer-events:none; }
.yq-crop-handle{ position:absolute; width:16px; height:16px; background:#fff; border:1.5px solid rgba(16,24,40,.35); border-radius:50%; z-index:3; }
.yq-crop-nw{ left:-8px; top:-8px; cursor:nwse-resize; }
.yq-crop-se{ right:-8px; bottom:-8px; cursor:nwse-resize; }
.yq-crop-ft{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.yq-crop-btn{ border:1px solid var(--line); background:#fff; color:var(--tx1); border-radius:8px; padding:7px 18px; font-size:13px; cursor:pointer; transition:.15s; }
.yq-crop-btn:hover{ border-color:var(--brand); }
.yq-crop-btn.primary{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600; }
.yq-crop-btn.primary:hover{ opacity:.88; }

/* 通用头像图片（有自定义头像时替换首字块）*/
.av-img{ object-fit:cover; display:block; }

/* 个人中心头像：hover 显示「更换头像」遮罩 */
.yq-av-wrap{ position:relative; cursor:pointer; border-radius:20px; overflow:hidden; line-height:0; }
.yq-av-wrap:hover .yq-av-mask{ opacity:1; }
.yq-av-mask{ position:absolute; inset:0; background:rgba(16,24,40,.55); color:#fff; font-size:11.5px; display:flex; align-items:center; justify-content:center; opacity:0; transition:.18s; line-height:1.3; }
.yq-av-fallback{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; }
.yq-av-reset{ border:none; background:transparent; color:var(--tx3); font-size:11.5px; cursor:pointer; padding:2px 4px; }
.yq-av-reset:hover{ color:var(--red); text-decoration:underline; }

/* 成员 chip 内的头像图片（有自定义头像时替换首字圆圈）*/
.mchip-img{ width:16px; height:16px; border-radius:50%; object-fit:cover; display:block; flex:none; background:var(--brand); }
/* 任务详情协同人的首字回落块（与 mchip-img 同尺寸，保持对齐）*/
.mchip-fallback{ width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-style:normal; font-size:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
/* 任务详情协同人的头像图（略大于 chip，与 body2 文字对齐）*/
.mchip-img.md{ width:22px; height:22px; }

/* ===== 计划管理页 ===== */
.plan-tab{ font-size:12px; background:#fff; border:0.5px solid #E7ECF1; padding:4px 10px; border-radius:7px; color:#69727D; cursor:pointer; user-select:none; }
.plan-tab:hover{ border-color:#C9D3DC; }
.plan-tab.on{ background:#1C1C1E; color:#fff; border-color:#1C1C1E; }
.plan-vswitch{ display:inline-flex; border:0.5px solid #E7ECF1; border-radius:8px; overflow:hidden; background:#fff; }
.plan-vswitch span{ font-size:12px; padding:5px 12px; color:#69727D; cursor:pointer; user-select:none; }
.plan-vswitch span.on{ background:#1C1C1E; color:#fff; }
.plan-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.plan-kpi{ background:#fff; border:0.5px solid #E7ECF1; border-radius:10px; padding:10px 12px; }
.plan-kpi .k{ font-size:12px; color:#69727D; }
.plan-kpi .v{ font-size:20px; font-weight:500; margin-top:2px; }
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.plan-card{ background:#fff; border:0.5px solid #E7ECF1; border-radius:12px; padding:12px 14px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.plan-card:hover{ border-color:#C9D3DC; box-shadow:0 2px 10px rgba(28,28,30,.06); }
.plan-card.over{ border-color:#FFC72C; }
.plan-badge{ font-size:11px; padding:2px 7px; border-radius:6px; flex:none; }
.plan-badge.draft{ background:#F1F4F8; color:#69727D; }
.plan-badge.pending{ background:#FFF2E0; color:#F08C00; }
.plan-badge.approved{ background:#E8F7EE; color:#16A34A; }
.plan-table{ width:100%; border-collapse:collapse; font-size:12px; }
.plan-table th{ text-align:left; font-weight:500; color:#69727D; padding:8px 10px; border-bottom:0.5px solid #E7ECF1; white-space:nowrap; }
.plan-table td{ padding:8px 10px; border-bottom:0.5px solid #F1F4F8; color:#1F242C; vertical-align:middle; }
.plan-table tbody tr:hover{ background:#FAFBFC; }
.plan-table tbody tr:last-child td{ border-bottom:none; }
/* 「待我审批」筛选：用强调黄提示有活儿等着 */
.plan-tab.todo{ border-color:#FFC72C; color:#8A6A00; background:#FFFBF0; }
.plan-tab.todo.on{ background:#FFC72C; color:#1C1C1E; border-color:#FFC72C; }

/* ===== 顶栏账号胶囊 + 下拉菜单（MainLayout） ===== */
.yq-userpill2{ display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; padding:4px 10px 4px 4px; border-radius:20px; border:1px solid var(--line); background:#fff; transition:border-color .15s, box-shadow .15s; }
.yq-userpill2:hover{ border-color:#C9D3DC; box-shadow:0 2px 8px rgba(28,28,30,.06); }
.yq-userpill2 .unm{ font-size:12.5px; font-weight:500; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yq-av2{ width:26px; height:26px; flex:none; border-radius:50%; object-fit:cover; background:var(--brand); color:#fff; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.yq-umask{ position:fixed; inset:0; z-index:40; }
.yq-umenu{ position:absolute; z-index:50; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px rgba(20,22,28,.16); padding:6px; }
.yq-umenu .uhd{ display:flex; align-items:center; gap:9px; padding:8px 8px 10px; border-bottom:1px solid var(--line2); margin-bottom:6px; }
.yq-umenu .urow{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; font-size:12.5px; color:var(--tx); cursor:pointer; }
.yq-umenu .urow:hover{ background:var(--line2); }
.yq-umenu .urow.danger{ color:#E5484D; }
.yq-umenu .urow.danger:hover{ background:#FDECEC; }
.yq-umenu .urow .mud-icon-root{ color:var(--tx3); }
.yq-umenu .urow.danger .mud-icon-root{ color:#E5484D; }
.yq-umenu .usplit{ height:1px; background:var(--line2); margin:6px 4px; }

/* ===== 页面标题焦点轮廓修正 ===== */
/* FocusOnNavigate（Routes.razor）在导航/刷新后会把焦点移到页面 h1 上（供读屏器播报），
   浏览器会给聚焦元素画默认轮廓 = "经营工作台"周围的黑色方框。
   h1 不是交互元素，去掉轮廓不影响键盘可达性，读屏器播报保留。 */
h1:focus, h1:focus-visible { outline: none; }

/* 筛选框内清除按钮（×）：绝对定位在输入框右侧内部 */
.yq-x-inside{ position:absolute; right:8px; bottom:10px; width:20px; height:20px; border:none; background:transparent; color:var(--tx3); cursor:pointer; border-radius:50%; font-size:13px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; }
.yq-x-inside:hover{ background:rgba(0,0,0,.07); color:var(--tx2); }
/* 小号：用在 34px 高的下拉面板搜索框里（默认那套尺寸是按 40px 输入框算的） */
.yq-x-inside.sm{ right:6px; bottom:7px; width:18px; height:18px; font-size:12px; }

/* =====================================================================
   十五、工作总结（/reports）
   沿用计划管理那套 .plan-*/.plan-badge 的写法与配色语义，保证两块风格一致
   ===================================================================== */
/* 项目卡片上的「汇报 N」标签 */
.tag.rpt{ background:var(--purple2); color:var(--purple); font-weight:600; }

/* 可见范围徽章（朋友圈式四档） */
.rpt-vis-all{ background:var(--blue2); color:var(--blue); }
.rpt-vis-dept{ background:var(--orange2); color:var(--orange); }
.rpt-vis-partial{ background:var(--purple2); color:var(--purple); }
.rpt-vis-private{ background:var(--line2); color:var(--tx2); }

/* 类型徽章：日报/周报/月报/季报/年报 */
.rpt-t-daily{ background:var(--blue2); color:var(--blue); }
.rpt-t-weekly{ background:var(--brand-soft); color:#9a7400; }
.rpt-t-monthly{ background:var(--green2); color:var(--green); }
.rpt-t-quarterly{ background:var(--purple2); color:var(--purple); }
.rpt-t-yearly{ background:var(--red2); color:var(--red); }

/* 卡片摘要 / 详情正文（保留换行） */
.rpt-snippet{
  font-size:12px; color:var(--tx2); line-height:1.6; white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.rpt-body{
  font-size:13px; color:var(--tx); line-height:1.8; white-space:pre-wrap; word-break:break-word;
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; max-height:46vh; overflow:auto;
}

/* 撰写弹窗内的控件 */
.rpt-textarea{ height:auto !important; min-height:180px; padding:10px 12px; line-height:1.75; resize:vertical; display:block; }
/* 正文框右下角的「全屏」小按钮；给输入框留出底部空间，免得文字压到按钮下面 */
.rpt-textarea-fs{ padding-bottom:34px; }
.rpt-fs{
  position:absolute; right:8px; bottom:8px; z-index:1;
  display:inline-flex; align-items:center; gap:3px;
  height:26px; padding:0 9px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.94);
  font-size:11.5px; color:var(--tx2); cursor:pointer;
}
.rpt-fs:hover{ border-color:var(--brand); color:var(--tx); background:#fff; }
/* 全屏写作层里的正文框：铺满剩余高度，无边框无圆角 */
.rpt-fs-area{
  flex:1; min-height:0; width:100%; border:0; outline:none; resize:none;
  padding:16px 20px; font-size:14.5px; line-height:1.75; color:var(--tx);
  font-family:inherit; background:#fff;
}
.rpt-pick{ width:auto !important; height:34px; padding:0 12px; font-size:12.5px; color:var(--tx2); flex:none; cursor:pointer; }
.rpt-x{ margin-left:5px; cursor:pointer; opacity:.65; font-weight:700; }
.rpt-x:hover{ opacity:1; color:var(--red); }
.rpt-aud{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  margin-bottom:14px; background:var(--card2);
}
.rpt-note{
  font-size:12px; line-height:1.6; border-radius:8px; padding:8px 10px; margin-bottom:12px;
  border:1px solid #FBE2BD; background:var(--orange2); color:#8A5A00;
}
.rpt-err{ font-size:11.5px; color:var(--red); margin-bottom:6px; }
.rpt-link{ font-size:11.5px; color:var(--tx2); font-weight:600; cursor:pointer; }
.rpt-link:hover{ color:var(--ink); text-decoration:underline; }

/* 选项目弹窗里的清单 */
.rpt-picklist{ max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:4px; }
.rpt-pickrow{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13px; }
.rpt-pickrow:hover{ background:var(--line2); }
.rpt-pickrow.on{ background:var(--brand-soft); }

/* 作者头像（无自定义头像时回落姓名首字） */
.rpt-av{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none; }
.rpt-av.fb{ background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; }

/* 项目详情里的「项目汇报」行 */
.rpt-drow{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; cursor:pointer; transition:.15s; }
.rpt-drow:hover{ background:var(--line2); }
.rpt-dtitle{ flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rpt-dmeta{ flex:none; font-size:11px; color:var(--tx3); white-space:nowrap; }

/* =====================================================================
   十六、可搜索内联下拉（Components/Shared/SearchSelect.razor）
   ---------------------------------------------------------------------
   把筛选类控件从「居中弹窗卡片」改成「点开即在控件正下方展开的小面板」：
   按钮沿用 .yq-date-input 的外观（保证一整排筛选控件长得一样），
   面板浮在页面上方，靠一层透明遮罩捕获外部点击来关闭（不需要 JS）。
   ===================================================================== */
.yq-sel-btn{ width:100%; text-align:left; cursor:pointer; padding:0 28px 0 12px; flex:none; }
.yq-sel-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.yq-sel-txt.ph{ color:var(--tx3); }
.yq-sel-caret{ margin-left:auto; flex:none; font-size:10px; color:var(--tx3); line-height:1; }

/* 透明遮罩：铺满视口，只负责「点别处关闭」，本身完全不可见 */
.yq-sel-backdrop{ position:fixed; inset:0; z-index:9990; background:transparent; }
.yq-sel-pop{
  position:absolute; top:calc(100% + 4px); left:0; z-index:9995;
  max-width:340px; max-height:320px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 28px rgba(16,24,40,.14); padding:6px;
}
.yq-sel-search{ height:34px !important; border-radius:8px; margin-bottom:5px; font-size:12.5px; padding-right:30px; }
.yq-sel-opt{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--tx); }
.yq-sel-opt:hover{ background:var(--line2); }
/* 选中项：中性浅灰底 + 加粗 + 右侧勾。
   之前用 var(--brand-soft)（品牌黄）铺底，级联模式下分组节点会被误判成选中 → 整片黄，已停用黄色。
   底色比 hover 稍深一点，避免悬停时和选中分不出来。 */
.yq-sel-opt.on{ background:#E9EDF4; font-weight:600; }

/* =====================================================================
   十七、「待响应」高亮（任务看板 / 项目管理顶部邀请卡、工作台智能提醒）
   ---------------------------------------------------------------------
   口径：Pending 的协同邀请 / 项目邀请 = 需要当前登录者点一下才能继续，
   用外圈高亮（蓝色光晕 + 左侧色条）把它从一屏卡片里拎出来；
   蓝色取 --blue（与「待响应」提醒的 kind 徽标同色），不抢品牌黄的主按钮。
   ===================================================================== */
.yq-pending-hd{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx); margin-bottom:2px; }
.yq-pending-hd .cnt{ flex:none; font-size:11px; font-weight:700; color:#1D4ED8; background:var(--blue2); border-radius:999px; padding:1px 8px; }
.yq-pending-hd .hint{ font-size:12px; color:var(--tx3); }

.yq-pending-card{
  position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px; padding:10px 14px 10px 18px;
  background:#fff; border:1px solid #BBD3F7; border-radius:10px;
  /* 外圈光晕：这是「高亮提示」的本体，颜色淡以免糊成一片 */
  box-shadow:0 0 0 3px rgba(45,127,249,.14);
  transition:.15s;
}
.yq-pending-card:hover{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,249,.22), 0 4px 14px rgba(16,24,40,.08); }
/* 左侧色条：即便在灰度打印/色弱场景下也能识别出「这一条不一样」 */
.yq-pending-card::before{
  content:""; position:absolute; left:6px; top:9px; bottom:9px; width:3px;
  border-radius:2px; background:var(--blue);
}
.yq-pending-card .pc-badge{ flex:none; font-size:11px; font-weight:700; color:#1D4ED8; background:var(--blue2); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.yq-pending-card .pc-text{ flex:1; min-width:0; font-size:13px; line-height:1.5; }

/* 看板卡片：待我响应（Pending 协同邀请）外圈高亮 —— 与顶部邀请卡同一套口径。
   注：普通账号的待响应任务不进看板，此高亮主要对数据范围=全部的管理员可见。 */
.task-card.pending-resp{ border-color:#BBD3F7; box-shadow:0 0 0 3px rgba(45,127,249,.16); }
.task-card.pending-resp::after{
  content:"待响应"; position:absolute; top:10px; right:36px;   /* right 36 避开右上角的图钉按钮 */
  font-size:10.5px; font-weight:700; color:#1D4ED8; background:var(--blue2);
  border-radius:999px; padding:1px 7px; pointer-events:none;
}
.task-card.pending-resp:hover{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,249,.24), 0 4px 14px rgba(16,24,40,.08); }

/* 项目详情弹窗里的项目描述：卡片上是两行截断（.pc-desc 的 line-clamp），
   详情里用这个类给全文 —— 保留换行、不截断，让弹窗自身滚动而不是套一层内滚动条 */
.detail-desc{
  font-size:12.5px; color:var(--tx2); line-height:1.65; margin-bottom:12px;
  background:var(--card2); border:1px solid var(--line2); border-radius:8px;
  padding:9px 12px; white-space:pre-wrap; word-break:break-word;
}

/* 待响应通知结尾的「查看详情」小字链接 */
.pc-link{ flex:none; border:0; background:transparent; padding:0; cursor:pointer; font-size:12px; color:#1D4ED8; font-family:inherit; white-space:nowrap; }
.pc-link:hover{ text-decoration:underline; }
.pc-link:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* 工作台智能提醒里的「待响应」卡：同一套外圈高亮口径 */
.hp-alert.pending{ border-color:#BBD3F7; box-shadow:0 0 0 3px rgba(45,127,249,.14); }
.hp-alert.pending:hover{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,127,249,.22), 0 2px 8px rgba(16,24,40,.06); }

/* =====================================================================
   十八、通知中心（Components/Pages/Notifications.razor）
   ---------------------------------------------------------------------
   左侧消息分类 + 右侧列表（master-detail）：
   - 分类按钮保留可见 focus ring（纯键盘操作也能看清焦点在哪）；
   - 未读角标 role="status" 且只用一个红色，不跟「未读行浅黄底」抢注意力。
   ===================================================================== */
.nt-layout{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:820px){ .nt-layout{ grid-template-columns:1fr; } }

.nt-side{ background:#fff; border:1px solid var(--line); border-radius:var(--r2); padding:8px; box-shadow:var(--sh); }
.nt-side-hd{ font-size:12px; color:var(--tx3); padding:6px 10px 8px; }
.nt-cat{
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  padding:8px 10px; margin-bottom:2px; border:0; background:transparent;
  border-radius:8px; cursor:pointer; font-size:13px; color:var(--tx); font-family:inherit; transition:.15s;
}
.nt-cat:hover{ background:var(--line2); }
.nt-cat:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.nt-cat.on{ background:var(--ink); color:#fff; font-weight:600; }
.nt-cat .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-cat .un{ flex:none; min-width:20px; text-align:center; font-size:11px; font-weight:700; color:#fff; background:var(--red); border-radius:999px; padding:1px 6px; }
.nt-cat .tt{ flex:none; font-size:11.5px; color:var(--tx3); }
.nt-cat.on .tt{ color:rgba(255,255,255,.72); }

.nt-main{ min-width:0; }
.nt-main-hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.nt-main-hd b{ font-size:15px; }
.nt-main-hd .sub{ font-size:12.5px; color:var(--tx3); }

/* 消息行：从组件内联 <style> 迁到这里，与铃铛下拉同一套视觉口径 */
.nrow{ display:flex; gap:12px; padding:12px; border-radius:10px; }
.nrow + .nrow{ border-top:1px solid var(--line2); }
.nrow.un{ background:#FFF9E8; }
.ndot{ width:34px; height:34px; border-radius:10px; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; }


.yq-sel-tick{ flex:none; font-size:11px; font-weight:700; color:var(--tx2); }
/* 级联（树）模式的展开箭头：固定宽度占位，保证同级文字左边缘对齐 */
.yq-sel-twist{ width:13px; flex:none; font-size:9px; color:var(--tx3); text-align:center; line-height:1; cursor:pointer; user-select:none; }
.yq-sel-twist:hover{ color:var(--tx); }
.yq-sel-otxt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yq-sel-hint{ flex:none; font-size:11px; color:var(--tx3); font-weight:400; }
.yq-sel-empty{ padding:10px; text-align:center; font-size:12px; color:var(--tx3); }

/* =====================================================================
   灵感内容分享墙（M16 /inspiration）
   ---------------------------------------------------------------------
   只用上面既有的 --tx / --line / --brand 变量，不引入任何新色，
   这样它和任务/项目/总结四个模块看起来是同一套东西。
   ===================================================================== */

/* 卡片墙：列宽与项目卡片网格（.grid 用 minmax(310px)）同一档，观感统一 */
.insp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
/* 纵向 flex —— 与 .pcard 同一套做法。
   配合 .insp-foot 的 margin-top:auto，同一行卡片的底部按钮会落在同一条线上；
   不加 flex 的话卡片高度由内容决定，高矮不齐、按钮参差。 */
.insp-card{
  background:var(--card);
  border:0.5px solid var(--line);
  border-radius:var(--r2);
  overflow:hidden;
  cursor:pointer;
  display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.insp-card:hover{
  border-color:#C9D3DC;
  box-shadow:0 2px 10px rgba(28,28,30,.06);
  transform:translateY(-1px);
}

/* 封面**固定高度**，不用 aspect-ratio：
   各平台封面比例差别极大（抖音竖版 0.5625 vs 公众号 0.8），
   同一行卡片高度能差 150px 以上，网格出现大空洞 —— 这正是之前「乱」的主要原因。
   固定高度 + object-fit:cover 统一裁切，是卡片墙的标准做法。 */
.insp-cover{
  position:relative;
  width:100%;
  height:168px;
  flex:none;
  background:#F7F8FA;
  overflow:hidden;
}
.insp-cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* 无封面时不留白、也不画假图：用品牌浅底 + 首字，和已有的 yq-avsm 同一套观感 */
/* 无封面兜底：渐变色块 + 标题文字（像小红书那样），背景色由 C# 按标题哈希内联给。
   原来只显示一个字，信息量太少、卡片墙看着也空。 */
.insp-cover-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:18px 16px;
  overflow:hidden;
}
.insp-cover-title{
  font-size:17px; font-weight:700; line-height:1.5;
  color:#fff; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.16);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
.insp-plat{
  position:absolute; left:8px; top:8px;
  font-size:11px; font-weight:600;
  padding:2px 7px; border-radius:6px;
  background:rgba(28,28,30,.72); color:#fff;
  backdrop-filter:blur(2px);
}
/* 链接失效：明确标记而不是静默保留，避免同事点进去才发现白跑一趟 */
.insp-dead{
  position:absolute; right:8px; top:8px;
  font-size:11px; padding:2px 7px; border-radius:6px;
  background:var(--red); color:#fff;
}

/* flex:1 撑开剩余高度，把底部两行压到卡片底端 */
.insp-body{ padding:11px 12px 12px; flex:1; display:flex; flex-direction:column; }
.insp-title{
  font-size:13.5px; font-weight:600; line-height:1.45;
  margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.9em;
  text-wrap:pretty;
}
.insp-remark{
  font-size:13.5px; color:var(--tx2); line-height:1.55;
  margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:pretty;
}

/* 标签：底色用标签色 10% 透明度（色值后缀 1A），文字用深色，保证可读 */
.insp-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:7px; }
.insp-tag{
  font-size:11px; padding:2px 7px; border-radius:6px;
  color:var(--tx2); flex:none;
}
.insp-tagpick{ display:flex; gap:6px; flex-wrap:wrap; }
.insp-tagpick .insp-tag{
  cursor:pointer; border:1px solid var(--line);
  transition:all .15s; user-select:none;
}
.insp-tagpick .insp-tag:hover{ border-color:var(--brand); }

/* ---------- 可创建标签选择器（TagPicker）---------- */
/* 外框做成「输入框」观感：整块可点即聚焦，与全站 40px 高度控件对齐 */
.yq-tagsel-box{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  min-height:40px; padding:5px 8px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  cursor:text; transition:border-color .15s, box-shadow .15s;
}
.yq-tagsel-box.on{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,199,44,.18); }
/* 已选标签：实色底 + 白字（与卡片上「选中态标签」同一观感） */
.yq-tagsel-chip{
  display:inline-flex; align-items:center; gap:3px; flex:none;
  font-size:11.5px; font-weight:600; color:#fff;
  padding:3px 5px 3px 9px; border-radius:7px;
}
.yq-tagsel-chip i{
  font-style:normal; cursor:pointer; opacity:.7;
  padding:0 3px; font-size:12px; line-height:1;
}
.yq-tagsel-chip i:hover{ opacity:1; }
.yq-tagsel-input{
  flex:1; min-width:96px; height:26px;
  border:none; outline:none; background:transparent;
  font-size:13px; font-family:inherit; color:var(--tx); padding:0 2px;
}
/* 下拉项左侧的标签色点 */
.yq-tagdot{ width:9px; height:9px; border-radius:50%; flex:none; }
/* 「＋ 新建 xxx」那一行：主色强调，与普通可选项拉开区别 */
.yq-sel-opt.create{ color:var(--brand-ink); font-weight:600; }
.yq-sel-opt.create:hover{ background:var(--brand-soft); }

/* 头像首字圆片：详情弹窗的「点赞的人」名单在用。
   （卡片上的 @ 人 已移除，所以原来的 .insp-at 容器规则一并删掉了。） */
.insp-at-pill{
  width:20px; height:20px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-ink);
  font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
}
.insp-at-pill.me{ background:var(--brand); }
/* 底部第一行：作者 · 时间（左） + 管理按钮（右）。
   负 margin 抵消 .insp-body 的左右 padding，让分隔线能通到卡片两边。 */
.insp-foot{
  display:flex; align-items:center; gap:6px;
  margin:auto -12px 0;
  padding:9px 12px 0;
  border-top:0.5px solid var(--line2);
}
.insp-author{
  font-size:11.5px; color:var(--tx3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}

/* 底部第二行：互动三件套。flex:1 平分整行宽度，点击区域大（正是「按钮不好用」的修法） */
.insp-acts{
  display:flex; gap:6px;
  margin:8px -12px 0;
  padding:0 12px;
}
.insp-acts .icon-btn{
  flex:1; width:auto; height:30px; gap:5px; font-size:12px;
}

/* 详情弹窗的操作行：左 = 互动，右 = 复制/打开。
   分左右两栏且**不换行** —— 之前同处一个可换行的 flex 行，
   互动按钮一多就把右侧两个按钮挤到第二行，于是「有时同行、有时换行」。 */
.insp-dacts{
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding-top:12px;
  border-top:0.5px solid var(--line2);
}
.insp-dacts-l{ display:flex; align-items:center; gap:8px; min-width:0; }
.insp-dacts-r{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.insp-dacts .icon-btn{
  width:auto; height:30px; padding:0 10px; gap:5px; font-size:12px;
}

/* 通知内容区可点跳转：给出明确的可点提示
   （原来只有右侧那个小按钮能点，很容易误点到旁边的「标为已读」上） */
.nbody-click{ cursor:pointer; border-radius:8px; padding:4px 8px; margin:-4px -8px; transition:background .15s; }
.nbody-click:hover{ background:var(--line2); }

/* 评论输入框：多行自适应。高度由 JS 按 scrollHeight 算（见 yqInspGrowComment），
   最多长到 180px 后改为内部滚动，免得一条长评论把弹窗顶出屏幕。 */
.yq-cmt-input{
  flex:1; min-width:0;
  min-height:40px; max-height:180px;
  padding:9px 12px; margin:0;
  font-size:13.5px; line-height:1.5; font-family:inherit;
  resize:none; overflow-y:auto;
}

/* 详情里「共 N 人点赞」的展开开关 + 名单（仅分享者本人 / 超管可见） */
.insp-likers-toggle{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--tx2); cursor:pointer; user-select:none;
  padding:3px 7px; border-radius:7px; transition:.15s;
}
.insp-likers-toggle:hover{ background:var(--brand-soft); color:var(--brand-ink); }
.insp-likers{ margin-top:8px; display:flex; flex-wrap:wrap; gap:7px 16px; }
.insp-liker{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx2); }
.insp-liker-time{ font-size:11px; color:var(--tx3); }
/* 卡片底部按钮（点赞/收藏/评论/编辑/删除/挂起）复用 icon-btn，
   这里只补「点亮态」：点赞偏红、收藏/挂起偏黄，与图标颜色一致。
   ⚠️ 选择器不写 .sm —— 互动三件套用的是不带 sm 的 icon-btn，
      写成 .icon-btn.sm.liked 会匹配不到，星标点了也不变色。 */
.icon-btn.liked{ border-color:#F3C0C2; background:var(--red2); }
.icon-btn.faved,
.icon-btn.pinned{ border-color:#F3D98A; background:var(--brand-soft); }

/* 解析状态提示条 */
.insp-parse{
  display:flex; gap:10px; align-items:center;
  border-radius:9px; padding:8px 10px; margin-top:6px;
  font-size:12px; line-height:1.5;
  border:0.5px solid var(--line);
  background:var(--card2); color:var(--tx2);
}
.insp-parse.ok{ background:var(--green2); border-color:#BFE6CE; color:#14683A; }
.insp-parse.warn{ background:var(--brand-soft); border-color:#F3D98A; color:#8A6A00; }
.insp-parse.err{ background:var(--red2); border-color:#F5C2C4; color:#A3272B; }

.insp-hint{ font-size:11.5px; color:var(--tx3); margin-top:5px; }

/* 封面拖放区：可点击上传 / 拖入图片 / Ctrl+V 粘贴。
   默认不加边框（不改变原观感），只在拖动经过时用 outline 高亮 ——
   outline 不占布局，不会让表单跳一下。 */
.insp-coverzone{ border-radius:10px; transition:background .15s; }
.insp-coverzone.drop-on{
  outline:2px dashed var(--brand); outline-offset:3px;
  background:var(--brand-soft);
}
.insp-coverzone-tip{ font-size:11.5px; color:var(--tx3); margin-top:6px; }

/* 图片放大（灯箱）：卡片封面是 cover 裁切的，点开按 contain 看完整图。
   z-index 10050 > 详情/EditModal(9999) > 通用确认(10001)，保证盖在所有弹窗之上 */
.yq-lightbox{
  position:fixed; inset:0; z-index:10050;
  background:rgba(16,18,24,.92);
  display:flex; align-items:center; justify-content:center;
  padding:36px; cursor:zoom-out;
}
.yq-lightbox img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.5);
  cursor:default;
}
.yq-lightbox-x{
  position:absolute; top:18px; right:22px;
  width:38px; height:38px; border:none; border-radius:10px;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; transition:.15s;
}
.yq-lightbox-x:hover{ background:rgba(255,255,255,.28); }

/* 可见范围单选 */
.insp-vis{ display:flex; gap:6px; flex-wrap:wrap; }
.insp-vis-opt{
  font-size:12.5px; padding:5px 12px; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--tx2);
  cursor:pointer; user-select:none; transition:all .15s;
}
.insp-vis-opt:hover{ border-color:var(--brand); }
.insp-vis-opt.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* 收藏夹行 */
.insp-fav-row{
  display:flex; align-items:center; gap:9px;
  padding:7px 4px;
}
.insp-fav-row + .insp-fav-row{ border-top:0.5px solid var(--line2); }
.insp-fav-row input{ cursor:pointer; }

/* 评论 */
.insp-cmt{
  display:flex; gap:9px;
  padding:9px 0;
}
.insp-cmt + .insp-cmt{ border-top:0.5px solid var(--line2); }
/* 回复别人的评论：名字后标「回复 @谁」，并用左侧蓝线区分层级 */
.insp-cmt-rp{ font-size:12px; color:#2D7FF9; margin-left:5px; }
.insp-cmt.is-reply{ border-left:2px solid #D8E6FB; padding-left:11px; }
/* 评论正文：保留手动换行（Shift+Enter 的多行内容不能塌成一行）。
   word-break 防长链接把弹窗撑破。 */
.insp-cmt-body{ font-size:13px; margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.insp-cmt-av{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--brand-soft); color:var(--brand-ink);
  font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.insp-cmt-act{
  font-size:11.5px; color:var(--tx3); cursor:pointer; user-select:none;
  margin-right:10px;
}
.insp-cmt-act:hover{ color:var(--brand-ink); }
/* 内部可见标记：灰色描边，不抢黄色强调色 */
.insp-scope{
  font-size:10.5px; padding:1px 5px; border-radius:5px; margin-left:5px;
  background:#F1F4F8; color:var(--tx3);
}