/* ============================================================
   TY-WORK — 全局设计系统（Apple 质感版）
   光感玻璃（Glassmorphism）· 系统原生字体 · 瑞士极简
   设计标准详见 docs/frontend-design-standard.md
   ============================================================ */

/* ---------- 字体（Apple 系统原生栈：SF Pro + 苹方，零加载） ---------- */
/* 自托管 Plus Jakarta Sans 保留供需要处使用 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2') format('woff2');
}

/* ---------- 设计 Token ---------- */
:root {
  /* 色彩（Apple 光感：冷蓝专业色系） */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-on-primary: #FFFFFF;
  /* 品牌衍生（2026-08-22）：渐变亮调/淡色/光环由主色 color-mix 派生，品牌色两档切换时只需覆盖 --color-primary */
  --primary-bright: #3B82F6;
  --primary-deep: #1D4ED8;
  --primary-glow: rgba(37, 99, 235, .45);
  --primary-bright-2: #60A5FA;
  --focus-ring: rgba(37, 99, 235, .12);
  --color-accent: #059669;
  --color-accent-light: #ECFDF5;
  --color-destructive: #DC2626;
  --color-destructive-light: #FEF2F2;
  --color-warn: #D97706;
  --color-warn-light: #FFFBEB;
  --color-background: #F5F7FB;
  --color-surface: #FFFFFF;
  --color-foreground: #0F172A;
  --color-muted: #64748B;
  --color-muted-light: #F1F5F9;
  --color-border: #E4E9F2;
  --color-ring: #93C5FD;

  /* 玻璃质感 token（Apple frosted glass） */
  --glass-blur: 22px;
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .85);
  --hairline: rgba(15, 23, 42, .06);

  /* 间距（8px 节奏，density 8/10） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 圆角 / 阴影 / 字体（大圆角 + 柔光阴影） */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .12);
  --shadow-pop: 0 16px 48px -12px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .06);
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

  /* 过渡（150-300ms，Apple 质感缓动） */
  --transition: 200ms cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset / 基础 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  /* 数据界面：数字统一等宽数字（表格/金额/时间对齐不跳动） */
  font-variant-numeric: tabular-nums;
  /* 柔光底色：两团极克制的冷蓝光晕，营造 Apple 光感纵深 */
  background:
    radial-gradient(55% 40% at 12% 0%, rgba(191, 219, 254, .28), transparent 60%),
    radial-gradient(50% 38% at 92% 96%, rgba(224, 231, 255, .32), transparent 60%),
    var(--color-background);
  background-attachment: fixed;
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 全局横向防溢出：宽内容（多列表格等）禁止撑破页面横向滚动、冲破左侧菜单 */
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
a { color: var(--color-primary); text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
::selection { background: var(--color-primary-light); }
/* 防模板闪烁：Vue 挂载前隐藏根容器（避免闪现 {{ }} 占位符） */
[v-cloak] { display: none !important; }

/* ---------- 全局滚动条（细圆条，全站统一；侧边栏菜单/弹层/列表等所有可滚容器生效） ---------- */
* {
  scrollbar-width: thin;                       /* Firefox：细 */
  scrollbar-color: rgba(15, 23, 42, .22) transparent; /* Firefox：浅灰滑块 + 透明轨道 */
}
*::-webkit-scrollbar { width: 6px; height: 6px; }         /* 垂直/水平同宽，细 */
*::-webkit-scrollbar-track { background: transparent; }    /* 轨道透明，不占视觉 */
*::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .16);           /* 极淡灰滑块（贴合设计系统 muted） */
  border-radius: 999px;                         /* 圆胶囊 */
  border: 1px solid transparent;
  background-clip: padding-box;                 /* 留 1px 内边距，视觉更轻 */
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .32); }
*::-webkit-scrollbar-thumb:active { background: rgba(37, 99, 235, .5); }
*::-webkit-scrollbar-corner { background: transparent; }
/* 侧边栏菜单：滑块略明显一点（菜单项多、常滚动），其余继承全局 */
.shell-menu::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .22); }

/* z-index 分层（自下而上）：10 内容 / 20 顶栏 / 30 悬浮 / 39 抽屉遮罩 / 40 侧边栏 / 50 弹层 / 60 浮层 / 100 全局工具 */
/* 全站胶片噪点层：固定铺满、不拦截点击，打破纯平数字感（透明度极低） */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 卡片聚光灯：光标处柔光晕（--spot-x/--spot-y 由 common.js 驱动，rAF 节流） */
.card, .stat, .grid a, .todo-item, .item { position: relative; }
.card::after, .stat::after, .grid a::after, .todo-item::after, .item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--transition);
  background: radial-gradient(340px circle at var(--spot-x, 20%) var(--spot-y, 0%), rgba(37, 99, 235, .07), transparent 60%);
}
.card:hover::after, .stat:hover::after, .grid a:hover::after, .todo-item:hover::after, .item:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card::after, .stat::after, .grid a::after, .todo-item::after, .item::after { display: none; }
}

/* 键盘可达性：跳到主要内容（隐藏直到聚焦） */
.skip-link {
  position: fixed; top: -48px; left: var(--space-3); z-index: 100;
  background: var(--color-primary); color: #fff; font-size: 13px;
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-pop);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-3); }

/* ---------- 顶栏（白底 + 品牌） ---------- */
header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-5);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
header h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: .2px; }
.nav-link { color: var(--color-muted); margin-right: var(--space-4); font-size: 13px; transition: color var(--transition); }
.nav-link:hover { color: var(--color-primary); }
.btn-link {
  background: none; border: none; color: var(--color-muted);
  cursor: pointer; font-size: 13px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); transition: all var(--transition);
}
.btn-link:hover { color: var(--color-primary); background: var(--color-muted-light); }

/* 铃铛（SVG 图标） */
.bell { position: relative; color: var(--color-muted); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); transition: all var(--transition); }
.bell:hover { color: var(--color-primary); background: var(--color-muted-light); }
.bell .dot {
  position: absolute; top: 2px; right: 0; background: var(--color-destructive);
  color: #fff; font-size: 10px; border-radius: 10px; padding: 0 5px;
  line-height: 16px; min-width: 16px; text-align: center; font-style: normal;
}
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; cursor: pointer; border: 2px solid var(--color-border); }
.avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; vertical-align: middle; font-weight: 600;
}

/* ---------- 布局 ---------- */
main { max-width: 1100px; margin: var(--space-5) auto; padding: 0 var(--space-4); }
/* AI 助手 FAB（右下角悬浮汤圆）覆盖区：主内容底部让出 92px，避免页尾按钮/操作被 FAB 遮挡 */
#app main { padding-bottom: 92px; }
main.narrow { max-width: 760px; }

/* ---------- 卡片（磨砂玻璃：半透明 + 背景模糊 + 发丝高光边框） ---------- */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
/* 悬停光照：左上柔光模拟单一光源（仅叠加背景层，不动布局） */
.card:hover {
  background:
    radial-gradient(120% 85% at 15% 0%, rgba(37, 99, 235, .05), transparent 45%),
    var(--glass-bg);
}
.card h3 { margin: 0 0 var(--space-4); font-size: 14px; font-weight: 700; text-wrap: balance; }
.card h3:not(:first-child) { margin-top: var(--space-6); }
.info { color: var(--color-muted); font-size: 13px; margin-top: var(--space-3); }

/* 统计卡 */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.stat {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); background: radial-gradient(120% 85% at 15% 0%, rgba(37, 99, 235, .05), transparent 45%), var(--glass-bg); }
.stat:active { transform: translateY(0) scale(.97); }
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.stat .k { font-size: 12px; color: var(--color-muted); margin-top: 2px; }

/* 工作台入口网格（玻璃卡 + 渐变图标瓦片） */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.grid a {
  display: block; background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: var(--space-5) var(--space-4); text-align: center;
  color: var(--color-foreground); font-size: 13px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: all var(--transition);
}
.grid a:hover { background: rgba(239, 246, 255, .8); border-color: var(--color-ring); color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); }
.grid a:active { transform: translateY(0) scale(.97); }
.grid .icon {
  width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-light), #EEF2FF);
  color: var(--color-primary); margin-bottom: var(--space-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform var(--transition);
}
.grid a:hover .icon { transform: scale(1.06); }
.grid .hint { display: block; font-size: 11px; font-weight: 400; color: var(--color-muted); margin-top: 2px; }

/* 概览页可插拔快捷入口条（2026-08-19）：问候语下方、统计卡上方；彩色图标瓦片 + 名称，用户可选显示 */
.dash-entries {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.dash-entry {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 56px; padding: var(--space-2) var(--space-1) var(--space-1); border: none; background: none;
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  color: var(--color-foreground); font-size: 11.5px; line-height: 1.3;
  font-family: inherit; transition: all var(--transition);
}
.dash-entry:hover { background: rgba(255, 255, 255, .8); transform: translateY(-2px); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); }
.dash-entry:active { transform: scale(.94); }
/* iOS App 图标风（2026-08-20，2026-08-22 升级）：渐变 squircle + 顶部玻璃高光 + 内描边高光 + 同色系软阴影
   颜色单值经 --ec 传入，CSS color-mix 派生渐变；旧浏览器回退纯色（--ec） */
.dash-entry-ic {
  position: relative; overflow: hidden;
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: var(--ec);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 78%, #fff) 0%, var(--ec) 46%, color-mix(in srgb, var(--ec) 88%, #000) 100%);
  box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--ec) 58%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .55),
              inset 0 -1px 0 rgba(0, 0, 0, .12);
  transition: transform var(--transition), box-shadow var(--transition);
}
/* 内描边高光：贴近 iOS 图标的边缘反光环 */
.dash-entry-ic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
/* 顶部玻璃高光（镜面反射） */
.dash-entry-ic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, 0) 64%);
}
.dash-entry-ic svg { position: relative; width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.dash-entry-ic svg path, .dash-entry-ic svg circle, .dash-entry-ic svg rect,
.dash-entry-ic svg polygon, .dash-entry-ic svg line, .dash-entry-ic svg polyline { stroke-width: 1.8; }
.dash-entry-name { max-width: 64px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-entry:hover .dash-entry-ic { transform: translateY(-1px); box-shadow: 0 8px 20px -5px color-mix(in srgb, var(--ec) 62%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .12); }
/* 添加/管理瓦片（无 --ec，保持浅灰原样） */
.dash-entry-add .dash-entry-ic { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--color-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.dash-entry-add:hover .dash-entry-ic { color: var(--color-primary); }
/* 管理弹层：可插拔入口选择网格 */
.dash-entry-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  max-height: 46vh; overflow-y: auto; margin-bottom: var(--space-4);
}
.dash-entry-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-2); border-radius: var(--radius);
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, .65);
  color: var(--color-foreground); font-size: 12px; cursor: pointer;
  font-family: inherit; transition: all var(--transition);
}
.dash-entry-pick:hover { border-color: var(--color-ring); }
.dash-entry-pick.on { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.dash-entry-pick .dash-entry-pick-ic {
  position: relative; overflow: hidden;
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--ec);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 80%, #fff) 0%, var(--ec) 58%, color-mix(in srgb, var(--ec) 86%, #000) 100%);
  box-shadow: 0 3px 8px -2px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ec) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.dash-entry-pick .dash-entry-pick-ic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, 0) 62%);
}
.dash-entry-pick .dash-entry-pick-ic svg { position: relative; width: 17px; height: 17px; }
.dash-entry-pick .dash-entry-pick-ic svg path, .dash-entry-pick .dash-entry-pick-ic svg circle, .dash-entry-pick .dash-entry-pick-ic svg rect,
.dash-entry-pick .dash-entry-pick-ic svg polygon, .dash-entry-pick .dash-entry-pick-ic svg line, .dash-entry-pick .dash-entry-pick-ic svg polyline { stroke-width: 2; }
@media (max-width: 560px) {
  .dash-entry-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 智能办公（2026-08-21） ---------- */
/* 智能办公首页：功能聚合门户 */
.so-main { max-width: 1080px; margin: 0 auto; padding: var(--space-4) var(--space-5); }
.so-hero { display: flex; align-items: center; margin: var(--space-2) 0 var(--space-4); }
.so-hero h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.5px; }
/* 提示条（功能概览页顶部，用户要求）：无费用标注即完全免费 + 持续开发 + 欢迎提出需求，略微显眼 */
.so-notice {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 13px; line-height: 1.6;
}
.so-notice svg { flex-shrink: 0; margin-top: 2px; }
.so-section { margin-bottom: var(--space-6); }
.so-cat { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: 15px; font-weight: 700; }
.so-cat::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.so-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
/* 功能卡片：图标 + 名称 + 非技术介绍 + 收费说明，Apple 玻璃白卡 */
.so-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  text-decoration: none; color: var(--color-foreground);
  transition: all var(--transition);
}
.so-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); }
.so-card:active { transform: scale(.98); }
/* 功能图标（渐变 squircle，颜色经 --ec 单值传入，color-mix 派生渐变，同快捷入口瓦片风格） */
.so-ic {
  position: relative; overflow: hidden;
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--ec);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 80%, #fff) 0%, var(--ec) 58%, color-mix(in srgb, var(--ec) 86%, #000) 100%);
  box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--ec) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.so-ic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, 0) 62%);
}
.so-ic svg { position: relative; width: 24px; height: 24px; }
.so-ic svg path, .so-ic svg circle, .so-ic svg rect,
.so-ic svg polygon, .so-ic svg line, .so-ic svg polyline { stroke-width: 2; }
.so-name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; margin-top: var(--space-1); }
.so-desc { font-size: 12.5px; line-height: 1.6; color: var(--color-muted); min-height: 40px; }
.so-price { margin-top: auto; padding-top: var(--space-1); }
/* 首页空态（暂无功能）：小汤圆吉祥物 + 简短文案 */
.so-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding: var(--space-8) 0; color: var(--color-muted);
}
.so-empty img { width: 88px; height: 88px; opacity: .92; }

