:root { font-family: Roboto, Arial, sans-serif; color: #172033; background: #f5f7fb; font-size: 16px; }
body { margin: 0; }
main { width: min(680px, calc(100% - 32px)); margin: 56px auto; background: white; border-radius: 16px; padding: 32px; box-shadow: 0 8px 32px #1d33501a; }
h1 { margin: 0 0 8px; } .eyebrow { color: #536dfe; font-weight: 700; margin: 0 0 6px; text-transform: uppercase; font-size: 14px; } .hint { color: #5d6879; }
label { display: block; font-weight: 700; margin: 24px 0 8px; } .form-row, .actions { display: flex; gap: 8px; }
input { min-width: 0; flex: 1; border: 1px solid #cbd2dd; border-radius: 8px; padding: 10px 12px; font: inherit; }
button { border: 0; border-radius: 8px; padding: 10px 14px; font: inherit; font-weight: 700; color: white; background: #4055d6; cursor: pointer; } .icon-button { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 42px; padding: 9px; } .icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } button.secondary { background: #697386; } button.danger { background: #c43636; } button:disabled { opacity: .5; cursor: default; }
ul { padding: 0; list-style: none; } li { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e5e8ef; padding: 14px 0; } .item-title { flex: 1; font-weight: 700; } .purchased .item-title { text-decoration: line-through; color: #697386; } .status { color: #5d6879; font-size: 14px; } #message { min-height: 1.2em; color: #b42318; font-weight: 700; } #empty { color: #5d6879; }
@media (max-width: 560px) { main { margin: 16px auto; padding: 22px; } li { align-items: flex-start; flex-wrap: wrap; } .actions { width: 100%; } }