* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2937; background: #f8fafc; }
.topbar { background: #0f766e; padding: 16px 24px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
main { max-width: 960px; margin: 0 auto; padding: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: 12px; padding: 12px; text-decoration: none; color: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card img, .detail img { width: 100%; border-radius: 8px; }
.detail { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.price { color: #0f766e; font-weight: 700; font-size: 18px; }
button { background: #0f766e; color: #fff; border: 0; padding: 12px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; }
.pay-box { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pay-amount { font-size: 32px; font-weight: 800; color: #0f766e; }
.status { margin-top: 16px; font-weight: 600; }
@media (max-width: 640px) { .detail { grid-template-columns: 1fr; } }