.login-page { background: radial-gradient(ellipse at 50% 42%, #20201f 0, #121212 64%); }
.login-shell { width: min(100%, 64rem); min-height: 100svh; padding: 2.2rem max(1.25rem, env(safe-area-inset-right)) 2rem; margin: auto; display: flex; flex-direction: column; justify-content: center; }
.login-masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 6vh, 4rem); font: .73rem var(--font-mono); }
.login-brand { font-weight: 600; letter-spacing: .08em; }
.login-brand span { margin-left: .4rem; color: var(--color-dim); font-weight: 400; letter-spacing: 0; }
.login-back { padding: .75rem 0; color: var(--color-muted); }
.login-back:hover { color: var(--color-text); }
.login-window { width: 100%; background: #101010; border-radius: 1rem; box-shadow: 0 3rem 7rem #0005, 0 1px 0 #ffffff08 inset; }
.login-bar { min-height: 3.25rem; background: #ffffff04; }
.login-bar p { font-size: .72rem; color: #969694; }
.login-bar > span { background: #ffffff12; border-color: #ffffff24; }
.login-body { padding: clamp(1.4rem, 5vw, 3.75rem); }
.login-command { color: #c7c7c3; font: clamp(.65rem, 1.5vw, .82rem)/1.8 var(--font-mono); overflow-wrap: anywhere; }
.login-command > span:first-child { color: #f1f1ef; }
.login-command__path { margin-right: .55rem; color: #777774; }
.login-greeting { padding: 2.7rem 0 2rem; }
.login-eyebrow { color: #73736f; font: .62rem var(--font-mono); letter-spacing: .16em; }
.login-greeting h1 { margin: 1rem 0 .75rem; font-size: clamp(1.7rem, 5vw, 3.3rem); font-weight: 480; letter-spacing: -.05em; text-wrap: nowrap; }
.login-greeting > p:last-child { color: #939390; font-size: .87rem; }
.login-caret { color: #b5b5b1; animation: login-blink 1.2s steps(1) infinite; }
.ssh-form { font-family: var(--font-mono); }
.ssh-field { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; padding: .75rem 0; border-bottom: 1px solid #ffffff17; }
.ssh-field label { font-size: .78rem; color: #aaa; }
.ssh-field label span { color: #666; margin-right: .55rem; }
.ssh-field input { width: 100%; min-width: 0; min-height: 2.75rem; padding: .6rem .75rem; background: #ffffff03; color: #f1f1ef; border: 1px solid transparent; border-radius: .35rem; font: .92rem var(--font-mono); caret-color: #f1f1ef; }
.ssh-field:focus-within { border-bottom-color: #ffffff66; }
.ssh-field input:focus-visible { outline: 1px solid #ffffff45; outline-offset: 0; background: #ffffff07; }
.ssh-field input:-webkit-autofill { -webkit-text-fill-color: #f1f1ef; box-shadow: 0 0 0 100px #191919 inset; }
.ssh-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.ssh-submit-row > p { color: #858580; font-size: .68rem; }
.ssh-submit-row > p span { margin-right: .3rem; color: #666; }
.ssh-connect { min-height: 3rem; min-width: 9rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .8rem 1.1rem; background: linear-gradient(155deg, #333, #222); border: 1px solid #ffffff29; border-radius: .6rem; box-shadow: inset 0 1px 0 #ffffff10, 0 .35rem .7rem #0004; font: .8rem var(--font-mono); cursor: pointer; transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0); transition: background .16s, transform .16s; }
.ssh-connect:hover { background: #383838; }
.login-status { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #ffffff14; font: .61rem var(--font-mono); color: #73736f; }
.login-status > span:first-child { display: flex; align-items: center; gap: .5rem; }
.login-status i { width: .35rem; height: .35rem; border-radius: 50%; background: #aaa; }
.login-footnote { margin-top: 2rem; font: .66rem var(--font-mono); text-align: center; color: #73736f; }
.login-error { padding: .9rem 1rem; margin-bottom: 1rem; border-left: 2px solid #c69084; background: #c6908409; font: .75rem/1.6 var(--font-mono); color: #d9b9b1; }
.login-error p + p { margin-top: .35rem; }
.login-notice { margin-bottom: 1rem; color: #b1aaa3; font-size: .8rem; }
@keyframes login-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (max-width: 38rem) {
    .login-shell { padding-top: 1rem; justify-content: flex-start; }
    .login-masthead { margin-bottom: 2.5rem; }
    .login-brand span { display: none; }
    .login-greeting { padding-top: 2rem; }
    .ssh-field { grid-template-columns: 1fr; gap: .25rem; }
    .ssh-field input { font-size: 1rem; }
    .login-status > span:last-child { display: none; }
    .login-status { justify-content: center; }
    .ssh-submit-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .login-caret { animation: none; } }