* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, system-ui, sans-serif; background: #111; color: #eee; }
nav { display: flex; gap: 4px; padding: 10px; background: #1a1a1a; position: sticky; top: 0; }
nav a { flex: 1; text-align: center; padding: 10px; border-radius: 8px; color: #aaa; text-decoration: none; }
nav a.active { background: #2a2a2a; color: #fff; }
main { padding: 14px; max-width: 640px; margin: 0 auto; }
button.big { width: 100%; padding: 18px; font-size: 1.2rem; border: 0; border-radius: 12px; background: #e0a52c; color: #111; font-weight: 700; }
#status { padding: 12px 4px; color: #aaa; min-height: 2.2em; }
.card-row { display: flex; gap: 10px; align-items: center; background: #1c1c1c; border-radius: 10px; padding: 8px; margin-bottom: 8px; cursor: pointer; }
.card-row img { width: 56px; border-radius: 4px; }
.card-row .info { flex: 1; }
.card-row .info small { color: #999; display: block; }
.card-row .price { text-align: right; font-weight: 600; white-space: nowrap; }
.card-row .price small { color: #999; display: block; font-weight: 400; }
.search-row { display: flex; gap: 8px; margin-top: 16px; }
.search-row input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #333; background: #1c1c1c; color: #eee; }
.search-row button { padding: 10px 16px; border: 0; border-radius: 8px; background: #2a2a2a; color: #eee; }
.totals { display: flex; gap: 12px; margin-bottom: 14px; }
.totals .box { flex: 1; background: #1c1c1c; border-radius: 10px; padding: 12px; text-align: center; }
.totals .box b { font-size: 1.3rem; display: block; }
.totals .box span { color: #999; font-size: .85rem; }