/* ---------- 计算器工具（2026-08-21，智能办公首个功能工具，餐饮向） ---------- */
.calc-main { max-width: 1080px; margin: 0 auto; padding: var(--space-4) var(--space-5); }
.calc-tabs { margin-bottom: var(--space-5); }
/* 标准计算器面板 */
.calc-wrap { display: flex; justify-content: center; }
.calc-pad {
  width: 360px; max-width: 100%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  padding: var(--space-4);
}
.calc-display {
  background: linear-gradient(180deg, #F1F5F9, #E9EFF7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.calc-display .expr { font-size: 12px; color: var(--color-muted); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-display .cur { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; word-break: break-all; }
.calc-display .cur.err { color: var(--color-destructive); font-size: 22px; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.calc-key {
  height: 52px; border-radius: var(--radius); border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .72); color: var(--color-foreground);
  font-size: 18px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all var(--transition);
}
.calc-key:hover { background: #fff; border-color: var(--color-ring); }
.calc-key:active { transform: scale(.94); }
.calc-key.op { color: var(--color-primary); font-size: 20px; }
.calc-key.fn { color: var(--color-muted); font-size: 15px; }
.calc-key.eq { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-size: 20px; }
.calc-key.eq:hover { background: color-mix(in srgb, var(--color-primary) 85%, #000); border-color: transparent; }
/* 各模块结果/统计展示 */
.unit-result {
  display: flex; align-items: baseline; gap: var(--space-2);
  min-height: 42px; padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, #F1F5F9, #E9EFF7);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: 22px; font-weight: 800; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.unit-result span { font-size: 12px; font-weight: 600; color: var(--color-muted); letter-spacing: 0; }
.unit-note { margin-top: var(--space-3); font-size: 12px; color: var(--color-muted); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
/* 配方缩放 */
.scale-factor { margin: var(--space-2) 0 var(--space-1); font-size: 13px; color: var(--color-muted); }
.scale-factor b { color: var(--color-primary); font-size: 15px; }
.scale-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.scale-row { display: flex; gap: var(--space-2); align-items: center; }
.scale-row input, .scale-row select {
  height: 34px; box-sizing: border-box; border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0 10px; font-size: 13px; font-family: inherit;
  background: #fff; color: var(--color-foreground);
}
.scale-row input:focus, .scale-row select:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--focus-ring); }
.scale-name { flex: 1.4; min-width: 0; }
.scale-qty { flex: 1; min-width: 0; }
.scale-unit { width: 92px; flex-shrink: 0; }
.scale-del { height: 34px; font-size: 13px; flex-shrink: 0; }

/* ---------- 待沟通事项（2026-08-21，沟通与记录：全员沟通中转站，无审核流） ---------- */
.comm-main { max-width: 900px; margin: 0 auto; padding: var(--space-4) var(--space-5); }
.comm-head { display: flex; align-items: center; justify-content: space-between; margin: var(--space-2) 0 var(--space-4); }
.comm-head h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.5px; }
.comm-filter { margin-bottom: var(--space-3); }
.comm-tabs { margin-bottom: var(--space-4); }
.comm-feed { display: flex; flex-direction: column; gap: var(--space-4); }
.comm-card {
  padding: var(--space-4) var(--space-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: all var(--transition);
}
.comm-card.closed { opacity: .68; }
.comm-card-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.comm-title { margin: 0 0 0 var(--space-1); font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.comm-content { margin-top: var(--space-2); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.comm-mentions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); align-items: center; }
.comm-mention-tag { font-size: 11px; padding: 2px 9px; border-radius: 10px; background: #E0E7FF; color: #4338CA; font-weight: 600; }
.comm-mention-tag-label { font-size: 11px; color: var(--color-muted); font-weight: 600; }
/* 确认流程记录（96 阶段）：确认通过/打回 时间线 */
.comm-confirm-records { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(255,255,255,.55); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.comm-confirm-record { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.comm-confirm-record-act { font-weight: 700; padding: 1px 8px; border-radius: 8px; }
.comm-confirm-record-act.ok { background: #D1FAE5; color: #047857; }
.comm-confirm-record-act.err { background: #FEE2E2; color: #B91C1C; }
.comm-confirm-record-note { color: var(--color-muted); word-break: break-word; }
.comm-files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.comm-file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 8px;
  background: rgba(255, 255, 255, .6); font-size: 12px;
}
.comm-file-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-file-size { color: var(--color-muted); }
.comm-file-act { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: 13px; padding: 0; line-height: 1; }
.comm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--hairline); }
.comm-meta { font-size: 12px; color: var(--color-muted); }
.comm-comments { margin-top: var(--space-3); padding: var(--space-3); background: rgba(255, 255, 255, .62); border: 1px solid var(--hairline); border-radius: var(--radius); }
.comm-comment { margin-bottom: var(--space-2); }
.comm-comment-user { font-size: 12px; font-weight: 600; }
.comm-comment-time { font-size: 11px; color: var(--color-muted); margin-left: 6px; }
.comm-comment-text { font-size: 13px; margin-top: 2px; word-break: break-word; }
.comm-comment-empty { font-size: 12px; color: var(--color-muted); }
.comm-comment-add { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.comm-comment-add input {
  flex: 1; height: 34px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 13px; font-family: inherit;
}
.comm-comment-add input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--focus-ring); }
.comm-mention-picks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comm-mention-pick { flex-direction: row; gap: 4px; padding: 6px 12px; border-radius: 14px; font-size: 12px; }
.comm-upload-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.comm-upload-btn { position: relative; cursor: pointer; overflow: hidden; }
.comm-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.comm-upload-hint { font-size: 12px; color: var(--color-muted); }

/* ---------- 便利贴（2026-08-21，沟通与记录：个人纸片墙） ---------- */
.stk-main { max-width: 1080px; margin: 0 auto; padding: var(--space-4) var(--space-5); }
.stk-editor {
  margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--sc, #FEF9C3);
  border-radius: 4px; box-shadow: 0 2px 6px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.stk-editor textarea {
  width: 100%; box-sizing: border-box; border: none; background: transparent;
  resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.7;
  color: var(--color-foreground); outline: none; min-height: 60px;
}
.stk-colors { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.stk-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2); cursor: pointer; padding: 0;
}
.stk-swatch.on { border-color: var(--color-primary); }
.stk-editor-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.stk-masonry { column-width: 220px; column-gap: var(--space-4); }
.stk-note {
  position: relative; break-inside: avoid;
  margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: 4px; box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--transition), box-shadow var(--transition);
}
.stk-note:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 8px 20px rgba(15, 23, 42, .16); z-index: 2; }
.stk-note.done { opacity: .7; }
.stk-text { display: block; font-size: 13.5px; line-height: 1.7; color: var(--color-foreground); white-space: pre-wrap; word-break: break-word; }
.stk-text.done { text-decoration: line-through; color: var(--color-muted); }
.stk-pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); color: var(--color-destructive); display: flex; }
.stk-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.stk-time { font-size: 11px; color: var(--color-muted); }
.stk-acts { display: flex; gap: 2px; }
.stk-act {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px; color: var(--color-muted); cursor: pointer;
}
.stk-act:hover { background: rgba(255, 255, 255, .8); color: var(--color-primary); }
.stk-act.on { color: var(--color-accent); }
.stk-act.danger:hover { color: var(--color-destructive); }
.stk-empty { padding: var(--space-8) 0; }

/* ---------- 概览页可自定义区块（提醒卡片 + 统计数据，2026-08-19） ---------- */
/* 提醒卡片：紧凑色块卡，图标 + 大数值 + 名称，铺满不留白 */
.wdg-reminds {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4); margin: 0 0 var(--space-5);
}
.wdg-remind {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: var(--space-4);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  cursor: pointer; text-decoration: none; color: var(--color-foreground);
  transition: all var(--transition);
}
.wdg-remind:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); }
.wdg-remind:active { transform: scale(.98); }
.wdg-remind .wdg-ic {
  position: relative; overflow: hidden;
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic, var(--color-primary)) 78%, #fff) 0%, var(--ic, var(--color-primary)) 46%, color-mix(in srgb, var(--ic, var(--color-primary)) 88%, #000) 100%);
  box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--ic, var(--color-primary)) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .55),
              inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.wdg-remind .wdg-ic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.wdg-remind .wdg-ic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, 0) 64%);
}
.wdg-remind .wdg-ic svg { position: relative; width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.wdg-remind .wdg-ic svg path, .wdg-remind .wdg-ic svg circle, .wdg-remind .wdg-ic svg rect,
.wdg-remind .wdg-ic svg polygon, .wdg-remind .wdg-ic svg line, .wdg-remind .wdg-ic svg polyline { stroke-width: 1.8; }
.wdg-remind .wdg-body { min-width: 0; display: flex; flex-direction: column; }
.wdg-remind .wdg-v { font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; white-space: nowrap; }
.wdg-remind .wdg-v .unit { font-size: 11px; color: var(--color-muted); font-weight: 500; margin-left: 2px; }
.wdg-remind .wdg-k { font-size: 12px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg-remind.zero .wdg-v { color: var(--color-muted); font-weight: 600; }

/* 统计数据：图表卡，标题行 + 图表占满宽度 */
.wdg-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4); margin: 0 0 var(--space-5);
}
.wdg-stat {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
}
.wdg-stat .wdg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--space-3); }
.wdg-stat .wdg-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.wdg-stat .wdg-head .wdg-sub { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.wdg-stat .wdg-empty { padding: 28px 0; text-align: center; color: var(--color-muted); font-size: 12px; }
/* 统计卡顶部的几枚迷你数字 */
.wdg-metrics { display: flex; gap: var(--space-5); margin-bottom: var(--space-3); flex-wrap: wrap; }
.wdg-metric .v { font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.wdg-metric .k { font-size: 11px; color: var(--color-muted); }

/* ---------- 图表（ECharts，自托管 static/vendor/echarts/，charts.js 统一封装主题） ---------- */
.echart { width: 100%; }
.echart-line { height: 180px; }
.echart-pie { height: 200px; }
.echart-bar { height: 220px; }
.echart-bar-sm { height: 150px; }
.echart-trend { height: 260px; }
/* 小色块（图表图例/明细表行内图例行） */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex-shrink: 0; }
/* 紧凑明细表（图表下分列罗列：名称/数值/占比等） */
.mini-table { margin-top: var(--space-3); }
.mini-table th, .mini-table td { padding: 6px 8px; font-size: 12.5px; }
.mini-table td:last-child, .mini-table th:last-child { text-align: right; }

/* 分段控件（周期切换等）：胶囊内嵌，选中态主色实底 */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--hairline); flex-shrink: 0; }
.seg button { border: none; background: transparent; padding: 4px 14px; border-radius: 999px; font-size: 12.5px; color: var(--color-muted); cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: var(--color-primary); }
.seg button.on { background: var(--color-primary); color: #fff; font-weight: 600; }

/* 自定义弹层分区标题 */
.wdg-mgr-sec + .wdg-mgr-sec { margin-top: var(--space-4); }
.wdg-mgr-sec h4 { margin: 0 0 var(--space-2); font-size: 12px; color: var(--color-muted); font-weight: 600; }
@media (max-width: 560px) {
  .wdg-stats { grid-template-columns: 1fr; }
}

/* ---------- 审批流程节点展示（详情弹层，审批中心三页共用，2026-08-19） ---------- */
.flow-nodes { display: flex; flex-direction: column; gap: 8px; }
.fnode {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, .55);
}
.fnode .fn-idx {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--color-muted);
  background: var(--color-muted-light);
}
.fnode .fn-body { min-width: 0; }
.fnode .fn-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fnode .fn-sub { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.fnode .fn-note { font-size: 12px; color: var(--color-warn); margin-top: 2px; }
.fnode.cur { border-color: var(--color-primary); background: var(--color-primary-light); }
.fnode.cur .fn-idx { background: var(--color-primary); color: #fff; }
.fnode.cc .fn-idx { background: var(--color-muted-light); color: var(--color-muted); }

/* ---------- Tab ---------- */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tab {
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13px;
  color: var(--color-muted); background: rgba(255, 255, 255, .8); border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: all var(--transition);
}
.tab:hover { color: var(--color-primary); border-color: var(--color-ring); }
.tab.active { background: linear-gradient(180deg, var(--primary-bright), var(--color-primary)); color: var(--color-on-primary); border-color: var(--color-primary); font-weight: 600; box-shadow: 0 4px 12px -4px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---------- 按钮（iOS 风格：渐变主按钮 + 柔光投影） ---------- */
.btn {
  background: linear-gradient(180deg, var(--primary-bright), var(--color-primary)); color: var(--color-on-primary); border: none;
  border-radius: 10px; padding: 10px 20px; cursor: pointer; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 12px -4px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:active { transform: translateY(1px); filter: brightness(.98); }
.btn:disabled { background: #A5B8E8; box-shadow: none; cursor: not-allowed; }
.btn-ghost {
  background: rgba(255, 255, 255, .7); color: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: 10px; padding: 8px 15px; cursor: pointer; font-size: 12px; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: all var(--transition);
}
.btn-ghost:hover { background: var(--color-primary-light); }
.btn-ghost:active { transform: translateY(1px); background: var(--color-primary-light); }
.btn-danger {
  background: rgba(255, 255, 255, .7); color: var(--color-destructive); border: 1px solid var(--color-destructive);
  border-radius: 10px; padding: 8px 15px; cursor: pointer; font-size: 12px; font-weight: 500;
  transition: all var(--transition);
}
.btn-danger:hover { background: var(--color-destructive-light); }
.btn-danger:active { transform: translateY(1px); background: var(--color-destructive-light); }

/* ---------- 表单（玻璃内嵌输入框） ---------- */
.filter { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); align-items: center; }
.filter select, .filter input, .form-row input {
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.filter select:focus, .filter input:focus, .form-row input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95);
}
.form-row { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; }
.form-row label { font-size: 13px; color: var(--color-muted); min-width: 90px; }
/* 勾选行（复选 + 文字）：覆盖 label 左对齐默认，改行内排布 */
.form-row label.chk { min-width: auto; font-weight: 400; color: var(--color-foreground); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 全局选择框（设计规则：全站 select 统一此样式，禁止原生样式/内联边框覆盖） ---------- */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 34px 8px 12px; font-size: 13px; color: var(--color-foreground);
  background-color: rgba(255, 255, 255, .85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
select:hover { border-color: var(--color-muted); }
select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background-color: #fff; }
select:disabled { background-color: var(--color-muted-light); color: var(--color-muted); cursor: not-allowed; }
/* 表格行内/工具栏紧凑下拉：铁律 8 补充——行内单元格需要小尺寸时用此类，禁止内联覆盖 padding/border/background */
.select-sm {
  padding: 4px 28px 4px 10px; font-size: 12px;
  background-position: right 8px center; background-size: 12px;
}

/* ---------- 表格（透明表头 + 行 hover 淡蓝） ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 宽表横向滑动容器（2026-08-30 提升为全局组件，移动端防列挤压）：水平溢出时容器内滑动，不撑破卡片 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 表格操作按钮组（设计规则：操作列按钮统一间距，禁止无间距挤在一起） ---------- */
.ops { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ops .btn, .ops .btn-ghost, .ops .btn-danger { padding: 4px 12px; font-size: 12px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
th { color: var(--color-muted); font-weight: 600; white-space: nowrap; background: rgba(241, 245, 249, .6); font-size: 12px; letter-spacing: .3px; }
th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(239, 246, 255, .55); }
.mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; }
.msg { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--color-muted); font-size: 12px; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.row-total td { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

/* ---------- 标签 ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.badge-blue { background: var(--color-primary-light); color: var(--color-primary); }
.badge-ok { background: var(--color-accent-light); color: var(--color-accent); }
.badge-warn { background: var(--color-warn-light); color: var(--color-warn); }
.badge-danger { background: var(--color-destructive-light); color: var(--color-destructive); }
.badge-gray { background: var(--color-muted-light); color: var(--color-muted); }
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.low { color: var(--color-destructive); }

/* ---------- 分页 / 空状态 / 消息 ---------- */
.pager { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); align-items: center; }
.pager button {
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, .8); border-radius: 10px;
  padding: 6px 14px; cursor: pointer; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: all var(--transition);
}
.pager button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager span { color: var(--color-muted); font-size: 12px; }
/* 空状态：构图化（图标瓦片 + 提示），替代裸文本 */
.empty {
  text-align: center; color: var(--color-muted); padding: var(--space-7) var(--space-4);
  font-size: 13px; line-height: 1.7;
}
.empty::before {
  content: ''; display: block; width: 48px; height: 48px; margin: 0 auto var(--space-3);
  border-radius: 14px; background: var(--color-muted-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'%3E%3C/polyline%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.msg-tip { color: var(--color-destructive); font-size: 13px; min-height: 18px; margin-bottom: var(--space-2); text-align: center; }
.msg-tip.ok { color: var(--color-accent); }
/* 表单 OCR 录入统一区块（112 阶段，2026-08-29）：识别内容在表单上方，左右两栏——左=识别文本，右=原图预览（对照核对） */
.ocr-panel { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); padding: var(--space-3); margin-bottom: var(--space-3); }
.ocr-panel-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-foreground); margin-bottom: var(--space-2); }
.ocr-panel-body { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-3); align-items: stretch; }
.ocr-panel-text { margin: 0; font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--color-foreground); border: 1px dashed var(--hairline); border-radius: var(--radius-sm); padding: var(--space-2); max-height: 240px; overflow: auto; }
.ocr-panel-img { border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-muted-light); min-height: 120px; }
.ocr-panel-img img { width: 100%; height: 100%; object-fit: contain; max-height: 240px; }
@media (max-width: 640px) { .ocr-panel-body { grid-template-columns: 1fr; } }
/* OCR 原图放大预览（112 阶段）：点击 ocr-panel 原图全屏查看，点遮罩/Esc/关闭按钮退出 */
.ocr-zoom-mask { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 32px; animation: ocr-zoom-in .18s ease-out; cursor: zoom-out; }
.ocr-zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ocr-zoom-close { position: absolute; top: 16px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ocr-zoom-close:hover { background: rgba(255, 255, 255, .3); }
@keyframes ocr-zoom-in { from { opacity: 0; transform: scale(.96); } }
/* 表单错误规范（96 阶段，铁律 21）：字段标红 + 字段下方红字 + 保存按钮旁汇总红框 + 自动滚动到首个错误 */
.field-invalid { border-color: var(--color-destructive) !important; }
.field-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; border-color: var(--color-destructive) !important; }
.field-err { color: var(--color-destructive); font-size: 12px; margin-top: 4px; }
.form-err {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-destructive); background: var(--color-destructive-light);
  border: 1px solid rgba(220, 38, 38, .25); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 13px;
}
.form-err::before { content: "!"; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--color-destructive); color: #fff; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.deny { text-align: center; padding: 80px 0; color: var(--color-muted); }
.deny h2 { font-size: 18px; color: var(--color-destructive); }
/* 加载态：骨架 shimmer 条 + 呼吸微光（替代裸文本） */
.loading {
  text-align: center; color: var(--color-muted); padding: var(--space-6) 0; font-size: 13px;
  animation: loading-breathe 1.6s ease-in-out infinite;
}
.loading::before {
  content: ''; display: block; width: 140px; height: 12px; border-radius: 6px; margin: 0 auto 14px;
  background: linear-gradient(90deg, var(--color-muted-light) 25%, rgba(255, 255, 255, .85) 50%, var(--color-muted-light) 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes loading-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes loading-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* 入场节奏：卡片/统计/入口/待办依次浮现（staggered，GPU 只动 opacity/transform） */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.card, .stat, .grid a, .todo-item, .item { animation: rise-in .55s cubic-bezier(.16, 1, .3, 1) backwards; }
.stat:nth-child(2) { animation-delay: .05s; }
.stat:nth-child(3) { animation-delay: .1s; }
.stat:nth-child(4) { animation-delay: .15s; }
.grid a:nth-child(2) { animation-delay: .05s; }
.grid a:nth-child(3) { animation-delay: .1s; }
.grid a:nth-child(4) { animation-delay: .15s; }
.grid a:nth-child(5) { animation-delay: .2s; }
.grid a:nth-child(6) { animation-delay: .25s; }
.grid a:nth-child(7) { animation-delay: .3s; }
.grid a:nth-child(8) { animation-delay: .35s; }

/* ---------- 条形图（活跃度/模块分布） ---------- */
.bar-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; font-size: 12px; }
.bar-row .label { width: 90px; flex-shrink: 0; color: var(--color-muted); }
.bar-row .track { flex: 1; background: var(--color-muted-light); border-radius: 4px; height: 14px; position: relative; overflow: hidden; }
.bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width 400ms ease; }
.bar-row .val { width: 52px; text-align: right; color: var(--color-muted); flex-shrink: 0; }
.legend { font-size: 12px; color: var(--color-muted); display: flex; gap: var(--space-4); margin-bottom: var(--space-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }

/* ---------- 价格标签 / 列表项 / 错误行 ---------- */
.price-tag {
  display: inline-block; background: var(--color-muted-light); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 10px 10px 0; font-size: 13px; border: 1px solid var(--color-border);
}
.price-tag b { display: block; font-size: 15px; margin-top: 4px; }
.price-tag small { color: var(--color-muted); }
.item { padding: 14px 16px; border-radius: var(--radius); cursor: pointer; margin-bottom: var(--space-2); transition: all var(--transition); }
.item:hover { border-color: var(--color-ring); box-shadow: var(--shadow-card); }
.item.unread { background: var(--color-primary-light); border-color: #BFDBFE; }
.item .t { font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.item .b { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.item .m { font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.error-line { font-size: 12px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); color: var(--color-muted); }
.error-line .t { color: var(--color-muted); margin-right: var(--space-2); font-family: ui-monospace, monospace; }

/* ---------- 弹层（玻璃面板） ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: var(--space-5); width: 420px; max-width: 92vw;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.modal h3 { margin: 0 0 var(--space-4); font-size: 15px; font-weight: 700; }
/* 弹层输入基座：特异度 (0,1,1)（仅 .modal + input + :not(:is())，:is 计参数内最高特异度 (0,0,1)，
   故 :not(:is()) 不抬升整体特异度——布局属性（width/padding/margin）是「默认值」，
   规范容器用普通特异度即可覆盖：.form-row（0,2,1）/.form-grid .fcell（0,4,1）/.po-items .po-field（0,5,1）/.level-row（0,1,1 后写胜））。
   勾选/单选不进基座（保持原生外观），页面级 checkbox 规则（如权限树 16px）可自由覆盖。 */
.modal input:not(:is([type="checkbox"], [type="radio"])) { width: 100%; box-sizing: border-box; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; margin-bottom: var(--space-3); background: rgba(255, 255, 255, .8); }
.modal input:not(:is([type="checkbox"], [type="radio"])):focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* 表单行内的输入不再叠加 `.modal input` 的下边距（form-row 自带 margin），避免弹层被双重间距撑高 */
.modal .form-row input:not([type="checkbox"]):not([type="radio"]), .modal .form-row select { margin-bottom: 0; }
.modal .row { display: flex; gap: var(--space-3); justify-content: flex-end; }
/* 弹层最后一个内容块与按钮行（.row）之间必须有间距（设计规范四·11）
   全局兜底：任何页面弹层按钮行自带顶部间距，防内容紧贴按钮（曾反复出现） */
.modal:not(.ui-dialog-box) .row { margin-top: var(--space-3); }
.hint { font-size: 12px; color: var(--color-muted); margin-bottom: var(--space-3); }
/* 弹层超高兜底：任何 modal 高于视口时内部滚动，不再撑出页面 */
.modal { max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; }
/* 弹层宽度档位（内容匹配：单列 420 默认 / 档案表单 600 / 明细编辑 860；2026-08-21 新增 480/560 过渡档） */
.modal-sm { width: 480px; max-width: 94vw; }
.modal-md { width: 600px; max-width: 94vw; }
.modal-560 { width: 560px; max-width: 94vw; }
.modal-lg { width: 860px; max-width: 96vw; }
/* 批次等数据弹层：高度不超过视口 70%（内部滚动），避免显示不全 */
.modal.modal-batches { max-height: 70vh; }

/* ---------- 抽屉（Drawer，2026-08-21 新增，Ant/Material 主流交互容器） ----------
   定位：中长表单 / 详情查看 / 子任务 / 多区块内容（弹窗放不下、整页又过重的场景），
   右侧滑入，与弹窗共用 Apple 玻璃材质；头部（标题+关闭）/ 主体（内滚+末端淡出）/ 底部操作条三段式。 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end; z-index: 50;
  animation: mask-in .2s ease;
}
@keyframes mask-in { from { opacity: 0; } }
.drawer {
  height: 100%; width: 640px; max-width: 96vw;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border-left: 1px solid var(--glass-border);
  box-shadow: -20px 0 56px -20px rgba(15, 23, 42, .22), inset 1px 0 0 rgba(255, 255, 255, .8);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  animation: drawer-in .34s cubic-bezier(.32, .72, 0, 1) forwards;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-sm { width: 560px; }
.drawer-md { width: 720px; }
.drawer-lg { width: 860px; }
.drawer-xl { width: min(1080px, 96vw); }
.drawer-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 22px 28px 16px;
}
.drawer-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.drawer-head .sub { font-size: 12px; color: var(--color-muted); font-weight: 400; }
.drawer-close {
  margin-left: auto; width: 32px; height: 32px; border: none; background: none;
  color: var(--color-muted); cursor: pointer; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--transition);
}
.drawer-close:hover { background: var(--color-primary-light); color: var(--color-primary); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 12px; }
.drawer-foot {
  flex-shrink: 0; display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center;
  padding: 16px 28px 20px; border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .35);
}
/* 抽屉末端淡出条已移除（2026-08-26）：渐变条会遮挡底部内容，用户要求完全不显示 */

@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; transform: translateX(0); }
  .drawer-mask { animation: none; }
}
/* 抽屉内档案表单与弹层同规范（38px 控件、留白更舒展） */
.drawer .form-grid { row-gap: var(--space-3); }
.drawer .form-grid .fcell input:not([type="checkbox"]):not([type="radio"]),
.drawer .form-grid .fcell select {
  width: 100%; box-sizing: border-box; min-width: 0; margin-bottom: 0;
  height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13.5px; background-color: rgba(255, 255, 255, .85); color: var(--color-foreground);
  font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.drawer .form-grid .fcell select { padding: 0 30px 0 12px; }
.drawer .form-grid .fcell input:focus,
.drawer .form-grid .fcell select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background-color: #fff; }
.drawer .form-grid .fcell .picker-input { cursor: pointer; background-image: none; }
/* 同类别选项同行（2026-08-26 定，设计准则）：一个 fcell 内「模式下拉 + 值控件」横向并排，
   如 渠道=已有/自定义、客户=系统/自定义——模式与值必须同一行（禁拆两个 fcell 导致在 2 列网格里错行）；
   模式下拉自适应宽度，值控件 flex 占满剩余；其余格按需留空，不强制填满 */
.form-grid .fcell .fcell-inline {
  display: flex; gap: var(--space-2); align-items: center;
}
.form-grid .fcell .fcell-inline > select,
.form-grid .fcell .fcell-inline > input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1 1 0%; width: auto; min-width: 0; margin-bottom: 0;
}
.form-grid .fcell .fcell-inline > select:first-child { flex: 0 0 auto; width: auto; }

/* ---------- 文档预览抽屉（kb-pv 收敛共享，2026-08-21） ----------
   知识库/文档/回收站共用：右滑大抽屉内嵌 iframe/图片/识别文字，替换原 4 份重复 1080px lightbox */
.kb-pv-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.kb-pv-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.kb-pv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kb-pv-body { flex: 1; overflow: auto; background: #ECEFF4; min-height: 0; }
.kb-pv-iframe { width: 100%; height: calc(100vh - 150px); min-height: 60vh; border: none; display: block; background: #fff; }
.kb-pv-img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto; object-fit: contain; background: #fff; }
.kb-pv-text { background: #fff; border-top: 1px solid var(--hairline); padding: 14px 18px; }
.kb-pv-text-title { font-size: 12px; font-weight: 700; color: var(--color-muted); margin-bottom: 8px; }
.kb-pv-text-body { font-size: 13px; line-height: 1.8; color: var(--color-foreground); white-space: pre-wrap; word-break: break-word; max-height: 34vh; overflow-y: auto; }
.kb-pv-loading, .kb-pv-error { padding: 60px 20px; text-align: center; color: var(--color-muted); font-size: 14px; }
.kb-pv-error { color: var(--color-destructive); }

/* ---------- 菜单顺序编辑器（账号个人「菜单设置」，75 修正后从角色端移至概览，共享 theme） ---------- */
.order-editor { display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 6px; }
.order-groups { display: flex; flex-direction: column; gap: 12px; }
.order-group {
  flex-shrink: 0; border: 1px solid var(--hairline); border-radius: 14px;
  background: rgba(255,255,255,.6); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  cursor: grab; user-select: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.order-group:active { cursor: grabbing; }
.order-group.dragging { opacity: .55; transform: scale(1.01); box-shadow: 0 14px 30px -14px rgba(15,23,42,.35); border-color: var(--color-ring); }
.order-group.drag-over { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255,255,255,.7); }
.order-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: rgba(15,23,42,.03);
}
.order-group:hover .order-handle { opacity: 1; color: var(--color-primary); }
.order-group-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--color-foreground); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.order-sub-list { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.order-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; background: #fff; border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px -1px rgba(15,23,42,.06);
  cursor: grab; user-select: none; font-size: 13.5px; font-weight: 600; color: var(--color-foreground);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.order-row:active { cursor: grabbing; }
.order-row.order-sub { font-weight: 400; font-size: 12.5px; padding: 8px 10px 8px 14px; }
.order-row.dragging { opacity: .5; transform: scale(1.015); box-shadow: 0 12px 26px -12px rgba(15,23,42,.35); border-color: var(--color-ring); }
.order-row.drag-over { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255,255,255,.7); }
.order-handle { flex-shrink: 0; color: var(--color-muted); display: inline-flex; opacity: .65; transition: opacity var(--transition), color var(--transition); }
.order-row:hover .order-handle { opacity: 1; color: var(--color-primary); }
.order-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); opacity: .4; }
.order-row.order-sub .order-dot { background: var(--color-muted); opacity: .4; }
.order-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-count { flex-shrink: 0; font-size: 11px; color: var(--color-muted); background: var(--color-muted-light); border-radius: 999px; padding: 1px 8px; }
/* TransitionGroup 挤压动效：拖动换位时其余行平滑让位（被挤走） */
.order-move { transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.order-enter-active { transition: opacity .2s ease; }
.order-leave-active { transition: opacity .2s ease; }
.order-enter-from, .order-leave-to { opacity: 0; }

/* ---------- 档案表单（弹层多字段录入：标签居上 + 两列，现代表单标准） ----------
   结构：.form-grid > .fcell（.full 跨整行）；label 在输入框正上方
   与 `.form-row`（标签左侧，适合页内行/短表单）互补，档案类多字段用本模式 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); row-gap: var(--space-2); }
.form-grid .fcell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-grid .fcell.full { grid-column: 1 / -1; }
.form-grid .fcell > label { font-size: 12px; color: var(--color-muted); }
.form-grid .fcell > label.chk { font-size: 13px; color: var(--color-foreground); display: inline-flex; align-items: center; gap: 6px; }
.form-grid .req { color: var(--color-destructive); font-weight: 600; }
.form-sec { grid-column: 1 / -1; font-size: 12px; color: var(--color-muted); font-weight: 600; margin-top: var(--space-2); }
/* 档案表单输入统一高度/宽度（特异度 (0,4,1)+ 覆盖 `.modal input` 全宽+下边距） */
.modal .form-grid .fcell input:not([type="checkbox"]):not([type="radio"]),
.modal .form-grid .fcell select {
  width: 100%; box-sizing: border-box; margin-bottom: 0; min-width: 0;
  height: 34px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.modal .form-grid .fcell select { padding: 0 30px 0 10px; }
.modal .form-grid .fcell input:focus,
.modal .form-grid .fcell select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95); }

/* ---------- 页级档案表单输入（非弹层，如发起审批页）：与弹层 .form-grid 同规范，Apple 风格 38px 控件 ----------
   theme 的 .modal .form-grid 仅覆盖弹层内控件；页级 .form-grid 直接铺在页面（非 modal）时
   需要独立基座——否则 input/select/date-input 全是浏览器默认样式。特异度 (0,2,1) 低于 .modal (0,4,1) 版本，
   不冲突；select 沿用全局箭头，日期/时间选择器 .picker-input 同高同风格。 */
.form-grid .fcell input:not([type="checkbox"]):not([type="radio"]),
.form-grid .fcell select,
.form-grid .fcell textarea {
  width: 100%; box-sizing: border-box; min-width: 0; margin-bottom: 0;
  height: 38px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13.5px; background-color: rgba(255, 255, 255, .85); color: var(--color-foreground);
  font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.form-grid .fcell select { padding: 0 30px 0 12px; }
.form-grid .fcell textarea { height: auto; min-height: 96px; padding: 9px 12px; line-height: 1.6; resize: vertical; }
.form-grid .fcell input:focus,
.form-grid .fcell select:focus,
.form-grid .fcell textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background-color: #fff; }
.form-grid .fcell .picker-input { cursor: pointer; background-image: none; }

/* ---------- 明细行编辑器（进货单/领料等多行数据录入） ----------
   结构：.po-items > .po-item（.form-row 产品整行 + .po-fields 字段行）
   .po-fields 为 flex-wrap —— 单行放不下自动换行，无需手工对齐各列高度；
   所有输入统一 34px 高，避免 select/input/date-input 高度错位 */
.po-items { margin-bottom: var(--space-3); }
.po-item { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: rgba(255, 255, 255, .45); }
.po-item:last-child { margin-bottom: 0; }
.po-item .form-row { margin-bottom: var(--space-2); }
.po-item .form-row:last-child { margin-bottom: 0; }
.po-item .form-row select { flex: 1; min-width: 0; height: 34px; padding: 0 30px 0 9px; }
/* 明细行「自定义输入」（如预约餐品自定义名）：与同排 select 同 34px 对齐，禁浏览器默认裸框 */
.po-item .form-row input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1; min-width: 0; height: 34px; box-sizing: border-box; margin-bottom: 0;
  padding: 0 9px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.po-item .form-row input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95);
}
/* 明细行「上下框对齐」（2026-08-26 定，设计准则）：两行同列控件左缘对齐——
   行1 餐品标签/模式下拉/餐品下拉/删除钮，行2 数量标签/数量输入框（数量输入框与模式下拉同列左对齐）；
   标签自适应宽度（勿用 .form-row label 的 90px 固定 min-width，避免「标签→控件」大空隙），
   标签↔控件 column-gap 12px 防拥挤；控件统一 34px */
