/* ===== ELECTRIC CHAOS — LOGIN PAGE ===== */

.login-body{
  background:var(--yellow);
  min-height:100vh;
  overflow-x:hidden;
  cursor:none;
}

/* ===== FLOATING SHAPES ===== */
.login-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.shape{position:absolute;border-radius:4px;opacity:.15;will-change:transform}
.shape-1{width:120px;height:120px;background:var(--pink);border-radius:50%}
.shape-2{width:80px;height:80px;background:var(--cyan);border-radius:12px}
.shape-3{width:60px;height:60px;background:var(--black);border-radius:50%;border:4px solid var(--pink)}
.shape-4{width:100px;height:100px;background:var(--pink);clip-path:polygon(50% 0%,0% 100%,100% 100%)}
.shape-5{width:90px;height:90px;background:var(--cyan);border-radius:50%;border:4px solid var(--black)}

/* ===== WRAPPER — SPLIT LAYOUT ===== */
.login-wrapper{
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:1;
}

/* ===== LEFT — BRANDING ===== */
.login-brand{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 64px;
  position:relative;
}
.login-top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:48px;
}
.login-logo{
  font-family:var(--ff-head);
  font-size:1.8rem;
  color:var(--black);
  letter-spacing:.05em;
}
.login-logo span{color:var(--pink)}

.login-back{
  font-family:var(--ff-body);
  font-size:.85rem;
  font-weight:700;
  color:var(--black);
  letter-spacing:.05em;
  padding:8px 20px;
  border:2px solid var(--black);
  border-radius:100px;
  transition:all .3s var(--ease);
}
.login-back:hover{
  background:var(--black);
  color:var(--yellow);
  transform:scale(1.05);
}

.login-headline{
  font-family:var(--ff-head);
  font-size:clamp(4rem,8vw,7rem);
  line-height:.92;
  color:var(--black);
  letter-spacing:.02em;
  margin-bottom:20px;
}
.login-dot{color:var(--pink)}

.login-sub{
  font-family:var(--ff-body);
  font-size:1.1rem;
  color:var(--gray-mid);
  line-height:1.7;
  margin-bottom:40px;
  max-width:380px;
}

.login-stats{
  display:flex;
  gap:32px;
  margin-bottom:40px;
}
.login-stat{display:flex;flex-direction:column;gap:4px}
.ls-num{font-family:var(--ff-head);font-size:2.2rem;color:var(--black);line-height:1}
.ls-label{font-family:var(--ff-body);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--gray-mid)}

.login-tape-sticker{
  display:inline-block;
  background:var(--pink);
  color:var(--white);
  font-family:var(--ff-marker);
  font-size:.85rem;
  padding:10px 24px;
  border-radius:100px;
  transform:rotate(-3deg);
  box-shadow:4px 4px 0 var(--black);
  animation:stickerFloat 3s ease-in-out infinite;
}
@keyframes stickerFloat{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-8px)}}

/* ===== RIGHT — FORM ===== */
.login-form-side{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 48px;
  background:var(--white);
  position:relative;
}
/* DASHED separator instead of solid */
.login-form-side::before{
  content:'';
  position:absolute;
  top:5%;
  left:0;
  width:0;
  height:90%;
  border-left:4px dashed var(--black);
}

/* ===== LOGIN CARD — POPUP STYLE (like reference image) ===== */
.login-card{
  width:100%;
  max-width:420px;
  padding:40px 36px;
  background:var(--yellow);
  border:4px dashed var(--black);
  border-radius:12px;
  position:relative;
  transition:all .4s var(--ease);
  box-shadow:8px 8px 0 var(--pink);
}
.login-card:hover{
  box-shadow:12px 12px 0 var(--cyan);
}

/* X close button */
.login-card-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:1.6rem;
  font-weight:900;
  color:var(--black);
  cursor:pointer;
  transition:all .2s;
  z-index:5;
  line-height:1;
}
.login-card-close:hover{
  color:var(--pink);
  transform:rotate(90deg) scale(1.2);
}

.lc-tape{
  position:absolute;
  top:-12px;
  left:35%;
  width:70px;
  height:26px;
  background:var(--pink);
  border-radius:2px;
  transform:rotate(2deg);
  opacity:.85;
}
.login-card h2{
  font-family:var(--ff-head);
  font-size:2.8rem;
  color:var(--black);
  letter-spacing:.02em;
  margin-bottom:4px;
}
.lc-sub{
  font-family:var(--ff-marker);
  font-size:.95rem;
  color:var(--gray-mid);
  margin-bottom:28px;
}

