:root{
  --sky-burgundy:#7b173f;
  --sky-burgundy-deep:#4b0c25;
  --sky-ink:#251820;
  --sky-muted:#75676f;
  --sky-line:rgba(255,255,255,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
body.portal-auth{
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--sky-ink);
  background:#3d0a20;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.portal-bg{
  position:fixed;inset:0;z-index:0;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transform:scale(1.012);
}
.portal-auth.staff{--accent:#6c4bd3;--accent-soft:#eee9ff;--accent-rgb:108,75,211}
.portal-auth.student{--accent:#19743f;--accent-soft:#e8f6ed;--accent-rgb:25,116,63}
.portal-auth.family{--accent:#d46b0c;--accent-soft:#fff0e2;--accent-rgb:212,107,12}
.portal-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(40,5,18,.70),rgba(83,18,46,.34) 46%,rgba(38,8,21,.58)),
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.10),transparent 31%),
    linear-gradient(180deg,rgba(68,11,34,.07),rgba(38,5,18,.42));
}
.portal-shell{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,4vw,64px);
}
.portal-frame{
  width:min(900px,100%);
  display:grid;
  grid-template-columns:minmax(0,.90fr) minmax(350px,1.10fr);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.11);
  box-shadow:0 42px 110px rgba(25,3,13,.42),0 6px 22px rgba(25,3,13,.22);
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}
.portal-story{
  position:relative;
  min-height:490px;
  padding:32px 30px 28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.14),transparent 25%),
    linear-gradient(155deg,rgba(var(--accent-rgb),.63),rgba(74,12,39,.84) 62%,rgba(38,7,20,.92));
  border-right:1px solid rgba(255,255,255,.16);
}
.portal-story:before,.portal-story:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.portal-story:before{width:430px;height:430px;right:-280px;top:-210px;border:1px solid rgba(255,255,255,.11);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.012)}
.portal-story:after{width:240px;height:240px;left:-145px;bottom:-130px;background:rgba(255,255,255,.035)}
.portal-brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px}
.portal-logo-mark{
  position:relative;
  width:48px;height:48px;flex:0 0 48px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:19px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px rgba(18,0,8,.24);
}
.portal-logo-mark svg{width:28px;height:28px;fill:currentColor;filter:drop-shadow(0 3px 5px rgba(26,0,11,.26))}
.portal-brand-copy strong{display:block;font-size:18px;line-height:1;font-weight:950;letter-spacing:-.55px}
.portal-brand-copy span{display:block;margin-top:5px;color:rgba(255,255,255,.68);font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.portal-story-main{position:relative;z-index:2;margin-top:64px}
.portal-kicker{font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.portal-story h1{margin:12px 0 16px;max-width:470px;font-size:clamp(30px,2.8vw,42px);line-height:.98;letter-spacing:-.055em;font-weight:950}
.portal-story p{margin:0;max-width:390px;color:rgba(255,255,255,.76);font-size:11px;line-height:1.72}
.portal-features{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.portal-features span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);font-size:9px;font-weight:850;color:rgba(255,255,255,.87)}
.portal-form-side{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:44px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,250,252,.93));
}
.portal-form-side:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.68),transparent 28%,transparent 74%,rgba(var(--accent-rgb),.035));}
.portal-card{position:relative;z-index:1;width:min(370px,100%)}
.portal-mobile-logo{display:none}
.portal-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-size:9px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.portal-eyebrow:before{content:"";width:24px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.28))}
.portal-card h2{margin:8px 0 7px;font-size:28px;line-height:1;letter-spacing:-.052em;font-weight:950;color:#281820}
.portal-card>.lead{margin:0 0 19px;color:var(--sky-muted);font-size:10px;line-height:1.55}
.portal-messages{display:grid;gap:8px;margin:0 0 16px}
.portal-message{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border:1px solid #f2cdd6;border-radius:13px;background:#fff2f4;color:#9c2943;font-size:10px;line-height:1.45;box-shadow:0 6px 20px rgba(88,20,45,.055)}
.portal-message b{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:50%;background:#f9dbe2}
.portal-field{display:block;margin-bottom:11px}
.portal-field>span:first-child{display:block;margin-bottom:7px;color:#4b3741;font-size:9px;font-weight:900}
.portal-input{
  height:46px;display:flex;align-items:center;gap:9px;
  border:1px solid #e5d7dd;border-radius:12px;
  background:#fff;
  box-shadow:0 7px 18px rgba(52,17,34,.04),inset 0 1px 0 rgba(255,255,255,.82);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.portal-input:focus-within{border-color:rgba(var(--accent-rgb),.72);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.09),0 10px 26px rgba(52,17,34,.07);transform:translateY(-1px)}
.portal-input svg{width:16px;height:16px;margin-left:12px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.88}
.portal-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#2c2025;font-size:11.5px;padding:0 14px 0 0}
.portal-input input::placeholder{color:#a6959d}
.portal-eye{width:40px;height:100%;display:grid;place-items:center;border:0;background:transparent;color:#8c7780;cursor:pointer;border-radius:0 15px 15px 0}
.portal-eye svg{margin:0;width:18px;height:18px;stroke:currentColor}
.portal-submit{
  width:100%;height:46px;margin-top:3px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:12px;
  color:#fff;
  background:linear-gradient(100deg,var(--sky-burgundy-deep),var(--sky-burgundy) 55%,color-mix(in srgb,var(--accent) 46%,var(--sky-burgundy) 54%));
  box-shadow:0 13px 30px rgba(91,17,48,.23),inset 0 1px 0 rgba(255,255,255,.15);
  font-size:9.5px;font-weight:950;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.portal-submit:hover{transform:translateY(-2px);box-shadow:0 17px 36px rgba(91,17,48,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.portal-submit span:last-child{font-size:14px;transition:transform .18s ease}.portal-submit:hover span:last-child{transform:translateX(4px)}
.portal-assurance{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;color:#806e76;font-size:9px;font-weight:750}
.portal-assurance i{width:7px;height:7px;border-radius:50%;background:#34ad78;box-shadow:0 0 0 4px rgba(52,173,120,.10)}
.portal-help{margin-top:11px;padding:9px 10px;border:1px solid rgba(var(--accent-rgb),.10);border-radius:13px;background:rgba(var(--accent-rgb),.045);color:#77666e;font-size:9px;line-height:1.52}
.portal-help strong{color:#4c3942}
.portal-links{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:13px;padding-top:11px;border-top:1px solid #eee4e8;color:#7a6871;font-size:9px;font-weight:850}
.portal-links a{transition:color .18s ease,transform .18s ease}.portal-links a:hover{color:var(--accent);transform:translateY(-1px)}
.portal-badge{
  position:absolute;right:24px;top:24px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 10px;border:1px solid rgba(var(--accent-rgb),.12);border-radius:999px;
  background:rgba(var(--accent-rgb),.06);color:var(--accent);font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
}
.portal-badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .portal-shell{padding:22px}
  .portal-frame{grid-template-columns:1fr;width:min(560px,100%);border-radius:28px}
  .portal-story{display:none}
  .portal-form-side{min-height:calc(100vh - 44px);padding:34px 28px;border-radius:28px}
  .portal-mobile-logo{display:flex;align-items:center;gap:10px;margin-bottom:31px}
  .portal-mobile-logo .portal-logo-mark{width:47px;height:47px;flex-basis:47px;border-color:#eadce2;background:linear-gradient(145deg,#fff,#f6edf1);color:var(--sky-burgundy);box-shadow:0 10px 24px rgba(54,12,32,.10),inset 0 1px 0 #fff}
  .portal-mobile-logo .portal-logo-mark svg{width:28px;height:28px}
  .portal-mobile-logo strong{display:block;font-size:17px;font-weight:950;color:#421225}
  .portal-mobile-logo span{display:block;margin-top:3px;color:var(--accent);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
  .portal-badge{right:18px;top:18px}
}
@media(max-width:520px){
  .portal-shell{padding:0}
  .portal-frame{min-height:100vh;border:0;border-radius:0;background:#fff}
  .portal-form-side{min-height:100vh;padding:28px 20px;border-radius:0}
  .portal-card h2{font-size:32px}
  .portal-badge{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Stage 82.7 — visibly compact Staff / Student / Family login */
@media (min-width: 901px){
  .portal-frame{max-height:calc(100vh - 36px)}
  .portal-story,.portal-form-side{min-height:490px}
  .portal-story h1{max-width:350px}
}