*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#102033}
.auth-body{min-height:100vh;background:#edf3f8}

.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr;
}

.login-visual{
  position:relative;
  min-height:36vh;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(145deg, rgba(6,24,52,.92), rgba(17,77,147,.82)),
    radial-gradient(circle at 78% 18%, rgba(121,178,255,.32), transparent 28%),
    linear-gradient(180deg,#071b38,#145fa8);
}

.login-visual:before{
  content:"";
  position:absolute;
  inset:auto -12% -22% -12%;
  height:55%;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.16), transparent 62%);
  transform:rotate(-6deg);
}

.login-visual:after{
  content:"\2708";
  position:absolute;
  right:8%;
  bottom:10%;
  font-size:min(18vw,170px);
  line-height:1;
  opacity:.12;
  transform:rotate(-14deg);
}

.visual-glow{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 42%),
    repeating-linear-gradient(130deg, rgba(255,255,255,.045) 0 1px, transparent 1px 52px);
  pointer-events:none;
}

.visual-content{
  position:relative;
  z-index:1;
  width:min(760px,88vw);
  padding:42px 28px;
}

.company-logo{
  display:block;
  width:min(290px,58vw);
  height:auto;
  margin-bottom:34px;
}

.eyebrow{
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d6e8ff;
  margin-bottom:14px;
}

.login-visual h1{
  margin:0;
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1.05;
  max-width:740px;
  letter-spacing:-.035em;
}

.login-panel{
  display:grid;
  place-items:center;
  padding:28px 20px;
}

.login-card{
  width:min(100%,440px);
  background:rgba(255,255,255,.94);
  border:1px solid #d7e1ee;
  border-radius:26px;
  padding:28px;
  box-shadow:0 24px 60px rgba(15,23,42,.11);
  backdrop-filter:blur(10px);
}

.mobile-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.mobile-logo{
  max-width:210px;
  height:auto;
}

.login-card h2{
  margin:0 0 8px;
  font-size:2rem;
  letter-spacing:-.025em;
}

.intro{
  margin:0 0 22px;
  color:#65768c;
  line-height:1.5;
}

.form{display:grid;gap:16px}
.form label span{
  display:block;
  font-weight:800;
  margin-bottom:7px;
  color:#102033;
}

.form input{
  width:100%;
  padding:15px 16px;
  border:1px solid #c9d8ea;
  border-radius:15px;
  background:#f8fbfe;
  font-size:1rem;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form input:focus{
  border-color:#2b73dc;
  background:#fff;
  box-shadow:0 0 0 4px rgba(43,115,220,.13);
}

button{
  width:100%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:0;
  border-radius:15px;
  padding:15px 18px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#2d73dc,#195db8);
  box-shadow:0 8px 20px rgba(43,115,220,.25);
}

button:hover{filter:brightness(.98)}

.notice{
  padding:12px 14px;
  border-radius:14px;
  margin:0 0 16px;
  font-weight:650;
}

.notice.success{background:#eafaf0;color:#166534}
.notice.error{background:#fef2f2;color:#991b1b}

.small{
  margin:16px 0 0;
  font-size:.95rem;
  color:#64748b;
}

.small a{color:#2168c9;text-decoration:none;font-weight:700}

@media (min-width: 768px){
  /* Tablet & Desktop — zweispaltig */
  .login-page{grid-template-columns:1fr 1.4fr}
  .login-visual{min-height:100vh;overflow:hidden}
  .visual-content{padding:32px 20px;width:100%}
  .login-visual h1{display:none}
  .company-logo{width:160px}
  .login-panel{padding:20px 14px}
  .mobile-logo-wrap{display:none}
  .eyebrow{font-size:.78rem}
}

@media (min-width: 1024px){
  .login-page{grid-template-columns:.92fr 1.08fr}
  .visual-content{padding:50px 40px}
  .login-panel{padding:40px}
  .login-card{padding:34px}
}

@media (min-width: 1280px){
  .login-page{grid-template-columns:.82fr 1.18fr}
  .login-card{width:470px}
}