.login-page { min-height: 100vh; display: grid; place-items: center; max-width: none; padding: var(--space-6); }
.login-panel { width: min(100%, 420px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md); }
.login-panel .brand { margin-bottom: var(--space-6); }
.login-panel h1 { margin-bottom: var(--space-2); }
.login-panel form { margin: var(--space-6) 0; }
.login-submit { width: 100%; }
.account form { margin: 0; }
@media (max-width: 640px) { .login-page { padding: var(--space-3); } .login-panel { padding: var(--space-5); } }

@media (max-width: 640px) { .account .avatar, .account > a.icon-button { display: none; } }

/* Shared native language picker: keyboard accessible without JavaScript. */
.login-brand-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-6); }
.login-brand-row .brand { margin-bottom:var(--space-0); min-width:0; }
.language-picker { position:relative; flex:none; font-size:var(--font-sm); }
.language-trigger { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-height); padding:var(--space-1) var(--space-2); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer; list-style:none; transition:background var(--transition),border-color var(--transition); }
.language-trigger::-webkit-details-marker { display:none; }
.language-trigger::marker { content:''; }
.language-trigger:hover,.language-picker[open] .language-trigger { background:var(--surface-alt); border-color:var(--primary); }
.language-trigger:focus-visible,.language-option:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.language-globe { color:var(--text-muted); }
.language-chevron { width:var(--space-3); height:var(--space-3); flex:none; transition:transform var(--transition); }
.language-picker[open] .language-chevron { transform:rotate(180deg); }
.language-code { display:none; font-weight:600; }
.language-options { position:absolute; inset-inline-end:0; top:calc(100% + var(--space-2)); min-width:calc(var(--control-height) * 5); max-width:calc(100vw - var(--space-6)); padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-md); z-index:var(--z-dropdown); }
.language-caption { display:block; padding:var(--space-1) var(--space-2) var(--space-2); font-size:var(--font-xs); color:var(--text-muted); }
.language-option { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2); border-radius:var(--radius-sm); color:var(--text); text-decoration:none; }
.language-option:hover { background:var(--surface-alt); text-decoration:none; }
.language-option[aria-current] { background:var(--info-bg); color:var(--primary); font-weight:600; }
.language-option-code { font-size:var(--font-xs); color:var(--text-muted); min-width:var(--space-5); }
.language-option > .icon { margin-inline-start:auto; }
@media (max-width:640px) { .language-name,.language-globe { display:none; } .language-code { display:inline; } }
@media (prefers-reduced-motion:reduce) { .language-trigger,.language-chevron { transition:none; } }