/* 工作台 — 抛光版视觉：柔和底色 + 立体卡片 + 可换配色 */
/* 配色：html[data-scheme] 选配色（navy 海军蓝 / green 墨绿 / terracotta 陶土 / slate 青石），
html[data-theme] 选深浅（dark 显式深色 / light 显式浅色 / 无属性则跟随系统）。
语义色（优先级红黄绿、逾期红、提示绿、报错红）固定不变，不属于配色。 */
:root {
color-scheme: light;
/* 海军蓝（默认）浅色 */
--accent: #2563eb;
--accent-dark: #1d4ed8;
--accent-soft: #eff6ff;
--accent-glow: rgba(37, 99, 235, .38);
--accent-glow-sm: rgba(37, 99, 235, .35);
--brand-glow: rgba(37, 99, 235, .5);
--focus-ring: rgba(37, 99, 235, .18);
--bg: #eef1f6;
--card: #ffffff;
--text: #0f172a;
--muted: #64748b;
--faint: #94a3b8;
--border: #e2e8f0;
--surface: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;
--surface-3-hover: #e2e8f0;
--note-border: #eef2f7;
--note-phone-text: #334155;
--toast-text: #1e293b;
--topbar-bg: rgba(255, 255, 255, .92);
--mobilenav-bg: rgba(255, 255, 255, .96);
--overlay: rgba(15, 23, 42, .45);
--bottombar-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
--mobilenav-shadow: 0 -4px 20px rgba(15, 23, 42, .08);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .3);
--toast-shadow: 0 12px 32px rgba(15, 23, 42, .18);
--radius: 16px;
--shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px rgba(15, 23, 42, .07);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .05);
}
/* 墨绿 浅色 */
html[data-scheme="green"] {
--accent: #0f766e;
--accent-dark: #0d5c56;
--accent-soft: #ecfdf5;
--accent-glow: rgba(15, 118, 110, .35);
--accent-glow-sm: rgba(15, 118, 110, .32);
--brand-glow: rgba(15, 118, 110, .45);
--focus-ring: rgba(15, 118, 110, .18);
--bg: #eff4f1;
--card: #ffffff;
--text: #1a2e28;
--muted: #5c7a72;
--faint: #8aa39b;
--border: #dbe7e0;
--surface: #ffffff;
--surface-2: #f2f7f4;
--surface-3: #e6efe9;
--surface-3-hover: #d5e5dc;
--note-border: #e4eee8;
--note-phone-text: #33473f;
--toast-text: #1e293b;
--topbar-bg: rgba(255, 255, 255, .92);
--mobilenav-bg: rgba(255, 255, 255, .96);
}
/* 陶土 浅色 */
html[data-scheme="terracotta"] {
--accent: #c2410c;
--accent-dark: #9a3412;
--accent-soft: #fff7ed;
--accent-glow: rgba(194, 65, 12, .35);
--accent-glow-sm: rgba(194, 65, 12, .32);
--brand-glow: rgba(194, 65, 12, .45);
--focus-ring: rgba(194, 65, 12, .18);
--bg: #f7f3ec;
--card: #fffdf8;
--text: #292019;
--muted: #7d6c5c;
--faint: #a3937f;
--border: #e8ddcc;
--surface: #fffdf8;
--surface-2: #f5efe3;
--surface-3: #efe6d5;
--surface-3-hover: #e4d8c2;
--note-border: #ece1cd;
--note-phone-text: #4a3d32;
--toast-text: #1e293b;
--topbar-bg: rgba(255, 253, 248, .92);
--mobilenav-bg: rgba(255, 253, 248, .96);
}
/* 青石 浅色 */
html[data-scheme="slate"] {
--accent: #475569;
--accent-dark: #334155;
--accent-soft: #f1f5f9;
--accent-glow: rgba(71, 85, 105, .35);
--accent-glow-sm: rgba(71, 85, 105, .32);
--brand-glow: rgba(71, 85, 105, .45);
--focus-ring: rgba(71, 85, 105, .18);
--bg: #eef1f4;
--card: #ffffff;
--text: #1e293b;
--muted: #64748b;
--faint: #94a3b8;
--border: #dde3ea;
--surface: #ffffff;
--surface-2: #f6f8fa;
--surface-3: #e8edf2;
--surface-3-hover: #d7dfe8;
--note-border: #e6ebf1;
--note-phone-text: #3b4a5c;
--toast-text: #1e293b;
--topbar-bg: rgba(255, 255, 255, .92);
--mobilenav-bg: rgba(255, 255, 255, .96);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
font-size: 15px; color: var(--text); background: var(--bg);
display: flex; flex-direction: column; min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--border); background: var(--surface);
border-radius: 10px; padding: 8px 14px; font-weight: 500; color: var(--text);
transition: background .15s, box-shadow .15s, transform .1s; }
button:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 6px 18px var(--accent-glow); }
button.primary:hover { background: var(--accent-dark); }
button.secondary { background: var(--surface); color: var(--muted); }
input, select, textarea { border: 1px solid var(--border); border-radius: 10px;
padding: 9px 12px; background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus-ring); }
input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; }
/* 顶栏 */
.topbar { position: sticky; top: 0; z-index: 40;
background: var(--topbar-bg); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
padding: 16px 22px 14px; }
.topbar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { font-size: 21px; font-weight: 800; letter-spacing: .5px;
display: flex; align-items: center; }
.brand::before { content: ""; width: 11px; height: 11px; border-radius: 4px;
background: var(--accent); box-shadow: 0 2px 8px var(--brand-glow);
display: inline-block; margin-right: 9px; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav button { padding: 6px 11px; }
#date-label { font-weight: 700; cursor: pointer; }
#date-label:hover { background: var(--accent-soft); }
.date-nav #date-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#date-label { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.search-box { display: flex; gap: 8px; margin-left: auto; }
.search-box input { width: 260px; }
.logout { color: var(--muted); text-decoration: none; font-weight: 500; }
.logout:hover { color: var(--text); }
/* 配色点选：顶栏四个颜色点，点哪个换哪个 */
.scheme-dots { display: flex; gap: 6px; align-items: center; }
.scheme-dot { width: 22px; height: 22px; min-width: 22px; padding: 0;
border-radius: 999px; border: 2px solid transparent; }
.scheme-dot[data-scheme="navy"] { background: #2563eb; }
.scheme-dot[data-scheme="green"] { background: #0f766e; }
.scheme-dot[data-scheme="terracotta"] { background: #c2410c; }
.scheme-dot[data-scheme="slate"] { background: #475569; }
.scheme-dot:hover { filter: brightness(1.12); }
.scheme-dot.selected { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.focus-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.focus-row label { white-space: nowrap; color: var(--muted); font-weight: 600; font-size: 14px; }
#focus-input { flex: 1; background: var(--surface-2); }
/* 心灵鸡汤：醒目但不花哨 —— 主色浅底 + 左侧竖条 + 引号装饰，点句子换一句 */
.quote-bar { display: flex; align-items: center; gap: 10px;
margin-top: 14px; padding: 12px 14px 12px 12px;
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: 0 10px 10px 0; }
.quote-bar::before { content: "“"; font-size: 26px; line-height: 1;
font-weight: 800; color: var(--accent); flex-shrink: 0; }
#quote-text { font-size: 15px; font-weight: 600; color: var(--text);
line-height: 1.6; cursor: pointer; flex: 1;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
#quote-text:hover { color: var(--accent-dark); }
/* 速记自动提醒提示 */
.hint { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
/* 三栏：撑满剩余视口高度，内容超长时列表内部滚动 */
.columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) minmax(0, 1fr);
gap: 16px; padding: 18px 20px; align-items: stretch;
flex: 1; min-height: calc(100vh - 310px); }
.col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; box-shadow: var(--shadow);
display: flex; flex-direction: column; }
.todo-list, .note-list, .reminder-list { list-style: none; margin: 0; padding: 0;
flex: 1; min-height: 0; overflow-y: auto; max-height: calc(100vh - 380px); }
.col-head { display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.col-head h2 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: .2px; }
.filter { display: flex; gap: 5px; flex-wrap: wrap; }
.filter button { padding: 5px 12px; font-size: 13px; border-radius: 999px;
border-color: transparent; background: var(--surface-3); color: var(--muted); }
.filter button:hover { background: var(--surface-3-hover); color: var(--text); box-shadow: none; }
.filter button.active { background: var(--accent); color: #fff;
box-shadow: 0 3px 10px var(--accent-glow-sm); }
.add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.add-row input[type="text"], .add-row input[type="search"] { flex: 1; min-width: 0; }
/* 速记输入：多行大文本框，电话中边打边记 */
.note-form .add-row { align-items: flex-start; }
#note-input { flex: 1; min-width: 0; resize: none; overflow-y: auto;
max-height: 160px; line-height: 1.6; }
.todo-item, .reminder-item { display: flex; align-items: center; gap: 10px;
padding: 10px 6px; border-bottom: 1px solid var(--surface-3); border-radius: 8px; }
.todo-item:hover, .reminder-item:hover { background: var(--surface-2); }
.todo-item .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.due-label { align-self: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
#todo-due { max-width: 148px; }
.todo-item.done .todo-text, .reminder-item.done .reminder-text {
text-decoration: line-through; color: var(--faint); }
.todo-text, .reminder-text { flex: 1; word-break: break-word; line-height: 1.5; }
.prio { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.prio-高 { background: #fee2e2; color: #b91c1c; }
.prio-中 { background: #fef3c7; color: #92400e; }
.prio-低 { background: #dcfce7; color: #166534; }
/* 优先级左色条：高优先级一眼可见 */
.prio-item-高 { border-left: 3px solid #dc2626; padding-left: 10px; }
.prio-item-中 { border-left: 3px solid #f59e0b; padding-left: 10px; }
.prio-item-低 { border-left: 3px solid #22c55e; padding-left: 10px; }
.item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.item-actions button { padding: 4px 8px; font-size: 12px; color: var(--muted); }
.overdue-wrap { border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px;
padding: 10px 12px; margin-bottom: 12px; }
.overdue-title { color: #b91c1c; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.overdue-wrap .todo-item { border-bottom-color: #fee2e2; }
.empty { color: var(--faint); font-size: 14px; margin: 14px 4px; line-height: 1.6; }
/* 速记 */
.note-card { border: 1px solid var(--note-border); border-radius: 12px; padding: 12px 13px;
margin-bottom: 10px; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.note-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.note-body { margin: 7px 0; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.note-phone { font-size: 13px; color: var(--note-phone-text); line-height: 1.75;
background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: 8px; padding: 8px 11px; margin: 8px 0; }
.note-phone b { color: var(--text); }
.note-actions { display: flex; gap: 6px; }
.note-actions button { padding: 4px 10px; font-size: 12px; color: var(--muted); }
/* 底栏：浅色通栏，报告按钮突出 */
.bottombar { position: sticky; bottom: 0; background: var(--topbar-bg); backdrop-filter: blur(10px); z-index: 40;
border-top: 1px solid var(--border); box-shadow: var(--bottombar-shadow);
padding: 14px 20px; display: flex; align-items: center; gap: 16px; margin-top: auto; }
#btn-report { font-size: 16px; font-weight: 700; padding: 12px 26px; border-radius: 12px; }
#stats { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .3px; }
.app-version { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 500; letter-spacing: .3px; }
/* 弹窗 */
.modal { position: fixed; inset: 0; background: var(--overlay);
backdrop-filter: blur(2px);
display: flex; align-items: flex-start; justify-content: center;
padding: 44px 16px; z-index: 50; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border-radius: 18px; width: 100%; max-width: 780px;
padding: 20px; box-shadow: var(--modal-shadow); }
.modal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.modal-head h3 { margin: 0; flex: 1; font-size: 18px; font-weight: 700; }
.close { font-size: 22px; line-height: 1; padding: 2px 11px; color: var(--muted); }
#report-text { width: 100%; resize: vertical; line-height: 1.7; }
.modal-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
#report-msg { color: #059669; font-size: 13px; }
.search-group { margin-bottom: 14px; }
.search-group h4 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.search-item { padding: 7px 4px; border-bottom: 1px solid var(--surface-3); font-size: 14px; }
.search-item .meta { color: var(--faint); font-size: 12px; margin-left: 6px; }
/* 报告历史 */
.report-history { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
/* 周报周导航：‹ 本周（M月d日–M月d日） ›，点周标签弹出日期选择器 */
.report-week-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.report-week-nav button { padding: 6px 11px; }
#report-week-label { font-weight: 700; }
#week-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.report-history h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
#report-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.history-item { font-size: 13px; color: var(--accent-dark); }
/* 设置弹窗 */
.settings-section { margin-bottom: 18px; }
.settings-section h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.settings-section input[type="password"] { width: 100%; margin-bottom: 8px; }
.settings-note { color: var(--faint); font-size: 13px; margin: 4px 0 0; }
#settings-msg { color: #059669; font-size: 13px; margin-left: 8px; }
.auth-page { max-width: 380px; margin: 12vh auto; background: var(--surface); padding: 32px;
border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow);
text-align: center; }
.auth-page h1 { margin: 0 0 8px; font-size: 24px; }
.auth-page form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.error { color: #b91c1c; }
/* 手机：纵向堆叠 */
@media (max-width: 900px) {
.columns { grid-template-columns: 1fr; padding: 14px; padding-bottom: 100px;
min-height: 0; }
.todo-list, .note-list, .reminder-list { max-height: none; overflow-y: visible; }
.search-box { margin-left: 0; width: 100%; }
.search-box input { flex: 1; width: auto; }
.topbar-row { gap: 10px; }
#date-label { min-width: 0; }
.bottombar { display: none; }
#btn-report { width: 100%; }
}
/* 移动端底部导航 + 类 App 触感（窄屏才生效，桌面端不变） */
.mobile-nav { display: none; }
body { -webkit-tap-highlight-color: transparent; }
@media (max-width: 900px) {
.mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--mobilenav-bg); backdrop-filter: blur(10px);
border-top: 1px solid var(--border); box-shadow: var(--mobilenav-shadow);
padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.mobile-nav button { flex: 1; border: none; background: transparent; color: var(--muted);
font-size: 14px; font-weight: 600; padding: 10px 2px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; min-height: 52px; }
.mobile-nav button:hover { box-shadow: none; background: transparent; }
.mobile-nav button.active { color: var(--accent); background: var(--accent-soft); }
/* tab 视图：同一页内只显示当前视图 */
body[data-mobile-tab="todos"] #col-notes,
body[data-mobile-tab="todos"] #col-reminders { display: none; }
body[data-mobile-tab="notes"] #col-todos,
body[data-mobile-tab="notes"] #col-reminders { display: none; }
body[data-mobile-tab="reminders"] #col-todos,
body[data-mobile-tab="reminders"] #col-notes { display: none; }
/* 更大的触摸目标 */
.add-row button, .add-row input, .add-row select { min-height: 44px; }
.item-actions button, .note-actions button { min-height: 36px; padding: 6px 10px; }
.filter button { min-height: 36px; padding: 7px 13px; }
.topbar { position: static; }
.focus-row button, #btn-focus-save { min-height: 40px; }
}
/* 删除撤销 Toast：底部胶囊，类 App 提示 */
.reminder-group-head { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 4px 6px; letter-spacing: .3px; }
.reminder-group:first-child .reminder-group-head { margin-top: 2px; }
.reminder-group .reminder-list { margin-bottom: 2px; }
.toast {
position: fixed; left: 50%; bottom: 88px; z-index: 80;
transform: translateX(-50%);
display: flex; align-items: center; gap: 14px;
background: var(--surface); color: var(--toast-text); border: 1px solid var(--border);
padding: 12px 14px 12px 18px; border-radius: 999px;
box-shadow: var(--toast-shadow);
font-size: 14px; font-weight: 500;
opacity: 1; transition: opacity .3s ease, transform .3s ease;
max-width: calc(100vw - 32px);
}
.toast.toast-out { opacity: 0; transform: translateX(-50%) translateY(8px); }
.toast button {
background: var(--accent); border-color: var(--accent); color: #fff;
font-weight: 700; padding: 6px 16px; border-radius: 999px; box-shadow: none;
}
.toast button:hover { background: var(--accent-dark); }
/* 深色模式：手动开关（跟随系统 / 深色 / 浅色），见 app.js applyTheme() */
/* 深色变量：各配色一套深色版 */
/* 海军蓝 深色 */
html[data-theme="dark"] {
color-scheme: dark;
--accent: #3b82f6;
--accent-dark: #60a5fa;
--accent-soft: #1e293b;
--accent-glow: rgba(59, 130, 246, .4);
--accent-glow-sm: rgba(59, 130, 246, .4);
--brand-glow: rgba(59, 130, 246, .5);
--focus-ring: rgba(59, 130, 246, .3);
--bg: #0f172a;
--card: #1e293b;
--text: #f1f5f9;
--muted: #94a3b8;
--faint: #64748b;
--border: #334155;
--surface: #1e293b;
--surface-2: #0f172a;
--surface-3: #334155;
--surface-3-hover: #475569;
--note-border: #334155;
--note-phone-text: #cbd5e1;
--toast-text: #f1f5f9;
--topbar-bg: rgba(15, 23, 42, .92);
--mobilenav-bg: rgba(15, 23, 42, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
/* 墨绿 深色 */
html[data-scheme="green"][data-theme="dark"] {
color-scheme: dark;
--accent: #2dd4bf;
--accent-dark: #5eead4;
--accent-soft: #14352f;
--accent-glow: rgba(45, 212, 191, .35);
--accent-glow-sm: rgba(45, 212, 191, .32);
--brand-glow: rgba(45, 212, 191, .45);
--focus-ring: rgba(45, 212, 191, .3);
--bg: #0b1a17;
--card: #142a23;
--text: #eef5f1;
--muted: #8faea3;
--faint: #5f7f74;
--border: #2b4038;
--surface: #142a23;
--surface-2: #0b1a17;
--surface-3: #234036;
--surface-3-hover: #2d4f43;
--note-border: #2b4038;
--note-phone-text: #c4d8cf;
--toast-text: #eef5f1;
--topbar-bg: rgba(11, 26, 23, .92);
--mobilenav-bg: rgba(11, 26, 23, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
/* 陶土 深色 */
html[data-scheme="terracotta"][data-theme="dark"] {
color-scheme: dark;
--accent: #fb923c;
--accent-dark: #fdba74;
--accent-soft: #3a2417;
--accent-glow: rgba(251, 146, 60, .35);
--accent-glow-sm: rgba(251, 146, 60, .32);
--brand-glow: rgba(251, 146, 60, .45);
--focus-ring: rgba(251, 146, 60, .3);
--bg: #1c130d;
--card: #2a1d14;
--text: #f7f0e6;
--muted: #a89880;
--faint: #7a6a58;
--border: #463322;
--surface: #2a1d14;
--surface-2: #1c130d;
--surface-3: #3d2b1d;
--surface-3-hover: #4d3826;
--note-border: #463322;
--note-phone-text: #d8cbb6;
--toast-text: #f7f0e6;
--topbar-bg: rgba(28, 19, 13, .92);
--mobilenav-bg: rgba(28, 19, 13, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
/* 青石 深色 */
html[data-scheme="slate"][data-theme="dark"] {
color-scheme: dark;
--accent: #94a3b8;
--accent-dark: #cbd5e1;
--accent-soft: #232c38;
--accent-glow: rgba(148, 163, 184, .35);
--accent-glow-sm: rgba(148, 163, 184, .32);
--brand-glow: rgba(148, 163, 184, .45);
--focus-ring: rgba(148, 163, 184, .3);
--bg: #12161d;
--card: #1c222c;
--text: #eef1f5;
--muted: #8b98a9;
--faint: #5f6b7a;
--border: #2f3947;
--surface: #1c222c;
--surface-2: #12161d;
--surface-3: #2a3340;
--surface-3-hover: #37424f;
--note-border: #2f3947;
--note-phone-text: #c3ccd6;
--toast-text: #eef1f5;
--topbar-bg: rgba(18, 22, 29, .92);
--mobilenav-bg: rgba(18, 22, 29, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
/* 深色语义色：与配色无关，各配色共用 */
html[data-theme="dark"] .hint {
background: #064e3b; border-color: #065f46; color: #a7f3d0;
}
html[data-theme="dark"] .prio-高 {
background: #450a0a; color: #fca5a5;
}
html[data-theme="dark"] .prio-中 {
background: #451a03; color: #fcd34d;
}
html[data-theme="dark"] .prio-低 {
background: #052e16; color: #86efac;
}
html[data-theme="dark"] .prio-item-高 {
border-left-color: #ef4444;
}
html[data-theme="dark"] .prio-item-中 {
border-left-color: #fbbf24;
}
html[data-theme="dark"] .prio-item-低 {
border-left-color: #4ade80;
}
html[data-theme="dark"] .overdue-wrap {
border-color: #7f1d1d; background: #2a1215;
}
html[data-theme="dark"] .overdue-title {
color: #fca5a5;
}
html[data-theme="dark"] .overdue-wrap .todo-item {
border-bottom-color: #7f1d1d;
}
html[data-theme="dark"] #report-msg, html[data-theme="dark"] #settings-msg {
color: #34d399;
}
html[data-theme="dark"] .error {
color: #f87171;
}
/* 跟随系统：仅当未显式选主题时，跟随系统深色 */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
color-scheme: dark;
--accent: #3b82f6;
--accent-dark: #60a5fa;
--accent-soft: #1e293b;
--accent-glow: rgba(59, 130, 246, .4);
--accent-glow-sm: rgba(59, 130, 246, .4);
--brand-glow: rgba(59, 130, 246, .5);
--focus-ring: rgba(59, 130, 246, .3);
--bg: #0f172a;
--card: #1e293b;
--text: #f1f5f9;
--muted: #94a3b8;
--faint: #64748b;
--border: #334155;
--surface: #1e293b;
--surface-2: #0f172a;
--surface-3: #334155;
--surface-3-hover: #475569;
--note-border: #334155;
--note-phone-text: #cbd5e1;
--toast-text: #f1f5f9;
--topbar-bg: rgba(15, 23, 42, .92);
--mobilenav-bg: rgba(15, 23, 42, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
html[data-scheme="green"]:not([data-theme]) {
color-scheme: dark;
--accent: #2dd4bf;
--accent-dark: #5eead4;
--accent-soft: #14352f;
--accent-glow: rgba(45, 212, 191, .35);
--accent-glow-sm: rgba(45, 212, 191, .32);
--brand-glow: rgba(45, 212, 191, .45);
--focus-ring: rgba(45, 212, 191, .3);
--bg: #0b1a17;
--card: #142a23;
--text: #eef5f1;
--muted: #8faea3;
--faint: #5f7f74;
--border: #2b4038;
--surface: #142a23;
--surface-2: #0b1a17;
--surface-3: #234036;
--surface-3-hover: #2d4f43;
--note-border: #2b4038;
--note-phone-text: #c4d8cf;
--toast-text: #eef5f1;
--topbar-bg: rgba(11, 26, 23, .92);
--mobilenav-bg: rgba(11, 26, 23, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
html[data-scheme="terracotta"]:not([data-theme]) {
color-scheme: dark;
--accent: #fb923c;
--accent-dark: #fdba74;
--accent-soft: #3a2417;
--accent-glow: rgba(251, 146, 60, .35);
--accent-glow-sm: rgba(251, 146, 60, .32);
--brand-glow: rgba(251, 146, 60, .45);
--focus-ring: rgba(251, 146, 60, .3);
--bg: #1c130d;
--card: #2a1d14;
--text: #f7f0e6;
--muted: #a89880;
--faint: #7a6a58;
--border: #463322;
--surface: #2a1d14;
--surface-2: #1c130d;
--surface-3: #3d2b1d;
--surface-3-hover: #4d3826;
--note-border: #463322;
--note-phone-text: #d8cbb6;
--toast-text: #f7f0e6;
--topbar-bg: rgba(28, 19, 13, .92);
--mobilenav-bg: rgba(28, 19, 13, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
html[data-scheme="slate"]:not([data-theme]) {
color-scheme: dark;
--accent: #94a3b8;
--accent-dark: #cbd5e1;
--accent-soft: #232c38;
--accent-glow: rgba(148, 163, 184, .35);
--accent-glow-sm: rgba(148, 163, 184, .32);
--brand-glow: rgba(148, 163, 184, .45);
--focus-ring: rgba(148, 163, 184, .3);
--bg: #12161d;
--card: #1c222c;
--text: #eef1f5;
--muted: #8b98a9;
--faint: #5f6b7a;
--border: #2f3947;
--surface: #1c222c;
--surface-2: #12161d;
--surface-3: #2a3340;
--surface-3-hover: #37424f;
--note-border: #2f3947;
--note-phone-text: #c3ccd6;
--toast-text: #eef1f5;
--topbar-bg: rgba(18, 22, 29, .92);
--mobilenav-bg: rgba(18, 22, 29, .96);
--overlay: rgba(0, 0, 0, .6);
--bottombar-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
--mobilenav-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
--modal-shadow: 0 24px 64px rgba(0, 0, 0, .6);
--toast-shadow: 0 12px 32px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}
/* 深色语义色：跟随系统时同样生效 */
html:not([data-theme]) .hint {
background: #064e3b; border-color: #065f46; color: #a7f3d0;
}
html:not([data-theme]) .prio-高 {
background: #450a0a; color: #fca5a5;
}
html:not([data-theme]) .prio-中 {
background: #451a03; color: #fcd34d;
}
html:not([data-theme]) .prio-低 {
background: #052e16; color: #86efac;
}
html:not([data-theme]) .prio-item-高 {
border-left-color: #ef4444;
}
html:not([data-theme]) .prio-item-中 {
border-left-color: #fbbf24;
}
html:not([data-theme]) .prio-item-低 {
border-left-color: #4ade80;
}
html:not([data-theme]) .overdue-wrap {
border-color: #7f1d1d; background: #2a1215;
}
html:not([data-theme]) .overdue-title {
color: #fca5a5;
}
html:not([data-theme]) .overdue-wrap .todo-item {
border-bottom-color: #7f1d1d;
}
html:not([data-theme]) #report-msg, html:not([data-theme]) #settings-msg {
color: #34d399;
}
html:not([data-theme]) .error {
color: #f87171;
}
}