* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; background: #f4f4f5; color: #18181b; }
header { display: flex; justify-content: space-between; align-items: center;
         gap: 1rem; padding: .75rem 1rem; background: #18181b; color: #fff; }
main { padding: 1rem; max-width: 44rem; margin: 0 auto; }
button { font: inherit; padding: .5rem .9rem; border: 1px solid #d4d4d8;
         border-radius: .4rem; background: #fff; cursor: pointer; }
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
header button { background: transparent; color: #fff; border-color: #52525b; }
input { font: inherit; padding: .5rem; border: 1px solid #d4d4d8; border-radius: .4rem; width: 100%; }
label { display: block; margin: .6rem 0; }
ul { list-style: none; margin: 0; padding: 0; }
li { background: #fff; border: 1px solid #e4e4e7; border-radius: .5rem;
     margin-bottom: .5rem; padding: .7rem .9rem; display: flex;
     justify-content: space-between; align-items: center; gap: .75rem; }
li .meta { color: #71717a; font-size: .85rem; }
.row { display: flex; gap: .5rem; align-items: center; }
.qty { min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.err { color: #b91c1c; }
a { color: inherit; text-decoration: none; cursor: pointer; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; }