/* ============================================================
  Janelon 见龙智能科技 · 内部管理系统
  品牌视觉：深海军蓝 × 古铜金 · 高级简约科技感
  主题：浅色（白底 · 深藏蓝侧栏 · 金色点缀）
  扎根 · 破界 · 共赴 · 极致
  ============================================================ */

:root {
  --navy-900: #0a1428;   /* 瞳心墨色 */
  --navy-800: #0f1e3d;   /* 主色 深海军蓝 */
  --navy-700: #16294d;   /* 侧栏渐变 */
  --navy-600: #1f3a6e;   /* hover 深 */
  --navy-100: #e9eef7;   /* 浅蓝底 */
  --gold-400: #e9d9b0;   /* 浅金高光 */
  --gold-500: #c9a961;   /* 主金 */
  --gold-600: #b8923f;   /* 深金 */
  --bg: #eef2f8;
  --card: #ffffff;
  --text: #182440;
  --text-muted: #57647e;
  --border: #e1e7f1;
  /* 表单控件基础色：弹窗 / 工具栏 / 三端媒体查询统一读取同一变量，暗色模式只需覆盖变量 */
  --field-bg: #ffffff;
  --field-border: #dfe5f0;
  --field-label: #4a5a78;
  --field-placeholder: #9aa8c4;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5a78' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --primary: var(--navy-800);
  --primary-hover: var(--navy-600);
  --primary-50: #edf2fb;
  --success: #2f9e77;
  --warning: #d08a2a;
  --danger: #d64545;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(31, 58, 110, .06);
  --shadow: 0 8px 24px rgba(31, 58, 110, .1);
  --shadow-lg: 0 20px 50px rgba(31, 58, 110, .16);
  --gantt-day: 28px;
  --gantt-left: 260px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.4; }
p { margin: 0; }