.resv-dish {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
}
.resv-dish > label { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.resv-dish select,
.resv-dish input:not([type="checkbox"]):not([type="radio"]) {
  height: 34px; width: 100%; min-width: 0; box-sizing: border-box; margin-bottom: 0;
  padding: 0 9px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.resv-dish select { padding: 0 30px 0 9px; }
.resv-dish input[type="number"] { width: 96px; text-align: right; }
.resv-dish .resv-dish-grow { width: 100%; }
.resv-dish select:focus,
.resv-dish input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95); }
.po-fields { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.po-field { display: inline-flex; align-items: center; gap: 8px; }
.po-field > label { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.po-field .mono { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
 /* 明细输入统一高度/宽度：特异度 (0,5,1)+ 覆盖 `.modal input`（0,3,1）的全宽与下边距
    注意：变体宽度规则与基础规则同特异度时「后写胜」，故变体写在基础之后
    drawer（抽屉）与 modal 同规范——明细编辑器放抽屉（进货单/订单/预约等）也要 34px 对齐 */
 .modal .po-items .po-field input:not([type="checkbox"]):not([type="radio"]),
 .modal .po-items .po-field select,
 .drawer .po-items .po-field input:not([type="checkbox"]):not([type="radio"]),
 .drawer .po-items .po-field select {
   height: 34px; width: auto; min-width: 0; box-sizing: border-box; margin-bottom: 0;
   padding: 0 9px; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
   font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
 }
 .modal .po-items .po-field input[type="number"]:not([type="checkbox"]):not([type="radio"]),
 .drawer .po-items .po-field input[type="number"]:not([type="checkbox"]):not([type="radio"]) { width: 96px; text-align: right; }
 .modal .po-items .po-field input.picker-input:not([type="checkbox"]):not([type="radio"]),
 .drawer .po-items .po-field input.picker-input:not([type="checkbox"]):not([type="radio"]) { width: 124px; }
 .modal .po-items .po-field select,
 .drawer .po-items .po-field select { min-width: 160px; padding: 0 30px 0 9px; }
 .modal .po-items .po-field input:focus,
 .modal .po-items .po-field select:focus,
 .drawer .po-items .po-field input:focus,
 .drawer .po-items .po-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95); }
.po-del { width: 30px; height: 30px; border: none; background: none; color: var(--color-muted); cursor: pointer; font-size: 16px; border-radius: 8px; line-height: 1; flex-shrink: 0; }
.po-del:hover { background: var(--color-destructive-light); color: var(--color-destructive); }
.po-shelf { font-size: 12px; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }

/* ---------- 审批节点/层级行编辑器（审批流程配置等多级录入） ----------
   结构：.level-row（序号 .level-idx + 名称输入 + 审批人下拉 + 删除钮）
   与 .po-items 同约定：input/select 统一 34px 高，避免控件高度错位 */
.level-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: 13px; }
.level-row input, .level-row select {
  height: 34px; width: auto; margin-bottom: 0; box-sizing: border-box;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.level-row input:focus,
.level-row select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255, 255, 255, .95); }
.level-row input { padding: 0 9px; }
.level-row select { padding: 0 30px 0 9px; }
.level-idx { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

/* ---------- 构建器行控件统一（2026-08-19 修顽固错位）：字段构建/流程节点/层级行 ----------------
   根因：`.modal input:not(:is(...))` 实际特异度 (0,2,1)（:not(:is(属性选择器)) 抬升），
   且自带 `padding:8px 12px` + `margin-bottom:12px`——flex 行 align-items:center 下
   input 的不对称下边距把它顶高，比左右 select/按钮高一截。
   修法：高特异度 (0,3,1)+ 覆盖——行内 input/select 统一 34px + padding 归零 + margin-bottom:0；
   页签钮组无纵向内边距且按钮撑满 34px；操作小按钮统一 34px。此节为权威规则。 */
.field-row, .flow-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal .field-row select,
.modal .field-row input:not(:is([type="checkbox"], [type="radio"])),
.modal .flow-node-head select,
.modal .flow-node-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .cond-node .flow-node-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .rule-row select,
.modal .rule-row input:not(:is([type="checkbox"], [type="radio"])),
.modal .cond-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .level-row input:not(:is([type="checkbox"], [type="radio"])),
.modal .level-row select {
  height: 34px; width: auto; min-width: 0; box-sizing: border-box; margin-bottom: 0;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 13px; background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.modal .field-row input:not(:is([type="checkbox"], [type="radio"])),
.modal .flow-node-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .cond-node .flow-node-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .rule-row input:not(:is([type="checkbox"], [type="radio"])),
.modal .cond-head input:not(:is([type="checkbox"], [type="radio"])),
.modal .level-row input:not(:is([type="checkbox"], [type="radio"])) { padding: 0 10px; }
.modal .field-row select, .modal .flow-node-head select, .modal .rule-row select, .modal .level-row select { padding: 0 30px 0 9px; }
.modal .field-row input:not(:is([type="checkbox"], [type="radio"])):focus,
.modal .field-row select:focus,
.modal .flow-node-head input:not(:is([type="checkbox"], [type="radio"])):focus,
.modal .flow-node-head select:focus,
.modal .level-row input:not(:is([type="checkbox"], [type="radio"])):focus,
.modal .level-row select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); background: rgba(255,255,255,.95); }
/* 行内操作小按钮（上移/下移/删除/添加条件/删除条件）统一 34px */
.field-ops button, .flow-node-ops button, .cond-del, .rule-del {
  width: 34px; height: 34px; box-sizing: border-box; flex-shrink: 0;
  border: 1px solid var(--hairline); background: #fff; border-radius: 7px; color: var(--color-muted); cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
/* 页签钮组（审批/抄送/条件、字段类型）：容器无纵向内边距，按钮撑满 34px */
.flow-node-head .type-tabs, .cond-node .type-tabs, .field-row .f-type { height: 34px; box-sizing: border-box; }
.flow-node-head .type-tabs, .cond-node .type-tabs { padding: 0; background: var(--color-muted-light); border-radius: 8px; display: inline-flex; align-items: center; flex-shrink: 0; }
.flow-node-head .type-tabs button, .cond-node .type-tabs button {
  height: 34px; padding: 0 12px; box-sizing: border-box; border: none; background: transparent; border-radius: 7px;
  font-size: 12px; cursor: pointer; color: var(--color-muted); font-family: inherit; display: inline-flex; align-items: center;
}
.flow-node-head .type-tabs button.on, .cond-node .type-tabs button.on { background: #fff; color: var(--color-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* ---------- 跨页共用类（收敛：各页面不再重复定义，统一在此维护） ---------- */
/* 成功/正向实心按钮（通过/去审批等） */
.btn-ok {
  background: linear-gradient(180deg, #10B981, var(--color-accent)); color: #fff; border: none;
  border-radius: 10px; padding: 8px 15px; cursor: pointer; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(5, 150, 105, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter var(--transition);
}
.btn-ok:hover { filter: brightness(1.06); }
/* 警告实心按钮（驳回/退回等） */
.btn-warn {
  background: linear-gradient(180deg, #F59E0B, var(--color-warn)); color: #fff; border: none;
  border-radius: 10px; padding: 8px 15px; cursor: pointer; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(217, 119, 6, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter var(--transition);
}
.btn-warn:hover { filter: brightness(1.06); }
/* 弹层/表单按钮行（右对齐 + 上边距，满足铁律 11 间距） */
.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); align-items: center; }
/* 次要说明文字 */
.sub { color: var(--color-muted); font-size: 12px; margin-top: 6px; }
/* 详情行（k=标签 v=值） */
.detail-row { display: flex; padding: var(--space-2) 0; font-size: 13px; border-bottom: 1px solid var(--hairline); }
.detail-row .k { width: 90px; color: var(--color-muted); flex-shrink: 0; }
.detail-row .v { flex: 1; white-space: pre-wrap; }
/* 区块小节标题 */
.po-section-title { font-size: 12px; color: var(--color-muted); margin: var(--space-4) 0 var(--space-2); font-weight: 600; }
/* 单据/明细信息网格与合计 */
.po-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-3); }
.po-info b { color: var(--color-foreground); font-weight: 600; }
.po-total { text-align: right; font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-3); }
.po-total b { color: var(--color-foreground); font-size: 15px; font-variant-numeric: tabular-nums; }

/* 全局模态对话框（uiAlert/uiConfirm/uiPrompt） */
.ui-dialog-msg { margin: 0 0 var(--space-4); font-size: 13px; color: var(--color-muted); line-height: 1.7; }
.ui-dialog-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; margin-bottom: var(--space-4);
  background: rgba(255, 255, 255, .8); color: var(--color-foreground);
}
.ui-dialog-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.btn-danger-fill {
  background: linear-gradient(180deg, #EF4444, var(--color-destructive)); color: #fff; border: none;
  border-radius: 10px; padding: 10px 20px; cursor: pointer; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(220, 38, 38, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: filter var(--transition);
}
.btn-danger-fill:hover { filter: brightness(1.06); }

/* ---------- 布局 Shell（侧边栏 + 顶栏，磨砂玻璃） ---------- */
.layout { min-height: 100dvh; }
.layout-main { margin-left: 240px; transition: margin-left var(--transition); display: flex; flex-direction: column; min-height: 100dvh; min-width: 0; }
/* 内容容器横向约束：主内容区不超视口、不冲破侧边栏；页面内宽内容在内容区内滚动 */
.layout-main > #app { min-width: 0; }
.layout-main #app main { min-width: 0; max-width: 100%; }

/* 侧边栏：玻璃面板 */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 40;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 4px 0 24px -12px rgba(15, 23, 42, .08);
  transition: width var(--transition), transform var(--transition);
}
#sidebar.collapsed { width: 64px; }
/* 折叠态主区联动（设计规范：收起后右侧内容区左移到侧边栏右缘，不留空白） */
@media (min-width: 769px) {
  body.shell-collapsed .layout-main { margin-left: 64px; }
}

.shell-brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); height: 56px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.shell-logo {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  /* 纯蓝渐变（收敛 indigo，避免蓝紫 AI 指纹；品牌色两档切换时随 --color-primary 变） */
  background: linear-gradient(135deg, var(--primary-bright), var(--color-primary));
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; letter-spacing: -.5px;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  overflow: hidden;
}
/* 企业 logo 图（白标透明底，加载后替换品牌字） */
.shell-logo-img { width: 100%; height: 100%; object-fit: cover; }
.shell-brand-text { min-width: 0; overflow: hidden; white-space: nowrap; }
.shell-brand-name { font-size: 13px; font-weight: 700; color: var(--color-foreground); overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.shell-brand-sub { font-size: 10px; color: var(--color-muted); letter-spacing: .04em; }

.shell-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--space-2) var(--space-4); }
.shell-group-label {
  font-size: 10px; letter-spacing: .14em; color: var(--color-muted); opacity: .85;
  padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap;
}
/* 菜单项：Apple 风格胶囊高亮（激活=主色渐变实底胶囊 + 白图标，hover 柔和抬升） */
.shell-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; background: none; border: none;
  padding: 10px var(--space-3); margin-bottom: 2px;
  border-radius: 12px; font-size: 13px; color: var(--color-foreground);
  white-space: nowrap; cursor: pointer; transition: all var(--transition);
}
.shell-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.shell-item:hover { background: rgba(255, 255, 255, .78); color: var(--color-primary); box-shadow: 0 2px 8px -2px rgba(15, 23, 42, .08); }
.shell-item:active { transform: scale(.98); }
.shell-item.active {
  background: linear-gradient(135deg, var(--primary-bright), var(--color-primary));
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.shell-item.active svg { color: #fff; }
.shell-item-label { position: relative; overflow: hidden; text-overflow: ellipsis; }

.shell-parent { position: relative; }
.shell-parent > .shell-item { padding-right: var(--space-5); }
.shell-parent.open > .shell-item { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.shell-arrow { position: absolute; right: 10px; top: 12px; color: var(--color-muted); transition: transform var(--transition); pointer-events: none; }
.shell-arrow.open { transform: rotate(90deg); }
.shell-submenu { display: none; margin: 2px 0 4px; padding-left: 14px; }
.shell-submenu.open { display: block; }
.shell-sub { padding-left: var(--space-4); font-size: 12.5px; color: var(--color-muted); font-weight: 400; position: relative; border-radius: 9px; }
.shell-sub:hover { color: var(--color-primary); background: rgba(255, 255, 255, .6); }
.shell-item-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-border); flex-shrink: 0; margin-left: 2px; transition: all var(--transition); }
.shell-sub.active { color: var(--color-primary); font-weight: 600; background: var(--color-primary-light); }
.shell-sub.active .shell-item-dot { background: var(--color-primary); }
.shell-sub-label { position: relative; overflow: hidden; text-overflow: ellipsis; }

/* 侧边栏角标（2026-08-20，2026-08-25 重做：改为「紧跟文字右侧」inline 布局——原 absolute right:-N 超出
   label 的 overflow:hidden 被裁剪（红点/数字右边被切，看似被滚动条遮挡）；现红点/数字作为菜单项 flex 子元素
   紧跟文字，杜绝裁剪，提醒更清楚）
   - .shell-notif-dot/.shell-status-dot：母项红点（通知中心=有未读；状态查询=有待办/进行中，不带数字）
   - .shell-count：子项数字角标（通知查阅未读数/待办/我发起的，紧跟文字右侧） */
.shell-notif-dot,
.shell-status-dot {
  display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-left: -6px;
  border-radius: 50%; background: var(--color-destructive); font-style: normal; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(220, 38, 38, .55);
}
.shell-count {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: -6px;
  border-radius: 999px; background: var(--color-destructive); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1; text-align: center; font-style: normal;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(220, 38, 38, .5);
}
/* 折叠态：label 隐藏，母项红点锚定菜单按钮图标右上角（按钮级绝对定位，不受文字流影响；margin 不生效） */
#sidebar.collapsed .shell-notif-dot,
#sidebar.collapsed .shell-status-dot { position: absolute; top: 6px; right: 10px; margin-left: 0; }

/* 悬浮子菜单（折叠态 hover 弹出）：玻璃面板
   折叠态转 position:fixed 脱离 .shell-menu 的 overflow 裁剪（left/top 由 JS 按图标位置计算） */
.shell-flyout {
  position: absolute; left: 0; top: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0; visibility: hidden;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.shell-flyout-title {
  font-size: 10px; letter-spacing: .12em; color: var(--color-muted);
  padding: var(--space-2) var(--space-3) var(--space-1); white-space: nowrap;
}
.shell-flyout .shell-flyout-item { display: flex; align-items: center; gap: 6px; padding: 8px var(--space-3); border-radius: 8px; color: var(--color-foreground); cursor: pointer; position: relative; }
.shell-flyout .shell-flyout-item .shell-count { position: static; margin-left: auto; }
.shell-flyout .shell-flyout-item:hover { background: var(--color-muted-light); color: var(--color-primary); }
.shell-flyout .shell-flyout-item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
#sidebar.collapsed .shell-flyout { position: fixed; }
.shell-flyout.show { opacity: 1; visibility: visible; transform: translateX(0); }

/* 折叠态单页项：原生 title 提示（浏览器级，不受 overflow 裁剪；data-label 供 JS 同步 title） */
#sidebar.collapsed .shell-item[data-label]:hover::after { display: none; }

.shell-user { display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); flex-shrink: 0; }
.shell-user-click { cursor: pointer; transition: background var(--transition); border-radius: 0 0 0 0; }
.shell-user-click:hover { background: rgba(255, 255, 255, .75); }
.shell-user-caret { margin-left: auto; color: var(--color-muted); font-size: 10px; flex-shrink: 0; }
.shell-user-caret::after { content: '▲'; font-size: 8px; display: inline-block; }
#sidebar.collapsed .shell-user-caret { display: none; }
/* 左下角用户菜单（玻璃下拉，底部弹出）
   ⚠️ 必须用双类（.user-dropdown 单类会覆盖定位为 absolute+top，与 JS 的 bottom 同时生效导致菜单被拉伸覆盖整个侧边栏） */
.shell-user-menu.user-dropdown { position: fixed; top: auto; right: auto; bottom: 70px; left: 12px; z-index: 70; min-width: 180px; display: none; }
.shell-user-avatar-wrap { display: inline-flex; flex-shrink: 0; }
.shell-user-avatar { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.shell-user-avatar-wrap img.shell-user-avatar { background: var(--color-muted-light); }
.shell-user-meta { min-width: 0; overflow: hidden; white-space: nowrap; }
.shell-user-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.shell-user-role { font-size: 11px; color: var(--color-muted); }

/* 侧边栏折叠开关（位于用户区上方） */
.shell-collapse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: var(--space-2); padding: 8px; border: none; background: none; border-radius: 10px;
  color: var(--color-muted); cursor: pointer; flex-shrink: 0;
  transition: all var(--transition);
}
.shell-collapse:hover { background: rgba(255, 255, 255, .75); color: var(--color-primary); }
#sidebar.collapsed .shell-collapse { margin: var(--space-2) auto; }

/* 折叠态（桌面）：只留图标 */
#sidebar.collapsed .shell-brand-text, #sidebar.collapsed .shell-group-label,
#sidebar.collapsed .shell-item-label, #sidebar.collapsed .shell-user-meta,
#sidebar.collapsed .shell-arrow, #sidebar.collapsed .shell-item-dot,
#sidebar.collapsed .shell-submenu { display: none; }
#sidebar.collapsed .shell-brand { justify-content: center; padding: 0; }
#sidebar.collapsed .shell-item { justify-content: center; padding: 9px; }
#sidebar.collapsed .shell-user { justify-content: center; padding: var(--space-3) 0; }

/* 顶栏：玻璃 */
#topbar {
  position: sticky; top: 0; z-index: 30; height: 56px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px -20px rgba(15, 23, 42, .25);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4); gap: var(--space-3);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* 多页签标签栏（参考 RuoYi Office TabsView）：主区上方横排，点击切换 / x 关闭，概览固定 */
