/* ---------- Auth ---------- */
  #screen-login, #screen-signup{ display:block; }
  .auth-wrap{min-height:100%; padding:56px 26px 40px; display:flex; flex-direction:column;}
  .auth-yellow{background:var(--yellow);} .auth-blue{background:var(--blue);}
  .auth-top{display:flex; justify-content:space-between; align-items:center;}
  .auth-back{width:38px; height:38px; border-radius:50%; border:none; background:rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; transition:background 150ms ease, transform 120ms ease;}
  .auth-back:active{background:rgba(0,0,0,0.16); transform:scale(0.9);}
  .auth-link{border:none; background:none; font-weight:600; font-size:var(--fs-base); color:var(--black); text-decoration:underline; transition:opacity 150ms ease;}
  .auth-link:active{opacity:0.55;}
  .auth-title{font-size:var(--fs-4xl); font-weight:800; margin-top:30px; line-height:1.1;}
  .auth-tagline{font-weight:300; font-size:var(--fs-base); margin-top:8px; color:rgba(18,18,18,0.65);}
  .field{margin-top:20px;}
  .field label{display:block; font-size:var(--fs-xs); font-weight:600; margin-bottom:8px; color:rgba(18,18,18,0.6);}
  /* Round 11: `outline` can't be animated with a transition on its own width change in every
     browser reliably, so the focus ring now transitions via `outline-offset` (0 → 2px) plus a
     `box-shadow` glow — both of those interpolate smoothly everywhere. Outline is kept (not
     replaced outright) so keyboard-focus visibility rules aren't weakened, just made to ease in
     instead of snapping. */
  .field input{width:100%; border:none; border-radius:14px; padding:15px 16px; font-size:var(--fs-md); background:rgba(255,255,255,0.85); outline:none; font-weight:500; transition:outline-offset 150ms ease, box-shadow 150ms ease;}
  .field input:focus{outline:2px solid var(--black); outline-offset:2px; box-shadow:0 0 0 4px rgba(18,18,18,0.08);}
  .admin-label{display:block; font-size:var(--fs-xs); font-weight:600; margin-bottom:6px; color:rgba(18,18,18,0.6);}
  .admin-input{width:100%; border:none; border-radius:12px; padding:12px 14px; font-size:var(--fs-base); background:rgba(18,18,18,0.05); color:var(--ink); outline:none; font-weight:500; font-family:inherit; box-sizing:border-box; transition:outline-offset 150ms ease, box-shadow 150ms ease;}
  .admin-input:focus{outline:2px solid var(--black); outline-offset:2px; box-shadow:0 0 0 4px rgba(18,18,18,0.08);}
  .btn{border:none; border-radius:999px; padding:15px 20px; font-weight:700; font-size:var(--fs-md); display:flex; align-items:center; justify-content:center; gap:8px; width:100%; transition:transform 120ms ease, opacity 150ms ease;}
  .btn-black{background:var(--black); color:#fff;} .btn-black:active{transform:scale(0.98);}
  .btn-outline{background:transparent; border:2px solid var(--black); color:var(--black);}
  .btn-outline:active{transform:scale(0.98); opacity:0.7;}
  .btn:disabled{opacity:0.5; cursor:not-allowed;}
  .auth-submit{margin-top:24px;}
  .auth-divider{display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:rgba(18,18,18,0.5); font-size:var(--fs-xs);}
  .auth-divider::before,.auth-divider::after{content:""; flex:1; height:1px; background:rgba(18,18,18,0.2);}
  .oauth-btn{border-radius:999px; border:none; padding:14px 20px; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:var(--fs-base); margin-top:10px; transition:transform 120ms ease, opacity 150ms ease;}
  .oauth-btn:active{transform:scale(0.98); opacity:0.85;}
  .oauth-apple{background:var(--black); color:#fff;}
  .oauth-google{background:#fff; color:var(--black); border:1.5px solid rgba(0,0,0,0.15) !important;}
  .auth-footnote{margin-top:auto; padding-top:24px; text-align:center; font-size:var(--fs-sm); color:rgba(18,18,18,0.65);}
  .auth-footnote b{text-decoration:underline; cursor:pointer;}
  .error-text{color:var(--danger); font-size:var(--fs-sm); margin-top:8px; min-height:16px; font-weight:500;}
  .setup-banner{margin-top:22px; background:rgba(18,18,18,0.08); border:1px dashed rgba(18,18,18,0.35); border-radius:12px; padding:12px 14px; font-size:var(--fs-xs); line-height:1.6; color:rgba(18,18,18,0.75);}

  @media (min-width:860px){
    .auth-wrap{ padding-left:max(26px, calc((100% - 520px)/2)); padding-right:max(26px, calc((100% - 520px)/2)); padding-top:9vh; }
  }