/* ==========================================================================
   壹一知产协同办公系统 · 设计系统（OneIPR Office Design System）v1.0
   --------------------------------------------------------------------------
   视觉来源：Google Stitch 产出 7 屏 + oneipr_office_modern_minimal/DESIGN.md
   接入方式：本文件在 index.html 的 <style> 之后加载，作为覆盖层生效，
             旧样式表保持不动，便于回滚（删掉本文件的 <link> 即还原）。
   自持说明：字体来自 ./fonts.css（本地 woff2），不依赖任何外网 CDN。
   --------------------------------------------------------------------------
   五条铁律（贯穿全表）：
     P1 只记录承诺，不做监控   —— 不出现活跃度/在线时长类元素
     P2 两地对等，无隐藏视图   —— 负责人也在看板上
     P3 摩擦趋近零             —— 高频动作一次点击
     P4 弱提醒，不催促         —— 用变灰表达，不发消息
     P5 边框优先，不用重阴影   —— 层级靠 1px 描边 + 表面色阶
   ========================================================================== */

/* ==========================================================================
   0. 设计 Token
   ========================================================================== */
:root {
    /* ---- 调色板：把旧表引用的灰色变量整体换成暖石色系 ---- */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;

    --gray-50: #fafaf9;   /* 页面画布 */
    --gray-100: #f5f5f4;   /* 次级底 / 表头 */
    --gray-200: #e7e5e4;   /* 默认描边 */
    --gray-300: #d6d3d1;   /* 强描边 */
    --gray-400: #a8a29e;   /* 三级文字 */
    --gray-500: #78716c;   /* 中性 */
    --gray-600: #57534e;   /* 二级文字 */
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1b1b;   /* 主文字 / 墨色 */

    /* ---- 语义 token（与 DESIGN.md 一致）---- */
    --ink: #1c1b1b;
    --bg-card: #ffffff;
    --bg-muted: #fafaf9;
    --bg-subtle: #f5f5f4;
    --border-default: #e7e5e4;
    --border-subtle: #f5f5f4;
    --border-strong: #d6d3d1;
    --text-primary: #1c1b1b;
    --text-secondary: #57534e;
    --text-tertiary: #a8a29e;
    --text-inverse: #ffffff;

    --success-base: #16a34a;  --success-bg: #f0fdf4;  --success-fg: #15803d;
    --warning-base: #f59e0b;  --warning-bg: #fffbeb;  --warning-fg: #b45309;
    --danger-base:  #dc2626;  --danger-bg:  #fef2f2;  --danger-fg:  #b91c1c;
    --info-base:    #2563eb;  --info-bg:    #eff6ff;  --info-fg:    #1d4ed8;
    --neutral-base: #78716c;  --neutral-bg: #f5f5f4;  --neutral-fg: #57534e;
    --accent-base:  #7c3aed;  --accent-bg:  #f5f3ff;  --accent-fg:  #6d28d9;

    /* ---- 圆角：按组件层级递进 ---- */
    --r-chip: 6px;      /* 状态标签 */
    --r-ctl: 8px;       /* 输入框 / 按钮 */
    --r-card: 12px;     /* 卡片 / 表格 */
    --r-modal: 16px;    /* 弹窗 */
    --r-hero: 20px;     /* 顶部英雄卡 */
    --r-full: 9999px;

    /* ---- 阴影：只给悬浮元素，卡片一律靠描边 ---- */
    --sh-ctl: 0 1px 2px rgba(28, 27, 27, .04);
    --sh-card: 0 1px 3px rgba(28, 27, 27, .06), 0 1px 2px rgba(28, 27, 27, .04);
    --sh-pop: 0 4px 12px rgba(28, 27, 27, .08);
    --sh-modal: 0 12px 32px rgba(28, 27, 27, .12);

    /* 兼容旧表里的阴影变量名 */
    --shadow-sm: var(--sh-ctl);
    --shadow: var(--sh-card);
    --shadow-md: var(--sh-pop);
    --shadow-lg: var(--sh-modal);
    --radius: var(--r-ctl);
    --radius-lg: var(--r-card);

    /* ---- 骨架 ---- */
    --sidebar-w: 240px;
    --topbar-h: 48px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
                 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-num: 'Inter', 'SF Pro Display', system-ui, sans-serif;
}

/* ==========================================================================
   1. 基础层
   ========================================================================== */
body {
    font-family: var(--font-sans);
    background: var(--bg-muted);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

/* 数字统一等宽，保证表格与指标卡纵向对齐 */
.stat-value, .stat-sub, .unit, .font-mono, .checkin-time, .member-stats,
.rpt-text, td, .ci-dur, .timeline-time, .timeline-duration, .badge,
.hero-content, .detail-hero-meta, .info-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 图标字体：Material Symbols Outlined（本地自持） */
.material-symbols-outlined {
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms-14 { font-size: 14px; } .ms-16 { font-size: 16px; } .ms-18 { font-size: 18px; }
.ms-20 { font-size: 20px; } .ms-24 { font-size: 24px; } .ms-28 { font-size: 28px; }
.ms-32 { font-size: 32px; }
.ms-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms-tertiary { color: var(--text-tertiary); }
.ms-secondary { color: var(--text-secondary); }

/* 旧标记里的 .ms / .nav-icon（内联 SVG）保持可用，统一尺寸与色 */
.ms { display: inline-flex; align-items: center; }
.nav-icon { width: 18px; height: 18px; color: var(--text-tertiary); transition: color .15s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .18s ease-out; }

/* 骨架屏：加载态用脉冲而非转圈 */
@keyframes skeletonPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.loading { color: var(--text-tertiary); font-size: 13px; }
.loading::after { content: ''; }

/* ==========================================================================
   2. 布局骨架：240px 侧栏 + 48px 顶栏
   ========================================================================== */
.app-layout { background: var(--bg-muted); }

.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-card);
    border-right: 1px solid var(--border-default);
    color: var(--text-primary);
}

