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

        :root {
            --primary-glow: #00ff87;
            --secondary-glow: #66ffbe;
            --bg-color: #0a2f2c;
            --input-bg: rgba(0, 0, 0, 0.3);
            --text-color: #e0f2f1;
            --text-muted: #80cbc4;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            padding: 20px;
        }

        /* --- Background Video --- */
        #bgVideo {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover; z-index: -1;
        }


        .container {
            background: rgba(10, 47, 44, 0.6);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 255, 135, 0.2);
            border-radius: 20px;
            width: 100%;
            max-width: 450px;
            padding: 40px;
            box-shadow: 0 0 50px rgba(0, 255, 135, 0.1);
            animation: fadeIn 1.5s ease-out;
        }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        
        h2 { text-align: center; margin-bottom: 30px; font-size: 32px; text-shadow: 0 0 10px var(--primary-glow); }

        .form-group { position: relative; margin-bottom: 30px; }
        
        .wave-label {
            position: absolute; top: 13px; left: 15px;
            pointer-events: none; transition: all 0.3s ease;
        }
        .wave-label span {
            display: inline-block; font-size: 16px;
            color: var(--text-muted);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        input:focus + .wave-label span,
        input:not(:placeholder-shown) + .wave-label span {
            transform: translateY(-28px); font-size: 13px; color: var(--primary-glow);
        }

        input {
            width: 100%; padding: 12px 15px;
            background: var(--input-bg); border: none;
            border-bottom: 2px solid rgba(0, 255, 135, 0.3);
            color: var(--text-color); font-size: 16px;
            outline: none; border-radius: 8px 8px 0 0;
            position: relative;
        }

        button h4{
          margin-top: 10px;
          font-size: 12px;
          color: var(--text-muted);
        }

        .input-border {
            position: absolute; bottom: 0; left: 50%;
            width: 0; height: 2px;
            background: var(--primary-glow);
            transition: all 0.4s ease;
        }
        input:focus ~ .input-border { width: 100%; left: 0; }
        
        .options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }
        .options a { color: var(--text-muted); text-decoration: none; }
        .options a:hover { color: var(--primary-glow); }
        .options input[type="checkbox"] { width: auto; accent-color: var(--primary-glow); margin-right: 8px;}

        .gooey-button {
            width: 100%; padding: 15px; border: none;
            border-radius: 12px; background: var(--primary-glow);
            color: var(--bg-color); font-size: 18px; font-weight: 700;
            cursor: pointer; position: relative;
            filter: contrast(20); overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .gooey-button .blobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(10px); }
        .gooey-button .blob { position: absolute; background: var(--primary-glow); border-radius: 50%; width: 30px; height: 30px; transition: all 0.5s ease; }
        .gooey-button:hover .blob:nth-child(1) { transform: translate(80px, 20px) scale(1.5); }
        .gooey-button:hover .blob:nth-child(2) { transform: translate(150px, -10px) scale(1.2); }
        .gooey-button:hover .blob:nth-child(3) { transform: translate(220px, 30px); }
        .gooey-button:disabled { background: #888; filter: none;}
        .gooey-button-text { position: relative; z-index: 1; }
        
        .register-link { text-align: center; margin-top: 25px; font-size: 14px; color: var(--text-muted); }
        .register-link a { color: var(--primary-glow); text-decoration: none; font-weight: 600; }