/* Sign-in and first-time setup screens (same look as the SPCA website's blue "Student login" tile). */
body.auth{min-height:100vh;background:var(--bg)}
.auth-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:100vh}

/* hero side */
.auth-hero{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  padding:clamp(24px,4vw,52px);display:grid;grid-template-rows:auto auto 1fr auto;gap:28px;
  background:linear-gradient(135deg,#0B1F5C 0%,#14398F 55%,#1D56C9 100%);
}
.auth-hero::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;right:-220px;bottom:-260px;border-radius:50%;background:radial-gradient(circle,rgba(220,47,43,.55),rgba(220,47,43,0) 68%)}
.auth-brand{display:flex;align-items:center;gap:14px;color:#fff}
.auth-brand:hover{color:#fff}
.auth-brand .logo{width:54px;height:54px;border-radius:16px;border:0}
.auth-brand b{display:block;font:600 1rem/1.2 var(--display);letter-spacing:-.04em;color:#fff}
.auth-brand small{display:block;margin-top:3px;opacity:.78;font-weight:600;font-size:.8rem}
.hero-copy h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.12;margin:0 0 14px;max-width:15ch}
.hero-copy p{margin:0;max-width:44ch;font-size:1.04rem;opacity:.88;font-weight:500}

/* orbit: the website hero's skill ring, with this portal's four jobs */
.orbit{--size:min(400px,52vw,46vh);position:relative;width:var(--size);height:var(--size);margin:0 auto;align-self:center}
.orbit .orb{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px dashed rgba(255,255,255,.35)}
.orbit .o1{width:64%;height:64%}
.orbit .o2{width:94%;height:94%;border-style:solid;border-color:rgba(255,255,255,.16)}
.orbit .core{position:absolute;inset:0;margin:auto;width:38%;height:38%;border-radius:50%;background:#fff url("../images/logo.png") center/118% no-repeat;box-shadow:0 0 0 calc(var(--size)*.03) rgba(255,255,255,.14),0 24px calc(var(--size)*.16) -12px rgba(0,0,0,.5);animation:pulse 4.5s ease-in-out infinite}
.sat{position:absolute;inset:0;margin:auto;width:0;height:0;animation:spin 38s linear infinite}
.sat em{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-style:normal;font-weight:800;font-size:.8rem;white-space:nowrap;padding:8px 16px;border-radius:999px;background:#fff;color:#101B4A;box-shadow:0 12px 24px -10px rgba(0,0,0,.45);animation:spin-rev 38s linear infinite}
.s1{--a:0deg;--r:calc(var(--size)*.32)}.s2{--a:90deg;--r:calc(var(--size)*.47)}.s3{--a:180deg;--r:calc(var(--size)*.32)}.s4{--a:270deg;--r:calc(var(--size)*.47)}
.sat{transform:rotate(var(--a))}
.sat em{left:var(--r)}
.s2 em{background:#FDEEEC}.s3 em{background:#FFF6DC}.s4 em{background:#E6F0FD}
@keyframes spin{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes spin-rev{from{transform:translate(-50%,-50%) rotate(calc(-1*var(--a)))}to{transform:translate(-50%,-50%) rotate(calc(-1*var(--a) - 360deg))}}
@keyframes pulse{50%{transform:scale(1.04)}}
.hero-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:700;font-size:.88rem}
.hero-points li{display:inline-flex;align-items:center;gap:9px;opacity:.92}
.hero-points .ico{width:18px;height:18px}

/* form side */
.auth-panel{position:relative;display:grid;place-items:center;padding:clamp(24px,4vw,56px);padding-bottom:calc(clamp(24px,4vw,56px) + env(safe-area-inset-bottom,0px))}
.auth-theme{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:18px}
.auth-card{width:min(100%,430px)}
.auth-mini-brand{display:none;align-items:center;gap:12px;margin-bottom:22px}
.auth-mini-brand .logo{width:44px;height:44px}
.auth-mini-brand b{font:600 .85rem/1.2 var(--display);letter-spacing:-.04em}
.auth-card h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 6px}
.lead-s{color:var(--soft);font-weight:600;margin:0 0 22px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:16px;background:var(--bg2);border:1px solid var(--card-b);margin-bottom:20px}
.seg button{display:flex;align-items:center;justify-content:center;gap:9px;border:0;background:transparent;color:var(--soft);padding:11px 8px;border-radius:12px;font:800 .9rem var(--body);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--btn);color:#fff;box-shadow:0 10px 20px -10px var(--btn)}
.field{margin-bottom:16px}
.with-ico{position:relative}
.with-ico>.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--soft);pointer-events:none;width:19px;height:19px}
.with-ico .form-control{padding-left:44px;padding-right:46px;height:50px;border-radius:14px}
.reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--soft);display:grid;place-items:center;cursor:pointer}
.reveal:hover{background:var(--bg2);color:var(--ink)}
.reveal .ico{width:19px;height:19px}
.go{height:52px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:.98rem;margin-top:6px}
.go .ico{width:18px;height:18px;transition:transform .2s}
.go:hover .ico{transform:translateX(4px)}
.auth-foot{margin:22px 0 0;color:var(--soft);font-size:.84rem;font-weight:600;line-height:1.7}
.auth-foot a{font-weight:800}

@media(max-width:900px){
  .auth-grid{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-mini-brand{display:flex}
  .auth-panel{align-items:start;padding-top:max(64px,calc(env(safe-area-inset-top,0px) + 56px))}
}
@media(prefers-reduced-motion:reduce){.sat,.sat em,.orbit .core{animation:none!important}.sat em{transform:translate(-50%,-50%) rotate(calc(-1*var(--a)))}}

/* first-time setup page */
.setup-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.setup-card{width:min(100%,460px);padding:clamp(22px,4vw,34px)}
.setup-card .logo{margin-bottom:16px;width:54px;height:54px}
.setup-card h4{margin:0 0 6px}
.setup-card .mb-3{margin-bottom:16px!important}