/* 禁止 iOS Safari / 微信内核的文本自动放大，避免手机端页面初始呈现"放大"状态 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--bg);
}
html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(201, 169, 97, .08), transparent 62%),
    radial-gradient(820px 620px at -12% 112%, rgba(31, 58, 110, .04), transparent 72%),
    linear-gradient(180deg, #f6f8fc 0%, #edf1f8 100%);
  background-attachment: fixed;
  /* 根元素背景兜底：Safari 橡皮筋回弹 / 内容不足一屏时漏出的区域显示主题背景色，避免露出浏览器默认白底
     （必须写在 background shorthand 之后，否则会被 shorthand 重置为 transparent） */
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(22, 41, 77, .18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(22, 41, 77, .3); }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 通用组件 ================= */
.hidden { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  transition: all .18s;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(.98); }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .45s ease-out forwards; pointer-events: none; z-index: 1; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-icon svg { width: 18px; height: 18px; margin: 0; }
.btn-primary {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 30, 61, .22);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); box-shadow: 0 6px 16px rgba(15, 30, 61, .28); transform: translateY(-1px); }
.btn-gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; box-shadow: 0 4px 12px rgba(184, 146, 63, .28); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn-outline { background: #fff; border-color: #d8deea; color: var(--navy-700); box-shadow: 0 1px 2px rgba(31, 58, 110, .05); }
.btn-outline:hover { border-color: var(--gold-500); color: var(--gold-600); box-shadow: 0 2px 10px rgba(201, 169, 97, .2); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--primary-50); color: var(--navy-700); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { filter: brightness(1.08); }
.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn-icon { padding: 7px; width: 34px; height: 34px; }

.input, .select, .textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--field-bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* 下拉统一：隐藏原生箭头，改用 CSS 箭头，避免原生箭头 + 背景箭头叠加成双箭头 */
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 6px;
}
.input::placeholder, .textarea::placeholder { color: var(--field-placeholder); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .18);
}
.textarea { resize: vertical; min-height: 80px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--field-label); }
.field label .req { color: var(--danger); }
/* 任务管理弹窗：添加任务表单区（与下方任务列表用细线分隔，保持弹窗内背景统一干净） */
.task-add { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 14px; margin-bottom: 4px; border-bottom: 1px solid #e5eaf3; }
#tk-list { background: #fff; }
/* 任务列表行：纯白平铺，仅用行间细分隔线提升可读性（不做卡片勾边，避免灰色） */
#tk-list .card { background: #fff !important; border: 0 !important; border-bottom: 1px solid #e5eaf3 !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#tk-list .card:last-child { border-bottom: 0 !important; }
#tk-list .card:hover { background: #f1f5f9 !important; }

.card {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 .5px rgba(31, 58, 110, .05), 0 12px 32px -14px rgba(31, 58, 110, .13);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 .5px rgba(31, 58, 110, .05), 0 20px 44px -18px rgba(31, 58, 110, .2); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
}
.badge-ghost { background: var(--primary-50); color: var(--text-muted); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 2px 6px rgba(15, 30, 61, .14);
}

.progress { width: 100%; height: 6px; background: #e9edf5; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; border-radius: 999px; transition: width .4s ease; }
/* 进度 100% 庆祝动效：金绿渐变 + 辉光 + 🎉 弹出 + 名称变色 */
.cell-prog { position: relative; }
.cell-prog.complete .progress { overflow: visible; }
.cell-prog.complete .progress > div {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, .55);
}
.cell-prog.complete .pct { color: #059669; }
.table-card tr:has(.cell-prog.complete) .cell-name .nm,
.table-card tr:has(.cell-prog.complete) .pname { color: #059669; }

/* ================= Toast ================= */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  min-width: 260px; max-width: 380px;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .7);
  border-left: 4px solid var(--navy-800);
  font-size: 14px;
  color: var(--text);
  animation: slideIn .25s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.fade { opacity: 0; transform: translateX(24px); transition: all .3s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* 深色模式：右上角提示弹窗（登录成功 / 失败等）跟随深色背景 */
html[data-theme="dark"] .toast {
  background: rgba(13, 20, 36, .78);
  border-color: rgba(255, 255, 255, .1);
  color: var(--text);
}
/* 深色下保留 success / error / warning 的左侧类型色条（用更亮一档的颜色，与暗底对比清晰） */
html[data-theme="dark"] .toast.success { border-left-color: #34d399; }
html[data-theme="dark"] .toast.error { border-left-color: #f87171; }
html[data-theme="dark"] .toast.warning { border-left-color: #fbbf24; }
html[data-theme="dark"] .toast.info { border-left-color: #60a5fa; }

/* ================= Modal ================= */
.modal-mask {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 30, 60, .12);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: opacity .18s ease;
}
.modal {
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 16px;
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 28px 64px -18px rgba(15, 30, 60, .3);
  animation: modalIn .22s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #eef1f7; }
.modal-header h3 { font-size: 17px; font-weight: 700; color: var(--navy-800); letter-spacing: .01em; }
.modal-close { background: none; border: none; font-size: 22px; color: var(--text-muted); line-height: 1; padding: 4px; transition: color .15s; }
.modal-close:hover { color: var(--text); }
.modal-body .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* 弹窗内直接子字段统一间距：field 和 grid（字段组）之间都固定 14px，避免混排时忽大忽小 */
.modal-body > .field,
.modal-body > .grid { margin-top: 14px; }
.modal-body > .field:first-child,
.modal-body > .grid:first-child { margin-top: 0; }
.modal-body p { line-height: 1.6; color: var(--text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
/* 弹窗表单控件：三端统一 38px 紧凑高度（桌面 / iPad / 手机一致） */
.modal-body .field .input,
.modal-body .field .select { height: 38px; line-height: 38px; padding: 0 12px; }
/* 弹窗下拉框：三端统一自定义箭头，去掉浏览器原生外观差异 */
.modal-body .field .select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

/* ================= 登录页（浅色玻璃） ================= */
.login-wrap {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 55%, #050a18 100%);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
/* 背景模糊光斑：复刻 logo 配色（藏蓝 + 金） */
.login-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.login-bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.login-bg-blob-1 { /* 中央金 */
  width: 560px; height: 560px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 169, 97, .55), transparent 65%);
  opacity: .9;
}
.login-bg-blob-2 { /* 左上深蓝 */
  width: 680px; height: 680px;
  top: -200px; left: -240px;
  background: radial-gradient(circle, rgba(31, 58, 110, .85), transparent 65%);
}
.login-bg-blob-3 { /* 右下金 */
  width: 560px; height: 560px;
  bottom: -200px; right: -180px;
  background: radial-gradient(circle, rgba(201, 169, 97, .42), transparent 65%);
}
/* 公司 logo 作为中央超大模糊元素（颜色来源） */
.login-wrap::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: url('./logo.png') center/contain no-repeat;
  filter: blur(36px) saturate(1.05); opacity: .16;
}
/* 整体柔光覆盖，避免对比过强 */
.login-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(5, 10, 24, .35) 100%);
}

.login-main {
  position: relative; z-index: 1;
  width: 100%; padding: 32px 20px;
  display: flex; align-items: center; justify-content: center;
}

/* 白雾透登录卡片（浅色主题默认，与深蓝背景形成柔和对比） */
.login-card {
  width: 100%; max-width: 440px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .68) 0%, rgba(242, 247, 253, .5) 100%);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 30px 80px -20px rgba(2, 6, 18, .45),
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 0 60px rgba(201, 169, 97, .12) inset;
  border-radius: 22px;
  padding: 34px 36px 30px;
}
.login-card .login-brand {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(22, 41, 77, .1);
}
.login-card .login-brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(201, 169, 97, .4)); }
.login-card .login-brand .name { font-size: 17px; font-weight: 700; color: #0c1a36; letter-spacing: .02em; line-height: 1.3; }
.login-card .login-brand .sub { font-size: 10.5px; color: #4c5c80; margin-top: 3px; letter-spacing: .1em; }

.login-card h2 { font-size: 22px; font-weight: 700; color: #0c1a36; margin-bottom: 4px; text-align: center; letter-spacing: .02em; }
.login-card > p { color: #42547a; margin-bottom: 24px; font-size: 13px; text-align: center; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .btn { height: 44px; font-size: 15px; margin-top: 6px; }
/* 白雾透卡片内的表单控件 */
.login-card .field label { color: #3a4a6e; }
.login-card .input {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(216, 223, 236, .75);
  color: #0c1a36;
  box-shadow: 0 1px 2px rgba(31, 58, 110, .04) inset;
}
.login-card .input::placeholder { color: #64749a; }
.login-card .input:focus { border-color: var(--gold-500); background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 3px rgba(201, 169, 97, .2); }
.login-card .btn-primary {
  background: linear-gradient(135deg, var(--gold-500) 0%, #b89240 100%);
  color: #fff; border: none;
  box-shadow: 0 8px 20px -6px rgba(184, 146, 63, .5);
}
.login-card .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 24px -6px rgba(184, 146, 63, .55); }

/* 深色模式：登录卡片切换为深色玻璃（跟随网站系统设置） */
html[data-theme="dark"] .login-wrap { background: linear-gradient(135deg, #0a1630 0%, #060d1f 55%, #03070f 100%); }
html[data-theme="dark"] .login-card {
  background: linear-gradient(160deg, rgba(12, 20, 38, .78) 0%, rgba(7, 13, 27, .62) 100%);
  border-color: rgba(148, 172, 220, .16);
  box-shadow:
    0 30px 80px -20px rgba(2, 6, 18, .6),
    0 1px 0 rgba(148, 172, 220, .1) inset,
    0 0 60px rgba(201, 169, 97, .08) inset;
}
html[data-theme="dark"] .login-card .login-brand { border-bottom-color: rgba(148, 172, 220, .12); }
html[data-theme="dark"] .login-card .login-brand .name,
html[data-theme="dark"] .login-card h2 { color: #eaf0fb; }
html[data-theme="dark"] .login-card .login-brand .sub { color: #8fa3c9; }
html[data-theme="dark"] .login-card > p { color: #9fb0d0; }
html[data-theme="dark"] .login-card .field label { color: #c4d2ea; }
html[data-theme="dark"] .login-card .input {
  background: rgba(10, 18, 34, .55);
  border-color: rgba(148, 172, 220, .2);
  color: #eaf0fb;
  box-shadow: 0 1px 2px rgba(2, 6, 18, .35) inset;
}
html[data-theme="dark"] .login-card .input::placeholder { color: #6f82a8; }
html[data-theme="dark"] .login-card .input:focus {
  border-color: var(--gold-500);
  background: rgba(10, 18, 34, .75);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .18);
}



/* ================= 布局 ================= */
.layout { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar {
  width: 236px;
  background: linear-gradient(180deg, #122a52 0%, #0a1a38 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
  box-shadow: 6px 0 24px -12px rgba(10, 20, 40, .35);
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(201, 169, 97, .4)); }
.sidebar-brand .bn { display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .06em; line-height: 1.4; }
.sidebar-brand .bs { font-size: 11px; opacity: .55; margin-top: 5px; letter-spacing: .08em; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .5); padding: 14px 10px 8px; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10.5px 13px; border-radius: 10px; margin-bottom: 3px;
  color: rgba(255, 255, 255, .86); text-decoration: none; font-size: 14px; line-height: 1.4;
  transition: background .18s ease, padding-left .2s cubic-bezier(.22, .61, .36, 1), color .15s; border: none; background: none; width: 100%; text-align: left; position: relative;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; padding-left: 16px; }
.nav-item .ico { transition: transform .22s cubic-bezier(.25, .8, .35, 1); }
.nav-item:hover .ico { transform: translateX(2px) scale(1.06); }
.nav-item.active .ico { animation: iconPop .4s cubic-bezier(.25, .8, .35, 1); }
@keyframes iconPop { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 100% { transform: scale(1); } }
.nav-item:active { transform: scale(.98); }
.nav-item.active { background: linear-gradient(90deg, rgba(201, 169, 97, .24), rgba(201, 169, 97, .06)); color: #fff; font-weight: 600; }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.nav-item .ico { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.nav-item .ico svg { width: 18px; height: 18px; }
.nav-item.active .ico svg { stroke: var(--gold-400); }
.nav-badge { margin-left: auto; font-size: 10px; background: rgba(255, 255, 255, .14); padding: 2px 7px; border-radius: 999px; color: rgba(255,255,255,.65); }
.sidebar-user { padding: 14px; border-top: 1px solid rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s; }
.sidebar-user:hover { background: rgba(255, 255, 255, .07); }
.sidebar-user .urow { display: flex; align-items: center; gap: 10px; }
.sidebar-user .uname { font-size: 14px; font-weight: 600; color: #fff; }
.sidebar-user .utitle { font-size: 11.5px; opacity: .75; margin-top: 1px; }
.sidebar-user .urow .avatar { width: 38px; height: 38px; font-size: 15px; }

.main { flex: 1; margin-left: 236px; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
.topbar {
  height: 62px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-bottom: 1px solid rgba(201, 169, 97, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 28px -18px rgba(31, 58, 110, .28);
  display: flex; align-items: center; padding: 0 26px; gap: 16px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .crumb { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.topbar .crumb b { color: var(--gold-600); font-weight: 600; }
.topbar .title { font-size: 18px; font-weight: 700; color: var(--navy-800); line-height: 1.3; letter-spacing: .01em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.topbar-user:hover { background: var(--primary-50); }
.topbar-user .uname { font-size: 14px; font-weight: 600; color: var(--navy-800); }
.topbar-user .role-tag { font-size: 11px; color: var(--gold-600); background: rgba(201, 169, 97, .18); padding: 1px 8px; border-radius: 999px; font-weight: 500; }
.content { flex: 1; min-height: 0; padding: 20px 24px; overflow: auto; overscroll-behavior: contain; animation: pageIn .3s ease both; }

/* 移动端适配 */
.mobile-toggle { display: none; }
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; overscroll-behavior: contain; }
  .sidebar-nav { overscroll-behavior: contain; touch-action: pan-y; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 60px rgba(10, 20, 40, .3); }
  .main { margin-left: 0; }
  .mobile-toggle { display: inline-flex; }
  .content { padding: 16px; }

  /* 品牌区在手机/平板端（抽屉模式）：仅调整边距与图标尺寸，
     字号/行高/字距与桌面端完全一致，保证三端视觉统一 */
  .sidebar-brand { padding: 16px 18px 14px; }
  .sidebar-brand img { width: 36px; height: 36px; }
}

/* ================= 首页 ================= */
.welcome-banner {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(201, 169, 97, .3), transparent 60%),
    linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: #fff; border-radius: 16px; padding: 28px 32px;
  border: 1px solid rgba(201, 169, 97, .35);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 20px;
  box-shadow: 0 14px 36px rgba(15, 30, 61, .22);
}
.welcome-banner h2 { font-size: 23px; font-weight: 700; margin-bottom: 8px; letter-spacing: .01em; }
.welcome-banner p { opacity: .82; font-size: 14px; line-height: 1.7; max-width: 560px; }
.welcome-stats { display: flex; gap: 14px; }
.welcome-stat {
  text-align: center; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 14px 20px; border-radius: 13px; min-width: 88px;
  backdrop-filter: blur(6px);
}
.welcome-stat .num { font-size: 26px; font-weight: 700; color: var(--gold-400); line-height: 1.2; letter-spacing: -.01em; }
.welcome-stat .lbl { font-size: 12px; opacity: .75; margin-top: 4px; letter-spacing: .04em; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { padding: 20px; display: flex; align-items: center; gap: 15px; }
.stat-card .ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 6px 14px rgba(15, 30, 61, .14);
}
.stat-card .ico svg { width: 22px; height: 22px; }
.stat-card .num { font-size: 25px; font-weight: 700; line-height: 1.1; color: var(--navy-800); letter-spacing: -.01em; }
.stat-card .lbl { font-size: 12px; color: var(--text-muted); margin-top: 5px; letter-spacing: .02em; }

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.dash-col { display: flex; flex-direction: column; gap: 16px; }
.card-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-head h3 { font-size: 16px; font-weight: 700; color: var(--navy-800); letter-spacing: .01em; }
.card-head h3::before { content: ''; display: inline-block; width: 3px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, var(--gold-500), var(--gold-600)); margin-right: 9px; vertical-align: -2px; }
.card-head .more { color: var(--gold-600); font-size: 13px; text-decoration: none; font-weight: 500; }
.card-head .more:hover { color: var(--navy-700); }
.card-body { padding: 12px 22px 20px; }

.project-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px dashed var(--border);
  text-decoration: none; color: inherit; transition: padding-left .15s;
}
.project-row:last-child { border-bottom: none; }
.project-row:hover { padding-left: 6px; }
.project-row:hover .pname { color: var(--gold-600); }
.project-row .pname { font-weight: 600; transition: color .15s; line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.project-row .pname .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.project-row .pname .ovd { font-size: 11px; padding: 1px 7px; }
.project-row .pmeta { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.4; }
.project-row .pright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.project-row .pprog { width: 130px; }
.project-row .ppct { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; color: var(--navy-800); }

.dist-list { display: flex; flex-direction: column; gap: 13px; }
.dist-item { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; }
.dist-item .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dist-item .cnt { margin-left: auto; font-weight: 700; color: var(--navy-800); letter-spacing: -.01em; }
.dist-bar { height: 6px; background: #e9edf5; border-radius: 999px; overflow: hidden; flex: 1; }
.dist-bar > div { height: 100%; border-radius: 999px; }

.status-chip { display: inline-block; vertical-align: middle; font-size: 12px; padding: 3px 11px; border-radius: 999px; font-weight: 500; white-space: nowrap; line-height: 1.5; }

/* 用户管理 */
.cell-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.t { font-size: 12px; color: var(--text-muted); }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: -2px; }
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.color-swatch { width: 27px; height: 27px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .15s; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--gold-500); }

/* ================= 项目管理 ================= */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .select, .toolbar .input { width: auto; height: 38px; }
/* select native 渲染文字基线偏下，用 line-height 顶开 + 上下 padding 0 强制垂直居中（input 无此问题） */
.toolbar .select { line-height: 38px; padding-top: 0; padding-bottom: 0; text-align: left; }
.toolbar .btn { height: 38px; padding-top: 0; padding-bottom: 0; }

.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 13px 16px; background: #f4f7fb;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; letter-spacing: .02em;
}
/* 操作列常驻：仅当表格含操作列（.cell-actions，管理员视角）时，最后一列 sticky 固定在右侧 */
.table-card table { border-collapse: separate; border-spacing: 0; }
.table-card table:has(.cell-actions) thead th:last-child { position: sticky; right: 0; background: #f4f7fb; z-index: 3; }
.table-card table:has(.cell-actions) tbody td:last-child { position: sticky; right: 0; background: var(--card); z-index: 2; box-shadow: -1px 0 0 var(--border), -10px 0 16px -14px rgba(31, 58, 110, .3); }
.table-card table:has(.cell-actions) tbody tr:hover td:last-child { background: #f6f8fc; }
html[data-theme="dark"] .table-card table:has(.cell-actions) thead th:last-child { background: #111c31; }
html[data-theme="dark"] .table-card table:has(.cell-actions) tbody td:last-child { background: var(--card); box-shadow: -1px 0 0 #2b3a59, -10px 0 16px -14px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .table-card table:has(.cell-actions) tbody tr:hover td:last-child { background: #16213a; }
/* 表格横向滚动条隐藏：保留触摸/滚轮滚动，视觉更干净 */
.table-card .table-wrap { scrollbar-width: none; }
.table-card .table-wrap::-webkit-scrollbar { display: none; }
tbody td { padding: 14px 16px; border-bottom: 1px solid #edf1f7; vertical-align: middle; text-align: center; }
thead th { text-align: center; }
/* 项目管理表首列（项目）：表头与项目名称整列居中
   .n/.d 有 max-width 限制，需 margin auto 使容器相对 td 真正居中（宽屏下名称不偏左） */
.proj-table .cell-name { text-align: center; }
.proj-table .cell-name .n { justify-content: center; margin: 0 auto; }
.proj-table .cell-name .d { text-align: center; margin: 3px auto 0; }
tbody tr { transition: background .12s; animation: rowIn .3s ease both; }
tbody tr:nth-child(1) { animation-delay: .02s; }
tbody tr:nth-child(2) { animation-delay: .04s; }
tbody tr:nth-child(3) { animation-delay: .06s; }
tbody tr:nth-child(4) { animation-delay: .08s; }
tbody tr:nth-child(5) { animation-delay: .1s; }
tbody tr:nth-child(6) { animation-delay: .12s; }
tbody tr:nth-child(7) { animation-delay: .14s; }
tbody tr:nth-child(8) { animation-delay: .16s; }
tbody tr:hover { background: rgba(201, 169, 97, .07); }
tbody tr:last-child td { border-bottom: none; }
.cell-name .n { font-weight: 600; color: var(--navy-800); line-height: 1.4; max-width: 240px; display: flex; align-items: center; gap: 6px; }
.cell-name .n .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cell-name .d { font-size: 12px; color: var(--text-muted); margin-top: 3px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.cell-owner { display: flex; align-items: center; gap: 9px; justify-content: center; flex-wrap: nowrap; }
.cell-owner .info { line-height: 1.4; white-space: nowrap; }
.cell-owner .info .t { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cell-period { white-space: nowrap; }
.cell-prog { display: flex; align-items: center; gap: 10px; justify-content: center; position: relative; }
.cell-prog .progress { width: 90px; }
.cell-prog .pct { font-size: 13px; font-weight: 700; min-width: 36px; text-align: right; color: var(--navy-800); }
.cell-actions { display: flex; gap: 4px; justify-content: center; align-items: center; }
.cell-actions .btn { padding: 5px 9px; font-size: 12px; }

.empty-state { padding: 60px 20px; text-align: center; color: var(--text-muted); line-height: 1.6; }
.empty-state .ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: var(--primary-50); display: flex; align-items: center; justify-content: center; }
.empty-state .ico svg { width: 26px; height: 26px; stroke: var(--gold-600); }

/* ================= 个人中心（系统设置） ================= */
.profile-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.settings-wrap { display: flex; flex-direction: column; gap: 16px; }
.profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px -16px rgba(31, 58, 110, .25);
}
.profile-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .2);
  margin-bottom: 14px;
}
.profile-name { font-size: 20px; font-weight: 700; color: var(--navy-800); margin-bottom: 6px; }
.profile-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.profile-meta .role-tag { font-size: 12px; color: var(--gold-600); background: rgba(201, 169, 97, .18); padding: 2px 10px; border-radius: 999px; font-weight: 500; }
.profile-meta .username { font-size: 13px; color: var(--text-muted); }
.profile-info {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 24px;
  box-shadow: 0 8px 24px -16px rgba(31, 58, 110, .25);
}
.profile-info .row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.profile-info .row:last-child { border-bottom: none; }
.profile-info .row .lbl { width: 88px; flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.profile-info .row .val { flex: 1; font-size: 14px; color: var(--text); word-break: break-all; }
.profile-info .row .val.empty { color: var(--text-muted); font-style: italic; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-actions .btn { flex: 1 1 auto; height: 44px; font-size: 14px; }
.profile-actions .btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.profile-actions .btn-danger:hover { background: rgba(220, 38, 38, .06); }
.profile-actions .btn-danger i { color: var(--danger); }

/* 状态颜色（浅色主题） */
.st-planning { background: #eef1f6; color: #5b6a86; }
.st-in_progress { background: #e4edff; color: #2563eb; }
.st-on_hold { background: #fdf1de; color: #b5791d; }
.st-completed { background: #e0f4ec; color: #1f8a63; }
.st-delayed { background: #fde8e8; color: #d13b3b; }
.st-admin { background: linear-gradient(135deg, rgba(201,169,97,.28), rgba(201,169,97,.12)); color: #9c7a2f; border: 1px solid rgba(201,169,97,.5); font-weight: 600; }
.st-member { background: #eef1f6; color: #5b6a86; }

/* ================= 甘特图 ================= */
.gantt-card { overflow: hidden; }
.gantt-wrap { overflow: auto; max-height: 72vh; }
.gantt-head { display: flex; }
.gantt-left-col { width: var(--gantt-left); flex-shrink: 0; border-right: 1px solid var(--border); }
.gantt-left-head { height: 62px; display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: #f4f7fb; border-bottom: 1px solid var(--border); }
.gantt-time { position: relative; }
.gantt-month-row { display: flex; height: 32px; border-bottom: 1px solid var(--border); background: #f4f7fb; }
.gantt-month { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #5b6a86; border-right: 1px solid var(--border); white-space: nowrap; }
.gantt-day-row { display: flex; height: 30px; border-bottom: 1px solid var(--border); }
.gantt-day { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #7c89a6; border-right: 1px solid var(--border); flex-shrink: 0; }
.gantt-day.weekend { background: #f6f8fc; color: #a0aac0; }
.gantt-day.today { background: rgba(201, 169, 97, .28); color: #9c7a2f; font-weight: 700; }
.gantt-row { display: flex; border-bottom: 1px solid var(--border); }
/* 甘特图左列行：名称区可收缩（flex:1 + min-width:0），百分比固定不压缩，
   加 overflow:hidden 兜底防止内容溢出到右侧轨道区 */
.gantt-row-body { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 46px; min-width: 0; overflow: hidden; }
.gantt-row-body > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
.gantt-row-body > div:last-child { flex: 0 0 auto; }
.gantt-row-body .name { font-weight: 600; font-size: 13px; color: var(--navy-800); line-height: 1.4; display: flex; align-items: center; gap: 5px; min-width: 0; }
.gantt-row-body .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.gantt-row-body .name .ovd { font-size: 10px; padding: 0 5px; flex-shrink: 0; }
.gantt-row-body .range { font-size: 11px; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 46px; }
.gantt-track-bg { position: absolute; inset: 0; display: flex; }
.gantt-track-cell { border-right: 1px solid var(--border); flex-shrink: 0; height: 100%; }
.gantt-track-cell.weekend { background: #f6f8fc; }
.gantt-bar {
  position: absolute; top: 11px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; font-weight: 600; color: #fff;
  overflow: hidden; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 30, 61, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  animation: barIn .5s cubic-bezier(.3, 1.08, .42, 1) both;
  transform-origin: left center;
}
.gantt-bar.todo { background: linear-gradient(180deg, #b6c0d2, #96a2b8); }
.gantt-bar.in_progress { background: linear-gradient(180deg, #3b6fd4, var(--navy-800)); }
.gantt-bar.done { background: linear-gradient(180deg, #3aa882, #2f9e77); }
.gantt-bar.blocked { background: linear-gradient(180deg, #e56a6a, #d64545); }
.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold-500); z-index: 5; box-shadow: 0 0 6px rgba(201, 169, 97, .6); }
.gantt-today-label { position: absolute; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 5px; top: 2px; z-index: 6; font-weight: 600; }

/* 甘特图概览卡 */
.gantt-summary { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.gantt-summary .proj { flex: 1; min-width: 220px; }
.gantt-summary .proj h3 { font-size: 17px; font-weight: 700; color: var(--navy-800); letter-spacing: .01em; line-height: 1.4; }
.gantt-summary .proj p { font-size: 13px; color: var(--text-muted); margin-top: 5px; line-height: 1.6; }
.gantt-summary .stat { text-align: center; min-width: 70px; }
.gantt-summary .stat .num { font-size: 23px; font-weight: 700; color: var(--navy-800); line-height: 1.2; letter-spacing: -.01em; }
.gantt-summary .stat .lbl { font-size: 12px; color: var(--text-muted); margin-top: 3px; letter-spacing: .02em; }

.gantt-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 13px 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.gantt-legend .li { display: flex; align-items: center; gap: 6px; }
.gantt-legend .sw { width: 12px; height: 12px; border-radius: 3px; }

/* 甘特图-列表模式 */
.gantt-list { padding: 8px 22px 16px; scrollbar-width: none; }
.gantt-list::-webkit-scrollbar { display: none; }
.gantt-list-row { display: grid; grid-template-columns: 10px minmax(140px, 1fr) 110px 190px; gap: 14px; align-items: center; padding: 13px 6px; border-bottom: 1px dashed var(--border); }
.gantt-list-row > * { min-width: 0; }
.gantt-list-row:last-child { border-bottom: none; }
.gantt-list-row .sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gantt-list-row:last-child { border-bottom: none; }
.gantt-list-row .name { font-weight: 600; color: var(--navy-800); min-width: 150px; flex: 1; line-height: 1.4; display: flex; align-items: center; gap: 5px; }
.gantt-list-row .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gantt-list-row .name .ovd { font-size: 11px; padding: 1px 7px; }
.gantt-list-row .who { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; min-width: 90px; line-height: 1.4; }
.gantt-list-row .dates { font-size: 12px; color: var(--text-muted); min-width: 190px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: #f1f4f9; border: 1px solid #dfe5f0; border-radius: 8px; }
.gantt-view-toggle button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 12px; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.gantt-view-toggle button:hover { color: var(--navy-700); }
.gantt-view-toggle svg { width: 14px; height: 14px; }
.gantt-view-toggle .active { border-color: var(--gold-500); color: var(--gold-600); background: rgba(201, 169, 97, .12); font-weight: 600; }

/* ================= 任务管理 ================= */
.tasks-toolbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--border); align-items: center; }
.tasks-toolbar .input, .tasks-toolbar .select { flex: 0 0 auto; }
.task-status-sel { width: 108px; }
.tasks-summary .stat .num.warn { color: #dc2626; }
.tasks-empty { padding: 56px 20px; text-align: center; color: var(--text-muted); line-height: 1.6; }
.tasks-empty .ico { color: var(--gold-400); }
.tasks-empty .btn { margin-top: 16px; }
/* 任务列表-返回按钮：文字靠左，不与图标居中偏移 */
#tasks-back { justify-content: flex-start; }
/* 逾期标记：独立胶囊，flex-shrink:0，放在名称文本之后，绝不挤压/顶出日期等相邻内容 */
.ovd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #dc2626;
  background: #fde8e8;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}
.ovd svg { width: 11px; height: 11px; }
/* 任务列表日期行：纯日期 + 日历图标 */
.cell-name .d.task-d { display: flex; align-items: center; gap: 6px; }
.task-d .d-dates { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 900px) {
  .tasks-toolbar { padding: 12px 16px; }
  .tasks-toolbar .input { flex: 1; min-width: 0; }
  .tasks-toolbar .select { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .tasks-toolbar .input { flex-basis: 100%; width: 100%; }
  .tasks-toolbar .select { flex: 1; }
}

/* ================= 响应式 ================= */
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --gantt-day: 18px; --gantt-left: 190px; }
  .gantt-row-body { padding: 0 10px; gap: 7px; }
  .gantt-row-body .avatar { width: 26px; height: 26px; font-size: 11px; }
  .gantt-row-body .name .ovd { font-size: 9px; padding: 0 4px; }
  .gantt-row-body .range { font-size: 10px; margin-top: 2px; max-width: 168px; }
  .gantt-row-body > div:last-child { font-size: 11px; }
  .gantt-summary { gap: 14px; padding: 16px; }
  .gantt-summary .stat .num { font-size: 19px; }
  .gantt-list-row .dates { min-width: 0; }
}
/* 手机/小平板横屏：收起侧边栏，内容全宽（甘特图横向展示更接近桌面体验） */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 540px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 60px rgba(10, 20, 40, .3); }
  .main { margin-left: 0; }
  .mobile-toggle { display: inline-flex; }
  .content { padding: 14px 18px; }
  :root { --gantt-left: 220px; }
  .gantt-row-body .range { max-width: none; }
}
@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; }
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .welcome-stats { width: 100%; }
  .welcome-stat { flex: 1; }
  .login-card { padding: 30px 24px; }
  .topbar { padding: 0 14px; }
  .topbar .crumb { display: none; }
  .content { padding: 14px; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }

  /* 甘特图：手机竖屏名称字号略小，名称区可容纳更多字符 */
  .gantt-row-body .name { font-size: 12px; }

  /* 甘特图-列表模式：手机竖屏改为单行横滑布局（列不换行、行距统一、负责人垂直居中） */
  .gantt-list { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 14px; }
  .gantt-list-row { display: flex; flex-wrap: nowrap; min-width: 560px; padding: 12px 4px; align-items: center; }
  .gantt-list-row .name { min-width: 0; flex: 0 1 170px; font-size: 12px; }
  .gantt-list-row .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .gantt-list-row .who { min-width: 0; flex: 0 0 84px; font-size: 11px; gap: 4px; }
  .gantt-list-row .who .avatar { width: 20px; height: 20px; font-size: 10px; }
  .gantt-list-row .dates { min-width: 0; flex: 0 0 172px; font-size: 11px; }
}

/* ================= 骨架屏 ================= */
.sk { position: relative; overflow: hidden; background: #e9edf5; border-radius: 6px; flex-shrink: 0; }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: skShine 1.4s ease-in-out infinite; }
@keyframes skShine { to { transform: translateX(100%); } }
.sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.sk-grid-2 { grid-template-columns: 2fr 1fr; }
.sk-grid-3 { grid-template-columns: repeat(3, 1fr); padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid #f0f3f9; }
.sk-col { display: flex; flex-direction: column; gap: 16px; }
.sk-stat { display: flex; align-items: center; gap: 14px; padding: 20px; }
.sk-ico { width: 46px; height: 46px; border-radius: 13px; }
.sk-body { padding: 20px 22px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid #f0f3f9; }
.sk-row:last-child { border-bottom: none; }
.sk-head { display: flex; gap: 12px; padding: 13px 22px; background: #f4f7fb; border-bottom: 1px solid var(--border); }
.sk-table { padding: 0; }
.sk-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sk-spacer { flex: 1; }
.sk-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: #f1f4f9; border: 1px solid #dfe5f0; border-radius: 8px; }
.sk-grow { display: flex; align-items: center; gap: 14px; height: 54px; border-bottom: 1px solid #f0f3f9; }
.sk-grow:last-child { border-bottom: none; }
.sk-gname { width: 230px; height: 14px; }
.sk-gbar { height: 22px; border-radius: 7px; }
.sk-stat-line { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
@media (max-width: 1200px) {
  .sk-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-grid-2 { grid-template-columns: 1fr; }
  .sk-grid-3 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .sk-grid { grid-template-columns: 1fr; }
  .sk-gname { width: 120px; }
}

/* ================= 动效 ================= */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes ripple { to { transform: scale(1.45); opacity: 0; } }
.content > * { animation: rise .5s cubic-bezier(.22, .61, .36, 1) both; }
.content > *:nth-child(1) { animation-delay: .04s; }
.content > *:nth-child(2) { animation-delay: .1s; }
.content > *:nth-child(3) { animation-delay: .16s; }
.content > *:nth-child(4) { animation-delay: .22s; }
.content > *:nth-child(5) { animation-delay: .28s; }
.content > *:nth-child(6) { animation-delay: .34s; }
.content > *:nth-child(n+7) { animation-delay: .38s; }
.modal-mask.closing { opacity: 0; pointer-events: none; }
.modal-mask.closing .modal { animation: modalOut .18s ease forwards; }
@keyframes modalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
.project-row, .gantt-list-row { animation: rowIn .3s ease both; }
.stat-card .ico { transition: transform .26s cubic-bezier(.25, .8, .35, 1), box-shadow .26s ease; }
.stat-card:hover .ico { transform: translateY(-1px) scale(1.04); }

/* ================= 手机竖屏适配 ================= */
/* 竖屏手机 ≤900px；横屏设备（≤960px 横向）同样适用。
   覆盖：竖屏手机、横屏手机、iPad 竖屏（768~900px），保证弹窗/表单/表格/工具栏在移动端一致 */
@media (max-width: 900px), (max-width: 960px) and (orientation: landscape) {
  /* 移动端禁止横向溢出：避免页面被浏览器整体缩小、需捏合才能恢复正常。
     viewport-fit=cover 下 100% 宽度会受安全区影响，导致内容不铺满、出现白块并可拖动；
     统一改用 100vw 锁死全屏宽度，内容真正铺满屏幕 */
  html, body { width: 100vw; max-width: 100vw; overflow: hidden; overscroll-behavior: none; }
  .layout {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh; /* 动态视口：地址栏收起/展开自动适配高度，避免纵向拖动 */
    overflow: hidden;
  }

  /* iOS Safari：聚焦字号 <16px 的输入框会自动放大页面且跳转后不还原，
     因此移动端所有表单控件统一 ≥16px，从源头杜绝该问题 */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 弹窗：保留居中浮窗，视口内收缩，禁止横向滑动 */
  .modal-mask {
    padding: 12px;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .modal {
    width: 100%;
    max-width: 540px;
    max-height: 86vh;
    border-radius: 16px;
    padding: 16px 14px;
    overflow-x: hidden;
    margin: auto;
  }
  .modal-header { margin-bottom: 10px; padding-bottom: 10px; }
  .modal-footer { margin-top: 14px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  /* 弹窗打开时锁定 body，阻止整个页面横向拖动 */
  body.modal-open { overflow: hidden; overscroll-behavior: contain; }

  /* iOS Safari 的 date/time 输入框自带巨大默认样式，强制归一 */
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 14px;
    min-height: 38px;
    height: 38px;
    padding: 0 12px;
    line-height: 38px;
    background: var(--field-bg);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* WebKit 私有伪元素：归一化 iOS date picker 内的文本渲染高度 */
  input[type="date"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    font-size: 14px;
    line-height: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--text);
  }
  /* iOS 16+ 新增的 indicator 容器也强制归一 */
  input[type="date"]::-webkit-datetime-edit,
  input[type="datetime-local"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    height: 38px;
    line-height: 38px;
    padding: 0;
  }

  /* 表单两列 → 单列：标签不再被硬挤成两行；minmax(0,1fr) 防止日期框等内联控件撑破列宽 */
  .modal-body .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* 表格：保持完整列宽 + 横向滚动，长文本不被挤压换行 */
  .table-card table { min-width: 720px; }
  .table-card table th,
  .table-card table td { white-space: nowrap; }
  .cell-actions { flex-wrap: wrap; }

  /* 工具栏：筛选控件整行显示 */
  .toolbar .input,
  .toolbar .select { width: 100% !important; flex: 1 1 100%; }
  .toolbar .btn { height: 40px; }

  /* 顶栏：保持单行，只保留头像+名字；角色/退出登录隐藏，点击头像跳系统设置 */
  .topbar {
    height: 56px;
    padding: 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .topbar > div:not(.topbar-right) { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .topbar .title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar .crumb { display: none; }
  .topbar-right { flex-shrink: 0; gap: 0; margin-left: auto; }
  .topbar-user { padding: 4px 8px; gap: 6px; cursor: pointer; }
  .topbar-user .avatar { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
  .topbar-user .uname {
    font-size: 13px;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-user .role-tag { display: none; }
  .topbar #logout-btn { display: none; }

  /* 弹窗表单：统一 label/input 行高节奏，修复"每行间距不均" */
  .modal-body .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    min-width: 0;
  }
  .modal-body .field > label {
    line-height: 16px;
    height: 16px;
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--field-label);
    margin: 0;
  }
  .modal-body .field > label .req { color: var(--danger); }
  .modal-body .field .input,
  .modal-body .field .select {
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: var(--field-bg);
    color: var(--text);
    outline: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  /* 自定义 select 箭头，去掉 iOS 原生外观 */
  .modal-body .field .select {
    padding-right: 30px;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
  }
  .modal-body .field .textarea {
    height: auto;
    min-height: 84px;
    line-height: 1.5;
    padding: 10px 12px;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: var(--field-bg);
    font-size: 14px;
  }
  .modal-body .grid { row-gap: 10px; column-gap: 10px; }
  .modal-body .form-hint { margin-bottom: 8px; font-size: 12px; line-height: 1.4; }
  /* 弹窗内直接子字段统一间距：field 和 grid（字段组）之间都固定 10px，避免混排时忽大忽小 */
  .modal-body > .field,
  .modal-body > .grid { margin-top: 10px; }
  .modal-body > .field:first-child,
  .modal-body > .grid:first-child { margin-top: 0; }

  /* 个人中心：手机竖屏紧凑布局 */
  .profile-card { padding: 22px 18px; border-radius: 14px; }
  .profile-avatar { width: 68px; height: 68px; font-size: 26px; margin-bottom: 10px; }
  .profile-name { font-size: 17px; }
  .profile-info { padding: 4px 16px; border-radius: 14px; }
  .profile-info .row { padding: 12px 0; }
  .profile-info .row .lbl { width: 72px; font-size: 13px; }
  .profile-info .row .val { font-size: 14px; }
  .profile-actions .btn { height: 40px; font-size: 13px; }
}
@keyframes sheetUp { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes sheetDown { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(42px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* iPad 专属适配：日期/时间控件用紧凑尺寸（iPadOS 原生渲染过大，且不在手机媒体查询范围内） */
@media (min-width: 768px) and (max-width: 1366px) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 14px;
    min-height: 38px;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: var(--field-bg);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    font-size: 14px;
    line-height: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    text-align: left;
    color: var(--text);
  }
  input[type="date"]::-webkit-datetime-edit,
  input[type="datetime-local"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit {
    display: flex;
    align-items: center;
    height: 38px;
    line-height: 38px;
    padding: 0;
  }
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 0;
  }

  /* iPad 横屏表格：压缩单元格内边距 / 操作按钮 / 进度条，减少内容超宽导致的横向滚动量 */
  .table-card table th,
  .table-card table td { padding-left: 12px; padding-right: 12px; }
  .table-card .cell-actions .btn { padding-left: 8px; padding-right: 8px; }
  .table-card .cell-prog .progress { width: 70px; }
}

/* ================= 深色模式（系统设置-外观：跟随系统 / 浅色 / 深色） ================= */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] {
  --navy-900: #050b16;
  --navy-800: #0c1526;
  --navy-700: #101c31;
  --navy-600: #1a2b4a;
  --navy-100: #223252;
  --gold-400: #e9d9b0;
  --gold-500: #c9a961;
  --gold-600: #a9853f;
  --bg: #05090f;
  --card: #121c31;
  --text: #e6ebf5;
  --text-muted: #8b9ab8;
  --border: #2a3854;
  /* 表单控件基础色（暗色）：覆盖 :root 同名变量，弹窗 / 工具栏 / 三端媒体查询自动生效 */
  --field-bg: #0d1728;
  --field-border: #26324e;
  --field-label: #9fb0cc;
  --field-placeholder: #5c6b8c;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0cc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --primary: var(--navy-700);
  --primary-hover: var(--navy-600);
  --primary-50: #16213a;
  --success: #34c68a;
  --warning: #d8a03c;
  --danger: #e25563;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .65);
}

/* 同时覆盖 html 根元素：Safari 橡皮筋回弹露出的区域就是根元素背景，漏白即因此未覆盖 */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(201, 169, 97, .05), transparent 65%),
    radial-gradient(800px 600px at -10% 110%, rgba(20, 35, 60, .12), transparent 70%),
    linear-gradient(180deg, #060b15 0%, #070e1b 100%);
  background-attachment: fixed;
  background-color: var(--bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }

/* 顶栏玻璃 */
html[data-theme="dark"] .topbar {
  background: rgba(7, 12, 22, .6);
  border-bottom-color: rgba(201, 169, 97, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 28px -18px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .topbar .title { color: var(--text); }
html[data-theme="dark"] .topbar-user:hover { background: rgba(26, 43, 74, .5); }
html[data-theme="dark"] .topbar-user .uname { color: var(--text); }

/* 表格 */
html[data-theme="dark"] thead th { background: #111c31; color: #aab8d4; }
html[data-theme="dark"] tbody td { border-color: #26344f; }
html[data-theme="dark"] tbody tr:hover { background: rgba(26, 43, 74, .45); }

/* 标题 / 数字等文字色由 --navy-* 派生，暗色下 navy 被压暗成近背景色，需统一提升为亮色文字保证可读性 */
html[data-theme="dark"] .stat-card .num,
html[data-theme="dark"] .card-head h3,
html[data-theme="dark"] .project-row .ppct,
html[data-theme="dark"] .dist-item .cnt,
html[data-theme="dark"] .cell-name .n,
html[data-theme="dark"] .cell-prog .pct,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .gantt-row-body .name,
html[data-theme="dark"] .gantt-summary .proj h3,
html[data-theme="dark"] .gantt-summary .stat .num,
html[data-theme="dark"] .gantt-list-row .name,
html[data-theme="dark"] .settings-title h3 { color: var(--text); }

/* 表单控件：颜色已统一由 --field-* 变量控制（暗色值在上方变量块覆盖），通用 .select 规则已含 appearance:none 与 CSS 箭头，暗色下箭头由变量自动切换 */
html[data-theme="dark"] .btn-outline { background: #1a2642; border-color: #26324e; color: var(--text); box-shadow: none; }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(26, 43, 74, .5); color: var(--text); }
/* 主按钮在暗色下需保持高对比：亮藏蓝渐变，避免与页面背景融为一体 */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #2f5cb3 0%, #20428f 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a6cc6 0%, #27509f 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
/* 登录卡片主按钮：始终保持金色品牌渐变（不受深色全局主按钮规则影响） */
html[data-theme="dark"] .login-card .btn-primary,
html[data-theme="dark"] .login-card .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gold-500) 0%, #b89240 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(184, 146, 63, .5);
}

/* 进度条 / 分布条 / 骨架屏 */
html[data-theme="dark"] .progress,
html[data-theme="dark"] .dist-bar { background: #101b30; }
html[data-theme="dark"] .sk { background: #101b30; }
html[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
html[data-theme="dark"] .sk-head { background: #111c31; }
html[data-theme="dark"] .sk-grid-3,
html[data-theme="dark"] .sk-row,
html[data-theme="dark"] .sk-grow { border-color: #26344f; }

/* 甘特图 */
html[data-theme="dark"] .gantt-left-head,
html[data-theme="dark"] .gantt-month-row { background: #111c31; }
html[data-theme="dark"] .gantt-day.weekend,
html[data-theme="dark"] .gantt-track-cell.weekend { background: #0e1728; }
html[data-theme="dark"] .gantt-day.today,
html[data-theme="dark"] .gantt-track-cell.today { background: rgba(201, 169, 97, .08); }
html[data-theme="dark"] .gantt-view-toggle { background: #101b30; border-color: #26324e; }
html[data-theme="dark"] .gantt-view-toggle button:hover { color: var(--text); }
html[data-theme="dark"] .gantt-bar.todo { background: linear-gradient(180deg, #3a4a68, #2a3852); }
html[data-theme="dark"] .gantt-row:hover .gantt-left-col,
html[data-theme="dark"] .gantt-list-row:hover { background: rgba(26, 43, 74, .4); }
html[data-theme="dark"] .gantt-list-row .pct { color: var(--text); }

/* 状态胶囊 */
html[data-theme="dark"] .st-planning { background: rgba(148, 163, 195, .14); color: #aeb9d2; }
html[data-theme="dark"] .st-in_progress { background: rgba(59, 130, 246, .16); color: #7da9f7; }
html[data-theme="dark"] .st-on_hold { background: rgba(217, 143, 45, .16); color: #e0ae66; }
html[data-theme="dark"] .st-completed { background: rgba(16, 185, 129, .16); color: #55d3a8; }
html[data-theme="dark"] .st-delayed { background: rgba(239, 68, 68, .16); color: #ff8d8d; }
html[data-theme="dark"] .st-admin { background: linear-gradient(135deg, rgba(201, 169, 97, .3), rgba(201, 169, 97, .14)); color: #e9d9b0; border-color: rgba(201, 169, 97, .5); }
html[data-theme="dark"] .st-member { background: rgba(148, 163, 195, .14); color: #aeb9d2; }

/* 逾期胶囊 */
html[data-theme="dark"] .ovd { background: rgba(239, 68, 68, .18); color: #ff9b9b; }

/* 卡片：参照浅色模式「灰底 + 白卡 + 投影」的悬浮逻辑，深色下背景更深、卡片实心提亮，加微亮描边与投影形成明确层级 */
html[data-theme="dark"] .card {
  background: #141f38;
  border-color: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow);
}
html[data-theme="dark"] .card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
html[data-theme="dark"] #tk-list { background: #101b30; }
html[data-theme="dark"] #tk-list .card { background: #101b30 !important; border-bottom-color: #26344f !important; box-shadow: none !important; }
html[data-theme="dark"] #tk-list .card:hover { background: #182542 !important; }
html[data-theme="dark"] .task-add { border-bottom-color: #26344f; }

/* 弹窗 */
html[data-theme="dark"] .modal { background: rgba(13, 20, 36, .72); border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 28px 64px -18px rgba(0, 0, 0, .6); }
/* 卡片深色玻璃 */
html[data-theme="dark"] .card {
  background: rgba(18, 28, 49, .5);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px -14px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 44px -18px rgba(0, 0, 0, .65);
}
html[data-theme="dark"] .modal-header { border-color: #26344f; }
html[data-theme="dark"] .modal-header h3 { color: var(--text); }
html[data-theme="dark"] .modal-mask { background: rgba(3, 7, 16, .68); }

/* ================= 系统设置页 ================= */
.settings-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.settings-title h3 { font-size: 16px; color: var(--navy-800); }
.settings-title i { color: var(--gold-500); }
.settings-hint { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 300px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 10px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--navy-700); font-size: 13px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
}
.theme-opt i { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--text-muted); transition: color .18s; }
.theme-opt:hover { border-color: var(--gold-400); }
.theme-opt.active { border-color: var(--gold-500); background: #fdf8ec; color: var(--navy-800); box-shadow: 0 3px 10px rgba(201, 169, 97, .18); }
.theme-opt.active i { color: var(--gold-600); }
html[data-theme="dark"] .theme-opt { background: #1a2642; color: var(--text); }
html[data-theme="dark"] .theme-opt.active { border-color: var(--gold-500); background: rgba(201, 169, 97, .12); box-shadow: none; }
html[data-theme="dark"] .theme-opt.active i { color: var(--gold-400); }

.changelog { display: flex; flex-direction: column; gap: 18px; }
.cl-empty { color: var(--text-muted); text-align: center; padding: 30px 0; font-size: 13px; }

.cl-item { padding-left: 16px; border-left: 2px solid var(--border); }
.cl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cl-ver { font-weight: 700; font-size: 14px; color: var(--navy-800); }
.cl-date { font-size: 12px; color: var(--text-muted); }
.cl-item ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cl-item li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--navy-700); }
.cl-tag { flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1.6; padding: 1px 9px; border-radius: 999px; margin-top: 2px; }
.cl-feature { background: rgba(37, 99, 235, .1); color: #2563eb; }
.cl-optimize { background: rgba(217, 143, 45, .12); color: #b5791d; }
.cl-fix { background: rgba(16, 185, 129, .12); color: #1f8a63; }
html[data-theme="dark"] .cl-ver { color: var(--text); }
html[data-theme="dark"] .cl-item li { color: #c4d0e6; }
html[data-theme="dark"] .cl-feature { background: rgba(96, 165, 250, .15); color: #7da9f7; }
html[data-theme="dark"] .cl-optimize { background: rgba(232, 168, 60, .15); color: #e0ae66; }
html[data-theme="dark"] .cl-fix { background: rgba(52, 198, 138, .15); color: #55d3a8; }
/* 外观分类标题：区分「外观模式」与未来的更多外观选项 */
.settings-sec-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; margin: 6px 0 10px; }
/* 深色模式 Beta 徽标 */
.theme-opt .opt-badge {
  font-style: normal;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 7px; margin-left: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-500), #b89240);
  color: #fff; letter-spacing: .05em;
  vertical-align: 1px;
}
/* 更新日志入口按钮行 */
.changelog-btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.changelog-btn-row .btn { height: 40px; padding: 0 18px; font-size: 13.5px; }
/* 更新日志弹窗内列表间距 */
.changelog-modal .changelog { margin-top: 2px; }
@media (max-width: 600px) {
  .theme-picker { max-width: none; }
}

/* ================= 三端横竖屏补充优化 ================= */
/* 顶栏：≤720px 进一步压缩系统管理员区，只保留头像（节省横向空间） */
@media (max-width: 720px) {
  .topbar-user .uname { display: none; }
  .topbar-user { padding: 4px; }
  .topbar-user .role-tag { display: none; }
}
/* 弹窗底部按钮 ≤500 列排避免拥挤 */
@media (max-width: 500px) {
  .modal-footer { flex-direction: column-reverse; gap: 8px; }
  .modal-footer .btn { width: 100%; flex: 1 1 auto; }
}
/* stat-card ≤480 紧凑：图标缩小、padding 收紧 */
@media (max-width: 480px) {
  .stat-card { padding: 14px 16px; gap: 10px; }
  .stat-card .num { font-size: 22px; }
  .stat-card .lbl { font-size: 12px; }
  .stat-card .ico { width: 38px; height: 38px; }
  .stat-card .ico svg { width: 18px; height: 18px; }
}
/* 甘特图超窄屏 ≤420：左列与轨道进一步压缩，确保任务条可读 */
@media (max-width: 420px) {
  :root { --gantt-left: 150px; --gantt-day: 12px; }
  .gantt-row-body { padding: 0 8px; gap: 5px; }
  .gantt-row-body .name { font-size: 11px; }
  .gantt-row-body .avatar { width: 22px; height: 22px; font-size: 10px; }
  .gantt-row-body .range { font-size: 9px; max-width: 110px; }
  .gantt-row-body > div:last-child { font-size: 10px; }
  .gantt-summary { padding: 14px; gap: 10px; }
  .gantt-summary .stat .num { font-size: 17px; }
}
/* 安全区适配：iPhone notch / 灵动岛 */
@supports (padding: max(0px)) {
  .layout { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
/* 触摸目标：移动端关键交互 ≥44px (Apple HIG) */
@media (max-width: 900px) {
  .nav-item { min-height: 44px; padding: 12px 13px; }
  .topbar-user { min-height: 44px; }
  .pagination-btn { min-width: 44px; min-height: 44px; }
}
/* 表格操作列 ≤600：紧凑按钮间距 */
@media (max-width: 600px) {
  .cell-actions { gap: 4px; }
  .cell-actions .btn-icon { padding: 6px; }
}
/* 项目管理卡片在 ≤600 紧凑 */
@media (max-width: 600px) {
  .project-row { padding: 12px 0; gap: 10px; }
}

/* ================= 光感设计（克制，配合玻璃雾透材质） ================= */
/* 主按钮辉光（藏蓝 + 冷蓝光晕） */
.btn-primary { box-shadow: 0 4px 12px rgba(15, 30, 61, .22), 0 6px 18px -8px rgba(37, 99, 235, .35); }
.btn-primary:hover { box-shadow: 0 8px 22px -8px rgba(37, 99, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); }
/* 输入框 / 下拉 / 搜索聚焦金色光晕 */
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .18), 0 2px 16px -6px rgba(201, 169, 97, .25);
}
/* 侧边栏激活项辉光 */
.nav-item.active { box-shadow: 0 6px 18px -8px rgba(201, 169, 97, .4), inset 0 0 16px rgba(201, 169, 97, .08); }
/* 卡片 hover 金色细环微光 */
.card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(201, 169, 97, .12), 0 20px 44px -18px rgba(31, 58, 110, .2); }
/* 统计卡图标 hover 冷蓝光晕 */
.stat-card:hover .ico { box-shadow: 0 6px 14px rgba(15, 30, 61, .14), 0 0 0 3px rgba(37, 99, 235, .1), 0 4px 16px -4px rgba(37, 99, 235, .3); }
/* 进度条内高光（统一质感） */
.progress > div { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* 登录页：按钮辉光 + logo 光晕 */
.login-card .btn-primary { box-shadow: 0 8px 20px -6px rgba(184, 146, 63, .5), 0 0 0 1px rgba(255, 255, 255, .16) inset; }
.login-card .btn-primary:hover { box-shadow: 0 12px 30px -8px rgba(184, 146, 63, .75), inset 0 1px 0 rgba(255, 255, 255, .28); transform: translateY(-1px); }
.login-card .login-brand img { filter: drop-shadow(0 4px 12px rgba(201, 169, 97, .4)) drop-shadow(0 0 18px rgba(201, 169, 97, .35)); }
/* ================= 深色模式光感增强 ================= */
html[data-theme="dark"] .btn-primary { box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 6px 20px -8px rgba(66, 133, 244, .4); }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 24px -6px rgba(66, 133, 244, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-theme="dark"] .input:focus, html[data-theme="dark"] .select:focus, html[data-theme="dark"] .textarea:focus {
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .2), 0 2px 18px -6px rgba(201, 169, 97, .3);
}
html[data-theme="dark"] .nav-item.active { box-shadow: 0 6px 20px -8px rgba(201, 169, 97, .5), inset 0 0 18px rgba(201, 169, 97, .1); }
html[data-theme="dark"] .stat-card:hover .ico { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 3px rgba(66, 133, 244, .14), 0 4px 18px -4px rgba(66, 133, 244, .4); }
html[data-theme="dark"] .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(201, 169, 97, .2), 0 20px 44px -18px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .login-card .btn-primary { box-shadow: 0 10px 24px -6px rgba(184, 146, 63, .4), 0 0 0 1px rgba(255, 255, 255, .12) inset; }