/* ==========================================================================
   ACADEMYSHIP LOGIN — Refined Premium Neumorphic 3D
   Light · No gradients · Tactile depth · Staff-first UX
   ========================================================================== */
:root {
  --purple: #6C5CE7;
  --purple-deep: #5A4BD6;
  --purple-soft: #EDEAFF;
  --purple-glow: rgba(108,92,231,.14);
  --coral: #E17055;
  --coral-soft: #FFF0EC;
  --teal: #00B894;
  --teal-soft: #E6FFF6;
  --blue: #0984E3;
  --blue-soft: #EBF5FD;
  --mint: #00CEC9;
  --gold: #FDCB6E;
  --pink: #FD79A8;

  --bg: #ECEAF5;
  --card: #ECEAF5;
  --card-light: #FFFFFF;
  --card-dark: #C2BAD2;
  --input-light: #FFFFFF;
  --input-dark: #BEB6D0;

  --text: #16162C;
  --text-mid: #35355A;
  --text-soft: #55557A;
  /* AA-safe muted text token on the existing neumorphic surface (#ECEAF5). */
  --text-mute: #626286;
  --text-inv: #FFFFFF;

  /* Site-standard local fonts: NibPro for body text, AnekBangla for headings.
     Previously 'Inter'/'Space Grotesk' from Google Fonts — removed. Nothing
     rendered in Space Grotesk (its only consumers no longer exist in the
     markup), and Inter reached only the session banner. */
  --font: 'NibPro', Arial, sans-serif;
  --font-d: 'AnekBangla', sans-serif;
  --font-m: 'SF Mono','Cascadia Code','Fira Code',monospace;

  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-s: cubic-bezier(.34,1.56,.64,1);

  --neu-card: 12px 12px 28px var(--card-dark), -10px -10px 24px var(--card-light), 0 1px 4px rgba(0,0,0,.03);
  --neu-raised: 5px 5px 12px var(--card-dark), -4px -4px 10px var(--card-light), 0 1px 2px rgba(0,0,0,.02);
  --neu-inset: inset 3px 3px 6px var(--input-dark), inset -3px -3px 6px var(--input-light), inset 0 1px 2px rgba(0,0,0,.04);
  --neu-btn: 6px 6px 16px var(--card-dark), -5px -5px 12px var(--card-light), 0 2px 6px rgba(108,92,231,.1), inset 0 1.5px 0 rgba(255,255,255,.35);
  --neu-press: inset 3px 3px 7px var(--card-dark), inset -2px -2px 5px var(--card-light), inset 0 1px 3px rgba(0,0,0,.05);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(14px,1vw,16px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh;overflow-x:hidden}
/* Shared <as-navbar> = 34px top-banner + 58px main-nav = 92px. The page below it
   uses the dynamic viewport so a software keyboard can reduce the usable height. */
:root{--acsh-nav-h:92px;--acsh-foot-h:48px;--acsh-viewport-height:100vh}
@supports (height:100dvh){:root{--acsh-viewport-height:100dvh}}
a{color:var(--purple);text-decoration:none;font-weight:600;transition:color .2s var(--ease)}
a:hover{color:var(--purple-deep)}
button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}
input{font-family:inherit}

/* ── Layout ── */
.acsh-page{display:none;height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));max-height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));overflow:hidden;position:relative}
.acsh-page.active{display:grid}
.acsh-layout{display:grid;grid-template-columns:1fr 1fr;height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));max-height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));min-height:0}

/* Slim single-row login footer — pinned to the bottom of the left column. */
.acsh-footer{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,1vw,14px);flex-wrap:nowrap;width:100%;margin-top:auto;min-height:var(--acsh-foot-h);padding:8px clamp(8px,1.5vw,18px);background:transparent;border-top:1px solid rgba(20,18,40,.08);position:relative;z-index:3;flex-shrink:0}
.acsh-footer__copy{flex:0 0 auto;font-size:clamp(.58rem,.62vw,.68rem);color:var(--text-mute);letter-spacing:.01em;white-space:nowrap}
.acsh-footer__links{display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,.75vw,12px);flex:1 1 auto;min-width:0;flex-wrap:nowrap;white-space:nowrap}
.acsh-footer__links a{font-size:clamp(.58rem,.62vw,.68rem);font-weight:600;color:var(--text-soft);letter-spacing:.01em;white-space:nowrap;transition:color .2s var(--ease)}
.acsh-footer__links a:hover{color:var(--purple)}

/* ── Top Bar (brand + toggle) ── */
.acsh-topbar{position:fixed;top:20px;left:24px;z-index:100;display:flex;align-items:center;gap:14px}
.acsh-topbar .acsh-corner-brand{position:static;pointer-events:auto}

/* ── Demo Switch ── */
.acsh-demo{display:flex;gap:2px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--neu-raised);padding:3px}
.acsh-demo__btn{padding:6px 14px;font-size:.6rem;font-weight:700;color:var(--text-mute);border-radius:var(--r-sm);transition:all .25s var(--ease);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.acsh-demo__btn.active{background:var(--purple);color:#fff;box-shadow:3px 3px 8px rgba(108,92,231,.22),inset 0 1px 0 rgba(255,255,255,.18)}

/* ── Login Zone ── */
/* Left side + forgot-password modal use ONLY NibPro (body) and AnekBangla (headings/
   titles/labels). Re-scoping the vars here keeps the right visual panel unchanged. */
.acsh-login-zone, .acsh-fp-overlay{
  --font: 'NibPro', Arial, sans-serif;
  --font-d: 'AnekBangla', sans-serif;
  --font-m: 'NibPro', Georgia, serif;
  font-family: var(--font);
}
.acsh-login-zone{display:flex;flex-direction:column;align-items:center;padding:clamp(16px,2.5vh,34px) 24px 0;position:relative;z-index:2;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(133,133,165,.35) transparent}
.acsh-login-zone::-webkit-scrollbar{width:6px}
.acsh-login-zone::-webkit-scrollbar-track{background:transparent}
.acsh-login-zone::-webkit-scrollbar-thumb{background:rgba(133,133,165,.35);border-radius:999px}
.acsh-login-zone::-webkit-scrollbar-thumb:hover{background:rgba(133,133,165,.55)}
.acsh-login-zone input,.acsh-login-zone button,.acsh-login-zone select,.acsh-login-zone textarea,.acsh-login-zone a{scroll-margin-block:clamp(24px,8vh,72px)}

/* ── Module Card ── */
.acsh-module{width:100%;max-width:400px;background:transparent;border-radius:0;padding:clamp(0px,.5vh,6px) 0 clamp(8px,1.2vh,14px);box-shadow:none;position:relative;overflow:visible;flex:0 0 auto}
.acsh-module::before{display:none}

/* ── Brand ── */
.acsh-brand{display:flex;align-items:center;gap:10px;margin-bottom:clamp(6px,1vh,12px)}
.acsh-brand__logo{filter:drop-shadow(3px 3px 8px rgba(108,92,231,.18));width:clamp(28px,3.5vh,34px);height:clamp(28px,3.5vh,34px)}
.acsh-brand__name{font-family:var(--font-d);font-size:clamp(.88rem,1.2vw,1.05rem);font-weight:600;color:var(--text);letter-spacing:-.025em}
#acsh-module-main>.acsh-brand{display:none}
#acsh-main #acsh-module-sub>.acsh-sub-badge{display:none}

.acsh-corner-brand{display:flex;align-items:center;gap:10px;pointer-events:none}
.acsh-corner-tile{width:clamp(42px,4.2vw,54px);height:clamp(42px,4.2vw,54px);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:10px 10px 24px rgba(194,186,210,.8),-8px -8px 18px rgba(255,255,255,.92),inset 1px 1px 0 rgba(255,255,255,.78),inset -1px -1px 0 rgba(194,186,210,.35);position:relative}
.acsh-corner-tile::before{content:'';position:absolute;inset:8px;border-radius:5px;box-shadow:inset 5px 5px 10px rgba(194,186,210,.5),inset -5px -5px 10px rgba(255,255,255,.82);pointer-events:none}
.acsh-corner-fav{position:relative;z-index:1;width:68%;height:68%;border-radius:4px;display:block;object-fit:contain;object-position:center;background:#000;box-shadow:inset 0 -4px 9px rgba(0,0,0,.1),inset 0 2px 5px rgba(255,255,255,.16),2px 3px 8px rgba(0,0,0,.07)}
.acsh-corner-logo{display:flex;align-items:center;filter:drop-shadow(4px 5px 11px rgba(0,0,0,.06))}
.acsh-corner-logo__image{display:block;width:clamp(130px,13vw,190px);height:auto;max-height:clamp(38px,4.2vw,56px);object-fit:contain}

/* ── Headlines ── */
.acsh-headline{margin-bottom:2px}
.acsh-headline h1,.acsh-headline h2{font-family:var(--font-d);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.12;color:var(--text);white-space:nowrap}
.acsh-headline h1 span,.acsh-headline h2 span{color:var(--purple)}
.acsh-sub{font-size:clamp(.75rem,.9vw,.88rem);color:var(--text-soft);line-height:1.45;margin-bottom:clamp(8px,1.1vh,14px);letter-spacing:.005em}
#acsh-sub-txt{margin-bottom:10px}

/* ── Mode Link (secondary pill) ── */
.acsh-mode-link{display:flex;align-items:center;gap:10px;margin-bottom:clamp(6px,1vh,12px)}
.acsh-mode-link__pre{font-size:clamp(.8rem,.95vw,.92rem);color:var(--text-mute);white-space:nowrap;font-weight:500;letter-spacing:.01em}
.acsh-mode-link__btn{display:inline-flex;align-items:center;gap:8px;padding:4px 16px 4px 12px;background:var(--card);border-radius:7px;font-size:clamp(.8rem,.95vw,.92rem);font-weight:700;color:var(--purple);transition:all .25s var(--ease);cursor:pointer;white-space:nowrap;border:none;box-shadow:var(--neu-raised);position:relative;overflow:hidden}
.acsh-mode-link__btn::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);pointer-events:none}
.acsh-mode-link__btn svg{width:16px;height:16px}
.acsh-mode-link__btn:hover{transform:translateY(-1px);box-shadow:var(--neu-raised),0 4px 14px rgba(108,92,231,.1)}
.acsh-mode-link__btn:active{transform:translateY(0);box-shadow:var(--neu-press);transition-duration:.08s}

.acsh-mode-link--back .acsh-mode-link__btn{color:var(--teal)}
.acsh-mode-link--back .acsh-mode-link__btn:hover{box-shadow:var(--neu-raised),0 4px 12px rgba(0,184,148,.1)}

/* ── Form Area ── */
.acsh-form-area{position:relative;height:auto;min-height:0}
.acsh-form{position:absolute;top:0;left:0;right:0;width:100%}
.acsh-form[data-mode="staff"]{z-index:2}
.acsh-form[data-mode="student"]{z-index:1}

/* ── Input Fields ── */
.acsh-field{position:relative;margin-bottom:6px;margin-top:24px}
.acsh-input-shell{position:relative;height:clamp(38px,4.4vh,46px);background:var(--card);border-radius:var(--r-md);box-shadow:var(--neu-inset);transition:box-shadow .3s var(--ease),transform .25s var(--ease);overflow:hidden;transform-style:flat}
.acsh-input-shell::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);pointer-events:none;z-index:0}
.acsh-input-shell:hover{box-shadow:inset 3.5px 3.5px 7px var(--input-dark),inset -3px -3px 6px var(--input-light),inset 0 1px 3px rgba(0,0,0,.05);transform:translateY(-.5px)}

