/* ============================================================================
   ui-redesign.css  ·  v3.74 全站 UI 重构（Clean Pro 设计系统）
   设计原则：
   1. 唯一「普通流畅」模式：不透明干净表面，彻底取消毛玻璃 / backdrop 模糊 /
      光球 / 鼠标光影 / 镜面折射 / 壁纸，全部组件统一为同一套设计令牌。
   2. 中性 slate 色板承载结构与文字；强调色只取用户「主题配色」--brand，
      主按钮 / 导航激活 / 选中 / 链接 / 焦点环全部跟随主题色（UI 配色，非背景配色）。
   3. 只统一视觉（颜色 / 描边 / 阴影 / 圆角 / 控件观感），不改任何布局尺寸与业务 DOM。
   4. 区域管理（.zone-* / .zb-* / .zp-* / #zoneCanvas / .zone-viewport / .zoom-ctl）
      整体豁免，本文件不为其编写规则，保持区域网格原样。
   挂载前提：app.js 与 index.html 首屏脚本已把 body 固定为 data-perf="1" data-glass="off"。
============================================================================ */

/* ----------------------------- 1. 设计令牌 ------------------------------ */
body[data-perf="1"]{
  /* 中性结构色（日间） */
  --bg-page:#f3f5f9;
  --surface:#ffffff;
  --surface-2:#f6f8fb;
  --surface-3:#eef1f6;
  --text:#1d2433;
  --text-2:#4c566b;
  --text-3:#8b94a7;
  --line:#e5e9f1;
  --line-2:#d6dbe6;
  --hover:#f1f4fa;
  --active:#eaf0fb;
  --input-border:#d6dbe6;
  /* 强调色：跟随用户主题配色，仅在未设置时回退到专业蓝 */
  --accent:var(--brand,#2563eb);
  --accent-2:var(--brand-2,#1d4ed8);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--surface));
  --accent-soft-2:color-mix(in srgb,var(--accent) 18%,var(--surface));
  --accent-line:color-mix(in srgb,var(--accent) 34%,transparent);
  --on-accent:#ffffff;
  /* 统一阴影 / 圆角 */
  --sh-sm:0 1px 2px rgba(20,30,55,.05);
  --sh:0 1px 3px rgba(20,30,55,.06),0 2px 10px rgba(20,30,55,.05);
  --sh-lg:0 16px 44px rgba(17,24,39,.20),0 4px 12px rgba(17,24,39,.10);
  --r-card:14px;
  --r-ctl:10px;
  --r-sm:8px;
  color-scheme:light;
}
body[data-perf="1"][data-theme="dark"]{
  --bg-page:#0d1017;
  --surface:#171b25;
  --surface-2:#1d2230;
  --surface-3:#252b3a;
  --text:#e9edf5;
  --text-2:#b4bccf;
  --text-3:#7f889c;
  --line:#29303f;
  --line-2:#353e50;
  --hover:#222838;
  --active:#243049;
  --input-border:#353e50;
  --accent-soft:color-mix(in srgb,var(--accent) 26%,#171b25);
  --accent-soft-2:color-mix(in srgb,var(--accent) 34%,#171b25);
  --accent-line:color-mix(in srgb,var(--accent) 46%,transparent);
  --on-accent:#ffffff;
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh:0 1px 3px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
  --sh-lg:0 18px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4);
  color-scheme:dark;
}

/* --------------------- 2. 全局去玻璃 / 去模糊 / 去光球 -------------------- */
/* 一刀切：普通流畅模式下任何元素都不允许背景模糊（遮罩的半透明黑属正常，保留） */
body[data-perf="1"] *,
body[data-perf="1"] *::before,
body[data-perf="1"] *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* 光斑背景、鼠标光影、玻璃镜面高光、液态折射一律隐藏 */
body[data-perf="1"] .bg-orbs,
body[data-perf="1"] .orb,
body[data-perf="1"] .o1,body[data-perf="1"] .o2,body[data-perf="1"] .o3,
body[data-perf="1"] .cursor-light,
body[data-perf="1"] .lg-spec{ display:none !important; }

html,body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body[data-perf="1"]{
  background:var(--bg-page) !important;
  background-image:none !important;
  color:var(--text);
}
body[data-perf="1"]::before,body[data-perf="1"]::after{ display:none !important; content:none !important; }
::selection{ background:var(--accent-soft-2); }
/* 统一滚动条 */
body[data-perf="1"] *{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
body[data-perf="1"] *::-webkit-scrollbar{ width:9px; height:9px; }
body[data-perf="1"] *::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
body[data-perf="1"] *::-webkit-scrollbar-thumb:hover{ background:var(--text-3); background-clip:content-box; }
body[data-perf="1"] *::-webkit-scrollbar-track{ background:transparent; }

/* ----------------------------- 3. 应用骨架 ------------------------------ */
body[data-perf="1"] .app{ background:var(--bg-page); }
body[data-perf="1"] .main{ background:transparent; }
body[data-perf="1"] .content,
body[data-perf="1"] #content{ background:transparent; }

/* 侧栏：不透明实心表面 */
body[data-perf="1"] .sidebar{
  background:var(--surface) !important;
  border-right:1px solid var(--line);
  box-shadow:none !important;
}
body[data-perf="1"] .brand-logo{
  background:var(--accent) !important;
  color:var(--on-accent) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent);
}
body[data-perf="1"] .brand-txt b{ color:var(--text); }
body[data-perf="1"] .brand-txt small{ color:var(--text-3); }
body[data-perf="1"] .nav-item{
  color:var(--text-2) !important;
  border-radius:var(--r-ctl);
  margin:2px 10px;
  transition:background .14s,color .14s;
}
body[data-perf="1"] .nav-item:hover{ background:var(--hover); color:var(--text) !important; }
body[data-perf="1"] .nav-item.active{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
body[data-perf="1"] .nav-item.active .ni-ico{ color:var(--accent); opacity:1; }
body[data-perf="1"] .nav-badge{
  background:var(--accent); color:var(--on-accent);
  border:none; font-weight:600;
}
body[data-perf="1"] .side-foot .theme-toggle{
  background:var(--surface-2) !important;
  border:1px solid var(--line);
  color:var(--text-2) !important;
  border-radius:var(--r-ctl);
}
body[data-perf="1"] .side-foot .theme-toggle:hover{ background:var(--hover); color:var(--text) !important; }

/* 顶栏：不透明 + 底边线 */
body[data-perf="1"] .topbar{
  background:var(--surface) !important;
  border-bottom:1px solid var(--line);
  box-shadow:none !important;
}
body[data-perf="1"] #pageTitle{ color:var(--text); font-weight:700; }
body[data-perf="1"] .glass-btn{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text-2) !important;
  box-shadow:none !important;
  border-radius:var(--r-ctl);
  transition:background .14s,color .14s,border-color .14s;
}
body[data-perf="1"] .glass-btn:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
  color:var(--accent) !important;
}
body[data-perf="1"] .user-menu{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh-lg) !important;
  border-radius:var(--r-card);
}
body[data-perf="1"] .side-mask{ background:rgba(15,20,35,.42); }

/* --------------------------- 4. 卡片 / 玻璃面统一 ------------------------ */
/* 关键：所有 .glass / .card 在普通模式下统一为同一种不透明卡片观感 */
body[data-perf="1"] .glass,
body[data-perf="1"] .card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh) !important;
  border-radius:var(--r-card);
}
body[data-perf="1"] .card{ background:var(--surface) !important; }
body[data-perf="1"] .set-card,
body[data-perf="1"] .stat-card,
body[data-perf="1"] .task-item,
body[data-perf="1"] .member-card,
body[data-perf="1"] .meeting-card{ background:var(--surface) !important; }
body[data-perf="1"] .set-card-title,
body[data-perf="1"] .card-title,
body[data-perf="1"] .panel-title{ color:var(--text); font-weight:700; }
body[data-perf="1"] .set-sub,
body[data-perf="1"] .set-hint{ color:var(--text-3); }
body[data-perf="1"] .set-row{ border-color:var(--line); }
/* 可悬浮卡片的悬停反馈 */
body[data-perf="1"] .task-item:hover,
body[data-perf="1"] .member-card:hover,
body[data-perf="1"] .meeting-card:hover,
body[data-perf="1"] .stat-card:hover{ border-color:var(--line-2) !important; box-shadow:var(--sh-lg) !important; }