.shell-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 8px var(--space-4);
  background: rgba(248, 250, 252, .7);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
/* 中部固定滚动容器：标签只在此区域横向滚动（flex:1 + min-width:0），不进入两端按钮下方 */
.shell-tabs-scroll {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.shell-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px;
  font-size: 12.5px; color: var(--color-muted); cursor: pointer; white-space: nowrap;
  line-height: 1.4;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--hairline);
  text-decoration: none; user-select: none; transition: color .15s, border-color .15s, background .15s;
}
.shell-tab:hover { color: var(--color-primary); border-color: var(--color-primary-light); }
.shell-tab.active {
  color: var(--color-primary); font-weight: 600;
  background: var(--color-primary-light); border-color: var(--color-primary);
}
/* 常驻返回首页按钮（标签栏最左，无文字，仅房屋图标） */
.shell-tab-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  color: var(--color-muted); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.shell-tab-home:hover { color: var(--color-primary); background: var(--color-primary-light); border-color: var(--color-primary-light); }
.shell-tab-home:active { transform: scale(.92); }
/* 关闭按钮：与文字间距由 flex gap 承担（标签 padding 已对称，概览无关闭钮文字仍居中） */
.shell-tab-close {
  width: 18px; height: 18px; margin-right: -5px; border: none; border-radius: 50%;
  background: transparent; color: var(--color-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.shell-tab-close:hover { background: var(--color-destructive-light); color: var(--color-destructive); }
/* 常驻清除全部标签按钮（标签栏最右，红色样式，无文字仅垃圾桶图标；scroller flex:1 把它顶在右端） */
.shell-tab-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  color: var(--color-destructive); cursor: pointer;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.shell-tab-clear:hover { color: var(--color-destructive); background: var(--color-destructive-light); border-color: var(--color-destructive-light); }
.shell-tab-clear:active { transform: scale(.92); }

/* 顶栏时钟 + 天气（玻璃胶囊，铃铛左侧）：统一高度与垂直居中，三元素视觉平行 */
.topbar-clock, .topbar-weather {
  display: inline-flex; align-items: center; height: 34px; line-height: 1;
  border-radius: 999px; background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.topbar-clock { gap: 8px; padding: 0 14px; }
.tb-clock-date { font-size: 11px; font-weight: 500; color: var(--color-muted); }
.tb-clock-time { font-size: 14px; font-weight: 700; color: var(--color-foreground); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.topbar-weather { gap: 6px; padding: 0 12px; font-size: 12px; color: var(--color-muted); }
.topbar-weather svg { flex-shrink: 0; vertical-align: middle; }
.topbar-weather .wt-sun { color: var(--color-warn); }
.topbar-weather .wt-cloud { color: var(--color-muted); }
.topbar-weather .wt-rain, .topbar-weather .wt-snow, .topbar-weather .wt-fog, .topbar-weather .wt-thunder { color: var(--color-primary); }
.tb-wt-city { color: var(--color-foreground); font-weight: 700; }
.tb-wt-temp { font-size: 14px; font-weight: 800; color: var(--color-foreground); letter-spacing: -.5px; }
.tb-wt-desc { font-weight: 600; color: var(--color-foreground); }
.topbar-icon {
  width: 34px; height: 34px; border: none; background: none; border-radius: 10px;
  color: var(--color-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.topbar-icon:hover { background: rgba(255, 255, 255, .8); color: var(--color-primary); }
.topbar-burger { display: none; }
.topbar-avatar {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; color: var(--color-muted);
  transition: background var(--transition);
}
.topbar-avatar:hover { background: rgba(255, 255, 255, .8); }
.topbar-avatar-img { display: inline-flex; flex-shrink: 0; }
.topbar-avatar-img-fallback { width: 28px; height: 28px; font-size: 13px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.topbar-avatar-img img.topbar-avatar-img-fallback { background: var(--color-muted-light); }
.topbar-user { position: relative; }

/* 面包屑 */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; overflow: hidden; }
.crumb { color: var(--color-muted); white-space: nowrap; }
.crumb-current { color: var(--color-foreground); font-weight: 600; }
.crumb-sep { color: var(--color-border); }

/* 头像下拉（玻璃） */
.user-dropdown {
  position: absolute; right: 0; top: 42px; z-index: 60; min-width: 160px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .8); padding: var(--space-2);
}
.user-dropdown-head { font-size: 12px; color: var(--color-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-1); white-space: nowrap; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--color-foreground); border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.user-dropdown-item:hover { background: var(--color-muted-light); color: var(--color-primary); }

/* 移动端抽屉遮罩 */
.shell-mask { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 39; }
body.shell-mask-on .shell-mask { display: block; }

/* 列表项 / 租户块（玻璃） */
.item { padding: 14px 16px; border-radius: var(--radius); cursor: pointer; margin-bottom: var(--space-2); background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); transition: all var(--transition); }
.item:hover { border-color: var(--color-ring); box-shadow: var(--shadow-card); }
.item.unread { background: rgba(239, 246, 255, .85); border-color: #BFDBFE; }
.tenant-block { border: 1px solid var(--glass-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-3); background: rgba(255, 255, 255, .55); }

/* ---------- 全局 AI 助手（common.js 注入，所有页面右下角） ---------- */
/* FAB：小汤圆头打招呼逐帧动画（精灵图 background-position 步进），透明底无边框，鼠标接近播放一次 */
.ga-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 46;
  width: 60px; height: 60px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background-color: transparent;
  /* 静态 PNG 兜底（tangyuan-head-sm 128px 汤圆头）：JS 检测 webp 支持后才覆盖为打招呼精灵图动画；
     不支持 webp / 精灵图加载失败的移动端浏览器仍显示静态汤圆，保证 AI 助手入口可见 */
  background-image: url('/static/images/tangyuan-head-sm.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .18));
  transition: transform var(--transition), filter var(--transition);
}
.ga-fab:hover { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 10px 18px rgba(37, 99, 235, .3)); }
.ga-fab:active { transform: translateY(-1px) scale(.96); }
/* 面板：Apple 液态玻璃（强模糊 + 饱和 + 分层高光 + 顶部能量线 + 打开动画） */
.ga-panel {
  position: fixed; right: 20px; bottom: 76px; z-index: 46;
  width: 390px; max-width: calc(100vw - 28px); height: 540px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: var(--shadow-pop), 0 24px 60px -24px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
  transform-origin: 100% 100%;
  animation: ga-panel-in .32s cubic-bezier(.16, 1, .3, 1);
}
.ga-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .85), rgba(37, 99, 235, .85), transparent);
}
@keyframes ga-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ga-head {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px;
  padding: 12px 14px 10px; flex-shrink: 0;
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(147, 197, 253, .55), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--hairline);
  cursor: grab; user-select: none;
}
.ga-head:active { cursor: grabbing; }
.ga-head strong {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: .2px; color: var(--color-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ga-head-actions { display: flex; gap: 4px; justify-content: flex-end; }
/* Tab：Apple 分段控件（紧凑轨道 + 滑动胶囊，底不整行拉长） */
.ga-tabs {
  position: relative; display: flex; gap: 2px; width: fit-content;
  padding: 3px; border-radius: 999px;
  background: rgba(15, 23, 42, .05); border: 1px solid rgba(15, 23, 42, .04);
}
.ga-tab-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-bright), var(--color-primary));
  box-shadow: 0 4px 10px -4px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: left .32s cubic-bezier(.16, 1, .3, 1), width .32s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.ga-tab {
  position: relative; z-index: 1; padding: 5px 13px; border: none; border-radius: 999px;
  background: none; color: var(--color-muted); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: color var(--transition);
}
.ga-tab:hover { color: var(--color-foreground); }
.ga-tab.active { color: #fff; font-weight: 600; }
.ga-close {
  width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px; background: rgba(15, 23, 42, .04); color: var(--color-muted); cursor: pointer;
  transition: all var(--transition);
}
.ga-close:hover { background: rgba(15, 23, 42, .08); color: var(--color-foreground); }
.ga-close:active { transform: scale(.94); }
/* 对话区：独立冷蓝渐变底 + 科技点阵 + 漂浮光晕（区别于面板玻璃，气泡浮出立体感） */
.ga-msgs {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background-image:
    radial-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px),
    radial-gradient(90% 70% at 15% 0%, rgba(219, 234, 254, .5), transparent 55%),
    radial-gradient(80% 60% at 95% 100%, rgba(224, 231, 255, .5), transparent 55%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
}
.ga-msgs::before {
  content: ''; position: absolute; top: -70px; right: -50px; width: 260px; height: 260px;
  z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(147, 197, 253, .3), transparent 65%);
  animation: ga-orb-drift 10s ease-in-out infinite alternate;
}
@keyframes ga-orb-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-30px, 26px); }
}
.ga-row { display: flex; align-items: flex-start; gap: 8px; position: relative; z-index: 1; }
.ga-row.user { justify-content: flex-end; }
.ga-row .ga-msg { align-self: auto; max-width: 78%; }
.ga-row.ga-new { animation: ga-msg-in .28s cubic-bezier(.16, 1, .3, 1); }
/* 对话头像：AI=汤圆头（流式时切换翻书精灵图）；用户=本人头像 */
.ga-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .25), inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.ga-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-avatar-fallback, .ga-avatar-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-bright-2), var(--color-primary)); color: #fff; font-size: 15px; font-weight: 600;
}
.ga-msg { position: relative; z-index: 1; padding: 10px 13px; border-radius: 16px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
@keyframes ga-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ga-msg.user {
  background: linear-gradient(180deg, var(--primary-bright), var(--color-primary));
  color: #fff; border-bottom-right-radius: 6px;
  box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ga-msg.ai {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .86));
  color: var(--color-foreground); border-bottom-left-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.ga-msg .ga-cursor { display: inline-block; width: 7px; height: 14px; background: var(--color-primary); margin-left: 2px; vertical-align: -2px; animation: blink 1s infinite; border-radius: 1px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.ga-refs { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 7px; }
.ga-refs-title { font-size: 11px; font-weight: 700; color: var(--color-muted); margin-bottom: 5px; letter-spacing: .3px; }
.ga-ref {
  display: block; max-width: 100%; text-align: left;
  padding: 2px 8px; margin: 1px 0; border: none; border-radius: 7px;
  background: none; font-family: inherit; font-size: 12px; color: var(--color-primary);
  line-height: 1.8; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--transition);
}
.ga-ref:hover { background: rgba(37, 99, 235, .08); text-decoration: underline; }
.ga-pending { border-top: 1px solid var(--hairline); padding: 10px 14px; background: rgba(255, 251, 235, .72); flex-shrink: 0; }
.ga-pending-title { font-size: 12px; font-weight: 700; color: var(--color-warn); margin-bottom: 8px; }
.ga-pending-item { font-size: 12.5px; background: #fff; border: 1px solid var(--color-border); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; line-height: 1.6; }
.ga-pending-item b { color: var(--color-primary); }
.ga-pending-ops { display: flex; gap: 8px; justify-content: flex-end; }
/* 参考资料内联预览弹层（点击不跳页，覆盖在助手之上） */
.ga-pv {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ga-pv-in .2s ease-out;
}
@keyframes ga-pv-in { from { opacity: 0; } to { opacity: 1; } }
.ga-pv-card {
  width: min(760px, 92vw); height: min(82vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--glass-border); border-radius: 18px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: ga-pv-card-in .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes ga-pv-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ga-pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0; border-bottom: 1px solid var(--hairline); }
.ga-pv-head strong { flex: 1; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-pv-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .06); }
.ga-pv-frame { width: 100%; height: 100%; border: none; }
.ga-pv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ga-pv-content { width: 100%; height: 100%; padding: 16px 18px; overflow-y: auto; font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.ga-pv-loading { color: var(--color-muted); font-size: 13px; }
.ga-pv-err { color: var(--color-destructive); font-size: 13px; padding: 16px; }
/* 输入区：胶囊输入框 + 圆形渐变发送按钮 */
.ga-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 12px; border-top: 1px solid var(--hairline); flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55));
}
.ga-input textarea {
  flex: 1; min-height: 40px; max-height: 96px; padding: 10px 14px; border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, .1); background: rgba(255, 255, 255, .85);
  font-family: inherit; font-size: 13px; line-height: 1.5; resize: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ga-input textarea:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 4px var(--focus-ring); }
