/* CSS Reset & Variables */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --brand-primary: #377dff;
     --brand-primary-hover: #538bf4;
     --brand-primary-dark: #1c67f2;
     --brand-primary-light: rgba(55, 125, 255, 0.12);
     --brand-primary-glow: rgba(55, 125, 255, 0.28);
     --text-main: #0f172a;
     --text-muted: #64748b;
     --text-light: #94a3b8;
     --bg-page: #f8fafc;
     --bg-surface: #ffffff;
     --border-color: #e2e8f0;
     --border-focus: #377dff;
     --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     --radius-md: 10px;
     --radius-lg: 14px;
     --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }

 body {
     font-family: var(--font-family);
     color: var(--text-main);
     background-color: var(--bg-page);
     min-height: 100vh;
     display: flex;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
 }

 /* Split Screen Container */
 .login-layout {
     display: flex;
     width: 100vw;
     min-height: 100vh;
     position: relative;
 }

 /* Left Side: Form Section */
 .login-left-section {
     flex: 1 1 50%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 32px 48px;
     background: #ffffff;
     position: relative;
     z-index: 2;
     min-height: 100vh;
     overflow-y: auto;
 }

 @media (min-width: 1400px) {
     .login-left-section {
         padding: 40px 72px;
         flex: 0 0 46%;
         max-width: 46%;
     }
 }

 /* Top Brand Navigation */
 .brand-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 24px;
 }

 .brand-logo-wrap {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .brand-logo-img {
     max-height: 44px;
     width: auto;
     object-fit: contain;
     display: block;
 }

 .admin-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     color: var(--brand-primary);
     background-color: var(--brand-primary-light);
     padding: 5px 12px;
     border-radius: 9999px;
     border: 1px solid rgba(99, 171, 69, 0.2);
     letter-spacing: 0.02em;
 }

 .admin-badge .badge-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--brand-primary);
     box-shadow: 0 0 0 2px rgba(99, 171, 69, 0.3);
     animation: pulse-dot 2s infinite ease-in-out;
 }

 @keyframes pulse-dot {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.7;
     }
 }

 /* Center Content Wrapper */
 .login-center-wrapper {
     width: 100%;
     max-width: 420px;
     margin: auto;
     padding: 24px 0;
 }

 .form-header {
     margin-bottom: 28px;
     text-align: left;
 }

 .form-greeting {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--brand-primary);
     margin-bottom: 8px;
 }

 .form-title {
     font-size: 28px;
     font-weight: 700;
     color: var(--text-main);
     letter-spacing: -0.025em;
     line-height: 1.25;
     margin-bottom: 8px;
 }

 .form-subtitle {
     font-size: 14px;
     color: var(--text-muted);
     line-height: 1.5;
 }

 /* Form Controls */
 .form-group {
     margin-bottom: 20px;
     position: relative;
 }

 .label-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
 }

 label.form-label {
     display: block;
     font-size: 13.5px;
     font-weight: 600;
     color: #334155;
     letter-spacing: -0.01em;
     margin-bottom: 8px;
 }

 .forgot-link {
     font-size: 13px;
     font-weight: 600;
     color: var(--brand-primary);
     text-decoration: none;
     transition: var(--transition);
 }

 .forgot-link:hover {
     color: var(--brand-primary-dark);
     text-decoration: underline;
     text-underline-offset: 3px;
 }

 /* Input with Icon Wrapper */
 .input-icon-group {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
 }

 .input-icon-group .input-icon {
     position: absolute;
     left: 14px;
     color: var(--text-light);
     font-size: 16px;
     pointer-events: none;
     transition: var(--transition);
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .custom-input {
     width: 100%;
     height: 46px;
     padding: 10px 14px 10px 42px; 
     border: 1.5px solid var(--border-color);
     border-radius: var(--radius-md);
     font-family: inherit;
     font-size: 14px;
     color: var(--text-main);
     outline: none;
     transition: var(--transition);
 }

 .custom-input.has-toggle {
     padding-right: 44px;
 }

 .custom-input::placeholder {
     color: #94a3b8;
     font-size: 13.5px;
 }

 .custom-input:focus {
     background-color: #ffffff;
     border-color: var(--brand-primary);
     box-shadow: 0 0 0 3.5px var(--brand-primary-glow);
 }

 .custom-input.is-invalid {
     border-color: #ef4444;
     background-color: #fffafb;
 }

 .custom-input.is-invalid:focus {
     border-color: #ef4444;
     box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.2);
 }

 .input-icon-group:focus-within .input-icon {
     color: var(--brand-primary);
 }

 /* Password Toggle Button */
 .toggle-password-btn {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     padding: 6px 8px;
     color: var(--text-light);
     cursor: pointer;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     transition: var(--transition);
     z-index: 4;
 }

 .toggle-password-btn:hover {
     color: var(--text-main);
     background-color: #e2e8f0;
 }

 /* Remember Me & Checkbox */
 .form-options-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 22px;
 }

 .custom-checkbox-label {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     font-size: 13.5px;
     font-weight: 500;
     color: #475569;
     user-select: none;
 }

 .custom-checkbox-label input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border: 1.5px solid #cbd5e1;
     border-radius: 5px;
     background: #ffffff;
     cursor: pointer;
     position: relative;
     margin: 0;
     transition: var(--transition);
     display: grid;
     place-content: center;
 }

 .custom-checkbox-label input[type="checkbox"]:hover {
     border-color: var(--brand-primary);
 }

 .custom-checkbox-label input[type="checkbox"]:checked {
     background-color: var(--brand-primary);
     border-color: var(--brand-primary);
 }

 .custom-checkbox-label input[type="checkbox"]::before {
     content: "";
     width: 5px;
     height: 9px;
     border: solid #ffffff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg) translate(-1px, -1px);
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }

 .custom-checkbox-label input[type="checkbox"]:checked::before {
     opacity: 1;
 }

 /* Sign In Button */
 .btn-submit-login {
     width: 100%;
     height: 48px;
     background: linear-gradient(135deg, #377dff 0%, #2a66d0 100%);
     color: #ffffff;
     border: none;
     border-radius: var(--radius-md);
     font-family: inherit;
     font-size: 15px;
     font-weight: 600;
     letter-spacing: -0.01em;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     box-shadow: 0 4px 14px rgba(55, 125, 255, 0.35);
     transition: var(--transition);
 }

 .btn-submit-login:hover {
     background: linear-gradient(135deg, #2969f7 0%, #1c67f2 100%);
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(55, 125, 255, 0.45);
 }

 .btn-submit-login:active {
     transform: translateY(0);
     box-shadow: 0 2px 8px rgba(99, 171, 69, 0.3);
 }

 .btn-submit-login i {
     font-size: 16px;
     transition: transform 0.2s ease;
 }

 .btn-submit-login:hover i {
     transform: translateX(3px);
 }

 /* Alerts & Error feedback */
 .custom-alert {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     border-radius: var(--radius-md);
     font-size: 13.5px;
     margin-bottom: 20px;
     animation: fadeInAlert 0.3s ease;
 }

 @keyframes fadeInAlert {
     from {
         opacity: 0;
         transform: translateY(-6px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .custom-alert-danger {
     background-color: #fef2f2;
     border: 1px solid #fecaca;
     color: #b91c1c;
 }

 .custom-alert-success {
     background-color: #f0fdf4;
     border: 1px solid #bbf7d0;
     color: #15803d;
 }

 .custom-alert i {
     font-size: 18px;
     flex-shrink: 0;
 }

 .field-feedback-error {
     display: block;
     margin-top: 6px;
     font-size: 12.5px;
     font-weight: 500;
     color: #dc2626;
 }

 /* Demo credentials card */
 .demo-credentials-card {
     background-color: #f0fdf4;
     border: 1px dashed #86efac;
     border-radius: var(--radius-md);
     padding: 12px 16px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 13px;
     color: #166534;
 }

 .demo-copy-btn {
     background-color: #22c55e;
     color: #ffffff;
     border: none;
     padding: 5px 10px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
 }

 .demo-copy-btn:hover {
     background-color: #16a34a;
 }

 /* Footer Copyright */
 .login-footer {
     padding-top: 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 13px;
     color: var(--text-light);
     border-top: 1px solid #f1f5f9;
 }

 .login-footer-security {
     display: flex;
     align-items: center;
     gap: 6px;
     color: #64748b;
     font-weight: 500;
 }

 .login-footer-security i {
     color: var(--brand-primary);
     font-size: 14px;
 }

 /* Right Side: Hero Banner Section */
 .login-right-section {
     flex: 1 1 50%;
     position: relative;
     background-color: #0f172a;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 48px;
 }

 @media (min-width: 1400px) {
     .login-right-section {
         flex: 0 0 54%;
         max-width: 54%;
         padding: 60px;
     }
 }

 .banner-bg-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     z-index: 1;
     transform: scale(1.02);
     transition: transform 10s ease;
 }

 .login-right-section:hover .banner-bg-img {
     transform: scale(1.06);
 }

 /* Gradient Overlay */
 .banner-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg,
             rgba(15, 23, 42, 0.25) 0%,
             rgba(15, 23, 42, 0.45) 50%,
             rgba(15, 23, 42, 0.90) 100%);
     z-index: 2;
 }

 /* Floating Top Badge on Right */
 .banner-top-badge {
     position: relative;
     z-index: 3;
     align-self: flex-end;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 9999px;
     color: #ffffff;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.02em;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .banner-top-badge i {
     color: #ffd166;
 }

 /* Bottom Glass Card on Right */
 .banner-content-box {
     position: relative;
     z-index: 3;
     background: rgba(15, 23, 42, 0.55);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: var(--radius-lg);
     padding: 32px 36px;
     color: #ffffff;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     max-width: 600px;
 }

 .banner-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 12px;
     background: rgba(99, 171, 69, 0.3);
     border: 1px solid rgba(99, 171, 69, 0.5);
     border-radius: 9999px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: #a3e635;
     margin-bottom: 14px;
 }

 .banner-title {
     font-size: 26px;
     font-weight: 700;
     line-height: 1.35;
     margin-bottom: 12px;
     color: #ffffff;
     letter-spacing: -0.02em;
 }

 .banner-description {
     font-size: 14.5px;
     line-height: 1.6;
     color: #cbd5e1;
     margin-bottom: 22px;
 }

 .banner-feature-list {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .banner-feature-tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 12px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 8px;
     font-size: 12.5px;
     font-weight: 500;
     color: #f1f5f9;
 }

 .banner-feature-tag i {
     color: #4ade80;
     font-size: 13px;
 }

 /* Responsive Breakpoints */
 @media (max-width: 991px) {
     .login-right-section {
         display: none;
     }

     .login-left-section {
         flex: 1 1 100%;
         max-width: 100%;
         padding: 24px 20px;
         justify-content: center;
     }

     .login-center-wrapper {
         padding: 20px 0;
     }

     .login-footer {
         margin-top: 20px;
     }
 }

 /* Merged Captcha Group */
 .captcha-input-group {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
     height: 48px;
     border: 1.5px solid var(--border-color);
     border-radius: var(--radius-md);
     background-color: #ffffff;
     overflow: hidden;
     transition: var(--transition);
 }

 .captcha-input-group:focus-within {
     border-color: var(--brand-primary);
     box-shadow: 0 0 0 3.5px var(--brand-primary-glow);
 }

 .captcha-input-group.is-invalid,
 .captcha-input-group:has(.is-invalid) {
     border-color: #ef4444;
     background-color: #fffafb;
 }

 .captcha-input-group.is-invalid:focus-within,
 .captcha-input-group:has(.is-invalid):focus-within {
     box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.2);
 }

 .captcha-input-group .input-icon {
     position: absolute;
     left: 14px;
     color: var(--text-light);
     font-size: 16px;
     pointer-events: none;
     transition: var(--transition);
     z-index: 2;
 }

 .captcha-input-group:focus-within .input-icon {
     color: var(--brand-primary);
 }

 .captcha-input-group input.captcha-input {
     flex: 1;
     min-width: 0;
     height: 100%;
     padding: 10px 10px 10px 42px;
     border: none;
     background: transparent;
     font-family: inherit;
     font-size: 14px;
     color: var(--text-main);
     outline: none;
 }

 .captcha-input-group input.captcha-input::placeholder {
     color: #94a3b8;
     font-size: 13.5px;
 }

 .captcha-input-group .captcha-addon {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     height: 100%;
     padding: 4px 6px 4px 8px;
     background: #f8fafc;
     border-left: 1.5px solid var(--border-color);
     flex-shrink: 0;
 }

 .captcha-input-group .captcha-img {
     height: 36px;
     width: auto;
     border-radius: 4px;
     display: block;
     user-select: none;
 }

 .captcha-input-group .captcha-refresh-btn {
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #ffffff;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     color: var(--brand-primary);
     cursor: pointer;
     font-size: 16px;
     transition: var(--transition);
     text-decoration: none;
 }

 .captcha-input-group .captcha-refresh-btn:hover {
     background: #f1f5f9;
     color: var(--brand-primary-dark);
     transform: rotate(90deg);
 }