@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

    :root{
      --accent-1: black;
      --accent-2:  black;
      --white: #fff;
      --muted: #666;
    }

    *{box-sizing:border-box}
    .auth-page{
      margin:0;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      font-family:'Poppins',sans-serif;
      background:var(--white);
      padding:1rem;
    }

    .auth-container{
      width:100%;
      max-width:420px;
      background:var(--white);
      box-shadow:0 8px 28px rgba(0,0,0,0.18);
      padding:2rem;
      /* no border-radius per your request */
    }

    .tabs{
      display:flex;
      gap:0;
      border-bottom:2px solid #f2f2f2;
      margin-bottom:1rem;
    }

    .tab{
      flex:1;
      padding:.8rem;
      background:transparent;
      border:0;
      font-weight:600;
      cursor:pointer;
      color:var(--muted);
      text-transform:none;
      outline-offset:2px;
    }

    .tab.active{
      color:var(--accent-1);
      border-bottom:3px solid var(--accent-1);
    }

    form{display:block}
    .hidden{ display:none; } /* crucial: hides the form */

    .field{
      margin-bottom:1rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"]{
      width:100%;
      padding:.9rem;
      font-size:1rem;
      border:1px solid #e6e6e6;
      background:#fff;
      color:#222;
      /* no border-radius */
    }

    input:focus{ border-color:var(--accent-1); outline:none; }

    .btn{
      width:100%;
      padding:1rem;
      font-weight:700;
      border:0;
      cursor:pointer;
      color:var(--white);
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
    }

    .extra-links{ text-align:center; margin-top:.8rem; font-size:.9rem; color:var(--muted); }
    .extra-links a{ color:var(--accent-1); text-decoration:none; }

    .msg{ padding:.6rem; font-size:.95rem; margin-bottom:1rem; display:none; }
    .msg.show{ display:block; }
    .msg.error{ background:#fdecea; color:#7a1414; }
    .msg.success{ background:#e6f5ea; color:#1a5f2b; }

    @media (max-width:480px){
      .auth-container{ padding:1rem; }
      .tab{ padding:.6rem; font-size:.95rem; }
    }