/* =====================================================================
   login.css — sign-in / create-account screen (login.html). Also reused
   by profile.html, which borrows .wrap, .field, .submit, .tab and .err.
   A narrow centered card; login.html toggles between the two <form>s by
   adding/removing .show (the Log in vs Create account tabs).
   ===================================================================== */
/* Shared design tokens (mirror index.css / upload.css): --ok success
   green, --blue link blue, --accent error red. */
:root { --bg:#fff; --text:#0f0f0f; --text-soft:#606060; --line:#e5e5e5; --only:#00AFF0;
    --chip:#f2f2f2; --accent:#cc0000; --ok:#1d8a3a; --blue:#065fd4; --bar-h:56px; --radius:12px; }
  * { box-sizing:border-box; }
  html,body { margin:0; background:var(--bg); color:var(--text); font-family:"Roboto",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  .topbar { position:sticky; top:0; z-index:50; height:var(--bar-h); display:flex; align-items:center; gap:16px; padding:0 16px; background:var(--bg); }
  .brand { display:flex; align-items:center; gap:5px; font-weight:700; font-size:20px; letter-spacing:-0.5px; }
  .brand .play { width:28px; height:20px; background:var(--only); border-radius:6px; position:relative; }
  .brand .play::after { content:""; position:absolute; top:50%; left:52%; transform:translate(-50%,-50%); border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }
  .brand sup { font-size:10px; color:var(--text-soft); font-weight:400; }
  /* ---- centered card holding the heading, tab switch and the two forms ---- */
  .wrap { max-width:400px; margin:40px auto; padding:0 24px 64px; }
  h1 { font-size:22px; font-weight:700; margin:0 0 4px; }
  .sub { color:var(--text-soft); font-size:14px; margin-bottom:24px; }
  /* ---- Log in / Create account switch; the active tab is filled dark ---- */
  .tabs { display:flex; gap:8px; margin-bottom:20px; }
  .tab { flex:1; border:1px solid var(--line); background:#fff; border-radius:40px; padding:9px 0; font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
  .tab.active { background:var(--text); color:#fff; border-color:var(--text); }
  form { display:none; }
  form.show { display:block; }
  /* ---- form fields, the primary submit button, and inline error text ---- */
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:13px; font-weight:500; margin:0 0 4px; }
  .field input { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; outline:none; }
  .field input:focus { border-color:#1c62b9; }
  .field .hint { font-size:12px; color:var(--text-soft); margin-top:4px; }
  .submit { width:100%; background:var(--text); color:#fff; border:none; border-radius:40px; padding:12px; font-weight:500; font-size:15px; cursor:pointer; margin-top:4px; }
  .submit:disabled { opacity:.5; cursor:not-allowed; }
  .err { color:var(--accent); font-size:13px; margin-top:10px; min-height:16px; }