:root{
  --absp-bg:#f5f7fb;
  --absp-card:#ffffff;
  --absp-ink:#172033;
  --absp-muted:#667085;
  --absp-line:rgba(23,32,51,.12);
  --absp-primary:#061173;
  --absp-primary-2:#17224a;
  --absp-accent:#E08326;
  --absp-shadow:0 24px 70px rgba(16,24,40,.13);
  --absp-soft-shadow:0 12px 28px rgba(16,24,40,.075);
  --absp-font:"Dubai","Noto Kufi Arabic","Tajawal","Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}
html:has(.absp-login-page),
body:has(.absp-login-page){
  overflow:hidden!important;
  max-width:100vw!important;
}
body:has(.absp-login-page) .entry-title,
body:has(.absp-login-page) .page-title,
body:has(.absp-login-page) .wp-block-post-title,
body:has(.absp-login-page) header.wp-block-template-part,
body:has(.absp-login-page) footer.wp-block-template-part,
body:has(.absp-login-page) .site-header,
body:has(.absp-login-page) .site-footer{display:none!important}
body:has(.absp-login-page) .site-content,
body:has(.absp-login-page) .entry-content,
body:has(.absp-login-page) .wp-site-blocks,
body:has(.absp-login-page) .elementor,
body:has(.absp-login-page) .elementor-section,
body:has(.absp-login-page) .elementor-container,
body:has(.absp-login-page) .elementor-widget-container{
  margin:0!important;
  padding:0!important;
  max-width:none!important;
  width:100%!important;
  overflow:hidden!important;
}
.absp-login-page,.absp-login-page *{box-sizing:border-box}
.absp-login-page{
  direction:rtl;
  font-family:var(--absp-font);
  color:var(--absp-ink);
  position:relative;
  width:100%;
  max-width:100vw;
  height:100dvh;
  min-height:0;
  margin:0 auto;
  padding:12px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(38,224,208,.10), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(224,131,38,.11), transparent 28%),
    linear-gradient(135deg,#fbfdff 0%,#f5f7fb 48%,#eef2f6 100%);
}
body.admin-bar .absp-login-page{height:calc(100dvh - 32px)}
@media(max-width:782px){body.admin-bar .absp-login-page{height:calc(100dvh - 46px)}}
.absp-shell{
  width:min(1160px,100%);
  height:min(690px,100%);
  max-height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.86);
  border-radius:30px;
  box-shadow:var(--absp-shadow);
  overflow:hidden;
  backdrop-filter:blur(18px);
}
.absp-top-header{
  min-height:92px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:30px 30px 0 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(224,131,38,.16), transparent 26%),
    linear-gradient(135deg,#07105d,#101a72 62%,#26364b);
  color:#fff;
  overflow:hidden;
}
.absp-logo-box{
  width:min(520px,56%);
  background:#fff;
  border-radius:22px;
  padding:11px 16px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.absp-logo-box img{display:block;width:100%;height:auto;max-height:58px;object-fit:contain}
.absp-portal-title{
  flex:0 0 auto;
  min-width:180px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:rgba(255,255,255,.10);
  text-align:center;
}
.absp-portal-title span{display:block;font-size:12px;font-weight:900;color:rgba(255,255,255,.78);margin-bottom:5px}
.absp-portal-title strong{display:block;font-size:20px;font-weight:900;line-height:1.2;color:#fff;letter-spacing:.2px}
.absp-main-grid{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:16px;
  padding:18px;
  align-items:stretch;
  overflow:hidden;
}
.absp-role-card-area,.absp-login-card{
  min-width:0;
  min-height:0;
  height:100%;
  background:#fff;
  border:1px solid var(--absp-line);
  border-radius:24px;
  box-shadow:var(--absp-soft-shadow);
  overflow:hidden;
}
.absp-role-card-area{padding:16px;display:flex;flex-direction:column;gap:12px}
.absp-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex:0 0 auto}
.absp-section-head h1{margin:0;color:var(--absp-primary-2);font-size:22px;font-weight:900;line-height:1.35;letter-spacing:-.2px}
.absp-section-head p{margin:5px 0 0;color:var(--absp-muted);font-size:13px;font-weight:800;line-height:1.6}
.absp-group-tabs{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.absp-group-tab{
  height:38px;
  padding:0 14px;
  border:1px solid rgba(23,32,51,.10);
  border-radius:999px;
  background:#f7f8fb;
  color:#364055;
  font-family:var(--absp-font);
  font-weight:900;
  font-size:12.5px;
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap;
}
.absp-group-tab:hover{transform:translateY(-1px);background:#fff;box-shadow:0 9px 18px rgba(16,24,40,.07)}
.absp-group-tab.is-active{background:rgba(224,131,38,.12);border-color:rgba(224,131,38,.38);color:#9b5417}
.absp-role-panels{flex:1 1 auto;min-height:0;display:grid;align-items:start;min-width:0;overflow:hidden}
.absp-role-panel{display:none;grid-template-columns:repeat(3,minmax(145px,1fr));gap:9px;min-width:0}
.absp-role-panel.is-active{display:grid}
.absp-role-option{
  min-height:68px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(23,32,51,.10);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#fbfcff);
  color:var(--absp-primary-2);
  font-family:var(--absp-font);
  text-align:right;
  cursor:pointer;
  transition:.16s ease;
  min-width:0;
}
.absp-role-option:hover{transform:translateY(-1px);border-color:rgba(224,131,38,.30);box-shadow:0 12px 24px rgba(16,24,40,.08)}
.absp-role-option.is-selected{background:linear-gradient(135deg,rgba(224,131,38,.13),rgba(38,224,208,.07)),#fff;border-color:rgba(224,131,38,.46);box-shadow:0 0 0 4px rgba(224,131,38,.09)}
.absp-role-mark{
  width:40px;height:40px;flex:0 0 40px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(180deg,#f4f6fb,#eef2f8);
  color:var(--absp-primary);
  font-weight:900;
  font-size:20px;
  line-height:1;
  overflow:hidden;
}
.absp-role-text{display:block;font-weight:900;font-size:13.5px;line-height:1.45;min-width:0;white-space:normal;overflow-wrap:anywhere}
.absp-login-card{padding:16px;display:flex;flex-direction:column;justify-content:center}
.absp-login-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex:0 0 auto}
.absp-login-head h2{margin:0;color:var(--absp-primary-2);font-size:21px;font-weight:900;line-height:1.3}
.absp-login-head p{margin:4px 0 0;color:var(--absp-muted);font-size:12.5px;font-weight:800}
.absp-step-mini{display:flex;gap:6px;align-items:center;padding:5px;border-radius:999px;background:#f2f4f8;border:1px solid rgba(23,32,51,.07)}
.absp-step-mini span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#667085;font-weight:900;font-size:12px}
.absp-step-mini span.is-active{background:linear-gradient(135deg,var(--absp-primary),var(--absp-primary-2));color:#fff;box-shadow:0 8px 16px rgba(6,17,115,.16)}
.absp-login-form,.absp-otp-form{display:grid;gap:10px;min-width:0}
.absp-hidden{display:none!important}
.absp-selected-role{min-height:38px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:15px;background:#f7f8fb;border:1px dashed rgba(23,32,51,.14);color:#4f5b72;font-weight:900;font-size:13px;text-align:center;line-height:1.5}
.absp-login-form label,.absp-otp-form label,.absp-request-form label{display:grid;gap:6px;font-weight:900;color:#344054;font-size:13px;min-width:0}
.absp-login-form input,.absp-otp-form input,.absp-request-form input,.absp-request-form textarea,.absp-request-form select{
  width:100%;max-width:100%;border:1px solid rgba(23,32,51,.12);background:#fff;color:var(--absp-ink);
  border-radius:15px;min-height:44px;padding:0 13px;outline:none;font-family:var(--absp-font);font-size:14px;font-weight:700;transition:.15s ease;
}
.absp-request-form textarea{min-height:78px;padding:12px;resize:vertical;line-height:1.7}
.absp-login-form input:focus,.absp-otp-form input:focus,.absp-request-form input:focus,.absp-request-form textarea:focus,.absp-request-form select:focus{border-color:rgba(224,131,38,.62);box-shadow:0 0 0 4px rgba(224,131,38,.10)}
.absp-primary-btn{width:100%;height:46px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--absp-primary),var(--absp-primary-2));color:#fff;font-family:var(--absp-font);font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 14px 28px rgba(6,17,115,.20);white-space:nowrap}
.absp-primary-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.absp-primary-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
.absp-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;align-items:center;min-width:0;flex:0 0 auto}
.absp-outline-btn{min-width:0;height:40px;border-radius:15px;border:1px solid rgba(224,131,38,.28);background:#fff8ef;color:#9b5417;font-family:var(--absp-font);font-size:12.5px;font-weight:900;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.absp-help-link{height:40px;border-radius:15px;border:1px solid rgba(23,32,51,.10);background:#fff;color:#475467;font-weight:900;font-size:12.5px;text-decoration:none;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 10px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.absp-link-btn{border:0;background:transparent;color:var(--absp-primary-2);font-family:var(--absp-font);font-weight:900;cursor:pointer;height:34px}
.absp-alert{display:none;margin-top:10px;border-radius:15px;padding:9px 12px;font-size:12px;font-weight:800;line-height:1.6;text-align:center}
.absp-alert.is-visible{display:block;background:#f2f4f8;color:#475467}
.absp-alert.is-success{background:#edf8f1;color:#207c55}
.absp-alert.is-error{background:#fff0ee;color:#b04444}
.absp-otp-head{padding:12px;border-radius:17px;background:#f7f8fb;border:1px solid rgba(23,32,51,.08);text-align:center}
.absp-otp-head strong{display:block;color:var(--absp-primary-2);font-size:16px;margin-bottom:4px}
.absp-otp-head small{color:var(--absp-muted);font-weight:800;line-height:1.6}
.absp-countdown{text-align:center;color:#9b5417;background:#fff8ef;border:1px solid rgba(224,131,38,.18);border-radius:14px;padding:8px;font-weight:900;font-size:12px}
.absp-request-modal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:16px;background:rgba(21,29,42,.44);backdrop-filter:blur(12px)}
.absp-request-modal.is-open{display:grid}
.absp-modal-card{position:relative;width:min(940px,calc(100vw - 32px));max-height:92dvh;overflow:auto;background:#fff;border-radius:26px;box-shadow:0 30px 100px rgba(20,28,40,.30);padding:18px;border:1px solid rgba(255,255,255,.76)}
.absp-modal-close{position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:13px;border:1px solid var(--absp-line);background:#fff;font-size:22px;font-weight:900;color:var(--absp-primary-2);cursor:pointer}
.absp-modal-head{padding:2px 48px 12px 0;border-bottom:1px solid rgba(23,32,51,.07);margin-bottom:12px}.absp-modal-head h2{margin:0 0 5px;color:var(--absp-primary-2);font-size:21px;font-weight:900}.absp-modal-head p{margin:0;color:var(--absp-muted);line-height:1.5;font-weight:800;font-size:12.5px}
.absp-request-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 10px;align-items:start}.absp-full{grid-column:1/-1}.absp-field-half{grid-column:span 2}.absp-field-quarter{grid-column:span 1}.absp-form-section{padding:6px 10px;border-radius:14px;background:linear-gradient(135deg,rgba(65,79,97,.08),rgba(224,131,38,.06));border:1px solid rgba(23,32,51,.06)}.absp-form-section h3{margin:0;color:var(--absp-primary-2);font-size:13px;font-weight:900}.absp-request-form label span{font-size:12.5px}.absp-request-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:13px;padding-inline-end:28px}.absp-request-form input,.absp-request-form select{min-height:41px}.absp-agree{display:flex!important;gap:10px!important;align-items:flex-start;padding:10px 12px;border-radius:15px;background:#fff8ef;border:1px dashed rgba(224,131,38,.24);line-height:1.5}.absp-agree input{width:18px!important;height:18px!important;margin-top:2px;accent-color:var(--absp-accent)}
@media(max-height:740px) and (min-width:981px){
  .absp-login-page{padding:8px}
  .absp-shell{height:100%}
  .absp-top-header{min-height:78px;padding:10px 18px}
  .absp-logo-box img{max-height:48px}
  .absp-main-grid{padding:12px;gap:12px}
  .absp-role-card-area,.absp-login-card{padding:12px;border-radius:20px}
  .absp-role-option{min-height:58px;padding:8px 10px}
  .absp-role-mark{width:34px;height:34px;flex-basis:34px;font-size:18px}
  .absp-section-head h1,.absp-login-head h2{font-size:19px}
  .absp-section-head p,.absp-login-head p{display:none}
  .absp-login-form input,.absp-otp-form input{min-height:40px}
  .absp-primary-btn{height:42px}
  .absp-secondary-actions{margin-top:8px}
}
@media(max-width:980px){
  html:has(.absp-login-page),body:has(.absp-login-page){overflow:auto!important}
  .absp-login-page{height:auto;min-height:100dvh;padding:14px;place-items:start center;overflow:hidden}
  body.admin-bar .absp-login-page{height:auto;min-height:calc(100dvh - 32px)}
  .absp-shell{width:100%;height:auto;max-height:none;border-radius:26px;overflow:hidden}
  .absp-top-header{min-height:auto;border-radius:26px 26px 0 0;display:grid;justify-items:center;text-align:center;padding:16px}
  .absp-logo-box{width:min(520px,100%)}
  .absp-portal-title{display:none}
  .absp-main-grid{height:auto;grid-template-columns:1fr;padding:16px;overflow:visible}
  .absp-role-card-area,.absp-login-card{height:auto;overflow:hidden}
  .absp-role-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .absp-request-form{grid-template-columns:1fr}
  .absp-field-half,.absp-field-quarter{grid-column:1/-1}
}
@media(max-width:560px){
  .absp-login-page{padding:10px}
  .absp-shell{width:100%;border-radius:22px}
  .absp-logo-box img{max-height:58px}
  .absp-main-grid{padding:12px;gap:12px}
  .absp-role-card-area,.absp-login-card{padding:14px;border-radius:20px}
  .absp-section-head,.absp-login-head{display:grid}
  .absp-group-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .absp-group-tab{flex:0 0 auto}
  .absp-role-panel{grid-template-columns:1fr}
  .absp-role-option{min-height:64px}
  .absp-secondary-actions{grid-template-columns:1fr}
  .absp-request-form{grid-template-columns:1fr}
  .absp-field-half,.absp-field-quarter{grid-column:1/-1}
  .absp-modal-card{width:calc(100vw - 20px);padding:14px;border-radius:22px}
  .absp-modal-head{padding:42px 0 12px}
}


/* Front-end password recovery flow */
.absp-help-button{
  font-family:var(--absp-font);
  cursor:pointer;
}
.absp-forgot-modal,
.absp-password-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  place-items:center;
  padding:16px;
  background:rgba(21,29,42,.44);
  backdrop-filter:blur(12px);
}
.absp-forgot-modal.is-open,
.absp-password-modal.is-open{display:grid}
.absp-compact-modal-card{
  width:min(520px,calc(100vw - 32px));
  max-height:88dvh;
  overflow:auto;
  border-radius:24px;
  padding:18px;
}
.absp-compact-modal-head{
  padding:2px 46px 12px 0;
  margin-bottom:14px;
}
.absp-reset-flow-form{
  display:grid;
  gap:11px;
}
.absp-reset-flow-form label{
  display:grid;
  gap:6px;
  font-weight:900;
  color:#344054;
  font-size:13px;
}
.absp-reset-flow-form input{
  width:100%;
  max-width:100%;
  border:1px solid rgba(23,32,51,.12);
  background:#fff;
  color:var(--absp-ink);
  border-radius:15px;
  min-height:44px;
  padding:0 13px;
  outline:none;
  font-family:var(--absp-font);
  font-size:14px;
  font-weight:700;
  transition:.15s ease;
}
.absp-reset-flow-form input:focus{
  border-color:rgba(224,131,38,.62);
  box-shadow:0 0 0 4px rgba(224,131,38,.10);
}
.absp-field-note{
  border:1px solid rgba(38,224,208,.22);
  background:rgba(38,224,208,.07);
  color:#24796f;
  border-radius:14px;
  padding:9px 11px;
  font-size:12px;
  line-height:1.7;
  font-weight:900;
}
.absp-modal-alert{
  display:none;
  border-radius:14px;
  padding:9px 11px;
  font-size:12px;
  line-height:1.7;
  font-weight:900;
  text-align:center;
}
.absp-modal-alert.is-visible{display:block;background:#f2f4f8;color:#475467}
.absp-modal-alert.is-success{background:#edf8f1;color:#207c55}
.absp-modal-alert.is-error{background:#fff0ee;color:#b04444}

/* v1.1.32 - Contextual portal journey on the login screen */
.absp-role-panels{flex:0 0 auto}
.absp-path-showcase{
  --absp-showcase-accent:#26e0d0;
  position:relative;
  flex:1 1 auto;
  min-height:265px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  color:#fff;
  background:#111b55;
  background:
    radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--absp-showcase-accent) 22%,transparent),transparent 34%),
    radial-gradient(circle at 92% 110%,rgba(224,131,38,.18),transparent 42%),
    linear-gradient(135deg,#0a145d 0%,#16214f 58%,#26364b 100%);
  box-shadow:0 18px 38px rgba(15,27,62,.18);
  overflow:hidden;
  isolation:isolate;
}
.absp-path-showcase:before{content:"";position:absolute;inset:-40% auto auto -8%;width:190px;height:190px;border:1px solid rgba(255,255,255,.07);border-radius:50%;z-index:-1}
.absp-showcase-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.absp-showcase-head>div:first-child{min-width:0}
.absp-showcase-eyebrow{display:block;color:var(--absp-showcase-accent);font-size:9.5px;font-weight:900;letter-spacing:.1px}
.absp-showcase-head strong{display:block;margin-top:2px;color:#fff;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absp-showcase-controls{display:flex;direction:ltr;gap:5px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.07)}
.absp-showcase-controls button{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;font:900 14px/1 var(--absp-font);cursor:pointer;transition:.16s ease}
.absp-showcase-controls button:hover,.absp-showcase-controls button:focus-visible{background:rgba(255,255,255,.14);outline:none}
.absp-showcase-controls [data-showcase-toggle]{font-size:9px;color:var(--absp-showcase-accent)}
.absp-showcase-stage{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:13px;align-items:center;min-height:0;transition:opacity .22s ease,transform .22s ease}
.absp-path-showcase.is-changing .absp-showcase-stage{opacity:.2;transform:translateY(5px)}
.absp-showcase-visual{position:relative;min-height:148px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.absp-showcase-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--absp-showcase-accent) 28%,transparent);border-radius:50%;animation:abspShowcaseOrbit 9s linear infinite}
.absp-showcase-orbit.is-one{width:96px;height:96px;top:-37px;right:-22px}
.absp-showcase-orbit.is-two{width:72px;height:72px;bottom:-30px;left:-18px;animation-direction:reverse;animation-duration:7s}
.absp-showcase-symbol{position:absolute;top:11px;right:12px;width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--absp-showcase-accent) 50%,transparent);border-radius:14px;background:color-mix(in srgb,var(--absp-showcase-accent) 14%,rgba(255,255,255,.08));color:var(--absp-showcase-accent);font-size:23px;font-style:normal;box-shadow:0 10px 24px rgba(0,0,0,.13)}
.absp-showcase-flow{position:absolute;inset:64px 11px auto;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:4px;align-items:center;direction:rtl}
.absp-showcase-flow span{min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.075);padding:6px 3px;color:#fff;font-size:8px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absp-showcase-flow b{color:var(--absp-showcase-accent);font-size:9px}
.absp-showcase-metric{position:absolute;right:11px;bottom:10px;left:11px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.09);padding-top:7px}
.absp-showcase-metric span{color:rgba(255,255,255,.68);font-size:8px;font-weight:800}
.absp-showcase-metric strong{color:#fff;font-size:17px;line-height:1;font-weight:900;direction:ltr}
.absp-showcase-copy{min-width:0}
.absp-showcase-copy>span{display:inline-flex;border:1px solid color-mix(in srgb,var(--absp-showcase-accent) 35%,transparent);border-radius:999px;background:color-mix(in srgb,var(--absp-showcase-accent) 10%,transparent);padding:4px 7px;color:var(--absp-showcase-accent);font-size:8px;font-weight:900;direction:ltr}
.absp-showcase-copy h2{margin:7px 0 5px;color:#fff;font-size:16px;line-height:1.45;font-weight:900;letter-spacing:-.1px}
.absp-showcase-copy p{margin:0;color:rgba(255,255,255,.71);font-size:9px;line-height:1.75;font-weight:750}
.absp-showcase-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.absp-showcase-tags em{border-radius:999px;background:rgba(255,255,255,.08);padding:4px 7px;color:rgba(255,255,255,.86);font-size:7.5px;font-style:normal;font-weight:850}
.absp-showcase-footer{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;gap:8px;align-items:center}
.absp-showcase-dots{display:flex;direction:ltr;gap:4px}
.absp-showcase-dots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.26);cursor:pointer;transition:.2s ease}
.absp-showcase-dots button.is-active{width:18px;background:var(--absp-showcase-accent)}
.absp-showcase-progress{height:3px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.absp-showcase-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--absp-showcase-accent),#fff)}
.absp-path-showcase.is-ticking .absp-showcase-progress i{animation:abspShowcaseProgress 7s linear forwards}
.absp-path-showcase.is-paused .absp-showcase-progress i{animation-play-state:paused}
.absp-showcase-footer small{color:rgba(255,255,255,.58);font-size:8px;font-weight:900;direction:ltr}
@keyframes abspShowcaseProgress{from{width:0}to{width:100%}}
@keyframes abspShowcaseOrbit{to{transform:rotate(360deg)}}

@media(max-height:740px) and (min-width:981px){
  .absp-role-card-area{gap:9px}
  .absp-path-showcase{min-height:235px;padding:10px;gap:7px}
  .absp-showcase-visual{min-height:127px}
  .absp-showcase-flow{inset-block-start:55px}
  .absp-showcase-copy h2{font-size:14px;margin:5px 0 3px}
  .absp-showcase-copy p{line-height:1.55}
  .absp-showcase-tags{margin-top:5px}
}
@media(max-width:980px){
  .absp-path-showcase{flex:none;min-height:285px}
}
@media(max-width:560px){
  .absp-path-showcase{min-height:420px}
  .absp-showcase-stage{grid-template-columns:1fr;align-content:start}
  .absp-showcase-visual{min-height:135px}
  .absp-showcase-copy h2{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .absp-path-showcase *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

/* v1.1.33 - Immersive portal preview scene */
.absp-path-showcase{
  --absp-depth-x:0;
  --absp-depth-y:0;
  min-height:300px;
  padding:14px;
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--absp-showcase-accent) 24%,transparent),transparent 29%),
    radial-gradient(circle at 96% 100%,rgba(224,131,38,.20),transparent 37%),
    linear-gradient(142deg,#080f4c 0%,#111d59 52%,#26364b 100%);
}
.absp-path-showcase:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent)}
.absp-showcase-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.absp-showcase-ambient i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--absp-showcase-accent);box-shadow:0 0 13px color-mix(in srgb,var(--absp-showcase-accent) 75%,transparent);opacity:.6;animation:abspShowcaseParticle 7s ease-in-out infinite}
.absp-showcase-ambient i:nth-child(1){top:18%;left:8%}.absp-showcase-ambient i:nth-child(2){top:72%;left:16%;animation-delay:-3s}.absp-showcase-ambient i:nth-child(3){top:12%;left:48%;animation-delay:-5s}.absp-showcase-ambient i:nth-child(4){top:82%;right:8%;animation-delay:-2s}.absp-showcase-ambient i:nth-child(5){top:37%;right:4%;animation-delay:-6s}.absp-showcase-ambient i:nth-child(6){bottom:8%;left:52%;animation-delay:-4s}
.absp-showcase-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:15px}
.absp-showcase-visual{min-height:190px;border:0;border-radius:20px;background:transparent;box-shadow:none;overflow:visible;perspective:800px}
.absp-showcase-window{position:absolute;inset:0;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));box-shadow:0 22px 45px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.13);overflow:hidden;transform:perspective(700px) rotateX(calc(var(--absp-depth-y) * -2.2deg)) rotateY(calc(var(--absp-depth-x) * 2.5deg));transform-style:preserve-3d;transition:transform .2s ease,box-shadow .2s ease}
.absp-showcase-visual:hover .absp-showcase-window{box-shadow:0 26px 55px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.16)}
.absp-showcase-window>header{height:27px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:0 9px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(5,11,45,.30);direction:ltr}
.absp-showcase-window>header>span{display:flex;gap:4px}.absp-showcase-window>header>span i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25)}.absp-showcase-window>header>span i:first-child{background:#e08326}.absp-showcase-window>header>span i:nth-child(2){background:#e9b15e}.absp-showcase-window>header>span i:last-child{background:#26e0d0}
.absp-showcase-window>header strong{color:rgba(255,255,255,.72);font:850 7px/1 var(--absp-font);letter-spacing:.7px}.absp-showcase-window>header em{justify-self:end;border-radius:999px;background:rgba(38,224,208,.12);padding:3px 5px;color:#80f4e9;font:900 6px/1 var(--absp-font);font-style:normal;letter-spacing:.5px}
.absp-showcase-canvas{position:absolute;inset:27px 0 0;overflow:hidden}
.absp-showcase-canvas:before{content:"";position:absolute;inset:14% 22%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--absp-showcase-accent) 15%,transparent),transparent 65%);filter:blur(5px);animation:abspShowcasePulse 3.4s ease-in-out infinite}
.absp-showcase-core{position:absolute;z-index:3;top:50%;left:50%;width:86px;height:86px;display:grid;place-items:center;align-content:center;gap:1px;border:1px solid color-mix(in srgb,var(--absp-showcase-accent) 43%,rgba(255,255,255,.1));border-radius:27px;background:linear-gradient(145deg,color-mix(in srgb,var(--absp-showcase-accent) 17%,rgba(255,255,255,.08)),rgba(7,15,61,.78));box-shadow:0 0 0 8px rgba(255,255,255,.025),0 17px 33px rgba(0,0,0,.24),0 0 32px color-mix(in srgb,var(--absp-showcase-accent) 15%,transparent);transform:translate(-50%,-50%) translateZ(25px);animation:abspShowcaseCore 4.5s ease-in-out infinite}
.absp-showcase-core:before,.absp-showcase-core:after{content:"";position:absolute;width:58px;height:1px;top:50%;background:linear-gradient(90deg,transparent,var(--absp-showcase-accent));opacity:.28}.absp-showcase-core:before{right:100%;transform:rotate(20deg);transform-origin:right}.absp-showcase-core:after{left:100%;transform:rotate(-20deg);transform-origin:left}
.absp-showcase-core .absp-showcase-symbol{position:relative;top:auto;right:auto;width:31px;height:31px;border:0;border-radius:11px;background:color-mix(in srgb,var(--absp-showcase-accent) 18%,rgba(255,255,255,.07));color:var(--absp-showcase-accent);font-size:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--absp-showcase-accent) 32%,transparent)}
.absp-showcase-core small{max-width:70px;color:rgba(255,255,255,.62);font-size:6px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.absp-showcase-core strong{color:#fff;font-size:14px;line-height:1;font-weight:950;direction:ltr}.absp-showcase-core>i{position:absolute;inset:-5px;border:1px dashed color-mix(in srgb,var(--absp-showcase-accent) 35%,transparent);border-radius:31px;animation:abspShowcaseOrbit 13s linear infinite}
.absp-showcase-module{position:absolute;z-index:4;width:104px;min-height:45px;display:grid;grid-template-columns:21px 1fr;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.065));padding:7px;color:#fff;box-shadow:0 13px 27px rgba(0,0,0,.17);backdrop-filter:blur(10px);animation:abspShowcaseFloat 4.8s ease-in-out infinite;transition:border-color .2s ease,background .2s ease}
.absp-showcase-module:hover{border-color:color-mix(in srgb,var(--absp-showcase-accent) 45%,transparent);background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.08))}
.absp-showcase-module>b{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--absp-showcase-accent) 13%,rgba(255,255,255,.06));color:var(--absp-showcase-accent);font-size:6px}.absp-showcase-module div{min-width:0}.absp-showcase-module strong,.absp-showcase-module small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.absp-showcase-module strong{font-size:7.5px;font-weight:950}.absp-showcase-module small{margin-top:2px;color:rgba(255,255,255,.55);font-size:5.8px;font-weight:750}.absp-showcase-module>em{position:absolute;right:7px;bottom:4px;width:28px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--absp-showcase-accent),transparent);opacity:.5}
.absp-showcase-module.is-first{top:12px;left:8px;animation-delay:-1.5s}.absp-showcase-module.is-second{top:63px;right:7px;animation-delay:-3.2s}.absp-showcase-module.is-third{bottom:10px;left:13px;animation-delay:-.4s}
.absp-showcase-orbit.is-one{width:138px;height:138px;top:4px;right:calc(50% - 69px);border-color:color-mix(in srgb,var(--absp-showcase-accent) 18%,transparent);border-style:dashed;animation-duration:17s}.absp-showcase-orbit.is-two{width:174px;height:174px;bottom:-28px;left:calc(50% - 87px);border-color:rgba(255,255,255,.07);animation-duration:21s}
.absp-showcase-copy h2{font-size:18px;line-height:1.4}.absp-showcase-copy p{font-size:9.5px;line-height:1.8}.absp-showcase-tags em{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.075)}
@keyframes abspShowcaseParticle{0%,100%{transform:translate3d(0,0,0);opacity:.22}50%{transform:translate3d(7px,-14px,0);opacity:.78}}
@keyframes abspShowcasePulse{0%,100%{transform:scale(.86);opacity:.45}50%{transform:scale(1.12);opacity:1}}
@keyframes abspShowcaseCore{0%,100%{margin-top:0}50%{margin-top:-5px}}
@keyframes abspShowcaseFloat{0%,100%{transform:translate3d(0,0,18px)}50%{transform:translate3d(0,-5px,28px)}}
@media(max-height:740px) and (min-width:981px){.absp-path-showcase{min-height:250px}.absp-showcase-visual{min-height:145px}.absp-showcase-module{transform:scale(.9)}.absp-showcase-copy h2{font-size:14px}}
@media(max-width:980px){.absp-path-showcase{min-height:315px}}
@media(max-width:560px){.absp-path-showcase{min-height:510px}.absp-showcase-stage{grid-template-columns:1fr}.absp-showcase-visual{min-height:205px}.absp-showcase-copy h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.absp-showcase-window{transform:none!important}.absp-showcase-ambient{display:none}}

/* v1.2.1 — Distinguished welcome experience (main interface only) */
.absp-login-page{
  --absp-pointer-x:50%;
  --absp-pointer-y:46%;
  padding:18px;
  background:
    radial-gradient(circle at var(--absp-pointer-x) var(--absp-pointer-y),rgba(31,190,177,.13),transparent 27%),
    radial-gradient(circle at 88% 8%,rgba(224,131,38,.20),transparent 25%),
    radial-gradient(circle at 7% 92%,rgba(83,110,229,.24),transparent 31%),
    linear-gradient(142deg,#050b2f 0%,#091348 48%,#101a3e 100%);
  isolation:isolate;
}
.absp-login-page:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,#000 15%,transparent 76%);
}
.absp-login-page:after{
  content:"";
  position:absolute;
  inset:10% 15%;
  z-index:-3;
  border-radius:50%;
  background:rgba(30,180,170,.16);
  filter:blur(110px);
  pointer-events:none;
}
.absp-login-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.absp-login-atmosphere>span{position:absolute;border-radius:50%}
.absp-login-atmosphere .is-orbit-one{width:420px;height:420px;top:-250px;right:-100px;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 42px rgba(255,255,255,.018),0 0 0 84px rgba(255,255,255,.012);animation:abspWelcomeOrbit 30s linear infinite}
.absp-login-atmosphere .is-orbit-two{width:340px;height:340px;bottom:-230px;left:-80px;border:1px dashed rgba(224,131,38,.25);animation:abspWelcomeOrbit 24s linear infinite reverse}
.absp-login-atmosphere .is-glow{width:9px;height:9px;top:16%;left:12%;background:#50e4d7;box-shadow:0 0 32px 10px rgba(80,228,215,.45);animation:abspWelcomeGlow 4s ease-in-out infinite}
.absp-login-atmosphere>i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.72);opacity:.42;animation:abspWelcomeParticle 8s ease-in-out infinite}
.absp-login-atmosphere>i:nth-of-type(1){top:12%;left:28%}.absp-login-atmosphere>i:nth-of-type(2){top:75%;left:9%;animation-delay:-3s}.absp-login-atmosphere>i:nth-of-type(3){top:24%;right:18%;animation-delay:-5s}.absp-login-atmosphere>i:nth-of-type(4){bottom:10%;right:30%;animation-delay:-1.5s}.absp-login-atmosphere>i:nth-of-type(5){top:51%;left:3%;animation-delay:-6s}
.absp-shell{
  width:min(1280px,100%);
  height:min(780px,100%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.985),rgba(246,249,252,.965));
  box-shadow:0 42px 110px rgba(0,5,34,.48),0 2px 0 rgba(255,255,255,.72) inset;
  backdrop-filter:blur(24px) saturate(1.15);
}
.absp-top-header{
  min-height:104px;
  padding:15px 20px;
  gap:13px;
  border-radius:34px 34px 0 0;
  background:
    radial-gradient(circle at 4% 0%,rgba(81,225,211,.15),transparent 28%),
    radial-gradient(circle at 92% 110%,rgba(224,131,38,.22),transparent 35%),
    linear-gradient(132deg,#071153 0%,#111e5b 55%,#183b4e 100%);
}
.absp-top-header:after{content:"";position:absolute;inset:auto 20px 0;height:1px;background:linear-gradient(90deg,transparent,rgba(91,235,220,.45),rgba(224,131,38,.42),transparent)}
.absp-header-brand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.absp-logo-box{
  width:min(475px,48vw);
  min-width:315px;
  padding:12px 17px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:19px;
  background:linear-gradient(145deg,#fff,#f7f9fd);
  box-shadow:0 16px 35px rgba(1,7,42,.25),0 1px 0 #fff inset;
}
.absp-logo-box img{max-height:52px}
.absp-header-brand-copy{min-width:0;padding-inline-start:1px}
.absp-header-brand-copy span,.absp-header-brand-copy strong,.absp-header-brand-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absp-header-brand-copy span{margin-bottom:4px;color:#62e7da;font-size:9px;font-weight:950;letter-spacing:.8px}
.absp-header-brand-copy strong{color:#fff;font-size:16px;line-height:1.35;font-weight:950}
.absp-header-brand-copy small{margin-top:4px;color:rgba(255,255,255,.58);font-size:8.5px;font-weight:800}
.absp-header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.absp-live-status{height:50px;display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.absp-live-status>i{position:relative;width:9px;height:9px;border-radius:50%;background:#56dfab;box-shadow:0 0 0 5px rgba(86,223,171,.10),0 0 18px rgba(86,223,171,.55)}
.absp-live-status>i:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(86,223,171,.48);border-radius:50%;animation:abspStatusPulse 2.2s ease-out infinite}
.absp-live-status span strong,.absp-live-status span small{display:block;white-space:nowrap}
.absp-live-status span strong{color:#fff;font-size:9.5px;font-weight:950}.absp-live-status span small{margin-top:3px;color:rgba(255,255,255,.53);font-size:7.5px;font-weight:800;letter-spacing:.4px}
.absp-portal-title{min-width:135px;padding:9px 13px;border-radius:16px;background:rgba(255,255,255,.075)}
.absp-portal-title span{font-size:9px;margin-bottom:3px}.absp-portal-title strong{font-size:15px}
.absp-top-header>.absp-language-switcher{margin-inline-start:0!important;border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.96)!important;box-shadow:0 14px 30px rgba(0,6,43,.22)!important}
.absp-main-grid{grid-template-columns:minmax(0,1.17fr) minmax(365px,.83fr);gap:18px;padding:19px}
.absp-role-card-area,.absp-login-card{border-color:rgba(29,49,77,.105);border-radius:26px;box-shadow:0 18px 40px rgba(18,35,58,.075),0 1px 0 #fff inset}
.absp-role-card-area{position:relative;padding:17px;gap:11px;background:linear-gradient(155deg,#fff 0%,#fbfcfe 58%,#f5faf9 100%)}
.absp-role-card-area:before{content:"";position:absolute;top:-85px;left:-70px;width:210px;height:210px;border-radius:50%;background:rgba(39,188,175,.07);filter:blur(4px);pointer-events:none}
.absp-section-head{position:relative;align-items:center}
.absp-section-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:5px;color:#178379;font-size:9px;font-weight:950;letter-spacing:.25px}
.absp-section-eyebrow i{width:18px;height:2px;border-radius:999px;background:linear-gradient(90deg,#1ca79a,#e08326)}
.absp-section-head h1{font-size:24px;letter-spacing:-.45px}.absp-section-head p{margin-top:3px;font-size:12px}
.absp-path-count{width:78px;min-height:58px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:6px;padding:8px;border:1px solid rgba(29,49,77,.08);border-radius:17px;background:rgba(255,255,255,.78);box-shadow:0 10px 25px rgba(16,38,60,.065)}
.absp-path-count strong{color:#0d1a5e;font-size:24px;line-height:1;font-weight:950}.absp-path-count span{color:#718096;font-size:7.5px;line-height:1.45;font-weight:900}
.absp-group-tabs{gap:7px;padding:4px;border:1px solid rgba(29,49,77,.07);border-radius:17px;background:#f1f4f7;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.absp-group-tabs::-webkit-scrollbar{display:none}
.absp-group-tab{height:36px;flex:1 0 auto;border:0;border-radius:13px;background:transparent;font-size:11.5px;box-shadow:none}
.absp-group-tab:hover{transform:none;background:rgba(255,255,255,.68);box-shadow:none}.absp-group-tab.is-active{background:#fff;color:#9b5417;box-shadow:0 7px 17px rgba(28,44,67,.09),inset 0 -2px 0 rgba(224,131,38,.65)}
.absp-role-panel{gap:8px}.absp-role-option{position:relative;min-height:70px;padding:10px 11px;border-radius:18px;background:rgba(255,255,255,.84);overflow:hidden}
.absp-role-option:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,transparent,rgba(28,167,154,.42),transparent);opacity:0;transition:.2s ease}
.absp-role-option:after{content:"✓";position:absolute;top:7px;left:7px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#158a7f;color:#fff;font:950 9px/1 var(--absp-font);opacity:0;transform:scale(.65);transition:.18s ease}
.absp-role-option:hover{transform:translateY(-2px);border-color:rgba(23,137,126,.24);box-shadow:0 14px 26px rgba(15,34,56,.09)}
.absp-role-option:hover:before,.absp-role-option.is-selected:before{opacity:1}.absp-role-option.is-selected:after{opacity:1;transform:scale(1)}
.absp-role-option.is-selected{background:linear-gradient(135deg,rgba(28,167,154,.105),rgba(224,131,38,.085)),#fff;border-color:rgba(23,137,126,.34);box-shadow:0 0 0 4px rgba(28,167,154,.075),0 14px 26px rgba(15,34,56,.08)}
.absp-role-mark{width:42px;height:42px;flex-basis:42px;border:1px solid rgba(21,42,76,.07);background:linear-gradient(145deg,#f7f9fc,#edf2f6);box-shadow:0 8px 17px rgba(16,33,56,.07)}
.absp-role-option[data-role="principal"] .absp-role-mark,.absp-role-option[data-role="vice_principal"] .absp-role-mark{background:linear-gradient(145deg,#fff3e3,#f9e5c7)}
.absp-role-option[data-role="teacher"] .absp-role-mark,.absp-role-option[data-role="department_head"] .absp-role-mark{background:linear-gradient(145deg,#e6faf7,#d5f2ee)}
.absp-role-option[data-role="social_worker"] .absp-role-mark,.absp-role-option[data-role="librarian"] .absp-role-mark{background:linear-gradient(145deg,#eef1ff,#e0e6ff)}
.absp-login-card{position:relative;padding:18px;justify-content:flex-start;background:linear-gradient(155deg,#ffffff 0%,#fafbfe 57%,#f7faf9 100%)}
.absp-login-card:before{content:"";position:absolute;top:0;right:22px;left:22px;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,transparent,#1b9f92,#e08326,transparent)}
.absp-login-card:after{content:"";position:absolute;right:-75px;bottom:-85px;width:220px;height:220px;border:1px solid rgba(28,167,154,.08);border-radius:50%;box-shadow:0 0 0 28px rgba(28,167,154,.022),0 0 0 55px rgba(28,167,154,.014);pointer-events:none}
.absp-security-ribbon{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;margin-bottom:14px;padding:10px 11px;border:1px solid rgba(24,131,121,.15);border-radius:18px;background:linear-gradient(135deg,rgba(28,167,154,.09),rgba(255,255,255,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.absp-security-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#0e736b,#19a597);color:#fff;font-size:16px;font-weight:950;box-shadow:0 10px 20px rgba(18,135,124,.20)}
.absp-security-ribbon div strong,.absp-security-ribbon div small{display:block}.absp-security-ribbon div strong{color:#17384a;font-size:11px;font-weight:950}.absp-security-ribbon div small{margin-top:3px;color:#738190;font-size:8.5px;font-weight:800}
.absp-security-ribbon>em{border:1px solid rgba(24,131,121,.17);border-radius:999px;background:#fff;padding:5px 7px;color:#15776f;font-size:8px;font-style:normal;font-weight:950;letter-spacing:.6px}
.absp-login-head{margin-bottom:11px}.absp-login-head h2{font-size:23px;letter-spacing:-.35px}.absp-login-head p{font-size:11.5px}
.absp-step-mini{position:relative;gap:4px;padding:4px;background:#eef2f4}.absp-step-mini:before{content:"";position:absolute;right:15px;left:15px;top:50%;height:1px;background:rgba(47,68,90,.11)}.absp-step-mini span{position:relative;width:29px;height:29px;background:#eef2f4}.absp-step-mini span.is-active{background:linear-gradient(145deg,#0f2a67,#174c61);box-shadow:0 8px 18px rgba(10,34,84,.20)}
.absp-selected-role{min-height:42px;border-style:solid;border-color:rgba(28,167,154,.14);background:rgba(28,167,154,.055);color:#2c5e66}
.absp-login-form,.absp-otp-form{position:relative;z-index:1;gap:11px}
.absp-login-form input,.absp-otp-form input{min-height:48px;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 5px 15px rgba(20,39,64,.035) inset}
.absp-login-form input:hover,.absp-otp-form input:hover{border-color:rgba(28,167,154,.24)}
.absp-login-form input:focus,.absp-otp-form input:focus{border-color:rgba(23,145,134,.55);box-shadow:0 0 0 4px rgba(28,167,154,.105)}
.absp-primary-btn{height:49px;border-radius:16px;background:linear-gradient(115deg,#08186d 0%,#123f61 58%,#157f77 100%);box-shadow:0 16px 30px rgba(7,32,84,.22);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.absp-primary-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 19px 34px rgba(7,32,84,.26)}
.absp-secondary-actions{position:relative;z-index:1}.absp-outline-btn,.absp-help-link{border-radius:14px;transition:.17s ease}.absp-outline-btn:hover,.absp-help-link:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(18,35,58,.07)}
.absp-login-assurance{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(35,55,76,.075)}
.absp-login-assurance span{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#f1f5f5;padding:5px 7px;color:#64747d;font-size:8px;font-weight:900;white-space:nowrap}.absp-login-assurance i{width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#dff3ef;color:#14776e;font-size:8px;font-style:normal}
.absp-path-showcase{border-radius:24px;box-shadow:0 22px 46px rgba(10,24,65,.23);background:radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--absp-showcase-accent) 25%,transparent),transparent 29%),radial-gradient(circle at 96% 100%,rgba(224,131,38,.22),transparent 37%),linear-gradient(142deg,#060d43 0%,#101b55 52%,#174356 100%)}
html.absp-language-en .absp-role-option{text-align:left}html.absp-language-en .absp-role-option:before{left:auto;right:0}html.absp-language-en .absp-role-option:after{left:auto;right:7px}
@keyframes abspWelcomeOrbit{to{transform:rotate(360deg)}}
@keyframes abspWelcomeGlow{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes abspWelcomeParticle{0%,100%{transform:translate3d(0,0,0);opacity:.22}50%{transform:translate3d(8px,-17px,0);opacity:.7}}
@keyframes abspStatusPulse{0%{opacity:.9;transform:scale(.55)}80%,100%{opacity:0;transform:scale(1.55)}}

@media(max-width:1180px) and (min-width:981px){
  .absp-header-brand-copy{display:none}.absp-logo-box{width:min(455px,42vw)}.absp-live-status{display:none}
  .absp-main-grid{grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr)}
  .absp-path-count{display:none}
}
@media(max-height:790px) and (min-width:981px){
  .absp-login-page{padding:9px}.absp-shell{height:100%;border-radius:27px}.absp-top-header{min-height:82px;padding:10px 16px;border-radius:27px 27px 0 0}
  .absp-logo-box{padding:9px 14px}.absp-logo-box img{max-height:45px}.absp-header-brand-copy small{display:none}.absp-live-status{height:46px}.absp-portal-title{padding:7px 11px}
  .absp-main-grid{padding:12px;gap:12px}.absp-role-card-area,.absp-login-card{padding:12px;border-radius:21px}.absp-role-card-area{gap:8px}
  .absp-section-eyebrow,.absp-path-count{display:none}.absp-section-head h1{font-size:20px}.absp-section-head p{display:none}.absp-group-tab{height:32px}.absp-role-option{min-height:58px}.absp-role-mark{width:35px;height:35px;flex-basis:35px;font-size:17px}
  .absp-security-ribbon{margin-bottom:9px;padding:7px 9px}.absp-security-mark{width:34px;height:34px}.absp-login-head{margin-bottom:8px}.absp-login-head h2{font-size:20px}.absp-login-form,.absp-otp-form{gap:8px}.absp-login-form input,.absp-otp-form input{min-height:40px}.absp-primary-btn{height:42px}.absp-login-assurance{display:none}
}
@media(max-width:980px){
  .absp-login-page{padding:12px}.absp-shell{border-radius:28px}.absp-top-header{border-radius:28px 28px 0 0;display:flex;justify-content:center}.absp-header-brand{justify-content:center;width:100%}.absp-header-brand-copy,.absp-header-actions{display:none}.absp-logo-box{width:min(500px,72vw);min-width:0}
  .absp-main-grid{grid-template-columns:1fr}.absp-login-card{min-height:480px}.absp-path-showcase{min-height:330px}
}
@media(max-width:760px){
  .absp-login-page{padding:8px}.absp-top-header{min-height:94px;padding:12px;padding-inline-end:144px}.absp-logo-box{width:100%;padding:10px 12px}.absp-logo-box img{max-height:46px}
  .absp-section-eyebrow,.absp-path-count{display:none}.absp-section-head h1{font-size:21px}.absp-security-ribbon{grid-template-columns:36px 1fr}.absp-security-mark{width:36px;height:36px}.absp-security-ribbon>em{display:none}.absp-login-card{min-height:0}
}
@media(max-width:560px){
  .absp-top-header{padding:12px 10px;padding-inline-end:134px}.absp-main-grid{padding:10px}.absp-role-card-area,.absp-login-card{padding:13px}.absp-section-head h1{font-size:20px}
  .absp-group-tabs{border-radius:15px}.absp-group-tab{flex:0 0 auto;padding:0 12px}.absp-role-option{min-height:62px}.absp-path-showcase{min-height:505px}.absp-security-ribbon div small{display:none}.absp-login-assurance{gap:4px}.absp-login-assurance span{font-size:7.5px;padding:4px 6px}
}
@media(prefers-reduced-motion:reduce){.absp-login-atmosphere,.absp-live-status>i:after{animation:none!important}.absp-login-page{--absp-pointer-x:50%;--absp-pointer-y:50%}}


/* v1.2.44.2 — OTP delivery and resend controls */
.absp-otp-secondary-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.absp-resend-otp{color:#15776f}
.absp-resend-otp:disabled{opacity:.55;cursor:not-allowed}
.absp-otp-delivery-note{display:block;text-align:center;color:#71818b;font-size:11px;font-weight:800;line-height:1.7;padding:0 8px}
.absp-countdown.is-expired{color:#a52f3f;background:#fff0f1;border-color:rgba(180,47,65,.18)}
@media(max-width:560px){.absp-otp-secondary-actions{gap:8px}.absp-otp-delivery-note{font-size:10px}}

/* v1.2.44.3 — OTP temporarily disabled; direct credential login preserves current layout. */
.absp-role-option[data-role="portal_admin"] .absp-role-mark{background:linear-gradient(145deg,#e9f4ff,#dbe8f6);color:#244b69}


/* v1.2.96.23 — Login role cards typography + alignment unification
   Uses the same typography source as the main role-group tabs (School Leadership / Teaching & Students). */
.absp-login-page .absp-group-tab,
.absp-login-page .absp-role-option,
.absp-login-page .absp-role-option .absp-role-text{
  font-family:var(--absp-font)!important;
  font-style:normal!important;
  letter-spacing:0!important;
}
.absp-login-page .absp-group-tab{
  font-weight:900!important;
  line-height:1.35;
  text-align:center;
}
.absp-login-page .absp-role-option{
  min-height:72px;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  text-align:start!important;
  font-weight:900!important;
}
.absp-login-page .absp-role-option .absp-role-mark{
  flex:0 0 42px;
  margin:0;
}
.absp-login-page .absp-role-option .absp-role-text{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--absp-primary-2);
  font-size:13.5px;
  font-weight:900!important;
  line-height:1.55;
  text-align:start!important;
  overflow-wrap:normal;
  word-break:normal;
}
html[dir="rtl"] .absp-login-page .absp-role-option,
.absp-login-page[dir="rtl"] .absp-role-option{
  text-align:right!important;
}
html[dir="rtl"] .absp-login-page .absp-role-option .absp-role-text,
.absp-login-page[dir="rtl"] .absp-role-option .absp-role-text{
  text-align:right!important;
}
html.absp-language-en .absp-login-page .absp-role-option,
html.absp-language-en .absp-login-page .absp-role-option .absp-role-text{
  text-align:left!important;
}
@media(max-height:790px) and (min-width:981px){
  .absp-login-page .absp-role-option{min-height:58px;gap:10px}
  .absp-login-page .absp-role-option .absp-role-mark{flex-basis:35px}
  .absp-login-page .absp-role-option .absp-role-text{font-size:12.75px;line-height:1.45}
}
@media(max-width:560px){
  .absp-login-page .absp-role-option{min-height:64px;gap:10px}
  .absp-login-page .absp-role-option .absp-role-text{font-size:13px;line-height:1.5}
}


/* v1.2.96.24 — Prominent Al Bayraq Digital Ecosystem identity
   Keeps the system name visually attached to the school logo so it remains visible
   even at breakpoints where the supporting header copy is intentionally hidden. */
.absp-login-page .absp-logo-box{
  position:relative;
  overflow:visible;
}
.absp-login-page .absp-brand-system-title{
  position:absolute;
  z-index:4;
  inset-inline-start:18px;
  bottom:-11px;
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:calc(100% - 36px);
  min-height:28px;
  padding:5px 12px 6px;
  border:1px solid rgba(96,235,220,.48);
  border-radius:999px;
  background:linear-gradient(125deg,#08155f 0%,#123c64 58%,#126d68 100%);
  color:#fff;
  box-shadow:0 11px 24px rgba(1,10,54,.27),0 1px 0 rgba(255,255,255,.18) inset;
  font-family:var(--absp-font)!important;
  font-size:12.5px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}
.absp-login-page .absp-brand-system-title:before{
  content:"";
  flex:0 0 7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#E08326;
  box-shadow:0 0 0 4px rgba(224,131,38,.14),0 0 14px rgba(224,131,38,.42);
}
html.absp-language-en .absp-login-page .absp-brand-system-title{
  font-size:11.5px;
  letter-spacing:.15px;
}
@media(max-height:790px) and (min-width:981px){
  .absp-login-page .absp-brand-system-title{bottom:-9px;min-height:25px;padding:4px 10px 5px;font-size:11.25px}
}
@media(max-width:980px){
  .absp-login-page .absp-brand-system-title{
    inset-inline-start:auto;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    max-width:calc(100% - 24px);
  }
}
@media(max-width:560px){
  .absp-login-page .absp-brand-system-title{bottom:-9px;min-height:24px;padding:4px 9px 5px;font-size:10.75px}
  html.absp-language-en .absp-login-page .absp-brand-system-title{font-size:9.75px}
}


/* v1.2.96.28 — Signature login composition + viewport fit
   Makes the login experience escape theme content constraints, removes excess dead space,
   and strengthens the first-impression hierarchy without changing authentication logic. */
body:has(.absp-login-page){
  margin:0!important;
  background:#050b2f!important;
}
.absp-login-page{
  width:100vw!important;
  max-width:none!important;
  margin-inline:calc(50% - 50vw)!important;
  padding:clamp(8px,1.05vw,15px)!important;
  place-items:center!important;
  background:
    radial-gradient(circle at var(--absp-pointer-x) var(--absp-pointer-y),rgba(43,211,196,.16),transparent 29%),
    radial-gradient(circle at 91% 3%,rgba(224,131,38,.20),transparent 26%),
    radial-gradient(circle at 3% 96%,rgba(79,105,220,.25),transparent 30%),
    linear-gradient(142deg,#040a2b 0%,#081246 46%,#101a3c 100%)!important;
}
/* The administrative test ribbon adds 26px to body. Subtract it from the login viewport
   so the shell starts immediately below the ribbon instead of being pushed down/clipped. */
body.absp-admin-test-mode-active .absp-login-page{
  height:calc(100dvh - 26px)!important;
}
body.admin-bar.absp-admin-test-mode-active .absp-login-page{
  height:calc(100dvh - 58px)!important;
}
.absp-login-page .absp-shell{
  position:relative;
  width:min(1460px,100%)!important;
  height:min(820px,100%)!important;
  max-height:100%!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:32px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,249,252,.975))!important;
  box-shadow:
    0 34px 92px rgba(0,5,34,.46),
    0 0 0 1px rgba(58,220,207,.07),
    0 2px 0 rgba(255,255,255,.78) inset!important;
}
.absp-login-page .absp-shell:before{
  content:"";
  position:absolute;
  z-index:8;
  top:0;
  left:9%;
  right:9%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(78,232,218,.75),rgba(255,255,255,.88),rgba(224,131,38,.74),transparent);
  filter:drop-shadow(0 0 8px rgba(68,220,207,.36));
}
.absp-login-page .absp-top-header{
  min-height:98px;
  padding:13px 19px;
  background:
    radial-gradient(circle at 5% -12%,rgba(80,232,218,.18),transparent 31%),
    radial-gradient(circle at 96% 118%,rgba(224,131,38,.24),transparent 38%),
    linear-gradient(130deg,#06104f 0%,#111e5b 53%,#173e50 100%)!important;
}
.absp-login-page .absp-logo-box{
  border-color:rgba(255,255,255,.90)!important;
  box-shadow:0 15px 34px rgba(1,7,42,.24),0 1px 0 #fff inset!important;
}
.absp-login-page .absp-main-grid{
  gap:clamp(12px,1.15vw,18px)!important;
  padding:clamp(12px,1.15vw,18px)!important;
}
.absp-login-page .absp-role-card-area,
.absp-login-page .absp-login-card{
  border-color:rgba(24,48,78,.11)!important;
  box-shadow:0 16px 38px rgba(18,35,58,.075),0 1px 0 rgba(255,255,255,.95) inset!important;
}
.absp-login-page .absp-role-card-area{
  background:
    radial-gradient(circle at 0 0,rgba(38,224,208,.075),transparent 24%),
    linear-gradient(155deg,#fff 0%,#fbfcfe 58%,#f5faf9 100%)!important;
}
.absp-login-page .absp-login-card{
  background:
    radial-gradient(circle at 100% 100%,rgba(224,131,38,.055),transparent 25%),
    linear-gradient(155deg,#fff 0%,#fafbfe 57%,#f7faf9 100%)!important;
}
.absp-login-page .absp-section-head h1{
  font-size:clamp(23px,1.75vw,29px);
  letter-spacing:-.55px;
}
.absp-login-page .absp-group-tabs{
  border-color:rgba(25,52,80,.09);
  background:linear-gradient(180deg,#f2f5f7,#edf2f5);
  box-shadow:0 1px 0 rgba(255,255,255,.88) inset;
}
.absp-login-page .absp-group-tab.is-active{
  box-shadow:0 8px 19px rgba(28,44,67,.10),inset 0 -2px 0 rgba(224,131,38,.76)!important;
}
.absp-login-page .absp-role-option{
  border-color:rgba(23,43,70,.095);
  box-shadow:0 6px 16px rgba(18,35,58,.025);
}
.absp-login-page .absp-role-option:hover{
  transform:translateY(-2px);
  border-color:rgba(23,137,126,.27);
  box-shadow:0 14px 28px rgba(15,34,56,.10);
}
.absp-login-page .absp-security-ribbon{
  border-color:rgba(24,131,121,.19);
  background:linear-gradient(135deg,rgba(28,167,154,.115),rgba(255,255,255,.80));
  box-shadow:0 8px 22px rgba(17,64,69,.055),inset 0 1px 0 rgba(255,255,255,.92);
}
.absp-login-page .absp-primary-btn{
  background:linear-gradient(112deg,#07176b 0%,#113d62 53%,#13867c 100%);
  box-shadow:0 16px 30px rgba(7,32,84,.24),0 1px 0 rgba(255,255,255,.13) inset;
}
.absp-login-page .absp-path-showcase{
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 21px 45px rgba(10,24,65,.24),0 1px 0 rgba(255,255,255,.08) inset;
}
@media(max-height:860px) and (min-width:981px){
  .absp-login-page{padding:8px!important}
  .absp-login-page .absp-shell{height:100%!important;border-radius:27px!important}
  .absp-login-page .absp-top-header{min-height:82px;padding:9px 15px;border-radius:27px 27px 0 0}
  .absp-login-page .absp-main-grid{padding:11px!important;gap:11px!important}
}
@media(max-width:980px){
  .absp-login-page{
    width:100%!important;
    margin-inline:0!important;
    height:auto!important;
    min-height:100dvh;
    overflow:auto;
  }
  body.absp-admin-test-mode-active .absp-login-page{min-height:calc(100dvh - 26px);height:auto!important}
  .absp-login-page .absp-shell{width:100%!important;height:auto!important;min-height:calc(100dvh - 24px)}
}
@media(max-width:782px){
  body.admin-bar.absp-admin-test-mode-active .absp-login-page{height:auto!important;min-height:calc(100dvh - 72px)}
}


/* v1.2.96.29 — Login header identity placement + access group counter polish
   Moves the Digital Ecosystem identity into the path-selection header and stacks the
   four-group counter vertically for a cleaner executive composition. */
.absp-login-page .absp-section-meta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  flex:0 0 auto;
  min-width:0;
}
.absp-login-page .absp-section-system-title{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  width:max-content;
  max-width:255px;
  padding:7px 14px 8px;
  border:1px solid rgba(32,174,162,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(10,34,91,.055),rgba(25,147,136,.09));
  color:#0c665f;
  box-shadow:0 8px 22px rgba(17,64,69,.055),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:var(--absp-font)!important;
  font-size:11.75px;
  font-weight:950;
  line-height:1.25;
  letter-spacing:0;
  white-space:nowrap;
}
.absp-login-page .absp-section-system-title:before{
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(145deg,#27cabc,#E08326);
  box-shadow:0 0 0 4px rgba(39,202,188,.10),0 0 14px rgba(39,202,188,.22);
}
.absp-login-page .absp-path-count{
  width:62px;
  min-width:62px;
  min-height:66px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px 6px 8px;
  border:1px solid rgba(29,49,77,.09);
  border-radius:18px;
  background:linear-gradient(155deg,#fff,rgba(244,249,250,.95));
  box-shadow:0 10px 25px rgba(16,38,60,.065),inset 0 1px 0 rgba(255,255,255,.95);
  text-align:center;
}
.absp-login-page .absp-path-count strong{
  display:block;
  color:#1839a7;
  font-size:25px;
  line-height:.95;
  font-weight:950;
}
.absp-login-page .absp-path-count span{
  display:block;
  width:40px;
  max-width:100%;
  color:#59708b;
  font-size:8.25px;
  line-height:1.3;
  font-weight:950;
  text-align:center;
  white-space:normal;
}
html.absp-language-en .absp-login-page .absp-section-system-title{
  font-size:10.75px;
}
html.absp-language-en .absp-login-page .absp-path-count span{
  font-size:7.6px;
}
@media(max-width:1180px) and (min-width:981px){
  .absp-login-page .absp-section-meta{gap:8px}
  .absp-login-page .absp-section-system-title{max-width:210px;padding-inline:11px;font-size:10.75px}
  .absp-login-page .absp-path-count{display:flex;width:58px;min-width:58px;min-height:62px}
}
@media(max-height:790px) and (min-width:981px){
  .absp-login-page .absp-section-meta{gap:7px}
  .absp-login-page .absp-section-system-title{min-height:30px;padding:5px 10px 6px;font-size:10px}
  .absp-login-page .absp-path-count{display:flex;width:54px;min-width:54px;min-height:52px;padding:5px}
  .absp-login-page .absp-path-count strong{font-size:21px}
  .absp-login-page .absp-path-count span{font-size:7px;line-height:1.15}
}
@media(max-width:760px){
  .absp-login-page .absp-section-head{display:grid;grid-template-columns:1fr;gap:10px}
  .absp-login-page .absp-section-meta{justify-content:space-between;width:100%;gap:8px}
  .absp-login-page .absp-section-system-title{max-width:calc(100% - 64px);min-height:30px;padding:5px 10px 6px;font-size:10.5px}
  .absp-login-page .absp-path-count{display:flex;width:56px;min-width:56px;min-height:54px;padding:5px}
  .absp-login-page .absp-path-count strong{font-size:21px}
  .absp-login-page .absp-path-count span{font-size:7.2px}
}
@media(max-width:560px){
  .absp-login-page .absp-section-system-title{font-size:10px;overflow:hidden;text-overflow:ellipsis}
  html.absp-language-en .absp-login-page .absp-section-system-title{font-size:9px}
}

/* v1.2.96.30 — Signature Digital Ecosystem identity showcase
   Turns the Digital Ecosystem label into a premium executive identity block that
   deliberately occupies the white breathing space in the role-selection header. */
.absp-login-page .absp-section-head > div:first-child{
  position:relative;
  z-index:2;
  flex:1 1 44%;
  min-width:0;
}
.absp-login-page .absp-section-meta{
  flex:1 1 56%;
  min-width:330px;
  max-width:430px;
  justify-content:flex-start;
  align-self:stretch;
  gap:10px;
}
.absp-login-page .absp-section-system-card{
  position:relative;
  isolation:isolate;
  flex:1 1 auto;
  min-width:245px;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 15px 11px 13px;
  overflow:hidden;
  border:1px solid rgba(15,53,97,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 15%,rgba(38,224,208,.26),transparent 27%),
    radial-gradient(circle at 92% 92%,rgba(224,131,38,.18),transparent 30%),
    linear-gradient(128deg,#061846 0%,#0a2e58 52%,#0b6466 100%);
  box-shadow:
    0 16px 32px rgba(6,24,70,.19),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.08);
  text-align:right;
}
.absp-login-page .absp-section-system-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,transparent 0 76%,rgba(255,255,255,.055) 76% 76.4%,transparent 76.4%),
    linear-gradient(0deg,transparent 0 69%,rgba(255,255,255,.045) 69% 69.5%,transparent 69.5%);
  opacity:.8;
  pointer-events:none;
}
.absp-login-page .absp-section-system-card:after{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  inset-inline-end:-54px;
  top:-55px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(255,255,255,.025),0 0 0 37px rgba(255,255,255,.018);
  pointer-events:none;
}
.absp-login-page .absp-system-emblem{
  position:relative;
  z-index:2;
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(145deg,#2dd5c4 0%,#a6ded0 48%,#f0b455 100%);
  box-shadow:0 9px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.56);
}
.absp-login-page .absp-system-emblem svg{
  width:31px;
  height:31px;
  overflow:visible;
  fill:#071a5e;
  stroke:#071a5e;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.absp-login-page .absp-system-emblem svg path{fill:none}
.absp-login-page .absp-section-system-copy{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  align-content:center;
  gap:2px;
}
.absp-login-page .absp-system-overline{
  display:block;
  color:#81eee4;
  font-family:var(--absp-font)!important;
  font-size:7.8px;
  font-weight:950;
  line-height:1.1;
  letter-spacing:1.25px;
  direction:ltr;
  text-align:right;
  white-space:nowrap;
  opacity:.93;
}
.absp-login-page .absp-section-system-title{
  display:block!important;
  width:auto;
  max-width:none;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#fff;
  font-family:var(--absp-font)!important;
  font-size:17px;
  font-weight:950;
  line-height:1.25;
  letter-spacing:-.25px;
  white-space:normal;
}
.absp-login-page .absp-section-system-title:before{display:none!important}
.absp-login-page .absp-system-subtitle{
  display:block;
  color:rgba(237,250,255,.76);
  font-family:var(--absp-font)!important;
  font-size:9.2px;
  font-weight:850;
  line-height:1.3;
  white-space:nowrap;
}
.absp-login-page .absp-path-count{
  flex:0 0 64px;
  width:64px;
  min-width:64px;
  min-height:72px;
  border-color:rgba(224,131,38,.20);
  background:
    radial-gradient(circle at 50% 0,rgba(224,131,38,.10),transparent 55%),
    linear-gradient(155deg,#fff,#f7fafc);
  box-shadow:0 13px 27px rgba(16,38,60,.085),inset 0 1px 0 rgba(255,255,255,.98);
}
.absp-login-page .absp-path-count strong{
  color:#0e3b7b;
  text-shadow:0 1px 0 #fff;
}
html.absp-language-en .absp-login-page .absp-section-system-title{
  font-size:13.4px;
  letter-spacing:-.1px;
}
html.absp-language-en .absp-login-page .absp-system-overline{
  font-size:7.3px;
  letter-spacing:1px;
}
html.absp-language-en .absp-login-page .absp-system-subtitle{font-size:8.3px}

@media(max-width:1260px) and (min-width:981px){
  .absp-login-page .absp-section-meta{min-width:295px;max-width:375px;gap:8px}
  .absp-login-page .absp-section-system-card{min-width:220px;min-height:66px;padding:9px 11px;gap:10px}
  .absp-login-page .absp-system-emblem{width:43px;height:43px;flex-basis:43px;border-radius:15px}
  .absp-login-page .absp-system-emblem svg{width:27px;height:27px}
  .absp-login-page .absp-section-system-title{font-size:15px}
  .absp-login-page .absp-system-overline{font-size:6.8px;letter-spacing:.85px}
  .absp-login-page .absp-system-subtitle{font-size:8.4px}
  .absp-login-page .absp-path-count{width:58px;min-width:58px;flex-basis:58px;min-height:66px}
}
@media(max-height:790px) and (min-width:981px){
  .absp-login-page .absp-section-system-card{min-height:58px;padding:7px 10px;gap:9px}
  .absp-login-page .absp-system-emblem{width:38px;height:38px;flex-basis:38px;border-radius:13px}
  .absp-login-page .absp-system-emblem svg{width:24px;height:24px}
  .absp-login-page .absp-section-system-title{font-size:13.5px}
  .absp-login-page .absp-system-overline{font-size:6.2px}
  .absp-login-page .absp-system-subtitle{font-size:7.6px}
  .absp-login-page .absp-path-count{min-height:58px}
}
@media(max-width:980px){
  .absp-login-page .absp-section-head > div:first-child{width:100%}
  .absp-login-page .absp-section-meta{width:100%;max-width:none;min-width:0;align-self:auto}
  .absp-login-page .absp-section-system-card{min-width:0}
}
@media(max-width:760px){
  .absp-login-page .absp-section-meta{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:8px}
  .absp-login-page .absp-section-system-card{min-height:62px;padding:8px 10px;gap:9px;border-radius:18px}
  .absp-login-page .absp-system-emblem{width:40px;height:40px;flex-basis:40px;border-radius:14px}
  .absp-login-page .absp-system-emblem svg{width:25px;height:25px}
  .absp-login-page .absp-section-system-title{font-size:14px}
  .absp-login-page .absp-system-overline{font-size:6.2px;letter-spacing:.7px}
  .absp-login-page .absp-system-subtitle{font-size:7.8px;overflow:hidden;text-overflow:ellipsis}
  .absp-login-page .absp-path-count{display:flex;width:58px;min-width:58px;min-height:62px}
}
@media(max-width:480px){
  .absp-login-page .absp-system-overline{display:none}
  .absp-login-page .absp-section-system-title{font-size:13.5px}
  .absp-login-page .absp-system-subtitle{font-size:7.4px}
}