.auth-page :where(*) { box-sizing: border-box; } /* local safety */
    .auth-page{
      --brand:#0ea5e9;
      --brand-2:#22d3ee;
      --ink:#0f172a;
      --muted:#6b7280;
      --line:#e5e7eb;
      --surface:#ffffff;
      --bg: oklch(0.98 0.02 250);

      background: var(--bg);
    }

    .auth-page .auth-wrap{
      max-width: 980px;
      margin: 48px auto;
      padding: 0 16px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
    }
    @media (max-width: 900px){
      .auth-page .auth-wrap{ grid-template-columns: 1fr; }
    }

    .auth-page .auth-left{
      border-radius: 20px;
      padding: 28px;
      background:
        linear-gradient(160deg, rgba(14,165,233,.10), rgba(34,211,238,.06)),
        var(--surface);
      border: 1px solid rgba(2,6,23,.06);
      box-shadow: 0 20px 50px rgba(2,8,23,.06);
      position: relative;
      overflow: hidden;
    }
    .auth-page .auth-left h2{
      margin: 0 0 10px;
      font-size: clamp(22px, 3vw, 30px);
      color: var(--ink);
    }
    .auth-page .auth-left p{ color: var(--muted); margin-top: 6px; }
    .auth-page .auth-bullets{
      margin-top: 16px;
      display: grid; gap: 8px; color: var(--ink); padding-left: 0;
    }
    .auth-page .auth-bullets li{ list-style: none; }
    .auth-page .auth-bullets li::before{
      content: '✓';
      margin-right: 8px;
      color: var(--brand);
      font-weight: 800;
    }
    .auth-page .blur{
      position: absolute; right: -60px; top: -60px;
      width: 180px; height: 180px;
      background: radial-gradient(closest-side, rgba(34,211,238,.35), transparent 70%);
      filter: blur(14px); pointer-events: none;
    }

    .auth-page .auth-card{
      border-radius: 20px;
      padding: 26px;
      background: #fff;
      border: 1px solid rgba(2,6,23,.06);
      box-shadow: 0 20px 50px rgba(2,8,23,.06);
    }
    .auth-page .auth-head{ display: grid; gap: 6px; margin-bottom: 14px; }
    .auth-page .auth-title{ font-size: 22px; color: var(--ink); margin: 0; }
    .auth-page .auth-sub{ color: var(--muted); font-size: 14px; }

    .auth-page .banner{
      padding: 10px 12px; border-radius: 12px; margin: 12px 0;
      font-size: 14px; display: flex; gap: 8px; align-items: center;
    }
    .auth-page .banner.success{
      border: 1px solid #d1fae5; background: #ecfdf5; color: #065f46;
    }
    .auth-page .banner.error{
      border: 1px solid #fecaca; background: #fef2f2; color: #7f1d1d;
    }

    /* Use .auth-form to avoid colliding with site .form */
    .auth-page .auth-form{ display: grid; gap: 10px; }
    .auth-page .auth-input{
      padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
      font-size: 14px; outline: none; width: 100%;
      background: #fff; color: var(--ink);
    }
    .auth-page .auth-input:focus{
      border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 12%, transparent);
    }

    .auth-page .pw-wrap{ position: relative; }
    .auth-page .pw-toggle{
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      border: 1px solid var(--line); background: #fff; border-radius: 8px;
      padding: 6px 8px; font-size: 12px; cursor: pointer;
    }

    /* Use .btn-auth to avoid colliding with global .btn */
    .auth-page .btn-auth{
      padding: 10px 14px; border-radius: 12px; border: 0; cursor: pointer;
      font-weight: 700; color: #0b1220;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 6px 16px rgba(14,165,233,.22);
      display: inline-flex; align-items: center; gap: 8px; justify-content: center;
      transition: transform .1s ease, filter .2s ease, box-shadow .2s ease;
    }
    .auth-page .btn-auth:hover{ filter: brightness(1.02); transform: translateY(-1px); }

    .auth-page .row{
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      flex-wrap: wrap;
    }
    .auth-page .helper{
      margin-top: 10px; font-size: 14px; color: var(--muted);
    }
    .auth-page .helper a{ color: var(--brand); font-weight: 600; text-decoration: none; }

    /* Visually hidden for a11y (scoped) */
    .auth-page .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }