/* CallSide AI — Sign in / Sign up (split-screen layout)
   Shared by /portal/signup.html and /portal/login.html */
:root{
  --navy:#0A1B3D; --blue:#2563EB; --blue2:#1D55D0; --sky:#2EA3F2;
  --ink:#14203F; --muted:#6B7690; --line:#E3E8F2; --err:#D64545;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body.auth-body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:#EEF3FC; -webkit-font-smoothing:antialiased;
}
.auth{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}

/* ---------- LEFT: brand panel ---------- */
.auth-left{
  position:relative; overflow:hidden; color:#fff;
  padding:44px 64px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(900px 600px at 105% -10%, rgba(37,99,235,.55) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(160deg,#0A1B3D 0%,#0B2557 55%,#0A1F4C 100%);
}
.auth-left .bg-phone{
  position:absolute; right:-250px; bottom:-150px; width:660px; height:660px;
  fill:rgba(59,130,246,.13); transform:rotate(-8deg); pointer-events:none;
}
.auth-left > *{position:relative; z-index:1;}
.brand img{height:46px; width:auto; display:block;}
.hero{margin:auto 0; padding:40px 0;}
.hero h1{
  font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800;
  font-size:clamp(40px,3.7vw,68px); line-height:1.07; letter-spacing:-.025em; margin:0 0 28px; max-width:7.2em;
}
.hero h1 span{color:var(--sky); display:block;}
.hero p{font-size:clamp(16px,1.35vw,20px); line-height:1.6; color:rgba(255,255,255,.78); max-width:540px; margin:0;}

.feats{display:flex; gap:0;}
.feat{display:flex; flex-direction:column; gap:12px; padding:0 34px;}
.feat:first-child{padding-left:0;}
.feat + .feat{border-left:1px solid rgba(255,255,255,.14);}
.feat .ic{
  width:56px; height:56px; border-radius:50%; background:rgba(37,99,235,.38);
  border:1px solid rgba(120,170,255,.25); display:flex; align-items:center; justify-content:center;
}
.feat .ic svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.feat b{display:block; font-size:18px; font-weight:700; line-height:1.2;}
.feat small{display:block; font-size:15px; color:rgba(255,255,255,.66); margin-top:2px;}

/* ---------- RIGHT: form panel ---------- */
.auth-right{
  display:flex; align-items:center; justify-content:center; padding:40px 24px;
  background:
    radial-gradient(700px 500px at 100% 60%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 70%),
    linear-gradient(180deg,#F6F9FE 0%,#EAF1FD 100%);
}
.card{
  width:100%; max-width:470px; background:#fff; border-radius:26px;
  padding:38px 44px 34px; box-shadow:0 24px 70px rgba(10,27,61,.10), 0 2px 8px rgba(10,27,61,.04);
}
.card .logo{text-align:center; margin:0 0 22px;}
.card .logo img{height:40px; width:auto;}

.steps{display:flex; align-items:center; gap:8px; margin-bottom:18px;}
.steps .dot{width:8px; height:8px; border-radius:50%; background:#DCE3F1;}
.steps .dot.active{background:var(--blue); width:30px; border-radius:6px;}
.steps .label{font-size:12.5px; font-weight:700; letter-spacing:.05em; color:#8A94AB; text-transform:uppercase; margin-left:4px;}

.card h1{
  font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:32px; font-weight:800;
  color:var(--navy); letter-spacing:-.02em; line-height:1.15; margin:0 0 8px;
}
.sub{color:var(--muted); font-size:17px; line-height:1.5; margin:0 0 24px;}
.sub b{color:var(--ink);}

.field{margin-bottom:14px; position:relative;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.field input{
  width:100%; height:56px; padding:0 22px; border:1.5px solid var(--line); border-radius:999px;
  font:500 16px/1 'Inter',system-ui,sans-serif; color:var(--ink); background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#7C87A0; font-weight:500;}
.field input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.field input.err{border-color:var(--err);}
.field.pw input{padding-right:54px;}
.eye{
  position:absolute; right:8px; top:8px; width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.eye:hover{background:#F1F4FB;}
.eye svg{width:20px; height:20px; stroke:#5F6B85; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.field-err{display:none; color:var(--err); font-size:13px; margin:6px 0 0 22px;}
.field-err.show{display:block;}
.hint{font-size:13px; line-height:1.45; color:var(--muted); text-align:center; margin:-4px 8px 18px;}
.hint.left{text-align:left; margin:-6px 0 16px 22px;}

.btn{
  width:100%; height:56px; border:0; border-radius:999px; cursor:pointer;
  font:700 17px/1 'Inter',system-ui,sans-serif; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .12s, box-shadow .15s, background .15s, opacity .15s;
}
.btn:disabled{opacity:.6; cursor:not-allowed;}
.btn-primary{
  color:#fff; background:linear-gradient(180deg,#3B82F6 0%,#2563EB 100%);
  box-shadow:0 10px 24px rgba(37,99,235,.32);
}
.btn-primary:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 14px 28px rgba(37,99,235,.38);}
.btn-primary svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.btn-google{background:#fff; border:1.5px solid var(--line); color:var(--ink); font-weight:600; font-size:16.5px; margin-bottom:0;}
.btn-google:hover{background:#F7F9FD;}

.divider{display:flex; align-items:center; gap:14px; margin:20px 0; color:var(--muted); font-size:14px; font-weight:500;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line);}

.msg{margin-top:16px; padding:14px 16px; border-radius:14px; font-size:14.5px; text-align:center; display:none; line-height:1.5;}
.msg.success{background:#E7F7EE; color:#0F7A45; display:block;}
.msg.error{background:#FDEBEB; color:#B3261E; display:block;}

.foot{text-align:center; margin-top:20px; font-size:14.5px; color:var(--muted);}
.foot + .foot{margin-top:12px;}
.foot a,.linkbtn{color:var(--blue); font-weight:500; text-decoration:underline; text-underline-offset:2px; background:none; border:0; padding:0; font:inherit; cursor:pointer;}
.foot a{white-space:nowrap;}
.foot a:hover,.linkbtn:hover{color:var(--blue2);}

.backlink{display:inline-block; margin-bottom:12px; font-size:14px; color:var(--muted); cursor:pointer; background:none; border:0; padding:0; font-family:inherit;}
.backlink:hover{color:var(--ink);}
#step2{display:none;}

/* legal line under the button */
.terms{text-align:center; font-size:13px; line-height:1.5; color:var(--muted); margin:16px 0 0;}
.terms a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}

/* ---------- smaller screens: drop the brand panel, keep the form ---------- */
@media (max-width:960px){
  .auth{grid-template-columns:1fr;}
  .auth-left{display:none;}
  .auth-right{display:block; min-height:100vh; padding:0; background:#fff;}
  .card{max-width:none; border-radius:0; box-shadow:none; padding:0; background:#fff;}
  .card .logo{
    margin:0; padding:60px 20px 44px; text-align:center;
    background:
      radial-gradient(260px 200px at -5% 10%, rgba(120,175,255,.28) 0%, rgba(120,175,255,0) 70%),
      radial-gradient(240px 190px at 105% 95%, rgba(120,175,255,.26) 0%, rgba(120,175,255,0) 70%),
      linear-gradient(180deg,#EAF3FF 0%,#F4F8FF 100%);
  }
  .card .logo img{height:46px;}
  .cbody{padding:34px 24px 40px; max-width:520px; margin:0 auto;}
  #step1 .steps{display:none;}
  .steps{justify-content:center;}
  .card h1{font-size:30px; text-align:center;}
  .sub{text-align:center; font-size:18px; margin-bottom:26px;}
  .field input{height:58px; font-size:16.5px;}
  .btn{height:58px;}
  .btn-primary{background:linear-gradient(90deg,#22A8FF 0%,#0A58FF 100%); box-shadow:0 10px 24px rgba(10,88,255,.28);}
  .hint{font-size:14px;}
  .backlink{display:block; text-align:left;}
}
@media (max-height:760px) and (min-width:961px){
  .auth-left{padding-top:32px; padding-bottom:36px;}
  .hero{padding:24px 0;}
}