/* Sign-in pages for the Rap Trainer.
   Lifted from the Comedy Studio's AuthForm so the two products look like one
   family: same tokens, same split card, same eyebrow and field styling. These
   pages are served before the app loads, so nothing here depends on styles.css. */
:root{
  --bg:#0f3d2e; --bg2:#0c3325; --leaf:#7bd88f; --sun:#ffd23e; --mango:#ff8e3c;
  --flam:#ff5d8f; --cream:#f4ecd6; --sky:#6ec6e8; --lilac:#b89cff; --mind:#3bbf9e;
  --card:#15523c; --line:#2c6b50; --muted:#9fc4b3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--cream);
  font-family:'Fredoka',system-ui,sans-serif;font-size:15px;line-height:1.5;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.wm{font-family:'Baloo 2',sans-serif;font-weight:800}

.authwrap{max-width:720px;margin:0 auto;padding:60px 26px}
.authwrap--narrow{max-width:440px}

.authhead{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:8px}
.authhead .wm{font-size:26px;line-height:1.05}
.wm-strap{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-style:italic;font-size:13px;color:var(--leaf);letter-spacing:.3px}
.authtag{text-align:center;font-size:13.5px;color:var(--muted);font-style:italic;margin-bottom:22px}

.authcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
/* Two-panel arrival: the form on one side, the other path on the other. */
.authsplit{display:grid;grid-template-columns:1fr 1px 1fr;gap:30px;align-items:start;padding:32px}
.authrule{background:var(--line);align-self:stretch;border-radius:1px}
.authcol--alt{align-self:center}

.auth-eyebrow{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--sun);margin-bottom:8px;
}
.authlead{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 18px}

.formrow{margin-bottom:14px}
.formrow label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);font-family:inherit;font-size:15px;padding:12px 14px;
}
.field::placeholder{color:#7ea491}
.field:focus{outline:none;border-color:var(--leaf)}

.pill{
  display:inline-block;border:none;border-radius:999px;font-family:'Baloo 2',sans-serif;
  font-weight:800;padding:11px 22px;font-size:13.5px;cursor:pointer;
  transition:transform .1s,filter .1s;
}
.pill:hover{filter:brightness(1.06)}
.pill-mango{background:var(--mango);color:#2b1400}
.pill-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--line)}
.pill-ghost:hover{border-color:var(--sky);color:var(--sky)}
.pill:disabled{opacity:.6;cursor:default;filter:none}
.authbtn{display:block;width:100%;text-align:center;padding:13px 16px;font-size:15px}

.errbox{
  background:rgba(255,93,143,.12);border:1px solid var(--flam);color:#ffd7e4;
  border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:14px;
}
.okbox{
  background:rgba(123,216,143,.12);border:1px solid var(--leaf);color:#dff7e5;
  border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:14px;
}
.authsmall{margin-top:12px;font-size:13px}
.authsmall a{color:var(--sky)}
.authsmall a:hover{text-decoration:underline}

/* The recovery code is the only way back into an account, so it gets a panel of
   its own rather than a line of small print. */
.code{background:var(--bg2);border:1px dashed var(--sun);border-radius:12px;padding:16px;margin-top:4px}
.code .lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--sun)}
.code .val{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;font-weight:700;
  color:var(--cream);margin:8px 0;letter-spacing:1px;word-break:break-all;
}
.code .why{font-size:13px;color:var(--muted);line-height:1.5}

@media (max-width:600px){
  .authwrap{padding:34px 18px}
  .authsplit{grid-template-columns:1fr;gap:22px;padding:24px}
  .authrule{height:1px}
  .authcol--alt{align-self:start}
}