*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        :root {
            --glass-bg: rgba(255, 255, 255, 0.65);
            --glass-border: rgba(255, 255, 255, 0.8);
            --glass-blur: blur(25px) saturate(200%);
            --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            
            --bg-base: #fafafa; 
            --accent: #007aff; 
            --accent-soft: rgba(0, 122, 255, 0.12);
            --text: #1d1d1f; 
            --text-dim: rgba(0, 0, 0, 0.6); 
            --danger: #ff3b30;
            --danger-soft: rgba(255, 59, 48, 0.1);
            --success: #34c759;
            
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        html, body {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            background: var(--bg-base);
            background-image: 
                radial-gradient(circle at 15% 20%, rgba(0, 122, 255, 0.05), transparent 35%),
                radial-gradient(circle at 85% 80%, rgba(255, 45, 85, 0.04), transparent 35%);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        .login-card {
            background: var(--glass-bg); 
            border: 1px solid var(--glass-border);
            backdrop-filter: var(--glass-blur); 
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: 28px; 
            box-shadow: var(--glass-shadow);
            width: 100%; max-width: 420px;
            padding: 40px; margin: 20px;
            text-align: center;
        }

        .brand-logo { 
            font-size: 2rem; font-weight: 800; letter-spacing: -1px;
            color: var(--text); text-decoration: none; display: block;
            margin-bottom: 8px;
        }
        
        .subtitle { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 32px; }

        .input-group {
            position: relative; margin-bottom: 20px; text-align: left;
        }
        
        .input-group i {
            position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
            color: var(--text-dim); font-size: 1.1rem;
        }

        .glass-input {
            width: 100%; padding: 16px 16px 16px 46px;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 16px; font-size: 1rem; color: var(--text);
            transition: all 0.3s var(--ease-spring);
            outline: none;
        }
        .glass-input:focus {
            background: #fff;
            border-color: rgba(0, 122, 255, 0.4);
            box-shadow: 0 0 0 4px var(--accent-soft);
        }

        .btn-submit {
            width: 100%; padding: 16px; margin-top: 10px;
            background: var(--text); color: #fff;
            border: none; border-radius: 16px;
            font-size: 1.1rem; font-weight: 700; cursor: pointer;
            transition: all 0.3s var(--ease-spring);
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .btn-submit:hover:not(:disabled) {
            background: var(--accent); transform: translateY(-2px);
            box-shadow: 0 8px 20px var(--accent-soft);
        }
        .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }

        .form-footer { margin-top: 24px; font-size: 0.9rem; color: var(--text-dim); }
        .form-footer a { color: var(--accent); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .form-footer a:hover { opacity: 0.8; text-decoration: underline; }

        .alert-box {
            display: none; padding: 12px 16px; border-radius: 12px;
            font-size: 0.9rem; font-weight: 500; margin-bottom: 20px;
            text-align: left; animation: slideDown 0.3s var(--ease-spring);
        }
        .alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 59, 48, 0.2); }
        .alert-success { background: rgba(52, 199, 89, 0.1); color: var(--success); border: 1px solid rgba(52, 199, 89, 0.2); }

        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }