/* ==========================================================
   Source: student/student-login.php | style block 1
   ========================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #f0f4f8; min-height: 100vh; margin: 0; padding: 0; }
        .auth-container { width: 100%; min-height: 100vh; display: flex; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.05); }
        .image-section { flex: 1; background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center center/cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .image-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(120,10,10,0.80), rgba(200,30,30,0.65)); backdrop-filter: blur(2px); }
        .image-content { position: relative; z-index: 2; text-align: center; color: white; padding: 2rem; max-width: 400px; animation: fadeInUp 0.8s ease; }
        .image-content i { font-size: 5rem; margin-bottom: 1.5rem; display: block; text-shadow: 0 4px 20px rgba(0,0,0,0.3); background: linear-gradient(135deg, #fff, #ffd6d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .image-content h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.5px; }
        .image-content p { font-size: 1.1rem; line-height: 1.6; opacity: 0.95; font-weight: 400; }
        .form-section { flex: 1; padding: 3rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: #ffffff; box-shadow: -8px 0 30px rgba(0,0,0,0.03); }
        .signin-title { font-size: 2.2rem; font-weight: 800; background: linear-gradient(120deg, #1e293b, #b91c1c); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.3px; margin-bottom: 2rem; }
        .signin-title i { background: none; -webkit-background-clip: unset; background-clip: unset; color: #b91c1c; margin-right: 8px; }
        .form-container { width: 100%; }
        .global-error { background: #fee2e2; border-left: 4px solid #dc2626; padding: 0.75rem 1rem; border-radius: 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; font-weight: 500; color: #991b1b; }
        .global-error i { font-size: 1.1rem; }
        .global-error.hidden { display: none; }
        .global-success { background: #dcfce7; border-left-color: #10b981; color: #065f46; }
        .input-group { margin-bottom: 1.5rem; }
        .input-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.85rem; color: #1e293b; margin-bottom: 0.5rem; }
        .input-label i { color: #b91c1c; }
        .input-field-wrapper { position: relative; display: flex; align-items: center; }
        .input-field-wrapper > i { position: absolute; left: 1rem; color: #94a3b8; font-size: 1rem; pointer-events: none; z-index: 1; }
        .input-field-wrapper input { width: 100%; padding: 0.9rem 3rem 0.9rem 2.7rem; font-size: 0.95rem; border: 1.5px solid #e2e8f0; border-radius: 1rem; font-family: 'Inter', sans-serif; font-weight: 500; background: #fefefe; transition: all 0.3s ease; color: #0f172a; }
        .input-field-wrapper input::placeholder { color: #cbd5e1; }
        .input-field-wrapper input:focus { outline: none; border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,0.2); background: white; }
        .input-field-wrapper input.error-border { border-color: #dc2626; background: #fff5f5; }
        .password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; color: #94a3b8; font-size: 1.1rem; padding: 0; display: flex; align-items: center; transition: color 0.2s; z-index: 2; }
        .password-toggle:hover { color: #b91c1c; }
        .inline-error { font-size: 0.7rem; font-weight: 500; margin-top: 0.45rem; margin-left: 0.6rem; color: #dc2626; display: flex; align-items: center; gap: 0.3rem; }
        .inline-error i { font-size: 0.65rem; }
        .inline-error.hidden { display: none; }
        .forgot-password-row { display: flex; justify-content: flex-end; margin-top: 0.25rem; margin-bottom: 0.5rem; }
        .forgot-password { font-size: 0.75rem; font-weight: 500; color: #b91c1c; text-decoration: none; transition: color 0.2s; cursor: pointer; }
        .forgot-password:hover { color: #7f1d1d; text-decoration: underline; }
        .signin-btn { width: 100%; background: linear-gradient(95deg, #b91c1c, #dc2626); border: none; padding: 1rem; border-radius: 1rem; font-weight: 700; font-size: 1rem; color: white; display: flex; align-items: center; justify-content: center; gap: 0.6rem; cursor: pointer; transition: all 0.3s ease; margin-top: 0.5rem; margin-bottom: 1rem; box-shadow: 0 8px 20px rgba(185,28,28,0.3); font-family: 'Inter', sans-serif; }
        .signin-btn:hover { background: linear-gradient(95deg, #7f1d1d, #b91c1c); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(185,28,28,0.4); }
        .signin-btn:active { transform: translateY(0); }
        .signin-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; }
        .back-dashboard-btn { width: 100%; background: white; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: #475569; display: flex; align-items: center; justify-content: center; gap: 0.6rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Inter', sans-serif; margin-top: 0.5rem; text-decoration: none; border: 1px solid #e2e8f0; }
        .back-dashboard-btn i { font-size: 0.9rem; color: #64748b; }
        .back-dashboard-btn:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .logout-link { text-align: center; margin-top: 1rem; font-size: 0.85rem; }
        .logout-link a { color: #b91c1c; text-decoration: none; font-weight: 500; }
        .logout-link a:hover { text-decoration: underline; }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 992px) {
            .auth-container { flex-direction: column; min-height: 100vh; }
            .image-section { min-height: 300px; padding: 2rem; }
            .image-content h1 { font-size: 2rem; }
            .image-content p { font-size: 1rem; }
            .image-content i { font-size: 4rem; }
            .form-section { padding: 2.5rem 2rem; min-height: auto; }
            .signin-title { font-size: 1.8rem; }
        }
        @media (max-width: 768px) {
            .image-section { min-height: 250px; padding: 1.8rem; }
            .image-content h1 { font-size: 1.8rem; }
            .image-content p { font-size: 0.95rem; }
            .image-content i { font-size: 3.5rem; }
            .form-section { padding: 2rem 1.5rem; }
            .signin-title { font-size: 1.6rem; }
        }
        @media (max-width: 480px) {
            .image-section { min-height: 200px; padding: 1.2rem; }
            .image-content h1 { font-size: 1.4rem; }
            .image-content p { font-size: 0.85rem; }
            .image-content i { font-size: 2.8rem; margin-bottom: 0.8rem; }
            .form-section { padding: 1.5rem 1rem; }
            .signin-title { font-size: 1.3rem; }
            .input-field-wrapper input { padding: 0.8rem 2.8rem 0.8rem 2.5rem; font-size: 16px; }
            .password-toggle { right: 0.8rem; }
            .signin-btn { padding: 0.85rem; font-size: 0.9rem; }
            .back-dashboard-btn { padding: 0.75rem; font-size: 0.8rem; }
        }
        @media (max-width: 360px) {
            .image-section { min-height: 170px; padding: 1rem; }
            .image-content h1 { font-size: 1.2rem; }
            .image-content p { font-size: 0.75rem; }
            .image-content i { font-size: 2.2rem; margin-bottom: 0.5rem; }
            .form-section { padding: 1rem 0.8rem; }
            .signin-title { font-size: 1.1rem; }
            .input-field-wrapper input { padding: 0.7rem 2.5rem 0.7rem 2.2rem; font-size: 14px; }
            .input-label { font-size: 0.75rem; }
        }