* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; color: #2d3748; background: #fafafa; }

.container { max-width: 800px; margin: 0 auto; padding: 32px 24px; }

.card { background: #fff; border: 1px solid #e8e4f0; border-radius: 12px; padding: 24px; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,127,199,0.08); }

.hero { text-align: center; margin-bottom: 24px; }
.hero h1 { font-size: 28px; font-weight: 700; color: #2d3748; margin-bottom: 4px; }
.hero .subtitle { color: #718096; font-size: 15px; }

.banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; margin-bottom: 24px; }
.banner p { font-size: 13px; margin-top: 2px; opacity: 0.85; }
.banner-icon { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.banner-success { background: rgba(104,211,145,0.12); border: 1px solid rgba(104,211,145,0.3); color: #276749; }
.banner-success .banner-icon { background: rgba(104,211,145,0.25); }
.banner-warning { background: rgba(245,198,170,0.2); border: 1px solid rgba(245,198,170,0.4); color: #9c4221; }
.banner-warning .banner-icon { background: rgba(245,198,170,0.35); }
.banner-error { background: rgba(252,129,129,0.12); border: 1px solid rgba(252,129,129,0.3); color: #c53030; padding: 14px 20px; font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.payment-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.payment-card h2 { font-size: 16px; font-weight: 600; }
.payment-card p { font-size: 13px; color: #718096; flex: 1; }

.price-tag { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #8b7fc7, #a78bfa); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.price-tag.small { background: linear-gradient(135deg, #9dd6c5, #6ee7b7); font-size: 15px; }
.price-tag.status { background: linear-gradient(135deg, #f5c6aa, #fbbf24); font-size: 22px; }

.btn { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #8b7fc7, color-mix(in srgb, #8b7fc7 95%, white)); color: white; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); background: #7c6fb8; }
.btn-secondary { background: #fff; border: 1px solid #e8e4f0; color: #2d3748; }
.btn-secondary:hover:not(:disabled) { border-color: #8b7fc7; color: #8b7fc7; }

.status-result { margin-top: 10px; padding: 12px; border-radius: 8px; font-size: 13px; width: 100%; text-align: left; background: #f7f7fb; border: 1px solid #e8e4f0; word-break: break-word; }
.status-result.ok { background: rgba(104,211,145,0.1); border-color: rgba(104,211,145,0.3); }
.status-result.off { background: rgba(252,129,129,0.1); border-color: rgba(252,129,129,0.3); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }
.spinner.dark { border-color: rgba(0,0,0,0.15); border-top-color: #8b7fc7; }
@keyframes spin { to { transform: rotate(360deg); } }