From f0d2787eb233964d5c067aca22122c53b87eeda7 Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Fri, 18 Sep 2026 17:02:35 +0800
Subject: [PATCH] feat: unify cream button system

---
 frontend/src/MvpPanel.vue  |  5 ++++-
 frontend/src/style.css     | 26 ++++++++++++++++++++----
 frontend/src/style.test.ts | 41 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/frontend/src/MvpPanel.vue b/frontend/src/MvpPanel.vue
index aa0d2f6..10c4ae3 100644
--- a/frontend/src/MvpPanel.vue
+++ b/frontend/src/MvpPanel.vue
@@ -643,6 +643,9 @@ async function exportData() {
   catch (reason) { backupError.value = reason instanceof Error ? reason.message : '完整备份导出失败' }
   finally { backupBusy.value = false }
 }
+function openRestoreFilePicker() {
+  if (!backupBusy.value) restoreInput.value?.click()
+}
 function selectRestoreFile(event: Event) {
   cancelPreflight()
   restoreFile.value = (event.target as HTMLInputElement).files?.[0] ?? null
@@ -841,7 +844,7 @@ onBeforeUnmount(() => {
     <template v-else>
       <div class="settings-sections">
         <header class="settings-heading"><h1>设置</h1><p>管理数据、账户与登录设备</p></header>
-        <section class="settings-group settings-data"><header><h2>数据与恢复</h2><small>完整备份</small></header><div class="settings-row"><span><b>完整 ZIP 备份</b><small>下载可完整恢复的版本化归档</small></span><button class="soft-button" :disabled="backupBusy" @click="exportData"><Download />导出 ZIP</button></div><div class="settings-row settings-restore-row"><span><b>恢复备份</b><small>{{ restoreFile?.name || '支持 .zip、.csv、.json' }}</small></span><label class="file-button" :class="{ disabled: backupBusy }"><ArchiveRestore />选择文件<input ref="restoreInput" type="file" accept=".zip,.csv,.json,application/zip,application/json,text/csv" :disabled="backupBusy" @change="selectRestoreFile"></label></div><div v-if="restoreFile" class="settings-row"><span><b>恢复方式</b><small>{{ legacyRestore ? '旧格式仅支持合并恢复' : '变更方式后需要重新预检' }}</small><small v-if="restoreMode==='replace'" class="restore-replace-warning">替换恢复会覆盖当前数据，请先导出完整备份。</small></span><select v-model="restoreMode" aria-label="恢复方式" :disabled="backupBusy || legacyRestore"><option value="merge">合并</option><option v-if="!legacyRestore" value="replace">替换现有数据</option></select></div><div v-if="restoreFile && !legacyRestore" class="settings-row"><span><b>备份预检</b><small>恢复前检查格式、关联与附件</small></span><button class="soft-button" :disabled="backupBusy" @click="runPreflight">{{ backupBusy ? '检查中…' : '开始预检' }}</button></div><div v-if="legacyRestore" class="backup-preflight legacy"><b>旧格式兼容恢复</b><p>旧格式将在恢复时校验，不支持完整预检或 Replace。</p><button class="danger-button" :disabled="backupBusy" @click="restore">合并旧格式</button></div><div v-else-if="restorePreflight" class="backup-preflight" :class="{ invalid: !restorePreflight.valid }"><b>{{ restorePreflight.valid ? '预检通过' : '备份不可恢复' }}</b><dl><div v-if="restorePreflight.version"><dt>版本</dt><dd>v{{ restorePreflight.version }}</dd></div><div><dt>数据记录</dt><dd>{{ backupEntityTotal }}</dd></div><div><dt>附件</dt><dd>{{ restorePreflight.attachment_count ?? restorePreflight.entities.attachments ?? 0 }} 个</dd></div></dl><ul v-if="restorePreflight.warnings?.length"><li v-for="warning in restorePreflight.warnings" :key="warning">{{ warning }}</li></ul><ul v-if="restorePreflight.destructive_summary?.length" class="destructive-summary"><li v-for="item in restorePreflight.destructive_summary" :key="item">{{ item }}</li></ul><button class="danger-button" :disabled="backupBusy || !restorePreflight.valid" @click="restore">{{ restoreMode === 'replace' ? '替换并恢复' : '合并并恢复' }}</button></div><p v-if="backupError" class="inline-error" role="alert">{{ backupError }}</p></section>
+        <section class="settings-group settings-data"><header><h2>数据与恢复</h2><small>完整备份</small></header><div class="settings-row"><span><b>完整 ZIP 备份</b><small>下载可完整恢复的版本化归档</small></span><button class="soft-button" :disabled="backupBusy" @click="exportData"><Download />导出 ZIP</button></div><div class="settings-row settings-restore-row"><span><b>恢复备份</b><small>{{ restoreFile?.name || '支持 .zip、.csv、.json' }}</small></span><button type="button" class="file-button" :disabled="backupBusy" @click="openRestoreFilePicker"><ArchiveRestore />选择文件</button><input ref="restoreInput" class="restore-file-input" type="file" tabindex="-1" aria-hidden="true" accept=".zip,.csv,.json,application/zip,application/json,text/csv" :disabled="backupBusy" @change="selectRestoreFile"></div><div v-if="restoreFile" class="settings-row"><span><b>恢复方式</b><small>{{ legacyRestore ? '旧格式仅支持合并恢复' : '变更方式后需要重新预检' }}</small><small v-if="restoreMode==='replace'" class="restore-replace-warning">替换恢复会覆盖当前数据，请先导出完整备份。</small></span><select v-model="restoreMode" aria-label="恢复方式" :disabled="backupBusy || legacyRestore"><option value="merge">合并</option><option v-if="!legacyRestore" value="replace">替换现有数据</option></select></div><div v-if="restoreFile && !legacyRestore" class="settings-row"><span><b>备份预检</b><small>恢复前检查格式、关联与附件</small></span><button class="soft-button" :disabled="backupBusy" @click="runPreflight">{{ backupBusy ? '检查中…' : '开始预检' }}</button></div><div v-if="legacyRestore" class="backup-preflight legacy"><b>旧格式兼容恢复</b><p>旧格式将在恢复时校验，不支持完整预检或 Replace。</p><button class="danger-button" :disabled="backupBusy" @click="restore">合并旧格式</button></div><div v-else-if="restorePreflight" class="backup-preflight" :class="{ invalid: !restorePreflight.valid }"><b>{{ restorePreflight.valid ? '预检通过' : '备份不可恢复' }}</b><dl><div v-if="restorePreflight.version"><dt>版本</dt><dd>v{{ restorePreflight.version }}</dd></div><div><dt>数据记录</dt><dd>{{ backupEntityTotal }}</dd></div><div><dt>附件</dt><dd>{{ restorePreflight.attachment_count ?? restorePreflight.entities.attachments ?? 0 }} 个</dd></div></dl><ul v-if="restorePreflight.warnings?.length"><li v-for="warning in restorePreflight.warnings" :key="warning">{{ warning }}</li></ul><ul v-if="restorePreflight.destructive_summary?.length" class="destructive-summary"><li v-for="item in restorePreflight.destructive_summary" :key="item">{{ item }}</li></ul><button class="danger-button" :disabled="backupBusy || !restorePreflight.valid" @click="restore">{{ restoreMode === 'replace' ? '替换并恢复' : '合并并恢复' }}</button></div><p v-if="backupError" class="inline-error" role="alert">{{ backupError }}</p></section>
         <section class="settings-group"><header><h2>账户与安全</h2></header><form class="password-form settings-form" @submit.prevent="changePassword"><label>当前密码<input v-model="currentPassword" type="password" autocomplete="current-password" required aria-label="当前密码"></label><label>新密码<input v-model="newPassword" type="password" autocomplete="new-password" minlength="12" required aria-label="新密码" placeholder="至少 12 位"></label><label>确认新密码<input v-model="confirmPassword" type="password" autocomplete="new-password" minlength="12" required aria-label="确认新密码"></label><p v-if="passwordError" class="inline-error" role="alert">{{passwordError}}</p><button class="primary-small" :disabled="passwordBusy || !currentPassword || !newPassword || !confirmPassword">{{passwordBusy?'正在修改…':'修改密码'}}</button></form></section>
         <section class="settings-group"><header><h2>登录设备</h2><small>{{ sessionsState === 'success' ? `${sessions.length} 台` : '状态' }}</small></header><div class="session-card-actions"><p>可撤销其他设备的登录。</p><button v-if="sessions.some((s) => !s.current)" type="button" class="danger-text session-revoke-all" :disabled="busy" @click="revokeOtherSessions">撤销其他所有会话</button></div><div v-for="s in sessions" :key="s.id" class="settings-row session-row"><span class="session-copy"><b class="session-title">{{ s.current ? '当前设备' : '其他设备' }}</b><small class="session-meta"><span class="session-device">{{ formatUserAgent(s.user_agent) }}</span><span aria-hidden="true"> · </span><time :datetime="s.last_seen_at ?? s.created_at">{{ formatLocalShortDateTime(s.last_seen_at ?? s.created_at) }}</time></small></span><button v-if="!s.current" class="danger-text session-revoke" :aria-label="`撤销 ${formatUserAgent(s.user_agent)} 的登录会话`" @click="revoke(s.id)">撤销</button></div><p v-if="sessionsState==='loading'" class="settings-empty" role="status">正在加载登录设备…</p><div v-else-if="sessionsState==='error'" class="settings-status-error" role="alert"><span>登录设备加载失败：{{ sessionsError }}</span><button type="button" class="soft-button" @click="loadSettings">重试</button></div><p v-else-if="!sessions.length" class="settings-empty">没有可显示的会话。</p></section>
         <section class="settings-group"><header><h2>活动记录</h2><small>最近操作</small></header><div v-for="(row, i) in audit" :key="row.id || i" class="settings-row audit-row"><div class="audit-copy"><span class="audit-action">{{ formatAuditAction(row.action ?? row.event) }}{{ formatAuditAction(row.action ?? row.event) === '其他操作' ? '' : formatAuditEntity(row.entity_type) }}</span><time :datetime="row.created_at ?? row.timestamp">{{ formatLocalShortDateTime(row.created_at ?? row.timestamp) }}</time></div></div><p v-if="auditState==='loading'" class="settings-empty" role="status">正在加载活动记录…</p><div v-else-if="auditState==='error'" class="settings-status-error" role="alert"><span>活动记录加载失败：{{ auditError }}</span><button type="button" class="soft-button" @click="loadSettings">重试</button></div><p v-else-if="!audit.length" class="settings-empty">暂无活动记录。</p></section>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 2c245b2..9af324f 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -40,8 +40,8 @@ main{container-type:inline-size;min-width:0;padding:27px 34px 50px;overflow:auto
 .unified-fab{display:grid;place-items:center;position:fixed;z-index:60;right:20px;bottom:22px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(241,90,41,.28);transition:left .2s cubic-bezier(.2,.8,.3,1),top .2s cubic-bezier(.2,.8,.3,1),transform .16s ease,box-shadow .16s ease;touch-action:none;user-select:none}.unified-fab>svg{width:25px;height:25px}.unified-fab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.unified-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(241,90,41,.32)}.unified-fab:active:not(.dragging){transform:scale(.96)}.unified-fab.dragging{transform:scale(1.06);box-shadow:0 12px 28px rgba(241,90,41,.36);transition:transform .16s ease,box-shadow .16s ease}.unified-fab.snapping{box-shadow:0 10px 24px rgba(241,90,41,.32)}.app-overlay{position:fixed;inset:0;z-index:80;display:grid}.app-sheet-mask.app-sheet-mask{background:var(--sheet-scrim);overscroll-behavior:contain}.app-overlay>.detail{transform:none}.app-sheet{min-height:0;overflow:hidden;background:var(--paper)}.app-sheet__header{min-height:64px;flex:0 0 64px;position:sticky;z-index:3;top:0;background:var(--paper);border-bottom:1px solid var(--line);padding:0 18px}.app-sheet__header>div{min-width:0}.app-sheet__header h2,.app-sheet__header h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sheet__header>button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px}.app-sheet__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:14px;padding:16px 18px}.app-sheet__footer{position:sticky;bottom:0;z-index:3;margin:0;background:var(--paper);border-top:1px solid var(--line);padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;gap:8px}.app-sheet__danger{border-top:1px solid #f1d4cd;background:#fff8f6;padding:12px 18px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end}.app-sheet--actions .app-sheet__body{gap:6px;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}.app-sheet--actions .app-sheet__body>button{min-height:50px;width:100%;display:flex;align-items:center;gap:12px;border:0;background:#fff;padding:13px;border-radius:12px;text-align:left}
 @media(max-width:930px){.app-sheet{width:100%;max-height:min(88dvh,760px);display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:var(--sheet-radius) var(--sheet-radius) 0 0!important;padding:0!important}.app-sheet--detail,.app-sheet--create{max-width:none!important}.app-sheet-mask{padding:0!important;place-items:end center!important;align-items:flex-end!important}.app-sheet__header{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%}.app-sheet__body{width:100%;flex:1 1 auto}.app-sheet__body label{display:grid;gap:6px}.app-sheet__footer{width:100%;flex:0 0 auto}.app-sheet__footer .primary-small{min-width:124px}.app-sheet__danger{width:100%;flex:0 0 auto}.app-sheet__danger .danger-text{width:100%;min-height:48px;justify-content:center}}
 
-.calendar-picker-layer{position:fixed;z-index:90;inset:0;pointer-events:none}.calendar-picker{position:fixed;width:328px;background:#fffdf8;border:1px solid #ded6ca;border-radius:18px;box-shadow:0 18px 46px rgba(56,40,24,.2);padding:14px;display:grid;gap:10px;pointer-events:auto;color:var(--text)}.calendar-picker__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px}.calendar-picker__header h3{margin:0;text-align:center;font-size:16px}.calendar-picker__header button,.calendar-picker__grid button{border:0;background:transparent;display:grid;place-items:center}.calendar-picker__header button{width:40px;height:40px;border-radius:10px}.calendar-picker__header svg{width:18px}.calendar-picker__close{display:none!important}.calendar-picker__weekdays,.calendar-picker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-picker__weekdays span{text-align:center;color:var(--muted);font-size:11px;padding:3px 0}.calendar-picker__grid button{height:34px;border-radius:10px;color:#4f483f;font-size:13px}.calendar-picker__grid button:hover,.calendar-picker__grid button:focus-visible{background:#f6ede2;outline:2px solid transparent}.calendar-picker__grid button.outside{color:#b9b0a5}.calendar-picker__grid button.today{box-shadow:inset 0 0 0 1px var(--accent);color:#b7421e}.calendar-picker__grid button.selected{background:var(--accent);color:#fff}.calendar-picker__grid button.selected.today{box-shadow:inset 0 0 0 1px #fff}.calendar-picker__footer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:4px;border-top:1px solid #e8e0d5;padding-top:10px}.calendar-picker__footer button{min-height:36px;border:0;background:transparent;border-radius:9px;padding:0 9px;color:#6d6459;font-weight:650}.calendar-picker__footer button:hover{background:#f6ede2}.calendar-picker__footer .calendar-picker__done{background:var(--accent);color:#fff}.calendar-picker__footer .calendar-picker__done:hover{background:#df4e22}@media(max-width:600px){.calendar-picker-layer{pointer-events:auto;background:rgba(45,38,31,.3);display:flex;align-items:flex-end}.calendar-picker{position:relative!important;left:auto!important;top:auto!important;width:100%;height:min(520px,72dvh);border-width:1px 0 0;border-radius:24px 24px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto auto 1fr auto}.calendar-picker__header{grid-template-columns:44px 1fr 44px 44px}.calendar-picker__close{display:grid!important}.calendar-picker__grid{align-content:stretch}.calendar-picker__grid button{height:auto;min-height:42px}.calendar-picker__footer button{min-height:44px}}.task-compose-sheet{width:100%;max-height:min(88dvh,720px);overflow:auto;background:#fffdf8;border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 42px rgba(56,40,24,.2);display:grid;gap:14px;transform-origin:var(--fab-origin-x,calc(100% - 44px)) var(--fab-origin-y,100%)}.task-compose-sheet header{display:flex;align-items:center;justify-content:space-between}.task-compose-sheet header small{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em}.task-compose-sheet h2{margin:2px 0 0;font-size:22px}.task-compose-sheet label{display:grid;gap:6px;color:#675f54;font-size:12px;font-weight:650}.task-compose-sheet input,.task-compose-sheet select,.task-compose-sheet textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px;outline:none;resize:vertical}.task-compose-sheet input:focus,.task-compose-sheet select:focus,.task-compose-sheet textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.task-compose-row{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:10px}.task-compose-date-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.task-compose-date-control{position:relative;display:flex;align-items:center;min-width:0}.task-compose-date-chip{position:relative;display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:7px!important;width:auto;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fffaf3;color:#776e62!important;font-size:13px!important;font-weight:700!important;overflow:hidden;cursor:pointer}.task-compose-date-chip.selected{border-color:#f3b18f;background:var(--accent-soft);color:#b7421e!important}.task-compose-date-chip svg{width:16px;height:16px;flex:none}.task-compose-date-clear{display:grid;place-items:center;width:34px;height:34px;margin-left:2px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.task-compose-date-clear:hover{background:#f5eee5;color:var(--text)}.task-compose-date-clear svg{width:15px;height:15px}.task-compose-time-add{min-width:0;height:40px;padding:0 13px;border:1px dashed #e5b89d;border-radius:999px;background:transparent;color:var(--accent);font-weight:700}.task-compose-time-add:hover{border-color:var(--accent);background:#fff4e8}.task-compose-time-chip{display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:5px!important;width:auto;color:var(--muted)!important;font-size:12px!important}.task-compose-time-chip input{width:102px!important;min-width:0;padding:9px 8px!important;border-radius:999px!important}.task-compose-time-remove{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.task-compose-time-remove:hover{background:#f5eee5;color:var(--text)}.task-compose-time-remove svg{width:15px;height:15px}.task-compose-sheet footer{display:flex;justify-content:flex-end;gap:9px;padding-top:4px}.task-compose-sheet button:disabled{opacity:.45}@media(max-width:930px){.unified-fab{bottom:calc(82px + env(safe-area-inset-bottom))}}@media(max-width:930px){.today-filtered-empty-note{min-height:44px;padding:0 4px 0 12px}.today-filtered-empty-note>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.unified-fab{animation:none!important;transition:none!important}.unified-fab:hover,.unified-fab:active{transform:none!important}*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
-.overdue-section{margin-top:18px}.overdue-heading{color:var(--danger);margin-bottom:6px}.overdue-heading span{min-width:22px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border-radius:999px;background:#fde2dc;color:var(--danger);font-size:11px}.overdue-list{margin-bottom:18px}.overdue-task{background:#fff8f6}.task-tail{flex:0 1 auto;min-width:0;max-width:42%;display:flex;justify-content:flex-end;text-align:right;white-space:nowrap}.task-actions{display:flex;align-items:center;flex:0 0 auto}.task-row>.drag-handle,.task-row>.task-check,.task-actions>*{flex-shrink:0}.task-due{min-width:0;display:inline-flex;justify-content:flex-end;align-items:center}.task-due__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.task-due--overdue{color:var(--danger)}.task-due--neutral,.task-due--completed{color:var(--muted)}.task-due--completed{opacity:.8}.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 14px}.pager button:disabled{opacity:.4;cursor:not-allowed}.pager span{color:var(--muted);font-size:13px}.section-heading{display:flex;align-items:center;gap:7px;margin:16px 0 10px;font-size:16px;line-height:1.35;color:#514a40}.section-heading svg{width:17px;height:17px;color:var(--accent)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.more-settings{border:1px solid var(--line);border-radius:10px;background:#fff}.more-settings summary{cursor:pointer;padding:11px 13px;color:#756d61;font-size:12px;font-weight:700}.more-settings-body{display:grid;gap:12px;padding:0 13px 13px}.more-settings-body>label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:7px;color:#756d61;font-size:12px;font-weight:650}.modal-input{width:100%;border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;outline:none;font-size:16px}.purge-list-dialog{width:min(430px,92vw)}.purge-list-dialog p{margin:0;color:var(--muted);line-height:1.65}.purge-list-dialog button{min-height:44px;min-width:88px}.purge-list-dialog button:disabled{cursor:not-allowed;opacity:.62}.purge-list-error{padding:10px 12px;border-radius:10px;background:#fde7e2!important;color:var(--danger)!important;font-weight:650}.countdown-view{display:grid;gap:16px;padding-bottom:36px}.countdown-content{display:grid;gap:12px}.countdown-summary{display:block;color:var(--muted);font-size:12px;margin-top:-12px}.countdown-layout{display:grid;gap:22px;align-items:start}.countdown-timeline{display:grid;gap:20px;max-width:820px;width:100%;margin:0 auto}.countdown-group{display:grid;gap:2px}.countdown-group>h3{margin:0 0 7px;padding-left:12px;color:#8a8175;font-size:11px;font-weight:750;letter-spacing:.08em}.countdown-row{--countdown-tone:#d9a17c;position:relative;width:100%;min-height:66px;display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:9px 10px 9px 17px;text-align:left;color:inherit;transition:background .15s ease,transform .15s ease}.countdown-row:before{content:'';position:absolute;left:3px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--countdown-tone);transform:translateY(-50%)}.countdown-row:first-of-type{border-top:1px solid var(--line)}.countdown-row:hover{background:#fffaf3}.countdown-row:active{transform:scale(.995)}.countdown-row.kind-anniversary{--countdown-tone:#b69b7d}.countdown-row.kind-birthday{--countdown-tone:#9cab8d}.countdown-row.today{--countdown-tone:#71856b}.countdown-row.past{--countdown-tone:#aaa094;opacity:.66}.countdown-main{min-width:0;display:grid;gap:4px}.countdown-main>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#3f3932}.countdown-main>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.countdown-badges{display:flex;gap:5px}.countdown-badges em{font-style:normal;color:#8a7f72;font-size:10px}.countdown-badges em+em:before{content:'·';margin-right:5px;color:#c1b7aa}.countdown-state{display:grid;justify-items:end;gap:3px}.countdown-state strong{font-variant-numeric:tabular-nums;font-size:26px;line-height:1;color:#62594e}.countdown-state small{color:var(--muted);font-size:10px}.countdown-row.today .countdown-state strong,.countdown-row.today .countdown-state small{color:#71856b}.countdown-row.past .countdown-state strong{color:#887d70}.countdown-focus{--countdown-tone:#d9a17c;width:min(720px,100%);min-height:140px;margin:0 auto;display:grid;place-content:center;justify-items:center;gap:4px;border:1px solid color-mix(in srgb,var(--countdown-tone) 34%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--countdown-tone) 7%,#fffdf8);padding:16px 24px;text-align:center;color:inherit;box-shadow:none;transition:border-color .15s ease,background .15s ease}.countdown-focus:hover{border-color:color-mix(in srgb,var(--countdown-tone) 54%,var(--line));background:color-mix(in srgb,var(--countdown-tone) 10%,#fffdf8)}.countdown-focus.kind-anniversary{--countdown-tone:#b69b7d}.countdown-focus.kind-birthday{--countdown-tone:#9cab8d}.countdown-focus>small{color:#8b8276;font-size:10px;font-weight:750;letter-spacing:.1em}.countdown-focus h3{margin:7px 0 0;font-size:20px;font-weight:680}.countdown-focus p{margin:1px 0 0;color:var(--muted);font-size:11px}.countdown-number{display:flex;align-items:end;gap:6px;margin:4px 0 3px}.countdown-number strong{font-variant-numeric:tabular-nums;font-size:64px;line-height:.9;font-weight:720;letter-spacing:-.05em;color:#3f3932}.countdown-number span{font-size:13px;color:#7a7165;padding-bottom:6px}.countdown-copy{font-size:12px;color:#71685e;font-weight:650}.countdown-empty{min-height:260px;background:#fffdf8;border:1px dashed var(--line);border-radius:16px;padding:26px;color:#766d60;text-align:center;display:grid;gap:9px;place-content:center;justify-items:center}.countdown-empty svg{color:var(--accent);width:30px;height:30px}.countdown-empty span{font-size:12px}.countdown-empty button{margin-top:5px}.archived-toggle,.archived-countdowns button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;font-size:12px}.archived-toggle{justify-self:start;min-height:44px}.archived-countdowns{display:grid;gap:0;border:1px solid var(--border-cream);border-radius:var(--radius-list);overflow:hidden;background:var(--surface-raised)}.archived-countdowns article{min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;background:var(--surface-raised);border:0;padding:6px 10px}.archived-countdowns article+article{border-top:1px solid var(--border-cream)}.archived-countdowns article>span{min-width:0;display:grid;gap:2px}.archived-countdowns article b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.archived-countdowns article small{color:var(--muted)}.archived-countdowns article button{min-width:44px;min-height:44px;justify-content:center}.countdown-pinned-mark{color:var(--muted);font-size:10px;font-weight:500}.countdown-detail-sheet{width:min(500px,100%);background:#fffdf8;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 36px rgba(56,40,24,.18);padding:18px;display:grid;gap:16px}.countdown-detail-sheet header{display:grid;grid-template-columns:42px 1fr 44px;align-items:center;gap:10px}.countdown-detail-sheet header small{color:var(--muted);font-size:11px}.countdown-detail-sheet header h3{margin:2px 0 0;font-size:19px}.countdown-detail-sheet header button{min-width:44px;min-height:44px;border:0;background:transparent;color:#766d60;border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-modal header button{min-width:44px;min-height:44px;border:0;background:transparent;color:#766d60;border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-detail-days{display:flex;align-items:baseline;gap:6px;padding:8px 0}.countdown-detail-days strong{font-variant-numeric:tabular-nums;font-size:46px;line-height:1}.countdown-detail-days span{color:var(--muted)}.countdown-detail-days b{margin-left:auto;color:var(--accent);font-size:13px}.countdown-detail-sheet dl{margin:0;display:grid;gap:1px;background:var(--line)}.countdown-detail-sheet dl div{display:grid;grid-template-columns:62px 1fr;gap:10px;background:#fffdf8;padding:10px 0}.countdown-detail-sheet dt{color:var(--muted);font-size:12px}.countdown-detail-sheet dd{margin:0;font-size:13px}.countdown-detail-sheet footer{display:flex;justify-content:flex-end;gap:8px}.countdown-detail-sheet footer button{min-height:44px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px}.countdown-modal{width:min(420px,96vw);background:#fffdf8;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}.countdown-modal header{display:flex;justify-content:space-between;align-items:start}.countdown-modal header small{color:var(--muted)}.countdown-modal header h3{margin:2px 0 0}.countdown-modal label{display:grid;gap:6px;color:#675f54;font-size:12px;font-weight:650}.countdown-modal input,.countdown-modal select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;outline:none}.countdown-modal input:focus,.countdown-modal select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.countdown-title-fields{display:grid;grid-template-columns:72px 1fr;gap:8px}.countdown-modal footer{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}.countdown-advanced{border:1px solid var(--line);border-radius:11px;background:#fffaf4}.countdown-advanced summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;color:#756d61;font-size:12px;font-weight:700;list-style:none}.countdown-advanced summary::-webkit-details-marker{display:none}.countdown-advanced summary svg{width:16px;height:16px;transition:transform .16s ease}.countdown-advanced[open] summary svg{transform:rotate(180deg)}.countdown-advanced>label,.countdown-advanced>.countdown-title-fields{margin:0 12px 12px}@media(max-width:930px){.countdown-layout{grid-template-columns:1fr;gap:16px}.countdown-focus{display:grid;min-height:140px;padding:14px 16px}.countdown-number strong{font-size:64px}.countdown-timeline{gap:16px}}@media(max-width:800px){.countdown-hero{align-items:center}.countdown-hero h2{font-size:19px}.countdown-row{grid-template-columns:minmax(0,1fr) 72px;padding:9px 4px;gap:9px}.countdown-state strong{font-size:25px}.countdown-detail-sheet,.countdown-modal{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:min(88dvh,760px);overflow:auto}.countdown-view{position:relative}}
+.calendar-picker-layer{position:fixed;z-index:90;inset:0;pointer-events:none}.calendar-picker{position:fixed;width:328px;background:#fffdf8;border:1px solid #ded6ca;border-radius:18px;box-shadow:0 18px 46px rgba(56,40,24,.2);padding:14px;display:grid;gap:10px;pointer-events:auto;color:var(--text)}.calendar-picker__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px}.calendar-picker__header h3{margin:0;text-align:center;font-size:16px}.calendar-picker__header button,.calendar-picker__grid button{border:0;background:transparent;display:grid;place-items:center}.calendar-picker__header button{width:40px;height:40px;border-radius:10px}.calendar-picker__header svg{width:18px}.calendar-picker__close{display:none!important}.calendar-picker__weekdays,.calendar-picker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-picker__weekdays span{text-align:center;color:var(--muted);font-size:11px;padding:3px 0}.calendar-picker__grid button{height:34px;border-radius:10px;color:#4f483f;font-size:13px}.calendar-picker__grid button:hover,.calendar-picker__grid button:focus-visible{background:#f6ede2;outline:2px solid transparent}.calendar-picker__grid button.outside{color:#b9b0a5}.calendar-picker__grid button.today{box-shadow:inset 0 0 0 1px var(--accent);color:#b7421e}.calendar-picker__grid button.selected{background:var(--accent);color:#fff}.calendar-picker__grid button.selected.today{box-shadow:inset 0 0 0 1px #fff}.calendar-picker__footer{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:4px;border-top:1px solid #e8e0d5;padding-top:10px}.calendar-picker__footer button{min-height:36px;border:0;background:transparent;border-radius:9px;padding:0 9px;color:#6d6459;font-weight:650}.calendar-picker__footer button:hover{background:#f6ede2}.calendar-picker__footer .calendar-picker__done{background:var(--accent);color:#fff}.calendar-picker__footer .calendar-picker__done:hover{background:#df4e22}@media(max-width:600px){.calendar-picker-layer{pointer-events:auto;background:rgba(45,38,31,.3);display:flex;align-items:flex-end}.calendar-picker{position:relative!important;left:auto!important;top:auto!important;width:100%;height:min(520px,72dvh);border-width:1px 0 0;border-radius:24px 24px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto auto 1fr auto}.calendar-picker__header{grid-template-columns:44px 1fr 44px 44px}.calendar-picker__close{display:grid!important}.calendar-picker__grid{align-content:stretch}.calendar-picker__grid button{height:auto;min-height:42px}.calendar-picker__footer button{min-height:44px}}.task-compose-sheet{width:100%;max-height:min(88dvh,720px);overflow:auto;background:#fffdf8;border-radius:24px 24px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 42px rgba(56,40,24,.2);display:grid;gap:14px;transform-origin:var(--fab-origin-x,calc(100% - 44px)) var(--fab-origin-y,100%)}.task-compose-sheet header{display:flex;align-items:center;justify-content:space-between}.task-compose-sheet header small{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em}.task-compose-sheet h2{margin:2px 0 0;font-size:22px}.task-compose-sheet label{display:grid;gap:6px;color:#675f54;font-size:12px;font-weight:650}.task-compose-sheet input,.task-compose-sheet select,.task-compose-sheet textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px;outline:none;resize:vertical}.task-compose-sheet input:focus,.task-compose-sheet select:focus,.task-compose-sheet textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.task-compose-row{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:10px}.task-compose-date-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.task-compose-date-control{position:relative;display:flex;align-items:center;min-width:0}.task-compose-date-chip{position:relative;display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:7px!important;width:auto;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fffaf3;color:#776e62!important;font-size:13px!important;font-weight:700!important;overflow:hidden;cursor:pointer}.task-compose-date-chip.selected{border-color:#f3b18f;background:var(--accent-soft);color:#b7421e!important}.task-compose-date-chip svg{width:16px;height:16px;flex:none}.task-compose-date-clear{display:grid;place-items:center;width:34px;height:34px;margin-left:2px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.task-compose-date-clear:hover{background:#f5eee5;color:var(--text)}.task-compose-date-clear svg{width:15px;height:15px}.task-compose-time-add{min-width:0;height:40px;padding:0 13px;border:1px dashed #e5b89d;border-radius:999px;background:transparent;color:var(--accent);font-weight:700}.task-compose-time-add:hover{border-color:var(--accent);background:#fff4e8}.task-compose-time-chip{display:inline-flex!important;grid-template-columns:none!important;align-items:center;flex-direction:row!important;gap:5px!important;width:auto;color:var(--muted)!important;font-size:12px!important}.task-compose-time-chip input{width:102px!important;min-width:0;padding:9px 8px!important;border-radius:999px!important}.task-compose-time-remove{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--muted)}.task-compose-time-remove:hover{background:#f5eee5;color:var(--text)}.task-compose-time-remove svg{width:15px;height:15px}.task-compose-sheet footer{display:flex;justify-content:flex-end;gap:9px;padding-top:4px}.task-compose-sheet button:disabled{cursor:not-allowed}@media(max-width:930px){.unified-fab{bottom:calc(82px + env(safe-area-inset-bottom))}}@media(max-width:930px){.today-filtered-empty-note{min-height:44px;padding:0 4px 0 12px}.today-filtered-empty-note>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.unified-fab{animation:none!important;transition:none!important}.unified-fab:hover,.unified-fab:active{transform:none!important}*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
+.overdue-section{margin-top:18px}.overdue-heading{color:var(--danger);margin-bottom:6px}.overdue-heading span{min-width:22px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border-radius:999px;background:#fde2dc;color:var(--danger);font-size:11px}.overdue-list{margin-bottom:18px}.overdue-task{background:#fff8f6}.task-tail{flex:0 1 auto;min-width:0;max-width:42%;display:flex;justify-content:flex-end;text-align:right;white-space:nowrap}.task-actions{display:flex;align-items:center;flex:0 0 auto}.task-row>.drag-handle,.task-row>.task-check,.task-actions>*{flex-shrink:0}.task-due{min-width:0;display:inline-flex;justify-content:flex-end;align-items:center}.task-due__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.task-due--overdue{color:var(--danger)}.task-due--neutral,.task-due--completed{color:var(--muted)}.task-due--completed{opacity:.8}.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 14px}.pager button:disabled{cursor:not-allowed}.pager span{color:var(--muted);font-size:13px}.section-heading{display:flex;align-items:center;gap:7px;margin:16px 0 10px;font-size:16px;line-height:1.35;color:#514a40}.section-heading svg{width:17px;height:17px;color:var(--accent)}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.more-settings{border:1px solid var(--line);border-radius:10px;background:#fff}.more-settings summary{cursor:pointer;padding:11px 13px;color:#756d61;font-size:12px;font-weight:700}.more-settings-body{display:grid;gap:12px;padding:0 13px 13px}.more-settings-body>label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:7px;color:#756d61;font-size:12px;font-weight:650}.modal-input{width:100%;border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;outline:none;font-size:16px}.purge-list-dialog{width:min(430px,92vw)}.purge-list-dialog p{margin:0;color:var(--muted);line-height:1.65}.purge-list-dialog button{min-height:44px;min-width:88px}.purge-list-dialog button:disabled{cursor:not-allowed}.purge-list-error{padding:10px 12px;border-radius:10px;background:#fde7e2!important;color:var(--danger)!important;font-weight:650}.countdown-view{display:grid;gap:16px;padding-bottom:36px}.countdown-content{display:grid;gap:12px}.countdown-summary{display:block;color:var(--muted);font-size:12px;margin-top:-12px}.countdown-layout{display:grid;gap:22px;align-items:start}.countdown-timeline{display:grid;gap:20px;max-width:820px;width:100%;margin:0 auto}.countdown-group{display:grid;gap:2px}.countdown-group>h3{margin:0 0 7px;padding-left:12px;color:#8a8175;font-size:11px;font-weight:750;letter-spacing:.08em}.countdown-row{--countdown-tone:#d9a17c;position:relative;width:100%;min-height:66px;display:grid;grid-template-columns:minmax(0,1fr) 86px;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:9px 10px 9px 17px;text-align:left;color:inherit;transition:background .15s ease,transform .15s ease}.countdown-row:before{content:'';position:absolute;left:3px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--countdown-tone);transform:translateY(-50%)}.countdown-row:first-of-type{border-top:1px solid var(--line)}.countdown-row:hover{background:#fffaf3}.countdown-row:active{transform:scale(.995)}.countdown-row.kind-anniversary{--countdown-tone:#b69b7d}.countdown-row.kind-birthday{--countdown-tone:#9cab8d}.countdown-row.today{--countdown-tone:#71856b}.countdown-row.past{--countdown-tone:#aaa094;opacity:.66}.countdown-main{min-width:0;display:grid;gap:4px}.countdown-main>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#3f3932}.countdown-main>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.countdown-badges{display:flex;gap:5px}.countdown-badges em{font-style:normal;color:#8a7f72;font-size:10px}.countdown-badges em+em:before{content:'·';margin-right:5px;color:#c1b7aa}.countdown-state{display:grid;justify-items:end;gap:3px}.countdown-state strong{font-variant-numeric:tabular-nums;font-size:26px;line-height:1;color:#62594e}.countdown-state small{color:var(--muted);font-size:10px}.countdown-row.today .countdown-state strong,.countdown-row.today .countdown-state small{color:#71856b}.countdown-row.past .countdown-state strong{color:#887d70}.countdown-focus{--countdown-tone:#d9a17c;width:min(720px,100%);min-height:140px;margin:0 auto;display:grid;place-content:center;justify-items:center;gap:4px;border:1px solid color-mix(in srgb,var(--countdown-tone) 34%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--countdown-tone) 7%,#fffdf8);padding:16px 24px;text-align:center;color:inherit;box-shadow:none;transition:border-color .15s ease,background .15s ease}.countdown-focus:hover{border-color:color-mix(in srgb,var(--countdown-tone) 54%,var(--line));background:color-mix(in srgb,var(--countdown-tone) 10%,#fffdf8)}.countdown-focus.kind-anniversary{--countdown-tone:#b69b7d}.countdown-focus.kind-birthday{--countdown-tone:#9cab8d}.countdown-focus>small{color:#8b8276;font-size:10px;font-weight:750;letter-spacing:.1em}.countdown-focus h3{margin:7px 0 0;font-size:20px;font-weight:680}.countdown-focus p{margin:1px 0 0;color:var(--muted);font-size:11px}.countdown-number{display:flex;align-items:end;gap:6px;margin:4px 0 3px}.countdown-number strong{font-variant-numeric:tabular-nums;font-size:64px;line-height:.9;font-weight:720;letter-spacing:-.05em;color:#3f3932}.countdown-number span{font-size:13px;color:#7a7165;padding-bottom:6px}.countdown-copy{font-size:12px;color:#71685e;font-weight:650}.countdown-empty{min-height:260px;background:#fffdf8;border:1px dashed var(--line);border-radius:16px;padding:26px;color:#766d60;text-align:center;display:grid;gap:9px;place-content:center;justify-items:center}.countdown-empty svg{color:var(--accent);width:30px;height:30px}.countdown-empty span{font-size:12px}.countdown-empty button{margin-top:5px}.archived-toggle,.archived-countdowns button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;font-size:12px}.archived-toggle{justify-self:start;min-height:44px}.archived-countdowns{display:grid;gap:0;border:1px solid var(--border-cream);border-radius:var(--radius-list);overflow:hidden;background:var(--surface-raised)}.archived-countdowns article{min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;background:var(--surface-raised);border:0;padding:6px 10px}.archived-countdowns article+article{border-top:1px solid var(--border-cream)}.archived-countdowns article>span{min-width:0;display:grid;gap:2px}.archived-countdowns article b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.archived-countdowns article small{color:var(--muted)}.archived-countdowns article button{min-width:44px;min-height:44px;justify-content:center}.countdown-pinned-mark{color:var(--muted);font-size:10px;font-weight:500}.countdown-detail-sheet{width:min(500px,100%);background:#fffdf8;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 36px rgba(56,40,24,.18);padding:18px;display:grid;gap:16px}.countdown-detail-sheet header{display:grid;grid-template-columns:42px 1fr 44px;align-items:center;gap:10px}.countdown-detail-sheet header small{color:var(--muted);font-size:11px}.countdown-detail-sheet header h3{margin:2px 0 0;font-size:19px}.countdown-detail-sheet header button{min-width:44px;min-height:44px;border:0;background:transparent;color:#766d60;border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-modal header button{min-width:44px;min-height:44px;border:0;background:transparent;color:#766d60;border-radius:8px;width:44px;height:44px;display:grid;place-items:center}.countdown-detail-days{display:flex;align-items:baseline;gap:6px;padding:8px 0}.countdown-detail-days strong{font-variant-numeric:tabular-nums;font-size:46px;line-height:1}.countdown-detail-days span{color:var(--muted)}.countdown-detail-days b{margin-left:auto;color:var(--accent);font-size:13px}.countdown-detail-sheet dl{margin:0;display:grid;gap:1px;background:var(--line)}.countdown-detail-sheet dl div{display:grid;grid-template-columns:62px 1fr;gap:10px;background:#fffdf8;padding:10px 0}.countdown-detail-sheet dt{color:var(--muted);font-size:12px}.countdown-detail-sheet dd{margin:0;font-size:13px}.countdown-detail-sheet footer{display:flex;justify-content:flex-end;gap:8px}.countdown-detail-sheet footer button{min-height:44px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px}.countdown-modal{width:min(420px,96vw);background:#fffdf8;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}.countdown-modal header{display:flex;justify-content:space-between;align-items:start}.countdown-modal header small{color:var(--muted)}.countdown-modal header h3{margin:2px 0 0}.countdown-modal label{display:grid;gap:6px;color:#675f54;font-size:12px;font-weight:650}.countdown-modal input,.countdown-modal select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;outline:none}.countdown-modal input:focus,.countdown-modal select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.countdown-title-fields{display:grid;grid-template-columns:72px 1fr;gap:8px}.countdown-modal footer{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}.countdown-advanced{border:1px solid var(--line);border-radius:11px;background:#fffaf4}.countdown-advanced summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:pointer;color:#756d61;font-size:12px;font-weight:700;list-style:none}.countdown-advanced summary::-webkit-details-marker{display:none}.countdown-advanced summary svg{width:16px;height:16px;transition:transform .16s ease}.countdown-advanced[open] summary svg{transform:rotate(180deg)}.countdown-advanced>label,.countdown-advanced>.countdown-title-fields{margin:0 12px 12px}@media(max-width:930px){.countdown-layout{grid-template-columns:1fr;gap:16px}.countdown-focus{display:grid;min-height:140px;padding:14px 16px}.countdown-number strong{font-size:64px}.countdown-timeline{gap:16px}}@media(max-width:800px){.countdown-hero{align-items:center}.countdown-hero h2{font-size:19px}.countdown-row{grid-template-columns:minmax(0,1fr) 72px;padding:9px 4px;gap:9px}.countdown-state strong{font-size:25px}.countdown-detail-sheet,.countdown-modal{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:min(88dvh,760px);overflow:auto}.countdown-view{position:relative}}
 @media(max-width:930px){.task-tail{flex:0 1 auto;max-width:132px;align-self:stretch;align-items:center;overflow:hidden}.task-tail:has(.task-due--timed){flex:0 1 76px;max-width:76px}.task-due{max-width:100%;overflow:hidden}.task-due--timed .task-due__text{display:grid;justify-items:end;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;white-space:normal}.task-due--timed .task-due__absolute,.task-due--timed .task-due__relative{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-due--timed .task-due__separator{display:none}.countdown-row,.countdown-row:first-of-type{min-height:62px;grid-template-columns:minmax(0,1fr) 72px;gap:8px;padding:8px 9px 8px 17px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}.countdown-row:first-of-type{border-top:1px solid var(--line)}.countdown-row.pinned,.countdown-row.today{background:transparent}.countdown-state strong{font-size:24px}}
 
 .task-row.just-completed,.habit-row.just-completed{animation:completion-row-settle .34s cubic-bezier(.2,.85,.3,1)}.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:completion-check-pop .38s cubic-bezier(.2,1.4,.35,1)}.task-row.completion-exiting,.habit-row.completion-exiting{pointer-events:none;overflow:hidden;animation:completion-slide-out .32s cubic-bezier(.4,0,.8,.2) forwards}@keyframes completion-slide-out{0%{opacity:1;transform:translate(var(--swipe-x),var(--reorder-y,0px));max-height:180px}68%{opacity:0;transform:translate(calc(100% + 24px),var(--reorder-y,0px));max-height:180px}100%{opacity:0;transform:translate(calc(100% + 24px),var(--reorder-y,0px));max-height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0}}@keyframes completion-row-settle{0%{background:rgba(113,133,107,.16);transform:translate(var(--swipe-x),var(--reorder-y,0px)) scale(1)}45%{background:rgba(113,133,107,.1);transform:translate(var(--swipe-x),var(--reorder-y,0px)) scale(.992)}100%{transform:translate(var(--swipe-x),var(--reorder-y,0px)) scale(1)}}@keyframes completion-check-pop{0%{transform:scale(.72);box-shadow:0 0 0 0 rgba(113,133,107,.28)}58%{transform:scale(1.18);box-shadow:0 0 0 7px rgba(113,133,107,0)}100%{transform:scale(1);box-shadow:none}}@media(prefers-reduced-motion:reduce){.task-row.just-completed,.habit-row.just-completed,.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:none}.task-row.completion-exiting,.habit-row.completion-exiting{animation:none}}
@@ -183,8 +183,9 @@ main:has(>.mvp-view .settings-sections){background:#fffdf8}
 .password-form.settings-form input{height:44px;min-width:0;padding:0 11px;border:1px solid #ded5c8;border-radius:9px;background:#fff;box-shadow:none}
 .password-form.settings-form .inline-error{grid-column:1/-1;margin:0}
 .password-form.settings-form>.primary-small{grid-column:4;grid-row:1;align-self:end;justify-self:auto}
-main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:9px;border-color:#dcd2c4;background:#fffdf9}
-main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff}
+main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:10px}
+main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}
+main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button:disabled,.backup-preflight .danger-button:disabled,.password-form .primary-small:disabled){background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;opacity:1}
 main:has(>.mvp-view .settings-sections) .danger-text{min-height:44px;border:0;background:transparent;color:var(--danger)}
 .settings-row select{height:44px;min-width:150px;padding:0 11px;border:1px solid #ded5c8;border-radius:9px;background:#fff;box-shadow:none}
 main:has(>.mvp-view .settings-sections) .session-card-actions{min-height:62px;padding:6px 0;border-bottom:1px solid #e8e0d5}
@@ -196,3 +197,20 @@ main:has(>.mvp-view .settings-sections) .settings-status-error>span{min-width:0;
 main:has(>.mvp-view .settings-sections) .backup-preflight{margin:14px 0 2px}
 main:has(>.mvp-view .settings-sections) .settings-data>.inline-error{margin:14px 0 0}
 @media(max-width:720px){main:has(>.mvp-view .settings-sections){padding-left:29px;padding-right:29px;padding-bottom:calc(102px + env(safe-area-inset-bottom))}.settings-sections{width:100%;padding-top:23px;padding-bottom:0}.settings-heading{padding-bottom:18px}.settings-heading h1{font-size:24px;line-height:1.1;font-weight:700}.settings-heading p{font-size:12px;line-height:1.5}.settings-group{padding-top:20px}.settings-row{min-height:64px}.password-form.settings-form{grid-template-columns:1fr}.password-form.settings-form>.primary-small{grid-column:1;grid-row:auto;justify-self:start}main:has(>.mvp-view .settings-sections) .session-card-actions{min-height:64px}main:has(>.mvp-view .settings-sections) .settings-empty,main:has(>.mvp-view .settings-sections) .settings-status-error{min-height:64px}}
+
+/* Approved cream-solid action buttons: one semantic material across Dodo. */
+:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px;border-radius:10px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}
+:is(.primary,.primary-small){border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}
+:is(.primary,.primary-small):hover:not(:disabled){background:#dd4b1e;border-color:#dd4b1e}
+:is(.soft-button,.secondary,.restore,.file-button){border:1px solid #ddd0c0;background:#fffaf3;color:#51483f;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(83,62,42,.06)}
+:is(.soft-button,.secondary,.restore,.file-button):hover:not(:disabled):not(.disabled){background:#f8eddf;border-color:#d5c5b2}
+.danger-button{border:1px solid #e2b7ac;background:#fff8f5;color:#b83c2c;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(105,48,34,.05)}
+.danger-button:hover:not(:disabled){background:#fde9e3;border-color:#d9a79a}
+:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):active:not(:disabled):not(.disabled){transform:translateY(1px) scale(.985)}
+:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):focus-visible{outline:3px solid rgba(241,90,41,.24);outline-offset:3px}
+:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):disabled,.file-button.disabled{background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;cursor:not-allowed;opacity:1}
+:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button)>svg{width:17px;height:17px;flex:0 0 auto}
+.restore-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.calendar-picker__header button{width:44px;height:44px}
+.calendar-picker__grid button{min-height:44px}
+@media(prefers-reduced-motion:reduce){:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){transition:none}:is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):active:not(:disabled):not(.disabled){transform:none}}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 6609075..c01a14d 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -76,6 +76,43 @@ describe('unified task due display', () => {
   })
 })
 
+describe('approved cream solid button system', () => {
+  it('gives semantic action buttons one consistent 44px cream material contract', () => {
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button){min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px;border-radius:10px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease}')
+    expect(css).toContain(':is(.primary,.primary-small){border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
+    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button){border:1px solid #ddd0c0;background:#fffaf3;color:#51483f;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(83,62,42,.06)}')
+    expect(css).toContain('.danger-button{border:1px solid #e2b7ac;background:#fff8f5;color:#b83c2c;box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(105,48,34,.05)}')
+  })
+
+  it('provides restrained interaction, focus, and disabled states without resizing buttons', () => {
+    expect(css).toContain(':is(.primary,.primary-small):hover:not(:disabled){background:#dd4b1e;border-color:#dd4b1e}')
+    expect(css).toContain(':is(.soft-button,.secondary,.restore,.file-button):hover:not(:disabled):not(.disabled){background:#f8eddf;border-color:#d5c5b2}')
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):active:not(:disabled):not(.disabled){transform:translateY(1px) scale(.985)}')
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):focus-visible{outline:3px solid rgba(241,90,41,.24);outline-offset:3px}')
+    expect(css).toContain(':is(.primary,.primary-small,.soft-button,.secondary,.restore,.file-button,.danger-button):disabled,.file-button.disabled{background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;cursor:not-allowed;opacity:1}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button:disabled,.backup-preflight .danger-button:disabled,.password-form .primary-small:disabled){background:#ebe2d8;border-color:#ded3c7;color:#aaa095;box-shadow:none;opacity:1}')
+  })
+
+  it('uses a real disabled file-picker button and keeps its input out of layout', () => {
+    expect(mvpPanel).toContain('function openRestoreFilePicker()')
+    expect(mvpPanel).toContain('<button type="button" class="file-button" :disabled="backupBusy" @click="openRestoreFilePicker"><ArchiveRestore />选择文件</button>')
+    expect(mvpPanel).toContain('<input ref="restoreInput" class="restore-file-input" type="file" tabindex="-1" aria-hidden="true"')
+    expect(css).toContain('.restore-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}')
+    expect(mvpPanel).not.toContain('<label class="file-button"')
+    expect(css).not.toContain('.task-compose-sheet button:disabled{opacity:.45')
+    expect(css).not.toContain('.pager button:disabled{opacity:.4')
+    expect(css).not.toContain('.purge-list-dialog button:disabled{opacity:.62')
+  })
+
+  it('keeps special-purpose controls outside the semantic action material', () => {
+    expect(css).toContain('.unified-fab{display:grid;place-items:center;position:fixed;z-index:60;')
+    expect(css).toContain('width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--accent)')
+    expect(css).toContain('.calendar-picker__header button{width:44px;height:44px}')
+    expect(css).toContain('.calendar-picker__grid button{min-height:44px}')
+    expect(css).not.toContain('button:not(')
+  })
+})
+
 describe('mobile navigation styles', () => {
   it('renames the bottom More tab to a direct Settings tab', () => {
     expect(app).not.toContain('aria-controls="mobile-more-menu"')
@@ -143,8 +180,8 @@ describe('approved Settings 01 paper ledger', () => {
   })
 
   it('keeps controls and password errors aligned with the approved form contract', () => {
-    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:9px;border-color:#dcd2c4;background:#fffdf9}')
-    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.soft-button,.primary-small,.danger-button,.file-button){min-height:44px;border-radius:10px}')
+    expect(css).toContain('main:has(>.mvp-view .settings-sections) :is(.settings-data>.settings-row:first-of-type .soft-button,.backup-preflight .danger-button,.password-form .primary-small){background:#f15a29;border-color:#f15a29;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 10px rgba(241,90,41,.20)}')
     expect(css).toContain('main:has(>.mvp-view .settings-sections) .danger-text{min-height:44px;border:0;background:transparent;color:var(--danger)}')
     expect(css).toContain('.password-form.settings-form{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px}')
     expect(css).toContain('.password-form.settings-form .inline-error{grid-column:1/-1;margin:0}')