*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #FFFAF5; font-family: Avenir, 'Segoe UI', Helvetica, Arial, sans-serif; color: #414141; line-height: 1.4; }
.nav { background: #FFFAF5; border-bottom: 1px solid #E8E6E6; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.nav img { height: 44px; }
.nav a { color: #414141; text-decoration: none; font-size: 14px; letter-spacing: 0.03em; }
.container { max-width: 560px; margin: 48px auto; padding: 0 24px; }
h1 { color: #302F51; font-size: 36px; font-weight: normal; text-align: center; margin-bottom: 8px; }
.subtitle { color: #57557D; font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 32px; }
.card { background: #fff; border: 1px solid #E8E6E6; padding: 32px; margin-bottom: 24px; }
.plan-badge { display: inline-block; background: #302F51; color: #fff; padding: 6px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; }
label { display: block; font-weight: 700; font-size: 14px; color: #302F51; margin-bottom: 6px; margin-top: 20px; }
input[type="text"], input[type="number"] { width: 100%; padding: 12px; border: 1px solid #C7C7C7; font-size: 16px; font-family: inherit; color: #414141; background: #FFFAF5; outline: none; }
input:focus { border-color: #018DFD; }
.slider-wrap { margin-top: 8px; }
.slider-wrap input[type="range"] { width: 100%; accent-color: #018DFD; }
.slider-val { font-size: 28px; color: #302F51; font-weight: 700; text-align: center; margin-top: 8px; }
.billing-toggle { display: flex; gap: 12px; margin-top: 8px; }
.billing-opt { flex: 1; padding: 16px; border: 2px solid #E8E6E6; cursor: pointer; text-align: center; transition: border-color 0.2s; }
.billing-opt.active { border-color: #018DFD; }
.billing-opt h4 { color: #302F51; font-size: 15px; margin-bottom: 4px; }
.billing-opt p { color: #999997; font-size: 12px; }
.discount-section { margin-top: 20px; }
.discount-row { display: flex; gap: 8px; }
.discount-row input[type="text"] { flex: 1; text-transform: uppercase; }
.btn-apply { padding: 14px 24px; min-height: 44px; background: #302F51; color: #fff; border: 2px solid #302F51; border-radius: 0; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; white-space: nowrap; transition: background 0.2s, border-color 0.2s; -webkit-appearance: none; appearance: none; }
.btn-apply:hover { background: #454370; border-color: #454370; }
.btn-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.discount-msg { font-size: 13px; margin-top: 6px; }
.discount-msg.valid { color: #27ae60; }
.discount-msg.invalid { color: #c0392b; }
.discount-applied { font-size: 14px; color: #27ae60; font-weight: 700; margin-top: 6px; display: none; }
.discount-applied.show { display: block; }
.discount-strikethrough { text-decoration: line-through; opacity: 0.5; margin-left: 6px; }
.price-display { background: #E8F1FE; padding: 20px; text-align: center; margin-top: 24px; }
.price-display .amount { font-size: 32px; color: #302F51; font-weight: 700; }
.price-display .detail { font-size: 14px; color: #57557D; margin-top: 4px; }
.btn-discord { display: block; width: 100%; padding: 16px; background: #5865F2; color: #fff; border: none; font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; margin-top: 24px; transition: background 0.2s; }
.btn-discord:hover { background: #4752C4; }
.btn-discord:disabled { opacity: 0.5; cursor: not-allowed; }
.note { font-size: 12px; color: #999997; text-align: center; margin-top: 12px; }
.error { color: #c0392b; font-size: 13px; margin-top: 8px; }
.hidden { display: none; }
.footer { text-align: center; padding: 32px; font-size: 12px; color: #999997; }
.footer a { color: #018DFD; text-decoration: none; }

@media (max-width: 600px) {
  .nav { padding: 12px 16px; }
  .nav img { height: 36px; }
  .nav a { font-size: 12px; }
  .container { margin: 24px auto; padding: 0 12px; }
  h1 { font-size: 28px; }
  .subtitle { font-size: 15px; margin-bottom: 20px; }
  .card { padding: 20px 16px; }
  .billing-toggle { flex-direction: column; gap: 8px; }
  .price-display .amount { font-size: 26px; }
  .btn-discord { font-size: 15px; padding: 14px; }
}