/* ===== FORM GROUPS ===== */
.lf-group{margin-bottom:20px;position:relative}
.lf-group label{
  display:block;
  font-family:var(--ff-marker);
  font-size:.85rem;
  color:var(--black);
  margin-bottom:6px;
}
.lf-group input{
  width:100%;
  padding:14px 16px;
  border:3px solid var(--black);
  border-radius:8px;
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--black);
  background:var(--white);
  outline:none;
  transition:all .3s var(--ease);
}
.lf-group input:focus{
  border-color:var(--pink);
  box-shadow:4px 4px 0 var(--pink);
  transform:translateY(-2px);
}
.lf-group input::placeholder{color:var(--gray-light)}

/* ===== REMEMBER / FORGOT ROW ===== */
.lf-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.lf-check{
  display:flex;align-items:center;gap:8px;
  font-family:var(--ff-body);font-size:.85rem;font-weight:600;color:var(--black);cursor:pointer;user-select:none;
}
.lf-check input{display:none}
.checkmark{width:20px;height:20px;border:3px solid var(--black);border-radius:4px;position:relative;transition:all .2s}
.lf-check input:checked + .checkmark{background:var(--pink);border-color:var(--pink)}
.lf-check input:checked + .checkmark::after{
  content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--white);font-size:.75rem;font-weight:900;
}
.lf-forgot{font-family:var(--ff-body);font-size:.85rem;font-weight:700;color:var(--pink);transition:color .2s}
.lf-forgot:hover{color:var(--black)}

/* ===== LOGIN BUTTON ===== */
.login-btn{
  font-family:var(--ff-head)!important;
  font-size:1.2rem!important;
  letter-spacing:.1em!important;
  padding:18px 40px!important;
}

/* ===== DIVIDER ===== */
.lc-divider{display:flex;align-items:center;gap:16px;margin:24px 0}
.lc-divider::before,.lc-divider::after{content:'';flex:1;height:2px;border-top:2px dashed rgba(0,0,0,.2)}
.lc-divider span{font-family:var(--ff-head);font-size:1rem;letter-spacing:.2em;color:var(--gray-light)}

/* ===== SOCIAL BUTTON ===== */
.btn-social{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px;border:3px solid var(--black);border-radius:100px;
  background:var(--white);font-family:var(--ff-body);font-size:.95rem;font-weight:700;
  color:var(--black);cursor:pointer;transition:all .3s var(--ease);
}
.btn-social:hover{background:var(--black);color:var(--white);transform:scale(1.02) rotate(-1deg);box-shadow:4px 4px 0 var(--cyan)}

/* ===== SIGNUP LINK ===== */
.lc-signup{text-align:center;margin-top:20px;font-family:var(--ff-body);font-size:.85rem;color:var(--gray-mid)}
.lc-signup a{color:var(--pink);font-weight:700;transition:color .2s}
.lc-signup a:hover{color:var(--black)}

/* ===== CARD SUCCESS ANIMATION ===== */
@keyframes cardSuccess{
  0%{transform:scale(1)}
  30%{transform:scale(1.03) rotate(1deg)}
  60%{transform:scale(.98) rotate(-1deg)}
  100%{transform:scale(1)}
}

/* ========================================= */
/* ===== LOGIN — RESPONSIVE ===== */
/* ========================================= */
@media(max-width:1024px){
  .login-wrapper{flex-direction:column}
  .login-brand{padding:48px 32px 32px;text-align:center;align-items:center}
  .login-top-bar{width:100%;justify-content:center;gap:24px;flex-wrap:wrap}
  .login-headline{font-size:clamp(3rem,10vw,5rem)}
  .login-sub{max-width:100%}
  .login-stats{justify-content:center}
  .login-form-side{padding:32px 24px 60px}
  .login-form-side::before{
    width:90%;height:0;top:0;left:5%;
    border-left:none;border-top:4px dashed var(--black);
  }
  .login-tape-sticker{margin-bottom:0}
}

@media(max-width:768px){
  .login-body{cursor:auto}
  .cursor-phone{display:none!important}
}

@media(max-width:480px){
  .login-brand{padding:36px 20px 20px}
  .login-top-bar{flex-direction:column;gap:12px}
  .login-headline{font-size:clamp(2.5rem,12vw,4rem)}
  .login-sub{font-size:.95rem}
  .login-stats{gap:20px;flex-wrap:wrap}
  .ls-num{font-size:1.6rem}
  .login-form-side{padding:20px 16px 40px;background:transparent}
  .login-form-side::before{display:none}
  .login-card{
    padding:28px 20px;
    border:4px dashed var(--black);
    box-shadow:6px 6px 0 var(--pink);
  }
  .login-card h2{font-size:2.2rem}
  .lf-group input{padding:12px 14px;font-size:.9rem}
  .login-btn{padding:16px 32px!important;font-size:1rem!important}
  .login-back{font-size:.75rem;padding:6px 14px}
}