/* ===========================================================================
   Shared styling for login.html / signup.html.
   Split screen: left = brand + value props, right = the form panel.
   Same black / oil-slick / micro-label language as landing.html, with an
   animated candlestick chart standing in for the reference's audio waveform.
   =========================================================================== */
:root{
  --bg:#0d0f14;
  --panel:#141821;
  --fg:#f4f5f7;
  --dim:#a2a8b4;
  --faint:#767c88;
  --rule:rgba(255,255,255,.13);
  --rule-hi:rgba(255,255,255,.22);
  --up:#3ddc97;
  --down:#ff6b7a;
  --accent:#4fc3f7;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--fg); font-family:var(--font);
  min-height:100svh; -webkit-font-smoothing:antialiased;
}
/* Both panels are sized to fit one viewport exactly — the page should never
   scroll on desktop. Small screens fall back to normal scrolling. */
@media (min-width:941px){
  html,body{ height:100%; overflow:hidden; }
}
a{color:inherit; text-decoration:none;}

.ml{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.ml-faint{ color:var(--faint); }

/* ---------------- split shell ---------------- */
.auth{ display:grid; grid-template-columns:1fr 1fr; height:100svh; }
.auth-left{
  position:relative; overflow:hidden;
  padding:clamp(24px,3.4vw,52px);
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--rule);
}
.auth-right{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(22px,3vw,44px); overflow-y:auto;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(79,195,247,.05), transparent 70%);
}
.auth-mobile-header{ display:none; }
@media (max-width:940px){
  .auth{ grid-template-columns:1fr; }
  .auth-left{ display:none; }              /* form-first on small screens */
  .auth-right{ padding-top:clamp(28px,5vh,44px); }
  .auth-mobile-header{
    display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:410px; margin-bottom:20px;
  }
  .auth-mobile-header .auth-brand{ margin-bottom:14px; }
  .auth-mobile-header .candles{ width:100%; max-width:340px; }
  /* inputs below 16px trigger an unwanted auto-zoom on focus in mobile
     Safari — this alone is a real "not mobile friendly" bug on its own. */
  .field input{ font-size:16px; }
}

/* ---------------- market ambience (deliberately cheap) ----------------
   Two purely static layers — a terminal grid and a chart silhouette — drawn
   once and never repainted. No filters, no animation, no extra compositor
   layers, so this costs essentially nothing at runtime (unlike the
   feTurbulence ribbon, which is the one expensive effect on the page). */
.mkt-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
}
.mkt-chart{
  position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  width:100%; height:42%; opacity:.2;
}

/* ---------------- ambient backdrop (left panel only) ----------------
   Was a feTurbulence/feDisplacementMap/feSpecularLighting "oil-slick" filter
   with an animated <animate> tag on baseFrequency — the same class of
   expensive effect already stripped from landing.html for performance. Now
   just the static grid + candlestick chart, no filters, no per-frame cost. */
.slick{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.slick-fade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 48% at 42% 44%, transparent 0%, rgba(13,15,20,.4) 55%, var(--bg) 88%),
    linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}

/* ---------------- left content ---------------- */
.auth-left > *{ position:relative; z-index:1; }
/* ...but the backdrop wrapper must stay absolutely positioned behind it.
   Without this, `.auth-left > *` above forces it to position:relative, it
   collapses to zero height, and every layer inside it (oil-slick ribbon,
   grid, chart) silently disappears. */