/* 分隔线 / 通用弱块 */
body[data-perf="1"] hr,body[data-perf="1"] .divider{ border-color:var(--line); }
body[data-perf="1"] .mut,body[data-perf="1"] .muted{ color:var(--text-3) !important; }

/* ------------------------------- 5. 按钮 -------------------------------- */
body[data-perf="1"] .btn{
  border-radius:var(--r-ctl);
  font-weight:600;
  transition:transform .06s,background .14s,border-color .14s,box-shadow .14s,color .14s;
  border:1px solid var(--line-2);
}
body[data-perf="1"] .btn:active{ transform:translateY(1px); }
body[data-perf="1"] .btn-primary{
  background:var(--accent) !important;
  background-image:none !important;
  color:var(--on-accent) !important;
  border:1px solid var(--accent) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent) !important;
}
body[data-perf="1"] .btn-primary:hover{ background:var(--accent-2) !important; border-color:var(--accent-2) !important; }
body[data-perf="1"] .btn-ghost{
  background:var(--surface) !important;
  border:1px solid var(--line-2) !important;
  color:var(--text) !important;
}
body[data-perf="1"] .btn-ghost:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-line) !important;
  color:var(--accent) !important;
}
body[data-perf="1"] .btn-danger{
  background:#fff !important; color:#dc2626 !important; border:1px solid #f3c0c0 !important;
}
body[data-perf="1"] .btn-danger:hover{ background:#fef2f2 !important; border-color:#e7a3a3 !important; }
body[data-perf="1"][data-theme="dark"] .btn-danger{ background:transparent !important; border-color:#5b2b2b !important; }
body[data-perf="1"][data-theme="dark"] .btn-danger:hover{ background:#2a1717 !important; }
body[data-perf="1"] .btn-sm{ border-radius:var(--r-sm); }
body[data-perf="1"] .icon-btn{
  background:transparent; border:1px solid transparent; color:var(--text-2);
  border-radius:var(--r-sm); transition:.14s;
}
body[data-perf="1"] .icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }
/* 分段控件 / 标签页 */
body[data-perf="1"] .seg,body[data-perf="1"] .perf-seg{ gap:4px; }
body[data-perf="1"] .seg button,body[data-perf="1"] .perf-seg button{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); border-radius:var(--r-sm);
}
body[data-perf="1"] .seg button.on,body[data-perf="1"] .perf-seg button.on,
body[data-perf="1"] .tab.active{
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border-color:var(--accent-line) !important; font-weight:600;
}
body[data-perf="1"] .tab{ color:var(--text-2); border-bottom:2px solid transparent; }
body[data-perf="1"] .tab:hover{ color:var(--accent); }

/* ----------------------------- 6. 表单控件 ------------------------------ */
body[data-perf="1"] input,
body[data-perf="1"] select,
body[data-perf="1"] textarea{
  background:var(--surface) !important;
  border:1px solid var(--input-border) !important;
  color:var(--text) !important;
  border-radius:var(--r-ctl);
  box-shadow:none !important;
}
body[data-perf="1"] input::placeholder,body[data-perf="1"] textarea::placeholder{ color:var(--text-3); }
body[data-perf="1"] input:disabled,body[data-perf="1"] select:disabled,body[data-perf="1"] textarea:disabled{
  background:var(--surface-2) !important; color:var(--text-3) !important;
}
body[data-perf="1"] input:focus,
body[data-perf="1"] select:focus,
body[data-perf="1"] textarea:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
body[data-perf="1"] select option{ background:var(--surface); color:var(--text); }
body[data-perf="1"] .fld span{ color:var(--text-2); font-weight:600; }
body[data-perf="1"] .search{
  background:var(--surface-2) !important; border:1px solid var(--line) !important; border-radius:var(--r-ctl);
}
body[data-perf="1"] .search:focus-within{ border-color:var(--accent) !important; background:var(--surface) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
body[data-perf="1"] input[type=checkbox],body[data-perf="1"] input[type=radio]{ accent-color:var(--accent); }

/* ------------------------------- 7. 表格 ------------------------------- */
body[data-perf="1"] .table-wrap{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card);
  box-shadow:var(--sh);
}
body[data-perf="1"] table{ border-color:var(--line); }
body[data-perf="1"] table th{
  background:var(--surface-2) !important;
  color:var(--text-2) !important;
  font-weight:600;
  border-bottom:1px solid var(--line) !important;
}
body[data-perf="1"] table td{ border-bottom:1px solid var(--line); color:var(--text); }
body[data-perf="1"] table tbody tr:last-child td{ border-bottom:none; }
body[data-perf="1"] table tbody tr{ transition:background .1s; }
body[data-perf="1"] table tbody tr:hover td{ background:var(--hover) !important; }
body[data-perf="1"] table tfoot td,body[data-perf="1"] table tfoot th{
  background:var(--surface-2) !important; color:var(--text); border-top:2px solid var(--line-2);
}
body[data-perf="1"] .ta-r,[data-th]{ }
body[data-perf="1"] b,body[data-perf="1"] strong{ color:inherit; }
body[data-perf="1"] table b{ color:var(--text); font-variant-numeric:tabular-nums; }

/* ------------------------------- 8. 弹窗 ------------------------------- */
body[data-perf="1"] .modal-mask,body[data-perf="1"] .pop-mask{ background:rgba(13,17,26,.52); }
body[data-perf="1"] .modal,body[data-perf="1"] .pop-sheet{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh-lg) !important;
  border-radius:18px;
}
body[data-perf="1"] .modal-head,body[data-perf="1"] .pop-head{
  border-bottom:1px solid var(--line);
  background:transparent !important;
}
body[data-perf="1"] .modal-head h3,body[data-perf="1"] .pop-head h3{ color:var(--text); font-weight:700; }
body[data-perf="1"] .modal-x,body[data-perf="1"] .pop-x{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); border-radius:9px;
}
body[data-perf="1"] .modal-x:hover,body[data-perf="1"] .pop-x:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
body[data-perf="1"] .modal-foot,body[data-perf="1"] .pop-foot{ border-top:1px solid var(--line); background:transparent !important; }
/* 弹窗滚动时头部轻投影（lgV332 的 .scrolled，纯实色阴影，无模糊） */
body[data-perf="1"] .modal-head.scrolled,body[data-perf="1"] .pop-head.scrolled{ box-shadow:0 4px 12px rgba(20,30,55,.06); }