.sidebar-header {
    height: 64px;
    padding: 0 1rem;
    gap: .625rem;
    border-bottom: 1px solid var(--border-subtle);
}
.sidebar-header .s-logo {
    width: 32px; height: 32px;
    border-radius: var(--r-ctl);
    background: var(--ink);
    color: var(--text-inverse);
    font-size: 16px;
    box-shadow: var(--sh-ctl);
}
.sidebar-header h2 { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -.01em; }
.sidebar-header .s-sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.2; }

.sidebar-nav { padding: .5rem; }
.sidebar-nav .nav-caption {
    display: block;
    padding: .5rem .5rem .25rem;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--text-tertiary);
}

/* 激活态 = 墨色药丸（对应 Stitch 的 bg-ink text-text-inverse） */
.nav-item {
    padding: .5rem .75rem;
    border-radius: var(--r-ctl);
    border-left: none;
    gap: .625rem;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nav-item.active {
    background: var(--ink);
    color: var(--text-inverse);
    font-weight: 600;
    border-left-color: transparent;
}
.nav-item.active .nav-icon { color: var(--text-inverse); }
.nav-item.active .material-symbols-outlined { color: var(--text-inverse); }

.sidebar-footer { padding: .5rem; border-top: 1px solid var(--border-default); display: block; }
.sidebar-user {
    padding: .625rem;
    border-radius: var(--r-ctl);
    background: rgba(245, 245, 244, .6);
    border: 1px solid var(--border-subtle);
    gap: .625rem;
}
.sidebar-avatar {
    width: 32px; height: 32px;
    background: var(--ink);
    color: var(--text-inverse);
    font-size: 13px;
}
.sidebar-username { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sidebar-user .s-role { font-size: 12px; color: var(--text-tertiary); }
.sidebar-user .s-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: .375rem; margin-top: .375rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
}
.sidebar-user .s-actions a { color: var(--text-secondary); text-decoration: none; cursor: pointer; }
.sidebar-user .s-actions a:hover { color: var(--text-primary); }
.sidebar-user .s-actions a.danger:hover { color: var(--danger-base); }
.sidebar-logout {
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--r-ctl);
    padding: .25rem .625rem;
    font-size: 12px;
}
.sidebar-logout:hover { background: var(--bg-subtle); color: var(--text-primary); }

.topbar {
    height: var(--topbar-h);
    padding: 0 1.5rem;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--border-default);
}
.topbar-title { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -.01em; }
.topbar .online { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.topbar .online .dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--success-base); }
.topbar .node { font-size: 13px; color: var(--text-tertiary); }

.content-area { padding: 1.5rem; background: var(--bg-muted); }

