/* Login content uses the same container and typography as the bonus page. */
.login-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 24px 0 10px; }
.login-actions > a { min-height: 44px; display: inline-flex; align-items: center; }
.login-walkthrough { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; margin-top: 24px; }
.login-walkthrough > *, .login-next > * { min-width: 0; }
.login-screen { margin: 0; background: #10151f; border: 1px solid #303343; border-radius: 14px; overflow: hidden; }
.login-screen a { display: block; }
.login-screen img { display: block; width: 100%; height: auto; object-fit: contain; }
.login-screen span { display: block; padding: 14px 18px; font-size: 14px; }
.login-steps ol, .login-reset ol { list-style: none; counter-reset: login-step; padding: 0; margin: 0 0 24px; }
.login-steps li, .login-reset li { position: relative; counter-increment: login-step; padding: 12px 12px 12px 52px; margin: 0 0 10px; background: #111722; border-radius: 10px; }
.login-steps li::before, .login-reset li::before { content: counter(login-step); position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 28px; height: 28px; background: #d1fb30; color: #080a0e; border-radius: 50%; font-weight: 700; }
.login-steps li p, .login-reset li p { margin: 0; }
.login-reset ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.login-reset li { margin: 0; }
.login-next { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; gap: 32px; }
.login-banner { display: block; border: 1px solid #303343; border-radius: 14px; overflow: hidden; background: #10151f; text-decoration: none; }
.login-banner img { display: block; width: 100%; height: auto; }
.login-banner span { display: block; padding: 16px; }
.login-destinations { display: flex; flex-wrap: wrap; gap: 12px; }
.login-destinations a { border: 1px solid #303343; border-radius: 10px; padding: 12px 18px; text-decoration: none; }
.login-layout .table-scroll table { min-width: 600px; }
.login-layout .table-scroll th { text-align: left; }
.login-layout :focus-visible { outline: 2px solid #d1fb30; outline-offset: 4px; }
@media (max-width: 900px) {
 .login-walkthrough, .login-next { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
 .login-reset ol { grid-template-columns: 1fr; }
 .login-layout .bonus-nav { gap: 8px; }
 .login-layout .bonus-nav a { padding: 10px 12px; }
}