:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; background: #101713; color: #eef6f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
header { padding: 1rem 1rem .5rem; background: #18211c; }
h1 { margin: 0; font-size: 1.35rem; }
#status { margin: .4rem 0 0; color: #b8c7bd; min-height: 1.4rem; }
nav { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .65rem; background: #18211c; }
button { border: 1px solid #456150; border-radius: .6rem; padding: .7rem; background: #24332a; color: inherit; font: inherit; }
button:active { background: #35503e; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
.toolbar, .editor-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .8rem; }
.note-row { display: block; width: 100%; text-align: left; margin-bottom: .5rem; }
label { display: grid; gap: .35rem; margin: .8rem 0; }
input, textarea { width: 100%; border: 1px solid #456150; border-radius: .5rem; padding: .7rem; background: #0d130f; color: inherit; font: inherit; }
textarea { resize: vertical; }
.task-row { display: flex; align-items: center; gap: .7rem; padding: .55rem; margin: .4rem 0; background: #18211c; border-radius: .6rem; }
.task-row.selected { background: #284333; outline: 1px solid #557562; }
.task-row input[type="checkbox"] { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: 0; }
.task-row .completion-checkbox { accent-color: #d6b66f; }
.task-row .task-label { flex: 1 1 0; min-width: 0; margin: 0; }
.plain-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem; margin: .4rem 0; border: 1px dashed #557562; border-radius: .6rem; }
.plain-item-row.selected { background: #284333; border-style: solid; }
.plain-item-row > span { min-width: 0; overflow-wrap: anywhere; }
.item-select-button { flex: 0 0 auto; width: auto; max-width: 25%; min-height: 2.75rem; padding: .45rem .35rem; white-space: nowrap; color: #b8c7bd; background: transparent; }
.selected .item-select-button { color: #eef6f0; background: #35503e; }
.markdown-row { margin: .4rem 0; padding: .45rem .65rem; color: #b8c7bd; white-space: pre-wrap; }
.bulk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; }
.bulk-actions #convert-shopping-selection, .bulk-actions #delete-shopping-selection { grid-column: 1 / -1; }
#add-shopping-list { width: 100%; margin: -.2rem 0 1rem; }
.title-save { margin: -.35rem 0 1rem; }
.item-adder { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 1rem 0; }
.item-adder input { margin: 0; }
.back { margin-bottom: 1rem; }
.danger { border-color: #8e504e; background: #4a2525; }
.danger-secondary { border-color: #8e504e; color: #ffd0cd; background: #302020; }
.save-status { display: grid; gap: .2rem; min-height: 2.8rem; color: #b8c7bd; }
.trash-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: .5rem; }
.trash-row .note-row { margin: 0; }
.notice { color: #b8c7bd; line-height: 1.5; }
[hidden] { display: none !important; }