/* ==================== BaljuMate Login Page Styles ==================== */

.bg-visual-split {
    background-image:
        linear-gradient(rgba(30, 37, 74, 0.85), rgba(53, 84, 164, 0.6)),
        radial-gradient(circle at 20% 30%, rgba(53, 84, 164, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(10, 20, 50, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #1e254a 0%, #121a2e 100%);
    background-size: cover; background-position: center;
}
.data-stream-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.1) 1px, transparent 0);
    background-size: 40px 40px;
}
.primary-gradient-btn { background: linear-gradient(135deg, #3554a4 0%, #2a4388 100%); }
.glass-overlay { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); }
input:focus { outline: none; }
input[type="checkbox"] { cursor: pointer; }
input[type="checkbox"]:checked { background-color: #3554a4; border-color: #3554a4; }
.primary-gradient-btn:hover { box-shadow: 0 20px 25px -5px rgba(53, 84, 164, 0.3); }
a:hover { text-decoration: none; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.loading { pointer-events: none; opacity: 0.7; }
.loading .primary-gradient-btn::after {
    content: ''; display: inline-block; width: 16px; height: 16px;
    border: 2px solid transparent; border-top-color: white;
    border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 로그인 역할 선택 탭 */
.login-role-tab {
    flex: 1; padding: 0.75rem; text-align: center; cursor: pointer;
    border: 1px solid #d0d9f0; border-radius: 0.75rem; transition: all 0.2s;
    background: white;
}
.login-role-tab:hover { border-color: #3554a4; }
.login-role-tab.active {
    background: #3554a4; color: white; border-color: #3554a4;
    box-shadow: 0 6px 15px -3px rgba(53, 84, 164, 0.3);
}
.login-role-tab .role-icon { font-size: 22px !important; margin-bottom: 0.25rem; }
.login-role-tab .role-label { font-size: 12px; font-weight: 700; }
.login-role-tab .role-desc { font-size: 10px; color: #627BBD; margin-top: 2px; }
.login-role-tab.active .role-desc { color: rgba(255, 255, 255, 0.8); }