/* ============================================
   VALUEZ - Auth CSS (Login & Register)
   Split layout: brand-panel + form-panel
   ============================================ */

/* ==================== BODY OVERRIDE ==================== */
body.auth-page { display:flex; overflow:hidden; min-height:100vh; height:100vh; }
body.auth-page::before, body.auth-page::after { display:none; }

/* ==================== BRAND PANEL ==================== */
.brand-panel {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    position:relative; overflow:hidden; min-height:100vh;
    background:linear-gradient(160deg, #050816 0%, #071226 40%, #08152E 100%);
}
.brand-panel::before {
    content:''; position:absolute; top:-30%; left:-30%;
    width:160%; height:160%;
    background:
        radial-gradient(circle at 30% 40%, rgba(0,163,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0,225,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(123,97,255,0.04) 0%, transparent 40%);
    pointer-events:none;
}
.brand-panel::after {
    content:''; position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(0,163,255,0.25), transparent),
        radial-gradient(1px 1px at 35% 65%, rgba(0,225,255,0.2), transparent),
        radial-gradient(1px 1px at 65% 35%, rgba(123,97,255,0.18), transparent),
        radial-gradient(1px 1px at 85% 75%, rgba(0,255,198,0.12), transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(0,163,255,0.15), transparent),
        radial-gradient(1px 1px at 20% 80%, rgba(0,225,255,0.1), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(123,97,255,0.12), transparent);
    pointer-events:none;
    animation:particleDrift 25s ease-in-out infinite alternate;
}
@keyframes particleDrift {
    from { transform:translateY(0) translateX(0); }
    to { transform:translateY(-8px) translateX(4px); }
}

.brand-content { position:relative; z-index:1; text-align:center; padding:40px; }
.brand-logo {
    max-width:280px; width:80%; margin-bottom:40px;
    filter:drop-shadow(0 0 30px rgba(0,163,255,0.3));
    animation:logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
}
.brand-tagline {
    font-size:0.85rem; font-weight:300; color:#8EA3C7;
    letter-spacing:3px; text-transform:uppercase; margin-bottom:16px;
}
.brand-subtitle {
    font-size:0.72rem; color:#5F749B; letter-spacing:1px;
    max-width:320px; line-height:1.7;
}

/* ==================== FEATURES (Register) ==================== */
.features { display:flex; flex-direction:column; gap:16px; margin-top:40px; text-align:left; }
.feature-item {
    display:flex; align-items:center; gap:14px; padding:12px 16px;
    border-radius:10px; background:rgba(0,163,255,0.03);
    border:1px solid rgba(0,163,255,0.06);
}
.feature-icon {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature-icon svg { width:16px; height:16px; }
.feature-icon.blue { background:rgba(0,163,255,0.1); color:#00A3FF; }
.feature-icon.green { background:rgba(0,255,198,0.1); color:#00FFC6; }
.feature-icon.purple { background:rgba(123,97,255,0.1); color:#7B61FF; }
.feature-text { font-size:0.72rem; color:#8EA3C7; }

/* ==================== DECORATIVE CIRCLES ==================== */
.deco-circle {
    position:absolute; border-radius:50%;
    border:1px solid rgba(0,163,255,0.06); pointer-events:none;
}
.deco-circle-1 {
    width:400px; height:400px; top:-100px; left:-100px;
    animation:circleRotate 30s linear infinite;
}
.deco-circle-2 {
    width:300px; height:300px; bottom:-80px; right:-80px;
    border-color:rgba(123,97,255,0.06);
    animation:circleRotate 25s linear infinite reverse;
}
.deco-circle-3 {
    width:200px; height:200px; top:50%; left:50%;
    transform:translate(-50%, -50%);
    border-color:rgba(0,225,255,0.04);
    animation:circlePulse 8s ease-in-out infinite;
}
@keyframes circleRotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes circlePulse {
    0%, 100% { transform:translate(-50%, -50%) scale(1); opacity:0.5; }
    50% { transform:translate(-50%, -50%) scale(1.1); opacity:1; }
}

/* ==================== FORM PANEL ==================== */
.form-panel {
    width:480px; min-width:400px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:60px 50px; min-height:100vh;
    background:linear-gradient(180deg, #0B1730 0%, #0E1D3A 100%);
    border-left:1px solid rgba(0,163,255,0.06);
    position:relative; overflow:hidden;
}
.form-panel.register { padding:40px 50px; overflow-y:auto; }
.form-panel::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, rgba(0,163,255,0.3), transparent);
}
.form-panel::-webkit-scrollbar { width:4px; }
.form-panel::-webkit-scrollbar-track { background:transparent; }
.form-panel::-webkit-scrollbar-thumb { background:rgba(0,163,255,0.15); border-radius:2px; }

.form-wrapper { width:100%; max-width:340px; }
.form-header { margin-bottom:36px; }
.form-header h1 { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:8px; }
.form-header p { font-size:0.8rem; color:#5F749B; }
.form-header.register { margin-bottom:28px; }

/* Divider */
.divider { display:flex; align-items:center; gap:16px; margin:24px 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:rgba(0,163,255,0.08); }
.divider span { font-size:0.65rem; color:#5F749B; text-transform:uppercase; letter-spacing:1px; }

/* Footer link */
.form-footer { text-align:center; margin-top:28px; font-size:0.8rem; color:#5F749B; }
.form-footer a { color:#00A3FF; text-decoration:none; font-weight:600; transition:color 0.3s; }
.form-footer a:hover { color:#00E1FF; text-shadow:0 0 10px rgba(0,163,255,0.3); }

/* Row 2 col (Register) */
.row-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Mobile logo */
.mobile-logo { display:none; text-align:center; margin-bottom:32px; }
.mobile-logo img { width:160px; filter:drop-shadow(0 0 20px rgba(0,163,255,0.3)); }

/* ==================== SUCCESS OVERLAY ==================== */
.success-overlay {
    position:fixed; inset:0;
    background:rgba(5,8,22,0.95);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; animation:fadeIn 0.4s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.success-card {
    text-align:center; padding:50px 40px;
    background:linear-gradient(145deg, #0B1730, #0E1D3A);
    border:1px solid rgba(0,255,198,0.15); border-radius:20px;
    max-width:420px; width:90%;
    box-shadow:0 0 60px rgba(0,255,198,0.08);
    animation:scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    opacity:0;
}
@keyframes scaleIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.success-icon {
    width:70px; height:70px; border-radius:50%;
    background:rgba(0,255,198,0.08); border:2px solid rgba(0,255,198,0.3);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; color:#00FFC6;
    box-shadow:0 0 30px rgba(0,255,198,0.15);
}
.success-icon svg { width:30px; height:30px; }
.success-card h2 { font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:12px; }
.success-card p { font-size:0.82rem; color:#8EA3C7; line-height:1.6; margin-bottom:28px; }
.btn-success-link {
    display:inline-block; padding:14px 36px; border-radius:12px;
    background:linear-gradient(135deg, #00A3FF, #0080cc);
    color:#fff; font-size:0.88rem; font-weight:600; text-decoration:none;
    box-shadow:0 4px 25px rgba(0,163,255,0.25); transition:all 0.3s;
}
.btn-success-link:hover { transform:translateY(-2px); box-shadow:0 8px 35px rgba(0,163,255,0.35); color:#fff; }
.countdown-text { font-size:0.7rem; color:#5F749B; margin-top:16px; }

/* ==================== RESPONSIVE ==================== */
@media(max-width:900px) {
    .brand-panel { display:none; }
    .form-panel {
        width:100%; min-width:unset; border-left:none;
        background:linear-gradient(160deg, #050816 0%, #071226 40%, #0B1730 100%);
    }
    .mobile-logo { display:block; }
}
@media(max-width:480px) {
    .form-panel { padding:30px 24px; }
    .row-2col { grid-template-columns:1fr; }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
}
.animate-in { animation:fadeInUp 0.5s ease forwards; }
.delay-1 { animation-delay:0.05s; opacity:0; }
.delay-2 { animation-delay:0.1s; opacity:0; }
.delay-3 { animation-delay:0.15s; opacity:0; }
.delay-4 { animation-delay:0.2s; opacity:0; }
.delay-5 { animation-delay:0.25s; opacity:0; }
.delay-6 { animation-delay:0.3s; opacity:0; }