:root {
     --primary: #002787;
     --secondary: #2196f3;
     --text: #1f2937;
     --muted: #6b7280;
     --white: #ffffff;
     --border: #dbe2ea;
     --shadow: 0 22px 50px rgba(8, 33, 89, 0.24);
     --radius: 16px;
     --glass-blue: rgba(68, 126, 196, 0.28);
     --glass-blue-strong: rgba(84, 142, 214, 0.38);
     --glass-panel: rgba(255, 255, 255, 0.52);
     --glass-border: rgba(255, 255, 255, 0.36);
     --glass-highlight: rgba(255, 255, 255, 0.62);
}

* {
     box-sizing: border-box;
}

body {
     margin: 0;
     font-family: 'Poppins', sans-serif;
     color: var(--text);
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     position: relative;
}

body::before {
     content: "";
     position: fixed;
     inset: 0;
     background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 24%),
          radial-gradient(circle at bottom right, rgba(122, 177, 255, 0.18), transparent 28%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(31, 97, 181, 0.08));
     pointer-events: none;
}

.login-page {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
}

.login-card {
     width: 100%;
     max-width: 1140px;
     min-height: 620px;
     display: flex;
     overflow: hidden;
     border-radius: var(--radius);
     background: linear-gradient(180deg, rgba(208, 227, 251, 0.60), rgba(181, 209, 244, 0.42));
     border: 1px solid rgba(255, 255, 255, 0.42);
     box-shadow: var(--shadow);
     backdrop-filter: blur(22px) saturate(155%);
     -webkit-backdrop-filter: blur(22px) saturate(155%);
     position: relative;
}

.login-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
     pointer-events: none;
}

.login-visual {
     width: 50%;
     min-height: 620px;
     background-color: #e9eefb;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
}

.login-visual-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(30, 41, 59, 0.20), rgba(84, 47, 143, 0.55));
     display: flex;
     align-items: end;
     padding: 36px;
}

.visual-content h1 {
     margin: 0 0 10px;
     font-size: 32px;
     font-weight: 600;
     color: #fff;
}

.visual-content p {
     margin: 0;
     font-size: 15px;
     color: rgba(255, 255, 255, 0.92);
     line-height: 1.6;
}

.login-form-panel {
     width: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px;
     background: transparent;
     position: relative;
}

.login-form-box {
     width: 100%;
     max-width: 400px;
     padding: 10px 4px;
     border-radius: 0;
     background: transparent;
     border: 0;
     box-shadow: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
}

.login-logo {
     width: 110px;
     max-width: 100%;
     height: auto;
     margin-bottom: 16px;
}

.login-title {
     margin-bottom: 24px;
     font-size: 28px;
     font-weight: 600;
     color: var(--primary);
}

.role-switcher {
     display: flex;
     gap: 10px;
     margin-bottom: 24px;
     flex-wrap: wrap;
     justify-content: center;
}

.role-btn {
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.34);
     color: var(--text);
     border-radius: 10px;
     padding: 10px 16px;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.2s ease;
     cursor: pointer;
     text-decoration: none;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
}

.role-btn:hover {
     border-color: rgba(33, 150, 243, 0.40);
     color: var(--secondary);
     background: rgba(255, 255, 255, 0.50);
}

.role-btn.active {
     background: linear-gradient(135deg, rgba(35, 58, 155, 0.92), rgba(97, 165, 246, 0.88));
     color: #fff;
     border-color: rgba(255, 255, 255, 0.24);
     text-decoration: none;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 8px 18px rgba(62, 122, 208, 0.28);
}

.form-label {
     font-size: 14px;
     font-weight: 500;
     color: var(--text);
}

.form-control {
     height: 46px;
     border-radius: 10px;
     border: 1px solid rgba(180, 202, 233, 0.95);
     background: rgba(255, 255, 255, 0.42);
     box-shadow: none !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
}

.form-control:focus {
     border-color: var(--secondary);
     background: rgba(255, 255, 255, 0.58);
}

.password-wrap {
     position: relative;
}

.toggle-password {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     border: 0;
     background: transparent;
     color: var(--secondary);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     padding: 0 4px;
}

.login-btn {
     height: 46px;
     border: 0;
     border-radius: 10px;
     background: linear-gradient(135deg, rgba(0, 39, 135, 0.96), rgba(33, 150, 243, 0.82));
     color: #fff;
     font-weight: 600;
     font-size: 15px;
     transition: transform 0.2s ease, opacity 0.2s ease;
     box-shadow: 0 14px 28px rgba(0, 39, 135, 0.24);
}

.login-btn:hover {
     color: #fff;
     transform: translateY(-1px);
     opacity: 0.96;
}

.btn-google {
     height: 46px;
     border: 1px solid rgba(180, 202, 233, 0.95);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.74);
     color: var(--text);
     font-weight: 600;
     font-size: 15px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     text-decoration: none;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.btn-google:hover {
     color: var(--text);
     background: rgba(255, 255, 255, 0.92);
}

.btn-google img {
     width: 20px;
     height: 20px;
     object-fit: contain;
     flex: 0 0 auto;
}

.alert {
     border-radius: 10px;
     font-size: 14px;
     background: rgba(255, 255, 255, 0.40);
     border: 1px solid rgba(255, 255, 255, 0.34);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 991px) {
     .login-card {
          flex-direction: column;
          min-height: auto;
     }

     .login-visual,
     .login-form-panel {
          width: 100%;
     }

     .login-visual {
          min-height: 260px;
     }

     .login-form-panel {
          padding: 28px 20px;
     }
}

@media (max-width: 575px) {
     .login-page {
          padding: 14px;
     }

     .login-title {
          font-size: 24px;
     }

     .role-switcher {
          gap: 8px;
     }

     .role-btn {
          width: 100%;
     }

     .login-form-box {
          padding: 8px 0;
     }
}