.auth-left > .slick{ position:absolute; inset:0; z-index:0; }
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(14px,2.4vh,24px); }
.auth-brand img{ width:40px; height:40px; border-radius:11px; }
.auth-brand .n{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.auth-brand .s{ margin-top:3px; }

/* animated candlestick strip — replaces the reference's audio waveform */
.candles{ display:block; width:min(380px,100%); height:clamp(36px,5vh,52px); margin-bottom:clamp(10px,1.8vh,18px); }
.candles .wick{ stroke-width:1.5; stroke-linecap:round; }
.candles .body{ stroke-width:0; }
.candles g.up   .wick{ stroke:var(--up); }
.candles g.up   .body{ fill:var(--up); }
.candles g.down .wick{ stroke:var(--down); }
.candles g.down .body{ fill:var(--down); }
.candles g{ animation:candlePulse 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes candlePulse{
  0%,100%{ transform:scaleY(1);   opacity:.55; }
  50%    { transform:scaleY(1.5); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .candles g{ animation:none; opacity:.9; } }

.auth-left h1{
  margin:0 0 10px; font-size:clamp(22px,2.7vw,34px); font-weight:500;
  letter-spacing:-.03em; line-height:1.1;
}
.auth-left h1 em{ font-style:normal; color:var(--faint); }
.auth-left .lede{
  margin:0 0 clamp(16px,2.6vh,26px); max-width:46ch;
  font-size:12.5px; line-height:1.65; color:var(--dim);
}

/* value-prop cards */
.props{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-width:720px; }
@media (max-width:1240px){ .props{ grid-template-columns:repeat(2,1fr); } }
.prop{
  padding:13px; border-radius:12px; border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:border-color .3s ease, transform .3s ease;
}
.prop:hover{ border-color:var(--rule-hi); transform:translateY(-3px); }
.prop .ico{
  width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  margin-bottom:9px; border:1px solid var(--rule);
}
.prop .ico svg{ width:14px; height:14px; }
.prop h3{ margin:0 0 5px; font-size:12px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.prop p{ margin:0; font-size:10.8px; line-height:1.5; color:var(--dim); }

/* ---------------- right: form panel ---------------- */
.card{
  width:100%; max-width:410px; padding:clamp(22px,2.4vw,32px);
  border-radius:20px; border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.card h2{ margin:0 0 8px; font-size:22px; font-weight:600; letter-spacing:-.02em; }
.card .sub{ margin:0 0 20px; font-size:13px; line-height:1.65; color:var(--dim); }

/* ---- trust row: live measured stat + free/no-card badges ---- */
.trust-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.trust-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  font-size:11px; font-weight:600; color:var(--dim); border:1px solid var(--rule); white-space:nowrap;
}
.trust-pill.live{ color:var(--up); border-color:rgba(61,220,151,.28); background:rgba(61,220,151,.07); }
.trust-pill svg{ width:11px; height:11px; }

.field{ margin-bottom:14px; }
.field label{ display:block; margin-bottom:8px; }
.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap .lead{
  position:absolute; left:14px; display:flex; align-items:center; color:var(--faint); pointer-events:none;
}
.input-wrap .lead svg{ width:15px; height:15px; }
.field input{
  width:100%; padding:13px 14px 13px 40px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid var(--rule);
  color:var(--fg); font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input::placeholder{ color:var(--faint); }
.field input:focus{
  border-color:var(--accent); background:rgba(255,255,255,.055);
  box-shadow:0 0 0 4px rgba(79,195,247,.12);
}
.peek{
  position:absolute; right:12px; background:none; border:0; cursor:pointer;
  color:var(--faint); padding:6px; display:flex; align-items:center;
}
.peek:hover{ color:var(--fg); }
.peek svg{ width:16px; height:16px; }

.err{
  display:none; margin:0 0 16px; padding:11px 13px; border-radius:11px;
  background:rgba(255,107,122,.09); border:1px solid rgba(255,107,122,.28);
  color:#ffb4bc; font-size:12.5px; line-height:1.5;
}
.err.show{ display:block; }

.remember-row{ display:flex; align-items:center; gap:9px; margin:0 0 16px; cursor:pointer; user-select:none; }
.remember-row input[type="checkbox"]{
  width:16px; height:16px; accent-color:var(--accent); cursor:pointer; margin:0;
}

.submit{
  width:100%; padding:14px; border-radius:12px; border:1px solid var(--rule-hi);
  background:linear-gradient(180deg, rgba(79,195,247,.22), rgba(79,195,247,.08));
  color:var(--fg); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.submit:hover:not(:disabled){
  transform:translateY(-2px); border-color:var(--accent);
  box-shadow:0 14px 34px -14px rgba(79,195,247,.6);
}
.submit:disabled{ opacity:.6; cursor:default; }

.or-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; }
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background:var(--rule); }
.or-divider span{ font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px; border-radius:12px; border:1px solid var(--rule);
  background:rgba(255,255,255,.03); color:var(--fg); font-size:13.5px; font-weight:600;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.google-btn:hover{ border-color:var(--rule-hi); background:rgba(255,255,255,.06); transform:translateY(-1px); }

.alt{ margin:22px 0 0; text-align:center; font-size:13px; color:var(--dim); }
.alt a{ color:var(--accent); font-weight:600; }
.alt a:hover{ text-decoration:underline; }

.secure{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:9px 15px; border-radius:999px; border:1px solid var(--rule);
  font-size:11.5px; color:var(--dim);
}
.secure svg{ width:13px; height:13px; color:var(--up); }
.auth-foot{ margin-top:12px; font-size:11px; color:var(--faint); text-align:center; line-height:1.7; max-width:420px; }
.auth-foot a{ color:var(--dim); }
.auth-foot a:hover{ color:var(--fg); }

/* ---- login success animation — a brief checkmark burst before redirect ---- */
.login-success{
  position:fixed; inset:0; z-index:900; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.login-success.show{ opacity:1; pointer-events:all; }
.login-success .ring{
  width:64px; height:64px; border-radius:50%; border:2px solid var(--up);
  display:flex; align-items:center; justify-content:center;
  transform:scale(.6); opacity:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.login-success.show .ring{ transform:scale(1); opacity:1; }
.login-success .ring svg{ width:28px; height:28px; color:var(--up); }
.login-success .ring svg path{
  stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .4s ease .25s;
}
.login-success.show .ring svg path{ stroke-dashoffset:0; }
.login-success p{ margin:0; font-size:13px; color:var(--dim); opacity:0; transition:opacity .4s ease .3s; }
.login-success.show p{ opacity:1; }