* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background: #0a0a0a; color: #fff; min-height: 100vh; padding: 24px; }
header { max-width: 720px; margin: 0 auto 48px; text-align: center; }
header h1 { font-size: 32px; margin-bottom: 8px; }
header p { color: #999; margin-bottom: 24px; }
button { background: #FFD700; color: #000; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
#signed-in { color: #999; font-size: 14px; }
#signed-in button { background: transparent; color: #999; padding: 4px 12px; margin-left: 8px; border: 1px solid #333; }
main { max-width: 960px; margin: 0 auto; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.pack { background: #161616; border: 1px solid #2a2a2a; border-radius: 16px; padding: 24px; text-align: center; position: relative; }
.pack.featured { border-color: #FFD700; }
.badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #FFD700; color: #000; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.sparks { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.price { color: #999; margin-bottom: 16px; }
.buy-btn { width: 100%; }
.note { text-align: center; color: #666; margin-top: 24px; font-size: 13px; }

/* Sign-in modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 16px;
}
.modal-content {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 16px;
  padding: 32px 24px; max-width: 400px; width: 100%; position: relative;
}
.modal-close {
  position: absolute; top: 12px; right: 12px; background: transparent;
  color: #999; font-size: 24px; padding: 4px 12px; border: none;
}
.modal h2 { font-size: 22px; margin-bottom: 8px; }
.modal-sub { color: #999; font-size: 14px; margin-bottom: 24px; }

.oauth-btn {
  width: 100%; padding: 12px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; border-radius: 10px;
}
.oauth-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-weight: 700;
}
.apple-btn { background: #fff; color: #000; }
.apple-btn .oauth-icon::before { content: ""; display: inline-block; width: 16px; height: 18px;
  background: #000; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zM256.6 70.5c30.3-36 27.6-68.9 26.7-80.5-26.8 1.6-57.8 18.3-75.5 38.8-19.5 22-31 49.2-28.5 79.9 29 2.2 55.5-12.7 77.3-38.2z'/></svg>") center/contain no-repeat;
}
.google-btn { background: #fff; color: #000; }
.google-btn .oauth-icon { background: #4285F4; color: #fff; border-radius: 50%; font-size: 13px; }

.divider {
  text-align: center; color: #555; margin: 20px 0 16px; font-size: 12px;
  display: flex; align-items: center; gap: 12px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: #2a2a2a;
}

.modal input[type="email"], .modal input[type="password"] {
  width: 100%; padding: 12px; margin-bottom: 8px;
  background: #0a0a0a; color: #fff; border: 1px solid #2a2a2a;
  border-radius: 8px; font-size: 14px;
}
.modal input:focus { outline: none; border-color: #FFD700; }

.email-btn {
  width: 100%; padding: 12px; margin-top: 8px;
  background: #FFD700; color: #000;
}
.email-btn-secondary {
  width: 100%; padding: 12px; margin-top: 8px;
  background: transparent; color: #999; border: 1px solid #2a2a2a;
}

.auth-error {
  color: #f66; font-size: 13px; padding: 8px 0; text-align: center;
}

#signed-in { display: inline-flex; align-items: center; gap: 12px; color: #999; font-size: 14px; }
#signed-in button { background: transparent; color: #999; padding: 4px 12px; border: 1px solid #333; font-size: 12px; }