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

    :root{
      --accent-1: #6d28d9; /* purple */
      --accent-2: #06b6d4; /* teal */
      --accent-3: #ff7a59; /* coral */
      --card: rgba(255,255,255,0.92);
      --muted: #6b7280;
      --glass-shadow: 0 10px 30px rgba(11,17,28,0.12);
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    html,body { height:100%; margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#0f172a; }

    /* --- Modern animated background --- */
    body{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
      background: linear-gradient(180deg, #f7f9fc 0%, #eef6fb 40%, #f3f6ff 100%);
      overflow:hidden;
    }

    .bg {
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      overflow:hidden;
    }
    .blob {
      position:absolute;
      filter: blur(36px) saturate(110%);
      opacity:0.22;
      transform: translate3d(0,0,0);
      will-change: transform, opacity;
      border-radius: 50%;
      mix-blend-mode: screen;
      animation: floatY 9s ease-in-out infinite;
    }
    .blob.b1 { width:520px; height:520px; left:-10%; top:-8%; background: radial-gradient(circle at 30% 30%, var(--accent-1), transparent 35%), linear-gradient(135deg, var(--accent-1), var(--accent-2)); animation-duration: 12s; }
    .blob.b2 { width:420px; height:420px; right:-8%; bottom:-12%; background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); opacity:0.18; animation-duration: 10s; animation-delay: 1.5s; }
    .blob.b3 { width:260px; height:260px; left:30%; bottom:6%; background: linear-gradient(135deg, #ffd6a5, #ff7a59); opacity:0.12; animation-duration: 14s; animation-delay: 0.6s; }

    @keyframes floatY {
      0% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-18px) scale(1.02); }
      100% { transform: translateY(0) scale(1); }
    }

    /* subtle grid lines / vignette */
    .vignette {
      position:fixed; inset:0; z-index:0; pointer-events:none;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,0.03), transparent 8%),
                  radial-gradient(900px 500px at 95% 90%, rgba(6,182,212,0.02), transparent 8%);
      mix-blend-mode: normal;
    }

    /* Container */
    .wrap {
      position:relative;
      z-index:10;
      width:100%;
      max-width:420px;
      margin: 28px;
      padding: 28px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(6px) saturate(120%);
      border: 1px solid rgba(13,18,31,0.04);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .wrap:focus-within, .wrap:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(11,17,28,0.12); }

    h2 { text-align:center; color:#0f172a; margin: 0 0 12px 0; font-weight:700; font-size:1.25rem; }
    .sub { text-align:center; color:var(--muted); font-size:0.9rem; margin-bottom:10px; }

    /* Tabs */
    .tabs { display:flex; gap:8px; margin-bottom: 18px; justify-content:center; }
    .tab {
      padding: 8px 14px;
      border-radius: 999px;
      cursor:pointer;
      font-weight:600;
      color:var(--muted);
      background: transparent;
      border: 1px solid transparent;
      transition: all .18s ease;
      font-size:0.95rem;
    }
    .tab.active {
      background: linear-gradient(90deg, rgba(109,40,217,0.12), rgba(6,182,212,0.06));
      color: var(--accent-1);
      box-shadow: 0 6px 18px rgba(99,102,241,0.06);
      border-color: rgba(99,102,241,0.06);
    }

    form { margin-top: 6px; }
    .form-group { margin-bottom: 12px; }
    label { display:block; font-size:0.88rem; margin-bottom:6px; color:#334155; font-weight:600; }
    input {
      width:100%;
      padding: 12px 12px;
      border-radius: 10px;
      border: 2px solid rgba(15,23,42,0.06);
      background: rgba(255,255,255,0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      font-size:1rem;
      transition: box-shadow .14s, border-color .14s;
    }

    .password-wrapper {
      position: relative;
      width: 100%;
    }
    .password-wrapper input {
      padding-right: 40px;
    }
    .toggle-password {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: var(--muted);
      background: none;
      border: none;
      font-size: 1rem;
      padding: 4px 8px;
      transition: color .14s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .toggle-password:hover {
      color: var(--accent-1);
    }
    input:focus {
      outline:none;
      border-color: rgba(99,102,241,0.95);
      box-shadow: 0 0 0 3px rgba(99,102,241,0.1), 0 6px 20px rgba(99,102,241,0.08);
    }

    .btn {
      width:100%;
      padding: 12px;
      border-radius: 10px;
      border: none;
      font-weight:700;
      font-size:1rem;
      cursor:pointer;
    }
    .btn-primary {
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      color:white;
      box-shadow: 0 10px 30px rgba(79,70,229,0.12);
      transition: transform .12s ease, box-shadow .12s;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(79,70,229,0.12); }
    .google-btn {
      width:100%;
      margin-top: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 10px;
      border-radius:10px;
      background: white;
      border: 1px solid rgba(15,23,42,0.04);
      cursor:pointer;
      font-weight:700;
    }
    .google-btn img { display:inline-block; vertical-align:middle; }

    .divider {
      display:flex; gap:10px; align-items:center; margin: 14px 0; color:var(--muted); font-weight:600; font-size:0.85rem;
    }
    .divider::before, .divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(15,23,42,0.04), transparent); border-radius:1px; }

    .hidden { display:none; }

    /* small screens and niceties */
    @media (max-width: 480px) {
      .wrap { padding:18px; margin: 18px; max-width: 92%; border-radius: 14px; }
      h2 { font-size:1.1rem; }
      .tabs { gap:6px; }
      .tab { padding: 7px 10px; font-size:0.92rem; }
      input { padding: 10px; border-radius:8px; font-size:0.95rem; }
      .btn-primary { padding: 11px; border-radius: 8px; }
      .google-btn { padding: 10px; font-size:0.95rem; }
      .blob.b1 { display:none; } /* hide large blobs on tiny screens to reduce clutter */
      .blob.b2 { opacity:0.12; transform:scale(0.9); }
    }

    @media (min-width: 920px) {
      .wrap { transform: translateZ(0); } /* help GPU */
    }