/* ========================================================================== Dream 隽穆 —— 皮肤：亮色纸感（全站**唯一**一套） 2026-09-17 起只有这一套。`` 直接写在三份模板里 （base.html / login.html / error.html），没有开关、没有 localStorage、 也没有引导脚本 —— 属性在首帧就在 HTML 上，不存在「先画一帧深的再翻白」， 而 headless 截图不跑 JS 也照样是亮的。 纪律（selftest 的 test_theme 一节逐条钉着）： 1. **每一条规则的选择器都带 html[data-theme="light"] 前缀。** 深色那套的值还在 style.css / admin.css 里，这个前缀是两套的分界线： 去掉前缀的规则会连深色那套一起改掉，而那一套已经没人验过了。 2. 这里只许写「亮色下的值」，不许出现深色值。它不是第二套深色来源， 是同一套皮肤的装配清单。 3. 不用 !important：html[data-theme="light"] .panel 特异性 (0,2,1) 已经赢过 body .panel (0,1,1)，和 的先后顺序无关。 ⚠️ .chart-box 和 .ai-chart 的底色 #131a29 **刻意不给亮色**，不是漏了。 那对图表色（琥珀 #c98500 / 蓝 #3987e5）是拿这个底色跑过对比度和色盲 (CVD) 验证算出来的，换底色验证就作废（见 README「画报」一节）。 亮色皮肤下它们是"亮页面上的深色图表卡"，这是设计。 要改，先重跑验证器，charts.js 的 SURFACE 和那两条一起改。 ========================================================================== */ html[data-theme="light"] { --bg: #f4f5f7; --bg-2: #f4f5f7; --surface: #ffffff; --surface-2: #ffffff; --text: #1b1f27; --text-muted: #5b6371; --text-dim: #8a919e; --line: #e4e7ec; --line-strong: #d2d7e0; /* 白底上的金：原色值对比度只有 1.9:1，读不出来，整体压深成铜色 */ --gold: #8a6215; --gold-light: #7a5610; --gold-deep: #6b4a0d; --gold-ink: #ffffff; --danger: #c0392b; --ok: #2f8a4d; /* admin.css 那三个语义色是照深底挑的，白底上全读不出来 */ --ok-soft: rgba(47, 138, 77, 0.10); --warn: #7a5610; --radius: 8px; --radius-lg: 10px; color-scheme: light; } html[data-theme="light"] .bg-stage { display: none; } html[data-theme="light"] .brand-eyebrow, html[data-theme="light"] .brand-tagline, html[data-theme="light"] .whoami-name, html[data-theme="light"] .btn-gold, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .btn-mini, html[data-theme="light"] .panel-title, html[data-theme="light"] .panel-count, html[data-theme="light"] .data-table thead th, html[data-theme="light"] .pager, html[data-theme="light"] .app-name, html[data-theme="light"] .ai-launcher { letter-spacing: 0; } /* ---- 顶栏 ---- */ html[data-theme="light"] .topbar { padding: 13px clamp(20px, 3vw, 34px); border-bottom: 1px solid var(--line); background: #ffffff; } html[data-theme="light"] .topbar .brand-mark, html[data-theme="light"] .brand-mark { width: 30px; height: 30px; border-radius: 8px; border: none; background: #1b1f27; color: #ffffff; font-size: 15px; box-shadow: none; } html[data-theme="light"] .brand-eyebrow { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.12em; } html[data-theme="light"] .brand-tagline { font-size: 11px; margin-top: 1px; } html[data-theme="light"] .whoami { border: none; background: transparent; padding: 0; } html[data-theme="light"] .whoami-name { font-size: 13px; color: var(--text); } html[data-theme="light"] .whoami-dept { font-size: 11px; } html[data-theme="light"] .btn-ghost { padding: 7px 13px; font-size: 12.5px; border-radius: 7px; border-color: var(--line-strong); background: #ffffff; } html[data-theme="light"] .btn-ghost:hover { background: #f7f8fa; color: var(--text); border-color: var(--line-strong); } /* ---- 主区 ---- */ html[data-theme="light"] .admin-main { max-width: 1320px; padding: clamp(20px, 2.6vw, 34px) clamp(20px, 3vw, 40px) 72px; } html[data-theme="light"] .crumb { font-size: 12px; margin-bottom: 14px; } html[data-theme="light"] .panel { padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); border-radius: 10px; background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); animation: none; } html[data-theme="light"] .panel-title { font-size: 22px; font-weight: 600; margin-bottom: 6px; } html[data-theme="light"] .panel-sub { font-size: 12.5px; line-height: 1.7; } html[data-theme="light"] .panel-count { padding: 6px 12px; border-radius: 7px; background: #f7f8fa; border-color: var(--line); font-size: 12.5px; } html[data-theme="light"] .panel-count strong { font-size: 15px; color: var(--text); } html[data-theme="light"] .scope-note, html[data-theme="light"] .fin-note { margin-bottom: 22px; padding: 10px 0 10px 14px; border: none; border-left: 2px solid var(--gold); border-radius: 0; background: transparent; font-size: 12.5px; color: var(--text-muted); } html[data-theme="light"] .scope-note { color: #7a5610; } /* ---- 筛选 ---- */ html[data-theme="light"] .filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding-bottom: 20px; margin-bottom: 20px; } html[data-theme="light"] .field label, html[data-theme="light"] .field-label { font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 7px; } /* 箭头是内联 SVG，描边色写死在 data-URI 里，只能整条换掉 */ html[data-theme="light"] select { height: 38px; font-size: 13.5px; border-radius: 7px; background-color: #ffffff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6371' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } html[data-theme="light"] select:focus { background-color: #ffffff; } html[data-theme="light"] select option { background: #ffffff; color: var(--text); } html[data-theme="light"] .field input, html[data-theme="light"] .field select, html[data-theme="light"] .field textarea { height: 38px; font-size: 13.5px; border-radius: 7px; background: #ffffff; border-color: var(--line-strong); } html[data-theme="light"] .field textarea { height: auto; padding: 9px 12px; line-height: 1.6; } html[data-theme="light"] .field input[type="checkbox"], html[data-theme="light"] .field input[type="radio"] { height: 16px; } html[data-theme="light"] .field .check-line { height: 38px; } html[data-theme="light"] .filters-inline input[type="text"], html[data-theme="light"] .filters-inline select { height: 34px; border-radius: 7px; background: #ffffff; } /* ---- 按钮 ---- */ html[data-theme="light"] .btn-gold { height: 38px; padding: 0 18px; font-size: 13px; font-weight: 500; text-indent: 0; border-radius: 7px; border: none; background: #1b1f27; color: #ffffff; box-shadow: none; transition: background 0.15s; } html[data-theme="light"] .btn-gold:hover { background: #2b313c; transform: none; box-shadow: none; } html[data-theme="light"] .btn-sm { height: 38px; padding: 0 14px; font-size: 12.5px; } html[data-theme="light"] .btn-mini { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; border-color: transparent; background: transparent; } html[data-theme="light"] .btn-mini:hover { background: #eef0f4; border-color: transparent; color: var(--text); } html[data-theme="light"] .btn-mini.is-danger { color: #c0392b; border-color: transparent; } html[data-theme="light"] .btn-mini.is-danger:hover { background: #fdecea; border-color: transparent; } html[data-theme="light"] .btn-mini.is-ok { border-color: transparent; } html[data-theme="light"] .btn-ghost.is-danger { color: #c0392b; } /* ---- 表格 ---- */ html[data-theme="light"] .data-table { font-size: 13.5px; } html[data-theme="light"] .data-table thead th { padding: 0 14px 10px; font-size: 11px; letter-spacing: 0.06em; border-bottom: 1px solid var(--line-strong); } html[data-theme="light"] .data-table tbody td { padding: 11px 14px; } html[data-theme="light"] .data-table tbody tr:hover { background: #f8f9fb; } html[data-theme="light"] .data-table tfoot th { padding: 14px 14px 4px; font-size: 13px; color: var(--text); } html[data-theme="light"] .badge { padding: 0; border: none; background: none; border-radius: 0; font-size: 11px; letter-spacing: 0; } html[data-theme="light"] .badge-gold { color: #7a5610; } html[data-theme="light"] .badge-ok { color: #2f8a4d; } html[data-theme="light"] .badge-dim { color: var(--text-muted); } html[data-theme="light"] .badge-danger { color: #c0392b; } html[data-theme="light"] .data-table tr.is-inactive td { opacity: 0.5; } html[data-theme="light"] .col-user a { border-bottom-color: #c9ced8; } html[data-theme="light"] .data-table tr.is-picked td { background: #fbf7ee; } /* ---- 分页 ---- */ html[data-theme="light"] .pager { gap: 6px; margin-top: 18px; padding-top: 16px; } html[data-theme="light"] .pager a, html[data-theme="light"] .pager .disabled, html[data-theme="light"] .pager .current { padding: 6px 11px; border-radius: 6px; } html[data-theme="light"] .pager a:hover { background: #f2f4f7; color: var(--text); } html[data-theme="light"] .pager .current { background: #1b1f27; color: #ffffff; border-color: #1b1f27; } /* ---- 工作台磁贴：横排，图标在左 ---- */ html[data-theme="light"] .app-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } html[data-theme="light"] .app-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 0; padding: 14px 16px; border-radius: 9px; background: #ffffff; text-align: left; } html[data-theme="light"] a.app-tile:hover { transform: none; background: #ffffff; border-color: #c9ced8; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); } html[data-theme="light"] .app-glyph { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: #f7f8fa; color: #1b1f27; font-size: 15px; } html[data-theme="light"] a.app-tile:hover .app-glyph { border-color: var(--line-strong); background: #f7f8fa; } html[data-theme="light"] .app-name { font-size: 13px; } /* ---- 报表：统计卡 / 快速录入 / 看板 / 时间药丸 ---- 深色下这几个是「白 4% 叠在深底上」的玻璃块。同一个公式放在白页面上 就是白叠白 —— 卡片会整个消失，一排数字裸在页面上。必须给实色。 */ html[data-theme="light"] .stat, html[data-theme="light"] .quick-entry { background: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .stat::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); } html[data-theme="light"] .board-item { background: #ffffff; } html[data-theme="light"] .period { background: #ffffff; } html[data-theme="light"] .sql-block { background: #f7f8fa; } html[data-theme="light"] .fin-flow-row input { background: #ffffff; } html[data-theme="light"] .import-row input[type="file"]::file-selector-button { background: #f7f8fa; } /* 激活标签底下那道金线，深色下带一圈辉光；白底上是一圈发脏的光晕 */ html[data-theme="light"] .tab.is-active::after { box-shadow: none; } /* ---- 提示条 ---- ⚠️ 字色是照深底挑的近白色（#ffd9d9 / #cdeccd），白底上**一个字都看不见**。 这覆盖登录页那句「用户名或密码错误」和全站每一条 flash。 */ html[data-theme="light"] .alert { color: #8a1f1f; } html[data-theme="light"] .alert-ok { color: #1f5c36; } /* ---- 导入框 / 弹窗 ---- */ html[data-theme="light"] .form-section { margin: 4px 0 18px; font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-dim); } /* ⚠️ 两条缺一不可。只写 `border-bottom-style: solid` 的话，它 (0,2,1) 压得过 admin.css 的 `.membership-row:last-of-type` (0,2,0) —— 那条本来把最后一行 的边框关掉的 `none` 简写，留下的是 medium(3px) + currentcolor，于是最后一 行被重新画成一道 3px 黑线。 */ html[data-theme="light"] .membership-row { border-bottom: 1px solid var(--line); } html[data-theme="light"] .membership-row:last-of-type { border-bottom: none; } html[data-theme="light"] .import-box[open] { background: #f9fafb; border-radius: 8px; } html[data-theme="light"] .multi-box { border-radius: 8px; } html[data-theme="light"] dialog.modal { border-radius: 10px; background: #ffffff; box-shadow: 0 30px 70px rgba(16, 24, 40, 0.28); } html[data-theme="light"] dialog.modal::backdrop { background: rgba(16, 24, 40, 0.42); } html[data-theme="light"] .modal-x { border-radius: 7px; } html[data-theme="light"] .flash-stack .alert { border-radius: 8px; box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16); } /* ---- AI 助手 ---- */ html[data-theme="light"] .ai-launcher { padding: 9px 16px 9px 11px; border-radius: 8px; border-color: var(--line-strong); background: #ffffff; color: var(--text); font-size: 13px; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.1); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="light"] .ai-launcher:hover { transform: none; background: #f7f8fa; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.1); } html[data-theme="light"] .ai-launcher-glyph { width: 22px; height: 22px; border-radius: 6px; background: #1b1f27; color: #ffffff; font-size: 12px; } html[data-theme="light"] .ai-dock.is-open .ai-launcher { background: #ffffff; } html[data-theme="light"] .ai-dock.is-open .ai-launcher-glyph { background: #eef0f4; color: var(--text-muted); } html[data-theme="light"] .ai-panel { border-radius: 10px; background: #ffffff; border-color: var(--line-strong); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18); } html[data-theme="light"] .ai-chip { border-radius: 7px; background: #f7f8fa; } html[data-theme="light"] .ai-chip:hover { background: #eef0f4; color: var(--text); } html[data-theme="light"] .ai-input, html[data-theme="light"] .ai-send { border-radius: 7px; } html[data-theme="light"] .ai-input { background: #ffffff; } html[data-theme="light"] .ai-input:focus { background: #ffffff; } html[data-theme="light"] .ai-send { background: #1b1f27; color: #ffffff; border-color: #1b1f27; } html[data-theme="light"] .ai-table thead th { background: #f7f8fa; color: var(--text); } html[data-theme="light"] .ai-table-wrap, html[data-theme="light"] .ai-sql, html[data-theme="light"] .ai-notice, html[data-theme="light"] .ai-empty { background: #f7f8fa; } html[data-theme="light"] .ai-sql-code { color: #7a5610; } /* ---- 登录页 / 错误页 / 403 ---- 这三页只有 style.css，admin.css 管不到（forbidden.html 连 admin.css 都不加载） */ html[data-theme="light"] .login-card, html[data-theme="light"] .error-card, html[data-theme="light"] .welcome-card { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 44px rgba(16, 24, 40, 0.10); } html[data-theme="light"] .info-item { background: #f7f8fa; } /* 「隽穆」那两个大字：深色下是白→金的渐变字，白底上整个消失 */ html[data-theme="light"] .brand-title { background: linear-gradient(150deg, #1b1f27 0%, #8a6215 55%, #6b4a0d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } html[data-theme="light"] .field input { background: #ffffff; border-color: var(--line-strong); } html[data-theme="light"] .field input:focus { background: #ffffff; } /* 「显示/隐藏」那颗是按 52px 的输入框量出来的（bottom 6 + 高 40 + 上边 6）， 亮色把输入框压到 38px，照抄就会**顶穿框顶**冒到上面去 —— 跟着一起缩。 */ html[data-theme="light"] .toggle-pw { height: 26px; padding: 0 8px; } html[data-theme="light"] .toggle-pw:hover { background: #eef0f4; } html[data-theme="light"] .btn-login { color: #ffffff; background: #1b1f27; box-shadow: 0 14px 34px -12px rgba(16, 24, 40, 0.42); } html[data-theme="light"] .btn-login:hover:not(:disabled) { filter: none; background: #2b313c; box-shadow: 0 20px 42px -14px rgba(16, 24, 40, 0.5); } /* ---- 滚动条 ---- style.css 用的是 rgba(255,255,255,0.16)，白底上等于没有。 ⚠️ shot_admin.py 带 --hide-scrollbars，**截图永远拍不到这一条**， 只能在真浏览器里看。 */ html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(16, 24, 40, 0.05); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: rgba(16, 24, 40, 0.22); } @supports not selector(::-webkit-scrollbar) { html[data-theme="light"] * { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, 0.22) rgba(16, 24, 40, 0.05); } }