/* ===== MountScale login =====
   Colors are taken from the logo:
   --blue   the bright "M" strokes
   --indigo the dark "Scale" in the wordmark
   --mist   the pale shadow behind the strokes            */
:root{
  --blue:#1559ea;
  --blue-hover:#0f4bd0;
  --indigo:#1c1a8f;
  --mist:#d6e0ff;
  --bg:#f2f5fd;
  --ink:#141838;
  --muted:#6b7194;
  --line:#e2e7f5;
  --field:#f7f9fe;
  --danger:#c62f3a;
  --ok:#14804a;
  --font:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}

/* ---------- Page: centers everything both ways ---------- */
.pg{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;      /* vertical center */
  justify-content:center;  /* horizontal center */
  padding:40px 16px;
  overflow:hidden;
  isolation:isolate;
}
.wrap{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- Background: slanted strokes like the logo's "M" ---------- */
.stroke{
  position:absolute;
  z-index:-1;
  height:150px;
  border-radius:999px;
  transform:rotate(-45deg);
  pointer-events:none;
}
.s1{width:620px;left:-260px;bottom:40px;background:var(--blue);opacity:.10;}
.s2{width:620px;left:-110px;bottom:-140px;background:var(--blue);opacity:.06;}
.s3{width:560px;right:-230px;top:-40px;background:var(--mist);opacity:.9;}
.dot{
  position:absolute;z-index:-1;pointer-events:none;
  width:150px;height:150px;border-radius:50%;
  right:120px;top:300px;background:var(--blue);opacity:.07;
}

/* ---------- Brand ---------- */
.brand{
  margin-bottom:24px;
  display:flex;flex-direction:column;align-items:center;
}
.brand-row{display:flex;align-items:flex-end;}
.brand-mark{
  display:block;height:40px;width:auto;
  filter:drop-shadow(0 6px 12px rgba(21,89,234,.22));
}
.brand-word{
  font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:.8;
  margin-left:-3px;padding-bottom:2px;
}
.bw-ount{color:var(--blue);}
.bw-scale{color:var(--indigo);}
.brand-tag{
  margin-top:8px;
  font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
/* small lines on either side of the tagline */
.brand-tag::before,.brand-tag::after{
  content:'';width:20px;height:2px;border-radius:2px;background:var(--mist);
}

/* ---------- Card ---------- */
.card{
  width:100%;
  background:#fff;
  border-radius:24px;
  padding:28px 32px 30px;
  border:1px solid rgba(21,89,234,.08);
  box-shadow:
    0 1px 2px rgba(28,26,143,.04),
    0 24px 60px -20px rgba(28,26,143,.22);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- Tabs (segmented control) ---------- */
.tabs{
  display:flex;gap:4px;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  margin-bottom:26px;
}
.tab{
  flex:1;padding:8px 0;border:none;border-radius:999px;
  background:transparent;font:500 13px var(--font);color:var(--muted);
  cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;
}
.tab:hover{color:var(--ink);}
.tab.active{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(28,26,143,.12);}

/* ---------- Panels ---------- */
.panel{display:none;}
.panel.active{display:block;animation:fade .25s ease both;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

.ptitle{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;}
.psub{font-size:14px;color:var(--muted);line-height:1.45;margin-bottom:22px;}

/* ---------- Fields ---------- */
.fld{margin-bottom:16px;}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.flabel{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px;}
.flabel-row{display:flex;justify-content:space-between;align-items:baseline;}
.req{color:var(--danger);}

.inp{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--field);
  font:400 14px var(--font);
  color:var(--ink);
  outline:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.inp::placeholder{color:#a2a8c4;}
.inp:hover{border-color:#cdd5ee;}
.inp:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(21,89,234,.12);}

.pw-w{position:relative;}
.pw-w .inp{padding-right:44px;}
.pwt{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:none;border-radius:8px;background:none;
  cursor:pointer;font-size:14px;opacity:.55;transition:opacity .15s,background .15s;
}
.pwt:hover{opacity:1;background:var(--mist);}

.forgot{font-size:13px;color:var(--blue);text-decoration:none;font-weight:500;}
.forgot:hover{text-decoration:underline;}

/* ---------- Buttons ---------- */
.btn{
  width:100%;margin-top:8px;margin-bottom:18px;
  padding:13px;border:none;border-radius:12px;
  background:var(--blue);color:#fff;
  font:600 15px var(--font);cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(21,89,234,.6);
  transition:background .15s,transform .1s;
}
.btn:hover{background:var(--blue-hover);}
.btn:active{transform:translateY(1px);}

.btn-o,.btn-d{
  width:100%;padding:12px;border-radius:12px;
  font:600 14px var(--font);cursor:pointer;transition:background .15s,color .15s;
}
.btn-o{background:#fff;color:var(--blue);border:1.5px solid var(--blue);}
.btn-o:hover{background:var(--blue);color:#fff;}
.btn-d{margin-top:10px;background:#fff5f5;color:var(--danger);border:1.5px solid #f6cdd1;}
.btn-d:hover{background:#ffe9eb;}

/* Visible keyboard focus everywhere */
.tab:focus-visible,.btn:focus-visible,.btn-o:focus-visible,.btn-d:focus-visible,
.pwt:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ---------- Links under the button ---------- */
.swlink{text-align:center;font-size:13px;color:var(--muted);}
.swlink + .swlink{margin-top:6px;}
.swlink a{color:var(--blue);text-decoration:none;font-weight:500;}
.swlink a:hover{text-decoration:underline;}

/* ---------- Alerts ---------- */
.alert{display:none;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;}
.alert.success{display:block;background:#ebf8f1;color:var(--ok);border:1px solid #bfe6d1;}
.alert.error{display:block;background:#fff2f3;color:var(--danger);border:1px solid #f6cdd1;}

/* ---------- Account panel ---------- */
#p-account{text-align:center;}
.av{
  width:64px;height:64px;margin:4px auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:22px;font-weight:600;
  box-shadow:0 0 0 6px var(--mist);
}

/* ---------- Below the card ---------- */
.tagline{margin-top:24px;font-size:14px;font-weight:500;color:var(--indigo);opacity:.7;}
.footer{margin-top:6px;font-size:12px;color:var(--muted);opacity:.8;}

/* ---------- Small screens ---------- */
@media (max-width:480px){
  .card{padding:22px 20px 24px;border-radius:20px;}
  .brand-mark{height:34px;}
  .brand-word{font-size:26px;}
  .fld-row{grid-template-columns:1fr;gap:0;}
  .s3,.dot{display:none;}
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion:reduce){
  .card,.panel.active{animation:none;}
}