.ga-send {
  width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--primary-bright), var(--color-primary));
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.ga-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ga-send:active { transform: scale(.95); }
.ga-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* 工作中状态（.ga-streaming 由 common.js 在流式/执行期间加在面板上）：当前（最后一条）AI 气泡流光 + 发送钮涟漪 */
/* 注意：气泡嵌在 .ga-row.ai 内（行=头像+气泡，气泡恒为行内末子）——必须限定「最后一行 AI」再取气泡，否则所有 AI 气泡都触发读条 */
.ga-panel.ga-streaming .ga-row.ai:last-child .ga-msg.ai { position: relative; }
.ga-panel.ga-streaming .ga-row.ai:last-child .ga-msg.ai::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-bright-2) 30%, var(--color-primary) 50%, var(--primary-bright-2) 70%, transparent);
  background-size: 200% 100%;
  animation: ga-loading-bar 1.3s linear infinite;
}
@keyframes ga-loading-bar { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ga-panel.ga-streaming .ga-send:disabled { animation: ga-send-pulse 1.2s ease-in-out infinite; }
@keyframes ga-send-pulse {
  0%, 100% { box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 0 rgba(37, 99, 235, .4); }
  50% { box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 8px rgba(37, 99, 235, 0); }
}
/* 语音输入（麦克风按钮）：点击录音 → 本地 ASR 识别成文字填入输入框（可编辑后再发送） */
.ga-mic {
  width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15, 23, 42, .12); border-radius: 999px; cursor: pointer;
  color: var(--color-muted); background: rgba(255, 255, 255, .75);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.ga-mic:hover { color: var(--color-primary); border-color: var(--color-ring); box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .35); transform: translateY(-1px); }