.acsh-input-shell input{position:relative;z-index:2;width:100%;height:100%;padding:0 14px;border:none;outline:none;background:transparent;font-size:clamp(.82rem,1vw,.95rem);font-weight:500;color:var(--text);letter-spacing:.01em;transition:color .3s var(--ease),transform .25s var(--ease)}
.acsh-input-shell input::placeholder{color:transparent;transition:color .25s var(--ease)}
.acsh-field.focused input::placeholder{color:rgba(255,255,255,.28)}

/* Colorful fill bar */
.acsh-fill{position:absolute;bottom:0;left:0;width:100%;height:100%;background:var(--purple);border-radius:var(--r-md);transform:scaleY(0.06);transform-origin:bottom center;transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .5s cubic-bezier(.25,.46,.45,.94);will-change:transform;pointer-events:none;z-index:1;font-style:normal}
.acsh-field.focused .acsh-fill,
.acsh-field.has-value .acsh-fill{transform:scaleY(1);box-shadow:inset 0 3px 14px rgba(0,0,0,.18),inset 0 -1px 5px rgba(0,0,0,.07)}
.acsh-field.focused .acsh-input-shell,
.acsh-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px var(--purple-glow),0 4px 16px rgba(108,92,231,.1);transform:translateY(-1px)}
.acsh-field.focused input,
.acsh-field.has-value input{color:var(--text-inv);font-weight:600}

/* Teal variant glow for student fields */
.acsh-field.focused .acsh-input-shell:has(.acsh-fill[style*="teal"]),
.acsh-field.has-value .acsh-input-shell:has(.acsh-fill[style*="teal"]){box-shadow:0 0 0 3px rgba(0,184,148,.12)}
.acsh-field.focused .acsh-label:has(~ .acsh-input-shell .acsh-fill[style*="teal"]),
.acsh-field.has-value .acsh-label:has(~ .acsh-input-shell .acsh-fill[style*="teal"]){color:var(--teal)}
/* Fallback: class-based teal variant */
.acsh-field.teal-field.focused .acsh-input-shell,
.acsh-field.teal-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px rgba(0,184,148,.12)}
.acsh-field.teal-field.focused .acsh-label,
.acsh-field.teal-field.has-value .acsh-label{color:var(--teal)}

/* Coral field variant */
.acsh-field.coral-field.focused .acsh-input-shell,
.acsh-field.coral-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px rgba(225,112,85,.12)}
.acsh-field.coral-field.focused .acsh-label,
.acsh-field.coral-field.has-value .acsh-label{color:var(--coral)}

/* Pink field variant */
.acsh-field.pink-field.focused .acsh-input-shell,
.acsh-field.pink-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px rgba(253,121,168,.12)}
.acsh-field.pink-field.focused .acsh-label,
.acsh-field.pink-field.has-value .acsh-label{color:var(--pink)}

/* Gold field variant */
.acsh-field.gold-field.focused .acsh-input-shell,
.acsh-field.gold-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px rgba(253,203,110,.15)}
.acsh-field.gold-field.focused .acsh-label,
.acsh-field.gold-field.has-value .acsh-label{color:#D4A017}

/* Blue field variant */
.acsh-field.blue-field.focused .acsh-input-shell,
.acsh-field.blue-field.has-value .acsh-input-shell{box-shadow:0 0 0 3px rgba(9,132,227,.12)}
.acsh-field.blue-field.focused .acsh-label,
.acsh-field.blue-field.has-value .acsh-label{color:var(--blue)}

/* Staff + Sub form — sharp corners + vibrant gradient */
#acsh-form-staff .acsh-input-shell,
#acsh-form-sub .acsh-input-shell{border-radius:0}
#acsh-form-staff .acsh-input-shell::before,
#acsh-form-sub .acsh-input-shell::before{border-radius:0}
#acsh-form-staff .acsh-fill,
#acsh-form-sub .acsh-fill{border-radius:0;background:linear-gradient(135deg,#8700ff 0%,#039595 50%,#c9096b 100%)!important}
#acsh-form-staff .acsh-field.focused .acsh-fill,
#acsh-form-staff .acsh-field.has-value .acsh-fill,
#acsh-form-sub .acsh-field.focused .acsh-fill,
#acsh-form-sub .acsh-field.has-value .acsh-fill{border-radius:0;transform:scaleY(1)}

/* Student form — teal → blue → coral gradient */
#acsh-form-student .acsh-input-shell{border-radius:0}
#acsh-form-student .acsh-input-shell::before{border-radius:0}
#acsh-form-student .acsh-fill{border-radius:0;background:linear-gradient(135deg,#00CEC9 0%,#0984E3 50%,#E17055 100%)!important}
#acsh-form-student .acsh-field.focused .acsh-fill,
#acsh-form-student .acsh-field.has-value .acsh-fill{border-radius:0;transform:scaleY(1)}

/* Floating label */
.acsh-label{position:absolute;left:14px;top:clamp(19px,2.2vh,23px);transform:translateY(-50%);font-family:var(--font-d);font-size:clamp(.8rem,1vw,.92rem);color:var(--text-mute);pointer-events:none;transition:transform .5s cubic-bezier(.25,.46,.45,.94),font-size .5s cubic-bezier(.25,.46,.45,.94),color .35s ease-out,letter-spacing .5s cubic-bezier(.25,.46,.45,.94),left .5s cubic-bezier(.25,.46,.45,.94);z-index:4;line-height:1;letter-spacing:.015em;font-weight:600;transform-origin:left center;will-change:transform}
.acsh-field.focused .acsh-label,
.acsh-field.has-value .acsh-label{top:clamp(19px,2.2vh,23px);transform:translateY(calc(-50% - 36px));font-size:1.05rem;font-weight:600;font-family:var(--font-d);color:var(--purple);background:transparent;padding:0;border-radius:0;letter-spacing:-.01em;text-transform:none;box-shadow:none}

/* Icon prefix */
.acsh-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:3;color:var(--text-mute);display:flex;align-items:center;transition:color .3s var(--ease)}
.acsh-input-icon svg{width:18px;height:18px}
.acsh-field.focused .acsh-input-icon,
.acsh-field.has-value .acsh-input-icon{color:rgba(255,255,255,.6)}
.acsh-input-shell.has-icon input{padding-left:46px}
.acsh-input-shell.has-icon ~ .acsh-label{left:46px}
.acsh-field.focused .acsh-input-shell.has-icon ~ .acsh-label,
.acsh-field.has-value .acsh-input-shell.has-icon ~ .acsh-label{left:0}

/* Field helper */
.acsh-field__helper{display:flex;align-items:center;gap:6px;font-size:clamp(.7rem,.82vw,.78rem);color:var(--text-mute);padding:8px 10px 0;line-height:1.35;letter-spacing:.02em;font-weight:500;opacity:.85}
.acsh-field__helper svg{width:16px;height:16px;flex-shrink:0;color:var(--text-mute);opacity:.5}

/* Password toggle */
.acsh-pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:5;color:var(--text-mute);padding:4px;display:flex;align-items:center;border-radius:6px;transition:color .2s var(--ease)}
.acsh-pw-toggle svg{width:18px;height:18px}
.acsh-pw-toggle .eye-open,.acsh-pw-toggle .eye-closed{flex-shrink:0}
.acsh-field.focused .acsh-pw-toggle,
.acsh-field.has-value .acsh-pw-toggle{color:rgba(255,255,255,.55)}
.acsh-pw-toggle:hover{color:var(--purple)}
.acsh-field.focused .acsh-pw-toggle:hover,
.acsh-field.has-value .acsh-pw-toggle:hover{color:rgba(255,255,255,.9)}

/* Field error */
.acsh-field__error{font-size:.7rem;color:#B42318;padding-left:4px;margin-top:2px;opacity:0;transition:opacity .3s;min-height:0}
.acsh-field__error.visible{opacity:1;min-height:15px}

/* ── Options ── */
.acsh-options{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(8px,1vh,12px);margin-top:4px}
.acsh-remember{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;perspective:700px}
.acsh-checkbox{appearance:none;-webkit-appearance:none;width:22px;height:22px;background:#fff;border:2px solid #a78bfa;border-radius:5px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:border-radius .15s ease,background .15s ease,transform .22s ease,box-shadow .22s ease;flex-shrink:0}
.acsh-checkbox::after{content:'';position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:66% 66%;opacity:1;transform:none;transition:background-image .12s ease,background-size .12s ease;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l5 5L19 7"/></svg>')}
.acsh-checkbox:active{transform:translateZ(0) scale(.96)}
.acsh-checkbox:focus-visible{outline:3px solid rgba(124,58,237,.35);outline-offset:3px}
.acsh-checkbox::before{content:'';position:absolute;inset:-4px;border:2px solid rgba(124,58,237,.35);border-radius:inherit;transform:scale(.6);opacity:0;pointer-events:none}
@keyframes acsh-flipIn{0%{transform:rotateX(-35deg) scale(.88);box-shadow:0 8px 20px rgba(0,0,0,.12)}60%{transform:rotateX(8deg) scale(1.02);box-shadow:0 6px 14px rgba(0,0,0,.10)}100%{transform:rotateX(0deg) scale(1);box-shadow:0 4px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.22)}}
@keyframes acsh-pulse{0%{transform:scale(.6);opacity:.55}80%{opacity:0}100%{transform:scale(1.5);opacity:0}}
.acsh-checkbox:checked{border-radius:50%;background:var(--purple);border-color:transparent;animation:acsh-flipIn .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18)}
.acsh-checkbox:checked::after{background-size:76% 76%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l5 5L19 7"/></svg>')}
.acsh-checkbox:checked::before{animation:acsh-pulse 420ms ease-out}
.acsh-remember span{font-size:clamp(.75rem,.9vw,.85rem);color:var(--text-soft);font-weight:500;letter-spacing:.005em}
.acsh-forgot{font-size:clamp(.75rem,.9vw,.85rem);font-weight:700;color:var(--purple);transition:all .22s var(--ease);padding:2px 0;white-space:nowrap}
.acsh-forgot:hover{color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ── Submit ── */
.acsh-submit{position:relative;width:100%;height:clamp(38px,4.4vh,46px);padding:0 20px;background:var(--purple);color:var(--text-inv);font-size:clamp(.82rem,1vw,.94rem);font-weight:700;border:none;border-radius:var(--r-md);cursor:pointer;overflow:hidden;box-shadow:var(--neu-btn),0 6px 20px rgba(108,92,231,.22),0 2px 4px rgba(0,0,0,.06);transition:transform .22s var(--ease-s),box-shadow .28s var(--ease);letter-spacing:.025em;display:flex;align-items:center;justify-content:center;gap:14px}
.acsh-submit__arrow{width:28px;height:28px;transition:transform .28s var(--ease)}
.acsh-submit::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.08);pointer-events:none;transition:box-shadow .22s var(--ease)}
.acsh-submit:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--neu-btn),0 14px 36px rgba(108,92,231,.28),0 4px 8px rgba(0,0,0,.05)}
.acsh-submit:active{transform:translateY(1px) scale(.985);box-shadow:inset 3px 3px 6px rgba(0,0,0,.15),inset -1px -1px 3px rgba(0,0,0,.05),0 1px 2px rgba(108,92,231,.1);transition-duration:.08s}
.acsh-submit:hover .acsh-submit__arrow{transform:translateX(3px)}
.acsh-submit__loader{display:none;width:28px;height:28px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:acsh-spin .65s cubic-bezier(.4,0,.2,1) infinite}
.acsh-submit.loading .acsh-submit__label{opacity:0;transition:opacity .15s}
.acsh-submit.loading .acsh-submit__loader{display:block;position:absolute}
.acsh-submit.loading{pointer-events:none;transform:scale(.98)}
.acsh-submit.success{transform:scale(1.02);transition:transform .3s var(--ease-s),background .3s var(--ease)}
/* Staff/subdomain submit - flat look, tactile 3D action */
#acsh-submit-staff,#acsh-submit-sub,#acsh-submit-student{--staff-press:cubic-bezier(.16,1,.3,1);--rot-x:0deg;--rot-y:0deg;--press-x:0px;--press-y:0px;--press-z:0px;--press-scale:1;background:#d1ff4b!important;color:#000;border:2px solid #000;border-radius:0;box-shadow:4px 4px 0 #000!important;font-weight:800;letter-spacing:.04em;overflow:visible;transform:perspective(800px) rotateX(var(--rot-x)) rotateY(var(--rot-y)) translate3d(var(--press-x),var(--press-y),var(--press-z)) scale(var(--press-scale));transform-style:preserve-3d;transition:transform .12s linear,box-shadow .22s var(--staff-press),background .24s var(--ease),color .24s var(--ease),filter .22s var(--staff-press);will-change:transform,box-shadow,filter}
#acsh-submit-staff::before,#acsh-submit-staff::after,#acsh-submit-sub::before,#acsh-submit-sub::after,#acsh-submit-student::before,#acsh-submit-student::after{display:none}
#acsh-submit-staff>*,#acsh-submit-sub>*,#acsh-submit-student>*{position:relative;z-index:2;transform:translateZ(14px);transition:transform .22s var(--staff-press);will-change:transform}
#acsh-submit-staff:hover,#acsh-submit-sub:hover,#acsh-submit-student:hover{transform:perspective(800px) rotateX(var(--rot-x)) rotateY(var(--rot-y)) translate3d(var(--press-x),var(--press-y),var(--press-z)) scale(var(--press-scale));box-shadow:5px 5px 0 #000!important}
#acsh-submit-staff:active,#acsh-submit-staff.is-pressing,#acsh-submit-staff:active:hover,#acsh-submit-sub:active,#acsh-submit-sub.is-pressing,#acsh-submit-sub:active:hover,#acsh-submit-student:active,#acsh-submit-student.is-pressing,#acsh-submit-student:active:hover{--press-x:4px;--press-y:4px;--press-z:-20px;--press-scale:.96;box-shadow:0 0 0 #000!important;filter:brightness(.92) saturate(.96);transition:transform .18s var(--staff-press),box-shadow .18s var(--staff-press),filter .18s var(--staff-press)}
#acsh-submit-staff:active>*,#acsh-submit-staff.is-pressing>*,#acsh-submit-sub:active>*,#acsh-submit-sub.is-pressing>*,#acsh-submit-student:active>*,#acsh-submit-student.is-pressing>*{transform:translateZ(2px) scale(.97)}
#acsh-submit-staff.is-settling,#acsh-submit-sub.is-settling,#acsh-submit-student.is-settling{--press-x:-1px;--press-y:-1px;--press-z:7px;--press-scale:1.015;box-shadow:5px 5px 0 #000!important;transition:transform .2s var(--staff-press),box-shadow .2s var(--staff-press)}
#acsh-submit-staff.loading,#acsh-submit-sub.loading,#acsh-submit-student.loading{--press-x:2px;--press-y:2px;--press-z:-8px;--press-scale:.985;pointer-events:none;box-shadow:2px 2px 0 #000!important;transition:transform .22s var(--staff-press),box-shadow .22s var(--staff-press)}
#acsh-submit-staff.loading>*,#acsh-submit-sub.loading>*,#acsh-submit-student.loading>*{transform:translateZ(5px) scale(.985)}
#acsh-submit-staff.loading .acsh-submit__loader,#acsh-submit-sub.loading .acsh-submit__loader,#acsh-submit-student.loading .acsh-submit__loader{border-color:rgba(0,0,0,.22);border-top-color:#000}
#acsh-submit-staff.success,#acsh-submit-sub.success,#acsh-submit-student.success{--press-x:-1px;--press-y:-1px;--press-z:10px;--press-scale:1.02;box-shadow:5px 5px 0 #000!important;transition:transform .24s var(--staff-press),box-shadow .24s var(--staff-press),background .24s var(--ease)}
@keyframes acsh-spin{to{transform:rotate(360deg)}}

