:root { --teal:#4ec6c6; --dark:#0a1520; --light:#c8e6ec; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", sans-serif; background: var(--dark); color: var(--light); }
.hero { text-align:center; padding:4rem 1rem 2rem; }
.hero h1 { color: var(--teal); font-size: 2.2rem; margin:0 0 .5rem; }
.pricing { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; padding:2rem 1rem; }
.tier { background:#0f2030; border:1px solid var(--teal); border-radius:14px; padding:1.5rem; width:220px; text-align:center; }
.tier .price { font-size:1.8rem; color:var(--teal); margin:.5rem 0; }
.tier .price span { font-size:.9rem; color:var(--light); }
.tier button, .actions button { background:var(--teal); color:var(--dark); border:0; border-radius:8px; padding:.6rem 1.2rem; font-weight:700; cursor:pointer; }
dialog { background:#0f2030; color:var(--light); border:1px solid var(--teal); border-radius:14px; max-width:360px; }
dialog label { display:block; margin:.6rem 0; }
dialog input, dialog select { width:100%; padding:.5rem; border-radius:6px; border:1px solid var(--teal); background:var(--dark); color:var(--light); }
.actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.note { font-size:.85rem; opacity:.8; }
#qr-canvas { display:block; margin:1rem auto; background:#fff; padding:8px; border-radius:8px; }