* { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Inter',sans-serif;
      background: #f5f7fa;
      display:flex; align-items:center; justify-content:center;
      min-height:100vh; padding:1rem; overflow-y:auto;
      color:#676767;
    }
    a { text-decoration:none; }

    /* WRAPPER */
    .wrapper {
      display:flex; width:100%; max-width:920px;
      background:#fff; border-radius:16px;
      box-shadow:0 12px 48px rgba(0,0,0,0.1);
      overflow:hidden; position:relative;
    }
    .wrapper::before {
      content:""; position:absolute; top:0; left:50%;
      width:100%; height:100%;
      background:#f5f7fa; border-radius:50%;
      transform: translateX(-50%) translateY(-20%);
      z-index:1;
    }

    /* INTRO PANEL */
    .intro {
      flex:1; position:relative; z-index:2;
      background: linear-gradient(135deg, #108a00 0%, #0e7800 100%);
      padding:3rem 2rem; color:#fff;
      display:flex; flex-direction:column;
      justify-content:center; align-items:flex-start;
      order:0;
    }
    .intro::after {
      content:""; position:absolute; bottom:0; right:0;
      width:60%; height:60%;
      background: url('https://cdn.jsdelivr.net/gh/undraw/undraw@latest/education.svg') no-repeat center bottom;
      background-size:contain; opacity:0.15;
    }
    .intro .logo { font-size:2.75rem; font-weight:700; margin-bottom:1rem; }
    .intro .pitch { font-size:1.05rem; line-height:1.6; margin-bottom:2rem; max-width:300px; }
    .intro .btn-signup {
      padding:0.75rem 1.5rem; background:#fff; color:#108a00;
      border:none; border-radius:8px; font-size:1rem; font-weight:600;
      cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.15);
      transition:transform .2s, box-shadow .2s;
    }
    .intro .btn-signup:hover {
      transform: translateY(-2px);
      box-shadow:0 6px 20px rgba(0,0,0,0.2);
    }

    /* LOGIN PANEL */
    .login {
      flex:1; position:relative; z-index:2;
      padding:3rem 2.5rem; display:flex;
      flex-direction:column; justify-content:center;
      order:0;
    }
    .login h2 { font-size:2rem; color:#181818; margin-bottom:0.5rem; font-weight:600; }
    .login p  { font-size:1rem; margin-bottom:1.75rem; }
    .btn-google {
      display:flex; align-items:center; width:100%;
      padding:0.75rem; border:1px solid #ddd;
      border-radius:8px; margin-bottom:1.5rem;
      cursor:pointer; background:#fff;
      transition:background .2s, box-shadow .2s;
    }
    .btn-google img { width:20px; margin-right:0.75rem; }
    .btn-google:hover {
      background:#f9f9f9; box-shadow:0 4px 12px rgba(0,0,0,0.1);
    }

    .input-group { margin-bottom:1.25rem; }
    .input-group label {
      display:block; font-size:0.85rem; margin-bottom:0.3rem; color:#555;
    }
    .input-group input {
      width:100%; padding:0.75rem 1rem;
      border:1px solid #ccc; border-radius:8px;
      font-size:0.95rem;
      transition:border-color .2s, box-shadow .2s;
    }
    .input-group input:focus {
      border-color:#108a00;
      box-shadow:0 0 6px rgba(16,138,0,0.3);
      outline:none;
    }

    /* Custom validation messages */
    .input-group input:invalid { }

    .btn-primary {
      width:100%; padding:0.75rem; background:#108a00;
      color:#fff; font-size:1rem; font-weight:600;
      border:none; border-radius:8px; cursor:pointer;
      transition:background .2s, transform .1s;
    }
    .btn-primary:hover { background:#0e7800; transform: translateY(-1px); }

    .error {
      color:#e74c3c; font-size:0.85rem; margin-bottom:1rem;
    }
    .footer {
      text-align:center; margin-top:1.5rem;
      font-size:0.85rem; color:#888;
    }
    .footer a { color:#108a00; }

    /* RESPONSIVE SWAP */
    @media(max-width: 780px) {
      body {
        align-items:flex-start; justify-content:flex-start;
        padding-top:2rem; height:auto;
      }
      .wrapper { flex-direction:column; }
      .wrapper::before { display:none; }
      .login { order:1; }
      .intro { order:2; }
      .intro, .login { padding:2rem 1.5rem; }
      .intro .logo { font-size:2.25rem; }
      .login h2 { font-size:1.75rem; }
    }