/* 1. Import Fonts & Variables */
      @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

      :root {
        --primary-color: #7d6aff;
        --primary-hover: #6255d6;
        --secondary-color: #5145BA;
        --bg-dark: #0f0c29;
        --text-light: #f8f9fa;
        --glass-bg: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        --input-bg: rgba(0, 0, 0, 0.2);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Montserrat", sans-serif;
        text-decoration: none;
        list-style: none;
      }

      /* 2. Animated Cosmic Background */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
        background-size: 300% 300%;
        animation: cosmicFlow 20s ease infinite;
        overflow: hidden;
        position: relative;
      }

      @keyframes cosmicFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }

      body::before, body::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: var(--secondary-color);
        filter: blur(150px);
        border-radius: 50%;
        z-index: -1;
        opacity: 0.4;
        animation: floatOrb 10s ease-in-out infinite alternate;
      }

      body::before { top: -10%; left: -10%; }
      body::after { bottom: -10%; right: -10%; animation-delay: -5s; background: #7d6aff; }

      @keyframes floatOrb {
        0% { transform: translate(0, 0); }
        100% { transform: translate(30px, 50px); }
      }

      /* 3. The Glass Container */
      .container {
        position: relative;
        width: 850px;
        height: 550px;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 30px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        color: var(--text-light);
      }

      .container h1 {
        font-size: 36px;
        margin: -10px 0;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
      }

      .container p {
        font-size: 14.5px;
        margin: 15px 0;
        color: #ddd;
      }

      form { width: 100%; }

      /* =========================================
         4. FIXED FORM LAYOUT & TRANSITIONS
         ========================================= */
      .form-box {
        position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding: 40px;
        z-index: 1;
        /* General movement transition */
        transition: right 0.6s ease-in-out 1.2s;
      }

      /* Move both boxes when active */
      .container.active .form-box {
        right: 50%;
      }

      /* LOGIN FORM SPECIFICS */
      .form-box.login {
        visibility: visible;
        opacity: 1;
        /* Delay showing login until slider returns */
        transition: right 0.6s ease-in-out 1.2s, opacity 0.5s 1.5s, visibility 0s 1.5s;
      }

      /* Hide Login when Active */
      .container.active .form-box.login {
        visibility: hidden;
        opacity: 0;
        /* Hide quickly so Register can show */
        transition: right 0.6s ease-in-out 1.2s, opacity 0.5s 0.5s, visibility 0s 1s;
      }

      /* REGISTER FORM SPECIFICS */
      .form-box.register {
        visibility: hidden;
        opacity: 0;
        /* Hide quickly when going back to login */
        transition: right 0.6s ease-in-out 1.2s, opacity 0.5s 0.5s, visibility 0s 1s;
      }

      /* Show Register when Active */
      .container.active .form-box.register {
        visibility: visible;
        opacity: 1;
        /* Delay showing register until slider arrives */
        transition: right 0.6s ease-in-out 1.2s, opacity 0.5s 1.5s, visibility 0s 1.5s;
      }

      /* 5. Styled Inputs */
      .input-box {
        position: relative;
        margin: 30px 0;
        width: 100%;
      }

      .input-box input {
        width: 100%;
        padding: 13px 50px 13px 20px;
        background: var(--input-bg);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        outline: none;
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        transition: 0.3s;
      }

      .input-box input::placeholder { color: #bbb; font-weight: 400; }
      .input-box input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 15px rgba(125, 106, 255, 0.2);
        background: rgba(0,0,0,0.4);
      }

      /* Validation Error Style */
      .input-box input.error-border {
        border-color: #ff4444;
        box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
        animation: shake 0.5s;
      }

      @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
      }

      .input-box i {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #bbb;
      }

      .forgot-link { margin: -15px 0 15px; }
      .forgot-link a {
        font-size: 14.5px;
        color: #ddd;
        transition: 0.3s;
      }
      .forgot-link a:hover { color: var(--primary-color); }

      /* 6. Buttons */
      .btn {
        width: 100%;
        height: 48px;
        background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: #fff;
        font-weight: 600;
        transition: 0.3s;
      }
      
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(125, 106, 255, 0.4);
      }

      .social-icons { display: flex; justify-content: center; }
      .social-icons a {
        display: inline-flex;
        padding: 10px;
        border: 1px solid var(--glass-border);
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
        font-size: 24px;
        color: #fff;
        margin: 0 8px;
        transition: 0.3s;
      }
      .social-icons a:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateY(-3px);
      }

      /* 7. The Slider Overlay (Toggle) */
      .toggle-box {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .toggle-box::before {
        content: "";
        position: absolute;
        left: -250%;
        width: 300%;
        height: 100%;
        background: #1e1e2e; 
        border-radius: 150px;
        z-index: 2;
        transition: 1.8s ease-in-out;
        border: 2px solid var(--primary-color); 
        pointer-events: auto;
      }

      .container.active .toggle-box::before { left: 50%; }

      .toggle-panel {
        position: absolute;
        width: 50%;
        height: 100%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        transition: 0.6s ease-in-out;
        pointer-events: auto;
      }

      .toggle-panel.toggle-left { left: 0; transition-delay: 1.2s; }
      .container.active .toggle-panel.toggle-left { left: -50%; transition-delay: 0.6s; }

      .toggle-panel.toggle-right { right: -50%; transition-delay: 0.6s; }
      .container.active .toggle-panel.toggle-right { right: 0; transition-delay: 1.2s; }

      .toggle-panel p { margin-bottom: 20px; }
      .toggle-panel .btn {
        width: 160px;
        height: 46px;
        background: transparent;
        border: 2px solid #fff;
        box-shadow: none;
      }
      .toggle-panel .btn:hover { background: #fff; color: var(--secondary-color); }

      @media screen and (max-width: 650px) {
        .container { height: calc(100vh - 40px); }
        .form-box { bottom: 0; width: 100%; height: 70%; padding: 20px; }
        .container.active .form-box { right: 0; bottom: 30%; }
        .toggle-box::before { left: 0; top: -270%; width: 100%; height: 300%; border-radius: 20vw; }
        .container.active .toggle-box::before { left: 0; top: 70%; }
        .container.active .toggle-panel.toggle-left { left: 0; top: -30%; }
        .toggle-panel { width: 100%; height: 30%; }
        .toggle-panel.toggle-left { top: 0; }
        .toggle-panel.toggle-right { right: 0; bottom: -30%; }
        .container.active .toggle-panel.toggle-right { bottom: 0; }
      }