:root{
      --bg: #f7f7fb;
      --card: #ffffff;
      --text: #1f2937;
      --muted:#6b7280;
      --brand:#e63946;
      --brand-dark:#c52f3b;
      --stroke:#e5e7eb;
      --success:#0a6;
      --error:#b00020;
      --focus:#1f2937;
      --radius: 16px;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--text);
      background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
      min-height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 24px;
    }

    .auth-shell{
      width:100%;
      max-width: 980px;
      display:grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 24px;
      align-items: center;
    }

    /* Left: brand + copy */
    .brand-pane{
      display:flex;
      flex-direction:column;
      gap:16px;
      padding: 8px;
    }
    .brand-head{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .brand-logo{
      width:64px; height:auto;
      border-radius:12px;
      box-shadow:0 6px 18px rgba(0,0,0,.06);
      background:#fff;
    }
    .brand-title{
      margin:0;
      font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem);
      line-height:1.2;
    }
    .brand-sub{
      margin:0;
      color:var(--muted);
      max-width: 48ch;
    }

    /* Right: card with form */
    .card{
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: 0 12px 30px rgba(0,0,0,.06);
      padding: 28px;
    }
    .card h1{
      margin:0 0 4px 0;
      font-size: 1.35rem;
      line-height:1.2;
    }
    .card p.helper{
      margin:.25rem 0 1rem 0;
      color:var(--muted);
      font-size:.95rem;
    }

    .alert{
      margin: 10px 0 14px 0;
      border-radius:12px;
      padding:10px 12px;
      font-size:.95rem;
      line-height:1.2;
    }
    .alert.success{ background:#e9fbf0; color:#055e33; border:1px solid #c8f2d8;}
    .alert.error{ background:#fdecec; color:#8a0f21; border:1px solid #f8c8cf;}

    .field{
      margin-bottom: 14px;
    }
    .field label{
      display:block;
      font-weight:600;
      margin: 0 0 6px 0;
    }
    .input{
      width:100%;
      border:1px solid var(--stroke);
      background:#fff;
      border-radius:12px;
      padding: 12px 14px;
      font-size:1rem;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .input:focus{
      border-color: var(--focus);
      box-shadow: 0 0 0 3px rgba(31,41,55,.12);
    }

    .actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top: 8px;
    }

    .btn{
      display:inline-block;
      border:none;
      background:var(--brand);
      color:#fff;
      font-weight:700;
      padding: 12px 18px;
      border-radius:12px;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
      box-shadow: 0 8px 22px rgba(230,57,70,.25);
    }
    .btn:hover{ background:var(--brand-dark); transform: translateY(-1px); }
    .btn:focus-visible{ outline:3px solid #000; outline-offset:3px; }

    .link{
      color: var(--brand-dark);
      text-decoration:none;
      font-weight:600;
    }
    .link:hover{ text-decoration:underline; }

    .foot-note{
      margin-top: 10px; color:var(--muted); font-size:.92rem;
    }

    /* Responsive */
    @media (max-width: 920px){
      .auth-shell{ grid-template-columns: 1fr; max-width: 560px; }
      .brand-pane{ order:-1; text-align:center; align-items:center; }
      .brand-sub{ max-width: unset; }
    }