:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #263c37;
  background: #f4f6f2;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.app { width: min(100% - 40px, 620px); margin: 72px auto; }
.panel { background: white; border: 1px solid #dfe7df; border-radius: 20px; padding: 28px; box-shadow: 0 12px 40px #263c3706; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.input-row { display: flex; gap: 10px; }
input[type="text"] { min-width: 0; flex: 1; border: 1px solid #c9d4cc; border-radius: 10px; padding: 13px; font: inherit; background: #fcfdfb; }
input::placeholder { color: #758078; }
button { cursor: pointer; font: inherit; border-radius: 10px; }
.add-button { padding: 12px 20px; border: 0; background: #28634f; color: white; font-weight: 600; }
.add-button:hover { background: #1c4e3d; }
:focus-visible { outline: 3px solid #5c9c86; outline-offset: 3px; }
.list-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
h2 { font-size: 15px; margin: 0; }
#task-count { color: #63716b; font-size: 12px; }
#task-list { list-style: none; padding: 0; margin: 8px 0 0; }
.task, .task-columns { display: grid; grid-template-columns: 32px minmax(0, 1fr) repeat(3, 44px); gap: 8px; align-items: center; }
.task { padding: 15px 0; border-top: 1px solid #edf0eb; }
.task-columns { color: #63716b; font-size: 12px; margin-top: 12px; }
.task-columns span:first-child, .task-columns span:nth-child(3) { text-align: center; }
.task .task-text { min-width: 0; margin: 0; font-weight: 400; cursor: pointer; overflow-wrap: anywhere; white-space: pre-wrap; }
.task .completion-control { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; cursor: pointer; }
.task input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: #28634f; cursor: pointer; }
.task span { overflow-wrap: anywhere; white-space: pre-wrap; }
.task.completed .task-text { color: #77837b; text-decoration: line-through; }
.delete-button { border: 0; background: transparent; color: #7c4c46; font-size: 12px; padding: 10px; flex-shrink: 0; }
.delete-button:hover { background: #fbefec; }
.mark-field { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mark-field label { margin: 0; }
select { max-width: 100%; padding: 10px; border: 1px solid #c9d4cc; border-radius: 8px; background: #fcfdfb; color: inherit; font: inherit; min-height: 44px; }
.task-mark { display: inline-grid; place-items: center; width: 32px; height: 38px; flex-shrink: 0; font-size: 22px; font-weight: 700; }
.edit-button { border: 0; background: transparent; color: #28634f; padding: 10px; font-size: 12px; }
.edit-button:hover { background: #edf4ee; }
.edit-button, .delete-button { min-height: 44px; }
.task .task-editor { grid-column: 1 / -1; min-width: 0; padding: 16px; background: #f4f6f2; border-radius: 10px; }
.task .task-editor[hidden] { display: none; }
.task .task-editor label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; cursor: default; }
.task-editor input[type="text"] { width: 100%; }
.summary { margin-top: 28px; border-top: 3px solid #28634f; padding-top: 16px; }
.summary table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.summary th, .summary td { padding: 10px 6px; border-bottom: 1px solid #dfe7df; text-align: center; }
.summary thead { background: #f4f6f2; }
.summary tbody th { font-size: 22px; }
.summary-note { font-size: 12px; color: #63716b; line-height: 1.7; }
#empty-message { text-align: center; color: #63716b; font-size: 14px; line-height: 1.9; padding: 28px 0; }
#status-message { color: #994331; font-size: 13px; line-height: 1.7; margin: 0; }
#status-message:not(:empty) { margin-top: 16px; }
footer { text-align: center; font-size: 12px; color: #63716b; margin-top: 24px; }
.backup { border-top: 1px solid #dfe7df; margin-top: 24px; padding-top: 20px; }
.storage-note, #restore-preview, #backup-status { font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.storage-note { color: #63716b; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid #c9d4cc; border-radius: 10px; background: #fcfdfb; color: #28634f; font: inherit; cursor: pointer; }
.file-button { position: relative; margin: 0; }
.file-button input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.file-button:focus-within { outline: 3px solid #5c9c86; outline-offset: 3px; }
.restore-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; }
.restore-confirm input { flex-shrink: 0; margin-top: 5px; }
button:disabled { cursor: default; opacity: .5; }
#backup-status { margin-bottom: 0; }
@media (max-width: 480px) {
  .app { margin: 36px auto; width: calc(100% - 28px); }
  .panel { padding: 20px; }
  .add-button { padding-inline: 16px; }
}