.ga-mic:active { transform: scale(.95); }
.ga-mic:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* 录音中：红色呼吸脉冲（点击结束并上传识别） */
.ga-mic.recording {
  color: #fff; background: linear-gradient(180deg, #f87171, var(--color-destructive)); border-color: transparent;
  animation: ga-mic-pulse 1.2s ease-in-out infinite;
}
.ga-mic.recording:hover { color: #fff; box-shadow: 0 4px 12px -4px rgba(220, 38, 38, .5); }
@keyframes ga-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .4); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .cards, .grid { grid-template-columns: repeat(2, 1fr); }
  header { padding: 0 var(--space-4); }
}
@media (max-width: 768px) {
  /* 侧边栏变抽屉 */
  #sidebar { transform: translateX(-100%); box-shadow: none; }
  #sidebar.drawer-open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  #sidebar.collapsed { width: 240px; }
  #sidebar.collapsed .shell-brand-text, #sidebar.collapsed .shell-group-label,
  #sidebar.collapsed .shell-item-label, #sidebar.collapsed .shell-user-meta,
  #sidebar.collapsed .shell-arrow, #sidebar.collapsed .shell-item-dot,
  #sidebar.collapsed .shell-submenu { display: block; }
  #sidebar.collapsed .shell-brand { justify-content: flex-start; padding: 0 var(--space-4); }
  #sidebar.collapsed .shell-item { justify-content: flex-start; padding: 9px var(--space-3); }
  #sidebar.collapsed .shell-user { justify-content: flex-start; padding: var(--space-3) var(--space-4); }
  #sidebar.collapsed .shell-collapse { margin: var(--space-2) var(--space-2); justify-content: flex-start; }
  /* 移动端禁用悬浮子菜单，走抽屉内嵌展开 */
  #sidebar .shell-flyout { display: none; }
  .layout-main { margin-left: 0; }
  .topbar-burger { display: inline-flex; }
  /* 移动端顶栏只保留必要操作：隐藏时钟与天气预报（避免挤压/遮挡快捷标签），铃铛/头像保留 */
  .topbar-clock, .topbar-weather { display: none !important; }
  /* 移动端宽表格防挤压：列保持固有宽度（max-content），在 .table-scroll 内横向滑动，避免文字竖排/截断 */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: max-content; max-width: 100%; }
}
@media (max-width: 560px) {
  .cards, .grid { grid-template-columns: 1fr; }
  main { padding: 0 var(--space-3); }
  header { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-3); row-gap: var(--space-2); }
  .nav-link { margin-right: var(--space-2); }
  /* 移动端档案表单单列：2 列网格强制压缩「模式+值」同行控件（如 渠道/客户），值控件被挤成 29px 不可用 */
  .form-grid { grid-template-columns: 1fr; }
  /* 打卡页当日卡片：手机单列，避免「未打卡/待打卡」两列并排挤压换行 */
  .today-cards { grid-template-columns: 1fr; }
}

