.gateway-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-dark-edge, #0c121c); padding: 2rem; }

.login-container { background: var(--bg-panel); border: 1px solid var(--border-card); border-top: 4px solid var(--accent-gold); padding: 3rem 2.5rem; border-radius: 6px; box-shadow: 0 8px 24px rgba(12, 18, 28, 0.04); max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
#login-card { max-width: 420px; }
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h1 { font-size: 2rem; color: var(--text-light, #ffffff); margin-bottom: 0.5rem; letter-spacing: -0.5px; }

.provider-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.9rem; width: 100%; padding: 0.85rem 1.25rem; margin-bottom: 0.65rem; border: 1px solid var(--border-card); border-radius: 6px; background: var(--bg-panel); color: var(--text-main); font-family: var(--font-sans); font-size: 1rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; box-sizing: border-box; overflow: hidden; }
.provider-btn:hover { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.04); }
.provider-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.provider-icon { display: block; flex-shrink: 0; width: 18px !important; height: 18px !important; min-width: 18px; min-height: 18px; max-width: 18px !important; max-height: 18px !important; background-repeat: no-repeat; background-position: center; background-size: contain; }
.icon-google { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.14 0 5.95 1.08 8.17 2.85l6.08-6.08C34.46 3.05 29.53 1 24 1 14.82 1 7.01 6.48 3.44 14.22l7.08 5.5C12.3 13.36 17.68 9.5 24 9.5z'/><path fill='%234285F4' d='M46.1 24.5c0-1.64-.15-3.22-.42-4.74H24v9h12.42c-.54 2.9-2.18 5.36-4.64 7.02l7.18 5.58C43.16 37.26 46.1 31.32 46.1 24.5z'/><path fill='%23FBBC05' d='M10.52 28.28A14.6 14.6 0 0 1 9.5 24c0-1.49.26-2.93.72-4.28l-7.08-5.5A23.93 23.93 0 0 0 0 24c0 3.87.93 7.53 2.56 10.76l7.96-6.48z'/><path fill='%2334A853' d='M24 47c5.53 0 10.17-1.83 13.56-4.96l-7.18-5.58c-1.83 1.23-4.18 1.96-6.38 1.96-6.32 0-11.7-3.86-13.48-9.14l-7.96 6.48C7.01 41.52 14.82 47 24 47z'/></svg>"); }
.icon-microsoft { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><rect x='1' y='1' width='9' height='9' fill='%23F25022'/><rect x='11' y='1' width='9' height='9' fill='%237FBA00'/><rect x='1' y='11' width='9' height='9' fill='%2300A4EF'/><rect x='11' y='11' width='9' height='9' fill='%23FFB900'/></svg>"); }
.icon-github { background-color: currentColor; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/></svg>") no-repeat center/contain; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/></svg>") no-repeat center/contain; }
.icon-linkedin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230A66C2' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>"); }

.form-group { margin-bottom: 1.5rem; display: flex; flex-direction: column; }
.form-group label { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 1px; }
.form-group input { width: 100%; padding: 0.8rem 1rem; background: var(--bg-page); border: 1px solid var(--border-card); border-radius: 4px; color: var(--text-main); font-family: inherit; font-size: 1rem; transition: border-color 0.2s ease; }
.form-group input:focus { outline: none; border-color: var(--accent-gold); }

.mfa-code-input { width: 10rem !important; text-align: center; letter-spacing: 0.5rem; font-size: 1.2rem; display: block; margin: 0 auto; }
.mfa-code-input::placeholder { letter-spacing: 0.5rem; color: var(--text-muted); }
.mfa-input { text-align: center; font-size: 1.5rem !important; letter-spacing: 4px; }

.btn-submit { width: 100%; padding: 0.9rem; background: var(--accent-gold); color: #000; border: none; border-radius: 4px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(212,175,55,0.2); font-family: inherit; }
.btn-submit:hover { background: #e6c555; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,175,55,0.3); }
.btn-submit:disabled { background: #66541e; color: #444; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-cancel { display: block; width: 100%; padding: 0.85rem; background: transparent; border: 1px solid var(--border-card); border-radius: 4px; color: var(--text-muted); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; text-align: center; text-decoration: none; }
.btn-cancel:hover { border-color: var(--text-muted); color: var(--text-main); }

.error-banner { display: none; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; padding: 0.8rem; border-radius: 4px; font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.4; }
#login-error, #recovery-error, #challenge-error { display: none; color: #ff6b6b; font-family: var(--font-mono); font-size: 0.85rem; text-align: center; margin-top: 0.75rem; padding: 0.6rem; border: 1px solid rgba(239,68,68,0.3); border-radius: 4px; background: rgba(239,68,68,0.06); }

.qr-box { background: #fff; padding: 1rem; border-radius: 8px; margin: 1.5rem auto; display: inline-block; line-height: 0; }
.qr-box svg, .qr-box img { display: block; width: 180px; height: 180px; }

.trust-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 1rem; }
.trust-row label { color: var(--text-muted); font-size: 0.9rem; }
.mfa-action-row { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

#recovery-section { display: none; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-faint); }
#recovery-toggle { display: block; margin: 1.5rem auto 0; background: none; border: none; color: var(--accent-gold); font-family: var(--font-mono); font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
#recovery-toggle:hover { opacity: 0.75; }
#recovery-code-input { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.12rem; text-transform: uppercase; text-align: center; padding: 0.75rem 1rem; border: 1px solid var(--border-card); border-radius: 4px; width: 100%; background: var(--bg-page); color: var(--text-main); margin-bottom: 0.75rem; }
#recovery-code-input::placeholder { letter-spacing: 0; text-transform: none; color: var(--text-muted); }

.small-note { color: var(--text-muted); font-size: 0.9rem; text-align: center; margin-top: 0.5rem; }

.qr-secret-row { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.secret-box { background: var(--bg-page); padding: 0.8rem 1rem; border-radius: 8px; font-family: var(--font-mono); letter-spacing: 0.08rem; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 0.6rem 1rem; border-radius: 6px; display: none; z-index: 9999; }