:root{
      --accent:#5c17ff;   /* main purple */
      --accent-dark:#4a10e0;
      --muted:#6b7280;
      --card-bg: #fff;
    }

    html,body{
      height:100%;
      background: #fbfcff;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* faint square grid background */
    .grid-bg{
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
      background-size: 120px 120px, 120px 120px;
      pointer-events:none;
      z-index:0;
    }

    .page-wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:4rem 1.25rem;
      position:relative;
      z-index:1;
    }

    .left-panel{
      width:45%;
      max-width:520px;
      padding-right:3rem;
    }

    .brand-initials{
      font-weight:800;
      color:var(--accent);
      font-size:56px;
      letter-spacing:1px;
    }

    .hero-title{
      font-size:48px;
      font-weight:800;
      margin-top:.5rem;
      line-height:1.02;
    }

    .hero-sub{
      color:var(--muted);
      margin-top:1rem;
      font-size:18px;
    }

    /* center card */
    .auth-card{
      width:420px;
      max-width:95vw;
      background:var(--card-bg);
      border-radius:24px;
      padding:1.6rem;
      box-shadow: 0 8px 30px rgba(20,20,40,0.06);
      border: 1px solid rgba(20,20,40,0.04);
    }

    .language-select{
      width:160px;
    }

    .form-control{
      border-radius:12px;
      height:52px;
      padding:0.9rem 1rem;
      box-shadow:none;
      border:1px solid rgba(20,20,40,0.06);
    }

    .form-label{
      font-weight:700;
      font-size:32px;
      margin-bottom:.6rem;
    }

    .forgot-link{
      font-size:14px;
      color:var(--muted);
      text-decoration:none;
    }

    .btn-sign{
      width:100%;
      height:52px;
      border-radius:12px;
      font-weight:700;
      font-size:18px;
      background: linear-gradient(90deg, var(--accent), var(--accent-dark));
      border: none;
      box-shadow: 0 6px 18px rgba(92,23,255,0.18);
      color: #fff;
    }

    .divider{
      display:flex;
      align-items:center;
      gap:.8rem;
      color:var(--muted);
      font-size:14px;
      margin:1rem 0;
    }

    .google-btn{
      width:100%;
      border-radius:12px;
      height:48px;
      border:1px solid rgba(20,20,40,0.06);
      background:transparent;
      font-weight:600;
      display:flex;
      align-items:center;
      gap:.8rem;
      justify-content:center;
    }

    .create-link{
      color:var(--accent);
      font-weight:600;
      text-decoration:none;
    }

    /* small screens layout */
    @media (max-width: 980px){
      .left-panel{ display:none; }
      .auth-card{ width:92vw; }
    }