/*
  This file is part of 知行合一 · 任务与知识管理系统 (TaskManager).
  Copyright (C) 2026 TaskManager contributors
  
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

    :root {
      --primary: #006633;
      --primary-light: #e6f4ea;
      --primary-dark: #004d26;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --meeting: #0ea5e5;   /* 分类: 会议(cyan) */
      --exam: #8b5cf6;      /* 分类: 考试(紫) */
      --training: #0d9488;  /* 分类: 培训(teal) — 与 --warning 解耦 */
      /* 色彩语义约定:
         状态徽标(status): 进行中=warning/amber, 已完成=success/green, 驳回/逾期=danger/red
         优先级(priority): 低=gray, 中=info-blue, 高=warning/amber, 紧急=danger/red(仅限优先级)
         分类(category): 使用本套柔和专色 --meeting/--exam/--training/primary/success,不直接复用状态徽标色 */
      --gray-50: #f8fafc;

      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-300: #cbd5e1;
      --gray-400: #64748b;
      --gray-500: #64748b;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1e293b;
      --gray-900: #0f172a;
      --shadow-sm: 0 1px 2px rgba(79,70,231,0.06);
      --shadow: 0 4px 12px rgba(79,70,231,0.08);
      --shadow-lg: 0 8px 24px rgba(79,70,231,0.15);
      --radius-sm: 8px;
      --radius: 16px;
      --radius-lg: 20px;
      --font: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", sans-serif;
      --nav-height: 64px;
      --bottom-nav-height: 56px;
      --brand-bg-color: #F5F6FA;
      --brand-stroke-url: url(#brandGradLight);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: var(--gray-50);
      font-family: var(--font);
      color: var(--gray-800);
      min-height: 100vh;
    }
    body.authed { padding-top: var(--nav-height); }
    @media (max-width: 767px) { body.authed { padding-top: var(--nav-height); padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); } }
    .app-container { max-width: 1600px; margin: 0 auto; padding: 24px 24px 40px; }
    @media (max-width: 767px) {
      .app-container { padding: 12px 12px 20px; }
      .card-body { padding: 14px; }
      .card-header { padding: 10px 14px; }
      .card-header.px-3 { padding-left: 14px !important; padding-right: 14px !important; }
      /* 通知下拉改为贴边全宽,避免 min-width:320px 在小屏溢出 */
      #notificationDropdown { position: fixed; left: 8px; right: 8px; top: calc(var(--nav-height) + 4px); min-width: 0; margin-top: 0; }
    }
    @media (min-width: 768px) and (max-width: 1023px) { .app-container { padding: 20px 24px; } }

    /* 管理后台(桌面): 满高布局, 页面不出现竖直滚动条, 列表区域内部滚动 */
    @media (min-width: 768px) {
      body.admin-full .app-container { height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; }
      body.admin-full .admin-tabs { flex-shrink: 0; }
      body.admin-full .admin-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
      body.admin-full .admin-card:not(:last-child) { flex: 0 0 auto; }
      body.admin-full .admin-card > .card-header,
      body.admin-full .admin-card > .card-body:not(.admin-scroll) { flex-shrink: 0; }
      body.admin-full .admin-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    }

    /* PC Top Nav */
    .top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: #fff; border-bottom: 1px solid var(--gray-200); z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .top-nav-inner { width: 100%; max-width: 1600px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 100%; }
    .top-nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--gray-900); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
    .brand-mark { width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 6px; box-shadow: 0 1px 4px rgba(15,23,42,.18); }
    /* 品牌色仅由 data-theme 驱动(base.html 头部脚本对 跟随系统/手动切换 都会写入该属性),
       不再使用 prefers-color-scheme 媒体查询: 避免"系统深色+手动浅色"时 logo 仍被涂深 */
    :root { --brand-bg-color: #F5F6FA; --brand-stroke-url: url(#brandGradLight); }
    .brand-mark .brand-bg { fill: #F5F6FA; }
    .brand-mark .brand-stroke { stroke: url(#brandGradLight); }
    [data-theme="light"] { --brand-bg-color: #F5F6FA; --brand-stroke-url: url(#brandGradLight); }
    [data-theme="light"] .brand-mark .brand-bg { fill: #F5F6FA; }
    [data-theme="light"] .brand-mark .brand-stroke { stroke: url(#brandGradLight); }
    [data-theme="dark"] .brand-mark .brand-bg { fill: #1C1C1E; }
    [data-theme="dark"] .brand-mark .brand-stroke { stroke: url(#brandGradDark); }
    .top-nav-links { display: flex; align-items: center; gap: 4px; }
    .top-nav-links a { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: .9rem; font-weight: 500; color: var(--gray-500); text-decoration: none; border-radius: var(--radius-sm); transition: all .15s; position: relative; }
    .top-nav-links a:hover { background: var(--gray-100); color: var(--gray-700); }
    .top-nav-links a.active { color: var(--primary); font-weight: 700; font-size: 1rem; }
    .top-nav-links a.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--primary); }
    .top-nav-right { display: flex; align-items: center; gap: 12px; }
    .top-nav-right .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; cursor: pointer; }
    .nav-notification { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--gray-500); cursor: pointer; transition: all .15s; text-decoration: none; }
    .nav-notification:hover { background: var(--gray-100); color: var(--gray-700); }
    .nav-notification .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
    /* 顶栏统一检索 */
    .top-nav-search { position: relative; width: 300px; }
    .top-nav-search .input-group { flex-wrap: nowrap; }
    .top-nav-search .form-control { background: var(--gray-100); border: none; box-shadow: none; border-radius: 8px 0 0 8px; font-size: .84rem; }
    .top-nav-search .form-control::placeholder { color: var(--gray-400); font-size: .78rem; }
    .top-nav-search .btn { border-radius: 0 8px 8px 0; padding-left: .68rem; padding-right: .68rem; }
    .top-nav-search .btn i { font-size: .8rem; }
    .top-nav-search .btn:disabled { opacity: .55; }
    @media (max-width: 767px) {
      .top-nav-links { display: none; }
      .top-nav-inner { padding: 0 12px; }
      .top-nav-right { gap: 6px; }
      .top-nav-logo { font-size: .95rem; }
      .brand-mark { width: 1.2rem; height: 1.2rem; }
      .top-nav-search { flex: 1 1 auto; width: auto; min-width: 0; max-width: 320px; }
      .top-nav-search .form-control { font-size: .84rem; }
      .top-nav-user-name { display: none; }
      .role-badge { display: none !important; }
    }
    /* 统一检索浮层(桌面下拉 / 全屏共用) */
    .us-group-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px 6px; font-size: .75rem; font-weight: 700; color: var(--gray-600); }
    .us-sec + .us-sec { border-top: 1px solid var(--gray-100); }
    .us-count { min-width: 20px; text-align: center; color: #fff; border-radius: 100px; font-size: .62rem; padding: 1px 6px; }
    .us-r-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; color: var(--gray-800); cursor: pointer; }
    .us-r-item:hover, .us-r-item.us-active { background: var(--gray-50); }
    .us-item-main { flex: 1; min-width: 0; }
    .us-item-title { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .us-item-title mark { background: #fef08a; padding: 0 2px; border-radius: 2px; }
    .us-item-sub { font-size: .72rem; color: var(--gray-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .us-item-ico { font-size: 1rem; flex-shrink: 0; line-height: 1.3; }
    .us-pri { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
    .us-score { font-size: .64rem; color: var(--warning); font-weight: 700; flex-shrink: 0; margin-top: 6px; }
    .us-empty { padding: 22px 14px 8px; font-size: .8rem; color: var(--gray-400); text-align: center; }
    .us-empty i { font-size: 1.4rem; display: block; margin-bottom: 8px; opacity: .6; }
    .us-empty-sub { padding: 0 14px 20px; font-size: .72rem; color: var(--gray-400); text-align: center; }
    .us-more { display: block; padding: 6px 14px 10px; font-size: .74rem; color: var(--primary); text-decoration: none; }
    .us-more:hover { color: var(--primary-dark); }
    .us-foot-link { display: flex; align-items: center; gap: 6px; width: 100%; font-size: .74rem; color: var(--primary); text-decoration: none; padding: 8px 12px; }
    .us-foot-link:hover { color: var(--primary-dark); }
    .us-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: .85rem; color: var(--gray-700); }
    .us-item:hover { background: var(--gray-50); }
    .us-item i.bi-clock-history { color: var(--primary); font-size: .78rem; flex-shrink: 0; }
    .us-item-tag { font-size: .62rem; padding: 1px 6px; border-radius: 100px; background: var(--gray-100); color: var(--gray-500); margin-left: auto; flex-shrink: 0; }
    .us-hist-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px 2px; font-size: .72rem; font-weight: 700; color: var(--gray-500); }
    .us-hot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 12px; }
    .us-hot-chip { font-size: .72rem; padding: 3px 10px; border-radius: 100px; background: var(--gray-100); border: 1px solid var(--gray-200); color: var(--gray-600); cursor: pointer; }
    .us-hot-chip:hover { background: var(--primary-light); border-color: var(--primary-light); color: var(--primary); }
    .pri-hi { color: #dc2626; }
    .pri-mid { color: #d97706; }
    .pri-low { color: #16a34a; }
    /* 骨架屏(检索加载) */
    .us-skeleton { padding: 10px 14px; }
    .sk-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
    .sk-dot { width: 22px; height: 22px; border-radius: 6px; background: var(--gray-100); flex-shrink: 0; }
    .sk-main { flex: 1; min-width: 0; }
    .sk-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: skShimmer 1.2s infinite; }
    .sk-thin { height: 9px; margin-top: 6px; }
    @keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    /* 统一搜索:移动端沿用顶栏内联搜索框(flex 自适应),独立的放大镜图标按钮保持隐藏,避免两个放大镜 */
    .nav-search-btn { display: none; width: 36px; height: 36px; border: none; background: transparent; color: var(--gray-600); font-size: 1.05rem; border-radius: var(--radius-sm); align-items: center; justify-content: center; cursor: pointer; }
    .nav-search-btn:hover { background: var(--gray-100); color: var(--gray-700); }

    /* 暗色模式暂不启用: 仅导航变暗而内容区仍为亮色会造成割裂,
       待全局 CSS 变量完成暗色映射后整体开放(git 历史保留原实现) */

    /* 检索历史/热门标签 下拉提示 */
    .us-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 18px 44px rgba(15,23,42,.18); border: 1px solid var(--gray-100); overflow: hidden; z-index: 2050; }
    .us-suggest .us-hist-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; font-size: .74rem; font-weight: 700; color: var(--gray-500); }
    .us-suggest .us-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: .84rem; color: var(--gray-700); cursor: pointer; }
    .us-suggest .us-item:hover { background: var(--gray-50); }
    .us-suggest .us-item i { color: var(--gray-400); font-size: .82rem; flex-shrink: 0; }
    .us-suggest .us-item-tag { margin-left: auto; font-size: .62rem; color: var(--primary); background: var(--primary-light); border-radius: 100px; padding: 1px 8px; flex-shrink: 0; }
    .us-suggest .us-hot-chips { padding: 4px 14px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
    .us-suggest .us-hot-chip { font-size: .72rem; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 100px; padding: 3px 10px; cursor: pointer; }
    .us-suggest .us-hot-chip:hover { background: var(--primary-light); border-color: var(--primary-light); color: var(--primary); }
    .us-suggest .us-sg-empty { padding: 14px; text-align: center; font-size: .76rem; color: var(--gray-400); }
    .us-suggest mark { background: #fff3bf; }

    /* 桌面端检索结果弹框(三列,不遮挡导航栏) */
    .us-modal { position: fixed; inset: 0; z-index: 2040; display: none; }
    .us-modal.show { display: block; }
    .us-modal-mask { position: absolute; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: rgba(15,23,42,.32); }
    .us-modal-card { position: absolute; top: calc(var(--nav-height) + 12px); left: 50%; transform: translateX(-50%); width: min(1080px, calc(100vw - 40px)); max-height: calc(100vh - var(--nav-height) - 28px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.22); display: flex; flex-direction: column; overflow: hidden; animation: usModalIn .18s ease-out; }
    @keyframes usModalIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    .us-modal-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
    .us-modal-head .us-q { font-weight: 700; font-size: .9rem; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .us-modal-head .us-modal-query { flex: 1 1 auto; min-width: 0; max-width: 520px; }
    .us-modal-head .us-modal-query .form-control { font-size: .86rem; border-radius: 8px 0 0 8px; }
    .us-modal-head .us-modal-query .btn { border-radius: 0 8px 8px 0; }
    .us-modal-close { margin-left: auto; border: none; background: transparent; color: var(--gray-400); font-size: 1.05rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
    .us-modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
    .us-modal-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; padding: 12px 18px 6px; overflow-y: auto; flex: 1; min-height: 0; }
    .us-modal-body .us-modal-empty { grid-column: 1 / -1; }
    .us-modal-col { min-width: 0; min-height: 100px; padding: 0 8px; }
    .us-modal-col:first-child { padding-left: 0; }
    .us-modal-col:last-child { padding-right: 0; }
    .us-col-head { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--gray-600); padding: 2px 0 6px; }
    .us-col-count { min-width: 20px; text-align: center; color: #fff; border-radius: 100px; font-size: .62rem; padding: 1px 6px; }
    .us-modal-col .us-r-item { padding: 8px 6px; }
    .us-modal-col .us-more { padding: 6px 6px 10px; }
    .us-modal-col .us-empty { padding: 18px 6px; }
    .us-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--gray-100); background: #fff; flex-shrink: 0; }
    .us-modal-foot .us-foot-link { padding: 6px 4px; }
    .us-r-item mark, .us-item-title mark { background: #fff3bf; color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 700; }
    @media (max-width: 1023px) {
      .us-modal-body { grid-template-columns: 1fr; }
      .us-modal-col { padding: 0 4px; }
      .us-modal-col + .us-modal-col { padding-top: 10px; border-top: 1px solid var(--gray-100); }
      .us-modal-card { width: calc(100vw - 24px); }
    }

    /* Mobile Bottom Nav */
    .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: auto; min-height: var(--bottom-nav-height); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--gray-200); z-index: 1000; display: none; }
    @media (max-width: 767px) { .bottom-nav { display: flex; } }
    .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .6rem; color: var(--gray-600); text-decoration: none; position: relative; transition: color .15s; }
    .bottom-nav a.active { color: var(--primary); }
    .bottom-nav a i { font-size: 1.2rem; transition: transform .2s; }
    .bottom-nav a.active i { transform: scale(1.1); }
    .bottom-nav a .dot { position: absolute; top: 4px; right: 50%; transform: translateX(16px); width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
    [data-theme="dark"] {
      .bottom-nav { background: #16181D; border-top: 1px solid #2A2E37; }
      .bottom-nav a { color: #9CA3AF; }
      .bottom-nav a .dot { border-color: #16181D; }
    }

    /* Notification dropdown */
    .notification-item { transition: background .15s; }
    .notification-item:hover { background: var(--gray-50); }
    .notification-item.unread { background: var(--primary-light); }
    .notification-item.unread .unread-dot { display: inline-block; }
    .unread-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }

    /* 快捷悬浮球: 快速创建 待办/随手记/上传知识 (全站) */
    .quick-fab { position: fixed; right: 24px; bottom: 96px; z-index: 1060; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
    @media (max-width: 767px) { .quick-fab { right: 14px; bottom: calc(14px + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); } }
    .quick-fab-toggle { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(79,70,231,.35); cursor: grab; transition: transform .2s, background .2s, box-shadow .2s; }
    .quick-fab-toggle:active { cursor: grabbing; }
    .quick-fab-toggle:hover { background: var(--primary-dark); transform: scale(1.05); box-shadow: 0 8px 22px rgba(79,70,231,.4); }
    .quick-fab.open .quick-fab-toggle { transform: rotate(45deg); }
    .quick-fab-menu { display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
    .quick-fab.open .quick-fab-menu { display: flex; animation: fabIn .18s ease-out; }
    @keyframes fabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .quick-fab-item { display: flex; align-items: center; gap: 8px; border: none; background: #fff; border-radius: 100px; padding: 6px 14px 6px 8px; font-size: .82rem; font-weight: 600; color: var(--gray-800); box-shadow: 0 4px 14px rgba(0,0,0,.12); cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
    .quick-fab-item:hover { transform: translateX(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
    .quick-fab-item-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }

    /* 统一动效: 页面淡入 + 组件微过渡 */
    .app-container { animation: tmFadeIn .22s ease-out; }
    .top-nav, .bottom-nav { animation: tmFadeIn .2s ease-out; }
    @keyframes tmFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    .modal .modal-dialog { transition: transform .18s ease, opacity .18s ease; }
    .modal:not(.show) .modal-dialog { transform: translateY(10px); opacity: 0; }
    .btn { transition: filter .15s, transform .12s, box-shadow .15s, background-color .15s, color .15s, border-color .15s; }
    .btn:not(:disabled):active { transform: scale(.97); }
    .btn:disabled { cursor: not-allowed; opacity: .55; }
    .form-control, .form-select { transition: border-color .15s, box-shadow .15s; }
    .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
    .fade-row { animation: tmFadeIn .2s ease-out; }

    /* Cards */
    .card { background: #fff; border: none; border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .2s; }
    .card:hover { box-shadow: var(--shadow-lg); }
    .card-lift:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); transition: box-shadow .2s, transform .2s; }
    .card-header { background: transparent; border-bottom: 1px solid var(--gray-100); padding: 14px 20px; font-weight: 600; font-size: .88rem; color: var(--gray-700); border-radius: var(--radius) var(--radius) 0 0 !important; }
    .card-body { padding: 20px; }

    /* Stat Cards */
    .stat-grid { display: grid; gap: 16px; }
    .stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 767px) { .stat-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-grid-3 { grid-template-columns: 1fr; gap: 10px; } }
    @media (min-width: 768px) and (max-width: 1023px) { .stat-grid-4 { grid-template-columns: repeat(2, 1fr); } .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .stat-card { padding: 18px 20px; border-radius: var(--radius); color: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .stat-card .stat-icon { font-size: 1.4rem; margin-bottom: 6px; opacity: .9; }
    .stat-card .stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
    .stat-card .stat-label { font-size: .78rem; opacity: .8; margin-top: 2px; }
    .stat-card .stat-trend { font-size: .68rem; opacity: .8; margin-top: 2px; }

    /* Buttons */
    .btn { font-family: var(--font); border-radius: var(--radius-sm); font-weight: 500; transition: all .15s; position: relative; overflow: hidden; }
    .btn:active { transform: scale(.97); }
    .btn-primary { background: var(--primary); border-color: var(--primary); }
    .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(79,70,231,.3); }
    .btn-sm { padding: 3px 12px; font-size: .9rem; border-radius: 8px; }
    .btn-xs-custom { padding: 3px 10px; font-size: .85rem; border-radius: 6px; }

    /* Form Controls - unify across pages */
    .form-control, .form-select, .input-group-text {
      font-family: var(--font);
      font-size: .88rem;
      border-radius: var(--radius-sm);
      border-color: var(--gray-200);
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(79,70,231,.12);
    }
    .form-control-sm, .form-select-sm { font-size: .8rem; border-radius: 6px; }

    /* 统一输入框与按钮高度:固定 height + border-box,页面内联 padding 不影响外高,
       三档:默认 38px / sm 31px / xs 31px。textarea 保持自动高度 */
    .form-control, .form-select, .input-group-text, .btn { height: 38px; }
    .form-control-sm, .form-select-sm, .btn-sm, .btn-xs-custom { height: 31px; }
    textarea.form-control, textarea.form-select { height: auto; min-height: 38px; }
    textarea.form-control-sm, textarea.form-select-sm { height: auto; min-height: 31px; }

    /* Tabs - unify across pages */
    .nav-tabs { border-bottom: 1px solid var(--gray-200); }
    .nav-tab-link { white-space: nowrap; }
    .nav-tabs .nav-link {
      font-family: var(--font);
      font-size: .85rem;
      color: var(--gray-500);
      border: none;
      border-bottom: 2px solid transparent;
      padding: 8px 16px;
      margin-bottom: -1px;
      border-radius: 0;
    }
    .nav-tabs .nav-link:hover { color: var(--gray-700); background: var(--gray-50); }
    .nav-tabs .nav-link.active {
      color: var(--primary);
      background: transparent;
      border-bottom: 2px solid var(--primary);
      font-weight: 600;
    }

    /* Tags / Badges */
    .badge { font-weight: 500; padding: 2px 10px; border-radius: var(--radius-lg); font-size: .7rem; }
    .badge-urgent { background: #fef2f2; color: var(--danger); }
    .badge-high { background: #fff7ed; color: #c2410c; }
    .badge-medium { background: #eef2ff; color: var(--primary); }
    .badge-low { background: var(--gray-100); color: var(--gray-500); }

    /* List Group */
    .list-group-item { border: none; border-bottom: 1px solid var(--gray-200); padding: 12px 16px; background: transparent; }
    .list-group-item:last-child { border-bottom: none; }

    /* Progress */
    .progress-custom { height: 6px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
    .progress-custom-bar { height: 100%; border-radius: 3px; transition: width .3s; }
    input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--gray-200); border-radius: 2px; outline: none; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); cursor: pointer; box-shadow: 0 0 0 4px rgba(79,70,231,.15); transition: box-shadow .2s; }
    input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(79,70,231,.2); }
    input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); cursor: pointer; border: none; }

    /* Status */
    .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border-radius: var(--radius-lg); font-size: .72rem; font-weight: 500; }
    .status-pending { background: #fff7ed; color: #c2410c; }
    .status-completed { background: #d1fae5; color: #065f46; }
    .status-approved { background: #eef2ff; color: var(--primary); }
    .status-rejected { background: #fef2f2; color: var(--danger); }

    /* Avatar */
    .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; flex-shrink: 0; }
    .avatar-sm { width: 22px; height: 22px; font-size: .6rem; }

    /* Flash */
    .flash-container { position: fixed; top: 80px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
    @media (max-width: 767px) { .flash-container { top: 16px; right: 16px; left: 16px; max-width: none; } }
    .flash-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: flashIn .25s ease-out; }
    @keyframes flashIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
    .flash-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .flash-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    .flash-warning { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
    .flash-info { background: #eef2ff; color: var(--primary); border: 1px solid #c7d2fe; }

    /* Preview */
    .preview-card { border: 2px solid var(--primary); background: var(--primary-light); border-radius: var(--radius); }

    /* Ripple */
    .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: rippleAnim .5s ease-out; pointer-events: none; }
    @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

    /* Utilities */
    .text-muted { color: var(--gray-500) !important; }
    .table { margin-bottom: 0; }
    .table th { font-weight: 600; color: var(--gray-500); border-bottom: 1px solid var(--gray-100); }
    .table td { border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
    .table-hover tbody tr:hover { background: var(--gray-50); }
    .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
    @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.1); z-index: 1100; animation: slideIn .25s ease-out; overflow-y: auto; }
    .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1050; }
    .task-fade-out { animation: fadeOut .3s ease forwards; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 16px; color: var(--gray-400); }
.empty-state svg { width: 84px; height: 84px; margin-bottom: 14px; opacity: .85; }
.empty-state .es-title { font-size: .92rem; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.empty-state .es-sub { font-size: .78rem; color: var(--gray-400); margin-bottom: 14px; max-width: 260px; line-height: 1.5; }
    .notification-dropdown::-webkit-scrollbar { width: 4px; }
    .notification-dropdown::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
    /* 移动端下拉刷新指示器: 紧凑胶囊,主题绿,支持暗黑模式 */
    .ptr-indicator {
      position: fixed;
      top: var(--nav-height);
      left: 50%;
      z-index: 3000;
      height: 44px;
      padding: 0 12px 0 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 100px;
      font-size: .75rem;
      color: var(--gray-500);
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(148, 163, 184, .3);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transform: translate(-50%, -140%);
      transition: transform .12s ease-out;
    }
    .ptr-indicator .ptr-arc {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-light);
      color: var(--primary);
      font-size: .95rem;
      box-shadow: inset 0 0 0 1px rgba(0, 102, 51, .16);
      flex-shrink: 0;
    }
    .ptr-indicator .ptr-arc i { line-height: 1; transition: transform .12s ease-out; }
    .ptr-indicator.pull-ready { color: var(--primary); font-weight: 600; }
    .ptr-indicator.pull-ready .ptr-arc {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 12px rgba(0, 102, 51, .35);
    }
    [data-theme="dark"] {
      .ptr-indicator {
        background: rgba(15, 23, 42, .92);
        border-color: rgba(71, 85, 105, .55);
        color: var(--gray-400);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
      }
      .ptr-indicator .ptr-arc { background: rgba(0, 102, 51, .3); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .4); }
      .ptr-indicator.pull-ready { color: #fff; }
      .ptr-indicator.pull-ready .ptr-arc { box-shadow: 0 4px 14px rgba(16, 185, 129, .45); }
    }

    /* ---------- 电子宠物弹窗 ---------- */
    .pet-modal-dialog {
      max-width: none; width: 100%; height: 100%;
      margin: 0;
    }
    .pet-modal-content {
      border: none;
      border-radius: 0;
      overflow-y: auto;
      background: linear-gradient(170deg, #FFE9F0 0%, #F3E5F5 55%, #E8E3FF 100%);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      position: relative;
      min-height: 100%;
    }
    .pet-bg-deco {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.7), transparent 40%),
        radial-gradient(circle at 88% 82%, rgba(255,183,197,.5), transparent 45%),
        radial-gradient(circle at 75% 12%, rgba(255,214,165,.4), transparent 30%);
    }
    .pet-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 4px; position: relative;
    }
    .pet-modal-body { position: relative; padding: 4px 22px 30px; }

    /* 宠物展示台 */
    .pet-stage {
      position: relative; height: 360px; display: flex; align-items: flex-end;
      justify-content: center; perspective: 700px;
      margin-bottom: 4px; overflow: hidden; padding-bottom: 34px;
    }
    .pet-scene { position: absolute; inset: 0; pointer-events: none; }
    .pet-moon {
      position: absolute; top: 22px; right: 28px; width: 46px; height: 46px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fffbe8, #ffe9a8);
      box-shadow: 0 0 22px rgba(255, 220, 120, .55);
    }
    .pet-cloud {
      position: absolute; background: rgba(255,255,255,.8); border-radius: 40px;
      filter: blur(1px);
    }
    .pet-cloud::before, .pet-cloud::after {
      content: ''; position: absolute; background: inherit; border-radius: 50%;
    }
    .pet-cloud-a { width: 90px; height: 26px; top: 42px; left: 20px; animation: petCloudDrift 18s linear infinite; }
    .pet-cloud-a::before { width: 36px; height: 36px; left: 14px; top: -18px; }
    .pet-cloud-a::after { width: 28px; height: 28px; left: 46px; top: -12px; }
    .pet-cloud-b { width: 66px; height: 20px; bottom: 96px; right: 22px; animation: petCloudDrift 24s linear infinite reverse; }
    .pet-cloud-b::before { width: 28px; height: 28px; left: 10px; top: -14px; }
    .pet-cloud-b::after { width: 22px; height: 22px; left: 34px; top: -10px; }
    .pet-ground {
      position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
      width: 300px; height: 60px; border-radius: 50%;
      background: radial-gradient(ellipse at 50% 100%, rgba(180,140,200,.22), transparent 70%);
    }
    .pet-3d-wrap { transform-style: preserve-3d; animation: petFloat 3.2s ease-in-out infinite; cursor: pointer; }
    .pet-3d {
      position: relative; width: 200px; height: 200px;
      transform-style: preserve-3d;
      animation: petBreath 2.6s ease-in-out infinite;
      perspective: 400px;
    }
    /* 头部: 更自然的猫脸比例，带 3D 立体光影 */
    .pet-head {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      width: 152px; height: 128px; border-radius: 52% 52% 42% 42%;
      background:
        linear-gradient(180deg, #fcd89b 0%, #f5b75a 35%, #e8a040 70%, #d48a30 100%),
        radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.15) 0 40%, transparent 60%),
        radial-gradient(ellipse at 70% 40%, rgba(255,255,255,.1) 0 35%, transparent 55%);
      box-shadow:
        inset -12px -14px 24px rgba(180,110,50,.35),
        inset 12px -14px 24px rgba(180,110,50,.35),
        inset 0 18px 28px rgba(255,230,200,.25),
        0 18px 36px rgba(140,90,40,.45),
        0 6px 16px rgba(0,0,0,.18);
      z-index: 3;
    }
    .pet-head::before {
      content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
      width: 72px; height: 38px; border-radius: 50% / 60%;
      background: linear-gradient(180deg, rgba(255,245,220,.4), transparent);
      pointer-events: none; z-index: 1;
    }
    /* 耳朵: 自然三角圆耳，位置更高、更贴合头部轮廓 */
    .pet-ear {
      position: absolute; top: -10px; width: 52px; height: 58px; z-index: 2;
      background:
        linear-gradient(135deg, #f0b050 0%, #e09038 100%),
        radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.12), transparent 50%);
      border-radius: 55% 55% 20% 20% / 65% 65% 18% 18%;
      filter: drop-shadow(0 5px 8px rgba(140,90,40,.35));
      transform-origin: bottom center;
    }
    .pet-ear-l { left: 18px; transform: rotate(-18deg); }
    .pet-ear-r { right: 18px; transform: rotate(18deg); }
    .pet-ear-in {
      position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
      width: 24px; height: 28px;
      background: linear-gradient(180deg, #ffc8dd, #ff99bb);
      border-radius: 50% 50% 25% 25% / 68% 68% 22% 22%;
    }
    /* 脸部 */
    .pet-face { position: absolute; inset: 0; }
    /* 额头/鼻梁微隆起 */
    .pet-face::before {
      content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
      width: 38px; height: 50px; border-radius: 50% / 55%;
      background: linear-gradient(180deg, rgba(255,245,220,.35), transparent);
      pointer-events: none; z-index: 1;
    }
    /* 白色口鼻部: 立体鼻翼垫，更靠前 */
    .pet-muzzle {
      position: absolute; top: 58%; width: 42px; height: 34px; border-radius: 52% 52% 48% 48%;
      background:
        linear-gradient(180deg, #fffef5 0%, #fdf3e0 60%, #f5e0c0 100%),
        radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.5), transparent 60%);
      box-shadow:
        inset 0 -6px 14px rgba(210,150,80,.22),
        inset 0 2px 4px rgba(255,255,255,.4),
        0 4px 10px rgba(180,120,60,.25);
      z-index: 2;
    }
    .pet-muzzle-l { left: 24px; transform: perspective(200px) rotateY(-6deg); }
    .pet-muzzle-r { right: 24px; transform: perspective(200px) rotateY(6deg); }
    /* 眼睛: 更小、更分开、带 3D 眼球感 */
    .pet-eye {
      position: absolute; top: 28px; width: 36px; height: 42px;
      background:
        radial-gradient(circle at 35% 35%, #1a1208 0 22%, #3d2a12 45%, #7a4a1a 75%, #a86a38 100%),
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.4) 0 60%, transparent 80%);
      border-radius: 52% 52% 48% 48%;
      box-shadow:
        inset 0 -3px 8px rgba(0,0,0,.35),
        inset 0 2px 4px rgba(255,255,255,.08),
        0 4px 10px rgba(0,0,0,.25),
        0 0 0 1px rgba(180,120,60,.15);
      overflow: hidden;
      animation: petBlink 5.2s ease-in-out infinite;
      transform-style: preserve-3d;
    }
    .pet-eye::before {
      content: ''; position: absolute; inset: 2px; border-radius: inherit;
      background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.08), transparent 50%);
      pointer-events: none;
    }
    .pet-eye-l { left: 28px; }
    .pet-eye-r { right: 28px; }
    .pet-glint {
      position: absolute; top: 6px; left: 50%; transform: translateX(-55%);
      width: 10px; height: 10px; background: #fff; border-radius: 50%;
      box-shadow:
        7px 13px 0 -1px rgba(255,255,255,.85),
        -8px 18px 0 -2px rgba(255,255,255,.5);
      filter: drop-shadow(0 0 2px rgba(255,255,255,.9));
    }
    .pet-brow {
      position: absolute; top: 20px; width: 20px; height: 4px;
      background: linear-gradient(90deg, transparent, rgba(180,110,55,.45), transparent);
      border-radius: 3px; filter: blur(0.5px);
    }
    .pet-brow-l { left: 34px; transform: rotate(-10deg); }
    .pet-brow-r { right: 34px; transform: rotate(10deg); }
    .pet-nose {
      position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
      width: 0; height: 0; z-index: 3;
      border-left: 9px solid transparent; border-right: 9px solid transparent;
      border-top: 12px solid #d87a5a; border-radius: 4px;
      filter: drop-shadow(0 2px 3px rgba(180,100,50,.4));
    }
    .pet-nose::before {
      content: ''; position: absolute; top: -10px; left: -6px; width: 12px; height: 6px;
      background: radial-gradient(ellipse, #f5c0a0, transparent 70%);
      border-radius: 50%; pointer-events: none;
    }
    .pet-mouth {
      position: absolute; top: 70%; left: 50%; transform: translateX(-50%);
      display: flex; gap: 0; width: 38px; height: 18px; z-index: 3;
    }
    .pet-mouth span {
      display: block; width: 19px; height: 18px;
      border-bottom: 3px solid #a86a38;
      border-radius: 0 0 55% 55%;
    }
    .pet-mouth-r { transform: scaleX(-1); }
    .pet-whisker {
      position: absolute; height: 2px;
      background: linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,252,246,.95), rgba(255,255,255,.5));
      border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.15);
    }
    .pet-whisker-l1 { left: -8px; width: 40px; top: 52%; transform: rotate(-12deg); }
    .pet-whisker-l2 { left: -10px; width: 44px; top: 58%; }
    .pet-whisker-l3 { left: -8px; width: 40px; top: 64%; transform: rotate(12deg); }
    .pet-whisker-r1 { right: -8px; width: 40px; top: 52%; transform: rotate(12deg); }
    .pet-whisker-r2 { right: -10px; width: 44px; top: 58%; }
    .pet-whisker-r3 { right: -8px; width: 40px; top: 64%; transform: rotate(-12deg); }
    .pet-blush {
      position: absolute; top: 72%; width: 30px; height: 16px; border-radius: 50%;
      background: radial-gradient(circle at 30% 50%, rgba(255,160,190,.35), transparent 65%);
      filter: blur(1px);
    }
    .pet-blush-l { left: 16px; } .pet-blush-r { right: 16px; }
    /* 身体: 更有体积感的躯干 */
    .pet-body {
      position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
      width: 136px; height: 116px; border-radius: 52% 52% 40% 40%;
      background:
        linear-gradient(180deg, #f8c468 0%, #f0a850 40%, #e09038 70%, #d08030 100%),
        radial-gradient(ellipse at 35% 45%, rgba(255,255,255,.1), transparent 50%),
        radial-gradient(ellipse at 65% 45%, rgba(255,255,255,.06), transparent 45%);
      box-shadow:
        inset 0 -18px 28px rgba(180,110,45,.4),
        inset -10px 0 20px rgba(180,110,45,.2),
        inset 10px 0 20px rgba(180,110,45,.2),
        0 18px 32px rgba(120,80,35,.5);
      z-index: 1;
    }
    .pet-belly {
      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
      width: 82px; height: 66px; border-radius: 52% 52% 40% 40%;
      background:
        radial-gradient(ellipse at 50% 28%, #fffef5 0 35%, #fdf3e0 70%, #f5e0c0 100%),
        radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.2), transparent 50%);
      box-shadow: inset 0 -8px 16px rgba(230,180,100,.2);
    }
    .pet-paw {
      position: absolute; bottom: 0; width: 38px; height: 26px;
      background: linear-gradient(180deg, #fff6e8, #f0c894); border-radius: 52% 52% 48% 48%;
      box-shadow: inset 0 -6px 10px rgba(200,150,90,.35); z-index: 2;
    }
    .pet-paw::before {
      content: ''; position: absolute; left: 50%; transform: translateX(-50%);
      top: 5px; width: 2px; height: 12px; background: rgba(180,130,80,.55); border-radius: 2px;
      box-shadow: -8px 0 0 -.5px rgba(180,130,80,.55), 8px 0 0 -.5px rgba(180,130,80,.55);
    }
    .pet-paw-l { left: 22px; } .pet-paw-r { right: 22px; }
    /* 尾巴: 更有体积的毛茸茸尾巴 */
    .pet-tail {
      position: absolute; right: -16px; bottom: 24px; width: 58px; height: 28px;
      background:
        linear-gradient(90deg, #f2b058, #e89444),
        radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.1), transparent 40%);
      border-radius: 35% 75% 40% 75%;
      transform: rotate(-22deg); transform-origin: left center; z-index: 0;
      filter: drop-shadow(0 6px 10px rgba(180,110,55,.3));
      animation: petTailWag 2.6s ease-in-out infinite;
    }
    .pet-tail::after {
      content: ''; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
      width: 18px; height: 18px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fffaf0, #f0d098);
      box-shadow: inset -2px -2px 4px rgba(200,150,80,.2);
    }
    .pet-tail::before {
      content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
      width: 28px; height: 18px; border-radius: 50% / 60%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08));
      pointer-events: none;
    }
    .pet-shadow {
      position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
      width: 130px; height: 16px; border-radius: 50%;
      background: radial-gradient(circle, rgba(130,110,125,.3), transparent 70%);
      animation: petShadowPulse 3.2s ease-in-out infinite;
    }
    .pet-hint {
      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
      font-size: .74rem; color: rgba(160,120,140,.7); font-weight: 600;
      background: rgba(255,255,255,.6); padding: 3px 12px; border-radius: 20px;
      white-space: nowrap;
    }
    .pet-particles { position: absolute; inset: 0; pointer-events: none; }
    .pet-particles i {
      position: absolute; font-style: normal; animation: petRise linear infinite;
      opacity: .7;
    }

    /* 互动动画 */
    .pet-anim-feed .pet-face { animation: petEat 0.6s ease-in-out; }
    .pet-anim-play .pet-3d-wrap { animation: petSpinJump 0.9s ease-in-out; }
    .pet-anim-clean .pet-3d-wrap { animation: petShake 0.6s ease-in-out; }
    .pet-anim-sleep .pet-3d-wrap { animation: petSleepPose 2.6s ease-in-out; }
    .pet-anim-sleep .pet-head { animation: petSleepNod 2.6s ease-in-out; }
    .pet-anim-sleep .pet-tail { animation: petSleepTailWag 0.9s ease-in-out infinite; }
    /* 睡觉时闭眼 */
    .pet-anim-sleep .pet-eye {
      background: transparent;
    }
    .pet-anim-sleep .pet-eye::after {
      content: ''; position: absolute; top: 18px; left: 4px; width: 28px; height: 4px;
      background: #a86a38; border-radius: 4px;
    }
    .pet-anim-sleep .pet-glint { opacity: 0; }
    .pet-anim-sleep .pet-eye { animation: none; }
    .pet-anim-pat .pet-3d-wrap { animation: petPat 0.9s ease-in-out; }
    .pet-anim-pat .pet-tail { animation: petPatTailWag 0.45s ease-in-out infinite; }
    .pet-anim-pat .pet-blush { animation: petLovePulse 0.9s ease-in-out infinite; }

    .pet-stage.pet-low .pet-3d { animation: petAlert 0.6s ease-in-out infinite; }

    /* 升级庆祝 */
    .pet-celebrate .pet-3d-wrap { animation: petCelebrateSpin 0.8s ease-in-out; }
    .pet-badge-pop { animation: petBadgePop .5s ease-in-out; }

    @keyframes petFloat {
      0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); }
    }
    @keyframes petBreath {
      0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, 1.02); }
    }
    @keyframes petBlink {
      0%, 90%, 100% { transform: scaleY(1); }
      93%, 96% { transform: scaleY(.12); }
    }
    @keyframes petShadowPulse {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: .8; }
      50% { transform: translateX(-50%) scale(.8); opacity: .5; }
    }
    @keyframes petTailWag {
      0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-40deg); }
    }
    @keyframes petRise {
      0% { transform: translateY(0) scale(.8); opacity: .7; }
      100% { transform: translateY(-80px) scale(1.15); opacity: 0; }
    }
    @keyframes petEat {
      0%, 100% { transform: scale(1); } 40% { transform: scale(1.18, .88); }
    }
    @keyframes petSpinJump {
      0% { transform: translateY(0) rotate(0); }
      30% { transform: translateY(-34px) rotate(-10deg); }
      60% { transform: translateY(-22px) rotate(10deg) scale(1.06); }
      100% { transform: translateY(0) rotate(0); }
    }
    @keyframes petShake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px) rotate(-4deg); }
      75% { transform: translateX(8px) rotate(4deg); }
    }
    @keyframes petSleepPose {
      0% { transform: translateY(0) rotate(0) scale(1); }
      18% { transform: translateY(8px) rotate(6deg) scale(.96, .82); }
      38% { transform: translateY(16px) rotate(12deg) scale(.92, .72); }
      55% { transform: translateY(22px) rotate(15deg) scale(.88, .66); }
      75% { transform: translateY(22px) rotate(15deg) scale(.88, .66); }
      100% { transform: translateY(6px) rotate(8deg) scale(.95, .8); }
    }
    @keyframes petSleepNod {
      0%, 100% { transform: translateX(-50%) rotate(0); }
      30%, 70% { transform: translateX(-50%) rotate(10deg); }
    }
    @keyframes petSleepTailWag {
      0%, 100% { transform: rotate(30deg); }
      50% { transform: rotate(-10deg); }
    }
    @keyframes petAlert {
      0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); }
    }
    @keyframes petPat {
      0%, 100% { transform: translateY(0) rotate(0) scale(1); }
      15% { transform: translateY(-20px) rotate(-8deg) scale(1.06); }
      35% { transform: translateY(-8px) rotate(7deg) scale(1.1); }
      55% { transform: translateY(-20px) rotate(-9deg) scale(1.05); }
      75% { transform: translateY(-6px) rotate(6deg) scale(1.1); }
    }
    @keyframes petPatTailWag {
      0%, 100% { transform: rotate(20deg); }
      50% { transform: rotate(-50deg); }
    }
    @keyframes petLovePulse {
      0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); }
    }
    @keyframes petCelebrateSpin {
      0% { transform: rotate(0) scale(1); }
      40% { transform: rotate(-6deg) scale(1.12); }
      70% { transform: rotate(5deg) scale(1.08); }
      100% { transform: rotate(0) scale(1); }
    }
    @keyframes petBadgePop {
      0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); }
    }
    @keyframes petCloudDrift {
      0% { transform: translateX(0); } 100% { transform: translateX(40px); }
    }

    /* 等级卡片 */
    .pet-level-card {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,.78); border-radius: 18px;
      padding: 10px 14px; margin-bottom: 12px; position: relative;
      box-shadow: 0 4px 14px rgba(180,120,180,.16);
      border: 1px solid rgba(255,190,205,.5);
    }
    .pet-level-icon {
      flex: none; width: 46px; height: 46px; border-radius: 50%;
      background: linear-gradient(135deg, #ffe3ec, #f3d5ff);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; box-shadow: 0 3px 8px rgba(200,140,190,.25);
    }
    .pet-level-info { flex: 1 1 auto; min-width: 0; }
    .pet-level-title {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px;
    }
    .pet-level-lv { font-weight: 800; font-size: .86rem; color: #e25b90; }
    .pet-level-name { font-weight: 700; font-size: .84rem; color: #6d4a57; }
    .pet-level-badge {
      font-size: .66rem; font-weight: 600; color: #fff;
      background: linear-gradient(135deg, #ff8fc0, #f55f9a);
      padding: 2px 9px; border-radius: 12px;
    }
    .pet-level-bar {
      height: 7px; border-radius: 7px; background: rgba(255,255,255,.7);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.07); overflow: hidden;
    }
    .pet-level-bar-fill {
      height: 100%; border-radius: 7px;
      background: linear-gradient(90deg, #ffb3d9, #a78bfa, #8ac7ff);
      transition: width .6s cubic-bezier(.22,.61,.36,1);
    }
    .pet-level-exp { font-size: .7rem; color: #a08090; margin-top: 3px; }

    /* 进化形态: 形象随等级升级 */
    .pet-form-kitten { transform-origin: center bottom; scale: 1; }
    .pet-form-kitty { transform-origin: center bottom; scale: 1.05; }
    .pet-form-cat { transform-origin: center bottom; scale: 1.1; }
    .pet-form-bigcat { transform-origin: center bottom; scale: 1.18; }
    .pet-form-catking { transform-origin: center bottom; scale: 1.26; }
    .pet-form-divine { transform-origin: center bottom; scale: 1.34; }

    /* 高级形态装饰 */
    .pet-form-bigcat .pet-head::after,
    .pet-form-catking .pet-head::after,
    .pet-form-divine .pet-head::after {
      content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 24px; height: 10px; border-radius: 0 0 50% 50%;
      background: rgba(255,255,255,.85);
    }
    /* 猫咪王: 王冠 */
    .pet-form-catking .pet-head::before,
    .pet-form-divine .pet-head::before {
      content: '👑'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
      font-size: 1.1rem; z-index: 4;
      animation: petCrownFloat 1.8s ease-in-out infinite;
    }
    /* 神兽: 圣光环绕 */
    .pet-form-divine .pet-3d-wrap { filter: drop-shadow(0 0 14px rgba(255, 190, 120, .6)); }
    .pet-form-divine::after {
      content: ''; position: absolute; inset: -14px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,214,140,.35), transparent 65%);
      animation: petAuraPulse 2.2s ease-in-out infinite; z-index: -1;
    }
    @keyframes petCrownFloat {
      0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); }
    }
    @keyframes petAuraPulse {
      0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); }
    }

    /* 属性条 */
    .pet-stats { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; position: relative; }
    .pet-stat-label {
      display: flex; justify-content: space-between; align-items: center;
      font-size: .78rem; color: #6d4a57; margin-bottom: 3px; font-weight: 600;
    }
    .pet-bar {
      height: 8px; border-radius: 8px; background: rgba(255,255,255,.7);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
      overflow: hidden;
    }
    .pet-bar-fill {
      height: 100%; border-radius: 8px; transition: width .6s cubic-bezier(.22,.61,.36,1);
    }
    .pet-bar-hunger { background: linear-gradient(90deg, #ffa06b, #ff7b4a); }
    .pet-bar-happy { background: linear-gradient(90deg, #ff8fc0, #f55f9a); }
    .pet-bar-energy { background: linear-gradient(90deg, #8ac7ff, #4f8ff7); }

    /* 红心行 */
    .pet-hearts-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; position: relative; }
    .pet-hearts-pill {
      background: rgba(255,255,255,.85); border: 1px solid rgba(255,190,205,.6);
      border-radius: 20px; padding: 3px 12px; font-size: .82rem; font-weight: 600; color: #d6306f;
      box-shadow: 0 2px 6px rgba(255,150,180,.25);
    }
    .pet-hearts-pill.pet-black { color: #4b4b5a; border-color: rgba(140,140,160,.4); }
    .pet-heart-add {
      border-radius: 20px; font-size: .76rem; font-weight: 600; color: #fff;
      background: linear-gradient(135deg, #ff7ba9, #ff4f88);
      border: none; padding: 3px 12px; box-shadow: 0 3px 8px rgba(255,79,136,.3);
    }
    .pet-heart-add:hover { filter: brightness(1.08); color: #fff; }
    .pet-heart-add.pet-black { background: linear-gradient(135deg, #8d8da8, #6a6a85); box-shadow: 0 3px 8px rgba(106,106,133,.3); }

    /* 互动按钮 */
    .pet-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; position: relative; }
    .pet-act-btn {
      position: relative; overflow: hidden; border: none; border-radius: 16px;
      background: rgba(255,255,255,.85); padding: 10px 4px 8px;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      box-shadow: 0 4px 12px rgba(255,150,180,.22);
      transition: transform .12s, box-shadow .12s;
      cursor: pointer;
    }
    .pet-act-btn:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,150,180,.35); }
    .pet-act-btn:active:not(.disabled) { transform: scale(.96); }
    .pet-act-emoji { font-size: 1.4rem; line-height: 1.2; }
    .pet-act-label { font-size: .72rem; font-weight: 600; color: #6d4a57; }
    .pet-act-cost { font-size: .66rem; color: #e25b90; font-weight: 600; }
    .pet-act-btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
    .pet-act-btn.pet-act-pat { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,222,235,.9)); }
    /* 水波纹 */
    .pet-act-btn::after {
      content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.6);
      transform: scale(0); opacity: 1; transition: transform .5s, opacity .5s;
      width: 100px; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -50px;
      pointer-events: none;
    }
    .pet-act-btn.ripple::after { transform: scale(3); opacity: 0; }

    /* 行为记录 */
    .pet-records { position: relative; }
    .pet-records-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 2px 8px;
    }
    .pet-records-list {
      max-height: 200px; overflow-y: auto; padding-right: 4px;
      border-radius: 14px;
    }
    .pet-records-list::-webkit-scrollbar { width: 6px; }
    .pet-records-list::-webkit-scrollbar-thumb { background: rgba(210,120,150,.4); border-radius: 6px; }
    .pet-record-item {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.8); border-radius: 12px;
      padding: 7px 10px; margin-bottom: 6px; font-size: .8rem;
      box-shadow: 0 2px 6px rgba(0,0,0,.04);
      animation: petRecordIn .25s ease-out;
    }
    .pet-record-ic { flex: none; }
    .pet-record-note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6d4a57; }
    .pet-record-time { flex: none; font-size: .72rem; color: #a08090; }
    .pet-record-del {
      flex: none; border: none; background: transparent; color: #c0a0ac;
      width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: .7rem;
    }
    .pet-record-del:hover { background: rgba(255,100,130,.15); color: #e2507a; }
    .pet-records-empty { text-align: center; color: #b89aa6; font-size: .8rem; padding: 14px 0; }
    @keyframes petRecordIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 767px) {
      .pet-stage { height: 330px; align-items: flex-end; padding-bottom: 30px; }
      .pet-3d { width: 168px; height: 168px; }
      .pet-head { width: 128px; height: 112px; top: 12px; }
      .pet-ear { width: 42px; height: 48px; top: -8px; }
      .pet-ear-l { left: 15px; } .pet-ear-r { right: 15px; }
      .pet-eye { width: 30px; height: 36px; top: 24px; }
      .pet-eye-l { left: 26px; } .pet-eye-r { right: 26px; }
      .pet-glint { width: 8px; height: 8px; top: 5px; }
      .pet-brow { width: 14px; }
      .pet-brow-l { left: 30px; } .pet-brow-r { right: 30px; }
      .pet-nose { border-left-width: 7px; border-right-width: 7px; border-top-width: 9px; }
      .pet-whisker-l1, .pet-whisker-l3, .pet-whisker-r1, .pet-whisker-r3 { width: 32px; }
      .pet-whisker-l2, .pet-whisker-r2 { width: 36px; }
      .pet-muzzle { width: 36px; height: 28px; }
      .pet-muzzle-l { left: 20px; } .pet-muzzle-r { right: 20px; }
      .pet-body { width: 112px; height: 94px; }
      .pet-belly { width: 66px; height: 54px; }
      .pet-paw { width: 30px; height: 21px; }
      .pet-paw-l { left: 18px; } .pet-paw-r { right: 18px; }
      .pet-tail { width: 48px; height: 22px; right: -12px; }
      .pet-actions { grid-template-columns: repeat(5, 1fr); gap: 6px; }
      .pet-act-label { font-size: .68rem; }
    }

    [data-theme="dark"] {
      .pet-modal-content { background: linear-gradient(170deg, #2a2033 0%, #241f35 70%, #1f2140 100%); }
      .pet-bg-deco {
        background:
          radial-gradient(circle at 12% 15%, rgba(120,90,160,.35), transparent 40%),
          radial-gradient(circle at 88% 82%, rgba(200,90,140,.3), transparent 45%),
          radial-gradient(circle at 75% 12%, rgba(180,130,90,.25), transparent 30%);
      }
      .pet-modal-head span, .pet-stat-label, .pet-act-label, .pet-record-note { color: #e6c9d8; }
      .pet-bar { background: rgba(255,255,255,.1); }
      .pet-level-card { background: rgba(50,40,60,.75); border-color: rgba(150,110,140,.4); }
      .pet-level-name, .pet-level-exp { color: #d9b8c8; }
      .pet-level-icon { background: linear-gradient(135deg, #4a3348, #3a2f55); }
      .pet-hearts-pill { background: rgba(50,40,60,.75); color: #ff8fc0; }
      .pet-hearts-pill.pet-black { color: #b6b6cc; }
      .pet-act-btn { background: rgba(60,48,72,.8); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
      .pet-act-btn.pet-act-pat { background: linear-gradient(180deg, rgba(70,52,70,.9), rgba(90,60,80,.85)); }
      .pet-act-label { color: #e6c9d8; }
      .pet-record-item { background: rgba(60,48,72,.75); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
      .pet-record-time { color: #b89aa6; }
      .pet-record-del { color: #a08090; }
      .pet-records-empty { color: #8a6a78; }
      .pet-cloud { background: rgba(150,140,170,.5); }
      .pet-hint { background: rgba(60,50,70,.6); color: #b89aa6; }
    }

    /* ===== UX 专项: 反馈/骨架屏/可达性 ===== */
    /* 全局按压反馈(移动端点按"有反应") */
    .btn:active, .tl-card:active, .cal-cell:active,
    .bottom-nav a:active, .nav-search-btn:active { opacity: .75; transform: scale(.985); }
    /* Toast 轻提示(底部居中, 移动端避开底部导航) */
    .app-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 3000; background: rgba(23,26,33,.92); color: #fff; padding: 10px 20px; border-radius: 100px; font-size: .85rem; display: flex; gap: 14px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: toastIn .2s ease-out; max-width: calc(100vw - 32px); }
    @media (max-width: 767px) { .app-toast { bottom: calc(var(--bottom-nav-height) + 16px); } }
    @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    .app-toast button { border: none; background: transparent; color: #7dd3fc; font-weight: 700; font-size: .85rem; cursor: pointer; padding: 0; flex-shrink: 0; }
    /* 离线横幅 */
    .net-banner { position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 2900; background: #b45309; color: #fff; text-align: center; font-size: .82rem; padding: 6px 12px; display: none; }
    .net-banner.show { display: block; }
    /* 时间轴骨架屏(替代"加载中..."文字, 减少布局跳动) */
    @keyframes tlShimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
    .tl-skeleton { height: 13px; border-radius: 4px; margin: 12px 0; background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%); background-size: 400px 100%; animation: tlShimmer 1.2s infinite linear; }
    /* 尊重系统减弱动效偏好 */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
    /* 时间轴分区折叠: 时间点常驻轴上(仅标题), 滚动到位自动展开该分区; 高度过渡展开 */
    .tl-section .tl-items { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease, transform .35s ease; }
    .tl-section.open .tl-items { max-height: 4000px; opacity: 1; transform: none; }
    .tl-section-hd { cursor: pointer; border-radius: 8px; transition: background .15s; }
    .tl-section-hd:hover { background: var(--gray-50); }
    .tl-section-hd:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .tl-section.open > .tl-section-hd .tl-section-label { color: var(--primary); }
    .tl-section.open > .tl-section-hd .tl-section-dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--primary); }

/* ===== 图标字体: 覆盖 vendor 声明为 swap, 消除 FOIT(后加载覆盖同族声明) ===== */
@font-face {
  font-family: "bootstrap-icons";
  src: url("../vendor/fonts/bootstrap-icons.woff2?v=1") format("woff2"),
       url("../vendor/fonts/bootstrap-icons.woff?v=1") format("woff");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

/* ===== 时间轴卡片勾选框: 扩大命中区(24px 视觉), 保持原生渲染 ===== */
.tl-card .form-check-input { width: 15px; height: 15px; margin-top: -1px; cursor: pointer; flex-shrink: 0; }
.tl-card .form-check-input:disabled { cursor: not-allowed; opacity: .8; }

/* ===== 乐观更新挂起态: 立即反馈, 失败回滚后恢复 ===== */
.tl-card.pending { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ===== 空态主行动按钮 + 时间轴空态垂直居中 ===== */
.es-action { font-size: .82rem; padding: 6px 16px; border-radius: 999px; }
.tl-wrap > .tl-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; margin: 0; }

/* ===== 暗黑模式: 变量重映射+主要表面覆盖(跟随系统) ===== */
[data-theme="dark"] {
  :root {
    color-scheme: dark;
    --gray-50: #131c2e;
    --gray-100: #18233a;
    --gray-200: #26334d;
    --gray-300: #3a4a68;
    --gray-400: #8fa0bd;
    --gray-500: #a9b7d0;
    --gray-600: #ccd6e8;
    --gray-700: #e0e7f2;
    --gray-800: #edf1f8;
    --gray-900: #f6f8fc;
    --primary-light: #0d2b1d;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
  }
  body { background: #0b1220; color: var(--gray-700); }
  .card { background: #101a2d; border-color: var(--gray-200); }
  .card-footer { background: #0d1524 !important; }
  .modal-content, .dropdown-menu { background: #101a2d; border-color: var(--gray-200); }
  .form-control, .form-select { background: #0d1524; border-color: var(--gray-300); color: var(--gray-700); }
  .form-control::placeholder { color: var(--gray-400); }
  .form-control:focus, .form-select:focus { background: #0d1524; color: var(--gray-700); }
  .top-nav-search .form-control { background: #101a2d; }
  .tl-card { background: #101a2d; }
  .tl-card.completed { opacity: .62; }
  .tl-section-hd:hover { background: var(--gray-100); }
  .alert-danger { background: #2a1114; border-color: #58252b !important; color: #f1b8bc; }
  .badge.bg-light, .badge.bg-white { background: var(--gray-200) !important; color: var(--gray-700) !important; }
  .btn-outline-secondary { color: var(--gray-500); border-color: var(--gray-300); }
  .btn-outline-secondary:hover { background: var(--gray-100); color: var(--gray-700); }
  a { color: #6fbf95; }
  .text-muted { color: var(--gray-400) !important; }
  /* --- 暗色补全: 导航/搜索浮层/快捷球/高亮/日历 --- */
  body { background:#0b1220; color:var(--gray-700); }
  .top-nav,.bottom-nav,.quick-fab-item { background:#101a2d; }
  --brand-bg-color:#1C1C1E; --brand-stroke-url:url(#brandGradDark);
  .brand-mark .brand-bg { fill:#1C1C1E; }
  .brand-mark .brand-stroke { stroke:url(#brandGradDark); }
  .us-suggest,.us-modal-card,.us-modal-foot { background:#101a2d; }
  [data-theme="dark"] #notificationDropdown{background:#101a2d !important;border:1px solid var(--gray-200);}
  mark,.us-r-item mark,.us-item-title mark,.us-suggest mark { background:#5c4d12; color:#ffe08a; }
  .badge-high { background:#3a2410; color:#f8b98a; }
  a.list-group-item, .list-group-item { background-color:#101a2d; border-color:var(--gray-200); }
  /* 日历平铺格 */
  .cal-cell { background:#16233b; box-shadow:inset 0 0 0 .5px #2a3a57; color:var(--gray-700); }
  .cal-cell.cal-other { background:transparent; color:#46536d; }
  .cal-cell.today { background:#38202a; }
  .cal-cell.selected { background:#12293f; }
  .cal-cell.holiday { background:#2a1a22; }
  /* --- 暗色补全第二轮: 抽屉/用户菜单/toast/表格/下拉项/关闭钮/邮箱横幅 --- */
  .drawer { background:#101a2d; box-shadow:-8px 0 24px rgba(0,0,0,.5); }
  .user-dropdown { background:#101a2d !important; border:1px solid var(--gray-200); }
  #globalToast > div { background:#101a2d !important; border-color:var(--gray-200) !important; color:var(--gray-700) !important; }
  .table { --bs-table-bg:#101a2d; --bs-table-color:var(--gray-700); border-color:var(--gray-200); }
  .table > :not(caption) > * > * { background-color:#101a2d; color:var(--gray-700); border-color:var(--gray-200); }
  .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg:#0d1524; }
  .table-hover > tbody > tr:hover > * { --bs-table-accent-bg:#18233a; }
  .dropdown-item { color:var(--gray-600); }
  .dropdown-item:hover, .dropdown-item:focus { background:var(--gray-100); color:var(--gray-700); }
  .btn-close { filter:invert(1) grayscale(1) brightness(1.6); }
  .email-reminder { background:linear-gradient(135deg,#16213f,#131c33) !important; border-color:#2c3a66 !important; }
  /* --- 暗色补全第三轮: 工作台面板群/图谱与原文抽屉/认证卡/闪现条/状态徽章 --- */
  .wb-panel,.graph-left,.kb-stat,.points-side,.points-detail,.kb-prev-frame,.preview-modal-sheet{background:#101a2d;}
  .gd-drawer,.dd-drawer{background:#101a2d;border-color:var(--gray-200);}
  .mention-box{background:#0d1524;border-color:var(--gray-300);}
  .auth-card{background:#101a2d !important;}
  .error-card{background:#101a2d;}
  .flash-info{background:#12233f !important;color:#bcd3ff;}
  .flash-warning{background:#33270f !important;color:#e7c66b;}
  .flash-danger{background:#2a1114 !important;color:#f1b8bc;}
  .status-pending{background:#3a2a10 !important;color:#f8b98a;}
  .status-approved{background:#12233f !important;color:#9fc1ff;}
  .status-rejected{background:#2a1114 !important;color:#f1b8bc;}
  .badge-medium{background:#1b2547 !important;color:#a5b8ff;}
  .badge-urgent{background:#3a1519 !important;color:#ffb3b8;}
  .cal-picker-month:hover{background:#18233a;}
  .pt-group-head:hover{background:var(--gray-100);}
  .sys-bubble{background:#33270f;}
  .cal-cell.weekend { color:#7c8aa5; }
  .cal-hn { color:#e58b8b; }
  .text-muted { color: var(--gray-400) !important; }
}

/* ===== 移动端体验修复(≤767) ===== */
@media (max-width: 767px) {
  /* iOS 聚焦自动放大防护: 输入类字号统一 16px */
  .form-control, .form-select { font-size: 16px !important; }
  /* 触控热区: 复选框视觉不变, 伪元素扩大点击区 */
  .form-check-input { position: relative; }
  .form-check-input::after { content: ''; position: absolute; inset: -7px; }
  /* 时间轴卡片内热区右移让位标题(间隙仅6px), 已完成禁用框不再扩区 */
  .tl-card .form-check-input::after { inset: -8px -4px -8px -8px; }
  .tl-card .form-check-input[disabled]::after { content: none; }
  .tl-card { touch-action: manipulation; }
  /* 手机端通知下拉: 固定定位全宽面板, 不再锚定铃铛导致超出屏幕 */
  #notificationDropdown{position:fixed !important;left:8px !important;right:8px !important;top:calc(var(--nav-height) + 6px) !important;margin-top:0 !important;min-width:0 !important;width:auto;max-height:72vh;}
  /* 小按钮触控高度提升(左右内边距保留原值) */
  .btn-sm { padding-top: .34rem !important; padding-bottom: .34rem !important; font-size: .78rem !important; }
  /* 小字下限: 徽标不小于 0.65rem */
  .badge { font-size: .65rem !important; }
  /* 关闭移动端默认灰块点击高亮, 改用自定义按压反馈 */
  * { -webkit-tap-highlight-color: transparent; }
  .tl-card:active { background: var(--gray-50); border-color: var(--gray-300); }
  .cat-item:active, .sr-item:active, .bottom-nav a:active { opacity: .75; }
}