/* ── Trust ── */
.acsh-trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;font-size:clamp(.68rem,.72vw,.8rem);line-height:1.35;color:var(--text-mute);letter-spacing:.03em;font-weight:500;white-space:normal;text-align:center;opacity:.9}
.acsh-trust svg{width:15px;height:15px;color:var(--teal);flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,184,148,.12))}

/* ── Institute Dropdown ── */
.acsh-inst-dd{position:absolute;top:calc(100% + 4px);left:0;width:100%;background:var(--card);border-radius:var(--r-md);box-shadow:var(--neu-card),0 16px 48px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.03);padding:5px;z-index:30;opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:all .25s var(--ease);max-height:164px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--card-dark) transparent}
.acsh-inst-dd::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 1px 0 0 rgba(255,255,255,.25);pointer-events:none;z-index:1}
.acsh-inst-dd::-webkit-scrollbar{width:3px}
.acsh-inst-dd::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.acsh-inst-dd::-webkit-scrollbar-thumb{background:var(--card-dark);border-radius:3px}
.acsh-inst-dd.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.acsh-inst-dd__header{display:flex;align-items:center;gap:4px;padding:5px 8px 6px;font-size:.5rem;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;pointer-events:none}
.acsh-inst-dd__header svg{flex-shrink:0;opacity:.5}
.acsh-inst-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;transition:all .18s var(--ease);position:relative}
.acsh-inst-opt::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(0,184,148,0);transition:box-shadow .2s var(--ease);pointer-events:none}
.acsh-inst-opt:hover{background:var(--teal-soft);box-shadow:var(--neu-raised);transform:translateY(-1px)}
.acsh-inst-opt:hover::before{box-shadow:inset 0 0 0 1.5px rgba(0,184,148,.12)}
.acsh-inst-opt:active{transform:translateY(0);box-shadow:var(--neu-press)}
.acsh-inst-opt.highlighted{background:var(--teal-soft);box-shadow:inset 0 0 0 1.5px rgba(0,184,148,.18)}
.acsh-inst-opt+.acsh-inst-opt{margin-top:2px}
.acsh-inst-av{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.68rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:2px 2px 5px rgba(0,0,0,.08),inset 0 -1px 3px rgba(0,0,0,.1)}
.acsh-inst-info{display:flex;flex-direction:column;gap:0;min-width:0}
.acsh-inst-name{font-size:.72rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acsh-inst-code{font-size:.54rem;font-weight:600;color:var(--text-mute);font-family:var(--font-m);letter-spacing:.03em}
.acsh-inst-opt__arrow{margin-left:auto;color:var(--text-mute);opacity:0;transform:translateX(-3px);transition:all .2s var(--ease);flex-shrink:0}
.acsh-inst-opt:hover .acsh-inst-opt__arrow{opacity:.6;transform:translateX(0)}
.acsh-inst-dd__empty{display:none;padding:16px 12px;text-align:center;font-size:.68rem;color:var(--text-mute);font-weight:500}
.acsh-inst-dd__empty.visible{display:flex;flex-direction:column;align-items:center;gap:6px}
.acsh-inst-dd__empty svg{color:var(--text-mute);opacity:.35}
.acsh-inst-dd__empty span{font-size:.58rem;color:var(--text-mute);opacity:.7}

/* ── Selected Institute Chip ── */
.acsh-inst-chip{display:none;align-items:stretch;gap:0;background:var(--card);border-radius:8px;box-shadow:10px 10px 28px var(--card-dark),-8px -8px 20px var(--card-light),inset 0 1px 0 rgba(255,255,255,.65);margin-bottom:14px;overflow:hidden;height:auto;position:relative;min-height:3.8rem}
.acsh-inst-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--chip-accent,#E17055);border-radius:0;z-index:1;pointer-events:none}
.acsh-inst-chip.visible{display:flex}
.acsh-inst-chip__accent{display:none}
.acsh-inst-chip__body{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 20px;flex:1;min-width:0}
.acsh-inst-chip__av{width:38px;height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.1rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:4px 6px 20px rgba(0,0,0,.18),inset 0 2px 6px rgba(255,255,255,.2)}
.acsh-inst-chip__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;padding:0}
.acsh-inst-chip__name{font-size:1.12rem;font-weight:600;font-family:var(--font-d);color:var(--text);letter-spacing:-.025em;line-height:1.2;word-wrap:break-word;overflow-wrap:anywhere}
.acsh-inst-chip__line1{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-size:.78rem;line-height:1.45;color:var(--text-mute)}
.acsh-inst-chip__code{flex:0 0 auto;min-width:5ch;max-width:12ch;font-weight:700;font-family:var(--font-m);font-size:.74rem;letter-spacing:.04em;color:var(--text-mid)}
.acsh-inst-chip__sep{opacity:.4;font-weight:500}
.acsh-inst-chip__loc{font-weight:500;letter-spacing:.01em;flex:1 1 12rem;min-width:0}
.acsh-inst-chip__line1.is-only-code .acsh-inst-chip__sep,
.acsh-inst-chip__line1.is-only-code .acsh-inst-chip__loc:empty{display:none}
.acsh-inst-chip__line1.is-only-code{gap:0}
.acsh-inst-chip__url{display:block;font-size:.74rem;font-weight:600;font-family:var(--font-m);color:var(--teal);text-decoration:none;letter-spacing:.01em;transition:color .15s ease;margin-top:2px;word-break:break-all;line-height:1.4}
.acsh-inst-chip__url:hover{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.acsh-inst-chip__x{margin-left:auto;background:#e53e3e;color:#fff;padding:7px;cursor:pointer;display:flex;transition:all .2s var(--ease);border-radius:6px;flex-shrink:0;box-shadow:0 4px 14px rgba(229,62,62,.35);position:relative;z-index:2;align-self:center;margin-right:6px}
.acsh-inst-chip__x::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none}
.acsh-inst-chip__x:hover{background:#c53030;color:#fff;transform:scale(1.08);box-shadow:0 6px 18px rgba(229,62,62,.5)}
.acsh-inst-chip__x:active{transform:scale(.95);box-shadow:0 2px 8px rgba(229,62,62,.25)}

/* ═══════════════════════════════════════════
   VISUAL ZONE — Premium 3D Composition
   ═══════════════════════════════════════════ */
.acsh-visual-zone{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1600px;max-height:100vh;background:#000;isolation:isolate}
.acsh-visual-zone canvas.acsh-vz-rays{z-index:0}
.acsh-visual-zone canvas.acsh-vz-shapegrid{z-index:1}
.acsh-visual-zone::before{display:none}

/* Ambient orbs */
.acsh-vz-orb{display:none}
.acsh-vz-dot{display:none!important}
.acsh-vz-accent{display:none!important}
.acsh-vz-depth,.acsh-vz-depth2,.acsh-vz-hero,.acsh-vz-id,.acsh-vz-chip{display:none!important}

/* Hero Surface — app window */
.acsh-vz-hero{position:absolute;width:clamp(280px,24vw,340px);background:var(--card);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--neu-card),0 28px 56px rgba(0,0,0,.055),0 8px 16px rgba(0,0,0,.025);z-index:5}
.acsh-vz-hero::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 2px 0 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.02);pointer-events:none;z-index:10}
.acsh-vz-chrome{display:flex;align-items:center;gap:5px;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.025)}
.acsh-vz-chrome__dot{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 -1px 2px rgba(0,0,0,.06)}
.acsh-vz-chrome__title{margin-left:auto;font-size:.5rem;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em}
.acsh-vz-body{display:flex;height:clamp(160px,22vh,200px)}
.acsh-vz-sidebar{width:50px;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:12px}
.acsh-vz-sidebar__icon{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background .2s}
.acsh-vz-sidebar__icon.active{background:rgba(255,255,255,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.acsh-vz-content{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.acsh-vz-content__row{display:flex;gap:8px}
.acsh-vz-metric{flex:1;background:var(--card);border-radius:var(--r-sm);padding:10px;box-shadow:var(--neu-raised);position:relative}
.acsh-vz-metric::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4);pointer-events:none}
.acsh-vz-metric__val{font-family:var(--font-d);font-size:.92rem;font-weight:800;color:var(--text);display:block}
.acsh-vz-metric__label{font-size:.48rem;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:2px}
.acsh-vz-minibar{display:flex;gap:2px;align-items:flex-end;height:22px;margin-top:8px}
.acsh-vz-minibar__bar{flex:1;border-radius:2px 2px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.acsh-vz-userrow{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--card);border-radius:var(--r-sm);box-shadow:var(--neu-inset)}
.acsh-vz-userrow__av{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.48rem;font-weight:700;color:#fff;font-family:var(--font-d);box-shadow:1px 1px 3px rgba(0,0,0,.06)}
.acsh-vz-userrow__name{font-size:.62rem;font-weight:600;color:var(--text);flex:1}
.acsh-vz-userrow__badge{font-size:.44rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:100px}

/* Depth layers */
.acsh-vz-depth{position:absolute;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--neu-card);z-index:3;max-width:clamp(260px,22vw,320px);max-height:clamp(170px,24vh,220px)}
.acsh-vz-depth::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.015);pointer-events:none}
.acsh-vz-depth2{position:absolute;background:var(--card);border-radius:var(--r-xl);box-shadow:10px 10px 24px var(--card-dark),-6px -6px 16px var(--card-light);z-index:2;opacity:.55;max-width:clamp(240px,20vw,290px);max-height:clamp(150px,21vh,200px)}
.acsh-vz-depth2::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3);pointer-events:none}

/* Identity Card */
.acsh-vz-id{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--neu-card);z-index:8;white-space:nowrap}
.acsh-vz-id::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 1.5px 0 0 rgba(255,255,255,.25);pointer-events:none}
.acsh-vz-id__av{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:.88rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:3px 3px 7px rgba(0,0,0,.08),inset 0 -2px 4px rgba(0,0,0,.08)}
.acsh-vz-id__info{display:flex;flex-direction:column;gap:1px}
.acsh-vz-id__name{font-size:.74rem;font-weight:700;color:var(--text)}
.acsh-vz-id__role{font-size:.52rem;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.07em}

/* Accent blocks */
.acsh-vz-accent{position:absolute;border-radius:var(--r-sm);box-shadow:var(--neu-raised);z-index:2}
.acsh-vz-accent::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2);pointer-events:none}

/* Status chip */
.acsh-vz-chip{position:absolute;display:flex;align-items:center;gap:5px;padding:7px 13px;background:var(--card);border-radius:100px;box-shadow:var(--neu-raised);z-index:7;white-space:nowrap}
.acsh-vz-chip::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);pointer-events:none}
.acsh-vz-chip__dot{width:6px;height:6px;border-radius:50%;animation:acsh-pulse 2s ease-in-out infinite}
.acsh-vz-chip__text{font-size:.54rem;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em}

/* Small orbital dot */
.acsh-vz-dot{position:absolute;border-radius:50%;z-index:2;box-shadow:var(--neu-raised)}

/* ═══ SUBDOMAIN ═══ */

