/* Railway Dawn: cinematic landscape and a quiet editorial sign-in panel. */
:root{color-scheme:light;--ink:#253d52;--muted:#8896a3;--green:#168fc9}
html{background:#edf3f7}body{color:#253d52;background:#edf3f7}
.landscape{background:#b8d3e4 url('/login-kazakh-close-v6.webp') center center/cover no-repeat}
.landscape:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,44,68,.38),rgba(19,55,78,.12) 52%,transparent 70%)}
.landscape:after{content:none}
.card:before{display:none}
.brand{color:white}.brand small{color:#e2edf4}.brand-mark{color:white;background:#ffffff0d;border:1px solid #ffffff66;border-radius:12px}
.project-intro h1{color:white;text-shadow:0 2px 22px #12324930;font-weight:500;letter-spacing:1px;line-height:1.45}
.project-intro .eyebrow{color:#e3edf4;font-weight:500;letter-spacing:4px;font-size:10px}
.eyebrow span{width:20px;background:#e6cba2}
.intro-caption{color:#f0f5f8;font-weight:400;letter-spacing:3px;font-size:14px}
.intro-note{color:#e1eaf1;letter-spacing:2px;line-height:1.8}
.card{background:#fbfcfdf5;border:1px solid #ffffffa6;border-radius:16px;box-shadow:0 18px 65px #17364f1a;color:#253d52}
.card-heading{margin-bottom:20px}.entry-tag{color:#8b9ead;letter-spacing:2px;font-weight:500}.entry-symbol{display:none}
.card h2{color:#253d52;font-size:29px;letter-spacing:1px;font-weight:500;text-align:left;margin-bottom:32px}
label{color:#6e8190;font-weight:400}
input:not([type=checkbox]){background:#fff;border:1px solid #dbe3eb;border-radius:7px;color:#253d52}
input:not([type=checkbox]):focus{border-color:#66add2;box-shadow:0 0 0 3px #168fc910;outline:none}
input::placeholder{color:#a3b0bb}input[type=checkbox]{accent-color:#168fc9}
#submit{background:#168fc9;border-color:#168fc9;color:#fff;border-radius:7px;box-shadow:0 6px 18px #168fc91c;letter-spacing:6px;font-weight:500}
#submit:hover{background:#117fae;border-color:#117fae}
.forgot-link,#platform-login{color:#328db7}.remember-option{color:#7d8d9b}
.error{color:#bd4444}footer{color:#e0eaf1;letter-spacing:1px}
dialog{border:1px solid #dbe3eb;border-radius:12px;color:#344d61}dialog button{background:#168fc9;border-color:#168fc9;color:white}
.rail-route{display:flex;align-items:center;gap:16px;color:#e5edf3;font-size:11px;letter-spacing:2px}
.rail-route i{height:1px;width:110px;background:#ffffff70;position:relative}
.rail-route i:before,.rail-route i:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border:1px solid #f3dfbd;border-radius:50%;background:#8aa3ac}
.rail-route i:before{left:0}.rail-route i:after{right:0}
@media(min-width:761px) and (min-height:501px){
 body{min-height:100svh}body:after{content:"";position:fixed;inset:0 0 0 65%;background:linear-gradient(140deg,#fafcfd,#f5f8fbf5);border-left:1px solid #ffffff80;z-index:-1}
 .brand{position:absolute;top:0;left:0;padding:34px 5.2vw;z-index:2;font-size:25px}
 .login-layout{display:grid;grid-template-columns:65% 35%;gap:0;align-items:center;width:100%;min-height:100svh;padding:0;margin:0;flex:1}
 .project-intro{align-self:start;padding:clamp(155px,23vh,260px) 5.2vw 0;max-width:100%;position:static}
 .project-intro h1{font-size:clamp(32px,3.4vw,56px)}
 .project-intro .eyebrow{margin-bottom:22px}.intro-caption{margin-top:22px}.intro-note{margin-top:14px;font-size:11px}
 .rail-route{position:absolute;bottom:104px;left:5.2vw}
 .card{width:calc(100% - 72px);max-width:360px;margin:0 auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
 .card-heading{margin-bottom:18px}.card h2{margin-bottom:32px}
 #login-form>label{margin:22px 0 9px;font-size:12px}#login-form>input{height:48px}
 .login-options{margin-top:16px}#submit{margin-top:6px;height:48px}
 footer{position:absolute;bottom:0;left:0;right:0;padding:20px 5.2vw 24px;font-size:9px;pointer-events:none}
 footer span:last-child{color:#8a9eae;opacity:1}
}
@media(min-width:761px) and (max-width:1050px) and (min-height:501px){
 body:after{left:58%}.login-layout{grid-template-columns:58% 42%}.card{width:calc(100% - 48px)}.project-intro h1{font-size:32px}.project-intro{padding-left:4vw}.brand{padding-left:4vw}.rail-route{left:4vw}
}
@media(max-width:760px),(max-height:500px) and (max-width:960px){
 .landscape{background-position:35% center}.landscape:before{background:linear-gradient(180deg,#153c5c45,#eaf1f5c9 40%,#edf3f7f5 75%)}
 .brand{color:white}.brand small{color:#e8f0f5}.brand-mark{color:white}
 .project-intro h1{color:#2b536f;text-shadow:none;font-weight:500;font-size:21px}.intro-caption{color:#728a9b;letter-spacing:1px}
 .card{background:#ffffffed;border:1px solid #ffffffd9;box-shadow:0 12px 45px #25496312;border-radius:14px}
 .card h2{text-align:left;font-size:25px;font-weight:500;margin-bottom:18px}
 .rail-route{display:none}footer{color:#8a9eae}
}

/* Continuous scenery with a feathered light veil, no split-panel edge. */
@media(min-width:761px) and (min-height:501px){
 body:after{display:none}
 .landscape:before{background:linear-gradient(90deg,rgba(14,44,68,.38) 0%,rgba(19,55,78,.12) 43%,rgba(241,247,250,.25) 60%,rgba(245,249,251,.78) 79%,rgba(245,249,251,.86) 100%)}
 .card{position:relative;isolation:isolate;padding:30px 28px;width:calc(100% - 48px);max-width:416px}
 .card:after{content:"";position:absolute;inset:-20px -12px;z-index:-1;border-radius:32px;background:radial-gradient(ellipse at center,#f7fafc9c 0%,#f7fafc55 65%,#f7fafc00 100%);filter:blur(14px);pointer-events:none}
 .entry-tag{color:#637f93}.card h2{color:#203f57}#login-form>label{color:#536d81}
 input:not([type=checkbox]){background:#ffffffd9;border-color:#c9d9e4}
 .remember-option{color:#536e80}.forgot-link{color:#147ba9}
 .intro-note{margin-top:22px}
}
/* Password help follows the login palette in every interaction state. */
#password-help{color:#253d52;border-color:#dbe3eb}
#password-help h2{color:#253d52}#password-help p{color:#6e8190}
#password-help::backdrop{background:#17384f70;backdrop-filter:blur(3px)}
#password-help button{background:#168fc9;border-color:#168fc9;color:#fff;box-shadow:0 6px 18px #168fc91c}
#password-help button:hover{background:#117fae;border-color:#117fae}
#password-help button:active{background:#0e719d;border-color:#0e719d}
#password-help button:focus-visible{outline:3px solid #83c9eb;outline-offset:3px}
.password-field{position:relative;width:100%}.password-field>input{width:100%;height:48px;padding-right:48px}
#toggle-password{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;min-height:40px;display:grid;place-items:center;padding:9px;background:transparent;border:0;border-radius:5px;box-shadow:none;color:#6e8799;letter-spacing:0}
#toggle-password:hover{background:#168fc90c;color:#168fc9}#toggle-password:active{transform:translateY(-50%)}#toggle-password:focus-visible{outline:2px solid #83c9eb;outline-offset:0}
#toggle-password svg{width:21px;height:21px}#toggle-password .eye-closed{display:none}#toggle-password[aria-pressed=true] .eye-open{display:none}#toggle-password[aria-pressed=true] .eye-closed{display:block}
@media(max-width:760px),(max-height:500px) and (max-width:960px){.password-field>input{font-size:16px;line-height:22px;height:46px;min-height:46px;padding:10px 48px 10px 12px}body.login-keyboard .password-field>input{height:42px;min-height:42px;padding-top:8px;padding-bottom:8px}}
@media(max-width:760px) and (max-height:650px){.password-field>input{height:44px;min-height:44px}}
@media(max-height:480px) and (max-width:960px){.password-field>input{height:42px;min-height:42px}}
/* Enlarge only the bottom-left platform signature, from 9px to 27px. */
footer>span:first-child{font-size:27px;line-height:1.4;font-weight:400;letter-spacing:1px}
@media(max-width:760px),(max-height:500px) and (max-width:960px){footer>span:first-child{font-size:27px;line-height:1.3;max-width:100%;overflow-wrap:anywhere}footer{flex-wrap:wrap}}
/* Platform name belongs to the top-left brand, leaving the landscape uncluttered. */
.platform-brand-title{margin-left:10px;padding-left:22px;border-left:1px solid #ffffff5c;font-size:27px;line-height:1.5;font-weight:400;letter-spacing:2px;color:#fff}
@media(max-width:760px),(max-height:500px) and (max-width:960px){.brand{flex-wrap:wrap;column-gap:10px;row-gap:8px}.platform-brand-title{flex-basis:100%;border:0;padding:0;margin:2px 0 0 48px;font-size:20px;line-height:1.4;letter-spacing:2px}}
@media(max-width:760px) and (max-height:650px){.platform-brand-title{font-size:18px;margin-left:44px}}