*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --blue-900: #0a1f44;
     --blue-800: #0d2d6b;
     --blue-700: #1044a3;
     --blue-500: #1a6fd4;
     --blue-400: #3b8fe8;
     --blue-200: #a8ccf5;
     --blue-100: #daeafc;
     --blue-50: #eef5fd;
     --white: #ffffff;
     --shadow: 0 20px 60px rgba(10, 31, 68, 0.18);
 }

 html,
 body {
     height: 100%;
 }

 body {
     font-family: 'DM Sans', sans-serif;
     background-color: var(--blue-900);
     overflow: hidden;
     position: relative;
 }

 /* ─── Animated background ─── */
 .bg-scene {
     position: fixed;
     inset: 0;
     background: linear-gradient(135deg, var(--blue-900) 0%, #0e2d6e 50%, #07193a 100%);
     z-index: 0;
     overflow: hidden;
 }

 .bg-scene::before {
     content: '';
     position: absolute;
     top: -30%;
     right: -10%;
     width: 65vw;
     height: 65vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(26, 111, 212, 0.18) 0%, transparent 70%);
     animation: pulse-glow 6s ease-in-out infinite alternate;
 }

 .bg-scene::after {
     content: '';
     position: absolute;
     bottom: -20%;
     left: -10%;
     width: 50vw;
     height: 50vw;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(59, 143, 232, 0.12) 0%, transparent 70%);
     animation: pulse-glow 8s ease-in-out infinite alternate-reverse;
 }

 @keyframes pulse-glow {
     from {
         transform: scale(1);
         opacity: 0.8;
     }

     to {
         transform: scale(1.15);
         opacity: 1;
     }
 }

 /* Floating water ripple dots */
 .ripple-field {
     position: absolute;
     inset: 0;
     pointer-events: none;
 }

 .ripple {
     position: absolute;
     border-radius: 50%;
     border: 1.5px solid rgba(168, 204, 245, 0.12);
     animation: ripple-expand 8s ease-out infinite;
 }

 .ripple:nth-child(1) {
     width: 120px;
     height: 120px;
     top: 15%;
     left: 8%;
     animation-delay: 0s;
 }

 .ripple:nth-child(2) {
     width: 80px;
     height: 80px;
     top: 65%;
     left: 75%;
     animation-delay: 2s;
 }

 .ripple:nth-child(3) {
     width: 200px;
     height: 200px;
     top: 40%;
     left: 50%;
     animation-delay: 4s;
     opacity: 0.5;
 }

 .ripple:nth-child(4) {
     width: 60px;
     height: 60px;
     top: 80%;
     left: 20%;
     animation-delay: 6s;
 }

 .ripple:nth-child(5) {
     width: 150px;
     height: 150px;
     top: 5%;
     left: 60%;
     animation-delay: 1s;
 }

 @keyframes ripple-expand {
     0% {
         transform: scale(0.5);
         opacity: 0;
     }

     30% {
         opacity: 1;
     }

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

 /* ─── Layout ─── */
 .page-wrapper {
     position: relative;
     z-index: 1;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 /* ─── Left panel ─── */
 .left-panel {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 60px 56px;
     animation: slide-in-left 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
 }

 @keyframes slide-in-left {
     from {
         opacity: 0;
         transform: translateX(-40px);
     }

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

 .brand-mark {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 64px;
 }

 .logo-icon {
     width: 54px;
     height: 54px;
     background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 24px rgba(26, 111, 212, 0.4);
     flex-shrink: 0;
 }

 .logo-icon svg {
     width: 30px;
     height: 30px;
 }

 .brand-name {
     display: flex;
     flex-direction: column;
 }

 .brand-name span:first-child {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: 1.25rem;
     color: var(--white);
     letter-spacing: -0.02em;
     line-height: 1;
 }

 .brand-name span:last-child {
     font-size: 0.72rem;
     font-weight: 400;
     color: var(--blue-200);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     margin-top: 3px;
 }

 .hero-headline {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(2rem, 3.2vw, 3rem);
     color: var(--white);
     line-height: 1.12;
     letter-spacing: -0.03em;
     margin-bottom: 20px;
 }

 .hero-headline .accent {
     color: var(--blue-400);
     position: relative;
 }

 .hero-sub {
     font-size: 0.97rem;
     line-height: 1.7;
     color: var(--blue-200);
     max-width: 380px;
     margin-bottom: 48px;
 }

 .feature-pills {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .pill {
     display: flex;
     align-items: center;
     gap: 14px;
     animation: fade-up 0.6s ease both;
 }

 .pill:nth-child(1) {
     animation-delay: 0.3s;
 }

 .pill:nth-child(2) {
     animation-delay: 0.5s;
 }

 .pill:nth-child(3) {
     animation-delay: 0.7s;
 }

 @keyframes fade-up {
     from {
         opacity: 0;
         transform: translateY(16px);
     }

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

 .pill-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: rgba(59, 143, 232, 0.15);
     border: 1px solid rgba(59, 143, 232, 0.25);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .pill-icon svg {
     width: 18px;
     height: 18px;
     color: var(--blue-400);
 }

 .pill-text {
     font-size: 0.88rem;
     color: var(--blue-100);
     font-weight: 400;
 }

 /* ─── Right panel (card) ─── */
 .right-panel {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px 56px;
     animation: slide-in-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
 }

 @keyframes slide-in-right {
     from {
         opacity: 0;
         transform: translateX(40px);
     }

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

 .login-card {
     background: var(--white);
     border-radius: 28px;
     padding: 50px 46px;
     width: 100%;
     max-width: 440px;
     box-shadow: var(--shadow);
 }

 .card-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: var(--blue-50);
     border: 1px solid var(--blue-100);
     border-radius: 100px;
     padding: 5px 14px;
     font-size: 0.73rem;
     font-weight: 500;
     color: var(--blue-700);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     margin-bottom: 20px;
 }

 .card-badge .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--blue-500);
 }

 .card-title {
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 1.6rem;
     color: var(--blue-900);
     letter-spacing: -0.03em;
     line-height: 1.2;
     margin-bottom: 6px;
 }

 .card-sub {
     font-size: 0.875rem;
     color: #6b84a4;
     margin-bottom: 36px;
 }

 /* Alert */
 .alert-success-custom {
     background: #eef9f0;
     border: 1px solid #b6e4be;
     border-radius: 10px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.85rem;
     color: #1d6a34;
     margin-bottom: 24px;
 }

 /* Form */
 .field-group {
     margin-bottom: 22px;
 }

 .field-label {
     display: block;
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--blue-900);
     letter-spacing: 0.04em;
     text-transform: uppercase;
     margin-bottom: 8px;
 }

 .field-wrap {
     position: relative;
 }

 .field-icon {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #94adc8;
     display: flex;
 }

 .field-icon svg {
     width: 17px;
     height: 17px;
 }

 .form-input {
     width: 100%;
     padding: 13px 16px 13px 44px;
     border: 1.5px solid var(--blue-100);
     border-radius: 12px;
     font-family: 'DM Sans', sans-serif;
     font-size: 0.93rem;
     color: var(--blue-900);
     background: var(--blue-50);
     outline: none;
     transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
 }

 .form-input::placeholder {
     color: #b0c4d8;
 }

 .form-input:focus {
     border-color: var(--blue-500);
     background: var(--white);
     box-shadow: 0 0 0 4px rgba(26, 111, 212, 0.1);
 }

 .form-input.is-invalid {
     border-color: #e05252;
 }

 .invalid-feedback {
     font-size: 0.78rem;
     color: #e05252;
     margin-top: 5px;
     display: block;
 }

 /* Submit button */
 .btn-login {
     width: 100%;
     padding: 14px;
     background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
     color: var(--white);
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 0.97rem;
     letter-spacing: 0.04em;
     border: none;
     border-radius: 13px;
     cursor: pointer;
     transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
     box-shadow: 0 8px 24px rgba(26, 111, 212, 0.35);
     margin-top: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .btn-login:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 30px rgba(26, 111, 212, 0.45);
     opacity: 0.95;
 }

 .btn-login:active {
     transform: translateY(0);
 }

 .btn-login svg {
     width: 18px;
     height: 18px;
 }

 /* Forgot password */
 .forgot-wrap {
     text-align: center;
     margin-top: 20px;
     font-size: 0.85rem;
     color: #7a95b0;
 }

 .forgot-wrap a {
     color: var(--blue-500);
     font-weight: 600;
     text-decoration: none;
     transition: color 0.15s;
 }

 .forgot-wrap a:hover {
     color: var(--blue-700);
 }

 /* Divider */
 .divider {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 24px 0 0;
 }

 .divider-line {
     flex: 1;
     height: 1px;
     background: var(--blue-100);
 }

 .divider-text {
     font-size: 0.75rem;
     color: #aec0d4;
     white-space: nowrap;
 }

 /* Responsive */
 @media (max-width: 860px) {
     .page-wrapper {
         grid-template-columns: 1fr;
     }

     .left-panel {
         display: none;
     }

     .right-panel {
         padding: 24px 20px;
     }

     .login-card {
         padding: 36px 28px;
     }
 }

 .alert-error-custom {
     background: #fff0f0;
     border: 1px solid #f5c2c2;
     border-radius: 10px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.85rem;
     color: #b91c1c;
     margin-bottom: 24px;
 }

 .back-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 0.8rem;
     font-weight: 600;
     color: #6b84a4;
     text-decoration: none;
     margin-bottom: 20px;
     transition: color 0.15s;
 }

 .back-link:hover {
     color: var(--blue-500);
 }

 .back-link svg {
     width: 15px;
     height: 15px;
 }