:root { --gateway-height: 42px; }
/* Use installed CJK fonts; the upstream default downloads three large font files. */
:root { --app-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif !important; }
html, body { margin: 0; }
#app { position: fixed !important; inset: var(--gateway-height) 0 0 !important; width: 100% !important; height: calc(100% - var(--gateway-height)) !important; overflow: auto; transform: translateZ(0); }
#local-gateway-bar { position: fixed; inset: 0 0 auto; height: var(--gateway-height); z-index: 2147483000; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; box-sizing: border-box; background: #123d40; color: #d9eeea; font: 12px/1.4 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; box-shadow: 0 1px 8px #123d4020; }
#local-gateway-bar .gateway-brand { display: flex; gap: 8px; align-items: center; font-weight: 650; color: white; letter-spacing: .5px; white-space: nowrap; }
#local-gateway-bar img { width: 25px; height: 25px; }
#local-gateway-bar .gateway-status { color: #9ed6c6; font-size: 11px; }
#local-gateway-bar .gateway-actions { display: flex; gap: 6px; align-items: center; }
#local-gateway-bar button { border: 1px solid #527671; border-radius: 5px; color: #deefeb; background: transparent; padding: 4px 9px; cursor: pointer; font: inherit; }
#local-gateway-bar button:hover { background: #ffffff12; }
#gateway-dialog { border: 1px solid #dce8e5; border-radius: 14px; padding: 24px; width: min(650px, calc(100vw - 36px)); max-height: 80vh; box-sizing: border-box; color: #1c3e43; font: 13px/1.7 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; }
#gateway-dialog::backdrop { background: #082b3988; }
#gateway-dialog h2 { font-size: 18px; margin: 0 0 14px; }
#gateway-dialog label { display: block; margin: 10px 0 4px; }
#gateway-dialog input { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #cddfdb; border-radius: 6px; font: inherit; }
#gateway-dialog button { border: 1px solid #bfd5ce; background: white; color: #246d5a; padding: 7px 13px; border-radius: 6px; cursor: pointer; font: inherit; }
#gateway-dialog .primary { background: #078b73; color: white; border-color: #078b73; }
#gateway-dialog .gateway-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
#gateway-dialog .gateway-error { color: #c34747; margin-top: 12px; }
#gateway-dialog small { color: #7b9296; }
#gateway-dialog table { width: 100%; border-collapse: collapse; font-size: 11px; }
#gateway-dialog td, #gateway-dialog th { border-bottom: 1px solid #e6eeeb; text-align: left; padding: 9px 7px; word-break: break-all; }
@media (max-width: 700px) { #local-gateway-bar { padding: 0 9px; gap: 8px; font-size: 10px; } #local-gateway-bar .gateway-status { display: none; } #local-gateway-bar button { font-size: 10px; padding: 4px 6px; } }

[hidden] { display: none !important; }
.gateway-registration-note { margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(90,180,205,.3); border-radius: 7px; color: #b6d9e3; background: rgba(25,130,165,.09); font-size: 12px; line-height: 1.7; }
/* Auth requests report progress inline; slow mail delivery never masks the page. */
.gateway-auth-page .el-loading-mask { display: none !important; }
.gateway-auth-status { min-height: 20px; margin: 12px 0 0; color: #b6d9e3; font-size: 12px; line-height: 1.65; }
.gateway-auth-status.gateway-auth-error { color: #ffb4a8; }
.gateway-auth-step { margin: 16px 0 10px; color: #d4eaf2; font-size: 12px; font-weight: 600; }
.gateway-auth-completed { margin: 10px 0; padding: 9px 12px; border-radius: 6px; color: #9ce2c5; background: #20806320; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.gateway-auth-page input[readonly] { opacity: .75; }
/* Keep the taller registration card reachable on short screens. Auto margins
   center it when space permits, and collapse to zero when it must scroll. */
.gateway-auth-page .auth-shell { align-items: flex-start; }
.gateway-auth-page .auth-layout { margin-top: auto; margin-bottom: auto; }