:root { font-family: system-ui, sans-serif; color: #322e21; background: #f3f1e9; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 36rem; margin: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { min-height: 48px; min-width: 48px; cursor: pointer; border: 1px solid #847536; border-radius: .65rem; background: #fff6c4; color: inherit; padding: .6rem 1rem; }
button:disabled { cursor: default; opacity: .55; }
button:active { background: #ead05c; }
:focus-visible { outline: 3px solid #475da2; outline-offset: 2px; }
a { color: #463d1a; display: inline-flex; align-items: center; min-height: 48px; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
h2 { margin-top: 2rem; font-size: 1.1rem; }
.primary { width: 100%; min-height: 64px; font-weight: 700; font-size: 1.2rem; background: #f7df69; }
ul { list-style: none; padding: 0; margin: 0; }
#recent a { width: 100%; margin-bottom: .65rem; background: #f9e88b; border-radius: .4rem; padding: .8rem 1rem; overflow-wrap: anywhere; }
nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
#status { font-size: .75rem; background: #e6dfc2; border-radius: 1rem; padding: .3rem .6rem; }
.note { background: #fff09b; box-shadow: 2px 6px 16px #4b43141a; border-radius: .2rem .2rem .8rem .2rem; min-height: 65vh; }
.note header { position: sticky; top: 0; z-index: 1; background: #fff09b; padding: 1rem; border-bottom: 1px solid #a18d3b44; }
#title { display: block; font-size: 1.5rem; font-weight: 700; width: 100%; min-height: 48px; margin-bottom: .5rem; background: transparent; border: 0; color: inherit; }
#title::placeholder { color: #645a31; opacity: 1; }
#add-form { display: flex; gap: .5rem; }
#item-text { min-width: 0; width: 100%; min-height: 52px; border: 1px solid #a18d3b; border-radius: .65rem; background: #fffbee; padding: .7rem; font-size: 1rem; }
#add-form button { font-size: 1.8rem; width: 56px; flex-shrink: 0; line-height: 1; background: #e9cb48; }
#items { background: repeating-linear-gradient(transparent 0, transparent 55px, #a18d3b33 55px, #a18d3b33 56px); }
.item { display: flex; align-items: stretch; min-height: 56px; border-bottom: 1px solid #a18d3b22; }
.item button { border: 0; border-radius: 0; background: transparent; }
.item .toggle { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; padding: .85rem 1rem; }
.item.done .toggle { text-decoration: line-through; color: #71683f; }
.item .delete { flex-shrink: 0; font-size: 1.25rem; padding: .4rem; color: #786a39; }
.note footer { padding: 1rem; }
#empty-list { padding: 1rem; color: #71683f; }
#error { color: #8c2717; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.list-tools, .share-actions { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
#share-panel { padding: 1rem; margin-bottom: 1rem; background: #fffbee; border-radius: .65rem; }
#share-link { width: 100%; min-height: 48px; margin: .5rem 0; }
#share-qr svg { display: block; width: 100%; max-width: 20rem; height: auto; margin: auto; }
.kitchen main { max-width: 52rem; }
.kitchen #title { font-size: 2rem; }
.kitchen #item-text { min-height: 88px; font-size: 2rem; }
.kitchen #add-form button { width: 64px; font-size: 2.5rem; }
.kitchen .item .toggle { font-size: 2rem; padding: 1rem; }
.kitchen #items { background: none; }