:root {
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --primary-dark: #1D4ED8;
  --primary-50: #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --primary-glow: rgba(37,99,235,0.25);
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06), 0 32px 64px rgba(0,0,0,0.04);
  --radius-input: 16px;
  --radius-card: 24px;
  --radius-btn: 16px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.login-page{
  display:flex;
  width:100%;
  min-height:100vh;
}
.login-left{
  flex:0 0 55%;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 48px;
  min-height:100vh;
}
.left-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(30,58,138,0.95) 0%,rgba(37,99,235,0.88) 40%,rgba(59,130,246,0.78) 70%,rgba(37,99,235,0.92) 100%),
    url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  z-index:0;
}
.left-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(45deg,transparent 0%,rgba(255,255,255,0.03) 50%,transparent 100%);
  background-size:200% 200%;
  animation:gradientShift 8s ease infinite;
  z-index:1;
  pointer-events:none;
}
.left-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  z-index:1;
  pointer-events:none;
}
.left-content{
  position:relative;
  z-index:2;
  max-width:520px;
  width:100%;
  animation:fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1);
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:8px;
}
.brand-logo{
  width:52px;
  height:52px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.brand-logo:hover{transform:scale(1.05);box-shadow:0 12px 40px rgba(0,0,0,0.18)}
.brand-logo i{font-size:1.5rem;color:#fff}
.brand-name{
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.04em;
}
.brand-subtitle{
  font-size:0.875rem;
  color:rgba(255,255,255,0.65);
  font-weight:400;
  margin-bottom:40px;
  letter-spacing:0.5px;
}
.welcome-title{
  font-size:3.2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:16px;
  letter-spacing:-0.05em;
  line-height:1.1;
}
.welcome-text{
  font-size:1.05rem;
  color:rgba(255,255,255,0.78);
  line-height:1.75;
  margin-bottom:40px;
  max-width:440px;
  font-weight:400;
}
.benefits{
  display:flex;
  gap:12px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.benefit-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,0.92);
  font-size:0.875rem;
  font-weight:500;
  padding:10px 20px;
  background:rgba(255,255,255,0.08);
  border-radius:100px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.benefit-item:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.benefit-item i{font-size:0.85rem;color:rgba(255,255,255,0.9)}
.quote{
  font-size:0.925rem;
  color:rgba(255,255,255,0.55);
  font-style:italic;
  line-height:1.7;
  padding:24px 28px;
  background:rgba(255,255,255,0.04);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
}
.quote::before{content:'\201C';font-size:3rem;color:rgba(255,255,255,0.12);display:block;margin-bottom:-12px;line-height:1;font-style:normal}

.login-right{
  flex:0 0 45%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:var(--bg);
  position:relative;
}
.login-card{
  width:100%;
  max-width:440px;
  background:var(--card);
  border-radius:var(--radius-card);
  padding:44px 36px 36px;
  box-shadow:var(--shadow-card);
  animation:fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both;
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--primary));
  opacity:0.6;
}
.card-illustration{
  text-align:center;
  margin-bottom:28px;
}
.card-illustration svg{width:80px;height:80px}
.card-title{
  font-size:1.65rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:-0.04em;
}
.card-subtitle{
  font-size:0.9rem;
  color:var(--text-secondary);
  margin-bottom:32px;
  font-weight:400;
}
.alert{
  border:none;
  border-radius:14px;
  padding:16px 20px;
  margin-bottom:24px;
  font-weight:500;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  gap:12px;
  animation:slideDown 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-16px) scaleY(0.95)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
}
.alert-danger{
  background:linear-gradient(135deg,#FEF2F2,#FEE2E2);
  color:#DC2626;
  border:1px solid rgba(220,38,38,0.1);
  box-shadow:0 2px 12px rgba(220,38,38,0.06);
}
.alert-success{
  background:linear-gradient(135deg,#F0FDF4,#DCFCE7);
  color:#16A34A;
  border:1px solid rgba(22,163,74,0.1);
  box-shadow:0 2px 12px rgba(22,163,74,0.06);
}
.form-group{margin-bottom:22px}
.form-label{
  display:block;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
  font-size:0.85rem;
  letter-spacing:-0.01em;
}
.input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.input-icon{
  position:absolute;
  left:18px;
  color:var(--text-muted);
  z-index:2;
  font-size:1.05rem;
  transition:color 0.3s ease,transform 0.3s ease;
  pointer-events:none;
}
.form-control{
  width:100%;
  padding:16px 18px 16px 52px;
  border:2px solid #E2E8F0;
  border-radius:var(--radius-input);
  font-size:0.925rem;
  font-weight:400;
  background:#F8FAFC;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  outline:none;
  color:var(--text);
  font-family:inherit;
  height:56px;
  letter-spacing:-0.01em;
}
.form-control:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,0.1),0 2px 8px rgba(37,99,235,0.06);
}
.input-wrapper:focus-within .input-icon{
  color:var(--primary);
  transform:scale(1.05);
}
.form-control::placeholder{color:#94A3B8;font-weight:400}
.password-toggle{
  position:absolute;
  right:14px;
  color:#94A3B8;
  cursor:pointer;
  z-index:2;
  font-size:1rem;
  transition:all 0.25s ease;
  background:none;
  border:none;
  padding:10px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.password-toggle:hover{color:var(--primary);background:#F1F5F9}
.password-toggle:active{transform:scale(0.92)}
.options-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}
.checkbox-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:0.85rem;
  color:var(--text-secondary);
  font-weight:400;
  user-select:none;
  transition:color 0.2s ease;
}
.checkbox-wrapper:hover{color:var(--text)}
.checkbox-wrapper input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--primary);
  border-radius:5px;
  cursor:pointer;
  transition:transform 0.2s ease;
}
.checkbox-wrapper input[type="checkbox"]:checked{transform:scale(1.05)}
.forgot-link{
  color:var(--primary);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  gap:6px;
}
.forgot-link:hover{color:var(--primary-dark);text-decoration:underline}
.btn-login{
  width:100%;
  padding:16px 24px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
  border:none;
  border-radius:var(--radius-btn);
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(37,99,235,0.3),0 1px 3px rgba(37,99,235,0.15);
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  letter-spacing:0.3px;
  isolation:isolate;
}
.btn-login::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.15) 50%,transparent 100%);
  transform:translateX(-100%);
  transition:transform 0.6s ease;
  z-index:-1;
}
.btn-login:hover::before{transform:translateX(100%)}
.btn-login:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(37,99,235,0.35),0 2px 8px rgba(37,99,235,0.2);
}
.btn-login:active{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,0.25),0 1px 3px rgba(37,99,235,0.15);
}
.btn-login i{font-size:0.95rem;transition:transform 0.3s ease}
.btn-login:hover i{transform:translateX(3px)}
.role-cards{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid #F1F5F9;
}
.role-cards-label{
  font-size:0.7rem;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:14px;
}
.role-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.role-card{
  padding:14px 8px;
  border-radius:14px;
  border:1px solid #F1F5F9;
  background:#fff;
  text-align:center;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:default;
  text-decoration:none;
  display:block;
}
.role-card:hover{
  border-color:var(--primary-200);
  background:var(--primary-50);
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(37,99,235,0.1);
}
.role-card:active{transform:translateY(-2px)}
a.role-card{cursor:pointer}
.role-card-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  font-size:0.9rem;
  color:#fff;
  transition:transform 0.3s ease;
}
.role-card:hover .role-card-icon{transform:scale(1.1)}
.role-card-name{
  font-size:0.7rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
}
.login-footer{
  margin-top:28px;
  text-align:center;
  font-size:0.75rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  letter-spacing:0.2px;
  font-weight:500;
}
.login-footer i{font-size:0.65rem;opacity:0.7}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media(max-width:1100px){
  .login-left{padding:48px 32px}
  .welcome-title{font-size:2.8rem}
  .login-card{padding:36px 28px 28px}
}
@media(max-width:900px){
  .login-page{flex-direction:column}
  .login-left{
    flex:0 0 auto;
    min-height:auto;
    padding:48px 28px 40px;
  }
  .left-content{max-width:420px;text-align:center}
  .brand{justify-content:center}
  .welcome-title{font-size:2.4rem}
  .welcome-text{margin-left:auto;margin-right:auto}
  .benefits{justify-content:center}
  .quote{text-align:left}
  .login-right{
    flex:0 0 auto;
    padding:24px 20px 48px;
  }
  .login-card{
    max-width:460px;
    padding:36px 28px 28px;
  }
}
@media(max-width:480px){
  .login-left{padding:36px 20px 32px}
  .brand-logo{width:44px;height:44px}
  .brand-logo i{font-size:1.25rem}
  .brand-name{font-size:1.35rem}
  .welcome-title{font-size:1.9rem}
  .welcome-text{font-size:0.9rem;margin-bottom:28px}
  .benefits{gap:8px}
  .benefit-item{font-size:0.8rem;padding:8px 14px}
  .quote{font-size:0.85rem;padding:18px 20px}
  .login-right{padding:16px 12px 36px}
  .login-card{
    padding:28px 20px 24px;
    border-radius:20px;
  }
  .card-title{font-size:1.4rem}
  .card-illustration svg{width:64px;height:64px}
  .form-control{height:50px;font-size:0.9rem;padding:14px 14px 14px 48px;border-radius:14px}
  .btn-login{height:50px;font-size:0.9rem;border-radius:14px}
  .options-row{flex-direction:column;gap:14px;align-items:flex-start}
  .role-cards-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .role-card{padding:12px 6px}
  .login-card::before{height:2px}
}
@media(max-height:600px)and(orientation:landscape){
  .login-left{min-height:auto;padding:32px 24px}
  .login-right{min-height:auto;padding:16px 24px 24px}
  .welcome-title{font-size:1.8rem;margin-bottom:8px}
  .welcome-text{font-size:0.85rem;margin-bottom:20px}
  .benefits{margin-bottom:20px}
  .brand-subtitle{margin-bottom:16px}
  .brand{margin-bottom:4px}
}