:root {
  --bg: #0f172a; --kartu: #1e293b; --teks: #e2e8f0; --abu: #94a3b8;
  --hijau: #22c55e; --hijau-tua: #16a34a; --biru: #3b82f6; --border: #334155; --merah: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--teks); min-height: 100vh; }
header { padding: 28px 20px 8px; text-align: center; }
header h1 { font-size: 1.8rem; }
.sub { color: var(--abu); font-size: .9rem; margin-top: 4px; }
main { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.loading { color: var(--abu); }
.card { background: var(--kartu); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 1.05rem; }
.card .desc { color: var(--abu); font-size: .85rem; flex: 1; }
.card .price { font-size: 1.25rem; font-weight: 800; color: var(--hijau); }
.btn { padding: 11px 16px; border: 0; border-radius: 9px; font-size: .95rem; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--hijau); color: #052e16; width: 100%; }
.btn.primary:hover { background: var(--hijau-tua); }
.btn.buy { background: var(--biru); color: #fff; }
.btn.buy:hover { opacity: .9; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--kartu); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: 100%; max-width: 420px; position: relative; }
.modal-box .close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--abu); font-size: 1.6rem; cursor: pointer; }
label { display: block; margin-top: 12px; font-size: .85rem; color: var(--teks); }
label input { width: 100%; margin-top: 5px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--teks); font-size: .95rem; }
.hint { margin-top: 14px; font-size: .78rem; color: var(--abu); }
.error { color: var(--merah); font-size: .85rem; margin-top: 10px; min-height: 1.2em; }