/* ---- vars ---- */
:root{
  --brand:#1a1a1a;          /* main color (button, focus, links) */
  --brand-hover:#000;       /* button hover */

  --r-card:20px;            /* card corners — soft */
  --r-field:9px;            /* inputs, button, toast — tight */
  --r-check:5px;            /* checkbox */

  --bg-1:#3d4351;           /* gradient top */
  --bg-2:#20242c;           /* gradient bottom */
  --glow:rgb(255 255 255 / .10);  /* halo behind the card */

  --ok:#28a745;             /* success toast */
  --err:#dc3545;            /* error toast */
}

/* ---- base ---- */
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#1a1a1a;
  background:
    radial-gradient(60% 45% at 50% 22%, var(--glow) 0%, transparent 70%),
    linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
  display:grid;
  place-items:center;
  padding:24px 16px;
}
@media (min-width:768px){
  body{align-items:start;padding-top:110px}
}

/* ---- card ---- */
.wrap{width:100%;max-width:480px}
.card{
  background:#fff;
  border-radius:var(--r-card);
  padding:44px 50px;
  box-shadow:
    0 1px 2px rgb(0 0 0 / .10),
    0 12px 28px -10px rgb(0 0 0 / .28),
    0 40px 70px -30px rgb(0 0 0 / .35);
}
.logo{display:block;height:60px;max-width:80%;margin:0 auto 32px;object-fit:contain}
h1{font-size:22px;font-weight:600;letter-spacing:-.01em;text-align:center;margin-bottom:6px}
.sub{color:#767676;text-align:center;margin-bottom:30px;font-size:14px}

/* ---- fields ---- */
.field{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
input[type=email],input[type=password],input[type=text],select{
  width:100%;
  padding:12px 14px;
  font:inherit;
  color:inherit;
  border:1px solid #e2e4e8;
  border-radius:var(--r-field);
  background:#fafbfc;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder{color:#b3b3b3}
input:hover,select:hover{border-color:#d0d3d9}
input:focus,select:focus{
  outline:none;
  background:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgb(0 0 0 / .07);
}
input[aria-invalid=true]{border-color:var(--err);background:#fff}
.error{display:none;color:var(--err);font-size:12.5px;margin-top:5px}
input[aria-invalid=true] ~ .error{display:block}

/* select (custom arrow) */
select{
  appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* password + toggle */
.pw{position:relative}
.pw input{padding-right:44px}
.pw button{
  position:absolute;right:6px;top:50%;translate:0 -50%;
  border:0;background:none;padding:8px;cursor:pointer;
  color:#9a9ea6;display:grid;place-items:center;
  border-radius:6px;transition:color .15s;
}
.pw button:hover{color:#1a1a1a}

/* ---- remember me / forgot ---- */
.row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px 16px;
  margin:6px 0 20px;font-size:13.5px;
}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;color:#4d4d4d;user-select:none}
.check input{
  appearance:none;flex:0 0 17px;width:17px;height:17px;margin:0;cursor:pointer;
  border:1.5px solid #ccc;border-radius:var(--r-check);
  background:#fff;
  display:grid;place-items:center;
  transition:.15s;
}
.check:hover input{border-color:#a8acb4}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::before{
  content:"";width:9px;height:9px;
  background:#fff;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
a{color:var(--brand);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}

/* ---- recaptcha ---- */
.g-recaptcha-outer{
  margin-bottom:18px;
  padding-left:12px;
  text-align:left;
  border-radius:var(--r-field);
  background:#fafbfc;
  border:1px solid #e2e4e8;
  overflow:hidden;
}
.g-recaptcha-inner{
  width:290px;height:73px;
  max-width:100%;
  overflow:hidden;
  margin:0;
}
.g-recaptcha{position:relative;left:-2px;top:-1px}

/* ---- button ---- */
button.primary{
  width:100%;
  padding:13px;
  font:inherit;font-weight:600;
  color:#fff;background:var(--brand);
  border:0;border-radius:var(--r-field);
  cursor:pointer;
  box-shadow:0 1px 2px rgb(0 0 0 / .18);
  transition:background .15s, transform .06s;
}
button.primary:hover{background:var(--brand-hover)}
button.primary:active{transform:translateY(1px)}
button.primary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
button.primary:disabled{opacity:.5;cursor:default;transform:none}
.gauth-margin{margin:30px 0}
.gauth-margin:last-of-type{margin-top:0}

/* ---- verification code field ---- */
.code{
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;
  font-weight:600;
  letter-spacing:.4em;
  text-indent:.4em;          /* compensates the trailing letter-spacing */
  padding:16px 14px;
}
.code::placeholder{color:#e0e0e0;font-weight:400}
@media (max-width:480px){
  .code{font-size:22px;letter-spacing:.3em;text-indent:.3em}
}
/* visually hidden label (kept for screen readers) */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---- signup + footer ---- */
.signup{
  text-align:center;font-size:13.5px;color:#767676;
  margin-top:24px;padding-top:22px;
  border-top:1px solid #eef0f2;
}
.copy{
  text-align:center;font-size:12.5px;
  color:rgb(255 255 255 / .45);
  padding:24px 0;
}

/* ---- toast messages ---- */
#msg-wrapper{
  position:fixed;z-index:9999;
  top:0;left:50%;translate:-50% 0;   /* desktop: top, centered */
  padding:20px;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
}
.msg{
  width:480px;
  margin-top:10px;
  padding:14px 18px;
  color:#fff;font-size:14px;font-weight:600;
  border-radius:var(--r-field);
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 6px 20px rgb(0 0 0 / .25);
  text-align:center;
  animation:msgIn .3s ease-out;
}
.msg.hiding{animation:msgOut .3s forwards}
.msg.success{background:var(--ok)}
.msg.error{background:var(--err)}
@keyframes msgIn{from{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes msgOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-100px);opacity:0}}

/* ---- responsive ---- */
@media (max-width:767px){
  #msg-wrapper{top:auto;bottom:0;left:0;translate:none;right:0}
  .msg{width:100%;max-width:480px}
  @keyframes msgIn{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
  @keyframes msgOut{from{transform:translateY(0);opacity:1}to{transform:translateY(100px);opacity:0}}
}
@media (max-width:480px){
  body{padding:16px 12px}
  .card{padding:32px 22px;border-radius:var(--r-card)}
  h1{font-size:20px}
  .sub{margin-bottom:26px}
  .row{font-size:13px}
  #msg-wrapper{padding:12px}
}
/* recaptcha: narrow screens */
@media (max-width:380px){
  .g-recaptcha-outer{padding-left:8px}
  .g-recaptcha-inner{width:246px;height:63px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .msg,.msg.hiding{animation:none}
}