button, input, select, textarea { font: inherit; }
#today { padding-bottom: 72px; }
button, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 48px; }
label { display: grid; gap: 6px; margin: 12px 0; line-height: 1.5; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; max-width: 100%; padding: 10px; border: 1px solid #829ab1; border-radius: 8px; background: white; color: #102a43; font-size: 16px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #d97706; outline-offset: 2px; }
.check-label, .tag-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex-shrink: 0; }
fieldset { min-width: 0; margin: 16px 0; padding: 12px; border: 1px solid #bcccdc; border-radius: 10px; }
legend { font-weight: 600; padding: 0 6px; }
.date-controls, .source-controls, .quantity-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.date-controls button, .source-controls button, .quantity-controls button { flex: 1; padding: 10px 8px; }
.source-controls button[aria-pressed="false"], button.secondary { color: #102a43; background: #e4edf2; }
button.danger { background: #a12622; }
.hint { color: #486581; font-size: .9rem; }
.error-message { padding: 12px; border: 1px solid #b91c1c; border-radius: 8px; background: #fff1f2; color: #9b1c1c; white-space: pre-wrap; overflow-wrap: anywhere; }
#ui-status:empty { display: none; }
#ui-status { color: #116b79; }
.add-bar { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); padding: 10px 18px; background: #f1f5f8; z-index: 1; }
.add-bar button { display: block; width: min(100%, 744px); margin: auto; min-height: 52px; }
.record-card, .choice-card, .food-card { display: grid; gap: 5px; width: 100%; margin: 10px 0; padding: 14px; border: 1px solid #bcccdc; background: white; color: #102a43; text-align: left; line-height: 1.5; overflow-wrap: anywhere; }
.record-card strong, .food-card strong, .choice-card strong { font-size: 1.05rem; }
.record-card span, .choice-card span, .food-card span { font-size: .9rem; font-weight: 400; }
.tag-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.tag-options label { margin: 4px 0; }
.nutrition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
dialog { width: min(100%, 680px); max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 20px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border: 0; border-radius: 18px 18px 0 0; color: #102a43; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgb(16 42 67 / 55%); }
dialog h2 { margin-top: 0; }
.dialog-actions { position: sticky; bottom: -20px; display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0; margin-top: 16px; background: white; }
.dialog-actions button { flex: 1; min-width: 92px; }
#record-preview { display: block; padding: 12px; background: #e0f1f3; border-radius: 8px; font-weight: 600; white-space: pre-wrap; }
.snapshot-choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px; border: 1px solid #bcccdc; border-radius: 8px; }
.snapshot-choice span { white-space: pre-wrap; }
@media (min-width: 680px) { dialog { margin: auto; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* 日記與新增流程：白底、藍色操作、清楚的數字欄位與安全區域。 */
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202124; background: #f4f5f7; }
body { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
main > header { padding: 0 8px; }
main > header h1 { font-size: 1.3rem; }
main > header p { display: none; }
section, .status { border-color: #e5e7eb; border-radius: 4px; }
#today { border: 0; padding: 0 0 12px; background: transparent; }
button { background: #1266d6; border-radius: 6px; min-height: 48px; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: #1266d6; }
button.text-button, button.secondary { background: transparent; color: #1266d6; }
button:disabled { color: #8b929b; background: #edf0f4; }
button.text-button:disabled { background: transparent; }
.tabs { z-index: 3; border-color: #e5e7eb; }
.tabs a[aria-selected="true"] { color: #1266d6; background: white; border-top: 3px solid #1266d6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hint, .food-text small { color: #69717d; }
.date-controls { align-items: center; flex-wrap: nowrap; gap: 0; margin: 0; background: white; padding: 2px; }
.date-controls button { flex: 0 0 48px; font-size: 1.2rem; }
.date-picker { position: relative; flex: 1; text-align: center; min-height: 48px; display: grid; place-items: center; margin: 0; font-weight: 600; cursor: pointer; }
.date-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
#back-today { font-size: .85rem; }
.day-hint { text-align: center; margin: 4px 0 12px; font-size: .75rem; }
.summary-card, .completion-card { background: white; padding: 20px 14px; margin: 0 0 12px; }
.calorie-equation { display: grid; grid-template-columns: 1fr 16px 1.25fr 16px 1fr; align-items: center; gap: 4px; text-align: center; }
.calorie-equation div { display: grid; gap: 8px; min-width: 0; }
.calorie-equation strong { font-size: clamp(1.1rem, 4.8vw, 1.8rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calorie-equation div:nth-of-type(2) strong { color: #1266d6; }
.calorie-equation span { color: #69717d; font-size: .8rem; }
.summary-card p { text-align: center; font-size: .85rem; margin-bottom: 0; }
.incomplete { color: #9a5800; }
.reload { display: block; margin-left: auto; font-size: .85rem; }
.meal-section { padding: 0; margin: 0 0 12px; border: 0; background: white; }
.meal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.meal-header h3 { margin: 0; font-size: 1.05rem; }
.meal-header span, .row-calories { text-align: right; font-variant-numeric: tabular-nums; }
.meal-header span { font-size: .85rem; }
.diary-row { display: flex; border-bottom: 1px solid #eee; touch-action: pan-y; }
.record-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 0; margin: 0; min-height: 76px; flex: 1; min-width: 0; padding: 14px; color: #202124; background: white; }
.food-text { display: grid; gap: 6px; min-width: 0; text-align: left; }
.food-text small { font-size: .8rem; font-weight: 400; }
.row-calories { flex-shrink: 0; font-size: .85rem; }
.swipe-delete { border-radius: 0; flex: 0 0 76px; }
.meal-add { display: block; text-align: left; width: 100%; padding-left: 14px; }
.completion-card { margin-top: 20px; text-align: center; }
.completion-card button { width: 100%; }
#calibration-status { color: #69717d; font-size: .85rem; }
dialog { color: #202124; }
dialog.page-dialog { height: 100dvh; max-height: 100dvh; width: 100%; max-width: 680px; border-radius: 0; padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.page-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; background: white; border-bottom: 1px solid #eee; margin: 0 -18px 16px; padding: 6px 12px; text-align: center; }
.page-header button { padding: 10px; }
.page-header label { margin: 0; }
.meal-heading select { border: 0; font-weight: 600; text-align: center; }
.page-header #record-save { font-size: 1.5rem; }
#record-dialog-title { font-size: 1.6rem; margin-top: 20px; overflow-wrap: anywhere; }
.source-controls { gap: 0; border-bottom: 1px solid #ddd; }
.source-controls button, .source-controls button[aria-pressed="false"] { background: white; color: #69717d; border-radius: 0; font-size: .95rem; }
.source-controls button[aria-pressed="true"] { color: #1266d6; border-bottom: 3px solid #1266d6; }
.choice-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #eee; }
.choice-card { flex: 1; min-width: 0; border: 0; background: white; color: #202124; margin: 0; padding: 16px 0; }
.choice-card span { color: #69717d; font-size: .8rem; }
.quick-plus { min-width: 48px; width: 48px; border-radius: 50%; background: #eaf2ff; color: #1266d6; font-size: 1.5rem; flex-shrink: 0; }
.toast:empty { display: none; }
.toast { position: sticky; top: 66px; z-index: 2; text-align: center; color: #1266d6; background: #eaf2ff; padding: 12px; }
#record-common-fields { border: 0; padding: 0; }
#record-common-fields > legend { display: none; }
#record-preview { background: #f4f7fc; line-height: 1.8; }
.dialog-actions { bottom: 0; }
button.danger { background: #c92a30; color: white; }
#record-delete { width: 100%; }
.food-card { border-color: #e5e7eb; color: #202124; }
@media (min-width: 680px) { dialog.page-dialog { height: 94dvh; max-height: 94dvh; margin: auto; border-radius: 10px; } }
.backup-banner { background: white; padding: 12px; margin-bottom: 12px; border-left: 4px solid #ccd5e2; }
.backup-banner.warning { border-left-color: #b87500; background: #fffaed; }
.backup-banner.urgent { border: 2px solid #ba2525; background: #fff1f1; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#backup-download, #restore-safety-download { display: inline-flex; min-height: 48px; align-items: center; color: #1266d6; }
.restore-counts { width: 100%; border-collapse: collapse; font-size: .85rem; }
.restore-counts th, .restore-counts td { border-bottom: 1px solid #ddd; padding: 10px 4px; text-align: right; overflow-wrap: anywhere; }
.restore-counts th:first-child, .restore-counts td:first-child { text-align: left; }