/* BusTrack sign-in portal — night sky, glowing star accents. Motion is decorative and optional. */
body.portal-active{background:#060c1c;color:#eaf1fb}
body.portal-active .topbar,body.portal-active footer,body.portal-active #sidebar{display:none!important}
body.portal-active main{max-width:none!important;padding:0!important;margin:0!important}
body.portal-active #message:not(.error){display:none!important}
body.portal-active #message.error{position:fixed;top:max(12px,env(safe-area-inset-top));inset-inline:12px;max-width:520px;margin:0 auto;z-index:60;border-radius:14px}
.portal[hidden]{display:none}
.portal{--acc:#4cc3ff;--btn:#1a73e8;--btn-ink:#fff;position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;color:#eaf1fb;font-family:Vazirmatn,Tahoma,sans-serif;background:radial-gradient(1100px 620px at 88% -8%,#1d3f8260,transparent 60%),radial-gradient(900px 520px at 8% 108%,#6a3fd43d,transparent 60%),linear-gradient(180deg,#060c1c,#0a1a38 55%,#0c2447)}
.portal[data-portal=driver]{--acc:#ff9a3c;--btn:#ff8a1f;--btn-ink:#1c1206}
.portal[data-portal=admin]{--acc:#b9a2ff;--btn:#6b4de6;--btn-ink:#fff}
.portal *{box-sizing:border-box}
.portal :focus-visible{outline:3px solid #ffd98a;outline-offset:2px}

/* Sky */
.portal-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.portal-sky i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px #bfe0ff99;opacity:.3;animation:twinkle var(--d,3s) ease-in-out var(--o,0s) infinite}
.meteor{position:absolute;right:0;top:var(--t,10%);width:130px;height:2px;border-radius:2px;background:linear-gradient(270deg,#fff,transparent);opacity:0;transform:rotate(-30deg);animation:meteor 15s linear var(--o,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes meteor{0%{opacity:0;transform:translate3d(0,0,0) rotate(-30deg)}2%{opacity:1}12%{opacity:0;transform:translate3d(-95vw,55vw,0) rotate(-30deg)}100%{opacity:0}}

.portal-wrap{max-width:1120px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));min-height:inherit;display:flex;flex-direction:column}
.portal-brand{display:flex;align-items:center;gap:12px;padding:6px 0 10px}
.portal-brand img{width:46px;height:46px;border-radius:14px;filter:drop-shadow(0 0 12px #5ab4ffaa);animation:halo 5s ease-in-out infinite}
.portal-brand strong{display:block;font-size:22px;line-height:1.3;letter-spacing:.2px;color:#fff}
.portal-brand span{display:block;font-size:12px;color:#b3c6de}
@keyframes halo{0%,100%{filter:drop-shadow(0 0 8px #5ab4ff88)}50%{filter:drop-shadow(0 0 20px #ffd98acc)}}

.portal-grid{flex:1;display:grid;gap:18px;align-content:center;padding:6px 0 18px}
.portal-hero{position:relative;padding-top:4px}
.portal-star{position:absolute;inset-inline-end:2px;top:-6px;width:58px;height:58px;filter:drop-shadow(0 0 14px #ffd98acc)}
.portal-star:before{content:'';display:block;width:100%;height:100%;background:linear-gradient(135deg,#fff,#ffd98a);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:spin 28s linear infinite,pulse 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}
.portal-kicker{margin:0;font-size:14px;color:#9fc4ee;letter-spacing:.3px}
.portal-title{margin:6px 0 0;font-size:30px;line-height:1.55;font-weight:800;color:#fff}
.shine{background:linear-gradient(90deg,#fff,#ffe29a,#8fd3ff,#fff);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:220% center}}
.portal-points{list-style:none;margin:22px 0 0;padding:0;display:none;gap:12px}
.portal-points li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:#ffffff0d;border:1px solid #ffffff1a}
.portal-points .icon{width:26px;height:26px;flex:none;color:#ffd98a}
.portal-points b{display:block;font-size:15px;color:#fff}
.portal-points span{font-size:13px;line-height:1.8;color:#b9cce4}

/* Card */
.portal-card{position:relative;padding:26px 22px 22px;border-radius:28px;background:linear-gradient(160deg,#ffffff24,#ffffff0e);border:1px solid #ffffff30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px #02081a99,inset 0 1px 0 #ffffff38}
@supports not (backdrop-filter:blur(1px)){.portal-card{background:#10224a}}
.portal-card:before{content:'';position:absolute;inset-inline:28px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.portal-card .login-card,.portal-card #login-panel{all:unset;display:block}
.portal-card #login-panel[hidden]{display:none}
.portal-card .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border-radius:999px;background:#ffffff1a;color:var(--acc);font-weight:700;font-size:14px}
.portal-card .eyebrow .icon{width:20px;height:20px}
.portal-card h1{margin:14px 0 6px;font-size:26px;line-height:1.5;color:#fff;font-weight:800}
.portal-card h1+p{margin:0 0 16px;font-size:14px;line-height:1.9;color:#c3d4ea}
.portal-card #login-form{display:grid;gap:8px}
.portal-card #login-form label,.portal-card #login-form input{margin:0}
.portal-card #login-form label{display:grid;gap:6px;font-size:15px;font-weight:600;color:#d9e6f7}
.portal-card #login-form input{width:100%;min-height:54px;padding:10px 16px;border-radius:16px;border:1px solid #ffffff3d;background:#ffffff14;color:#fff;font-size:17px;box-shadow:none}
.portal-card #login-form input:focus{border-color:var(--acc);background:#ffffff1f;outline:3px solid #ffd98a;outline-offset:1px}
.portal-card #login-form input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 100px #13264f inset;caret-color:#fff}
.portal-card #login-form input[name=personnelNumber],.portal-card #login-form input[type=password]{direction:ltr;text-align:right}
.portal-card #show-password{width:auto;justify-self:start;min-height:44px;padding:6px 8px;background:transparent!important;border:0;color:var(--acc)!important;font-size:14px;font-weight:600}
.portal-card #login-form button[type=submit]{position:relative;overflow:hidden;min-height:58px;margin-top:4px;border:0;border-radius:18px;background:var(--btn)!important;color:var(--btn-ink)!important;font-size:19px;font-weight:800;box-shadow:0 12px 28px color-mix(in srgb,var(--btn) 45%,transparent)}
.portal-card #login-form button[type=submit]:after{content:'';position:absolute;top:0;bottom:0;width:60px;inset-inline-start:-80px;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:sweep 6s ease-in-out 1.5s infinite}
@keyframes sweep{0%,70%{inset-inline-start:-80px}100%{inset-inline-start:110%}}
.portal-card #login-form button[disabled]{opacity:.7}
.portal-help{margin:12px 2px 0;font-size:12.5px;line-height:1.9;color:#a9bfd8}
.portal-alert{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#4a2a12;border:1px solid #ffb86b80;color:#ffe0bd;font-size:14px;line-height:1.8}
.portal-card>#portal-slot>#login-panel>p.muted{display:none}

/* Other portals */
.portal-switch p{display:flex;align-items:center;gap:12px;margin:22px 0 12px;font-size:13px;color:#a9bfd8}
.portal-switch p:before,.portal-switch p:after{content:'';flex:1;height:1px;background:#ffffff26}
.portal-switch>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.portal-alt{min-height:60px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:16px;border:1px solid #ffffff3d;background:#ffffff0f!important;color:#fff!important;font-size:14px;font-weight:700;line-height:1.5;text-align:center}
.portal-alt .icon{width:22px;height:22px;flex:none;color:#ffd98a}
.portal-alt:hover{background:#ffffff1f!important;border-color:#ffffff66}
.portal-foot{padding:8px 0 4px;text-align:center;font-size:12px;color:#8ea6c4}

@media(min-width:960px){
 .portal-wrap{padding-inline:32px}
 .portal-grid{grid-template-columns:minmax(0,1fr) minmax(400px,470px);gap:72px;align-items:center}
 .portal-title{font-size:46px}.portal-kicker{font-size:16px}
 .portal-points{display:grid;max-width:520px}
 .portal-star{width:84px;height:84px;top:20px;inset-inline-end:40px}
 .portal-card{padding:34px 32px 28px}
}
@media(max-width:700px){.portal-wrap{padding-inline:16px}.portal-brand img{width:40px;height:40px}.portal-brand strong{font-size:19px}.portal-brand span{font-size:11px}.portal-kicker{font-size:13px}.portal-title{font-size:25px;margin-top:2px}.portal-star{width:44px;height:44px}.portal-grid{gap:12px;padding-bottom:10px}.portal-card{padding:20px 18px 16px;border-radius:24px}.portal-card h1{font-size:22px;margin:10px 0 4px}.portal-card h1+p{display:none}.portal-card #login-form input{min-height:50px}.portal-card #login-form label{font-size:14px;gap:4px}.portal-card #login-form button[type=submit]{min-height:54px;font-size:18px}.portal-help{display:none}.portal-switch p{margin:14px 0 10px}.portal-alt{min-height:54px}}
@media(max-width:380px){.portal-title{font-size:26px}.portal-switch>div{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.portal *,.portal *:before,.portal *:after{animation:none!important;transition:none!important}.portal-sky i{opacity:.7}.meteor{display:none}}
@media(forced-colors:active){.shine{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none}.portal-card{background:Canvas;border-color:CanvasText}}