:root{
  --lumina-bg:#061427;
  --lumina-bg-2:#071b34;
  --lumina-card:#0b1f3b;
  --lumina-panel:#ffffff;
  --lumina-primary:#2f7df6;
  --lumina-primary-2:#36c2ff;
  --lumina-text:#eaf2ff;
  --lumina-muted:#9db2cf;
  --lumina-dark:#0f172a;
  --lumina-border:rgba(255,255,255,.12);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  font-family:Inter, "Segoe UI", Arial, sans-serif;
  color:var(--lumina-dark);
  background:
    radial-gradient(circle at 18% 20%, rgba(47,125,246,.22), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(54,194,255,.12), transparent 26%),
    linear-gradient(135deg, var(--lumina-bg) 0%, var(--lumina-bg-2) 100%);
}

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

.login-shell{
  width:min(980px, 100%);
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 430px;
  border:1px solid var(--lumina-border);
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
  box-shadow:0 32px 90px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}

.login-brand{
  position:relative;
  padding:56px 54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  color:var(--lumina-text);
}

.login-brand::before{
  content:"";
  position:absolute;
  inset:auto -120px -170px -90px;
  height:340px;
  background:radial-gradient(circle, rgba(47,125,246,.22), transparent 68%);
}

.login-brand::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.06), transparent 44%);
  pointer-events:none;
}

.brand-mark{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--lumina-primary), var(--lumina-primary-2));
  box-shadow:0 0 32px rgba(47,125,246,.42);
  margin-bottom:24px;
  position:relative;
  z-index:1;
}

.brand-mark span{
  width:26px;
  height:26px;
  position:relative;
  display:block;
}

.brand-mark span::before,
.brand-mark span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:white;
}

.brand-mark span::before{width:5px;height:26px;}
.brand-mark span::after{width:26px;height:5px;}

.brand-text,
.brand-features{position:relative;z-index:1;}

.brand-text h1{
  margin:0;
  font-size:42px;
  line-height:1;
  font-weight:500;
  letter-spacing:.18em;
}

.brand-subtitle{
  margin:12px 0 0;
  font-size:15px;
  color:#c9d8ee;
  font-weight:400;
}

.brand-description{
  max-width:390px;
  margin:34px 0 0;
  font-size:24px;
  line-height:1.35;
  font-weight:300;
  color:#f8fbff;
}

.brand-features{
  display:flex;
  gap:14px;
  margin-top:48px;
  flex-wrap:wrap;
}

.feature-item{
  height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#d8e6fb;
  font-size:14px;
  font-weight:400;
}

.feature-icon{
  font-size:15px;
  line-height:1;
}

.login-panel{
  background:rgba(255,255,255,.98);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
}

.login-panel-inner{
  width:100%;
  max-width:335px;
}

.login-title h2{
  margin:0;
  color:#0f172a;
  font-size:28px;
  font-weight:500;
  letter-spacing:-.02em;
}

.login-title p{
  margin:9px 0 30px;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

.alert{
  border-radius:12px;
  padding:11px 13px;
  margin-bottom:16px;
  font-size:13px;
  font-weight:500;
}

.alert-danger{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;}
.alert-success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534;}

.login-form{display:flex;flex-direction:column;gap:17px;}

.form-group label{
  display:block;
  margin-bottom:7px;
  color:#334155;
  font-size:13px;
  font-weight:500;
}

.form-group input{
  width:100%;
  height:44px;
  border:1px solid #d8e1ee;
  border-radius:12px;
  padding:0 13px;
  outline:none;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  font-family:inherit;
  transition:border .18s ease, box-shadow .18s ease;
}

.form-group input::placeholder{color:#94a3b8;}
.form-group input:focus{border-color:var(--lumina-primary);box-shadow:0 0 0 4px rgba(47,125,246,.12);}

.password-wrap{position:relative;}
.password-wrap input{padding-right:78px;}
.password-toggle{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  height:30px;
  border:0;
  background:transparent;
  color:#2f7df6;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
}

.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:2px;
  font-size:13px;
}

.remember-option{
  display:flex;
  align-items:center;
  gap:7px;
  color:#64748b;
  cursor:pointer;
  user-select:none;
}

.remember-option input{width:15px;height:15px;accent-color:var(--lumina-primary);}

.form-options a{
  color:#2f7df6;
  text-decoration:none;
  font-weight:500;
  white-space:nowrap;
}

.login-button{
  height:44px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, #2f7df6, #2563eb);
  color:#fff;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 12px 24px rgba(37,99,235,.24);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 16px 30px rgba(37,99,235,.28);
}

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

@media (max-width: 860px){
  .login-shell{grid-template-columns:1fr;max-width:460px;}
  .login-brand{padding:36px 32px;text-align:center;align-items:center;}
  .brand-description{font-size:19px;margin-top:22px;}
  .brand-features{justify-content:center;margin-top:28px;}
  .login-panel{padding:34px 28px;}
}

@media (max-width: 480px){
  .login-page{padding:18px;}
  .login-shell{border-radius:22px;}
  .login-brand{padding:32px 24px;}
  .brand-text h1{font-size:34px;}
  .brand-description{font-size:17px;}
  .feature-item{height:38px;font-size:13px;}
  .login-panel{padding:30px 22px;}
  .form-options{align-items:flex-start;flex-direction:column;}
}