:root{color-scheme:dark;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-synthesis:none;color:#eff4ff;background:#021333;font-size:16px}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Keep the artwork intact and proportional. Decoration never intercepts clicks. */
.login-background{position:fixed;inset:0;height:100vh;height:100lvh;z-index:0;background:#021333 url('./portal-background-ebb904153454.webp') left bottom/auto 100% no-repeat;pointer-events:none}
.login-stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;max-width:1920px;margin:auto;padding:clamp(24px,3vh,44px) 2.5vw 24px;display:flex;flex-direction:column;justify-content:center}
.login-shell{display:grid;grid-template-columns:minmax(0,1.33fr) minmax(380px,1fr);align-items:start;gap:3vw;width:100%}
.login-brand{min-width:0;padding:0 0 0 9vw;text-shadow:0 2px 5px #001333}.brand-identity{display:flex;align-items:center;gap:18px;min-height:92px}
.login-mark{display:block;flex-shrink:0;width:clamp(70px,7vw,102px);height:clamp(70px,7vw,102px);object-fit:contain;filter:drop-shadow(0 2px 3px #0009) drop-shadow(0 0 7px #ffd47960)}.brand-logo-text{display:grid;place-items:center;font-size:36px;font-weight:800;color:#ffe2a0}
.institution{display:flex;flex-direction:column;gap:8px;border-left:2px solid #dfbc66;padding-left:16px;min-width:0;line-height:1.18}#brand-ministry{font-size:clamp(17px,1.85vw,27px);font-weight:700;text-transform:uppercase;overflow-wrap:anywhere}#brand-institution{font-size:clamp(11px,1vw,14px);letter-spacing:.04em;color:#e8d6a5}
#portal-name{font:900 clamp(48px,5.55vw,88px)/1.08 "Segoe UI",Arial,sans-serif;letter-spacing:-.035em;text-align:right;margin:18px 0 5px;color:#ffe6a6;filter:drop-shadow(0 3px 1px #3b2303) drop-shadow(0 0 8px #ffc34d33)}#portal-name.long-name{font-size:clamp(30px,3.6vw,54px);overflow-wrap:anywhere}#brand-subtitle{font-size:clamp(15px,1.65vw,24px);font-weight:600;line-height:1.3;text-align:right;margin:0;overflow-wrap:anywhere;color:#f3f5fb}
@supports (background-clip:text) or (-webkit-background-clip:text){#portal-name,.brand-logo-text{background:linear-gradient(175deg,#fffde3 4%,#ffefb0 27%,#eeb72e 46%,#fff0af 52%,#c88416 78%,#ffe28c 98%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}}
.login-card{position:relative;isolation:isolate;min-width:0;width:100%;margin:0;padding:38px 8.5% 30px;border:3px solid transparent;border-radius:38px;background:linear-gradient(125deg,#061d43f5,#031737f5 65%,#08224ef5) padding-box,linear-gradient(135deg,#fff9ce,#f2ca65 18%,#9a631b 38%,#fff4bd 52%,#c5933a 74%,#fff4bf) border-box;box-shadow:inset 0 0 0 2px #fff3ba77,0 0 0 2px #74501a,0 0 0 4px #e0b85d,0 0 20px #f1c76533,0 15px 35px #0005}
.login-card:before{content:"";position:absolute;inset:7px;border:1px solid #cda449b3;border-radius:29px;pointer-events:none;z-index:0}.login-card>:not(.login-frame-light):not(.frame-corner){position:relative;z-index:1}
.login-frame-light{position:absolute;inset:-3px;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 90px 4px at 48% 0,#fffef1,transparent 98%),radial-gradient(ellipse 4px 75px at 100% 74%,#fff4cd,transparent 98%),radial-gradient(ellipse 80px 4px at 28% 100%,#fff4c6,transparent 98%)}
.frame-corner{position:absolute;z-index:0;width:68px;height:68px;background:url('./login-corner-2cf0002af44e.svg') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 3px #f3c15566)}.top-left{top:10px;left:10px}.top-right{top:10px;right:10px;transform:rotate(90deg)}.bottom-left{bottom:10px;left:10px;transform:rotate(-90deg)}.bottom-right{bottom:10px;right:10px;transform:rotate(180deg)}
h2#welcome{font-size:clamp(28px,3vw,44px);font-weight:750;line-height:1.15;color:#f6f7fc;text-align:center;margin:4px 0 7px;text-shadow:0 2px 4px #001333}.subtitle{text-align:center;font-size:clamp(16px,1.6vw,23px);line-height:1.35;color:#e3eaf7;margin:0 0 24px}
.login-field{margin:0 0 16px}.login-field>label{display:block;font-size:clamp(15px,1.3vw,19px);font-weight:650;margin-bottom:7px;line-height:1.3;color:#eaf0ff}.login-input{position:relative;display:flex;align-items:center;border:1.5px solid #5694ec;border-radius:13px;background:linear-gradient(#09245299,#06183799);box-shadow:inset 0 2px 5px #00142c55}.login-input>svg{position:absolute;left:17px;width:25px;height:25px;color:#dbe8ff;pointer-events:none}.login-input:after{content:"";position:absolute;top:10px;bottom:10px;left:53px;width:1px;background:#6290c6aa;pointer-events:none}
.field{height:50px;border:0;border-radius:inherit;padding:0 14px;outline:none;background:transparent;color:#fff;width:100%;min-width:0;font-size:clamp(16px,1.35vw,19px);line-height:1.3}.login-input .field{padding-left:68px;padding-right:48px}.field::placeholder{color:#c4cfe5;opacity:1}.login-input:focus-within,.challenge .field:focus{outline:2px solid #f6d580;outline-offset:3px}
.password-toggle{position:absolute;right:3px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:#dfebff;border-radius:10px}.password-toggle svg{width:25px;height:25px}
.challenge{display:grid;grid-template-columns:1.05fr minmax(0,1fr) 48px;gap:12px;align-items:center}.challenge output{height:48px;display:grid;place-items:center;border:1px solid #e1c578;border-radius:10px;background:repeating-linear-gradient(28deg,#a0884a12 0,#a0884a12 1px,transparent 1px,transparent 7px),linear-gradient(#173453,#071c3b);box-shadow:inset 0 0 0 3px #b58e4544;font-weight:750;font-size:clamp(22px,2.1vw,31px);letter-spacing:1px;color:#ffe6a3;white-space:nowrap}.challenge .field{height:48px;border:1.5px solid #5694ec;border-radius:11px;background:#0a2042}
.refresh{width:48px;height:48px;display:grid;place-items:center;border:1px solid #fff0b6;border-radius:10px;background:linear-gradient(145deg,#fffce3,#ffe596 32%,#d6a33c 70%,#ffeba9);color:#17233b;box-shadow:inset 0 1px 1px #fffef5,0 3px 0 #73511c,0 0 10px #ffd46d33}.refresh svg{width:28px;height:28px;stroke-width:2.5}
.login-options{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 24px;font-size:clamp(14px,1.3vw,18px)}.login-options label{display:flex;align-items:center;gap:9px;cursor:pointer}.login-options input{width:21px;height:21px;accent-color:#efd17f;margin:0}.text-link{border:0;background:transparent;color:#ffe086;padding:2px 0;font:inherit;text-decoration:underline;text-underline-offset:3px}.text-link:hover{color:#fff3bd}
.submit-button{width:100%;min-height:64px;display:flex;align-items:center;justify-content:center;position:relative;gap:20px;padding:10px 60px;border:3px solid #f9db8c;border-radius:40px;background:linear-gradient(#1766df 0,#073794 37%,#001c62 64%,#031439);box-shadow:0 3px 0 #85611f,inset 0 2px 2px #b3d8ff,0 0 12px #e6b94e33;color:#fff;letter-spacing:.035em;font-size:clamp(22px,2.2vw,32px);font-weight:800;text-shadow:0 2px 2px #001642}.submit-button .arrow{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#fff9d7,#ffe49a 40%,#cf962d 76%,#ffdb70);box-shadow:inset 0 1px 2px #fffdf4,0 2px 3px #0006,0 0 9px #ffdc8c55;color:#142546}.submit-button svg{height:29px;width:29px;stroke-width:3}.submit-button:hover:not(:disabled),.refresh:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.submit-button:active:not(:disabled),.refresh:active:not(:disabled){transform:translateY(2px)}
.message-space:has(.message:not([hidden])){margin-top:14px}.message{margin:0;padding:10px 12px;border:1px solid #d8a26c;border-radius:8px;background:#5b2c2180;color:#ffe3b9;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.security-note{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(14px,1.35vw,19px);line-height:1.4;color:#dae4f6;margin:22px 0 14px;text-align:center}.security-note svg{width:29px;height:29px;flex-shrink:0}.help{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:clamp(16px,1.4vw,20px);font-weight:600}.help svg{display:none}.help a{color:#ffdf91;font-size:14px}
.preview-note{padding:10px 12px;background:#162c49;color:#ffedc0;border:1px solid #bda065;border-radius:7px;font-size:13px;line-height:1.5;margin:0 0 18px}.login-footer{width:41.6%;align-self:flex-end;text-align:center;color:#d9e1f0;font-size:clamp(12px,1.2vw,17px);line-height:1.5;margin:25px 0 0;overflow-wrap:anywhere}
.prelogin-info{border-top:1px solid #bc9b5980;margin-top:24px;padding-top:16px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.prelogin-info h3{color:#ffe2a2;font-size:18px;margin:0 0 8px}.prelogin-info p{white-space:pre-wrap}.prelogin-info svg{display:block;width:100%;height:auto;stroke:none}.prelogin-info table{width:100%;font-size:12px;border-collapse:collapse}.prelogin-info td,.prelogin-info th{padding:5px;text-align:right;border-bottom:1px solid #496383}.prelogin-info td:first-child,.prelogin-info th:first-child{text-align:left}
dialog{border:1px solid #e5c77e;border-radius:16px;background:#0a2347;color:#f0e7d5;width:min(520px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto;padding:32px;font-size:16px;line-height:1.6;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#000a}dialog h2{color:#ffe2a0;font-size:24px;line-height:1.25;margin:0 28px 18px 0}.close-help{position:absolute;top:8px;right:8px;border:0;background:none;color:#ffe5ab;font-size:28px;width:44px;height:44px}.noscript{position:relative;background:#681d11;color:white;padding:16px;z-index:5}button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid #ffe4a1;outline-offset:4px}
/* Short laptops: reduce spacing, never scale the form or push identity offscreen. */
@media(min-width:1000px) and (max-height:760px){.login-stage{padding-top:18px;padding-bottom:10px}.login-card{padding:24px 8% 20px}h2#welcome{font-size:34px}.subtitle{font-size:18px;margin-bottom:18px}.login-field{margin-bottom:12px}.login-field>label{font-size:16px}.field{height:44px;font-size:16px}.challenge output,.challenge .field{height:44px}.refresh{width:44px;height:44px}.challenge{grid-template-columns:1.05fr minmax(0,1fr) 44px;gap:10px}.challenge output{font-size:26px}.login-options{font-size:14px;margin:14px 0 18px}.submit-button{min-height:56px;font-size:26px}.submit-button .arrow{width:40px;height:40px}.security-note{font-size:15px;margin:16px 0 12px}.help{font-size:16px}.login-footer{font-size:13px;margin-top:18px}.frame-corner{width:52px;height:52px}}
/* Portrait, tablets and browser zoom use normal flow, never a scaled screenshot. */
@media(max-width:999px){.login-background{background-position:left top;background-size:auto min(800px,100lvh);opacity:.4}.login-stage{padding:28px 24px;justify-content:flex-start}.login-shell{display:flex;flex-direction:column;align-items:center;gap:26px}.login-brand{width:100%;max-width:560px;padding:0;text-align:center}.brand-identity{justify-content:center;gap:13px;min-height:68px}.login-mark{width:68px;height:68px}.institution{text-align:left;max-width:350px;padding-left:13px;gap:5px}#brand-ministry{font-size:18px}#brand-institution{font-size:12px}#portal-name{font-size:58px;text-align:center;margin:19px 0 6px}#portal-name.long-name{font-size:34px}#brand-subtitle{font-size:18px;text-align:center;max-width:450px;margin:auto}.login-card{max-width:560px;padding:30px 36px;border-radius:30px;background:linear-gradient(#061c41f7,#031734fa) padding-box,linear-gradient(135deg,#fff9ce,#e7bd58 28%,#9a631b 48%,#fff4bd 65%,#c5933a 84%,#fff4bf) border-box}.login-card:before{border-radius:22px}h2#welcome{font-size:34px}.subtitle{font-size:18px}.login-field>label{font-size:16px}.field{font-size:16px}.challenge output{font-size:25px}.login-options{font-size:15px}.submit-button{font-size:27px}.security-note{font-size:16px}.help{font-size:17px}.frame-corner{width:54px;height:54px}.login-footer{width:100%;max-width:560px;align-self:center;font-size:13px}}
@media(max-width:480px){.login-stage{padding:22px 16px max(24px,env(safe-area-inset-bottom))}.login-shell{gap:23px}.brand-identity{gap:10px}.login-mark{width:58px;height:58px}.institution{padding-left:10px;max-width:270px}#brand-ministry{font-size:15px}#brand-institution{font-size:11px}#portal-name{font-size:46px;margin-top:20px}#brand-subtitle{font-size:16px;max-width:320px}.login-card{padding:28px 21px 25px;border-radius:27px}.login-card:before{inset:6px;border-radius:19px}h2#welcome{font-size:28px}.subtitle{font-size:16px;margin-bottom:22px}.login-input>svg{left:13px;width:22px;height:22px}.login-input:after{left:44px}.login-input .field{padding-left:55px;padding-right:45px}.challenge{grid-template-columns:1fr minmax(0,1fr) 44px;gap:8px}.challenge output{font-size:22px;letter-spacing:0}.challenge .field{padding:0 9px}.refresh{width:44px;height:46px}.login-options{font-size:14px;gap:10px}.submit-button{min-height:58px;font-size:25px;padding-left:45px;padding-right:55px}.submit-button .arrow{width:40px;height:40px}.security-note{font-size:14px;margin-top:20px}.frame-corner{width:46px;height:46px}}
@media(max-width:340px){.login-stage{padding-inline:13px}.login-card{padding-inline:15px}#portal-name{font-size:40px}.brand-identity{gap:7px}.login-mark{width:48px;height:48px}#brand-ministry{font-size:13px}.challenge{gap:6px}.challenge output{font-size:19px}.login-options{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){#portal-name,.brand-logo-text{background:none;color:CanvasText;filter:none}.login-card,.field,.login-input{border-color:CanvasText}.login-background,.login-frame-light,.frame-corner{display:none}}