* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Helvetica Neue', Arial, sans-serif;
            }

            body {
                background-color: #faf9f5;
                background-image: linear-gradient(to bottom right, #fffdf9, #fffaed);
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .login-container {
                background: rgba(255, 255, 255, 0.88);
                border-radius: 16px;
                box-shadow: 0 8px 32px rgba(255, 152, 56, 0.08);
                padding: 40px;
                width: 380px;
                max-width: 90%;
                backdrop-filter: blur(4px);
                border: 1px solid rgba(255, 255, 255, 0.5);
            }

            .input-group {
                position: relative;
                margin-bottom: 25px;
            }

            .input-group input {
                width: 100%;
                padding: 12px 15px;
                background: rgba(250, 246, 242, 0.7);
                border: 1px solid #eae0d3;
                border-radius: 10px;
                font-size: 16px;
                color: #6a5d5b;
                transition: all 0.3s;
                outline: none;
            }

            .input-group input:focus {
                border-color: #ffbb7a;
                box-shadow: 0 0 0 3px rgba(255, 170, 92, 0.15);
            }

            .input-group label {
                position: absolute;
                left: 15px;
                top: 11px;
                color: #d1b898;
                pointer-events: none;
                transition: 0.3s;
                background: rgba(255, 255, 255, 0.5);
                padding: 0 5px;
            }

            .input-group input:focus + label,
            .input-group input:not(:placeholder-shown) + label {
                top: -12px;
                left: 12px;
                font-size: 13px;
                color: #fe7c32;
                background: #ffffff;
                border-radius: 10px;
                padding: 0 8px;
            }

            .btn-login {
                width: 100%;
                padding: 14px;
                margin-top: 10px;
                background: linear-gradient(to right, #ffa14b, #ff7b45);
                color: white;
                font-size: 16px;
                border: none;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.3s;
                box-shadow: 0 4px 12px rgba(255, 123, 69, 0.2);
                letter-spacing: 1px;
            }

            .btn-login:hover {
                background: linear-gradient(to right, #ff964b, #ff6c45);
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(255, 123, 69, 0.3);
            }

            .btn-login:active {
                transform: translateY(0);
                box-shadow: 0 2px 8px rgba(255, 123, 69, 0.25);
            }

            .notification {
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%) translateY(-80px);
                background-color: #ff7272;
                color: white;
                padding: 16px 25px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                transition: transform 0.4s ease-out;
                z-index: 1000;
                min-width: 300px;
                text-align: center;
            }

            .notification.show {
                transform: translateX(-50%) translateY(0);
            }

            .logo {
                text-align: center;
                margin-bottom: 30px;
                color: #fe7c32;
                font-size: 20px;
                letter-spacing: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
            }

            .logo-icon {
                background: linear-gradient(to right, #ffa14b, #ff7b45);
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-weight: bold;
            }

            .footer-note {
                margin-top: 20px;
                font-size: 13px;
                text-align: center;
                color: #d1b898;
                display: flex;
                justify-content: center;
                gap: 15px;
            }

            .footer-note a {
                color: #d1b898;
                text-decoration: none;
                transition: color 0.3s;
            }

            .footer-note a:hover {
                color: #fe7c32;
                text-decoration: underline;
            }

            @media (max-width: 480px) {
                .login-container {
                    padding: 30px 20px;
                }
            }