.auth-page { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: calc(100vh - var(--header-h) - 100px);
}

.auth-card { 
    width: 100%; 
    max-width: 440px; 
    padding: 48px; 
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-heavy);
}

.auth-logo { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 32px; 
}

.auth-switch { 
    text-align: center; 
    margin-top: 24px; 
    color: var(--text-muted); 
    font-weight: 700;
    font-size: 0.9rem;
}
.auth-switch a { color: var(--primary); }


.pricing-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-top: 32px; 
}

.pricing-card { 
    position: relative; 
    background: #fff; 
    border: 1px solid var(--border); 
    border-radius: var(--radius-xl); 
    padding: 32px; 
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--primary); 
    box-shadow: var(--shadow-heavy); 
}

.pricing-card.active-pkg { 
    border-color: var(--success); 
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); 
}

.pricing-header { margin-bottom: 24px; }
.pricing-header h4 { font-size: 1.25rem; font-weight: 900; margin-bottom: 8px; }
.pricing-header .price { font-weight: 900; font-size: 1.75rem; color: var(--text-main); }
.pricing-header .price small { font-size: 0.9rem; color: var(--text-muted); }

.pricing-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
.pricing-features li { 
    display: flex; 
    gap: 12px; 
    align-items: center; 
    color: var(--text-muted); 
    margin-bottom: 14px; 
    font-weight: 600;
    font-size: 0.95rem;
}
.pricing-features li svg { color: var(--success); }

.active-badge { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    background: var(--success); 
    color: #fff; 
    padding: 5px 12px; 
    border-radius: 8px; 
    font-size: 0.7rem; 
    font-weight: 900; 
    text-transform: uppercase;
}


.pay-container { 
    max-width: 720px; 
    margin: 60px auto; 
    background: #fff; 
    border-radius: var(--radius-xl); 
    padding: 48px; 
    border: 1px solid var(--border); 
    box-shadow: var(--shadow-heavy); 
}


.text-center { text-align: center; }
.mt-4 { margin-top: 24px; }
.mb-4 { margin-bottom: 24px; }