/* 页面头部：大标题 + 副标题 + 右侧元信息（对应 Stitch 的 sub-header） */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.page-header .page-sub { font-size: 12px; color: var(--text-tertiary); margin-left: .5rem; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-meta {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .75rem;
    background: rgba(245, 245, 244, .7);
    border-radius: var(--r-ctl);
    font-size: 13px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. 卡片与容器：边框优先
   ========================================================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    box-shadow: none;
    margin-bottom: 1rem;
    overflow: hidden;
}
.card:last-child { margin-bottom: 0; }
.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.card-body { padding: 1.25rem; }

/* 英雄卡：20px 圆角 + 顶部浅底标题带（对应 Stitch Hero Card）
   命名用 hero-panel，避免与旧表的 .hero-card（首页渐变 CTA 横条）撞名 */
.hero-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-hero);
    overflow: hidden;
    margin-bottom: 1rem;
}
.hero-panel .hero-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1rem 1.5rem;
    background: rgba(245, 245, 244, .3);
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
}
.hero-panel .hero-body { padding: 1.5rem; }
.hero-icon {
    width: 44px; height: 44px; border-radius: var(--r-card);
    background: var(--info-bg); color: var(--info-fg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-content { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.hero-sub { font-size: 12px; color: var(--text-tertiary); }

/* ==========================================================================
   4. 指标与数字
   ========================================================================== */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1rem;
    box-shadow: none;
    transition: border-color .15s;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: .25rem; }
.stat-value {
    font-size: 28px; line-height: 36px; font-weight: 700;
    letter-spacing: -.01em; color: var(--text-primary);
    font-family: var(--font-num);
}
.stat-value .unit { font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-left: .25rem; }
.unit { font-size: 12px; color: var(--text-tertiary); }
.stat-sub { font-size: 12px; color: var(--text-tertiary); margin-top: .125rem; }

/* 大指标（卡片内的核心数字，如打卡时间） */
.checkin-time {
    font-size: 28px; line-height: 36px; font-weight: 700;
    letter-spacing: -.01em; color: var(--text-primary);
    font-family: var(--font-num);
}
.checkin-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.checkin-row { display: flex; flex-direction: column; gap: .375rem; }

/* 英雄卡内的三格指标行（到岗 / 离岗 / 当前状态） */
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-row > .metric-cell { padding-right: 1.5rem; }
.metric-row > .metric-cell + .metric-cell { border-left: 1px solid var(--border-default); padding-left: 1.5rem; }
.metric-row > .metric-cell:last-child { padding-right: 0; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; }
.metric-value { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.metric-note { font-size: 12px; color: var(--text-tertiary); margin-top: .125rem; }

/* ==========================================================================
   5. 表格
   ========================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    height: 44px;
    padding: 0 1rem;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-default);
}
tbody td {
    height: 52px;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(239, 246, 255, .5); }
td.text-right, th.text-right { text-align: right; }
td .cell-empty, .cell-empty { color: var(--text-tertiary); }
.text-center { text-align: center; }

/* ==========================================================================
   6. 表单
   ========================================================================== */
.form-group { margin-bottom: 1rem; }
.form-label {
    display: block;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: .375rem;
}
.form-input, .filter-input, .filter-select {
    width: 100%;
    height: 36px;
    padding: 0 .75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-ctl);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    box-shadow: var(--sh-ctl);
    transition: border-color .15s, box-shadow .15s;
}
textarea.form-input { height: auto; min-height: 88px; padding: .625rem .75rem; line-height: 22px; resize: vertical; }
.form-input::placeholder { color: var(--text-tertiary); }
.form-input:focus, .filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-input:disabled { background: var(--bg-subtle); color: var(--text-tertiary); }
select.form-input, .filter-select { appearance: none; cursor: pointer; padding-right: 2rem; }
.filter-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filter-item { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.filter-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

/* ==========================================================================
   7. 按钮：hover 只改色，绝不位移（DESIGN.md 的 Zero Spatial Drift）
   ========================================================================== */
.btn {
    height: 36px;
    padding: 0 .875rem;
    border-radius: var(--r-ctl);
    font-size: 13px;
    font-weight: 500;
    gap: .375rem;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap; /* 按钮文字永不逐字折行（手机/桌面通用，见 §24） */
}
.btn:hover { transform: none !important; }
.btn-sm { height: 28px; padding: 0 .625rem; font-size: 12px; border-radius: var(--r-chip); }
.btn-full { width: 100%; }

.btn-primary { background: var(--primary); color: var(--text-inverse); box-shadow: var(--sh-ctl); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--sh-ctl); }
.btn-primary:disabled { background: #bfdbfe; color: #fff; cursor: not-allowed; }

/* 墨色实心：用于决定性动作（如立即打卡） */
.btn-ink { background: var(--ink); color: var(--text-inverse); box-shadow: var(--sh-ctl); }
.btn-ink:hover { background: #303030; }

.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-secondary:hover { background: var(--bg-card); border-color: var(--border-strong); box-shadow: var(--sh-ctl); }
.btn-secondary:disabled { background: var(--bg-subtle); color: var(--text-tertiary); cursor: not-allowed; }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.btn-danger-ghost { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid #fecaca; }
.btn-danger-ghost:hover { background: #fee2e2; }
.row-actions { display: flex; gap: .375rem; justify-content: flex-end; }
.back-btn { display: inline-flex; align-items: center; gap: .25rem; font-size: 13px; color: var(--text-secondary); cursor: pointer; background: none; border: none; }
.back-btn:hover { color: var(--text-primary); }

/* ==========================================================================
   8. 状态标签：22px 高 + 6px 圆角 + 语义色点（不能只靠颜色表意）
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: .375rem;
    height: 22px; padding: 0 .5rem;
    border-radius: var(--r-chip);
    font-size: 12px; font-weight: 500; line-height: 1;
    white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
.badge-blue   { background: var(--info-bg);    color: var(--info-fg); }
.badge-green  { background: var(--success-bg); color: var(--success-fg); }
.badge-yellow { background: var(--warning-bg); color: var(--warning-fg); }
.badge-red    { background: var(--danger-bg);  color: var(--danger-fg); }
.badge-gray   { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-purple { background: var(--accent-bg);  color: var(--accent-fg); }
.badge-plain::before { display: none; }
.badge-ink { background: var(--ink); color: var(--text-inverse); }

/* 页面标题旁的小计数（列表条目数等） */
.col-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* ==========================================================================
   9. 弹窗：16px 圆角 + 45% 墨色遮罩
   ========================================================================== */
.modal-overlay {
    background: rgba(28, 27, 27, .45);
    backdrop-filter: blur(1px);
    z-index: 100;
}
.modal {
    border-radius: var(--r-modal);
    box-shadow: var(--sh-modal);
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    max-height: 88vh;
    overflow: hidden;
}
.modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-close {
    width: 28px; height: 28px; border-radius: var(--r-chip);
    background: transparent; border: none; color: var(--text-tertiary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 18px; line-height: 1;
}
.modal-close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.modal-body { padding: 1.25rem; overflow-y: auto; }
.modal-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--border-subtle); background: var(--bg-card); gap: .5rem; }

/* ==========================================================================
   10. 登录页：去掉旧的高饱和渐变，改为克制的暖白画布
   ========================================================================== */
.login-page {
    min-height: 100vh;
    background: var(--bg-muted);
    background-image:
        radial-gradient(circle at 15% 12%, rgba(37, 99, 235, .06), transparent 42%),
        radial-gradient(circle at 88% 88%, rgba(124, 58, 237, .05), transparent 40%);
    padding: 1rem;
}
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-modal);
    box-shadow: var(--sh-card);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}
.login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-logo .logo-icon {
    width: 48px; height: 48px;
    border-radius: var(--r-card);
    background: var(--ink);
    box-shadow: var(--sh-ctl);
    margin-bottom: .875rem;
}
.login-logo .logo-icon span { font-size: 20px; }
.login-logo h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: .125rem; }
.login-logo p { font-size: 13px; color: var(--text-tertiary); }
.login-page .form-input { height: 40px; }
.login-page .btn { height: 40px; }
.login-error {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .625rem .75rem; margin-bottom: 1rem;
    background: var(--danger-bg); color: var(--danger-fg);
    border: 1px solid #fecaca; border-radius: var(--r-ctl);
    font-size: 13px; line-height: 20px;
}

/* ==========================================================================
   11. 打卡考勤
   ========================================================================== */
.checkin-box {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1rem;
}
.checkin-box.checked { border-color: var(--border-default); }
.checkin-box + .checkin-box { margin-left: .75rem; }
.checkin-badge { display: inline-flex; align-items: center; gap: .375rem; font-size: 12px; }
.checkin-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.checkin-btns .btn { flex: 0 0 auto; }

.state-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.state-row .state-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    height: 32px; padding: 0 .75rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.state-row .state-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.state-row .state-btn.active { background: var(--ink); border-color: var(--ink); color: var(--text-inverse); font-weight: 600; }
.state-row .state-btn.active .material-symbols-outlined { color: var(--text-inverse); }

/* 今日流水：时间线 */
.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border-default); }
.timeline-item { position: relative; padding: .375rem 0; }
.timeline-dot {
    position: absolute; left: -1.25rem; top: .6875rem;
    width: 9px; height: 9px; border-radius: 9999px;
    background: var(--bg-card); border: 2px solid var(--primary);
}
.timeline-content { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: 13px; }
.timeline-time { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.timeline-body { color: var(--text-secondary); }
.timeline-duration { font-size: 12px; color: var(--text-tertiary); }

/* ==========================================================================
   12. 两地互见看板
   ========================================================================== */
.loc-title { display: flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.loc-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); }
.loc-title .loc-count { font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.member-card, .board-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1rem 1rem 1rem 1.125rem;
    overflow: hidden;
    display: block;
}
/* 左侧 3px 状态条：在岗绿 / 迟到琥珀 / 未打卡虚线灰 */
.member-status-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-strong); }
.member-card.member-ok .member-status-bar,
.board-card.board-ok .member-status-bar { background: var(--success-base); }
.member-card.member-late .member-status-bar,
.board-card.board-late .member-status-bar { background: var(--warning-base); }
.member-card.member-none, .board-card.board-none {
    border-style: dashed; border-color: var(--border-strong); opacity: .72;
}
.member-card.member-none .member-status-bar, .board-card.board-none .member-status-bar { background: var(--border-strong); }
.member-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.member-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: .375rem; }
.member-stats { display: flex; align-items: center; gap: .75rem; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.member-chip { font-size: 12px; }
.member-report { margin-top: .5rem; font-size: 13px; color: var(--text-secondary); }
.member-done { color: var(--success-fg); }
.member-pending { color: var(--text-tertiary); }
.board-badges { display: inline-flex; align-items: center; gap: .375rem; }
.board-plan { margin-top: .375rem; font-size: 12px; color: var(--text-tertiary); }
.board-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ==========================================================================
   13. 工作汇报
   ========================================================================== */
.report-stats {
    display: flex; align-items: center; gap: 1.25rem;
    padding: .75rem 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-ctl);
    flex-wrap: wrap;
}
.report-stat { font-size: 13px; color: var(--text-secondary); }
.report-item, .rpt-block { border-top: 1px solid var(--border-subtle); padding: .875rem 0; }
.report-item:first-child, .rpt-block:first-child { border-top: none; padding-top: 0; }
.report-header { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.report-avatar {
    width: 28px; height: 28px; border-radius: 9999px;
    background: var(--ink); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.report-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.report-date { font-size: 12px; color: var(--text-tertiary); }
.report-content { font-size: 13px; color: var(--text-secondary); line-height: 22px; }
.rpt-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-bottom: .25rem; }
.rpt-text { font-size: 13px; color: var(--text-primary); line-height: 22px; white-space: pre-wrap; }
.submit-bar { height: 6px; background: var(--bg-subtle); border-radius: 9999px; overflow: hidden; }
.submit-fill { height: 100%; background: var(--primary); border-radius: 9999px; transition: width .3s; }
.report-stats.auto-note { background: var(--info-bg); border-color: #bfdbfe; color: var(--info-fg); }

/* ==========================================================================
   14. 任务 / 日程
   ========================================================================== */
.task-form { display: flex; gap: .5rem; margin-bottom: .75rem; }
.task-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.task-item:last-child { border-bottom: none; }
.task-check { flex-shrink: 0; }
.task-title { font-size: 13px; color: var(--text-primary); }
.task-title.done { color: var(--text-tertiary); text-decoration: line-through; }
.task-sub { font-size: 12px; color: var(--text-tertiary); }
.tasks-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tasks-col .tasks-col-head { display: flex; align-items: center; gap: .375rem; font-size: 12px; font-weight: 600; margin-bottom: .5rem; }
.dot-done, .dot-empty { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }
.dot-done { background: var(--success-base); }
.dot-empty { background: var(--border-strong); }
.chip-done   { background: var(--success-bg); color: var(--success-fg); }
.chip-pending { background: var(--neutral-bg); color: var(--neutral-fg); }
.done { color: var(--success-fg); }
.undo { color: var(--text-tertiary); }
.goal-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--border-subtle); }
.goal-row:last-child { border-bottom: none; }
.day-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--border-strong); display: inline-block; }
.day-dot.on { background: var(--success-base); }

