:root{
  --kkj-primary:#343C73;
  --kkj-primary-2:#1F3C88;
  --kkj-accent:#2F5AA8;
  --kkj-bg:#F2F7FF;
  --kkj-card:#FFFFFF;
  --kkj-text:#1F2937;
  --kkj-muted:#6B7280;
  --kkj-border:#D9E4FF;
  --kkj-danger:#DC2626;
  --kkj-success:#16A34A;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{
  min-height:100vh;

  background-image: var(--page-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  color:var(--kkj-text);
}

.auth-shell{
  width:680px;
  min-height:460px;
  background:var(--kkj-card);
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(17,24,39,.10);
  overflow:hidden;
  display:flex;
}
.brand-panel{
  flex:1;
  padding:34px 28px;
  border-right:2px solid var(--kkj-border);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}
.brand-panel:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(52,60,115,.06), rgba(47,90,168,.04));
  pointer-events:none;
}
.brand-content{position:relative; z-index:1;}
.logo-img{width:120px;height:auto;margin-bottom:18px;filter:drop-shadow(0 8px 12px rgba(17,24,39,.08))}
.brand-name{font-size:1.15rem;font-weight:600;color:var(--kkj-primary);letter-spacing:.2px;margin-bottom:8px}
.brand-sub{font-size:.92rem;color:var(--kkj-muted);margin-bottom:18px}
.brand-greeting{font-size:1.45rem;font-weight:600;color:var(--kkj-text)}
.form-panel{flex:1.25;padding:36px;display:flex;flex-direction:column;justify-content:center}
.panel-title{color:var(--kkj-primary);font-weight:700;font-size:1.75rem;text-align:center;margin-bottom:22px;letter-spacing:1px;text-transform:uppercase}
.notice{font-size:.92rem;text-align:center;margin-bottom:14px}
.notice.error{color:var(--kkj-danger)}
.notice.success{color:var(--kkj-success)}
.form-group{margin-bottom:14px;position:relative}
.input{
  width:100%;
  height:46px;
  border:2px solid var(--kkj-primary);
  border-radius:14px;
  padding:10px 44px 10px 16px;
  font-size:.95rem;
  background:transparent;
  outline:none;
  transition:background .2s, transform .05s;
}
.input:focus{background:rgba(242,247,255,.9)}
.input-icon-btn{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--kkj-primary);
  padding:6px;
}
.btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:14px;
  background:var(--kkj-primary);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
  box-shadow:0 6px 0 rgba(15,45,102,.75);
  position:relative;
  top:0;
}
.btn:hover{background:var(--kkj-accent); top:-2px; box-shadow:0 8px 0 rgba(15,45,102,.75)}
.btn:active{top:2px; box-shadow:0 4px 0 rgba(15,45,102,.75)}
.links{margin-top:16px;text-align:center;font-size:.88rem;color:var(--kkj-muted)}
.links a{color:var(--kkj-accent);font-weight:700;text-decoration:none}
.links a:hover{text-decoration:underline}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.small{font-size:.82rem;color:var(--kkj-muted)}
@media (max-width: 820px){
  .auth-shell{flex-direction:column;width:100%;max-width:420px}
  .brand-panel{border-right:none;border-bottom:2px solid var(--kkj-border)}
}