:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --night: #101722; --text: #f4efe6; --muted: #b9c1cb; --accent: #dfc28a; --danger: #ffb4ab;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--text); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a { color: #dfcba5; text-underline-offset: 4px; }
a:hover { color: #fff0d2; }
:focus-visible { outline: 2px solid #ecd5a6; outline-offset: 4px; }
.login-shell { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,420px); align-items: end; gap: 6vw; padding: 48px clamp(28px,5vw,96px); }
.visual { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: var(--night); }
.scene-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-shell::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg,rgba(5,10,18,.67),transparent 52%); }
.scene-copy { align-self: end; max-width: 520px; padding-bottom: 12px; text-shadow: 0 2px 20px #0009; }
.scene-caption { color: #e7c997; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; }
.scene-copy h2 { font: 400 clamp(38px,4vw,60px)/1.1 Georgia,'Times New Roman',serif; letter-spacing: -.025em; margin: 0 0 20px; }
.scene-copy > p:last-child { color: #e2e4e7; font-size: 15px; line-height: 1.8; margin: 0; }
.login-side { width: 100%; min-width: 0; }
.login-card { position: relative; width: 100%; padding: 32px; border: 1px solid #d3b47b66; border-radius: 16px; background: linear-gradient(150deg,rgba(22,31,43,.96),rgba(9,17,28,.95)); box-shadow: 0 24px 72px #0007,inset 0 1px 0 #f3dbac12; }
.login-card::before { content:''; position: absolute; left: 32px; right: 32px; top: -1px; height: 1px; background: linear-gradient(90deg,transparent,#e6c58a,transparent); }
.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; }
.mark { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border: 1px solid #b69c636b; border-radius: 12px; color: #ead1a0; background: linear-gradient(140deg,#b9a06b25,#b9a06b05); font: 26px Georgia,serif; }
.brand strong { display: block; font: 600 17px Georgia,serif; letter-spacing: .12em; text-transform: uppercase; }
.brand span:not(.mark) { display: block; margin-top: 5px; color: #b6bfca; font-size: 12px; }
.eyebrow { color: #dfc28a; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; margin: 0 0 10px; }
h1 { font: 400 clamp(29px,2.65vw,36px)/1.12 Georgia,'Times New Roman',serif; letter-spacing: -.025em; margin: 0; }
.lead { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 14px 0 24px; }
label { display: block; font-size: 14px; line-height: 1.5; font-weight: 500; margin-bottom: 8px; }
.field { position: relative; }
.field > svg { position: absolute; width: 19px; height: 19px; left: 15px; top: 17px; stroke: #aebac9; stroke-width: 1.5; fill: none; pointer-events: none; }
.field input { width: 100%; min-width: 0; height: 52px; padding: 0 15px 0 46px; color: var(--text); background: #0b141f; border: 1px solid #455160; border-radius: 8px; font-size: 16px; transition: border-color .15s; }
.field input:hover { border-color: #6c817a; }
.field input:focus-visible { outline: 2px solid #d8bd86; outline-offset: 2px; border-color: transparent; }
.field input[aria-invalid=true] { border-color: #f49e92; }
.password-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 22px; }
.password-label a { font-size: 12px; line-height: 1.7; }
.password-field input { padding-right: 90px; }
.password-toggle { position: absolute; right: 4px; top: 4px; height: 44px; padding: 0 9px; background: transparent; color: #d4d8ce; font-size: 12px; cursor: pointer; border: 0; border-radius: 5px; }
.password-toggle:hover { background: #ffffff0b; }
.submit { width: 100%; min-height: 52px; margin-top: 25px; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid #dcc597; border-radius: 8px; background: linear-gradient(115deg,#ddcba4,#bca477); color: #17231f; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px #0003; transition: filter .15s, transform .15s; }
.submit > svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.submit:disabled { opacity: .65; cursor: wait; }
.error { color: var(--danger); background: #ffb4ab0a; border: 1px solid #ffb4ab38; border-radius: 7px; font-size: 13px; line-height: 1.55; margin-top: 16px; padding: 12px; }
.error:empty, .login-status:empty { display: none; }
.login-status { color: #d3c096; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.foot { display: flex; gap: 8px; align-items: flex-start; color: #a1b1ad; font-size: 12px; line-height: 1.6; margin: 18px 0 0; }
.foot svg { flex: 0 0 15px; height: 17px; fill: none; stroke: #9cb39e; stroke-width: 1.5; margin-top: 1px; }

.noscript-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
@media(max-width:1000px) { .login-shell { gap: 28px; padding: 32px; } .scene-copy h2 { font-size: 40px; } .login-card { padding: 28px; } }
@media(max-width:760px) {
  .login-shell { grid-template-columns: minmax(0,420px); justify-content: center; align-items: center; padding: clamp(80px,16svh,160px) 20px 36px; gap: 0; }
  .scene-copy { display: none; }
  .scene-image { object-position: 61% center; }
  .login-shell::before { background: linear-gradient(0deg,#080e1966,transparent 85%); }
  .login-card { padding: 28px 26px; }
  h1 { font-size: 32px; }
}
@media(max-width:360px) { .login-shell { padding-inline: 12px; } .login-card { padding: 24px 20px; } h1 { font-size: 29px; } .password-label a { font-size: 11px; } }
@media(max-height:760px) and (min-width:761px) { .login-shell { padding-block: 24px; } .login-card { padding-block: 26px; } .brand { margin-bottom: 22px; } .lead { margin-bottom: 20px; } }
@media(max-height:600px) and (max-width:760px) { .login-shell { padding-top: 24px; } }
@media(prefers-reduced-motion:reduce) { .login-page *, .login-page *::before, .login-page *::after { animation: none !important; transition: none !important; } }