/* --- Login (split screen) --- */
.login-wrap{min-height:100vh; display:flex; background:var(--ink);}
.login-hero{
  flex:1 1 54%; position:relative; overflow:hidden; padding:56px 60px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(ellipse 620px 480px at 4% -6%, rgba(217,164,65,.20), transparent 60%),
    linear-gradient(160deg, #0F2038 0%, #0B1830 55%, #0A1526 100%);
  color:#F2EFE4;
}
.login-hero-rings{position:absolute; left:-160px; bottom:-160px; width:520px; height:520px;
  border-radius:50%; border:1px solid rgba(217,164,65,.16); pointer-events:none;}
.login-hero-rings::before{content:''; position:absolute; inset:60px; border-radius:50%; border:1px solid rgba(217,164,65,.12);}
.login-hero-rings::after{content:''; position:absolute; inset:120px; border-radius:50%; border:1px solid rgba(217,164,65,.10);}

.login-logo{display:flex; align-items:center; gap:12px; position:relative; z-index:1;}
.login-logo-mark{font-size:30px; line-height:1;}
.login-logo-word{font-family:'Fraunces',serif; font-weight:700; font-size:26px; letter-spacing:-.01em;}
.login-logo-word b{color:var(--gold); font-weight:700;}
.login-logo-sub{display:flex; align-items:center; gap:10px; margin-top:6px;}
.login-logo-sub span{font-size:11px; letter-spacing:.22em; color:#B7AE99; font-weight:600;}
.login-logo-sub i{display:block; width:26px; height:1px; background:var(--gold-deep);}

.login-hero-mid{position:relative; z-index:1; margin:44px 0 0;}
.login-headline{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,3.6vw,42px); line-height:1.12; margin:0 0 16px;}
.login-headline i{display:block; width:52px; height:3px; background:var(--gold); border-radius:2px; margin:16px 0 18px;}
.login-hero-sub{font-size:15px; line-height:1.6; color:#C9C2AE; max-width:400px; margin:0 0 34px;}

.login-features{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:520px;}
.login-feature{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.login-feature-icon{
  width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(217,164,65,.10); border:1px solid rgba(217,164,65,.28);
}
.login-feature-icon svg{width:22px; height:22px;}
.login-feature span{font-size:12.5px; font-weight:600; color:#E7E2D2; line-height:1.3;}

.login-hero-chart{position:relative; z-index:1; height:120px; margin-top:36px;}
.login-security{
  position:relative; z-index:1; margin-top:18px; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px;
  padding:12px 16px; max-width:420px; backdrop-filter:blur(2px);
}
.login-security-icon{
  width:34px; height:34px; border-radius:50%; background:var(--ink); border:1px solid var(--gold-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.login-security-icon svg{width:16px; height:16px;}
.login-security span{font-size:12.5px; color:#D7D2C2; line-height:1.4;}

.login-panel{flex:1 1 46%; display:flex; align-items:center; justify-content:center; padding:40px; background:#F4F1EA;}
.login-card{background:#fff; border-radius:20px; padding:40px 38px; width:100%; max-width:420px; box-shadow:0 30px 70px rgba(9,16,30,.28);}
.login-card-icon{
  width:64px; height:64px; border-radius:50%; background:var(--ink); display:flex; align-items:center;
  justify-content:center; margin:0 auto 18px;
}
.login-card-icon svg{width:26px; height:26px;}
.login-title{font-family:'Fraunces',serif; font-weight:700; font-size:23px; color:var(--ink); margin:0 0 4px; text-align:center;}
.login-sub{color:var(--muted); font-size:13px; margin:0 0 26px; text-align:center;}
.login-card label{margin-top:14px; text-align:left;}
.login-card label:first-of-type{margin-top:0;}
.login-input-wrap{position:relative;}
.login-input-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none;}
.login-input-wrap input{padding-left:38px;}
.password-hint{font-size:11.5px; color:var(--muted); margin-top:6px;}
.password-hint.valid{color:var(--good);}
.login-input-wrap button.toggle-pw{
  all:unset; position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer;
  color:var(--muted); display:flex;
}
.login-input-wrap button.toggle-pw svg{position:static; transform:none;}
.login-row-between{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:12.5px;}
.login-row-between a{color:var(--ink-soft); font-weight:600; text-decoration:none;}
.login-row-between a:hover{text-decoration:underline;}
.btn.full{width:100%; justify-content:center; margin-top:20px; display:flex; align-items:center; gap:8px;}
.login-divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;}
.login-divider i{flex:1; height:1px; background:var(--hair);}
.btn.google{
  width:100%; background:#fff; border:1px solid var(--hair); color:var(--ink-soft); font-weight:600; font-size:13.5px;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:10px; cursor:pointer;
}
.btn.google:hover{background:#FAFAF8;}
.login-foot{margin-top:20px; font-size:12.5px; color:var(--muted); text-align:center;}
.login-foot a{color:var(--gold-deep); font-weight:600; cursor:pointer;}
@media (max-width:880px){
  .login-wrap{flex-direction:column;}
  .login-hero{flex:none; padding:40px 28px;}
  .login-features{grid-template-columns:repeat(2,1fr);}
  .login-hero-chart{display:none;}
  .login-panel{flex:none; padding:28px;}
}

.save-badge{font-size:10.5px; margin-top:6px; letter-spacing:.03em;}
.save-badge.saving{color:var(--gold);}
.save-badge.saved{color:#8FBF9F;}
.save-badge.error{color:var(--alert);}