.gateway-login { margin: 0; min-height: 100vh; background: #0b1016; color: #e8eef6; font: 16px/1.6 system-ui, sans-serif; display: grid; place-items: center; padding: 28px 16px; box-sizing: border-box; }
.gateway-login *, .gateway-session-bar * { box-sizing: border-box; }
.gateway-login [hidden], .gateway-session-bar [hidden] { display: none !important; }
.gateway-card { width: min(100%, 680px); background: #111c27; border: 1px solid #2b3c4b; border-radius: 20px; padding: clamp(22px, 5vw, 44px); box-shadow: 0 20px 80px #0004; }
.gateway-brand { font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.gateway-badge { display: inline-block; border: 1px solid #397770; border-radius: 5px; padding: 3px 8px; color: #8ce7d4; font-size: 12px; }
.gateway-login h1 { font-size: clamp(27px, 5vw, 36px); line-height: 1.2; }
.gateway-login h2 { font-size: 20px; }
.gateway-login button, .gateway-button, .gateway-session-bar button { display: inline-block; border: 1px solid #71d9c3; border-radius: 9px; background: #8ce7d4; color: #0b201c; padding: 12px 17px; font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; }
.gateway-login button:disabled, .gateway-session-bar button:disabled { opacity: .5; cursor: wait; }
.gateway-login .gateway-secondary, .gateway-session-bar button { background: transparent; color: #e8eef6; border-color: #536777; }
.gateway-login :focus-visible, .gateway-session-bar :focus-visible { outline: 3px solid #8ce7d4; outline-offset: 4px; }
.gateway-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gateway-notice { border-left: 3px solid #8ce7d4; background: #182b34; padding: 15px; }
.gateway-muted { color: #b6c4d0; font-size: 14px; }
.gateway-error, .gateway-session-bar .gateway-error { color: #ffb8b8; white-space: pre-wrap; overflow-wrap: anywhere; }
.gateway-address { overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
#challenge-message { white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; background: #0b1016; border: 1px solid #3b5063; border-radius: 9px; max-height: 340px; overflow: auto; font-size: 14px; }
#login-qr { display: block; max-width: 100%; height: auto; margin: 16px auto; }
#cancel-login { margin-top: 18px; }
.gateway-session-bar { position: relative; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; background: #111c27; color: #e8eef6; border-bottom: 1px solid #3b5063; padding: 12px 24px; font: 14px/1.5 system-ui, sans-serif; }
.gateway-session-bar p { margin: 0; }
.gateway-session-bar .gateway-session-note { flex-basis: 100%; color: #b6c4d0; font-size: 12px; }
.gateway-session-bar button { padding: 7px 12px; }
/* Real-funds (Hyperliquid mainnet) accents: never subtle, never green. */
.gateway-badge.gateway-live { border-color: #ff6b6b; background: #3a1116; color: #ffd0d0; font-weight: 800; letter-spacing: .04em; }
.gateway-live-page .gateway-card { border-color: #7a2a33; box-shadow: 0 0 0 1px #7a2a3355, 0 20px 80px #0006; }
.gateway-danger { border: 2px solid #ff6b6b; border-radius: 12px; background: #2a0f14; color: #ffe3e3; padding: 16px 18px; margin: 18px 0; }
.gateway-danger h2 { margin-top: 0; color: #ffb8b8; }
.gateway-danger ul { margin: 8px 0 12px; padding-left: 20px; }
.gateway-danger li { margin: 4px 0; }
.gateway-ack { display: flex; gap: 10px; align-items: flex-start; font-weight: 650; cursor: pointer; }
.gateway-ack input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: #ff6b6b; }
.gateway-session-bar.gateway-live-bar { border-bottom: 2px solid #ff6b6b; background: #1d0f14; }