/* Reset any global styles for the login page */
.login-container {
    /* Use site-wide chudvision variables from :root (style.css); no animations */
    --accent-hover: #58c9ff; /* hover tint aligned with var(--accent) */
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin: 0 !important;
    padding: 20px !important;
    max-width: none !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

    .login-btn.loading .btn-content { opacity: 1; }
/* Override and enhance login card styles */
    /* Remove spinner */
    .login-btn.loading::after { display:none; }

    /* No keyframes needed */
.input-icon input:focus + .icon { color: var(--accent); transform: translateY(-50%); }

/* Add smooth transitions for all interactive elements */
.form-group,
.input-icon,
.login-btn,
.msg {
    will-change: transform, opacity;
}

/* Reset any global styles that might affect our login form */
.login-container form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-container .input-group {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px 0 !important;
}

/* Logo and Header */
.logo-container {
    text-align: center;
    margin-bottom: 12px;
}

/* Hide the icon above the title on login */
.logo-icon { display:none !important; }

.login-header {
    text-align: center;
    margin-bottom: 40px !important;
}

.login-header h2 {
    margin: 0 0 16px 0 !important;
    color: #ed0b69 !important; /* chud pink */
    font-size: 32px !important;
    font-weight: 900 !important;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
}

.login-header p {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Input Fields */
.input-group {
    margin-bottom: 20px;
}

.input-icon {
    position: relative;
}

.input-icon .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--muted);
    pointer-events: none;
}

.login-container .input-icon input {
    background: var(--glass) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 16px 16px 16px 48px !important;
    color: var(--text) !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.input-icon input:hover { border-color: rgba(237,11,105,0.25); background: var(--glass) !important; }

.input-icon input:focus { outline: none; border-color: #ed0b69; background: var(--glass) !important; box-shadow: 0 0 0 3px rgba(237,11,105,0.15); }

/* Submit Button */
.login-container .login-btn { width:100% !important; padding:16px 32px !important; font-size:16px !important; font-weight:600 !important; border-radius: var(--radius) !important; background: #ed0b69 !important; color:#ffffff !important; border:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; transition: background-color .15s ease !important; max-width:none !important; }

.login-btn:hover { background: #ff2c82; }

/* No active transform/shadow */

.btn-content {
    z-index: 1;
}

.btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Message Display */
.msg {
    text-align: center;
    min-height: 24px;
    margin-top: 16px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Success/Error States */
.msg.success {
    color: #34d399;
}

.msg.error {
    color: #f87171;
}

/* Loading State */
.login-btn.loading {
    cursor: wait;
    background: var(--panel);
    transform: none;
    box-shadow: 0 0 0 1px var(--border) inset;
}

.login-btn.loading .btn-content { opacity: 1; }

.login-btn.loading::after { display: none; }

@keyframes buttonLoad {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.msg { text-align:center; min-height:24px; margin-top:20px; padding:8px 16px; font-weight:500; font-size:14px; border-radius:12px; }

.msg.success {
    color: var(--success);
    background: rgba(0, 200, 83, 0.1);
}

.msg.error {
    color: var(--error);
    background: rgba(255, 69, 69, 0.1);
}

/* Space between inputs and the submit button */
.login-container .actions { display:block !important; margin-top: 14px !important; }