/* ============ 日期/时间选择器（点击弹出，不支持手动输入） ============ */
.picker-input { cursor: pointer; background-image: none; }
.picker-input:read-only { opacity: 1; }
.picker-pop {
  position: fixed; z-index: 95; min-width: 220px;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: var(--space-3); color: var(--color-foreground);
}
.picker-tp-cols { display: flex; gap: var(--space-2); justify-content: center; }
.picker-tp-col { position: relative; width: 64px; height: 150px; overflow: hidden; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); }
.picker-tp-scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.picker-tp-scroll::-webkit-scrollbar { display: none; }
.picker-tp-item { height: 30px; line-height: 30px; text-align: center; font-size: 14px; color: var(--color-muted); scroll-snap-align: center; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .15s, font-size .15s; }
.picker-tp-item.sel { color: var(--color-foreground); font-weight: 700; font-size: 17px; }
.picker-tp-cursor { position: absolute; top: 60px; left: 4px; right: 4px; height: 30px; border-radius: 6px; background: rgba(37, 99, 235, .1); pointer-events: none; }
.picker-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.picker-dp-title { font-size: 14px; font-weight: 700; }
.picker-btn-nav { width: 28px; height: 28px; border: none; border-radius: 6px; background: rgba(255, 255, 255, .7); color: var(--color-primary); cursor: pointer; font-size: 15px; }
.picker-btn-nav:hover { background: var(--color-primary-light); }
.picker-dp-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; justify-content: center; }
.picker-dp-wd { font-size: 11px; color: var(--color-muted); text-align: center; line-height: 26px; font-weight: 600; }
.picker-dp-day { height: 30px; line-height: 30px; text-align: center; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--color-foreground); }
.picker-dp-day:hover { background: var(--color-primary-light); color: var(--color-primary); }
.picker-dp-day.sel { background: var(--color-primary); color: #fff; font-weight: 700; }
.picker-dp-day.today:not(.sel) { outline: 1px solid var(--color-primary); outline-offset: -1px; }
.picker-actions { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.picker-btn-ok { border: none; border-radius: 6px; padding: 6px 18px; background: linear-gradient(180deg, var(--primary-bright), var(--color-primary)); color: #fff; font-size: 13px; cursor: pointer; }
.picker-btn-ok:hover { filter: brightness(1.06); }
.picker-btn-ghost { border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 12px; background: rgba(255, 255, 255, .7); color: var(--color-muted); font-size: 13px; cursor: pointer; }
.picker-btn-ghost:hover { color: var(--color-primary); background: var(--color-primary-light); }