:root {
  --bg: #fff8ef;
  --card: #ffffff;
  --accent: #ff476f;
  --accent-2: #4f46e5;
  --text: #1f2937;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 2rem; background: linear-gradient(90deg, #ffd166, #ef476f); color: #111; }
.topbar h1 { margin: 0; }
.topbar p { margin: .25rem 0 0; }
.topbar-actions { display: flex; gap: .5rem; }
button { border: none; padding: .55rem .9rem; border-radius: 10px; cursor: pointer; }
button.primary { background: var(--accent-2); color: #fff; }
button.ghost { background: #ececec; }
main { padding: 1rem 2rem 4rem; }
.controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.controls input, .controls select { padding: .65rem .7rem; border-radius: 8px; border: 1px solid #d1d5db; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.price { font-weight: 700; }
.card-actions { margin-top: auto; display: flex; gap: .5rem; }
.drawer { position: fixed; top: 0; right: 0; width: min(430px, 96vw); height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,.2); padding: 1rem; display: flex; flex-direction: column; z-index: 20; }
.hidden { display: none !important; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; }
.drawer-content { overflow: auto; display: grid; gap: .7rem; padding: .5rem 0; }
.drawer-item { display: grid; grid-template-columns: 80px 1fr auto; gap: .5rem; background: #f9fafb; border-radius: 10px; padding: .5rem; align-items: center; }
.drawer-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; }
.qty { display: inline-flex; align-items: center; gap: .3rem; }
dialog { width: min(660px, 96vw); border: none; border-radius: 16px; padding: 0; }
#checkoutForm { display: grid; gap: .6rem; padding: 1rem 1.2rem; }
#checkoutForm label { display: grid; gap: .3rem; }
#checkoutForm input, #checkoutForm textarea { padding: .55rem .6rem; border-radius: 8px; border: 1px solid #cbd5e1; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }
.hint { color: #6b7280; }
.toast { position: fixed; bottom: 15px; right: 15px; background: #111827; color: #fff; padding: .75rem 1rem; border-radius: 10px; max-width: 360px; z-index: 40; }
footer { padding: 1rem 2rem; border-top: 1px solid #e5e7eb; background: #fff; }
@media (max-width: 760px) { .controls { grid-template-columns: 1fr; } }