/* ==========================================================================
   15. 详情页 / 信息展示
   ========================================================================== */
.detail-hero {
    display: flex; align-items: center; gap: .875rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.detail-hero-avatar {
    width: 44px; height: 44px; border-radius: var(--r-card);
    background: var(--ink); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.detail-hero-info { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.detail-hero-meta { font-size: 12px; color: var(--text-tertiary); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.info-item { background: var(--bg-subtle); border-radius: var(--r-ctl); padding: .625rem .75rem; }
.info-label { font-size: 12px; color: var(--text-tertiary); margin-bottom: .125rem; }
.info-value { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.content-cell { max-width: 380px; }
.contact-min-item { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.contact-min-item:last-child { border-bottom: none; }
.ci-name { color: var(--text-primary); font-weight: 500; }
.ci-dur { color: var(--text-tertiary); }
.quick-contact-box { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-ctl); padding: .75rem; margin-top: .5rem; }
.qc-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: .5rem; }
.tab-bar { display: flex; gap: .25rem; background: var(--bg-subtle); padding: .25rem; border-radius: var(--r-ctl); }
.tab-btn {
    height: 28px; padding: 0 .75rem; border: none; background: transparent;
    border-radius: var(--r-chip); font-size: 13px; color: var(--text-secondary); cursor: pointer;
    font-family: var(--font-sans);
}
.tab-btn.active { background: var(--bg-card); color: var(--text-primary); font-weight: 600; box-shadow: var(--sh-ctl); }
.pager { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 0 0; }
.pwd-banner {
    display: flex; align-items: center; gap: .5rem;
    padding: .625rem .875rem; margin-bottom: 1rem;
    background: var(--warning-bg); color: var(--warning-fg);
    border: 1px solid #fde68a; border-radius: var(--r-ctl);
    font-size: 13px;
}

/* 颜色辅助（旧标记中的 blue/green/orange/red） */
.blue, .green, .orange, .red { font-weight: 600; }
.blue { color: var(--info-fg); }
.green { color: var(--success-fg); }
.orange { color: var(--warning-fg); }
.red { color: var(--danger-fg); }

/* ==========================================================================
   16. 空态 / 提示
   ========================================================================== */
.empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; }
.empty-icon { color: var(--border-strong); }
.empty-text { font-size: 13px; color: var(--text-tertiary); }
.empty .material-symbols-outlined { font-size: 32px; color: var(--border-strong); }
.error { color: var(--danger-fg); font-size: 13px; }
.warn  { color: var(--warning-fg); font-size: 13px; }

.toast-box { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast {
    display: flex; align-items: center; gap: .5rem;
    min-width: 220px; max-width: 380px;
    padding: .625rem .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-ctl);
    box-shadow: var(--sh-pop);
    font-size: 13px; color: var(--text-primary);
}
.toast.success { border-left-color: var(--success-base); }
.toast.error   { border-left-color: var(--danger-base); }
.toast.warn    { border-left-color: var(--warning-base); }
.toast-close { margin-left: auto; background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 15px; line-height: 1; }

/* ==========================================================================
   17. 工具类与响应式
   ========================================================================== */
.text-right { text-align: right; }
.font-mono { font-family: var(--font-num); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 1279px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .board-grid, .member-grid, .tasks-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    :root { --sidebar-w: 0px; }
    .stats-grid { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .metric-row { grid-template-columns: 1fr; }
    .metric-row > .metric-cell { padding-right: 0; }
    .metric-row > .metric-cell + .metric-cell {
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        margin-top: .75rem; padding-top: .75rem;
    }
    .content-area { padding: 1rem; }
    .page-title { font-size: 20px; line-height: 28px; }
    .card-body, .hero-panel .hero-body { padding: 1rem; }
    .modal { border-radius: var(--r-hero) var(--r-hero) 0 0; }
}

/* 无障碍：尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   18. 旧表残留纠偏
   --------------------------------------------------------------------------
   旧样式表里有一批规则会破坏新设计（彩色顶条、hover 位移、双重左侧色条、
   渐变英雄条等）。它们的选择器权重与新表相同甚至更高，必须逐条显式压掉，
   否则改一处冒一处。全部集中在这里，便于日后统一清理。
   ========================================================================== */

/* 指标卡：旧表用 ::before 画 4 色渐变顶条，且 hover 会上浮 2px —— 新设计一律取消 */
.stat-card::before { display: none !important; }
.stat-card:hover { transform: none; box-shadow: none; }

/* 成员卡 / 看板卡：同样取消上浮与阴影膨胀 */
.member-card:hover, .board-card:hover { transform: none; box-shadow: none; }

/* 看板卡旧表用 4px border-left 表状态，新设计改用 3px 绝对定位色条 —— 去重 */
.board-ok, .board-late, .board-none { border-left-width: 1px; border-left-color: var(--border-default); }
.board-ok > .member-status-bar { background: var(--success-base); }
.board-late > .member-status-bar { background: var(--warning-base); }
.board-none > .member-status-bar { background: var(--border-strong); }
.board-grid, .member-grid { padding: 0; margin: 0; }
.board-badges { margin-bottom: 0; }
.board-name { margin-bottom: 0; }
.board-line { margin-bottom: 0; }

/* 首页英雄 CTA：旧表是深色渐变横条，新设计改为克制白卡 + 墨色图标 */
.hero-card {
    background: var(--bg-card);
    background-image: none;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1.25rem;
    gap: 1rem;
    box-shadow: none;
}
.hero-icon { width: 44px; height: 44px; background: var(--info-bg); border-radius: var(--r-card); }
.hero-icon svg { width: 22px; height: 22px; color: var(--info-fg); }
.hero-content h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: .125rem; }
.hero-content p { font-size: 12px; color: var(--text-tertiary); opacity: 1; }

/* 打卡按钮：旧表把它拉成 flex:1 + 16px 大字，新设计是常规尺寸并排 */
.checkin-btns { gap: .5rem; margin-bottom: 0; }
.checkin-btns .btn { flex: 0 0 auto; height: 36px; padding: 0 .875rem; font-size: 13px; font-weight: 500; }

/* 区块标题：旧表自带 3px 蓝色左边框，新设计用墨色短条，避免出现两条 */
.loc-title { border-left: none; padding-left: 0; margin-bottom: 0; }

/* 时间线：旧表带 1rem 1.5rem 内边距，会把圆点的负偏移定位挤歪 */
.timeline { padding: 0; }

/* 侧栏用户卡：旧表是横排 flex，新设计是「信息 + 操作」两段结构 */
.sidebar-user { display: block; }
.sidebar-username, .sidebar-user .s-actions a { white-space: nowrap; }

/* 表格：旧表给表头加了大写转换与字距，中文环境无意义 */
thead th { text-transform: none; letter-spacing: normal; }

/* 待办项：旧表用 space-between 把内容推到两端 */
.task-item { justify-content: flex-start; padding: .625rem 0; }

/* 待办 / 汇报块：旧表靠自身 padding 撑开，改由卡片统一控制内边距 */
.tasks-col { background: var(--bg-subtle); padding: .75rem; }
.report-item { padding: .875rem 0; border-bottom: none; }
.report-item + .report-item { border-top: 1px solid var(--border-subtle); }

/* 分页条：旧表带顶部分割线，新设计保持轻量 */
.pager { border-top: none; padding: .75rem 0 0; }

/* 成员统计行：旧表是 2 列小格子，新版是单行内联 */
.member-stats { display: flex; align-items: center; gap: .75rem; }

/* 进度条：旧表 14px 高 + 渐变，新设计 6px 纯色 */
.submit-bar { height: 6px; background: var(--bg-subtle); }
.submit-fill { background: var(--primary); transition: width .3s ease; }

/* 提示条：旧表 4px 左边框 + 大圆角，统一到 3px */
.toast { border-left-width: 3px; border-radius: var(--r-ctl); min-width: 220px; }

/* 弹窗关闭按钮 / 分页 / 标签页等旧尺寸统一 */
.modal-close { line-height: 1; }
.tab-btn { padding: 0 .75rem; border-radius: var(--r-chip); }

/* 详情信息块：旧表用内层选择器加 padding，这里统一 */
.info-item { padding: .625rem .75rem; }
.info-item .info-label { color: var(--text-tertiary); }
.info-item .info-value { color: var(--text-primary); font-weight: 500; }

/* 空态图标：旧表无图标位，新增 Material Symbols 支持 */
.empty { gap: .5rem; }

/* 状态色条宽度：旧表用后代选择器写成 4px，权重高于新表的单类选择器，需显式压回 3px */
.member-card .member-status-bar,
.board-card .member-status-bar { width: 3px; border-radius: 0; }

/* ==========================================================================
   19. 成员办公点编辑（打卡考勤页 · 仅管理员可见）
   --------------------------------------------------------------------------
   对应接口 PUT /api/users/:id/location（后端已带 requireAdmin）。
   改完即存，不设保存按钮 —— 与「打卡、切状态都是一次点击」的摩擦原则一致。
   ========================================================================== */
.loc-edit-list { display: flex; flex-direction: column; }

.loc-edit-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.4fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
}
.loc-edit-row + .loc-edit-row { border-top: 1px solid var(--border-subtle); }

.loc-edit-who { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.loc-edit-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 600;
}
.loc-edit-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.loc-edit-row .form-input { height: 34px; font-size: 13px; }

@media (max-width: 767px) {
    .loc-edit-row { grid-template-columns: 1fr auto; gap: .5rem .625rem; }
    .loc-edit-who { grid-column: 1 / -1; }
}

/* ==========================================================================
   20. 团队成员管理（打卡考勤页 · 仅管理员可见）
   --------------------------------------------------------------------------
   在原「成员办公点」基础上合并了成员全生命周期操作：
   新增成员 / 编辑资料 / 重置密码 / 停用启用。
   办公点仍沿用「改完即存」，其余操作走图标按钮 + 二次确认。
   停用是软删除（active=0）：无法登录，但历史日报、客户、打卡数据全部保留。
   ========================================================================== */
.um-list { display: flex; flex-direction: column; }

.um-row {
    display: grid;
    grid-template-columns: 28px minmax(150px, 1fr) minmax(170px, 1.2fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
}
.um-row + .um-row { border-top: 1px solid var(--border-subtle); }
.um-row.um-off { opacity: .55; }

.um-who { min-width: 0; }
.um-name-line { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.um-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.um-meta { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.um-row .form-input { height: 34px; font-size: 13px; }

.um-ops { display: flex; align-items: center; gap: .125rem; }

/* 图标按钮：hover 只换底色，绝不位移（DESIGN.md 的 Zero Spatial Drift） */
.icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--bg-subtle); border-color: var(--border-default); color: var(--text-primary); }

.um-hint {
    display: flex; align-items: flex-start; gap: .375rem;
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px; line-height: 18px; color: var(--text-tertiary);
}
.um-hint .material-symbols-outlined { flex-shrink: 0; margin-top: 2px; }

/* 表单辅助：必填星号与说明文字 */
.req { color: var(--danger-base); }
.form-hint { font-size: 12px; line-height: 18px; color: var(--text-tertiary); margin-top: .3125rem; }

@media (max-width: 767px) {
    .um-row { grid-template-columns: 28px 1fr auto; gap: .5rem .625rem; }
    .um-row .loc-edit-avatar { grid-column: 1; grid-row: 1; }
    .um-row .um-who          { grid-column: 2; grid-row: 1; }
    .um-row .um-ops          { grid-column: 3; grid-row: 1; }
    .um-row .um-loc          { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   21. 工作台（dashboard）—— 按 Stitch 稿的 BLOCK A/B/C 顺序排布
   --------------------------------------------------------------------------
   A 核心指标 → B 自媒体矩阵达成 → C 昨日实绩归档 → 今日全员汇报 → 我的待办
   指标卡与进度条是本节的公共件，后续页面（销售 / 新媒体 / 汇报 / 看板）复用。
   ========================================================================== */

/* ---- 通用指标卡：label+icon 一行，数字一行，脚注一行 ---- */
.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: border-color .15s;
}
.metric-card:hover { border-color: var(--border-strong); }
.metric-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.metric-card-head .stat-label { margin-bottom: 0; }
.metric-value { display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap; }
.metric-foot { font-size: 12px; line-height: 18px; color: var(--text-tertiary); }
.metric-foot strong { color: var(--text-secondary); font-weight: 600; }

/* ---- 通用进度条：6px 纯色，达标转绿 ---- */
.bar { height: 6px; background: var(--bg-subtle); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width .3s ease; }
.bar-fill.bar-ok { background: var(--success-base); }
.metric-card .submit-bar { margin-top: .125rem; }

/* ---- 自媒体矩阵：平台块 + 本周/本月双轨 ---- */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.goal-block {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    padding: .875rem 1rem;
    background: var(--bg-muted);
}
.goal-block-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: .625rem; }
.goal-line + .goal-line { margin-top: .625rem; }
.goal-line-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .3125rem;
    font-size: 12px; color: var(--text-secondary);
}
.goal-line-head .num { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ---- 昨日归档横条 ---- */
.slim-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(245, 245, 244, .35);
}
.slim-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.slim-stats {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}
.sb-stat {
    display: inline-flex; align-items: center; gap: .3125rem;
    font-size: 12px; color: var(--text-secondary);
}
.sb-stat strong {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    margin: 0 .125rem; font-variant-numeric: tabular-nums;
}

/* ---- 昨日逐人明细 ---- */
.yest-list { padding: .375rem 1.25rem .875rem; }
.yest-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    font-size: 13px;
}
.yest-item + .yest-item { border-top: 1px solid var(--border-subtle); }
.yest-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.yest-nums { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.yest-text {
    color: var(--text-tertiary); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 我的待办 ---- */
.task-list { padding: 0 1.25rem .5rem; }

/* ---- 改密提示条：图标与文字同基线 ---- */
.pwd-banner-text { display: inline-flex; align-items: center; gap: .375rem; }
.pwd-banner-text .material-symbols-outlined { flex-shrink: 0; }

@media (max-width: 1023px) {
    .goal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .slim-stats { gap: .5rem .875rem; }
    .yest-item { grid-template-columns: 1fr; gap: .125rem; }
    .yest-text { white-space: normal; }
}

/* ==========================================================================
   22. 图标化补齐：把原 Emoji 换成 Material Symbols 后的通用件
   --------------------------------------------------------------------------
   Emoji 在不同系统上字形、基线、色彩都不受控（Windows 是彩色 Segoe UI Emoji，
   和墨色设计语言冲突），统一换成字形可控的图标字体。
   ========================================================================== */

/* 按钮内图标不参与收缩，保证「图标 + 文字」不会挤成两行 */
.btn .material-symbols-outlined { flex-shrink: 0; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

/* 弹窗标题：允许放图标 */
.modal-title { display: flex; align-items: center; gap: .375rem; }

/* 返回按钮：图标与文字同基线 */
.back-btn { display: inline-flex; align-items: center; gap: .25rem; }

/* 联系记录时长：时间线右侧 */
.tl-duration {
    display: inline-flex; align-items: center; gap: .25rem;
    color: var(--text-secondary); font-size: 13px;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tl-duration .material-symbols-outlined { color: var(--text-tertiary); }

/* 正文内联链接（如作品链接） */
.link-inline {
    display: inline-flex; align-items: center; gap: .1875rem;
    color: var(--info-fg); font-size: 13px; text-decoration: none;
}
.link-inline:hover { text-decoration: underline; }

/* 今日已联系 / 联系记录行首图标 */
.ci-line { display: inline-flex; align-items: center; gap: .375rem; }
.ci-line .material-symbols-outlined { color: var(--text-tertiary); }
.ci-dur { display: inline-flex; align-items: center; gap: .1875rem; }
.ci-dur .material-symbols-outlined { color: var(--text-tertiary); }

/* 大留白空态（整块列表为空时） */
.empty-lg { padding: 3rem 1rem; }

/* 成员芯片行：已完成 / 未完成用图标区分，不只靠颜色 */
.chip-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .875rem; }
.chip-mark { margin-left: .25rem; }
.member-chip.chip-done .chip-mark { color: var(--success-fg); }
.member-chip.chip-pending .chip-mark { color: var(--text-tertiary); }

/* 表头副标题（日期等） */
.th-sub {
    font-size: 11px; font-weight: 400;
    color: var(--text-tertiary);
    text-transform: none; letter-spacing: normal;
}

/* 汇报里的待办完成情况 */
.ok-text { color: var(--success-fg); font-weight: 500; }
.undo-text { color: var(--warning-fg); font-weight: 500; }

/* ==========================================================================
   23. 移动端抽屉导航（≤768px）
   --------------------------------------------------------------------------
   旧方案在 768px 以下把侧栏 left:-260px 移出屏外，且没有任何开合入口，
   手机上无法切页、无法退出登录。本节补：顶栏汉堡按钮 + 遮罩 + 抽屉展开。
   ========================================================================== */

.topbar-left { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 1; }

.nav-toggle {
    display: none;
    width: 36px; height: 36px; flex-shrink: 0;
    align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--r-ctl);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.nav-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* 遮罩只在移动断点出现；桌面端即使 navOpen 残留为 true 也不会挡页面 */
.nav-scrim { display: none; }

@media (max-width: 767px) {
    .nav-toggle { display: inline-flex; }
    /* 767px 以下主题把 --sidebar-w 压成 0，抽屉展开时必须显式给回宽度 */
    .sidebar.show { width: 240px; }
    .nav-scrim {
        display: block;
        position: fixed; inset: 0; z-index: 90;
        background: rgba(28, 27, 27, .4);
    }
}

/* ==========================================================================
   24. 移动端数据密度收口（≤767px）—— 2026-10-13 手机端错乱修复
   --------------------------------------------------------------------------
   为什么集中写在这里：
   ① index.html 内联 <style>（7-311 行）先于 theme.css 加载，同权重选择器
      「文档序靠后者胜」—— 内联块里凡与 theme.css 无条件规则同名的移动规则
      全被压死（.content-area / .topbar 的 padding、.grid-2 等）；
   ② 768px 与 767px 两套断点差 1px，在 768px 宽度档造成内联规则集体失效。
   故：断点统一 767px（本文件与 index.html:301 同步改，两边必须一致，
   否则 768px 处会出现「侧栏是屏外抽屉、汉堡按钮却被藏」的死局），
   修复只写在本节（全表最末，同权重必胜），不再回改内联块。
   ========================================================================== */

@media (max-width: 767px) {
    /* ① 顶栏：允许换行 + 按内容撑高。48px 固定高 + 无 wrap 是「文字被压成
          竖排、越界覆盖下方内容」的根源。手机上隐藏「协同联机正常 | IP-OFFICE-XXX」
          文字（保留绿点），日期为手机端最高价值信息 */
    .topbar {
        padding: 0 .75rem;
        height: auto;
        min-height: var(--topbar-h);
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .topbar .online > span:not(.dot) { display: none; }
    .topbar-title, .page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .page-meta { white-space: nowrap; }

    /* ② 卡片头：长说明/按钮换行到第二行，标题不再被挤成逐字竖排
          （.slim-head / .hero-head 早已有 wrap，此处补齐同构组件） */
    .card-header { flex-wrap: wrap; row-gap: .5rem; }
    .card-header .btn, .card-header .page-actions { flex-shrink: 0; }

    /* ③ 表格：给最小宽度，让 .table-wrap 真正横向滚动，不再把列压成竖排单字 */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 900px; }
    tbody td { padding: .5rem .75rem; }
    thead th { padding: 0 .75rem; }

    /* ③-P1 新媒体 10 列表：手机上隐藏「发布时间 / 文案摘要」两列（作品详情页仍可看全）。
          用 .table-wrap .table-media 提高权重，覆盖上面的 900px */
    .table-wrap .table-media { min-width: 600px; }
    .table-media th:nth-child(5), .table-media td:nth-child(5),
    .table-media th:nth-child(6), .table-media td:nth-child(6) { display: none; }

    /* ⑤ 筛选栏：竖排 + 撑满 + 左对齐（旧效果 = column + align-items:center，
          控件收缩到内容宽度并居中，看起来像坏了） */
    .filter-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
    .filter-item { width: 100%; min-width: 0; }
    .filter-select, .filter-input { width: 100%; }

    /* ⑥ 首页 Hero CTA：允许换行 + 按钮独占整行。
          仅写 flex-wrap 不够：.hero-content 的 flex-basis 为 0，
          三项能挤进一行时永远不会换行，正文仍被压到约 118px（已实测）；
          flex: 1 0 100% 强制按钮换到下一行并撑满，正文恢复整行宽度 */
    .hero-card { flex-wrap: wrap; padding: 1rem; gap: .75rem; }
    .hero-card .btn { flex: 1 0 100%; justify-content: center; }
    .hero-icon { width: 38px; height: 38px; }
}

/* ⑦ 指标卡：480–767px 维持 2 列（呼应 ≤1279 的 2 列设计意图），≤479px 才降为单列 */
@media (min-width: 480px) and (max-width: 767px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}