/* --- START OF FILE style.css --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ==========================================================================
1. CSS VARIABLES (THEME & LAYOUT)
========================================================================== */
:root, [data-theme="light"] {
--body-bg-color: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--container-bg: #ffffff;
--card-bg: #ffffff;
--control-bg: #f8f9fa;
--modal-bg: #ffffff;
--container-border-color: #dee2e6;
--card-border-color: #e9ecef;
--control-border-color: #ced4da;
--primary-color: #3B82F6;
--primary-hover-color: #2563EB;
--text-color: #1A202C;
--light-text-color: #4A5568;
--border-color: #E2E8F0;
--danger-color: #EF4444;
--danger-hover-color: #DC2626;
--completed-color: #718096;
--accent-teal: #14B8A6;
--accent-teal-hover: #0D9488;
--accent-purple: #8B5CF6;
--accent-purple-hover: #7C3AED;
--accent-amber: #F59E0B;
--accent-amber-hover: #D97706;
--sortable-ghost-bg: rgba(59, 130, 246, 0.1);
--progress-bar-color: var(--accent-teal);
--item-hover-bg-color: #f8f9fa;
--control-hover-bg-color: #e9ecef;
--tag-bg-color: color-mix(in srgb, var(--accent-purple) 20%, #f8f9fa);
--tag-text-color: var(--accent-purple);
--tag-active-bg-color: var(--accent-purple);
--tag-active-text-color: #FFFFFF;
--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
--shadow-md: 0 5px 10px -2px rgba(0, 0, 0, 0.08), 0 3px 6px -3px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -6px rgba(0, 0, 0, 0.1);
--border-radius-sm: 6px;
--border-radius-md: 10px;
--border-radius-lg: 16px;
--border-radius-pill: 9999px;
--border-radius-round: 50%;
--spacing-xs: 5px;
--spacing-sm: 10px;
--spacing-md: 15px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--checkbox-width: 22px;
--task-indent: calc(var(--checkbox-width) + var(--spacing-sm));
--priority-high: #EF4444;
--priority-medium: #F59E0B;
--priority-low: #14B8A6;
--priority-high-bg: rgba(239, 68, 68, 0.1);
--priority-medium-bg: rgba(245, 158, 11, 0.1);
--priority-low-bg: rgba(20, 184, 166, 0.1);
}
[data-theme="dark"] {
--body-bg-color: #1A202C;
--container-bg: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
--card-bg: rgba(26, 32, 44, 0.7);
--control-bg: rgba(45, 55, 72, 0.8);
--modal-bg: #2D3748;
--container-border-color: rgba(255, 255, 255, 0.1);
--card-border-color: rgba(255, 255, 255, 0.15);
--control-border-color: #4A5568;
--primary-color: #60A5FA;
--primary-hover-color: #93C5FD;
--text-color: #F7FAFC;
--light-text-color: #A0AEC0;
--border-color: #4A5568;
--danger-color: #F87171;
--danger-hover-color: #FCA5A5;
--completed-color: #718096;
--accent-teal: #2DD4BF;
--accent-teal-hover: #5EEAD4;
--accent-purple: #A78BFA;
--accent-purple-hover: #C4B5FD;
--accent-amber: #FBBF24;
--accent-amber-hover: #FCD34D;
--sortable-ghost-bg: rgba(96, 165, 250, 0.1);
--progress-bar-color: var(--accent-teal);
--item-hover-bg-color: rgba(74, 85, 104, 0.6);
--control-hover-bg-color: rgba(74, 85, 104, 0.8);
--tag-bg-color: color-mix(in srgb, var(--accent-purple) 25%, transparent);
--tag-text-color: var(--accent-purple);
--tag-active-bg-color: var(--accent-purple);
--tag-active-text-color: #1A202C;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
--svg-icon-filter-dark: invert(90%) sepia(10%) saturate(150%) hue-rotate(180deg) brightness(100%) contrast(90%);
--priority-high: #F87171;
--priority-medium: #FBBF24;
--priority-low: #2DD4BF;
--priority-high-bg: rgba(248, 113, 113, 0.15);
--priority-medium-bg: rgba(251, 191, 36, 0.15);
--priority-low-bg: rgba(45, 212, 191, 0.15);
}
/* ==========================================================================
2. GLOBAL & LAYOUT STYLES
========================================================================== */
body { font-family: 'Inter', sans-serif; min-height: 100vh; width: 100%; margin: 0; background: var(--body-bg-color); background-attachment: fixed; color: var(--text-color); transition: background-image 0.5s, color 0.3s; padding: var(--spacing-xl); box-sizing: border-box; }
.container { width: 680px; max-width: 100%; margin: 0 auto; background: var(--container-bg); border: 1px solid var(--container-border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--spacing-xl); display: flex; flex-direction: column; }
.dashboard-mode .container { width: 1000px; }
.divider { flex-shrink: 0; height: 1px; background-color: var(--border-color); border: none; border-radius: 1px; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); width: 100%; }
/* ==========================================================================
3. HEADER & SECTION STYLES
========================================================================== */
.main-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0; margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--container-border-color); transition: border-color 0.3s; }
.main-header h1 { font-size: 24px; font-weight: 700; margin: 0; flex-shrink: 0; }
.search-container {
position: relative;
display: flex; /* Use Flexbox for alignment */
align-items: center; /* Vertically center items */
gap: var(--spacing-sm); /* Add a gap between the input and the button */
width: 100%;
margin-bottom: var(--spacing-xl);
}
.search-icon { position: absolute; left: 14px; width: 18px; height: 18px; opacity: 0.5; pointer-events: none; transition: opacity 0.3s; }
[data-theme="dark"] .search-icon { filter: var(--svg-icon-filter-dark); }
#main-search-input { flex-grow: 1; width: 100%; height: 44px; border: 1px solid var(--control-border-color); background-color: var(--control-bg); border-radius: var(--border-radius-pill); padding: 12px 20px 12px 45px; font-size: 15px; font-family: inherit; color: var(--text-color); outline: none; transition: all 0.2s ease; }
#main-search-input::placeholder { color: var(--light-text-color); opacity: 0.8; }
#main-search-input:focus { border-color: var(--primary-color); background-color: var(--container-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }
#main-search-input:focus + .search-icon { opacity: 0.8; }
.section-header { display: flex; align-items: left; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); padding: 0 var(--spacing-xs); }
.section-header img { width: 24px; height: 24px; }
.section-header h2 { font-size: 18px; font-weight: 600; margin: 0; color: var(--text-color); flex-grow: 1; flex-shrink: 1; min-width: 0; }
.header-date { font-size: 0.8em; font-weight: 400; color: var(--light-text-color); margin-left: var(--spacing-sm); }
.header-actions button, .header-icon-btn { background: transparent; border: none; cursor: pointer; padding: var(--spacing-xs); border-radius: var(--border-radius-round); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.1s ease; }
.header-actions button:hover, .header-icon-btn:hover { background-color: var(--control-hover-bg-color); transform: scale(1.1); }
.header-actions button img, .header-icon-btn img { width: 22px; height: 22px; transition: filter 0.3s ease; }
.header-icon-btn img { width: 20px; height: 20px; opacity: 0.7; }
.section-toolbar { display: flex; gap: var(--spacing-sm); align-items: center; padding: var(--spacing-sm); margin-bottom: var(--spacing-xl); margin-top: var(--spacing-md); background-color: var(--control-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius-md); flex-wrap: wrap; }
[data-theme="dark"] .header-actions button img, [data-theme="dark"] .header-icon-btn img { filter: var(--svg-icon-filter-dark); }
[data-theme="dark"] .header-icon-btn img { opacity: 0.85; filter: var(--svg-icon-filter-dark); }
.header-actions { display: flex; align-items: center; gap: var(--spacing-sm); position: relative; }
.header-actions .always-visible-action, .header-actions .more-actions-toggle { background: transparent; border: none; cursor: pointer; padding: var(--spacing-xs); border-radius: var(--border-radius-round); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.1s ease; }
.header-actions .always-visible-action:hover, .header-actions .more-actions-toggle:hover { background-color: var(--control-hover-bg-color); transform: scale(1.1); }
.header-actions .always-visible-action img, .header-actions .more-actions-toggle img { width: 22px; height: 22px; transition: filter 0.3s ease; }
[data-theme="dark"] .header-actions .always-visible-action img, [data-theme="dark"] .header-actions .more-actions-toggle img { filter: var(--svg-icon-filter-dark); }
#sync-status.always-visible-action { padding: 0 var(--spacing-xs); font-size: 13px; color: var(--light-text-color); }
.more-actions-toggle { display: none; }
.more-actions-dropdown { display: none; position: absolute; top: calc(100% + var(--spacing-xs)); right: 0; background-color: var(--modal-bg); border: 1px solid var(--container-border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); z-index: 1010; min-width: 180px; padding: var(--spacing-sm); flex-direction: column; gap: var(--spacing-xs); }
.more-actions-dropdown.visible { display: flex; }
.more-actions-dropdown button { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); text-align: left; width: 100%; background-color: transparent; border: none; color: var(--text-color); font-size: 15px; font-weight: 500; border-radius: var(--border-radius-sm); cursor: pointer; transition: background-color 0.2s ease; }
.more-actions-dropdown button:hover { background-color: var(--control-hover-bg-color); }
.more-actions-dropdown button img { width: 20px; height: 20px; flex-shrink: 0; }
[data-theme="dark"] .more-actions-dropdown button img { filter: var(--svg-icon-filter-dark); }
.more-actions-dropdown button span { flex-grow: 1; }
/* ==========================================================================
4. INPUT AREAS
========================================================================== */
.input-area { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.input-area input[type="text"], .input-area input[type="date"], .input-area input[type="datetime-local"], .input-area input[type="number"], .input-area select { flex-grow: 1; border: 1px solid var(--control-border-color); background-color: var(--control-bg); border-radius: var(--border-radius-md); padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--text-color); outline: none; transition: all 0.2s ease; min-width: 0; }
.input-area .cycle-select {
flex-grow: 0; /* 不拉伸 */
flex-shrink: 0; /* 不收缩 */
min-width: 100px; /* 给一个最小宽度 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%234A5568"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /%3e%3c/svg%3e');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 1.1em 1.1em;
padding-right: 36px;
}
/* --- 【核心新增】为深色主题下的 cycle-select 提供特定样式 --- */
[data-theme="dark"] .input-area .cycle-select {
/* 替换为深色主题的箭头图标 (颜色变为 #A0AEC0) */
background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23A0AEC0"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /%3e%3c/svg%3e');
/* 确保选项的文本颜色也是浅色的（在某些浏览器中需要明确指定） */
color: var(--text-color);
}
.input-area input:focus,
.input-area .cycle-select:focus { /* 将 .cycle-select 加入 focus 样式组 */
border-color: var(--primary-color);
background-color: var(--container-bg);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.input-area input::placeholder { color: var(--light-text-color); opacity: 0.8; }
.input-area input:focus, .input-area select:focus { border-color: var(--primary-color); background-color: var(--container-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }
.input-area button { flex-shrink: 0; width: 44px; height: 44px; border: none; background-color: var(--primary-color); color: white; border-radius: var(--border-radius-md); cursor: pointer; font-size: 26px; font-weight: 500; line-height: 44px; transition: background-color 0.2s ease, transform 0.1s ease; }
.input-area button:hover { background-color: var(--primary-hover-color); transform: scale(1.05); }
.monthly-input-area { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--spacing-sm); }
.monthly-input-area #new-monthly-task-input { grid-column: 1 / 2; }
.monthly-input-area #new-monthly-tags-input { grid-column: 1 / 2; font-size: 14px; }
.monthly-input-area button { grid-column: 2 / 3; grid-row: 1 / 3; height: auto; }
.ledger-input-area { flex-wrap: wrap; }
.ledger-input-area input { flex: 1 1 160px; }
.ledger-input-area #ledger-details-input { flex-basis: 100%; }
/* ==========================================================================
5. UNIFIED LIST & ITEM STYLES
========================================================================== */
.task-list, .ledger-table { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.task-list li, .ledger-table .ledger-item { display: flex; align-items: flex-start; padding: var(--spacing-md); border-radius: var(--border-radius-md); position: relative; overflow: hidden; contain: layout; transition: background-color 0.2s ease, border-color 0.2s ease; background-color: var(--card-bg); border: 1px solid var(--card-border-color); }
.task-list li:hover, .ledger-table .ledger-item:hover { background-color: var(--item-hover-bg-color); }
.drag-handle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; align-self: stretch; margin-right: var(--spacing-sm); color: var(--light-text-color); cursor: grab; transition: color 0.2s ease; z-index: 1; }
.drag-handle:hover { color: var(--text-color); }
.task-main-wrapper { flex-grow: 1; display: flex; flex-direction: column; gap: var(--spacing-xs); overflow: hidden; padding-right: var(--spacing-sm); z-index: 1; min-width: 0; }
.task-title-group { display: flex; align-items: center; gap: var(--spacing-sm); }
.task-text { word-break: break-word; transition: color 0.2s ease; flex-grow: 1; line-height: 1.6; font-size: 15px; }
.priority-indicator { display: inline-block; padding: 3px 8px; border-radius: var(--border-radius-pill); font-size: 0.85em; font-weight: 600; line-height: 1.2; text-align: center; margin-left: var(--spacing-xs); }
.priority-indicator.priority-high { background-color: var(--priority-high-bg); color: var(--priority-high); }
.priority-indicator.priority-medium { background-color: var(--priority-medium-bg); color: var(--priority-medium); }
.priority-indicator.priority-low { background-color: var(--priority-low-bg); color: var(--priority-low); }
.checkbox { flex-shrink: 0; width: var(--checkbox-width); height: var(--checkbox-width); margin-top: 2px; border: 2px solid var(--border-color); border-radius: var(--border-radius-round); transition: all 0.2s ease; position: relative; background-color: transparent; cursor: pointer; }
.checkbox::after { content: ''; position: absolute; display: none; left: 50%; top: 50%; width: 6px; height: 12px; border: solid white; border-width: 0 3px 3px 0; transform: translate(-50%, -60%) rotate(45deg); }
.task-list li.completed { opacity: 0.65; }
.task-list li.completed:hover { opacity: 0.9; transform: none; }
.task-list li.completed .checkbox { background-color: var(--primary-color); border-color: var(--primary-color); }
.task-list li.completed .checkbox::after { display: block; }
.task-list li.completed .task-text { text-decoration: line-through; color: var(--completed-color); text-decoration-color: var(--completed-color); }
.completion-date-marker { margin-left: auto; padding-left: var(--spacing-sm); font-size: 13px; font-style: italic; color: var(--accent-teal); white-space: nowrap; flex-shrink: 0; align-self: center; }
[data-theme="dark"] .completion-date-marker { color: var(--accent-teal); }
.li-monthly.completed { background-color: transparent; }
.li-monthly.completed .progress-bar { display: none; }
.task-edit-input { flex-grow: 1; border: 1px solid var(--primary-color); background-color: var(--card-bg); border-radius: var(--border-radius-sm); padding: 4px 8px; font-size: 15px; font-family: inherit; color: inherit; outline: none; }
.note-display-text { font-size: 13px; color: var(--light-text-color); background-color: var(--control-bg); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); margin-top: var(--spacing-xs); margin-left: var(--task-indent); line-height: 1.5; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--control-border-color); }
.progress-bar { position: absolute; left: 0; top: 0; height: 100%; background-color: var(--progress-bar-color); opacity: 0.4; transition: all 0.3s ease; z-index: 0; border-radius: var(--border-radius-md); }
.task-actions { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; margin-left: auto; padding-left: var(--spacing-sm); z-index: 1; }
.action-btn { width: 30px; height: 30px; border: none; border-radius: var(--border-radius-round); background-color: transparent; color: var(--light-text-color); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s ease; }
li:hover .action-btn { opacity: 0.7; }
.action-btn:hover { opacity: 1; background-color: var(--control-hover-bg-color); transform: scale(1.1); }
.action-btn.delete-btn:hover { color: white; background-color: var(--danger-color); }
.action-btn.link-btn:hover { color: white; background-color: var(--accent-teal); }
.action-btn.note-btn.has-note { color: var(--accent-amber); }
.action-btn.note-btn:hover { color: white; background-color: var(--accent-amber); }
.action-btn.archive-btn:hover { color: white; background-color: var(--accent-purple); }
.action-btn img { width: 16px; height: 16px; }
.subtask-list { list-style: none; padding: var(--spacing-sm) 0 0 var(--task-indent); margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.subtask-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 14px; color: var(--text-color); }
.subtask-item .checkbox { width: 18px; height: 18px; }
.subtask-item .checkbox::after { left: 50%; top: 50%; width: 5px; height: 10px; transform: translate(-50%, -60%) rotate(45deg); }
.subtask-input-area { display: flex; margin-left: var(--task-indent); margin-top: var(--spacing-sm); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-md); overflow: hidden; transition: all 0.2s; background-color: var(--control-bg); }
.subtask-input-area:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.subtask-input-area input { flex-grow: 1; font-size: 14px; padding: 6px 10px; border: none; outline: none; background-color: transparent; color: var(--text-color); }
.subtask-input-area button { width: 30px; font-size: 22px; border: none; border-left: 1px solid var(--control-border-color); background-color: transparent; color: var(--light-text-color); transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.subtask-input-area button:hover { background-color: var(--control-hover-bg-color); color: var(--primary-color); }
.tags-container { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); padding: 0 var(--spacing-xs); margin-top: var(--spacing-lg); }
.tag-button { padding: 8px 16px; border-radius: var(--border-radius-pill); border: 1px solid var(--card-border-color); background-color: var(--card-bg); color: var(--text-color); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.tag-button:hover { border-color: var(--tag-text-color); color: var(--tag-text-color); transform: translateY(-1px); }
.tag-button.active { background-color: var(--tag-active-bg-color); color: var(--tag-active-text-color); border-color: var(--tag-active-bg-color); font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.links-container, .tags-on-task { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.tags-on-task { padding-left: 0; }
.links-container { padding-left: var(--task-indent); }
.task-tag-pill { padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: var(--border-radius-pill); background-color: var(--tag-bg-color); color: var(--tag-text-color); border: 1px solid color-mix(in srgb, var(--tag-text-color) 30%, transparent); }
.ledger-table .ledger-header { display: none; }
.ledger-item { flex-direction: column; gap: var(--spacing-xs); align-items: flex-start; }
.ledger-item .drag-handle { display: none; } /* 默认隐藏记账本拖拽手柄，除非在 dashboard-mode */
.ledger-item .ledger-content-wrapper { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.ledger-item span[data-label] { word-break: break-word; font-size: 14px; }
.ledger-item span[data-label]::before { content: attr(data-label); font-weight: 500; color: var(--light-text-color); margin-right: var(--spacing-sm); display: inline-block; width: 75px; }
.ledger-item span[data-label="金额："] { font-weight: bold; font-size: 1.15em; color: var(--accent-amber); }
.ledger-item .delete-btn { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); opacity: 0; }
.ledger-item:hover .delete-btn { opacity: 0.7; }
.ledger-item .delete-btn:hover { opacity: 1; }
.dashboard-mode .ledger-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--spacing-md); width: 100%; }
.dashboard-mode .ledger-item .drag-handle { display: flex; grid-column: 1; }
.dashboard-mode .ledger-item .ledger-content-wrapper { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1.5fr; grid-column: 2; min-width: 0; }
.dashboard-mode .ledger-item span[data-label]::before { display: none; }
.dashboard-mode .ledger-item .delete-btn { position: static; opacity: 0; justify-self: center; grid-column: 3; }
.dashboard-mode .ledger-item:hover .delete-btn { opacity: 0.7; }
/* ==========================================================================
6. MODAL & OVERLAYS
========================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 10, 20, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 1; transition: opacity 0.3s ease; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { background-color: var(--modal-bg); padding: var(--spacing-xl) 36px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); text-align: center; position: relative; transform: scale(1) translateY(0); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; border: 1px solid var(--container-border-color); max-width: 90vw; }
.modal-overlay.hidden .modal-content { transform: scale(0.9) translateY(20px); opacity: 0; }
.modal-content h2 { margin-top: 0; margin-bottom: var(--spacing-lg); color: var(--text-color); font-size: 22px; }
.modal-content p { margin-top: 0; margin-bottom: var(--spacing-lg); color: var(--light-text-color); line-height: 1.6; }
.modal-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); width: 36px; height: 36px; border: none; background: transparent; font-size: 28px; color: var(--light-text-color); cursor: pointer; transition: color 0.2s, transform 0.2s, background-color 0.2s; border-radius: 50%; }
.modal-close:hover { color: var(--danger-color); transform: rotate(90deg) scale(1.1); background-color: var(--control-hover-bg-color); }
.has-sticky-footer { position: relative; padding-bottom: 50px !important; }
.qr-code { width: 220px; height: 220px; display: block; margin: 0 auto var(--spacing-md); border-radius: var(--border-radius-md); border: 4px solid var(--container-bg); box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.modal-footer { font-size: 13px; color: var(--light-text-color); width: 100%; text-align: center; position: absolute; bottom: 0; left: 0; margin: 0; padding: var(--spacing-lg); box-sizing: border-box; }
.history-modal-content { width: 90%; max-width: 650px; max-height: 85vh; display: flex; flex-direction: column; }
.history-calendar-nav { display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.history-calendar-nav button { background: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-round); width: 36px; height: 36px; font-size: 1.3em; cursor: pointer; color: var(--text-color); transition: all 0.2s; }
.history-calendar-nav button:hover { background-color: var(--control-hover-bg-color); transform: scale(1.1); }
.history-calendar-nav span { font-size: 1.3em; font-weight: 600; }
.history-months-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.month-button { padding: var(--spacing-md) var(--spacing-sm); border: 1px solid var(--card-border-color); background-color: var(--card-bg); color: var(--light-text-color); border-radius: var(--border-radius-md); cursor: default; text-align: center; font-weight: 500; transition: all 0.2s; }
.month-button.has-history { background-color: var(--item-hover-bg-color); color: var(--text-color); cursor: pointer; font-weight: 600; }
.month-button.has-history:hover { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); transform: translateY(-2px); }
.month-button.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); font-weight: 700; }
.history-tasks-container { flex-grow: 1; overflow-y: auto; border-top: 1px solid var(--container-border-color); padding-top: var(--spacing-lg); }
.history-tasks-container h3 { margin: 0 0 var(--spacing-md) 0; text-align: left; font-size: 18px; }
#history-task-list .drag-handle, #history-task-list .task-actions { display: none; }
.features-modal-content { width: 90%; max-width: 600px; text-align: left; max-height: 80vh; overflow-y: auto; }
.features-modal-content h2 { text-align: center; margin-bottom: var(--spacing-xl); }
.features-list-style { list-style-type: none; padding-left: 0; margin-bottom: var(--spacing-lg); }
.features-list-style li { margin-bottom: var(--spacing-lg); line-height: 1.7; padding-left: 28px; position: relative; font-size: 15px; }
.features-list-style .features-version-info { margin-top: var(--spacing-xl); padding-left: 0; font-size: 0.9em; color: var(--light-text-color); text-align: center; }
.features-list-style .features-version-info::before { content: none; }
.features-list-style .features-version-info strong { color: var(--light-text-color); font-weight: 500; }
[data-theme="dark"] .features-list-style .features-version-info, [data-theme="dark"] .features-list-style .features-version-info strong { color: var(--light-text-color); }
.features-list-style li::before { content: "✨"; color: var(--accent-amber); position: absolute; left: 0; top: 2px; font-size: 1.1em; }
.features-list-style strong { color: var(--text-color); font-weight: 600; }
[data-theme="dark"] .features-list-style strong { color: var(--text-color); }
[data-theme="dark"] .features-list-style li::before { color: var(--accent-amber); }
#features-list .features-update-title { margin-top: 15px; margin-bottom: 5px; font-size: 1.05em; color: var(--text-color); }
#features-list .features-update-list { list-style-type: disc; margin-left: 20px; margin-bottom: 10px; padding-left: 15px; }
#features-list .features-update-list li { margin-bottom: 4px; line-height: 1.4; font-size: 0.95em; }
#features-list .features-version-info { margin-top: 10px; font-style: italic; font-size: 0.9em; color: var(--light-text-color); }
.links-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--spacing-xs); }
#future-task-list .links-container { padding-left: 0; }
.link-pill { display: inline-flex; align-items: center; gap: 8px; background-color: color-mix(in srgb, var(--accent-teal) 15%, transparent); color: var(--accent-teal); border: 1px solid color-mix(in srgb, var(--accent-teal) 40%, transparent); border-radius: var(--border-radius-pill); padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; }
.link-pill:hover { background-color: color-mix(in srgb, var(--accent-teal) 25%, transparent); color: var(--accent-teal-hover); border-color: var(--accent-teal); transform: translateY(-1px); }
.link-pill span { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delete-link-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background-color: color-mix(in srgb, var(--accent-teal) 50%, transparent); color: var(--accent-teal-hover); border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; font-weight: normal; transition: all 0.2s ease; }
.link-pill:hover .delete-link-btn { background-color: color-mix(in srgb, var(--accent-teal) 70%, transparent); }
.delete-link-btn:hover { background-color: var(--danger-color) !important; color: white !important; transform: scale(1.1); }
/* ==========================================================================
7. UTILITIES & HELPERS
========================================================================== */
.sortable-ghost { background-color: var(--sortable-ghost-bg); border: 2px dashed var(--primary-color); opacity: 0.8; box-shadow: none !important; border-radius: var(--border-radius-md); }
.sortable-ghost * { opacity: 0; }
/* ==========================================================================
8. LEDGER SUMMARY STYLES
========================================================================== */
.ledger-summary { background-color: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-lg); padding: var(--spacing-lg) var(--spacing-xl); margin-bottom: var(--spacing-xl); transition: background-color 0.3s, border-color 0.3s; }
.summary-title { font-size: 18px; font-weight: 600; color: var(--text-color); margin: 0 0 var(--spacing-md) 0; text-align: center; }
.summary-total { font-size: 28px; font-weight: 700; color: var(--accent-amber); text-align: center; margin-bottom: var(--spacing-xl); }
.summary-total.no-expense { font-size: 15px; font-weight: 400; color: var(--light-text-color); }
.summary-breakdown { display: flex; flex-direction: column; gap: var(--spacing-md); }
.summary-item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: center; gap: 6px var(--spacing-md); font-size: 14px; }
.summary-item-label { grid-column: 1 / 2; grid-row: 1 / 2; font-weight: 500; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-item-value { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; font-weight: 500; color: var(--light-text-color); }
.summary-item-value .amount { color: var(--text-color); margin-right: 4px; font-weight: 600; }
.summary-item-bar-container { grid-column: 1 / 3; grid-row: 2 / 3; background-color: var(--border-color); border-radius: var(--border-radius-pill); height: 10px; overflow: hidden; }
.summary-item-bar { height: 100%; background-color: var(--accent-purple); border-radius: var(--border-radius-pill); transition: width 0.5s ease-out; }
/* ==========================================================================
9. HEADER SELECTOR STYLES
========================================================================== */
.header-select { margin-left: auto; padding: 8px 14px; padding-right: 36px; font-size: 15px; font-weight: 500; color: var(--text-color); background-color: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-md); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%234A5568"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /%3e%3c/svg%3e'); background-repeat: no-repeat; background-position: right 12px center; background-size: 1.1em 1.1em; cursor: pointer; outline: none; transition: all 0.2s ease; }
.header-select:hover { background-color: var(--control-hover-bg-color); border-color: var(--primary-color); }
.header-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent); }
[data-theme="dark"] .header-select { background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23A0AEC0"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /%3e%3c/svg%3e'); }
/* ==========================================================================
10. IMPORT/EXPORT BUTTON STYLES
========================================================================== */
.header-actions-group { display: flex; align-items: center; gap: var(--spacing-sm); margin-left: var(--spacing-lg); }
.header-action-btn-small { padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--light-text-color); background-color: transparent; border: 1px solid var(--control-border-color); border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; }
.header-action-btn-small:hover { color: var(--text-color); border-color: var(--primary-color); background-color: var(--control-hover-bg-color); }
.hidden-file-input { display: none; }
.section-toolbar { display: flex; gap: var(--spacing-sm); align-items: center; padding: var(--spacing-sm); margin-bottom: var(--spacing-xl); background-color: var(--control-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius-md); flex-wrap: wrap; }
/* ==========================================================================
11. HISTORY MODAL STYLES
========================================================================== */
.section-header .history-btn { margin-left: auto; }
.history-modal-content { width: 90%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; }
.history-calendar-nav { display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); margin-top: -10px; margin-bottom: var(--spacing-md); }
.history-calendar-nav button { background: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: 50%; width: 36px; height: 36px; font-size: 1.3em; cursor: pointer; color: var(--text-color); transition: all 0.2s; line-height: 1; }
.history-calendar-nav button:hover { background-color: var(--control-hover-bg-color); transform: scale(1.1); }
.history-calendar-nav span { font-size: 1.3em; font-weight: 600; min-width: 80px; text-align: center; }
.history-months-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.month-button { padding: var(--spacing-md) var(--spacing-sm); border: 1px solid var(--card-border-color); background-color: var(--card-bg); color: var(--light-text-color); border-radius: var(--border-radius-md); cursor: default; text-align: center; font-weight: 500; transition: all 0.2s; opacity: 0.5; }
.month-button.has-history { opacity: 1; color: var(--text-color); cursor: pointer; font-weight: 600; }
.month-button.has-history:hover { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); transform: translateY(-2px); }
/* ==========================================================================
12. CUSTOM PROMPT MODAL STYLES
========================================================================== */
.custom-prompt-content { width: 90%; max-width: 500px; text-align: left; }
.custom-prompt-content h2 { text-align: center; margin-bottom: var(--spacing-md); }
.custom-prompt-message { font-size: 15px; color: var(--light-text-color); margin-bottom: var(--spacing-lg); line-height: 1.6; white-space: pre-wrap; }
.custom-prompt-input-area { margin-bottom: var(--spacing-xl); }
.custom-prompt-input-area input[type="text"], .custom-prompt-input-area input[type="url"], .custom-prompt-input-area input[type="date"], .custom-prompt-input-area textarea { width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--text-color); background-color: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-md); outline: none; box-sizing: border-box; transition: all 0.2s ease; }
.custom-prompt-input-area textarea { min-height: 80px; resize: vertical; }
.custom-prompt-input-area input:focus, .custom-prompt-input-area textarea:focus { border-color: var(--primary-color); background-color: var(--container-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }
.custom-prompt-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.custom-prompt-btn { padding: 10px 20px; font-size: 15px; font-weight: 500; border-radius: var(--border-radius-md); cursor: pointer; border: none; transition: all 0.2s ease; min-width: 100px; text-align: center; }
.custom-prompt-confirm { background-color: var(--primary-color); color: white; }
.custom-prompt-confirm:hover { background-color: var(--primary-hover-color); }
.custom-prompt-cancel { background-color: var(--control-bg); color: var(--text-color); border: 1px solid var(--control-border-color); }
.custom-prompt-cancel:hover { background-color: var(--control-hover-bg-color); }
.custom-prompt-content .modal-footer { margin-top: var(--spacing-lg); }
/* ==========================================================================
PWA 底部标签栏样式
========================================================================== */
body { padding-bottom: 80px; }
.bottom-tab-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 65px; display: flex; justify-content: space-around; align-items: center; background-color: var(--container-bg); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); z-index: 1000; }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-decoration: none; color: var(--light-text-color); transition: color 0.2s ease-in-out; padding: 6px 0; gap: 4px; }
.tab-item img { width: 24px; height: 24px; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; }
[data-theme="dark"] .tab-item img { filter: var(--svg-icon-filter-dark); }
.tab-label { font-size: 12px; font-weight: 500; }
.tab-item.active { color: var(--primary-color); }
.tab-item.active img { opacity: 1; transform: scale(1.1); }
[data-theme="dark"] .tab-item.active img { filter: none; }
/* ==========================================================================
14. CUSTOM DATETIME INPUT STYLES
========================================================================== */
.input-area input[type="datetime-local"] { flex-grow: 1; border: 1px solid var(--control-border-color); background-color: var(--control-bg); border-radius: var(--border-radius-md); padding: 12px 14px; font-size: 15px; font-family: inherit; outline: none; transition: all 0.2s ease; min-width: 210px; position: relative; color: var(--light-text-color); }
.input-area input[type="datetime-local"]:valid { color: var(--text-color); }
[data-theme="dark"] .input-area input[type="datetime-local"]:valid { color: var(--text-color); }
.input-area input[type="datetime-local"]:hover { border-color: var(--primary-color); }
.input-area input[type="datetime-local"]:focus { border-color: var(--primary-color); background-color: var(--container-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }
.input-area input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; }
.has-datetime-picker { position: relative; flex-grow: 1; }
.has-datetime-picker::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-image: url('data:image/svg+xml;charset=UTF-8,'); background-repeat: no-repeat; background-size: contain; opacity: 0.6; pointer-events: none; transition: opacity 0.2s; }
[data-theme="dark"] .has-datetime-picker::after { background-image: url('data:image/svg+xml;charset=UTF-8,'); }
.has-datetime-picker:hover::after { opacity: 1; }
/* ==========================================================================
15. FAQ MODAL STYLES
========================================================================== */
.faq-modal-content { width: 90%; max-width: 650px; text-align: left; max-height: 85vh; display: flex; flex-direction: column; }
.faq-modal-content h2 { text-align: center; margin-bottom: var(--spacing-xl); flex-shrink: 0; }
.faq-list { overflow-y: auto; padding-right: var(--spacing-sm); margin: 0; }
.faq-item { margin-bottom: var(--spacing-xl); }
.faq-question { font-size: 16px; font-weight: 700; color: var(--text-color); margin-top: 0; margin-bottom: var(--spacing-sm); line-height: 1.5; }
.faq-answer { font-size: 15px; color: var(--light-text-color); margin: 0; padding-left: 22px; line-height: 1.7; position: relative; }
.faq-answer::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; opacity: 0.6; }
/* ==========================================================================
16. STATS PAGE ENHANCEMENT STYLES
========================================================================== */
.chart-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border-color); padding-bottom: 2px; margin-bottom: var(--spacing-xs); padding-right: 40px; }
.chart-header h2 { margin: 0; border: none; padding: 0; }
.timespan-selector { display: flex; background-color: var(--control-bg); border-radius: var(--border-radius-md); padding: 4px; }
.timespan-selector button { padding: 6px 14px; border: none; background-color: transparent; color: var(--light-text-color); font-size: 14px; font-weight: 600; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; }
.timespan-selector button:hover { color: var(--text-color); }
.timespan-selector button.active { background-color: var(--container-bg); color: var(--primary-color); box-shadow: var(--shadow-sm); }
/* ==========================================================================
17. BUDGET & ANNUAL REPORT STYLES
========================================================================== */
.budget-progress-container { grid-column: 1 / 2; grid-row: 3 / 4; background-color: var(--border-color); border-radius: var(--border-radius-pill); height: 8px; overflow: hidden; margin-top: 0; }
.budget-progress-bar { height: 100%; background-color: var(--primary-color); border-radius: var(--border-radius-pill); transition: width 0.5s ease-out; }
.summary-item.over-budget .budget-progress-bar { background-color: var(--danger-color); }
.budget-progress-text { grid-column: 2 / 3; grid-row: 3 / 4; justify-self: end; font-size: 12px; color: var(--light-text-color); margin-top: 0; white-space: nowrap; }
.budget-input-form { display: flex; flex-direction: column; gap: var(--spacing-md); max-height: 40vh; overflow-y: auto; padding: var(--spacing-sm) var(--spacing-xs); }
.budget-input-row { display: grid; grid-template-columns: minmax(80px, auto) 1fr; justify-content: center; align-items: center; gap: var(--spacing-md); }
.budget-input-label { justify-self: end; font-weight: 500; white-space: nowrap; padding: 6px 12px; border-radius: var(--border-radius-pill); background-color: var(--tag-bg-color); color: var(--tag-text-color); border: 1px solid color-mix(in srgb, var(--tag-text-color) 30%, transparent); font-size: 14px; box-shadow: var(--shadow-sm); }
.budget-input-wrapper { position: relative; width: 160px; justify-self: start; }
.budget-input-wrapper::before { content: attr(data-currency); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--light-text-color); font-weight: 600; pointer-events: none; z-index: 1; }
.budget-input-field { width: 100%; padding: 10px 14px; font-size: 15px; font-family: inherit; color: var(--text-color); background-color: var(--control-bg); border: 1px solid var(--control-border-color); border-radius: var(--border-radius-md); outline: none; box-sizing: border-box; transition: all 0.2s ease; position: relative; padding-left: 32px; }
.budget-input-field:focus { border-color: var(--primary-color); background-color: var(--container-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }
.budget-input-field[type=number]::-webkit-inner-spin-button, .budget-input-field[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.budget-input-field[type=number] {
-moz-appearance: textfield; /* Firefox */
-webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
appearance: none; /* Standard property */
margin: 0; /* Optional: Reset margin */
}
.budget-input-field[type=number]::-webkit-inner-spin-button,
.budget-input-field[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.annual-report-content { width: 90%; max-width: 700px; max-height: 95vh; display: flex; flex-direction: column; }
#annual-report-details { flex-grow: 1; }
#annual-report-summary { padding: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
#annual-report-summary .summary-title { font-size: 16px; margin-bottom: var(--spacing-sm); }
#annual-report-summary .summary-total { font-size: 24px; margin-bottom: var(--spacing-sm); }
.annual-report-breakdown { display: flex; justify-content: space-around; font-size: 14px; color: var(--light-text-color); }
.annual-report-breakdown strong { color: var(--text-color); font-weight: 600; }
.annual-report-section-title { font-size: 1.1em; font-weight: 600; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--border-color); }
#annual-report-details ul { list-style: none; padding: 0; margin: 0; background-color: var(--card-bg); border-radius: var(--border-radius-md); border: 1px solid var(--card-border-color); }
#annual-report-details li { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-xs) var(--spacing-md); border-bottom: 1px solid var(--card-border-color); font-size: 14px; }
#annual-report-details li:last-child { border-bottom: none; }
#annual-report-details .faq-question, #annual-report-details .faq-answer { margin: 0; padding: 0; }
#annual-report-details .faq-question { font-weight: 500; color: var(--text-color); }
#annual-report-details .faq-answer { font-weight: 600; color: var(--text-color); }
#annual-report-details .faq-answer::before { display: none; }
/* ==========================================================================
18. CURRENCY PICKER STYLES (FINAL FIX)
========================================================================== */
/* --- 货币选择器触发按钮 --- */
.currency-picker {
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--border-radius-round);
width: 32px;
height: 32px;
padding: 6px;
cursor: pointer;
margin-left: var(--spacing-sm);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
color: var(--light-text-color);
opacity: 0.8;
}
.currency-picker:hover {
background-color: var(--control-hover-bg-color);
opacity: 1;
transform: scale(1.1);
border-color: var(--primary-color);
}
.currency-picker img {
width: 100%;
height: 100%;
}
[data-theme="dark"] .currency-picker {
color: var(--light-text-color);
}
/* --- 模态框内的网格容器 --- */
.currency-options-grid {
display: grid;
/*
* 【核心修复 1】使用更小的 minmax 值，并调整为5列。
* auto-fit 仍然是关键，但这里我们给它一个更明确的列数提示。
* 45px 是一个比较安全的最小宽度值。
*/
grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
/* 【核心修复 2】减小按钮之间的间隙 */
gap: var(--spacing-xs); /* 使用更小的间隙变量，例如 5px */
}
/* --- 货币符号按钮本身 --- */
.currency-option-btn {
/* 继承自 .custom-prompt-btn 的样式可能导致问题，我们在这里重置关键属性 */
min-width: unset !important; /* 【核心修复 3】取消任何可能继承的最小宽度限制！ */
/* 调整内边距，使其更紧凑 */
padding: 8px 6px;
/* 保持字体大小和权重 */
font-size: 16px;
font-weight: 600;
/* 确保按钮内容居中 */
display: flex;
align-items: center;
justify-content: center;
line-height: 1; /* 确保文字垂直居中 */
}
/* --- 高亮状态的按钮 --- */
.currency-option-btn.active {
background-color: var(--primary-color) !important;
color: white !important;
}
/* --- 模态框粘性页脚的辅助类 --- */
.has-sticky-footer {
position: relative;
padding-bottom: 50px !important;
}
/* ==========================================================================
19. RESPONSIVE DESIGN FOR MOBILE
========================================================================== */
@media (max-width: 768px) {
:root, [data-theme="light"], [data-theme="dark"] { --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; }
html { font-size: 15px; }
body { display: flex; flex-direction: column; min-height: 100vh; padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); padding-top: var(--spacing-md); }
.container { flex-grow: 1; display: flex; flex-direction: column; }
.section { flex-grow: 1; display: flex; flex-direction: column; }
.task-list, .ledger-table { flex-grow: 1; }
.task-list:empty, .ledger-table:empty { min-height: 200px; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); text-align: center; border: 1px dashed var(--control-border-color); border-radius: var(--border-radius-md); margin-top: var(--spacing-md); background-color: var(--card-bg); }
.task-list:empty::before, .ledger-table:empty::before { color: var(--light-text-color); font-size: 1rem; line-height: 1.5; }
#daily-task-list:empty::before { content: "太棒了！今日重复任务已全部处理，或暂无此类任务。"; }
#monthly-task-list:empty::before { content: "本月还没有待办事项，\A 从上方输入框开始添加吧！"; }
#future-task-list:empty::before { content: "还没有为未来制定计划哦。\A 记录下你的目标和想法吧。"; }
#ledger-list:empty::before { content: "本月还没有记账记录。\A 点击上方输入框开始第一笔记录。"; }
.main-header { flex-wrap: wrap; gap: var(--spacing-sm); }
.main-header h1 { font-size: 20px; width: 100%; text-align: center; margin-bottom: var(--spacing-sm); }
.header-actions { width: 100%; justify-content: space-around; }
.header-actions button img { width: 20px; height: 20px; }
.main-header { align-items: center; }
.header-actions > button:not(.always-visible-action):not(.more-actions-toggle), .header-actions > span:not(.always-visible-action) { display: none !important; }
.more-actions-toggle { display: flex; }
.ledger-input-area { flex-direction: column; }
.ledger-input-area input { flex-basis: auto; }
.future-input-area { flex-direction: column; }
.task-list li, .ledger-table .ledger-item { padding: var(--spacing-md); }
.task-actions { gap: var(--spacing-xs); /* 调整间距以容纳更多按钮 */ }
.action-btn { opacity: 0.8; width: 32px; /* 略微减小按钮以适应更多按钮 */ height: 32px; font-size: 14px; /* 调整图标/文字大小 */ }
.tags-container, .section-toolbar { gap: var(--spacing-sm); padding: var(--spacing-sm); }
.header-action-btn-small { padding: 8px 12px; font-size: 13px; }
.header-actions-group { flex-wrap: wrap; margin-left: 0; }
.modal-content { width: 95vw; padding: var(--spacing-lg) var(--spacing-md); }
.history-months-grid { grid-template-columns: repeat(3, 1fr); }
.annual-report-content { padding: var(--spacing-md); padding-bottom: 50px !important; }
.chart-header { flex-direction: column; align-items: center; gap: var(--spacing-md); padding-right: 0; }
.annual-report-breakdown { flex-direction: column; align-items: center; gap: var(--spacing-xs); }
.ledger-item span[data-label]::before { width: 70px; }
.stats-modal-content { padding: var(--spacing-lg) var(--spacing-md); max-height: 90vh; overflow-y: auto; }
.stats-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.chart-card { width: 100%; }
.chart-header h2 { font-size: 1.1em; text-align: center; margin-bottom: var(--spacing-xs); }
.timespan-selector { flex-wrap: wrap; justify-content: center; gap: var(--spacing-xs); }
.timespan-selector button { padding: 6px 10px; font-size: 13px; flex-grow: 1; min-width: 80px; text-align: center; }
.chart-canvas-container { height: 280px; }
.stats-modal-content .modal-close { top: var(--spacing-sm); right: var(--spacing-sm); width: 32px; height: 32px; font-size: 24px; }
.stats-header h1 { font-size: 1.5em; }
/* 【移除】与移动端长按排序相关的拖拽手柄特定样式 */
/* .drag-handle { display: none; } */ /* 此行已存在，但现在对每日和本月清单是永久性的，通过 JS 不渲染手柄实现 */
/* 修正因移除拖拽手柄可能导致的缩进问题 (如果之前有基于拖拽手柄的缩进) */
.li-daily .task-main-wrapper,
.li-monthly .task-main-wrapper {
margin-left: 0; /* 如果之前有为拖拽手柄留出的 margin */
}
.li-daily .note-display-text, .li-daily .links-container,
.li-monthly .note-display-text, .li-monthly .links-container, .li-monthly .subtask-list, .li-monthly .subtask-input-area {
/* 如果这些元素的 margin-left 或 padding-left 是基于 --task-indent，并且希望它们与没有拖拽手柄的文本对齐 */
margin-left: var(--spacing-sm); /* 或调整为期望的缩进值 */
/* padding-left: var(--spacing-sm); */ /* 仅当使用了padding时 */
}
/* 如果希望完全不缩进 */
.li-daily .note-display-text, .li-daily .links-container,
.li-monthly .note-display-text, .li-monthly .links-container, .li-monthly .subtask-list, .li-monthly .subtask-input-area {
margin-left: 0 !important;
padding-left: 0 !important; /* 确保清除所有左侧内边距 */
}
/* 单独为 .note-display-text 在这些特定父元素下设置移动端的左内边距 */
.li-daily .note-display-text,
.li-monthly .note-display-text {
/* 新的 padding-left: 橙色条宽度(4px) + 期望的间隙 (var(--spacing-sm)) */
padding-left: calc(4px + var(--spacing-sm)) !important;
}
/* 确保复选框和任务文本之间仍有间距 */
.task-title-group {
gap: var(--spacing-sm); /* 复选框与文本的间距 */
}
/* 优化“本月待办”标题行布局 */
#monthly-section .section-header > img { flex-shrink: 0; }
#monthly-section .section-header > h2 { flex-grow: 1; flex-shrink: 1; min-width: 0; margin-right: var(--spacing-sm); }
#monthly-section .section-header > .section-header-main-actions { width: auto; margin-left: auto; }
#monthly-section .header-actions-group { justify-content: space-between; }
#monthly-section .header-actions-group > * { flex-grow: 1; text-align: center; }
/* 优化“本月待办”任务条目布局 */
.task-list li.li-monthly { flex-wrap: wrap; }
.li-monthly .task-main-wrapper { width: 100%; padding-right: 0; }
.li-monthly .task-title-group { flex-wrap: wrap; gap: var(--spacing-xs); }
.li-monthly .task-actions { width: 100%; justify-content: space-around; margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px solid var(--card-border-color); }
.li-monthly .action-btn { opacity: 0.8; }
/* 【移除】与移动端长按排序相关的CSS */
/* .task-list.sort-mode-active ... */
/* .mobile-sort-controls ... */
/* .mobile-sort-btn ... */
.note-display-text { margin-top: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); padding-left: calc(var(--spacing-md) + 10px); font-size: 14px; line-height: 1.6; background-color: var(--control-bg); border: none; border-radius: var(--border-radius-sm); position: relative; overflow: hidden; }
.note-display-text::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: var(--accent-amber); opacity: 0.8; }
[data-theme="dark"] .note-display-text { background-color: rgba(0,0,0,0.2); }
}
.section { display: none; }
/* ==========================================================================
20. DESKTOP-SPECIFIC LAYOUT OPTIMIZATIONS (PWA)
========================================================================== */
/* 当屏幕宽度大于 768px 时，应用以下桌面端样式 */
@media (min-width: 769px) {
/* --- 1. 整体页面布局调整为 Flexbox 双列 --- */
body {
/* 使用 Flexbox 创建主布局 */
display: flex;
gap: var(--spacing-xl); /* 在导航和内容之间创建美观的间隙 */
/* 确保 body 宽度是100% 并且有合适的内边距 */
width: 100%;
padding: var(--spacing-xl);
padding-bottom: var(--spacing-xl); /* 覆盖移动端为底部栏留出的内边距 */
}
/* --- 2. 将底部导航栏改造为左侧边栏 (Sidebar) --- */
.bottom-tab-nav {
/* 使其在页面滚动时“粘”在顶部 */
position: sticky;
top: var(--spacing-xl);
/* 设置边栏的尺寸 */
width: 240px;
flex-shrink: 0; /* 防止边栏被压缩 */
height: fit-content;
max-height: calc(100vh - (var(--spacing-xl) * 2));
overflow-y: auto; /* 如果导航项太多，允许内部滚动 */
/* 将导航项从水平改为垂直排列 */
flex-direction: column;
justify-content: flex-start;
align-items: stretch; /* 让每个导航项都撑满边栏宽度 */
gap: var(--spacing-sm);
/* 美化边栏外观 */
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
box-shadow: var(--shadow-md);
border-top: 1px solid var(--border-color); /* 保留顶部边框以保持一致性 */
}
/* --- 3. 调整边栏内导航项的样式 --- */
.tab-item {
flex-direction: row; /* 图标和文字左右排列 */
justify-content: flex-start; /* 内容靠左 */
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
height: auto;
gap: var(--spacing-md);
}
.tab-label {
font-size: 16px; /* 桌面端使用更大的字体 */
}
.tab-item.active {
background-color: var(--primary-color);
color: white;
}
/* 修复暗色模式下，高亮项的图标颜色 */
[data-theme="dark"] .tab-item.active img {
filter: brightness(0) invert(1);
}
/* --- 4. 【关键修正】让右侧主内容区填满剩余空间 --- */
.container {
/* 让内容区自动伸展，填满所有可用空间 */
flex-grow: 1;
/* 覆盖掉移动端的固定宽度和居中外边距 */
width: auto;
max-width: none;
margin: 0;
}
}
/* ==========================================================================
21 & 22. FINAL MOBILE UI STYLES (REVISED)
========================================================================== */
@media (max-width: 768px) {
/* --- A. 通用任务条目基础样式 --- */
.task-list li {
display: flex; /* 让手柄和内容区在同一行开始 */
flex-wrap: wrap; /* 允许详情面板换行 */
align-items: flex-start;
padding: var(--spacing-md);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* 移动端拖拽手柄样式 */
.task-list li .drag-handle {
display: flex !important;
align-self: flex-start;
padding-top: 4px;
}
/* 任务内容区占据剩余所有空间 */
.task-list li .task-content {
flex: 1;
min-width: 0; /* 允许内容区收缩 */
}
/* --- B. 始终可见的顶层区域 (Flexbox 布局) --- */
.task-main-visible-area {
display: flex;
align-items: center; /* 垂直居中对齐 */
width: 100%;
gap: var(--spacing-sm); /* 标题和图标之间的间隙 */
cursor: pointer;
}
/* --- C. 标题组 (包含复选框, 任务文本等) --- */
.task-title-group {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-grow: 1; /* 占据所有可用空间 */
min-width: 0; /* 【关键】允许这个容器被压缩 */
}
.task-text {
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
flex-grow: 1; /* 再次确保它在title-group内是弹性的 */
min-width: 0; /* 允许文本元素本身被压缩 */
font-size: 16px;
}
.task-list li.is-expanded .task-text {
white-space: normal; /* 展开后允许任务文本正常换行 */
}
/* --- D. 右侧的提示图标容器 --- */
.task-meta-indicators {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-shrink: 0; /* 【关键】禁止这个容器被压缩 */
color: var(--light-text-color);
font-size: 13px;
}
.task-meta-indicators span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.task-meta-indicators img {
width: 16px;
height: 16px;
opacity: 0.6;
vertical-align: middle;
}
[data-theme="dark"] .task-meta-indicators img {
filter: var(--svg-icon-filter-dark);
}
/* --- E. 展开的详情面板 --- */
.task-details-pane {
display: none;
flex-basis: 100%; /* 让详情面板始终占据完整的一行 */
flex-direction: column;
gap: var(--spacing-md);
padding-top: var(--spacing-md);
margin-top: var(--spacing-md);
border-top: 1px solid var(--card-border-color);
animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.task-list li.is-expanded .task-details-pane {
display: flex;
}
/* 详情面板中的子元素样式 */
.task-details-pane .subtask-list,
.task-details-pane .links-container,
.task-details-pane .note-display-text,
.task-details-pane .subtask-input-area,
.task-details-pane .links-wrapper {
margin-left: 0 !important;
padding-left: 0 !important;
}
.task-details-pane .note-display-text {
display: block;
padding-left: calc(var(--spacing-md) + 10px) !important;
position: relative;
}
.note-display-text::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 4px; height: 100%;
background-color: var(--accent-amber);
opacity: 0.8;
}
/* --- F. 统一的操作工具栏 --- */
.task-actions {
display: flex;
justify-content: space-around;
width: 100%;
background-color: var(--control-bg);
border: 1px solid var(--card-border-color);
border-radius: var(--border-radius-pill);
padding: var(--spacing-xs);
margin-top: var(--spacing-sm);
}
.task-actions .action-btn {
opacity: 0.8;
flex: 1;
height: 36px;
}
/* --- G. 水平子任务样式 --- */
.subtask-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
padding-left: 0;
margin-top: var(--spacing-sm);
}
.subtask-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 6px 12px;
border: 1px solid var(--control-border-color);
border-radius: var(--border-radius-pill);
background-color: var(--control-bg);
}
/* 子任务列表、链接、备注等在详情面板中 */
.task-details-pane .subtask-list,
.task-details-pane .links-container,
.task-details-pane .note-display-text,
.task-details-pane .subtask-input-area {
display: flex; /* 或 block/grid */
margin-left: 0 !important;
padding-left: 0 !important;
}
.task-details-pane .note-display-text {
display: block;
padding-left: calc(var(--spacing-md) + 10px) !important;
}
/* 统一的操作工具栏 */
.task-actions {
display: flex; /* 在 details-pane 中，默认是隐藏的 */
justify-content: space-around;
width: 100%;
background-color: var(--control-bg);
border: 1px solid var(--card-border-color);
border-radius: var(--border-radius-pill);
padding: var(--spacing-xs);
margin-top: var(--spacing-sm);
box-shadow: var(--shadow-sm);
}
.task-actions .action-btn {
opacity: 0.8;
flex: 1;
height: 36px;
}
}
/* --- C. 次要信息提示图标（新） --- */
.task-meta-indicators {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-left: auto; /* 推到最右边 */
flex-shrink: 0;
color: var(--light-text-color);
font-size: 13px;
}
.task-meta-indicators span {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* 【核心修复】使用更具体的选择器，并添加 vertical-align */
.task-main-visible-area .task-meta-indicators img {
width: 16px;
height: 16px;
opacity: 0.6;
vertical-align: middle; /* 确保图标和旁边的文字垂直对齐 */
}
[data-theme="dark"] .task-meta-indicators img {
filter: var(--svg-icon-filter-dark);
}
/* ==========================================================================
23. MORE ACTIONS MENU ENHANCEMENT (NEW)
========================================================================== */
/* 统一菜单项的样式，无论是 button 还是 a 标签 */
.more-actions-dropdown button,
.more-actions-dropdown .more-actions-menu-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
width: 100%;
background-color: transparent;
border: none;
color: var(--text-color);
font-size: 15px;
font-weight: 500;
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none; /* 移除 a 标签的下划线 */
}
.more-actions-dropdown button:hover,
.more-actions-dropdown .more-actions-menu-item:hover {
background-color: var(--control-hover-bg-color);
}
.more-actions-dropdown button img,
.more-actions-dropdown .more-actions-menu-item img {
width: 20px;
height: 20px;
flex-shrink: 0;
}
[data-theme="dark"] .more-actions-dropdown button img,
[data-theme="dark"] .more-actions-dropdown .more-actions-menu-item img {
filter: var(--svg-icon-filter-dark);
}
.more-actions-dropdown button span,
.more-actions-dropdown .more-actions-menu-item span {
flex-grow: 1;
}
/* 为新加的 app-description 添加一些边距 */
#features-modal .app-description {
margin-bottom: var(--spacing-lg);
}
#features-modal .app-description h3 {
margin-bottom: var(--spacing-sm);
}
/* ==========================================================================
24. BOTTOM TAB NAV DARK THEME FIX (FINAL & ROBUST)
========================================================================== */
/*
* 针对暗色主题下，底部固定导航栏背景“渗透”问题的最终修复。
* 根本原因是其背景被设置为一个 linear-gradient，这极易在 fixed 定位下
* 引发浏览器渲染层混合错误。
*
* 解决方案是：为其强制指定一个不透明的实体背景色，并使用多种
* CSS 技巧强制隔离其渲染层。
*/
[data-theme="dark"] .bottom-tab-nav {
/* 1. 【核心修复】使用一个不透明的实体颜色变量覆盖掉原来的渐变背景。*/
/* var(--modal-bg) 是一个完美的选择，因为它本身就是为顶层UI元素设计的。*/
/* 使用 !important 确保拥有最高优先级。*/
background-color: var(--modal-bg) !important;
background-image: none !important;
/* 2. 【渲染层隔离】使用多种属性组合，强力提示浏览器为该元素创建独立的渲染层。*/
transform: translateZ(0);
will-change: transform;
/* 3. 【层叠上下文隔离】创建全新的层叠上下文，防止与下方元素发生层级混合。*/
isolation: isolate;
/* 4. 【边框颜色统一】确保顶部边框颜色与暗色主题协调。*/
border-color: var(--container-border-color);
}
/* ==========================================================================
25. FUTURE TASK REMINDER UI FIX
========================================================================== */
/*
* 优化“未来计划”中提醒信息（铃铛图标 + 时间）的显示效果，
* 特别是为了在移动端也能清晰看到提醒时间。
*/
.reminder-info {
/* 1. 将容器变为 Flexbox，以便轻松对齐内部元素 */
display: inline-flex;
align-items: center; /* 2. 让铃铛图标和时间文本垂直居中对齐 */
/* 3. 在图标和文本之间创建一点美观的间隙 */
gap: 6px;
/* 4. 保持原有的样式 */
margin-left: auto; /* 自动推到右侧 */
padding-left: 8px; /* 与任务文本保持一些距离 */
cursor: help;
opacity: 0.8;
flex-shrink: 0; /* 防止被压缩 */
}
/* 5. 为新增的提醒时间文本设置样式 */
.reminder-datetime-text {
font-size: 13px; /* 比任务主文本略小 */
font-weight: 500;
color: var(--light-text-color);
white-space: nowrap; /* 防止时间文本换行 */
}
/* 确保在深色模式下颜色正确 */
[data-theme="dark"] .reminder-datetime-text {
color: var(--light-text-color);
}
/* ==========================================================================
26. COMPLETION CELEBRATION STYLES (NEW)
========================================================================== */
.completion-celebration {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
margin: var(--spacing-sm) auto var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-lg);
background-color: color-mix(in srgb, var(--accent-teal) 15%, transparent);
color: var(--accent-teal-hover);
border: 1px solid color-mix(in srgb, var(--accent-teal) 30%, transparent);
border-radius: var(--border-radius-pill);
font-weight: 600;
font-size: 14px;
animation: fadeInScaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
transform-origin: center;
box-shadow: var(--shadow-sm);
}
.completion-celebration img {
width: 24px;
height: 24px;
/* 动画效果 */
animation: tada 1.5s ease-in-out infinite;
animation-delay: 0.5s;
}
[data-theme="dark"] .completion-celebration {
background-color: color-mix(in srgb, var(--accent-teal) 20%, transparent);
color: var(--accent-teal);
border-color: color-mix(in srgb, var(--accent-teal) 40%, transparent);
}
@keyframes fadeInScaleUp {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
/* 【新增】调整每日清单输入区域以适应新的下拉框 */
#daily-section .input-area {
display: grid;
grid-template-columns: 1fr auto auto; /* 调整为三列布局 */
align-items: center;
}
#daily-section .input-area select {
flex-grow: 0; /* 防止下拉框过度伸展 */
width: auto;
margin: 0; /* 移除继承的 margin-left */
height: 44px; /* 确保高度一致 */
}
/* 【新增】“不重复”任务的特殊样式 */
.li-daily.is-once {
padding-left: calc(var(--spacing-md) + 10px); /* 为左侧高亮条留出空间 */
border-left: 5px solid var(--accent-amber);
}
/* 【新增】“不重复”任务的日期标记 */
.once-date-marker {
margin-left: auto;
padding-left: var(--spacing-sm);
font-size: 13px;
font-weight: 500;
color: var(--light-text-color);
white-space: nowrap;
align-self: center;
}
[data-theme="dark"] .once-date-marker {
color: var(--light-text-color);
}
--- FILE: style.css (Additions) ---
/* ==========================================================================
27. PROGRESS TRACKER & LAYOUT SPACING FIX (FINAL)
========================================================================== */
/* 为进度条自身添加一个上外边距，将它与上方的标题分开 */
.progress-tracker {
margin-top: var(--spacing-lg);
display: none; /* Initially hidden, JS will show it */
}
/* 关键修复：为每日清单和每月待办的输入区域，强制添加一个上外边距 */
#daily-section .input-area,
#monthly-section .input-area {
margin-top: var(--spacing-lg);
}
.progress-container {
height: 24px;
background-color: var(--control-bg);
border-radius: var(--border-radius-pill);
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid var(--control-border-color);
transition: box-shadow 0.2s ease;
}
.progress-container:hover {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.progress-bar-fill {
height: 100%;
border-radius: var(--border-radius-pill);
transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-image 0.5s ease;
width: 0%; /* Default width */
}
/* Color gradients for the progress bar */
.progress-bar-fill.low {
background-image: linear-gradient(90deg, #EF4444 0%, #F59E0B 100%);
}
.progress-bar-fill.medium {
background-image: linear-gradient(90deg, #F59E0B 0%, #84CC16 100%);
}
.progress-bar-fill.high {
background-image: linear-gradient(90deg, #14B8A6 0%, #3B82F6 100%);
}
.progress-percentage {
position: absolute;
right: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
font-size: 13px;
font-weight: 700;
text-shadow: 0 0 5px color-mix(in srgb, var(--container-bg) 70%, transparent);
}
.progress-details {
display: none; /* Hidden by default */
background-color: var(--control-bg);
border: 1px solid var(--control-border-color);
border-top: none;
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
padding: var(--spacing-md) var(--spacing-lg);
margin-top: -6px; /* Slightly overlap with the bar */
padding-top: calc(var(--spacing-md) + 6px);
position: relative;
animation: fadeInDown 0.4s ease-out forwards;
}
.progress-tracker.is-expanded .progress-details {
display: block;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.progress-details-stats {
display: flex;
justify-content: space-around;
text-align: center;
margin-bottom: var(--spacing-md);
}
.stat-item {
display: flex;
flex-direction: column;
}
.stat-item .value {
font-size: 20px;
font-weight: 700;
color: var(--primary-color);
}
.stat-item .label {
font-size: 13px;
color: var(--light-text-color);
margin-top: 4px;
}
.motivation-quote {
text-align: center;
font-style: italic;
color: var(--light-text-color);
padding-top: var(--spacing-md);
border-top: 1px dashed var(--border-color);
font-size: 14px;
line-height: 1.6;
}
/* ==========================================================================
28. AI ASSISTANT STYLES (NEW)
========================================================================== */
.ai-assistant-trigger-container {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-xl);
}
#ai-assistant-btn {
/* --- 1. 基础样式 (大部分保持不变) --- */
flex-shrink: 0;
white-space: nowrap;
height: 44px;
border: 1px solid var(--control-border-color);
color: var(--text-color);
background-color: var(--control-bg);
border-radius: var(--border-radius-pill);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
/* --- START OF REPLACEMENT/ADDITION --- */
/* --- 2. 使用 Flexbox 来对齐图标和文字 --- */
display: flex;
align-items: center;
gap: 8px; /* 图标和文字之间的间距 */
/* --- 3. 调整内边距，为左侧图标留出空间 --- */
padding: 10px 20px 10px 40px; /* 左侧内边距增大 */
/* --- 4. 设置背景图标 --- */
background-image: url('images/icon-ai.svg'); /* 引用您的SVG文件 */
background-repeat: no-repeat;
background-position: 16px center; /* 将图标定位在左侧，垂直居中 */
background-size: 16px 16px; /* 控制图标的大小 */
/* --- END OF REPLACEMENT/ADDITION --- */
}
#ai-assistant-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
transform: translateY(-1px);
}
#ai-assistant-modal textarea {
width: 100%;
padding: 12px 14px;
font-size: 15px;
font-family: inherit;
color: var(--text-color);
background-color: var(--control-bg);
border: 1px solid var(--control-border-color);
border-radius: var(--border-radius-md);
outline: none;
box-sizing: border-box;
transition: all 0.2s ease;
min-height: 100px;
resize: vertical;
}
#ai-assistant-modal textarea:focus {
border-color: var(--primary-color);
background-color: var(--container-bg);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
/* AI Loading Spinner */
.spinner {
border: 3px solid var(--control-border-color);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hidden {
display: none !important;
}
/* AI Confirmation Preview Styles */
#custom-prompt-modal .custom-prompt-input-area p {
margin: var(--spacing-xs) 0;
line-height: 1.6;
font-size: 15px;
}
#custom-prompt-modal .custom-prompt-input-area p strong {
color: var(--text-color);
display: inline-block;
width: 90px;
}
/* ==========================================================================
29. AI KEY DISPLAY STYLES (NEW)
========================================================================== */
#ai-key-display-area,
#ai-key-input-area {
margin-bottom: var(--spacing-lg);
}
.masked-key-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-md);
background-color: var(--control-bg);
padding: 10px var(--spacing-md);
border-radius: var(--border-radius-md);
border: 1px solid var(--control-border-color);
}
#masked-api-key {
font-family: monospace;
font-size: 14px;
color: var(--text-color);
flex-grow: 1;
user-select: none; /* 防止用户意外选中星号 */
background: transparent;
border: none;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#edit-api-key-btn {
flex-shrink: 0; /* 防止按钮被压缩 */
padding: 6px 12px; /* 按钮可以小一点 */
margin: 0;
}
/* ==========================================================================
30. MULTI-MODEL AI SETTINGS STYLES (COMPACT VERTICAL LAYOUT)
========================================================================== */
/* 1. 主容器样式 */
.ai-settings-container {
display: flex;
flex-direction: column;
gap: var(--spacing-lg); /* 各个设置组之间的垂直间距 */
}
/* 2. 每个设置组的样式 */
.ai-settings-group {
/* (不需要额外样式，间距由父容器的gap控制) */
}
/* 3. 设置组的标题样式 */
.ai-settings-provider-title {
font-weight: 600;
font-size: 15px;
margin: 0 0 var(--spacing-sm) 0; /* 标题和下方控件的间距 */
color: var(--text-color);
}
/* 4. 遮罩层和输入区域的样式保持不变 */
.masked-key-wrapper,
.ai-key-input-area {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.masked-key-wrapper,
.ai-key-input-area .custom-prompt-input,
#ai-model-selector {
width: 100%;
box-sizing: border-box; /* 确保 padding 不会影响宽度 */
}
.ai-key-input-area .custom-prompt-input {
flex-grow: 1; /* 让输入框填满空间 */
}
.ai-key-input-area .custom-prompt-btn {
flex-shrink: 0;
}
/* 5. 状态文本样式保持不变 */
.api-status {
font-size: 13px;
margin-top: var(--spacing-xs);
min-height: 1.2em;
padding-left: 2px;
}
.api-status.loading { color: var(--light-text-color); }
.api-status.success { color: var(--accent-teal); font-weight: 500; }
.api-status.error { color: var(--danger-color); font-weight: 500; }
/* ==========================================================================
31. AI SETTINGS MODAL HEIGHT & LAYOUT ADJUSTMENT
========================================================================== */
/*
* --- 核心修复：限制高度并启用滚动 ---
* 我们选择 .custom-prompt-input-area 作为目标，因为在您的 onRender 逻辑中，
* .ai-settings-container 被直接插入到了这个区域。
*/
#custom-prompt-modal .custom-prompt-input-area {
/* 1. 设置一个基于视口高度的最大值。
* 例如，60vh 意味着最大高度为屏幕可见高度的60%。
* 这是一个非常灵活的值，能适应各种屏幕尺寸。
*/
max-height: 60vh;
/* 2. 当内容超出 max-height 时，自动显示垂直滚动条。*/
overflow-y: auto;
/* 3. 优化滚动条右侧的内边距，防止内容紧贴滚动条。*/
padding-right: var(--spacing-sm);
}
/* --- 优化：使布局更紧凑，减少垂直空间占用 --- */
/* 1. 减小AI设置主容器的内边距 */
#custom-prompt-modal .ai-settings-container {
padding-top: 0;
padding-bottom: 0;
}
/* 2. 减小每个设置组之间的垂直间距 */
.ai-settings-container {
gap: var(--spacing-md); /* 使用中等间距(15px)，而不是之前的大间距(lg) */
}
/* 3. 减小每个组内标题和控件之间的间距 */
.ai-settings-provider-title {
margin-bottom: var(--spacing-xs); /* 使用超小间距(5px) */
}
/* 4. 减小状态文本与上方控件的间距 */
.api-status {
margin-top: 2px;
}
/* 5. (可选) 优化滚动条在不同浏览器下的外观 */
#custom-prompt-modal .custom-prompt-input-area::-webkit-scrollbar {
width: 8px;
}
#custom-prompt-modal .custom-prompt-input-area::-webkit-scrollbar-track {
background: transparent;
}
#custom-prompt-modal .custom-prompt-input-area::-webkit-scrollbar-thumb {
background-color: var(--control-border-color);
border-radius: var(--border-radius-pill);
border: 2px solid var(--modal-bg);
}
/* ==========================================================================
32. AI REPORT GENERATOR STYLES (NEW)
========================================================================== */
.report-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.report-options-grid .header-action-btn-small {
width: 100%;
padding: 10px;
font-size: 14px;
}
#ai-report-output-view {
margin-top: var(--spacing-lg);
}
.report-content-area {
background-color: var(--control-bg);
border: 1px solid var(--control-border-color);
border-radius: var(--border-radius-md);
padding: var(--spacing-md) var(--spacing-lg);
min-height: 200px;
max-height: 50vh;
overflow-y: auto;
font-size: 15px;
line-height: 1.7;
}
.report-content-area h2,
.report-content-area h3,
.report-content-area h4 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: 600;
}
.report-content-area h2:first-child,
.report-content-area h3:first-child,
.report-content-area h4:first-child {
margin-top: 0;
}
.report-content-area ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.report-content-area li {
padding-left: 1.5em;
position: relative;
margin-bottom: 0.5em;
}
.report-content-area li::before {
content: '▪';
position: absolute;
left: 0;
color: var(--primary-color);
}
/* ==========================================================================
33. AI MODAL MODE SWITCHING STYLES (NEW)
========================================================================== */
.ai-mode-selector {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-lg);
background-color: var(--control-bg);
border-radius: var(--border-radius-md);
padding: 4px;
}
.ai-mode-selector button {
flex: 1;
padding: 8px 16px;
border: none;
background-color: transparent;
color: var(--light-text-color);
font-size: 15px;
font-weight: 600;
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
}
.ai-mode-selector button:hover {
color: var(--text-color);
}
.ai-mode-selector button.active {
background-color: var(--modal-bg); /* 或者 var(--container-bg) */
color: var(--primary-color);
box-shadow: var(--shadow-sm);
}
/* 1. 让所有 ai-view 都成为 flex 容器，并能伸展 */
.ai-view {
display: flex;
flex-direction: column; /* 内部元素垂直排列 */
flex-grow: 1; /* 【核心】允许视图容器填充所有可用垂直空间 */
}
/* 2. 让“智能添加”的文本区域也能伸展 */
#ai-add-view .custom-prompt-input-area {
flex-grow: 1; /* 占据所有可用空间 */
display: flex; /* 让内部的 textarea 也能伸展 */
}
#ai-add-view .custom-prompt-input-area textarea {
flex-grow: 1; /* textarea 填满其父容器 */
}
/* 3. 让“生成报告”的输出区域也能伸展 */
#ai-report-view #ai-report-output {
flex-grow: 1; /* 占据所有可用空间 */
display: flex;
flex-direction: column;
}
#ai-report-view #ai-report-output .report-content-area {
flex-grow: 1; /* 报告内容区域填满其父容器 */
}
/* 确保AI助手的加载动画ID正确 */
.ai-loading-spinner {
display: flex;
align-items: center;
gap: 10px;
color: var(--light-text-color);
}
/* ==========================================================================
34. AI MODAL WIDTH CONSISTENCY FIX (MOBILE-AWARE)
========================================================================== */
/*
默认情况下（移动端），让模态框宽度自适应，不要设置固定宽度。
max-width 会确保它不会超出屏幕。
我们之前的 .modal-content 已经有 max-width: 90vw; 这个规则就足够了。
*/
#ai-assistant-modal .modal-content {
/* 移除或注释掉桌面端的固定宽度 */
/* width: 650px; */
/* min-width: 500px; */
}
/*
【核心修复】只在屏幕宽度大于等于769px时（桌面端），才应用固定宽度。
*/
@media (min-width: 769px) {
#ai-assistant-modal .modal-content {
width: 650px;
min-width: 500px;
}
}
/* AI助手设置中的帮助链接样式 */
.api-key-helper-text {
font-size: 0.8rem;
color: var(--color-text-secondary);
text-align: right;
margin-top: 4px;
margin-bottom: 8px;
}
.api-key-helper-text a {
color: var(--color-primary);
text-decoration: none;
}
.api-key-helper-text a:hover {
text-decoration: underline;
}
/* ==========================================================================
35. CUSTOM PROMPT MODAL Z-INDEX FIX (FINAL)
========================================================================== */
/*
* 【修复】为通用的自定义提示模态框设置一个更高的 z-index。
* 这可以确保它总是显示在其他模态框（如AI助手模态框）的上方，
* 解决了导出到Notion时，成功/失败提示被遮挡的问题。
* 1000 是基础模态框的 z-index，1001 确保它总是在最上层。
*/
#custom-prompt-modal {
z-index: 1001;
}
/* ==========================================================================
36. AI REPORT CONFIRMATION BUTTON STYLES (NEW)
========================================================================== */
/* 【新增】报告标题和确认按钮的容器样式 */
#report-title-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
gap: var(--spacing-md); /* 标题和按钮之间的间距 */
flex-wrap: wrap; /* 在小屏幕上允许换行 */
margin-bottom: var(--spacing-sm);
}
/* 【新增】让标题在flex容器中可以伸缩 */
#report-title-container #ai-report-title {
flex-grow: 1; /* 占据尽可能多的空间 */
margin: 0; /* 移除 h3 的默认外边距 */
}
/* 【新增】确认生成按钮的特定样式 */
#ai-confirm-generate-btn {
flex-shrink: 0; /* 防止按钮被压缩 */
padding: 8px 16px; /* 按钮可以小一些 */
font-size: 14px;
}
/* ==========================================================================
37. NOTION AUTH WARNING STYLES (NEW)
========================================================================== */
/* 【新增】导出按钮和警告信息的包裹容器 */
.notion-export-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-sm); /* 按钮和警告之间的间距 */
}
/* 【新增】警告信息的具体样式 */
#notion-auth-warning {
color: var(--accent-amber);
font-size: 13px;
font-weight: 500;
white-space: nowrap; /* 防止文字换行 */
}
/* ==========================================================================
38. BUTTON WITH ICON STYLES (NEW)
========================================================================== */
/* 【新增】通用规则，让包含图标的按钮支持Flexbox布局 */
.custom-prompt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* 图标和文字之间的间距 */
}
/* 【新增】按钮内图标的通用样式 */
.custom-prompt-btn .btn-icon {
width: 16px; /* 设置图标宽度 */
height: 16px; /* 设置图标高度 */
}
/* 【新增】处理深色模式下Notion图标的颜色
* 这个规则专门针对 #export-to-notion-btn 按钮内的图标，
* 使用 filter 将其从黑色反转为浅色。
*/
[data-theme="dark"] #export-to-notion-btn .btn-icon {
filter: brightness(0) invert(1); /* 经典的黑变白CSS技巧 */
}
/* ==========================================================================
39. AI REPORT ACTIONS - MOBILE RESPONSIVE FIX (NEW)
========================================================================== */
/* 默认样式（桌面端）：保持 Flexbox 的默认行(row)排列 */
#ai-report-output .custom-prompt-actions {
display: flex;
justify-content: flex-end; /* 按钮靠右对齐 */
gap: var(--spacing-sm);
flex-wrap: wrap; /* 在空间不足时允许换行 */
}
/* 媒体查询：当屏幕宽度小于等于 768px 时 (典型的手机/平板竖屏) */
@media (max-width: 768px) {
/* 【修复】针对AI报告输出区域的按钮容器 */
#ai-report-output .custom-prompt-actions {
/* 1. 将主轴方向从水平改为垂直 */
flex-direction: column;
/* 2. 让按钮在垂直方向上从头开始排列 */
justify-content: flex-start;
/* 3. 让所有子项（按钮和包裹容器）都撑满宽度 */
align-items: stretch;
}
/* 【修复】确保每个直接子元素（按钮和包裹容器）都撑满宽度 */
#ai-report-output .custom-prompt-actions > * {
width: 100%;
margin: 0; /* 移除可能存在的左右外边距 */
}
/* 【修复】确保Notion导出按钮的包裹容器也正确布局 */
.notion-export-wrapper {
display: flex; /* 保持内部的按钮和警告信息水平排列 */
width: 100%; /* 但让这个包裹容器自身撑满宽度 */
}
#export-to-notion-btn {
flex-grow: 1; /* 让Notion按钮占据尽可能多的空间 */
}
}