/* ------------------------- 9. 标签 / 徽章 / 状态色 ----------------------- */
body[data-perf="1"] .tags .tag,body[data-perf="1"] .tag{
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--line);
  border-radius:999px;
}
body[data-perf="1"] .badge{ border-radius:999px; font-weight:600; }
body[data-perf="1"] .mini-chip{
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border:1px solid var(--accent-line) !important; border-radius:8px;
}
body[data-perf="1"] a.link,body[data-perf="1"] .text-brand{ color:var(--accent) !important; }
/* 语义状态色（保持克制、统一明度） */
body[data-perf="1"] .text-ok,body[data-perf="1"] .ok{ color:#16a34a; }
body[data-perf="1"] .text-err,body[data-perf="1"] .err,body[data-perf="1"] .text-danger{ color:#dc2626; }
body[data-perf="1"] .text-warn,body[data-perf="1"] .warn{ color:#d97706; }
body[data-perf="1"] .tag-ok,body[data-perf="1"] .badge-ok{ background:#e9f8ef; color:#15803d; border-color:#bfe6cd; }
body[data-perf="1"] .tag-err,body[data-perf="1"] .badge-err{ background:#fdeeee; color:#b91c1c; border-color:#f4c9c9; }
body[data-perf="1"] .tag-warn,body[data-perf="1"] .badge-warn{ background:#fdf3e3; color:#b45309; border-color:#f3ddb4; }
body[data-perf="1"][data-theme="dark"] .tag-ok{ background:#122a1c; color:#4ade80; border-color:#1f4530; }
body[data-perf="1"][data-theme="dark"] .tag-err{ background:#2c1517; color:#f87171; border-color:#4a2326; }
body[data-perf="1"][data-theme="dark"] .tag-warn{ background:#2c2113; color:#fbbf24; border-color:#4a3a1f; }

/* ------------------------------ 10. 登录页 ------------------------------ */
body[data-perf="1"] .login-view{ background:var(--bg-page) !important; background-image:none !important; }
body[data-perf="1"] .login-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--sh-lg) !important;
  border-radius:20px;
}
body[data-perf="1"] .login-card h2{ color:var(--text); }
body[data-perf="1"] .login-sub{ color:var(--text-3); }
body[data-perf="1"] .login-err{ color:#dc2626; }

/* --------------------------- 11. 聊天 / 消息 ---------------------------- */
body[data-perf="1"] .chat-wrap,body[data-perf="1"] .chat-list,body[data-perf="1"] .chat-main,
body[data-perf="1"] .chat-room{ background:transparent; }
body[data-perf="1"] .chat-item{ border-radius:var(--r-ctl); }
body[data-perf="1"] .chat-item:hover{ background:var(--hover); }
body[data-perf="1"] .chat-item.active{ background:var(--accent-soft); }
body[data-perf="1"] .bubble,body[data-perf="1"] .msg-bubble,body[data-perf="1"] .chat-bubble{
  background:var(--surface-2) !important; border:1px solid var(--line); color:var(--text);
  border-radius:14px; box-shadow:none !important;
}
body[data-perf="1"] .bubble.mine,body[data-perf="1"] .msg-bubble.mine,body[data-perf="1"] .chat-bubble.mine,
body[data-perf="1"] .msg-mine .bubble,body[data-perf="1"] .msg-mine .msg-bubble{
  background:var(--accent) !important; border-color:var(--accent); color:var(--on-accent) !important;
}
body[data-perf="1"] .chat-input,body[data-perf="1"] .msg-input{
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:14px;
}
/* 头像：无头像时给主题色软底，杜绝方形白底 */
body[data-perf="1"] .avatar,body[data-perf="1"] .msg-avatar,body[data-perf="1"] .chat-avatar,body[data-perf="1"] .ni-avatar{
  background:var(--accent-soft-2); color:var(--accent);
}

/* ------------------------------ 12. 杂项 ------------------------------- */
body[data-perf="1"] .toast{
  background:var(--text) !important; color:var(--surface) !important;
  border:none !important; box-shadow:var(--sh-lg) !important; border-radius:12px;
}
body[data-perf="1"] .global-loading .gl-box{ background:var(--surface) !important; }
body[data-perf="1"] .pager button,body[data-perf="1"] .page-btn{
  background:var(--surface); border:1px solid var(--line-2); color:var(--text-2); border-radius:var(--r-sm);
}
body[data-perf="1"] .pager button.on,body[data-perf="1"] .page-btn.active{
  background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important;
}
body[data-perf="1"] .empty,body[data-perf="1"] .empty-state{ color:var(--text-3); }
body[data-perf="1"] .ann-item{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-ctl); }
body[data-perf="1"] .progress-track,body[data-perf="1"] .bar-track{ background:var(--surface-3); border-radius:999px; }
body[data-perf="1"] .progress-fill,body[data-perf="1"] .bar-fill{ background:var(--accent); border-radius:999px; }

/* --------------------------- 13. 移动端适配 ---------------------------- */
@media (max-width:900px){
  body[data-perf="1"] .sidebar{
    background:var(--surface) !important;
    box-shadow:var(--sh-lg) !important;
  }
  body[data-perf="1"] .modal,body[data-perf="1"] .pop-sheet{ border-radius:16px; }
  body[data-perf="1"] .btn{ min-height:38px; }
  body[data-perf="1"] input,body[data-perf="1"] select,body[data-perf="1"] textarea{ min-height:38px; }
  body[data-perf="1"] .nav-item{ min-height:44px; } /* 触控目标足够大 */
}
/* 尊重减少动态偏好 */
@media (prefers-reduced-motion:reduce){
  body[data-perf="1"] *{ transition:none !important; animation-duration:.001ms !important; }
}

/* --------------------------- 14. 设置页一级标签 ------------------------- */
body[data-perf="1"] .set-tabs{
  background:var(--surface-2) !important; border:1px solid var(--line) !important;
  border-radius:12px; box-shadow:none !important; padding:4px; gap:4px; overflow-x:auto;
}
body[data-perf="1"] .set-tab{
  background:transparent !important; border:1px solid transparent !important;
  color:var(--text-2) !important; border-radius:9px; font-weight:600; white-space:nowrap;
  transition:background .14s,color .14s;
}
body[data-perf="1"] .set-tab:hover{ background:var(--hover) !important; color:var(--text) !important; }
body[data-perf="1"] .set-tab.on{
  background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important;
  box-shadow:0 3px 9px color-mix(in srgb,var(--accent) 30%,transparent);
}