:root {
    --bg: #0b0e17;
    --surface: #131722;
    --border: #1e2535;
    --accent: #e8ff47;
    --accent2: #4fffb0;
    --text: #f0f4ff;
    --muted: #5a6480;
    --error: #ff5f6d;
    --radius: 12px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  body::before {
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(232,255,71,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232,255,71,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events:none;
  }
  .blob {
    position:fixed;
    border-radius:50%;
    pointer-events:none;
  }
  .blob-1 {
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(232,255,71,.1) 0%,transparent 70%);
    top:-100px;right:-100px;
    animation:float1 8s ease-in-out infinite;
  }
  .blob-2 {
    width:400px;height:400px;
    background:radial-gradient(circle,rgba(79,255,176,.09) 0%,transparent 70%);
    bottom:-80px;left:-80px;
    animation:float2 10s ease-in-out infinite;
  }
  @keyframes float1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,20px) scale(1.05)} }
  @keyframes float2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-15px) scale(1.08)} }

  .card {
    position:relative;z-index:1;
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding: 3rem 3.5rem;
    width:100%;max-width:440px;
    margin:1.5rem;
    box-shadow: 0 40px 120px rgba(0,0,0,.5);
    animation: slideUp .5s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes slideUp {
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
  }
  .logo {
    font-family:'Syne',sans-serif;font-weight:800;
    font-size:1.5rem;letter-spacing:-0.03em;
    margin-bottom:2.2rem;display:block;
  }
  .logo span{color:var(--accent);}

  h1{
    font-family:'Syne',sans-serif;
    font-size:1.75rem;font-weight:700;
    letter-spacing:-0.02em;margin-bottom:.4rem;
  }
  .subtitle{color:var(--muted);font-size:.9rem;margin-bottom:2rem;}

  .field{margin-bottom:1.1rem;position:relative;}
  .field label{
    display:block;font-size:.78rem;font-weight:500;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin-bottom:.45rem;
  }
  .input-wrap{position:relative;}
  .field input{
    width:100%;
    background:var(--bg);
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    padding:.75rem 2.8rem .75rem 1rem;
    color:var(--text);
    font-family:'DM Sans',sans-serif;font-size:.95rem;
    transition:border-color .2s,box-shadow .2s;outline:none;
  }
  .field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(232,255,71,.12);
  }
  .field input.error{border-color:var(--error);}
  .toggle-pw{
    position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
    cursor:pointer;background:none;border:none;
    color:var(--muted);font-size:.8rem;letter-spacing:.04em;
    font-family:'DM Sans',sans-serif;padding:0;
    transition:color .2s;
  }
  .toggle-pw:hover{color:var(--accent);}
  .err-msg{
    font-size:.78rem;color:var(--error);
    margin-top:.3rem;display:none;
  }
  .err-msg.show{display:block;animation:fadeIn .2s;}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  .row-meta{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1.5rem;
  }
  .remember{display:flex;align-items:center;gap:.5rem;cursor:pointer;}
  .remember input{accent-color:var(--accent);cursor:pointer;}
  .remember span{font-size:.85rem;color:var(--muted);}
  .forgot{font-size:.85rem;color:var(--accent);text-decoration:none;}
  .forgot:hover{text-decoration:underline;}

  .alert-box{
    background:rgba(255,95,109,.1);
    border:1px solid rgba(255,95,109,.3);
    border-radius:var(--radius);
    padding:.8rem 1rem;
    font-size:.88rem;color:var(--error);
    margin-bottom:1.2rem;
    display:none;
    animation:fadeIn .25s;
  }
  .alert-box.show{display:flex;align-items:center;gap:.6rem;}

  .btn-login{
    width:100%;padding:.85rem;
    background:var(--accent);color:#0b0e17;
    border:none;border-radius:var(--radius);
    font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;
    letter-spacing:.02em;cursor:pointer;
    transition:transform .15s,box-shadow .15s;
    display:flex;align-items:center;justify-content:center;gap:.5rem;
  }
  .btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(232,255,71,.35);
  }
  .btn-login:active{transform:translateY(0);}
  .btn-login.loading{opacity:.7;pointer-events:none;}
  .spinner{
    width:16px;height:16px;border:2px solid rgba(0,0,0,.3);
    border-top-color:#000;border-radius:50%;
    animation:spin .7s linear infinite;display:none;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .divider{
    display:flex;align-items:center;gap:.8rem;
    margin:1.4rem 0;color:var(--muted);font-size:.8rem;
  }
  .divider::before,.divider::after{
    content:'';flex:1;height:1px;background:var(--border);
  }

  .btn-oauth{
    width:100%;padding:.75rem;
    background:transparent;
    border:1.5px solid var(--border);border-radius:var(--radius);
    color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;
    cursor:pointer;transition:border-color .2s,background .2s;
    display:flex;align-items:center;justify-content:center;gap:.6rem;
  }
  .btn-oauth:hover{border-color:var(--muted);background:rgba(255,255,255,.03);}

  .signup{
    text-align:center;margin-top:1.5rem;
    font-size:.88rem;color:var(--muted);
  }
  .signup a{color:var(--accent);text-decoration:none;font-weight:500;}
  .signup a:hover{text-decoration:underline;}

  /* shake */
  @keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
  }
  .shake{animation:shake .4s;}