:root{
  --ink:#eef6ff;
  --ink-soft:rgba(238,246,255,.82);
  --panel-bg:rgba(8,18,38,.42);
  --panel-line:rgba(167,223,255,.24);
  --panel-shadow:0 24px 70px rgba(0,0,0,.38);
  --btn-top:#1d79ff;
  --btn-bottom:#0d56cb;
  --btn-line:rgba(170,220,255,.34);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.login-page{
  margin:0;
  color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:
    linear-gradient(90deg, rgba(4,16,42,.34) 0%, rgba(4,16,42,.16) 26%, rgba(4,16,42,.08) 46%, rgba(4,16,42,.14) 100%),
    linear-gradient(180deg, rgba(4,16,42,.32) 0%, rgba(4,16,42,.12) 40%, rgba(4,16,42,.28) 100%),
    url('/assets/login-bg.jpg') center center / cover no-repeat fixed;
  overflow:hidden;
}
body.login-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%, rgba(64,201,255,.18), transparent 24%),
    radial-gradient(circle at 84% 70%, rgba(255,255,255,.12), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.login-layout{
  min-height:100vh;
  position:relative;
  padding:clamp(24px, 4vw, 54px);
}
.login-panel{
  position:absolute;
  top:50%;
  right:clamp(1px, 1vw, 20px);
  transform:translateY(-50%);
  width:min(400px, 26vw);
  min-width:340px;
  padding:28px 28px 24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(14,30,58,.42), rgba(9,22,43,.28));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:var(--panel-shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.login-panel h1{
  margin:0 0 18px;
  max-width:15ch;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.04;
  letter-spacing:.01em;
  font-weight:800;
  text-wrap:balance;
}
.login-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:58px;
  padding:0 18px;
  border-radius:18px;
  text-decoration:none;
  color:#f6fbff;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  border:1px solid var(--btn-line);
  box-shadow:
    0 16px 34px rgba(9,51,126,.34),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.login-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 20px 40px rgba(9,51,126,.4),
    inset 0 1px 0 rgba(255,255,255,.26);
  filter:brightness(1.03);
}
.login-btn:active{ transform:translateY(0) scale(.995); }

@media (min-width: 1200px){
  .login-panel{
    right:clamp(1px, 6vw, 80px);
    width:min(430px, 25vw);
  }
}

@media (max-width: 980px){
  body.login-page{
    background:
      linear-gradient(180deg, rgba(4,16,42,.46), rgba(4,16,42,.32)),
      url('/assets/login-bg.jpg') 58% center / cover no-repeat fixed;
  }
  .login-layout{
    padding:20px;
  }
  .login-panel{
    position:static;
    transform:none;
    width:min(560px, 100%);
    min-width:0;
    margin:0 auto 24px;
    background:linear-gradient(180deg, rgba(11,24,48,.72), rgba(8,19,38,.58));
  }
  .login-panel h1{
    max-width:none;
    font-size:clamp(26px, 5vw, 36px);
  }
}

@media (max-width: 640px){
  .login-layout{
    align-items:end;
    padding:16px;
  }
  .login-panel{
    padding:22px 18px 18px;
    border-radius:22px;
    margin-bottom:12px;
  }
  .login-btn{
    min-height:54px;
    border-radius:16px;
  }
}