:root { color-scheme:light; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
    margin:0;
    overflow-x:hidden;
    color:#f8fafc;
    font-family:var(--dashboard-font-family),Tahoma,sans-serif;
    background:#376b8f url('/images/backgrounds/login-gatepass-selected.png') center/cover fixed no-repeat;
}
.portal-login-overlay { position:fixed; inset:0; z-index:0; background:linear-gradient(125deg,rgba(26,72,108,.38),rgba(224,242,254,.18) 48%,rgba(28,72,108,.34)); backdrop-filter:blur(1px); }
.portal-login-page { position:relative; z-index:1; width:min(1180px,calc(100% - 36px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.portal-login-nav { width:100vw; min-height:82px; margin-inline:calc(50% - 50vw); padding-inline:max(18px,calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:30px; direction:rtl; background:rgba(18,58,87,.64); border-bottom:1px solid rgba(255,255,255,.22); box-shadow:0 8px 28px rgba(12,39,61,.13); backdrop-filter:blur(12px); }
.portal-login-brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; direction:rtl; }
.portal-login-brand img { width:44px; height:44px; padding:5px; object-fit:contain; background:rgba(255,255,255,.92); border-radius:4px; }
.portal-login-brand span { display:flex; flex-direction:column; }
.portal-login-brand strong { font-size:1.02rem; font-weight:900; }
.portal-login-brand small { color:#d1e8f7; font-size:.68rem; }
.portal-login-nav nav { display:flex; align-items:center; gap:40px; margin-right:auto; direction:rtl; }
.portal-login-nav nav a { position:relative; padding:28px 0 24px; color:#e7f3fb; text-decoration:none; font-weight:800; font-size:.92rem; }
.portal-login-nav nav a::after { content:""; position:absolute; right:0; bottom:22px; width:0; height:2px; background:#38bdf8; transition:width .2s; }
.portal-login-nav nav a:hover,.portal-login-nav nav a.active { color:#fff; }
.portal-login-nav nav a:hover::after,.portal-login-nav nav a.active::after { width:100%; }
.portal-mobile-menu { display:none; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.3); width:42px; height:42px; }
.portal-login-stage { flex:1; display:flex; align-items:center; padding:26px 0 42px; }
.portal-section { display:none; width:100%; animation:portal-in .32s ease; }
.portal-section.active { display:block; }
@keyframes portal-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.portal-login-card { min-height:580px; display:grid; grid-template-columns:1.12fr .88fr; direction:ltr; overflow:hidden; border:1px solid rgba(255,255,255,.58); border-radius:12px; background:rgba(239,248,255,.26); box-shadow:0 24px 65px rgba(15,43,68,.22); }
.portal-welcome-panel { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:60px 64px 38px; direction:rtl; background:linear-gradient(90deg,rgba(16,57,89,.16),rgba(24,78,112,.34)),url('/images/backgrounds/login-gatepass-selected.png') 25% center/cover no-repeat; }
.portal-welcome-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(91,158,197,.04) 45%,rgba(12,50,78,.38)); pointer-events:none; }
.portal-welcome-content,.portal-customer { position:relative; z-index:1; }
.portal-kicker { display:inline-flex; align-items:center; gap:.5rem; color:#7dd3fc; font-size:.8rem; font-weight:800; }
.portal-welcome-panel h1 { margin:24px 0 14px; color:#fff; font-size:clamp(2.25rem,4vw,3.7rem); line-height:1.35; font-weight:950; }
.portal-welcome-panel p { max-width:510px; color:#d7e4f2; font-size:.98rem; line-height:2; }
.portal-features { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.portal-features span { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem; color:#f3faff; background:rgba(14,61,91,.34); border:1px solid rgba(186,230,253,.34); border-radius:6px; font-size:.76rem; font-weight:800; }
.portal-customer { display:flex; align-items:center; gap:.6rem; color:#c9d9eb; font-size:.8rem; }
.portal-signin-panel { display:flex; flex-direction:column; justify-content:center; padding:54px 52px 40px; direction:rtl; color:#17324d; background:linear-gradient(155deg,rgba(250,253,255,.94),rgba(229,243,252,.90)); backdrop-filter:blur(10px); }
.portal-signin-heading>span,.portal-info-title small,.portal-info-card small { color:#0284a8; font-size:.72rem; font-weight:850; letter-spacing:.12em; }
.portal-signin-heading h2 { margin:6px 0 7px; font-size:1.8rem; font-weight:950; }
.portal-signin-heading p { margin:0 0 28px; color:#60758a; font-size:.82rem; }
.portal-field { margin-bottom:20px; }
.portal-field label { display:block; margin-bottom:7px; color:#294760; font-size:.78rem; font-weight:800; }
.portal-field>div { display:flex; align-items:stretch; height:48px; overflow:hidden; border:1px solid #b7cfdf; border-radius:6px; background:rgba(255,255,255,.78); transition:border-color .18s,box-shadow .18s,background .18s; }
.portal-field>div:focus-within { border-color:#38a6c8; background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.13); }
.portal-field>div>i { width:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; color:#167d9e; background:#e4f3f8; border-left:1px solid #c5dce8; font-size:1rem; }
.portal-field input { flex:1; min-width:0; height:46px; padding:0 13px; color:#17324d; background:transparent; border:0; outline:0; font-family:inherit; }
.portal-field input::placeholder { color:#8295a6; }
.portal-field button { width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; color:#167d9e; background:#e4f3f8; border:0; border-right:1px solid #c5dce8; font-size:1rem; }
.portal-field button:hover { color:#075d78; background:#d4edf5; }
.portal-field>span,.portal-validation { display:block; margin-top:6px; color:#fda4af; font-size:.72rem; }
.portal-validation:empty { display:none; }
.portal-validation ul { margin:0; padding-right:18px; }
.portal-remember { display:flex; align-items:center; gap:.5rem; margin:4px 0 24px; color:#536c80; font-size:.78rem; cursor:pointer; }
.portal-remember input { accent-color:#0ea5e9; }
.portal-submit { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:.7rem; color:#fff; background:linear-gradient(90deg,#0781a5,#1596a3); border:0; border-radius:6px; font-family:inherit; font-weight:900; box-shadow:0 12px 26px rgba(8,129,165,.20); }
.portal-submit:hover { background:linear-gradient(90deg,#067493,#108691); }
.portal-security { margin-top:19px; color:#73889a; text-align:center; font-size:.68rem; }
.portal-security i { margin-left:.35rem; color:#5eead4; }
.portal-info-section { max-width:970px; margin:auto; }
.portal-info-card,.portal-services-card { min-height:430px; padding:58px; color:#17324d; background:linear-gradient(145deg,rgba(252,254,255,.93),rgba(226,242,251,.88)); border:1px solid rgba(255,255,255,.66); border-radius:12px; box-shadow:0 22px 55px rgba(15,43,68,.18); backdrop-filter:blur(12px); }
.portal-info-card { display:grid; grid-template-columns:90px 1fr; align-items:start; gap:28px; }
.portal-info-icon { width:78px; height:78px; display:flex; align-items:center; justify-content:center; color:#0781a5; background:#e0f2f8; border:1px solid #b9dce8; border-radius:10px; font-size:2rem; }
.portal-info-card h2,.portal-info-title h2 { margin:7px 0 14px; font-weight:950; }
.portal-info-card p,.portal-info-title p { max-width:720px; color:#5b7185; line-height:2.1; }
.portal-info-card>button { grid-column:2; justify-self:start; padding:.65rem 1rem; color:#087b9b; background:rgba(255,255,255,.58); border:1px solid #acd3e1; border-radius:6px; font-family:inherit; }
.portal-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:30px; }
.portal-service-grid article { padding:22px; background:rgba(255,255,255,.66); border:1px solid #c9dfe9; border-radius:8px; box-shadow:0 7px 20px rgba(28,74,104,.06); backdrop-filter:blur(2px); }
.portal-service-grid i { color:#0793ad; font-size:1.45rem; }
.portal-service-grid h3 { margin:11px 0 6px; font-size:1rem; font-weight:900; }
.portal-service-grid p { margin:0; color:#60778a; font-size:.78rem; line-height:1.9; }
.portal-contact-card ul { list-style:none; margin:22px 0 12px; padding:0; }
.portal-contact-card li { display:flex; align-items:center; gap:.75rem; margin-bottom:12px; direction:ltr; justify-content:flex-end; }
.portal-contact-card li i { color:#0793ad; }
.portal-contact-card em { color:#71879a; font-size:.72rem; font-style:normal; }
.portal-login-page>footer { width:100vw; min-height:54px; margin-inline:calc(50% - 50vw); padding-inline:max(18px,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; align-items:center; gap:20px; color:#e2f0f8; background:rgba(18,58,87,.56); border-top:1px solid rgba(255,255,255,.18); box-shadow:0 -8px 28px rgba(12,39,61,.10); backdrop-filter:blur(12px); font-size:.72rem; }
@media(max-width:850px){.portal-login-nav{min-height:72px}.portal-mobile-menu{display:block;margin-right:auto}.portal-login-nav nav{display:none;position:absolute;z-index:10;top:68px;left:18px;right:18px;flex-direction:column;gap:0;padding:10px;margin:0;background:rgba(11,38,70,.82);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)}.portal-login-nav nav.open{display:flex}.portal-login-nav nav a{width:100%;padding:12px;text-align:center}.portal-login-nav nav a::after{display:none}.portal-login-card{grid-template-columns:1fr}.portal-welcome-panel{min-height:310px;padding:34px}.portal-welcome-panel h1{font-size:2.15rem}.portal-signin-panel{padding:38px}.portal-info-card,.portal-services-card{padding:35px}.portal-service-grid{grid-template-columns:1fr}}
@media(max-width:520px){.portal-login-page{width:min(100% - 20px,1180px)}.portal-login-stage{padding:12px 0 22px}.portal-login-card{border-radius:4px}.portal-welcome-panel{min-height:245px;padding:24px}.portal-welcome-panel p{font-size:.8rem}.portal-features{display:none}.portal-signin-panel{padding:30px 24px}.portal-info-card{grid-template-columns:1fr;padding:26px}.portal-info-card>button{grid-column:1}.portal-login-page>footer{flex-direction:column;justify-content:center;gap:3px;text-align:center}}