.account-shell { display: grid; grid-template-columns: 1.1fr .9fr; flex: 1; min-height: calc(100dvh - var(--header-height) - var(--footer-height)); }
.account-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 640px; overflow: hidden; border-right: 1px solid rgb(255 255 255 / 10%); background: radial-gradient(ellipse at 45% 40%, rgb(124 58 237 / 25%), transparent 65%), linear-gradient(120deg, rgb(124 58 237 / 16%), rgb(59 130 246 / 15%)); }
.account-visual img { width: 90%; max-width: 740px; height: auto; max-height: 82%; object-fit: contain; animation: account-float 8s ease-in-out infinite; }
.account-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 44px; background: linear-gradient(180deg, transparent 35%, rgb(7 10 18 / 80%) 100%); }
.account-badge { margin-bottom: 18px; padding: 7px 12px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 30px; color: #e1ddf4; background: rgb(255 255 255 / 6%); font-size: 11px; }
.account-overlay h2 { max-width: 480px; margin-bottom: 12px; font-size: clamp(30px, 3vw, 44px); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; }
.account-overlay p { max-width: 390px; margin-bottom: 0; color: #b8bed0; font-size: 14px; }
.account-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 36px; }
.account-welcome { width: 100%; max-width: 440px; margin-bottom: 32px; }
.account-welcome h2 { font-size: 28px; letter-spacing: -.035em; }
.account-welcome p { margin-bottom: 0; color: var(--app-muted); line-height: 1.7; }
.account-card { width: 100%; max-width: 440px; padding: 30px; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); box-shadow: 0 18px 48px rgb(0 0 0 / 22%); }
.account-card h1 { font-size: 24px; margin-bottom: 10px; }
.account-card .account-subtitle { margin-bottom: 26px; color: var(--app-muted); font-size: 12px; }
.account-submit { width: 100%; min-height: 48px; color: white; background: #238636; border-color: rgb(240 246 252 / 10%); }
.account-submit:hover, .account-submit:active { color: white; background: #2ea043; border-color: rgb(240 246 252 / 20%); }
.debug-account { margin-bottom: 20px; padding: 14px; border: 1px solid rgb(139 92 246 / 27%); border-radius: 9px; background: rgb(139 92 246 / 7%); }
.debug-account span { display: block; margin-bottom: 4px; color: #b8a0f2; font-size: 11px; }
.debug-account strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.alternative-login { margin-top: 22px; border-top: 1px solid var(--app-border); padding-top: 18px; }
.alternative-login summary { color: #a8c7fa; cursor: pointer; font-size: 12px; }
.alternative-login[open] summary { margin-bottom: 20px; }
.account-note { max-width: 400px; margin: 20px 0 0; color: #77818c; font-size: 11px; text-align: center; }
@keyframes account-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) {
    .account-shell { grid-template-columns: 1fr; }
    .account-visual { min-height: 250px; max-height: 250px; border-right: 0; border-bottom: 1px solid var(--app-border); justify-content: flex-end; }
    .account-visual img { width: 300px; max-height: none; align-self: flex-start; margin-top: -20px; opacity: .65; }
    .account-overlay { padding: 30px; background: linear-gradient(90deg, rgb(7 10 18 / 60%), transparent); }
    .account-overlay h2 { max-width: 330px; font-size: 30px; }
    .account-overlay p { max-width: 290px; font-size: 12px; }
    .account-content { padding: 32px 24px; }
    .account-welcome { margin-bottom: 24px; }
    .account-welcome h2 { font-size: 25px; }
}
@media (max-width: 520px) {
    .account-visual { min-height: 220px; max-height: 220px; }
    .account-overlay { padding: 24px; }
    .account-overlay h2 { max-width: 240px; font-size: 27px; }
    .account-overlay p { max-width: 220px; }
    .account-badge { margin-bottom: 12px; }
    .account-content { padding: 28px 18px; }
    .account-card { padding: 24px 20px; }
}