body {
      /* Using CSS variables for Dark Mode from style.css */
      background: var(--bg-main, #0a0a0a); 
      color: var(--text-primary, #ffffff);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
    }
    
    /* 3D Flip container */
    .auth-wrapper {
        position: relative;
        width: 90%;
        max-width: 400px;
        height: 520px;
        perspective: 1000px; 
    }
    
    .login-container {
      background: var(--bg-sidebar, #1a1a1a);
      padding: 30px 40px;
      border-radius: var(--radius-md, 12px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      text-align: center;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
      transition: transform 0.6s ease-in-out;
      border: 1px solid var(--border-color, #2a2a2a);
    }
    
    /* Initial position of both forms */
    #login-form { transform: rotateY(0deg); }
    #register-container { transform: rotateY(180deg); }
    
    /* Flip effect activation */
    .auth-wrapper.active #login-form { transform: rotateY(-180deg); }
    .auth-wrapper.active #register-container { transform: rotateY(0deg); }
    
    .login-container h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 100px;
      color: var(--accent-color, #2563eb); 
    }
    
    .input-field {
      width: 100%;
      padding: 14px 17px;
      margin-bottom: 20px;
      border: 1px solid var(--border-color, #333);
      border-radius: var(--radius-sm, 8px);
      background: var(--bg-input, #2a2a2a);
      color: var(--text-primary, #ffffff);
      font-size: 16px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .btn-primary { 
        width: 100%; 
        margin-bottom: 20px; 
    }

    .g_id_signin { margin: 15px 0; display: flex; justify-content: center; }
    
    .divider { 
        margin: 20px 0; display: flex; align-items: center; 
        color: var(--text-secondary, #777); font-size: 0.9rem; font-weight: 500; 
    }
    .divider::before, .divider::after { 
        content: ''; flex: 1; height: 1px; 
        background: var(--border-color, #333); margin: 0 10px; 
    }
    
    .register-link { 
        color: var(--text-secondary, #777); font-size: 0.95rem; margin-top: 20px; 
    }
    .register-link a { 
        color: var(--accent-color, #2563eb); text-decoration: none; 
        font-weight: 600; cursor: pointer; transition: color 0.2s; 
    }
    
    /* Make Google button full width */
    .g_id_signin > div { width: 100% !important; }
    .g_id_signin iframe { width: 100% !important; height: 50px !important; }