.pmx-portal-page { background:#05070e; padding:20px 12px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.pmx-portal-page .bg-animation { opacity:.35; }
.portal-shell { position:relative; z-index:1; width:100%; max-width:440px; min-height:min(850px,calc(100dvh - 40px)); display:flex; flex-direction:column; overflow:hidden; border-radius:36px; border:1px solid #6366f133; background:radial-gradient(ellipse at 0 15%,#7925ba40,transparent 55%),radial-gradient(ellipse at 100% 80%,#06b6d440,transparent 60%),#0b0f19; box-shadow:0 25px 80px #0007; }
.portal-header { display:flex; align-items:center; gap:10px; padding:22px 20px 16px; }.portal-header img { object-fit:contain; padding:5px; border-radius:14px; background:#171b35; border:1px solid #818cf866; }.portal-header strong { font-size:14px; color:#fff; }.portal-header em { font-style:normal; color:#a5b4fc; }.portal-header small { font-size:8px; background:#6366f133; padding:3px; border-radius:4px; }.portal-header p { font-size:10px;color:#94a3b8;margin:4px 0 0; }.portal-header>a { margin-left:auto; padding:12px; border-radius:14px; background:#ffffff09; color:#67e8f9; }
.portal-content { padding:0 20px 20px; flex:1; }.portal-banner { overflow:hidden; border-radius:22px; border:1px solid #ffffff26; background:#10182b; margin-bottom:18px; }.portal-banner img { width:100%;height:auto;display:block; }.portal-welcome { padding:24px 18px; background:linear-gradient(120deg,#581c87,#1e3a8a,#0f172a); }.portal-welcome span { font-size:10px; color:#f9a8d4; }.portal-welcome h2 { font-size:18px;line-height:1.7;margin:8px 0; }.portal-welcome p { font-size:12px;color:#cbd5e1; }
.portal-student { padding:10px 20px; border-radius:26px; border:1px solid #ffffff26; background:linear-gradient(125deg,#3b0764,#0369a1 55%,#0d9488); box-shadow:0 12px 32px #06b6d422; }.portal-student-top { display:flex;align-items:center;gap:14px; }.portal-avatar { display:grid;place-items:center; width:54px;height:54px;flex-shrink:0;border-radius:17px;background:#172554; color:#67e8f9;font-size:24px; border:1px solid #22d3ee80; }.portal-student small { color:#a5f3fc; font-size:10px;letter-spacing:1px; }.portal-student h2 { font-size:21px;margin:5px 0;color:white; }.portal-student p { font-size:12px;line-height:1.8;color:#e2e8f0; }.portal-student-note { border-top:1px solid #ffffff26; padding-top:6px;margin-top:6px;margin-bottom:0; }
.portal-section-title { font-size:13px;margin:24px 0 12px; }.portal-section-title i { color:#a5b4fc; }.portal-section-title small { font-size:10px;color:#94a3b8;margin-left:5px; }.portal-services { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }.portal-services a,.portal-secondary a { border:1px solid #ffffff1f;background:#0f172abf; border-radius:17px; text-decoration:none;color:#e2e8f0; }.portal-services a { display:flex;align-items:center;flex-direction:column;gap:9px;padding:14px 3px;font-size:11px;text-align:center; }.portal-services i { display:grid;place-items:center;background:#6366f126;color:#a5b4fc;border-radius:12px;width:38px;height:38px;font-size:19px; }.portal-services a:nth-child(2) i { color:#6ee7b7;background:#10b98126; }.portal-services a:nth-child(3) i { color:#fcd34d;background:#f59e0b26; }.portal-services a:nth-child(4) i { color:#f9a8d4;background:#ec489926; }
.portal-signin { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:54px;margin:24px 0 12px;background:linear-gradient(100deg,#4f46e5,#9333ea,#db2777);border-radius:17px;color:#fff;text-decoration:none;font-size:14px;font-weight:700;box-shadow:0 10px 28px #6366f133; }.portal-signin span { font-size:11px; }.portal-secondary { display:grid;grid-template-columns:1fr;gap:10px; }.portal-secondary a { padding:14px 8px;text-align:center;font-size:12px; }.portal-secondary i { color:#67e8f9; margin-right:5px; }.portal-hint { text-align:center;color:#94a3b8;font-size:11px;margin-top:18px; }.portal-nav { display:flex;align-items:center;justify-content:space-around;padding:16px 8px calc(16px + env(safe-area-inset-bottom,0px));background:#0f172ac7;border-top:1px solid #ffffff1f; }.portal-nav a { display:flex;align-items:center;gap:7px;flex-direction:column;min-width:48px;min-height:44px;text-decoration:none;color:#94a3b8;font-size:10px; }.portal-nav i { font-size:20px; }.portal-nav [aria-current] { color:#a5b4fc; }.portal-nav .portal-nav-center { width:48px;height:48px;min-width:48px;justify-content:center;border-radius:50%;background:linear-gradient(45deg,#6366f1,#ec4899);color:white; }
.portal-login-sheet { position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:440px;max-height:90dvh;overflow:auto;background:#0b0f19;color:white;border:1px solid #6366f166;border-bottom:0;border-radius:30px 30px 0 0;padding:24px 0 env(safe-area-inset-bottom,0px); }.portal-login-sheet::backdrop { background:#020617cc;backdrop-filter:blur(6px); }.portal-login-sheet .login-card { padding:18px 24px 24px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none; }.portal-login-sheet .login-card::before { display:none; }.portal-login-sheet .logo-section { display:none; }.portal-login-sheet .form-header { padding-right:32px; }.portal-login-sheet .form-header h2 { font-size:22px; }.portal-login-sheet .form-control { background:#0f172a;border-color:#334155; }.portal-login-sheet .btn-submit { background:linear-gradient(100deg,#6366f1,#9333ea,#db2777); }.portal-close { position:absolute;right:16px;top:12px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#1e293b;color:#cbd5e1;font-size:28px;cursor:pointer; }.portal-sheet-open { overflow:hidden; }.portal-shell a:focus-visible,.portal-close:focus-visible { outline:3px solid #67e8f9;outline-offset:3px; }
@media(max-width:576px){.pmx-portal-page{padding:0;}.portal-shell{min-height:100dvh;border:0;border-radius:0;}.portal-header{padding-top:calc(20px + env(safe-area-inset-top,0px));}.portal-content{padding-left:16px;padding-right:16px;}}

/* Uploaded image stays behind the welcome card content. */
.portal-student { position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box; }
.portal-card-image { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.portal-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.portal-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(15,23,42,.78), rgba(15,23,42,.48)); }

/* Center login in the visible viewport, including when the keyboard is open. */
.portal-login-sheet { inset: calc(var(--portal-viewport-top, 0px) + var(--portal-viewport-height, 100dvh) / 2) 0 auto; transform: translateY(-50%); max-height: calc(var(--portal-viewport-height, 100dvh) - 24px - env(safe-area-inset-top, 0px)); border-bottom: 1px solid #6366f166; border-radius: 26px; padding-top: 14px; scroll-padding: 20px; overscroll-behavior: contain; }
.portal-login-sheet .login-card { padding-top: 14px; }
.portal-login-sheet .form-control { font-size: 16px; min-height: 54px; scroll-margin: 24px; }
.portal-login-sheet .form-header { margin-bottom: 16px; }

html.portal-pull-enabled, .portal-pull-enabled body { overscroll-behavior-y: none; }
.portal-refresh { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 24px; background: #17213b; border: 1px solid #6366f166; color: #cbd5e1; font-size: 13px; white-space: nowrap; visibility: hidden; pointer-events: none; box-shadow: 0 8px 24px #0004; }
.portal-refresh.visible { visibility: visible; }
.portal-refresh.ready { color: #67e8f9; }
.portal-refresh.loading i { animation: portal-refresh-spin .8s linear infinite; }
@keyframes portal-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-refresh.loading i { animation: none; } }

.portal-card-image .portal-slide { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.portal-card-image .portal-slide.active { opacity:1; }
.portal-slide-controls { display:flex; justify-content:flex-end; align-items:center; margin:-10px -8px 4px; }
.portal-slide-controls button { display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; color:white; cursor:pointer; }
.portal-slide-controls button[data-banner-slide]::after { content:""; width:8px; height:8px; border-radius:50%; background:#ffffff66; }
.portal-slide-controls button[aria-pressed=true][data-banner-slide]::after { background:#67e8f9; width:16px; border-radius:8px; }
.portal-slide-controls button:focus-visible { outline:2px solid #67e8f9; }
@media(prefers-reduced-motion:reduce){ .portal-card-image .portal-slide{transition:none;} }

/* Keep portal navigation visible while the content scrolls. */
.pmx-portal-page .portal-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 440px; box-sizing: border-box; z-index: 30; background: #0f172a; box-shadow: 0 -8px 24px #02061755; }
.pmx-portal-page .portal-content { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.pmx-portal-page .pmx-a2hs-fab { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
.pmx-portal-page .portal-nav a:focus-visible { outline: 3px solid #67e8f9; outline-offset: 2px; }

.portal-promotions { display:grid;gap:16px;min-width:0;margin-top:22px; }
.portal-promotions[hidden] { display:none; }
.portal-promotion { margin:0;border:1px solid #ffffff24;border-radius:20px;overflow:hidden;background:rgba(15,23,42,.86);box-shadow:0 8px 24px #02061726; }
.portal-promotion img { display:block;width:100%;height:auto; }
.portal-promotion-copy { padding:18px; }
.portal-promotion-copy h2 { margin:0;color:#e0e7ff;font-size:18px;line-height:1.7;overflow-wrap:anywhere; }
.portal-promotion-copy p { margin:8px 0 0;font-size:13px;line-height:1.9;color:#cbd5e1;white-space:pre-wrap;overflow-wrap:anywhere; }

.portal-services { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#6366f155 transparent; padding:3px 1px 10px; }
.portal-services a { flex:0 0 calc((100% - 30px) / 4); min-width:78px; min-height:100px; box-sizing:border-box; scroll-snap-align:start; justify-content:center; }
.portal-services a:nth-child(4n+1) i { background:#6366f126;color:#a5b4fc; }
.portal-services a:nth-child(4n+2) i { background:#10b98126;color:#6ee7b7; }
.portal-services a:nth-child(4n+3) i { background:#f59e0b26;color:#fcd34d; }
.portal-services a:nth-child(4n) i { background:#ec489926;color:#f9a8d4; }
.portal-services a:active { transform:scale(.96); }
.portal-service-controls { display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:4px 0 10px; }
.portal-service-controls[hidden] { display:none; }
.portal-service-controls span { flex:1;text-align:center;font-size:10px;color:#94a3b8; }
.portal-service-controls button { width:36px;height:36px;border-radius:11px;border:1px solid #ffffff20;background:#0f172a;color:#a5b4fc;cursor:pointer; }
.portal-service-controls button:focus-visible,.portal-services:focus-visible { outline:2px solid #67e8f9;outline-offset:2px; }

/* Lower promotional slideshow with readable text over the image. */
.portal-promotion { position:relative; display:grid; height:250px; min-height:0; }
.portal-promotion > img { grid-area:1 / 1; height:100%; min-height:0; max-height:250px; object-fit:cover; }
.portal-promotion-copy { grid-area:1 / 1; align-self:end; z-index:1; margin:6px; padding:6px 10px; border:1px solid #ffffff1a; border-radius:12px; background:rgba(0,0,0,.60); backdrop-filter:blur(2px); max-height:78px; box-sizing:border-box; overflow-y:auto; }
.portal-promotion-copy h2 { color:#fff; font-size:14px; line-height:1.4; }
.portal-promotion-copy p { color:#f1f5f9; font-size:12px; line-height:1.5; margin:2px 0 0; }
.portal-promotions.promotion-slideshow { display:grid; gap:10px; }
.promotion-slideshow .portal-promotion { grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease,visibility .55s; }
.promotion-slideshow .portal-promotion.promotion-active { opacity:1; visibility:visible; pointer-events:auto; }
.promotion-controls { grid-row:2; display:flex; justify-content:center; align-items:center; gap:3px; padding:4px; }
.promotion-controls button { min-width:34px; height:36px; display:grid;place-items:center; border:1px solid #ffffff20;border-radius:10px;color:#e0e7ff;background:#0f172abf;font-size:20px;cursor:pointer; }
.promotion-controls button[data-promotion-slide] { border:0;background:transparent;min-width:26px; }
.promotion-controls button[data-promotion-slide]::after { content:"";width:7px;height:7px;border-radius:8px;background:#64748b; }
.promotion-controls button[data-promotion-slide][aria-pressed=true]::after { background:#67e8f9;width:18px; }
.promotion-controls button:focus-visible { outline:2px solid #67e8f9;outline-offset:2px; }
@media(prefers-reduced-motion:reduce){.promotion-slideshow .portal-promotion{transition:none;}}

.portal-services-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 10px; }
.portal-services-heading .portal-section-title { margin:0;min-width:0;line-height:1.7; }
.portal-services-heading .portal-service-controls { margin:0;gap:2px;flex-shrink:0; }
.portal-services-heading .portal-service-controls button { width:30px;height:36px;border:0;background:transparent; }
@media(max-width:360px){.portal-services-heading .portal-section-title small{display:none;}}

/* Animated highlight for the portal's primary sign-in action. */
.portal-signin {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid #ffffff38;
    animation:portal-signin-glow 3.6s ease-in-out infinite;
    transition:transform .18s ease;
}
.portal-signin::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,#ffffff12 40%,#ffffff55 50%,#ffffff12 60%,transparent 70%);
    transform:translateX(-130%);
    animation:portal-signin-shine 3.6s ease-in-out infinite;
}
.portal-signin:hover { transform:translateY(-2px); }
.portal-signin:active { transform:scale(.98); }
@keyframes portal-signin-shine {
    0%,20% { transform:translateX(-130%); }
    65%,100% { transform:translateX(130%); }
}
@keyframes portal-signin-glow {
    0%,100% { box-shadow:0 6px 22px #9333ea40,0 0 0 1px #ffffff12; }
    50% { box-shadow:0 8px 30px #9333ea70,0 0 18px #db277745,0 0 0 1px #ffffff30; }
}
@media(prefers-reduced-motion:reduce) {
    .portal-signin { animation:none;transition:none;box-shadow:0 6px 24px #9333ea55; }
    .portal-signin::before { animation:none;display:none; }
    .portal-signin:hover,.portal-signin:active { transform:none; }
}

/* Keep automatic slides running while hiding their visual controls. */
.portal-slide-controls,
.portal-services-heading .portal-service-controls { display:none; }

/* Allow scrolling and carousel swipes without touch zoom on login. */
.pmx-portal-page { touch-action:pan-x pan-y; }

/* Readable service heading on the original dark portal palette. */
.pmx-portal-page .portal-services-heading .portal-section-title {
    color:#f8fafc;
    font-weight:700;
}
.pmx-portal-page .portal-services-heading .portal-section-title small {
    color:#cbd5e1;
}
.pmx-portal-page .portal-services-heading .portal-section-title i {
    color:#c4b5fd;
}

/* PMX sign-in action. */
.pmx-portal-page .portal-signin{background:var(--pmx-brand-blue,#086ba8);border:1px solid #159cda;border-radius:14px;box-shadow:0 4px 14px #086ba830;animation:none;color:#fff;min-height:54px;transition:background .2s}
.pmx-portal-page .portal-signin::before{display:none;animation:none}
.pmx-portal-page .portal-signin:hover{background:var(--pmx-brand-navy,#123c69);color:#fff;transform:none;text-decoration:none}
.pmx-portal-page .portal-signin:focus-visible{outline:3px solid var(--pmx-brand-gold,#f7c844);outline-offset:3px}
.pmx-portal-page .btn-submit{background:var(--pmx-brand-blue,#086ba8);box-shadow:0 4px 14px #086ba830}
.pmx-portal-page .btn-submit:hover{background:var(--pmx-brand-navy,#123c69)}

/* PMX gradient with the original sweeping highlight. */
.pmx-portal-page .portal-signin{background:linear-gradient(110deg,#123c69 0%,#086ba8 48%,#159cda 100%);animation:pmx-signin-glow 3.6s ease-in-out infinite}
.pmx-portal-page .portal-signin::before{display:block;animation:portal-signin-shine 3.6s ease-in-out infinite}
.pmx-portal-page .portal-signin:hover{background:linear-gradient(110deg,#123c69 0%,#086ba8 35%,#159cda 100%)}
@keyframes pmx-signin-glow{0%,100%{box-shadow:0 6px 20px #159cda30,0 0 0 1px #ffffff12}50%{box-shadow:0 8px 28px #159cda55,0 0 16px #159cda25,0 0 0 1px #ffffff30}}
@media(prefers-reduced-motion:reduce){.pmx-portal-page .portal-signin{animation:none}.pmx-portal-page .portal-signin::before{display:none;animation:none}}

/* Readable text in the dark sign-in dialog. */
.pmx-portal-page .login-card{color:#f1f5f9}
.pmx-portal-page .login-card :is(.form-label,.register-link){color:#dbe7f0}
.pmx-portal-page .login-card .register-link a{color:#7dd3fc}
.pmx-portal-page .login-card .register-link a:hover{color:#bae6fd;text-decoration:underline}
.pmx-portal-page .login-card .clock-display{color:#7dd3fc;background:none;-webkit-text-fill-color:#7dd3fc}
.pmx-portal-page .login-card .footer-muted,
.pmx-portal-page .login-card .pmx-footer :is(.footer-main,.footer-brand,.footer-version,.footer-recaptcha,.footer-separator){color:#b8c8d9!important}
.pmx-portal-page .login-card .pmx-footer a{color:#7dd3fc!important}
.pmx-portal-page .login-card .input-icon,
.pmx-portal-page .login-card .toggle-password{color:#526d80}
.pmx-portal-page .login-card .form-control{color:#123c69;-webkit-text-fill-color:#123c69}

/* Keep typed and browser-filled credentials readable in the dark login sheet. */
.pmx-portal-page .portal-login-sheet .login-card .form-control{background:#0f172a!important;color:#f1f5f9!important;-webkit-text-fill-color:#f1f5f9!important;caret-color:#67d7ff;border-color:#52667f}
.pmx-portal-page .portal-login-sheet .login-card .form-control::placeholder{color:#a8b9cf!important;-webkit-text-fill-color:#a8b9cf!important;opacity:1}
.pmx-portal-page .portal-login-sheet .login-card .form-control:-webkit-autofill,
.pmx-portal-page .portal-login-sheet .login-card .form-control:-webkit-autofill:hover,
.pmx-portal-page .portal-login-sheet .login-card .form-control:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #0f172a inset!important;box-shadow:0 0 0 1000px #0f172a inset!important;-webkit-text-fill-color:#f1f5f9!important;caret-color:#67d7ff}
.pmx-portal-page .portal-login-sheet .login-card .form-control:autofill{background:#0f172a!important;color:#f1f5f9!important}
.pmx-portal-page .portal-login-sheet .login-card .input-icon,.pmx-portal-page .portal-login-sheet .login-card .toggle-password{color:#a5cce8!important}
.pmx-portal-page .portal-login-sheet .login-card .form-control:focus{border-color:#39b9f4!important}

/* Keep the sign-in header controls aligned with the dark portal surface. */
.pmx-portal-page .portal-header{flex-wrap:nowrap}
.pmx-portal-page .portal-header>img{flex-shrink:0}
.pmx-portal-page .portal-brand-copy{min-width:0;flex:1}
.pmx-portal-page .portal-brand-copy strong{display:block;white-space:nowrap}
.pmx-portal-page .portal-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pmx-portal-page .portal-header-actions .pmx-portal-language{margin:0}
.pmx-portal-page .portal-header-actions>a,
.pmx-portal-page .portal-header-actions .pmx-language-toggle{display:inline-flex;align-items:center;justify-content:center;height:44px;box-sizing:border-box;border:1px solid #ffffff18;border-radius:13px;background:#ffffff09;color:#67e8f9;text-decoration:none}
.pmx-portal-page .portal-header-actions>a{width:44px;padding:0}
.pmx-portal-page .portal-header-actions .pmx-language-toggle{min-width:52px;padding:7px;gap:6px}
.pmx-portal-page .portal-header-actions .pmx-language-options{background:#151e32;border-color:#ffffff20;box-shadow:0 12px 30px #0006}
.pmx-portal-page .portal-header-actions .pmx-language-options button{color:#dbeafe}
.pmx-portal-page .portal-header-actions .pmx-language-options button:hover,
.pmx-portal-page .portal-header-actions .pmx-language-options button[aria-checked=true]{background:#159cda25;color:#7dd3fc}
.pmx-portal-page .portal-header-actions :is(a,button):focus-visible{outline:2px solid #f7c844;outline-offset:3px}
@media(max-width:360px){
 .pmx-portal-page .portal-header{gap:8px;padding-left:16px;padding-right:16px}
 .pmx-portal-page .portal-header>img{width:38px;height:38px;padding:4px}
 .pmx-portal-page .portal-brand-copy strong{font-size:11.5px}
 .pmx-portal-page .portal-brand-copy small{font-size:6.5px}
 .pmx-portal-page .portal-header-actions{gap:6px}
 .pmx-portal-page .portal-header-actions>a{width:40px}
 .pmx-portal-page .portal-header-actions .pmx-language-toggle{min-width:48px;padding:5px;gap:4px}
}

/* Captions sit below promotion images and never cover or crop the artwork. */
.pmx-portal-page .portal-promotion{height:auto;grid-template-rows:auto auto;align-content:start}
.pmx-portal-page .portal-promotion>img{height:auto;max-height:none;aspect-ratio:auto 4/3;object-fit:contain}
.pmx-portal-page .portal-promotion-copy{grid-area:2/1;align-self:start;margin:0;padding:12px;border:0;border-radius:0;background:#0f172a;backdrop-filter:none;max-height:none;overflow:visible}