/*
 * The look of every Air2Pure account page -- sign in, sign up, forgot password,
 * reset password, verify e-mail, sign out.
 *
 * ONE file, shared by all of them. Written once so the pages cannot drift apart
 * and so a change to the brand is a change in a single place.
 */
:root{
    --brand:#2954EF; --brand-hover:#1E42C8; --brand-link:#5A82FF;
    --panel:#0B1631; --panel-2:#0d1a35; --field:#16233F; --field-line:#25355C;
    --ink:#FFFFFF; --ink-dim:#9AA5B8; --line:#1E2C4D; --red:#FF6B6B;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--panel); color:var(--ink); display:flex; min-height:100%;
  }
  /* Left: the wave artwork, with the logo sitting on it. */
  .art{
    flex:1 1 55%; position:relative; min-height:100vh;
    background:#0A1330 url("/assets/auth_bg_image-BWbYDhjW.png") center/cover no-repeat;
  }
  .brand{position:absolute; top:32px; left:36px; display:flex; flex-direction:column; gap:2px}
  .brand svg{width:64px;height:auto;display:block}
  .brand span{font-size:11px; font-weight:800; letter-spacing:.22em; color:#fff; opacity:.95}
  /* Right: the form panel. */
  .panel{
    flex:0 0 45%; display:flex; align-items:center; justify-content:center;
    padding:48px 40px; background:var(--panel-2); min-height:100vh;
  }
  .form{width:100%; max-width:380px}
  h1{font-size:30px; line-height:1.2; font-weight:700; margin:0 0 8px; letter-spacing:-.02em}
  .sub{margin:0 0 34px; color:var(--ink-dim); font-size:14px}
  .field{position:relative; margin:0 0 16px}
  .field .ico{
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; opacity:.55; pointer-events:none;
  }
  .field input{
    width:100%; padding:16px 48px; font-size:14.5px; font-family:inherit; color:var(--ink);
    background:var(--field); border:1.5px solid var(--field-line); border-radius:999px;
    transition:border-color .15s, box-shadow .15s;
  }
  .field input::placeholder{color:#7A879F}
  .field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(41,84,239,.25)}
  .eye{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    background:none; border:0; padding:6px; cursor:pointer; opacity:.55; line-height:0;
  }
  .eye:hover{opacity:.9}
  .eye svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.7}
  .forgot{display:inline-block; margin:2px 0 22px; color:var(--brand-link); font-size:13.5px; font-weight:600; text-decoration:none}
  .forgot:hover{text-decoration:underline}
  button.primary{
    width:100%; padding:16px; font-size:15.5px; font-weight:700; font-family:inherit;
    color:#fff; background:var(--brand); border:none; border-radius:999px; cursor:pointer;
    transition:background .15s;
  }
  button.primary:hover:not(:disabled){background:var(--brand-hover)}
  button.primary:disabled{opacity:.6; cursor:default}
  .or{margin:26px 0 18px; text-align:center; color:var(--ink-dim); font-size:13.5px}
  .socials{display:flex; justify-content:center; gap:16px; margin:0 0 26px}
  .socials button{
    width:52px; height:52px; border-radius:50%; border:1px solid var(--line);
    background:#111E3C; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:border-color .15s, background .15s;
  }
  .socials button:hover{border-color:var(--brand); background:#16233F}
  .socials svg{width:22px;height:22px}
  .foot{text-align:center; font-size:13.5px; color:var(--ink-dim)}
  .foot a{color:var(--brand-link); font-weight:700; text-decoration:none}
  .foot a:hover{text-decoration:underline}
  .msg{
    display:none; padding:12px 16px; border-radius:12px; font-size:13.5px; line-height:1.45;
    margin:0 0 18px; background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.45); color:var(--red);
  }
  .msg.show{display:block}
  .msg.info{background:rgba(90,130,255,.12); border-color:rgba(90,130,255,.45); color:#AFC3FF}
  /* Narrow screens: artwork becomes a banner above the form. */
  @media (max-width:880px){
    body{flex-direction:column}
    .art{flex:0 0 190px; min-height:190px}
    .panel{flex:1 1 auto; min-height:auto; padding:36px 24px 56px}
    .brand{top:22px; left:24px}
    h1{font-size:26px}
  }

/* ---- extras used by the pages other than sign-in ------------------------- */
.back-link{display:inline-block;margin-top:20px;color:var(--ink-dim);font-size:13px;text-decoration:none}
.back-link:hover{color:var(--brand-link)}
.hint{font-size:12.5px;color:var(--ink-dim);margin:-8px 0 16px}
.row2{display:flex;gap:12px}
.row2 .field{flex:1}
.ok{
  display:none;padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.45;
  margin:0 0 18px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.45);color:#7BE8A6;
}
.ok.show{display:block}
.center{text-align:center}
.big-note{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0 0 22px}