:root { --payment-logo-width: 300px; }
* { box-sizing: border-box; }
    body { min-height:100vh; font-family:Inter,system-ui,sans-serif; margin:0; padding:32px 20px; color:#101828; background:radial-gradient(circle at 12% 10%,#6366f122,transparent 32%),radial-gradient(circle at 88% 90%,#06b6d422,transparent 32%),#f6f7fb; }
    .payment-shell { width:min(680px,100%); margin:0 auto; }
    .payment-card { background:#fff; border:1px solid #e4e7ec; border-radius:24px; padding:32px; box-shadow:0 18px 55px rgba(16,24,40,.10); }
    .payment-brand { display:flex; justify-content:center; margin-bottom:24px; }
    .payment-brand img { width:min(var(--payment-logo-width),80%); height:auto; display:block; }
    h1 { margin:0 0 10px; font-size:30px; text-align:center; }
    .lead { color:#667085; text-align:center; margin:0 0 26px; line-height:1.55; }
    form { display:grid; gap:16px; }
    label { display:grid; gap:7px; font-weight:650; font-size:14px; }
    input, button { width:100%; font:inherit; padding:13px 14px; border-radius:11px; }
    input { border:1px solid #d0d5dd; background:#fff; color:#101828; outline:none; }
    input:focus { border-color:#6366f1; box-shadow:0 0 0 4px #6366f11f; }
    button { cursor:pointer; border:0; color:#fff; font-weight:750; background:linear-gradient(135deg,#4f46e5,#2563eb); box-shadow:0 8px 20px #4f46e533; }
    button:hover { filter:brightness(1.04); }
    #message { min-height:24px; text-align:center; font-weight:650; }
    small { display:block; color:#667085; line-height:1.45; margin-top:18px; text-align:center; }
    .copyright { text-align:center; color:#98a2b3; font-size:12px; margin-top:18px; }
    @media(max-width:520px){ body{padding:18px 12px}.payment-card{padding:24px 18px;border-radius:18px}h1{font-size:25px} }

.subscriber-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.subscriber-row .secondary-button { width:auto; min-width:118px; color:#344054; background:#f2f4f7; border:1px solid #d0d5dd; box-shadow:none; }
.subscriber-row .secondary-button:hover { background:#e4e7ec; filter:none; }
button:disabled { cursor:not-allowed; opacity:.55; box-shadow:none; }
.subscriber-card { display:grid; gap:4px; padding:14px 16px; border:1px solid #a6f4c5; border-radius:12px; background:#ecfdf3; color:#05603a; }
.subscriber-card[hidden] { display:none; }
.subscriber-status { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.subscriber-card strong { font-size:16px; }
.subscriber-card span:last-child { color:#067647; font-size:13px; }
#message { color:#b42318; }
@media(max-width:520px){ .subscriber-row{grid-template-columns:1fr}.subscriber-row .secondary-button{width:100%} }

select { width:100%; font:inherit; padding:13px 42px 13px 14px; border-radius:11px; border:1px solid #d0d5dd; background:#fff; color:#101828; outline:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%); background-position:calc(100% - 18px) 52%,calc(100% - 12px) 52%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
select:focus { border-color:#6366f1; box-shadow:0 0 0 4px #6366f11f; }
select:disabled { background-color:#f2f4f7; color:#98a2b3; cursor:not-allowed; }
.tariff-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; border:1px solid #d6bbfb; border-radius:14px; background:#f9f5ff; }
.tariff-summary[hidden] { display:none; }
.tariff-summary div { display:grid; gap:4px; }
.tariff-summary span { color:#667085; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tariff-summary strong { color:#42307d; font-size:18px; }
@media(max-width:520px){ .tariff-summary{grid-template-columns:1fr} }