* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #2c3e50; display: flex; justify-content: center; align-items: center; height: 100vh; }
        
        .login-box {
            background-color: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .login-box h1 { color: #b01c1c; margin-bottom: 5px; letter-spacing: 1px; font-weight: bold; }
        .login-box p.subtitle { color: #666; font-size: 14px; margin-bottom: 30px; }

        .form-group { text-align: left; margin-bottom: 20px; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; font-size: 14px; }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
            transition: 0.3s;
        }

        .form-group input:focus { border-color: #b01c1c; box-shadow: 0 0 5px rgba(176, 28, 28, 0.2); }

    
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #2c3e50; display: flex; justify-content: center; align-items: center; height: 100vh; }
        
        .login-box {
            background-color: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .login-box h1 { color: #b01c1c; margin-bottom: 5px; letter-spacing: 1px; font-weight: bold; }
        .login-box p.subtitle { color: #666; font-size: 14px; margin-bottom: 30px; }

        .form-group { text-align: left; margin-bottom: 20px; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; font-size: 14px; }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
            transition: 0.3s;
        }

        .form-group input:focus { border-color: #b01c1c; box-shadow: 0 0 5px rgba(176, 28, 28, 0.2); }

        .btn-login {
            width: 100%;
            padding: 12px;
            background-color: #b01c1c;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }

        .btn-login:hover { background-color: #8a1616; }

        .footer-text { margin-top: 25px; font-size: 13px; color: #666; }
        .footer-text a { color: #b01c1c; text-decoration: none; font-weight: bold; }

        .alert {
            background-color: #ffebee;
            color: #c62828;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 13px;
            border: 1px solid #ffcdd2;
        }


/* Register CSS */

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
        body { background-color: #2c3e50; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        
        .register-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 420px;
            text-align: center;
        }

        .register-container h1 { color: #b01c1c; margin-bottom: 30px; font-size: 24px; font-weight: bold; }

        .form-group { text-align: left; margin-bottom: 18px; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; font-size: 14px; }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
            transition: 0.3s;
        }

        .form-group input:focus { border-color: #b01c1c; }

        .btn-register {
            width: 100%;
            padding: 14px;
            background-color: #b01c1c;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
            text-transform: uppercase;
        }

        .btn-register:hover { background-color: #8a1616; }

        .footer-link { margin-top: 25px; font-size: 14px; color: #333; }
        .footer-link a { color: #b01c1c; text-decoration: none; font-weight: bold; }

        .alert { padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; text-align: center; }
        .alert-error { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
        .alert-success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }