/* Sign-in screen (Login.aspx) - copied from school-management-v2.html <style id="login-css">.
   Drifting sky aurora + spark glow, a cursor spotlight, floating glass cards with parallax,
   and a glass sign-in card with a slowly rotating glowing edge.
   Relies on css/base.css for the :root tokens, fonts, .crest, .btn, .check and the global input rules.
   --slate / --spark carry their v2 values as fallbacks in case base.css does not define them. */
@property --lg-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.login{display:block;position:fixed;inset:0;overflow:auto;background:#EEF5FB;font-family:var(--font-ui);color:var(--slate,#3C4A5C);--mx:50%;--my:40%;--px:0;--py:0}

/* background */
.lg-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.lg-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.lg-blob.b1{width:620px;height:620px;left:-140px;top:-160px;background:#C9E1F5;animation:lg-drift1 22s ease-in-out infinite alternate}
.lg-blob.b2{width:520px;height:520px;right:-120px;top:10%;background:#D7E9F6;animation:lg-drift2 26s ease-in-out infinite alternate}
.lg-blob.b3{width:560px;height:560px;left:30%;bottom:-260px;background:#B9D8F1;animation:lg-drift3 24s ease-in-out infinite alternate}
.lg-blob.b4{width:260px;height:260px;left:36%;top:22%;background:rgba(242,107,33,.30);filter:blur(80px);animation:lg-drift4 18s ease-in-out infinite alternate}
@keyframes lg-drift1{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes lg-drift2{to{transform:translate(-140px,160px) scale(.9)}}
@keyframes lg-drift3{to{transform:translate(-180px,-120px) scale(1.1)}}
@keyframes lg-drift4{0%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,80px) scale(1.3)}100%{transform:translate(-60px,160px) scale(.9)}}
.lg-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(60,74,92,.13) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,#000 20%,transparent 75%)}
.lg-spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 60%);transition:background .08s}

/* stage */
.lg-stage{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,440px);gap:40px;align-items:center;max-width:1280px;margin:0 auto;padding:40px 56px}
.lg-top{position:absolute;left:56px;right:56px;top:30px;display:flex;align-items:center;justify-content:space-between}
.lg-mark{display:flex;align-items:center;gap:11px;animation:lg-in .7s .05s both}
.lg-mark .crest{box-shadow:0 0 0 6px rgba(255,255,255,.6),0 10px 24px -8px rgba(60,74,92,.5)}
.lg-mark b{display:block;font-size:14px;font-weight:800} .lg-mark small{display:block;font-size:12px;color:var(--muted)}
.lg-status{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(10px);font-size:12px;font-weight:700;color:var(--slate,#3C4A5C);animation:lg-in .7s .1s both}
.lg-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--spark,#F26B21)}
.lg-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--spark,#F26B21);animation:lg-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes lg-ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* hero */
.lg-hero{position:relative;padding:90px 0 40px}
.lg-hero h2{font-size:64px;line-height:1;font-weight:800;letter-spacing:-.045em;color:var(--slate,#3C4A5C);animation:lg-in .8s .15s both}
.lg-hero h2 em{font-style:normal;position:relative;background:linear-gradient(100deg,#F26B21 10%,#FF9A5C 45%,#F26B21 80%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lg-shine 5s linear infinite}
.lg-hero h2 em::after{content:"";position:absolute;left:2px;right:6px;bottom:-6px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(242,107,33,.0),rgba(242,107,33,.55),rgba(242,107,33,0));filter:blur(3px);animation:lg-glow 3s ease-in-out infinite}
@keyframes lg-shine{to{background-position:-200% center}}
@keyframes lg-glow{50%{opacity:.35;transform:scaleX(.85)}}
.lg-hero p{margin-top:18px;max-width:42ch;font-size:15.5px;line-height:1.65;color:var(--muted);animation:lg-in .8s .25s both}
.lg-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;animation:lg-in .8s .35s both}
.lg-pills span{height:30px;padding:0 13px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(8px);font-size:12.5px;font-weight:700;color:var(--slate,#3C4A5C);box-shadow:0 6px 16px -10px rgba(60,74,92,.35)}

/* floating glass cards */
.lg-cards{position:relative;height:300px;margin-top:34px}
.glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-radius:18px;box-shadow:0 24px 50px -24px rgba(45,70,100,.45),0 2px 6px rgba(45,70,100,.06)}
.lg-card{position:absolute;padding:16px 18px;transform:translate(calc(var(--px) * var(--d) * 1px),calc(var(--py) * var(--d) * 1px));transition:transform .25s ease-out}
.lg-card > .inner{animation:lg-float 6s ease-in-out infinite}
@keyframes lg-float{50%{transform:translateY(-10px)}}
.lg-class{left:0;top:0;width:300px;--d:-14;animation:lg-pop .8s .45s both}
.lg-class .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.lg-class .hd b{font-size:17px;font-weight:800} .lg-class .hd small{font-size:11.5px;color:var(--muted)}
.lg-class .ln{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-top:1px solid rgba(221,235,245,.9)}
.lg-class .ln.hot{margin:0 -8px;padding:8px;border-radius:10px;border-color:transparent;background:rgba(241,247,251,.95);font-weight:800}
.lg-class .ln.hot span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--spark,#F26B21);margin-right:8px;box-shadow:0 0 0 4px rgba(242,107,33,.15),0 0 12px rgba(242,107,33,.7);vertical-align:1px}
.lg-class .bt{display:flex;gap:6px;margin-top:10px}
.lg-class .bt span{height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:8px;font-size:11.5px;font-weight:800;background:#D3E6F3}
.lg-class .bt span + span{background:#fff;border:1px solid #DDEBF5;font-weight:700}
.lg-ring{left:322px;top:36px;width:170px;--d:22;text-align:center;animation:lg-pop .8s .6s both}
.lg-ring .inner{animation-delay:-2s}
.lg-ring svg{width:96px;height:96px;display:block;margin:2px auto 6px;overflow:visible}
.lg-ring .trk{fill:none;stroke:#E3EEF6;stroke-width:9}
.lg-ring .val{fill:none;stroke:url(#lg-grad);stroke-width:9;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3;transform:rotate(-90deg);transform-origin:50% 50%;animation:lg-draw 1.8s .9s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 0 6px rgba(141,184,218,.9))}
@keyframes lg-draw{to{stroke-dashoffset:16.6}}
.lg-ring .num{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.lg-ring small{display:block;font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.lg-pay{left:120px;top:214px;--d:10;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;animation:lg-pop .8s .8s both}
.lg-pay .inner{display:flex;align-items:center;gap:10px;animation-delay:-4s}
.lg-pay i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#E4F3EA;color:#2C7650;font-style:normal;font-weight:900}
.lg-pay b{display:block;font-size:12.5px;font-weight:800} .lg-pay small{display:block;font-size:11px;color:var(--muted)}
@keyframes lg-pop{from{opacity:0;translate:0 24px;scale:.94}to{opacity:1;translate:0 0;scale:1}}

/* equaliser bars */
.lg-bars{position:absolute;left:0;bottom:-26px;display:flex;align-items:flex-end;gap:8px;height:70px;opacity:.9}
.lg-bars i{display:block;width:2px;height:100%;border-radius:2px;background:#AFCFE9;transform-origin:bottom;animation:lg-eq 2.4s ease-in-out infinite alternate}
.lg-bars i:nth-child(3n){animation-duration:1.8s} .lg-bars i:nth-child(4n){animation-duration:3s} .lg-bars i:nth-child(5n){animation-duration:2.1s}
.lg-bars i.s{background:var(--spark,#F26B21);box-shadow:0 0 10px rgba(242,107,33,.9),0 0 22px rgba(242,107,33,.5)}
@keyframes lg-eq{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}

/* sign-in card */
.lg-form-wrap{position:relative;animation:lg-in .9s .2s both}
.lg-form-wrap::before{content:"";position:absolute;inset:-1.5px;border-radius:26px;padding:1.5px;background:conic-gradient(from var(--lg-a),rgba(211,230,243,.2),#9FC6E6,rgba(255,255,255,.9),#F26B21,rgba(211,230,243,.2) 60%,#9FC6E6,rgba(211,230,243,.2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:lg-spin 7s linear infinite;opacity:.9}
.lg-form-wrap::after{content:"";position:absolute;inset:10% 8%;border-radius:40px;background:radial-gradient(closest-side,rgba(159,198,230,.55),transparent);filter:blur(40px);z-index:-1;animation:lg-breath 6s ease-in-out infinite}
@keyframes lg-spin{to{--lg-a:360deg}}
@keyframes lg-breath{50%{opacity:.55;transform:scale(1.08)}}
.lg-form{position:relative;width:100%;display:flex;flex-direction:column;gap:14px;padding:30px 30px 24px;border-radius:24px;background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 40px 80px -30px rgba(45,70,100,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.lg-form > *{animation:lg-in .6s both}
.lg-form > :nth-child(1){animation-delay:.35s} .lg-form > :nth-child(2){animation-delay:.4s} .lg-form > :nth-child(3){animation-delay:.45s} .lg-form > :nth-child(4){animation-delay:.5s} .lg-form > :nth-child(5){animation-delay:.55s} .lg-form > :nth-child(6){animation-delay:.6s} .lg-form > :nth-child(7){animation-delay:.65s} .lg-form > :nth-child(8){animation-delay:.7s} .lg-form > :nth-child(n+9){animation-delay:.75s}
@keyframes lg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lg-head{display:flex;align-items:center;gap:12px}
.lg-head .crest{width:40px;height:40px;border-radius:12px;font-size:16px;animation:lg-halo 3.2s ease-in-out infinite}
@keyframes lg-halo{50%{box-shadow:0 0 0 6px rgba(211,230,243,.9),0 0 26px rgba(242,107,33,.35)}}
.lg-form h1{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.lg-sub{font-size:13px;color:var(--muted)}
.lg-field{display:flex;flex-direction:column;gap:6px}
.lg-field label{font-size:12.5px;font-weight:700;color:var(--slate,#3C4A5C)}
.lg-input{position:relative}
.lg-input > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8DA3B8;pointer-events:none;transition:color .2s}
.lg-input input{height:46px!important;padding-left:42px!important;font-size:14px!important;border-radius:13px!important;background:rgba(255,255,255,.9)!important;border:1.5px solid #DDEBF5!important;transition:border-color .2s,box-shadow .25s,transform .2s!important}
.lg-input input:focus{border-color:#8DB8DA!important;box-shadow:0 0 0 4px rgba(211,230,243,.9),0 10px 26px -12px rgba(77,141,196,.6)!important;transform:translateY(-1px)}
.lg-input:focus-within > svg{color:var(--slate,#3C4A5C)}
.lg-pw input{padding-right:66px!important}
.lg-pw button{position:absolute;right:7px;top:50%;transform:translateY(-50%);height:32px;padding:0 11px;border:0;border-radius:9px;background:#F1F7FB;color:var(--slate,#3C4A5C);font:700 12px var(--font-ui);cursor:pointer;transition:background .2s}
.lg-pw button:hover{background:#DDEBF5}
.lg-err{display:none;font-size:12px;font-weight:700;color:var(--bad)}
.lg-field.invalid .lg-err{display:block}
.lg-field.invalid .lg-input input{border-color:var(--bad)!important;box-shadow:0 0 0 4px var(--bad-soft)!important;animation:lg-shake .35s}
@keyframes lg-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.lg-row .check{font-size:13px;color:var(--fg-2)}
.lg-link{border:0;background:none;padding:0;color:var(--slate,#3C4A5C);font:800 13px var(--font-ui);cursor:pointer;background-image:linear-gradient(var(--spark,#F26B21),var(--spark,#F26B21));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.lg-link:hover{background-size:100% 2px}
.lg-submit{position:relative;overflow:hidden;width:100%;height:48px!important;border:0!important;border-radius:14px!important;font-size:14.5px!important;font-weight:800!important;color:var(--slate,#3C4A5C)!important;background:linear-gradient(135deg,#D3E6F3,#BBD8EE)!important;box-shadow:0 14px 30px -14px rgba(77,141,196,.9),inset 0 1px 0 rgba(255,255,255,.8)!important;transition:transform .2s,box-shadow .25s!important}
.lg-submit::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);transition:left .7s}
.lg-submit:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(77,141,196,1),0 0 0 4px rgba(211,230,243,.7),inset 0 1px 0 rgba(255,255,255,.8)!important}
.lg-submit:hover::before{left:120%}
.lg-submit .arr{display:inline-block;transition:transform .25s}
.lg-submit:hover .arr{transform:translateX(4px)}
.lg-submit .spin,.lg-submit .ok{display:none}
.lg-submit.loading .lbl{display:none} .lg-submit.loading .spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(60,74,92,.25);border-top-color:var(--slate,#3C4A5C);animation:lg-rot .7s linear infinite}
.lg-submit.done{background:linear-gradient(135deg,#DDF2E5,#BFE6CE)!important;color:#1F6B45!important}
.lg-submit.done .lbl,.lg-submit.done .spin{display:none} .lg-submit.done .ok{display:inline-flex;align-items:center;gap:7px;animation:lg-in .3s both}
@keyframes lg-rot{to{transform:rotate(360deg)}}
.lg-sep{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6A7A8E}
.lg-sep::before,.lg-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#DDEBF5,transparent)}
.lg-roles{display:flex;flex-wrap:wrap;gap:6px}
.lg-role{height:30px;padding:0 12px;border:1px solid #DDEBF5;border-radius:999px;background:rgba(255,255,255,.85);color:var(--fg-2);font:700 12px var(--font-ui);cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
.lg-role:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(60,74,92,.5);border-color:#BFD8EC}
.lg-role.on{background:#D3E6F3;border-color:#D3E6F3;color:var(--slate,#3C4A5C);box-shadow:0 0 0 3px rgba(211,230,243,.6),0 8px 18px -10px rgba(77,141,196,.9)}
.lg-role.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--spark,#F26B21);margin-right:7px;vertical-align:1px;box-shadow:0 0 8px rgba(242,107,33,.8)}
.lg-note{font-size:11.5px;color:#8DA0B3;text-align:center}
.lg-help{font-size:12px;color:var(--muted);text-align:center}
.lg-by{position:absolute;right:56px;bottom:22px;font-size:11.5px;color:var(--muted);text-align:right;animation:lg-in .8s .9s both}

/* Added for the live page: notices above the fields (signed out, sample-account mode, errors),
   the disabled sign-in button when sign-in is not set up, and the busy state of a sample-account button. */
.lg-alert{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;font-size:12.5px;font-weight:700;line-height:1.45;background:var(--info-soft,#E3EEF8);color:var(--info,#33608F);border:1px solid rgba(255,255,255,.9)}
.lg-alert::before{content:"";flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.75)}
.lg-alert.ok{background:var(--ok-soft,#E4F3EA);color:var(--ok,#2C7650)}
.lg-alert.warn{background:var(--warn-soft,#FBF0DA);color:var(--warn,#8E5E10)}
.lg-alert.bad{background:var(--bad-soft,#FBE8E5);color:var(--bad,#B0423A)}
/* (opacity would be overridden by the lg-in entrance animation, so the disabled look uses colours) */
.lg-submit[disabled]{cursor:not-allowed;transform:none!important;color:#8E9CAD!important;background:linear-gradient(135deg,#EDF2F6,#E3EAF0)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
.lg-submit[disabled]::before{display:none}
.lg-submit[disabled] .arr{transform:none!important}
.lg-role[aria-busy="true"]{cursor:progress}

@media (max-width:1100px){.lg-stage{grid-template-columns:minmax(0,1fr) minmax(340px,420px);padding:40px 32px}.lg-top{left:32px;right:32px}.lg-hero h2{font-size:48px}.lg-cards{transform:scale(.85);transform-origin:left top}}
@media (max-width:900px){
  .lg-stage{grid-template-columns:minmax(0,1fr);gap:18px;padding:84px 18px 40px;align-items:start}
  .lg-top{left:18px;right:18px;top:20px} .lg-status{display:none}
  .lg-hero{padding:0} .lg-hero h2{font-size:34px} .lg-hero p{font-size:14px;margin-top:10px} .lg-pills,.lg-cards,.lg-by{display:none}
  .lg-form{padding:22px 20px 18px}
}
@media (prefers-reduced-motion: reduce){.login *,.login *::before,.login *::after{animation:none!important;transition:none!important}.lg-ring .val{stroke-dashoffset:16.6}}
a.lg-link{text-decoration:none;display:inline}