/* Institution banner — subdomain page */
.acsh-sub-badge{display:flex;align-items:center;gap:22px;background:var(--card);border-radius:6px;box-shadow:10px 10px 28px var(--card-dark),-8px -8px 20px var(--card-light),inset 0 1px 0 rgba(255,255,255,.65);padding:22px 24px 22px 0;margin-bottom:clamp(22px,3vh,32px);position:relative;overflow:hidden}
.acsh-sub-badge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#E17055 0%,#FDCB6E 100%);border-radius:0}
.acsh-sub-badge__ring{width:70px;height:70px;border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:none;margin-bottom:0;margin-left:26px;flex-shrink:0;position:relative;background:transparent}
.acsh-sub-badge__ring::before,.acsh-sub-badge__ring::after{display:none}
.acsh-sub-badge__av{width:70px;height:70px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:2.2rem;font-weight:800;color:#fff;box-shadow:4px 8px 24px rgba(225,112,85,.44),inset 0 3px 8px rgba(255,255,255,.22)}
.acsh-sub-badge__info{flex:1;min-width:0}
.acsh-sub-badge__name{display:block;font-family:var(--font-d);font-size:1.22rem;font-weight:800;color:var(--text);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acsh-sub-badge__url{display:block;font-size:.62rem;color:var(--text-mute);font-family:var(--font-m);letter-spacing:.02em;margin-top:5px}
.acsh-sub-badge__locked{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:.5rem;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.09em;padding:4px 10px;background:var(--teal-soft);border-radius:100px;white-space:nowrap}
.acsh-sub-badge__locked svg{flex-shrink:0}
.acsh-sub-powered{font-size:.56rem;font-weight:600;color:var(--text-mute);text-align:center;margin-top:clamp(4px,.7vh,7px);letter-spacing:.01em}
.acsh-sub-powered span{color:var(--purple);font-weight:700;letter-spacing:-.01em}

/* Compact institution-portal legal/support row. It stays in normal flow so
   short and narrow viewports can reach it through the existing login scroll. */
#acsh-sub .acsh-sub-footer{width:100%;max-width:400px;margin:clamp(8px,1.4vh,14px) auto 0;padding:8px 0 max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(20,18,40,.08);position:relative;z-index:3;flex:0 0 auto}
#acsh-sub .acsh-sub-footer__links{display:flex;align-items:center;justify-content:center;gap:5px clamp(8px,1.2vw,16px);min-width:0;flex-wrap:wrap;text-align:center}
#acsh-sub .acsh-sub-footer__links a{font-size:clamp(.66rem,.7vw,.74rem);font-weight:600;color:var(--text-soft);letter-spacing:.01em;line-height:1.35;white-space:normal;transition:color .2s var(--ease)}
#acsh-sub .acsh-sub-footer__links a:hover{color:var(--purple)}

/* Not-your-institute link */
.acsh-sub-backlink{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:clamp(6px,1vh,12px);font-size:.6rem;color:var(--text-mute);transition:all .22s var(--ease);font-weight:500;white-space:nowrap;letter-spacing:.01em}
.acsh-sub-backlink:hover{color:var(--purple);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.acsh-sub-backlink svg{flex-shrink:0;transition:transform .22s var(--ease)}
.acsh-sub-backlink:hover svg{transform:translateX(-2px)}



@keyframes acsh-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Shortcode hint + staff field rhythm (padding-bottom avoids margin-collapse) ── */
.acsh-shortcode-hint{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:2px 2px 0;font-size:.72rem;color:var(--text-mute);font-weight:500}
#acsh-form-staff{display:flex;flex-direction:column;align-items:stretch}
#acsh-form-staff>.acsh-field{margin-top:0;margin-bottom:0}
#acsh-form-staff>.acsh-field[data-field="shortcode"]{margin-top:40px;padding-bottom:6px}
#acsh-form-staff>.acsh-shortcode-hint{margin:0 0 10px;padding:2px 2px 0}
#acsh-form-staff>.acsh-field[data-field="email"]{margin-top:22px;padding-bottom:42px}
#acsh-form-staff>.acsh-field[data-field="pw"]{padding-bottom:20px}
#acsh-form-staff>.acsh-options{margin-top:0;margin-bottom:clamp(12px,1.6vh,18px)}
.acsh-hint-sep{opacity:.45;font-weight:400}
.acsh-hint-link{font-weight:800;font-size:.76rem;text-decoration:none;transition:opacity .2s var(--ease)}
.acsh-hint-link:hover{opacity:.72;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.acsh-hint-search{color:var(--purple)}
.acsh-hint-portal{color:var(--teal)}

/* Student / institute form — same vertical rhythm as staff (labels are absolute; needs padding, not 6px gaps) */
#acsh-form-student{display:flex;flex-direction:column;align-items:stretch}
#acsh-form-student>.acsh-field{margin-top:0;margin-bottom:0}
#acsh-form-student>.acsh-inst-chip{margin-bottom:14px}
#acsh-form-student>.acsh-inst-chip.visible+.acsh-field[data-field="inst"]{margin-top:0}
#acsh-form-student>.acsh-field[data-field="inst"]{margin-top:30px;padding-bottom:4px;z-index:40;position:relative}
#acsh-form-student>.acsh-field[data-field="inst"] .acsh-field__helper{margin:0 2px 6px}
#acsh-form-student>.acsh-field[data-field="stu-email"]{margin-top:62px;padding-bottom:40px}
#acsh-form-student>.acsh-field[data-field="stu-pw"]{padding-bottom:18px}
#acsh-form-student>.acsh-options{margin-top:0;margin-bottom:clamp(12px,1.6vh,18px)}

/* ── Responsive ── */
@media(max-width:1024px){.acsh-page,.acsh-layout{height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));max-height:calc(var(--acsh-viewport-height) - var(--acsh-nav-h));min-height:0;overflow:visible}.acsh-layout{grid-template-columns:1fr}.acsh-visual-zone{display:none}.acsh-login-zone{padding:24px}.acsh-footer{justify-content:center;align-content:center;gap:6px 12px;flex-wrap:wrap}.acsh-footer__copy{flex:1 0 100%;width:100%;text-align:center}.acsh-footer__links{justify-content:center;gap:6px 12px;flex:1 0 100%;width:100%;flex-wrap:wrap;white-space:normal}.acsh-footer__links a{white-space:nowrap}}
@media(max-width:480px){.acsh-module{padding:22px 18px 18px;border-radius:0}.acsh-demo{top:10px;right:10px}}
@media(max-width:600px),(max-height:600px){.acsh-fp-overlay{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.acsh-fp-card{max-height:calc(var(--acsh-viewport-height) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(133,133,165,.35) transparent}.acsh-fp-card::-webkit-scrollbar{width:6px}.acsh-fp-card::-webkit-scrollbar-track{background:transparent}.acsh-fp-card::-webkit-scrollbar-thumb{background:rgba(133,133,165,.35);border-radius:999px}}
/* Compact desktop rhythm for short viewport heights. These values tighten spacing
   only; they preserve the existing type scale, controls, shadows and transitions. */
@media(min-width:1025px) and (max-height:740px){.acsh-login-zone{padding-top:clamp(10px,2vh,22px);padding-bottom:8px}.acsh-module{padding-top:0;padding-bottom:0}.acsh-form-area{height:auto}.acsh-field{margin-bottom:8px}.acsh-input-shell{height:clamp(42px,5.8vh,48px)}.acsh-label{top:clamp(20px,2.9vh,24px)}.acsh-sub{margin-bottom:8px}#acsh-sub-txt{margin-bottom:8px}.acsh-mode-link{margin-bottom:8px}.acsh-options{margin-bottom:10px}.acsh-submit{min-height:44px;padding:0 20px}.acsh-social-divider{margin:8px 0 8px}.acsh-social-btns{gap:8px}.acsh-passkey-link{margin-top:8px}.acsh-trust{margin-top:8px}.acsh-footer{padding-top:8px;padding-bottom:8px}.acsh-vz-body{height:150px}.acsh-sub-badge{margin-bottom:10px}.acsh-sub-badge__ring{width:48px;height:48px;margin-bottom:7px}.acsh-sub-badge__av{width:36px;height:36px;font-size:1rem}#acsh-form-staff>.acsh-field[data-field="shortcode"]{margin-top:14px}#acsh-form-staff>.acsh-field[data-field="email"]{margin-top:14px;padding-bottom:18px}#acsh-form-staff>.acsh-field[data-field="pw"]{padding-bottom:8px}#acsh-form-staff>.acsh-shortcode-hint{margin-bottom:8px}#acsh-form-student>.acsh-field[data-field="inst"]{margin-top:18px}#acsh-form-student>.acsh-field[data-field="stu-email"]{margin-top:10px;padding-bottom:10px}#acsh-form-student>.acsh-field[data-field="stu-pw"]{padding-bottom:4px}#acsh-form-student>.acsh-options{margin-bottom:6px}}

/* ── Forgot Password Overlay ── */
.acsh-fp-overlay{position:fixed;top:0;right:0;bottom:auto;left:0;width:100%;height:var(--acsh-viewport-height);z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(22,22,44,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.acsh-fp-overlay.open{opacity:1;pointer-events:auto}
.acsh-fp-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--neu-card),0 32px 64px rgba(0,0,0,.1);padding:32px 36px;width:min(420px,90vw);position:relative;transform:translateY(12px) scale(.97);transition:transform .3s var(--ease);scroll-margin-block:24px}
.acsh-fp-overlay.open .acsh-fp-card{transform:translateY(0) scale(1)}
.acsh-fp-card input,.acsh-fp-card button,.acsh-fp-card a{scroll-margin-block:24px}
.acsh-fp-card::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.55);pointer-events:none}
.acsh-fp-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;background:var(--card);box-shadow:var(--neu-raised);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-mute);transition:all .2s var(--ease);border:none}
.acsh-fp-close:hover{color:var(--text)}
.acsh-fp-icon{width:48px;height:48px;border-radius:14px;background:var(--purple-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--neu-raised)}
.acsh-fp-title{font-family:var(--font-d);font-size:1.1rem;font-weight:600;color:var(--text);letter-spacing:-.025em;margin-bottom:4px}
.acsh-fp-sub{font-size:.78rem;color:var(--text-soft);line-height:1.5;margin-bottom:20px}
.acsh-fp-input{width:100%;padding:14px 16px;border-radius:var(--r-md);border:none;background:var(--card);box-shadow:var(--neu-inset);font-size:.88rem;font-weight:500;color:var(--text);outline:none;transition:box-shadow .2s var(--ease);margin-bottom:10px;display:block;font-family:var(--font)}
.acsh-fp-input:focus{box-shadow:0 0 0 3px var(--purple-glow),var(--neu-inset)}
.acsh-fp-input.error{box-shadow:0 0 0 3px rgba(229,62,62,.15),var(--neu-inset)}
.acsh-fp-error{font-size:.72rem;font-weight:600;color:#B42318;margin-bottom:12px;display:none}
.acsh-fp-error.show{display:block}
.acsh-fp-btn{width:100%;padding:13px;background:var(--purple);color:#fff;border:none;border-radius:var(--r-md);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s var(--ease);box-shadow:0 4px 14px rgba(108,92,231,.25);font-family:var(--font)}
.acsh-fp-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(108,92,231,.3)}
.acsh-fp-btn:active{transform:translateY(0)}
.acsh-fp-success{display:none;text-align:center;padding:8px 0}
.acsh-fp-success.show{display:block}
.acsh-fp-success-icon{width:56px;height:56px;border-radius:50%;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:var(--neu-raised)}
.acsh-fp-hint{font-size:.74rem;color:var(--text-soft);line-height:1.5}
.acsh-fp-back{font-size:.78rem;font-weight:700;color:var(--purple);cursor:pointer;background:none;border:none;margin-top:16px;font-family:var(--font);transition:color .2s var(--ease)}
.acsh-fp-back:hover{color:var(--purple-deep);text-decoration:underline}

/* ── Social Sign-in ── */
.acsh-social-divider{display:flex;align-items:center;gap:10px;margin:20px 0 8px;color:var(--text-mute);font-family:'Academyship Nib Pro',Arial,sans-serif!important;font-style:normal;font-synthesis:none;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:none}
.acsh-social-divider::before,.acsh-social-divider::after{content:'';flex:1;height:1px;background:var(--card-dark);opacity:.6}
.acsh-social-btns{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.acsh-social-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;background:var(--card);border:none;border-radius:0;font-size:.62rem;font-weight:700;color:var(--text-soft);cursor:pointer;box-shadow:var(--neu-raised);transition:all .2s var(--ease);white-space:nowrap;font-family:var(--font);letter-spacing:.01em}
.acsh-social-btn:hover{transform:translateY(-1px);box-shadow:var(--neu-raised),0 4px 12px rgba(0,0,0,.07);color:var(--text)}
.acsh-social-btn:active{transform:translateY(0);box-shadow:var(--neu-press)}
.acsh-social-btn svg{flex-shrink:0;width:15px;height:15px}
@media(max-width:360px){.acsh-social-btns{grid-template-columns:repeat(2,minmax(0,1fr))}.acsh-social-btn{min-width:0}}

/* Keep content visible even if the animation script is delayed or unavailable. */
.acsh-module,.acsh-brand,.acsh-headline,.acsh-sub,.acsh-mode-link,.acsh-field,.acsh-options,.acsh-submit,.acsh-trust,.acsh-inst-chip,.acsh-field__helper,
.acsh-sub-badge,.acsh-sub-powered,.acsh-sub-backlink,
.acsh-vz-hero,.acsh-vz-depth,.acsh-vz-depth2,.acsh-vz-id,.acsh-vz-accent,.acsh-vz-chip,.acsh-vz-dot,.acsh-vz-orb{visibility:visible}


/* ── Left-side / login type system: NibPro (body) + AnekBangla (headers, titles, labels) ── */
@font-face { font-family:'NibPro'; src:url('../Fonts/NibPro.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face { font-family:'NibPro'; src:url('../Fonts/NibPro-Bold.woff2') format('woff2'); font-weight:700 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Academyship Nib Pro'; src:url('../Fonts/NibPro.woff2?v=20260718') format('woff2'); font-weight:400; font-style:normal; font-display:block; }
@font-face { font-family:'Academyship Nib Pro'; src:url('../Fonts/NibPro-Bold.woff2?v=20260718') format('woff2'); font-weight:700; font-style:normal; font-display:block; }
@font-face { font-family:'AnekBangla'; src:url('../Fonts/AnekBangla.woff2') format('woff2'); font-weight:100 600; font-style:normal; font-display:swap; }
@font-face { font-family:'AnekBangla'; src:url('../Fonts/AnekBangla-Bold.woff2') format('woff2'); font-weight:700 900; font-style:normal; font-display:swap; }

/* ── Englebert (for the reveal-stage text) ── */
@font-face {
  font-family: 'Englebert';
  src: url('../Fonts/Englebert.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Righteous (for the stroke word animation) ── */
@font-face {
  font-family: 'Righteous';
  src: url('../Fonts/Righteous-Regular.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Stroke word — bottom brand mark ── */
.acsh-stroke-word {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16%;
  min-height: 70px;
  padding: 0 4%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
.acsh-stroke-word svg {
  font-family: 'Righteous', sans-serif;
  width: 100%;
  height: 100%;
}
.acsh-stroke-word svg text {
  text-transform: uppercase;
  animation: acsh-stroke 5s infinite alternate;
  stroke-width: 2;
  font-size: 180px;
}
@keyframes acsh-stroke {
  0% {
    fill: rgba(255,255,255,0);
    stroke: rgba(255,255,255,0.85);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  70% { fill: rgba(255,255,255,0); stroke: rgba(255,255,255,0.85); }
  80% { fill: rgba(255,255,255,0); stroke: rgba(255,255,255,0.85); stroke-width: 3; }
  100% {
    fill: rgba(255,255,255,0.12);
    stroke: rgba(255,255,255,0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

/* ── Circular text widget — top-right corner ── */
.acsh-circ {
  position: absolute;
  top: 4%;
  right: 4%;
  width: clamp(100px, 11vw, 155px);
  height: clamp(100px, 11vw, 155px);
  display: block;
  z-index: 25;
  pointer-events: none;
}
.acsh-circ__svg {
  width: 100%;
  height: auto;
  stroke-width: 0.05em;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acsh-circ__path { fill: none; stroke: none; }
.acsh-circ__cloud {
  transform-origin: 50% 50%;
  animation: acsh-circ-spin 60s linear infinite;
  fill: rgba(255,255,255,0.06);
}
.acsh-circ__text {
  fill: rgba(255,255,255,0.72);
  stroke: none;
  animation: acsh-circ-rev 20s linear infinite;
  transform-origin: 50% 50%;
  font-family: 'Righteous', sans-serif;
  font-size: 16px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.acsh-circ__cloud-border {
  transform-origin: 50% 50%;
  animation: acsh-circ-spin 60s linear infinite;
  fill: none;
  stroke: rgba(255,255,255,0.45);
  stroke-width: 1.2;
}
.acsh-circ__lock {
  transform-origin: 50% 50%;
  fill: none;
  stroke: rgba(255,255,255,0.72);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* These SVG child parts intentionally inherit the lock's single visual rule. */
.acsh-circ__shackle,.acsh-circ__body,.acsh-circ__keyhole-stem{fill:inherit;stroke:inherit;stroke-width:inherit;stroke-linecap:inherit;stroke-linejoin:inherit}
.acsh-circ__lock .acsh-circ__keyhole {
  fill: rgba(255,255,255,0.72);
  stroke: none;
}
@keyframes acsh-circ-spin { to { transform: rotate(360deg); } }
@keyframes acsh-circ-rev  { to { transform: rotate(-360deg); } }

/* ── Acsh reveal-stage (continuous 3-block rotating text — no mouse interaction) ── */
.acsh-reveal-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
  container-type: inline-size;
  font-family: 'Englebert', 'Lato', sans-serif;
  --acsh-rv-text-size: clamp(16px, 1.6vw, 32px);
  --acsh-rv-line-gap: 6px;
}
.acsh-reveal-stage .acsh-rv__block {
  position: absolute;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
  max-width: 46%;
}
.acsh-reveal-stage .acsh-rv__block.active {
  opacity: 1;
  transform: translateY(0);
}
.acsh-reveal-stage .acsh-rv__block--tl { top: 7%;  left: 8%; align-items: flex-start; text-align: left; }
.acsh-reveal-stage .acsh-rv__block--mr { top: 50%; right: 7%; transform: translateY(calc(-50% + 28px)); align-items: flex-end; text-align: right; }
.acsh-reveal-stage .acsh-rv__block--mr.active { transform: translateY(-50%); }
.acsh-reveal-stage .acsh-rv__block--bl { bottom: 26%; left: 8%; align-items: flex-start; text-align: left; }
.acsh-reveal-stage .acsh-rv__line {
  display: block;
  margin: 0;
  color: #fff;
  font-family: 'Englebert', 'Lato', sans-serif;
  font-size: var(--acsh-rv-text-size);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.acsh-reveal-stage .acsh-rv__line + .acsh-rv__line { margin-top: var(--acsh-rv-line-gap); }
.acsh-reveal-stage .acsh-rv__reveal { display: inline-block; position: relative; }
.acsh-reveal-stage .acsh-rv__cover { position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: 2; }
.acsh-reveal-stage .acsh-rv__text { opacity: 0; position: relative; z-index: 1; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__cover { animation: acsh-rv-cover 2.1s ease-in-out forwards; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__text  { animation: acsh-rv-text  2.1s ease-in-out forwards; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(1) .acsh-rv__cover,
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(1) .acsh-rv__text { animation-delay: 0s; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(2) .acsh-rv__cover,
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(2) .acsh-rv__text { animation-delay: 0.18s; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(3) .acsh-rv__cover,
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(3) .acsh-rv__text { animation-delay: 0.54s; }
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(4) .acsh-rv__cover,
.acsh-reveal-stage .acsh-rv__block.active .acsh-rv__line:nth-child(4) .acsh-rv__text { animation-delay: 0.36s; }
@keyframes acsh-rv-cover {
  0%   { width: 0;    left: 0; }
  44%  { width: 100%; left: 0; }
  54%  { width: 100%; left: 0; }
  100% { width: 0;    left: 100%; }
}
@keyframes acsh-rv-text {
  0%   { opacity: 0; }
  44%  { opacity: 0; }
  54%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   ADDITIVE UX LAYER — validation, caps-lock, MFA, trust, a11y.
   Reuses the existing tokens/shadows only; resting visual design unchanged.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Inline field messages (zero-height row: overflows into the field's
      existing padding, so showing an error never shifts the layout) ── */
/* Collapsed by default (0fr = no height, no reserved gap), expanding to its
   natural height only when an error or Caps Lock warning is present. This
   replaces height:0/overflow:visible, which let error text overlap the next
   field. The resting layout is unchanged: empty still occupies zero height. */
.acsh-field__msg{display:grid;grid-template-rows:0fr;grid-template-columns:1fr auto;align-items:flex-start;column-gap:10px;overflow:hidden;padding:0 2px;pointer-events:none;position:relative;z-index:5;transition:grid-template-rows .22s var(--ease),padding .22s var(--ease)}
.acsh-field.has-error .acsh-field__msg,
.acsh-field.has-caps-warning .acsh-field__msg{grid-template-rows:1fr;padding:4px 2px 0}
.acsh-field__msg>*{min-height:0;overflow:hidden}
.acsh-field .acsh-field__error{font-size:.7rem;font-weight:600;color:#B42318;line-height:1.35;margin:0;padding:0;opacity:0;transition:opacity .25s var(--ease);overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.acsh-field .acsh-field__error.visible{opacity:1;min-height:0}
@media(prefers-reduced-motion:reduce){
  .acsh-field__msg{transition:none}
}
.acsh-caps-note{display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:#D4A017;line-height:1.25;white-space:nowrap;align-self:start}
.acsh-caps-note[hidden]{display:none}
.acsh-caps-note svg{flex-shrink:0}
.acsh-field.has-error .acsh-input-shell{box-shadow:0 0 0 3px rgba(229,62,62,.18),var(--neu-inset);animation:acsh-shake .38s var(--ease)}
.acsh-field.has-error .acsh-label{color:#e53e3e}
/* Caps Lock and an error must not collide: the error wins while it is shown,
   and the warning returns once the error clears (see syncCapsWarning). */
.acsh-field.has-error .acsh-caps-note{display:none}
/* The helper is no longer hidden to dodge overlap — the message row now
   expands, so the helper simply moves down naturally. */
@keyframes acsh-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ── Passkey link ── */
.acsh-passkey-link{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px auto 0;font-size:.72rem;font-weight:700;color:var(--text-soft);letter-spacing:.01em;transition:color .2s var(--ease)}
.acsh-passkey-link:hover{color:var(--purple)}
.acsh-passkey-link svg{flex-shrink:0}

/* ── Session/status banner (fixed overlay — no layout shift) ── */
.acsh-banner{position:fixed;top:calc(var(--acsh-nav-h) + 12px);left:24px;z-index:120;display:flex;align-items:center;gap:9px;max-width:min(420px,calc(100vw - 48px));padding:10px 12px 10px 14px;background:var(--card);border-left:4px solid var(--gold);border-radius:8px;box-shadow:var(--neu-raised),0 8px 24px rgba(0,0,0,.08);font-size:.76rem;font-weight:600;color:var(--text-mid);line-height:1.4}
.acsh-banner[hidden]{display:none}
.acsh-banner>svg{flex-shrink:0;color:#D4A017}
.acsh-banner__x{display:flex;padding:3px;border-radius:6px;color:var(--text-mute);transition:color .2s var(--ease);flex-shrink:0}
.acsh-banner__x:hover{color:var(--text)}

/* ── Two-step verification (MFA) overlay — same card language as .acsh-fp-* ── */
.acsh-otp-boxes{display:flex;gap:8px;justify-content:center;margin:16px 0 6px}
.acsh-otp-digit{width:44px;height:52px;text-align:center;font-size:1.3rem;font-weight:700;font-family:var(--font-d);color:var(--text);background:var(--card);border:none;border-radius:var(--r-sm);box-shadow:var(--neu-inset);outline:none;transition:box-shadow .2s var(--ease),color .2s var(--ease)}
.acsh-otp-digit:focus{box-shadow:0 0 0 3px var(--purple-glow),var(--neu-inset)}
.acsh-otp-digit.filled{color:var(--purple)}
.acsh-otp-boxes.error .acsh-otp-digit{box-shadow:0 0 0 3px rgba(229,62,62,.15),var(--neu-inset);animation:acsh-shake .38s var(--ease)}
.acsh-otp-trust{margin:12px 0 14px}
.acsh-otp-footer{display:flex;justify-content:space-between;align-items:center}
.acsh-fp-back:disabled{opacity:.45;cursor:default;text-decoration:none;pointer-events:none}
.acsh-otp-methods{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.acsh-otp-methods[hidden]{display:none}
.acsh-otp-method{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;background:var(--card);border-radius:var(--r-sm);box-shadow:var(--neu-raised);font-size:.74rem;font-weight:600;color:var(--text-soft);font-family:var(--font);transition:all .2s var(--ease);text-align:left}
.acsh-otp-method:hover{transform:translateY(-1px);color:var(--text);box-shadow:var(--neu-raised),0 4px 12px rgba(0,0,0,.07)}
.acsh-otp-method svg{flex-shrink:0;color:var(--purple)}
.acsh-otp-enrol-link{text-align:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(20,18,40,.07)}
.acsh-otp-enrol-link .acsh-fp-back{margin-top:0}
.acsh-otp-qr{display:flex;align-items:center;justify-content:center;width:148px;height:148px;margin:14px auto;background:#fff;border-radius:var(--r-sm);box-shadow:var(--neu-raised);padding:10px}
.acsh-otp-key{display:block;text-align:center;font-family:var(--font-m);font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--text-mid);background:var(--card);box-shadow:var(--neu-inset);border-radius:var(--r-sm);padding:9px 12px;margin:0 0 14px;user-select:all}

/* ── Footer status + language slot ── */
.acsh-footer__status{display:inline-flex;align-items:center;gap:6px}
/* Neutral by default. Green + pulse is reserved for an explicitly configured
   operational state — an unverified claim must never look like health. */
.acsh-footer__status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-mute);box-shadow:0 0 0 2px rgba(108,108,132,.14);animation:none}
[data-status-state="operational"] .acsh-footer__status-dot{background:var(--teal);box-shadow:0 0 0 2px rgba(0,184,148,.16);animation:acsh-pulse 2.4s ease-in-out infinite}
[data-status-state="degraded"] .acsh-footer__status-dot,
[data-status-state="partial_outage"] .acsh-footer__status-dot{background:#D4A017;box-shadow:0 0 0 2px rgba(212,160,23,.18);animation:none}
[data-status-state="maintenance"] .acsh-footer__status-dot{background:#6C5CE7;box-shadow:0 0 0 2px rgba(108,92,231,.18);animation:none}
[data-status-state="unavailable"] .acsh-footer__status-dot{background:#B42318;box-shadow:0 0 0 2px rgba(180,35,24,.18);animation:none}
[data-status-state="unknown"] .acsh-footer__status-dot{background:var(--text-mute);box-shadow:0 0 0 2px rgba(108,108,132,.14);animation:none}

/* ── External auth status: zero layout space when empty ── */
.acsh-auth-status{margin:8px 0 0;font-size:.72rem;font-weight:600;line-height:1.35;text-align:center;color:var(--text-soft);overflow-wrap:anywhere}
.acsh-auth-status[hidden]{display:none}
.acsh-auth-status.is-pending{color:var(--text-soft)}
.acsh-auth-status.is-error{color:#B42318}
.acsh-footer__lang{display:none}

/* ── Screen-reader-only live region ── */
.acsh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Keyboard focus — :focus-visible only, so mouse/touch visuals are untouched ── */
.acsh-submit:focus-visible,.acsh-social-btn:focus-visible,.acsh-pw-toggle:focus-visible,.acsh-mode-link__btn:focus-visible,.acsh-fp-close:focus-visible,.acsh-fp-btn:focus-visible,.acsh-fp-back:focus-visible,.acsh-inst-chip__x:focus-visible,.acsh-passkey-link:focus-visible,.acsh-otp-method:focus-visible,.acsh-banner__x:focus-visible,.acsh-footer__links a:focus-visible,.acsh-forgot:focus-visible,.acsh-hint-link:focus-visible,.acsh-sub-backlink:focus-visible,.acsh-inst-chip__url:focus-visible,.acsh-inst-opt:focus-visible{outline:3px solid rgba(108,92,231,.5);outline-offset:2px}

/* ── Reduced motion (WCAG 2.3.3) — GSAP/canvas side is gated in script ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .acsh-circ__cloud,.acsh-circ__cloud-border,.acsh-circ__text,.acsh-stroke-word svg text,.acsh-footer__status-dot,[data-status-state="operational"] .acsh-footer__status-dot{animation:none!important}
}

/* ── iPhone notch / safe areas ── */
@supports (padding: env(safe-area-inset-bottom)){
  .acsh-footer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .acsh-login-zone{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(0px,env(safe-area-inset-bottom))}
  @media(max-width:1024px){.acsh-login-zone{padding-bottom:max(24px,env(safe-area-inset-bottom))}}
}

/* ── Mobile: let the document scroll instead of caging it to one viewport ────
   The desktop design is deliberately viewport-locked: .acsh-page and
   .acsh-layout are pinned to (--acsh-viewport-height - --acsh-nav-h), and
   .acsh-login-zone is an inner scroller. Beside the visual column on a wide
   screen that is exactly right, and nothing below changes it there.

   Below 1024px the visual column is hidden and everything stacks into a single
   column taller than a phone viewport — the provider buttons, the passkey link,
   the trust line and the footer all land past the fold. They were never hidden;
   no rule sets display:none on any of them. They were parked inside an inner
   scroller that reads as the page itself, and `overscroll-behavior: contain`
   stopped the scroll gesture from reaching the document, so they were simply
   unreachable. The software keyboard made it worse: login.js keeps
   --acsh-viewport-height in step with visualViewport.height, so opening the
   keyboard shrank the cage and pushed still more content out of view.

   So below 1024px the height cap and the inner scroller are both released.
   min-height keeps a short form filling the screen; tall content now grows the
   document and scrolls the way a phone user expects. */
@media (max-width: 1024px) {
  .acsh-page,
  .acsh-layout {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .acsh-page {
    min-height: calc(var(--acsh-viewport-height) - var(--acsh-nav-h));
  }

  .acsh-login-zone {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    overscroll-behavior: auto;
  }
}

/* The provider row stayed 4-across down to 360px. Inside the 400px module,
   minus its 24px side padding and three 8px gaps, that leaves ~76px per button
   on a 390px phone — less than the ~86px an icon plus "Microsoft" at .62rem
   actually needs, so the labels crowded their icons. Two-up from 480px down
   gives each button room; the existing 360px rule already did this for the
   narrowest devices and is now redundant but harmless. */
@media (max-width: 480px) {
  .acsh-social-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acsh-social-btn {
    min-width: 0;
    padding: 11px 8px;
  }
}