:root{color-scheme:dark;--ink:#0b1711;--gold:#b99a57;--ivory:#f1dfb3;--muted:#c2b58e;--gutter:clamp(24px,3vw,72px)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--ink)}
body{margin:0;min-height:100svh;width:100%;display:flex;flex-direction:column;color:var(--ivory);font-family:Georgia,'Malgun Gothic',sans-serif;background:#0b1711 url('/ui/auth/bright-field-background.png') center/cover fixed no-repeat;user-select:none}
body[data-page=register],body[data-page=forgot],body[data-page=reset]{background-image:url('/ui/auth/camp-background.png')}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a,input{touch-action:manipulation}
button,a,img{-webkit-user-drag:none}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.45}
button,a{transition:filter .15s,background-color .15s}
button:not(:disabled):hover,a:hover{filter:brightness(1.18)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #ffe19c;outline-offset:5px}
.auth-header{height:126px;flex:none;padding:12px var(--gutter);border-bottom:1px solid var(--gold);display:flex;align-items:center;justify-content:space-between;background:#091510eb;gap:24px}
.brand{display:block;width:420px;max-width:55%;flex-shrink:1}
.brand img{display:block;width:100%;height:auto}
#auth-main{flex:1;padding:32px var(--gutter) 24px;position:relative;min-width:0}
.hero-title{display:none;margin:0}
.hero-title img{width:100%;height:auto}
.auth-panel{margin-left:auto;width:47%;max-width:760px;padding:32px 34px 22px;background:#07120ef2}
.auth-panel h2{text-align:center;font-size:48px;line-height:1.2;font-weight:normal;padding:0 0 26px;margin:0 0 30px;border-bottom:1px solid var(--gold)}
.framed{border:1px solid #ad8e49;outline:1px solid #604f2c;outline-offset:-8px;box-shadow:0 10px 40px #0006}
.field{display:flex;gap:24px;align-items:center;margin:0 0 20px;min-width:0}
.field label{font-size:24px;flex:0 0 31%;min-width:0}
.field label .label-art{max-width:100%}
.field input,.field-input{width:100%;min-width:0}
.field-input input{display:block}
.field input{border:1px solid #ac9867;border-radius:3px;background:#07120ee6;color:#fff3d2;height:54px;padding:10px 16px;font-size:24px;user-select:text;-webkit-user-select:text;box-shadow:inset 0 1px 8px #0005}
input::selection{background:#6d5b35;color:#fff}
.field input:focus{border-color:#ffe19c;outline:2px solid #b99a5780;outline-offset:2px}
.field input[aria-invalid=true]{border-color:#f1a78e}
.field small{display:block;font-size:14px;color:var(--muted);margin-top:8px;min-height:16px}
.field small .label-art{filter:brightness(.85)}
.form-message{font-family:'Malgun Gothic',sans-serif;font-size:16px;line-height:1.65;color:#ffc0a9;margin:0 0 16px;white-space:normal;user-select:text}
.form-message:empty{display:none}
.form-message.success{color:#c5dda9}
.primary-action{width:100%;height:82px;display:flex;align-items:center;justify-content:center;border:0;background:transparent url('/ui/personnel-v1/fidelity-v2/button-amber-source.png') center/100% 160% no-repeat;font-size:36px;text-align:center;padding:12px 24px}
.form-note{text-align:center;font-size:17px;color:var(--muted);margin:12px 0 16px}
.auth-links{display:flex;justify-content:space-around;align-items:center;gap:20px;border-top:1px solid var(--gold);padding-top:22px;margin-top:24px;font-size:24px}
.auth-links>a{padding:4px;min-width:0}
.auth-links>a+a{border-left:1px solid #746039;padding-left:24px}
.auth-links.single{justify-content:flex-start}
.intro{font-size:23px;text-align:center;line-height:1.5;margin:0 0 4px}
.intro.last{margin-bottom:30px}
.result-message{font-size:21px;line-height:1.7;padding:16px 0;color:#d2e4be;user-select:text}
.recovery-letter{display:block;width:300px;max-width:100%;height:150px;object-fit:contain;margin:0 auto 18px}
footer{flex:none;min-height:54px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold)}
footer span{padding:0 36px;border-left:1px solid #9c824d;border-right:1px solid #9c824d}
#boot-status{position:fixed;inset:45% 0 auto;text-align:center;font-size:24px}
body[data-page=loading] .auth-header{visibility:hidden}
/* Desktop login uses the entire viewport; no fixed browser width or art-sized canvas. */
body[data-page=forgot] .auth-panel{width:44%;padding-top:20px}
body[data-page=forgot] .auth-panel h2{margin-bottom:24px;padding-bottom:22px}
body[data-page=reset] .auth-panel{width:40%;margin-top:4vh}
body[data-page=forgot] .field,body[data-page=reset] .field{display:block}
body[data-page=forgot] .field label,body[data-page=reset] .field label{display:block;margin-bottom:12px}
noscript{position:fixed;top:45%;width:100%;text-align:center;background:#0b1711;padding:20px}
/* Wide desktops: grow the form modestly, keep artwork full bleed. */
@media(min-width:1900px){
 .auth-panel{max-width:820px}
}
/* Tablets/compact desktop: guarantee usable field widths. */
@media(min-width:761px) and (max-width:1100px){
 .auth-header{height:100px}.brand{width:330px}
 .auth-panel{width:58%;padding:28px}.auth-panel h2{font-size:38px}
 .field{gap:16px}.field label{font-size:20px}.field input{font-size:20px}
 .auth-links{font-size:20px;gap:14px}.auth-links>a+a{padding-left:14px}
 body[data-page=forgot] .auth-panel,body[data-page=reset] .auth-panel{width:58%}
}
/* Narrow screens: one column, normal page scrolling, nothing clipped. */
@media(max-width:760px){
 :root{--gutter:18px}
 body{background-position:30% center}
 .auth-header{height:92px;padding:10px 18px;gap:12px}.brand{width:330px;max-width:100%}
 #auth-main{padding:26px var(--gutter)}
 .auth-panel{width:100%;max-width:540px;margin:0 auto;padding:28px 22px;background:#07120ef5}
 .auth-panel h2{font-size:32px;padding-bottom:22px;margin-bottom:26px}
 .field{display:block;margin-bottom:22px}.field label{display:block;margin-bottom:8px;font-size:20px}.field input{font-size:20px;height:52px}
 .primary-action{font-size:29px;height:72px}.auth-links{font-size:19px;gap:12px}.auth-links>a+a{padding-left:14px}
 .intro{font-size:18px}.hero-title{position:static;width:100%;max-width:520px;margin:0 auto 24px}
 body[data-page=forgot] .auth-panel,body[data-page=reset] .auth-panel{width:100%;margin-top:0}
 .recovery-letter{width:240px;height:120px}
 footer{font-size:13px;min-height:54px}.form-note{font-size:14px}
}


/* Approved bright-field concept02: one centered form, local contrast only. */
body[data-page=login]{background-position:center;background-attachment:fixed}
body[data-page=login] .auth-header{display:none}
body[data-page=login] #auth-main{flex:none;width:min(660px,100%);margin:auto;padding:clamp(45px,10vh,110px) 50px 34px;isolation:isolate}
body[data-page=login] #auth-main::before{content:'';position:absolute;inset:4% -6% -2%;z-index:-1;background:radial-gradient(ellipse 62% 48% at 50% 75%,#0b151be6,transparent 90%),radial-gradient(ellipse,#0b151bd9 0%,#0b151baa 40%,transparent 72%);pointer-events:none}
body[data-page=login] .hero-title{display:block;width:100%;margin:0 auto 22px}
body[data-page=login] .auth-panel{width:min(420px,100%);margin:0 auto;max-width:none;padding:0;background:none;border:0}
body[data-page=login] .auth-panel h2{font-size:43px;padding-bottom:16px;margin-bottom:26px}
body[data-page=login] .field{display:block;margin-bottom:18px}
body[data-page=login] .field label{font-size:22px;display:block;margin-bottom:7px}
body[data-page=login] .field input{height:54px;font-size:22px;background:#071211ed}
body[data-page=login] .primary-action{height:68px;font-size:31px;background-image:url('/ui/auth/button-crimson.png');background-size:105% 270%;padding:10px}
body[data-page=login] .auth-links{filter:drop-shadow(0 2px 3px #000);font-size:22px;border:0;margin-top:14px;padding-top:6px;gap:16px}
body[data-page=login] .auth-links>a+a{padding-left:28px}
body[data-page=login] footer{margin-top:auto;color:#ffe0a2;text-shadow:0 1px 5px #000}
@media(max-width:760px){body[data-page=login] #auth-main::before{inset:0}body[data-page=login] #auth-main{padding:50px 24px 24px}body[data-page=login] .hero-title{max-width:450px;margin-bottom:25px}body[data-page=login] .auth-panel h2{font-size:34px}body[data-page=login] .auth-panel{max-width:360px}}
@media(min-width:761px) and (max-height:780px){body[data-page=login] #auth-main{padding-top:25px;padding-bottom:20px;width:580px}body[data-page=login] .hero-title{width:88%;margin-bottom:12px}body[data-page=login] .auth-panel h2{font-size:35px;margin-bottom:18px;padding-bottom:12px}body[data-page=login] .field{margin-bottom:12px}body[data-page=login] .field input{height:48px}}