:root{
  --spo-blue:#39b6ff;
  --spo-blue-deep:#0876aa;
  --spo-blue-ink:#075d87;
  --spo-ink:#13202a;
  --spo-muted:#65727d;
  --spo-line:#b9e7ff;
  --spo-soft:#eef9ff;
  --spo-card:#fff;
  --spo-danger:#9e2d2d;
  --spo-success:#167348;
  --spo-shadow:0 18px 54px rgba(0,109,159,.13);
}
*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--spo-ink);background:radial-gradient(circle at 12% 0,rgba(57,182,255,.20),transparent 34%),linear-gradient(180deg,#fff 0,#f6fbff 54%,#edf8ff 100%)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.spo-auth-shell{min-height:100vh;display:flex;flex-direction:column}
.spo-auth-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(57,182,255,.28)}
.spo-auth-nav-inner{width:min(100%,1100px);margin:0 auto;padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.spo-auth-brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-.15px;min-width:0}
.spo-auth-brand img{height:50px;max-width:210px;width:auto;display:block;object-fit:contain}
.spo-auth-brand span{white-space:nowrap}
.spo-auth-header-actions{display:flex;align-items:center;gap:9px}
.spo-auth-main{width:min(100%,1100px);margin:0 auto;flex:1;padding:54px 18px 84px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,470px);gap:48px;align-items:center}
.spo-auth-copy{max-width:590px}
.spo-auth-eyebrow,.spo-panel-kicker{text-transform:uppercase;letter-spacing:1.8px;font-size:12px;font-weight:950;color:var(--spo-blue-deep)}
.spo-auth-copy h1,.spo-account-hero h1{font-size:clamp(36px,5.8vw,60px);letter-spacing:-1.9px;line-height:1.02;margin:12px 0 16px}
.spo-auth-copy p,.spo-account-hero p{font-size:18px;line-height:1.65;color:var(--spo-muted);margin:0;max-width:720px}
.spo-auth-points{display:grid;gap:11px;margin-top:25px}
.spo-auth-point{display:flex;gap:10px;align-items:flex-start;font-weight:750;line-height:1.45}
.spo-auth-point>span:first-child{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--spo-soft);border:1px solid var(--spo-line);flex:0 0 auto}
.spo-auth-card{background:rgba(255,255,255,.97);border:1px solid var(--spo-line);border-radius:28px;padding:27px;box-shadow:var(--spo-shadow)}
.spo-auth-card h2{font-size:29px;letter-spacing:-.65px;margin:6px 0 8px}
.spo-auth-card p{color:var(--spo-muted);line-height:1.55;margin:0 0 20px}
.spo-field{display:grid;gap:7px;margin-top:16px}
.spo-field span{font-size:13px;font-weight:900}
.spo-field input{width:100%;min-height:54px;padding:12px 14px;border:1px solid #9ddcff;border-radius:16px;background:#fff;color:var(--spo-ink);outline:none;box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.spo-field input:focus{border-color:var(--spo-blue-deep);box-shadow:0 0 0 4px rgba(57,182,255,.18)}
.spo-code-input{text-align:center;font-size:28px!important;letter-spacing:8px;font-weight:950}
.spo-button{min-height:48px;padding:11px 16px;border:1px solid transparent;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.spo-button:hover{transform:translateY(-1px)}
.spo-button:active{transform:scale(.98)}
.spo-button[disabled]{opacity:.55;cursor:wait;transform:none}
.spo-button-primary{background:var(--spo-blue);color:#07131b;box-shadow:0 10px 26px rgba(0,109,159,.18)}
.spo-button-quiet{background:#fff;border-color:var(--spo-line)}
.spo-button-danger{background:#fff4f4;border-color:#efb8b8;color:var(--spo-danger)}
.spo-auth-actions{display:grid;gap:10px;margin-top:20px}
.spo-status{display:none;margin:15px 0 0;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.45}
.spo-status.is-visible{display:block}
.spo-status.is-error{background:#fff1f1;border:1px solid #f0b8b8;color:#812525}
.spo-status.is-success{background:#effcf6;border:1px solid #a8e5ca;color:#155f3d}
.spo-status.is-info{background:#eef9ff;border:1px solid var(--spo-line);color:#135671}
.spo-auth-small{font-size:12px!important;line-height:1.55!important;color:var(--spo-muted)!important;margin-top:16px!important}
.spo-auth-back{font-size:14px;font-weight:850;color:var(--spo-blue-deep);background:none;border:0;padding:5px;cursor:pointer}
.spo-hidden{display:none!important}
.spo-account-main{width:min(100%,1100px);margin:0 auto;flex:1;padding:42px 18px 90px}
.spo-account-hero{background:rgba(255,255,255,.94);border:1px solid var(--spo-line);border-radius:28px;padding:28px;box-shadow:var(--spo-shadow);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.spo-account-hero h1{font-size:clamp(38px,6vw,58px);margin-bottom:12px}
.spo-account-back-mobile{display:none}
.spo-account-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin-top:22px}
.spo-panel{background:#fff;border:1px solid var(--spo-line);border-radius:24px;padding:23px;box-shadow:0 10px 30px rgba(0,109,159,.08)}
.spo-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:17px}
.spo-panel h2{margin:4px 0 0;font-size:23px;letter-spacing:-.35px}
.spo-verified-badge{padding:7px 10px;border-radius:999px;background:#effcf6;border:1px solid #a8e5ca;color:var(--spo-success);font-size:12px;font-weight:900;white-space:nowrap}
.spo-text-link{color:var(--spo-blue-ink);font-size:13px;font-weight:900;white-space:nowrap;padding-top:6px}
.spo-profile-row{display:flex;align-items:center;gap:14px}
.spo-avatar{width:62px;height:62px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(135deg,#dff5ff,#fff);border:1px solid var(--spo-line);color:var(--spo-blue-deep);flex:0 0 auto}
.spo-avatar svg{width:31px;height:31px;fill:currentColor;display:block}
.spo-profile-copy{min-width:0}
.spo-profile-email{font-weight:950;overflow-wrap:anywhere;font-size:16px}
.spo-profile-note{font-size:13px;color:var(--spo-muted);margin-top:4px}
.spo-plan-card{margin-top:18px;padding:18px;border-radius:20px;background:linear-gradient(135deg,#e6f8ff,#fff);border:1px solid var(--spo-line)}
.spo-plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spo-plan-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;color:var(--spo-blue-ink);margin-bottom:3px}
.spo-plan-name{font-size:26px;font-weight:950;letter-spacing:-.45px}
.spo-plan-pill{padding:7px 11px;border-radius:999px;font-size:12px;font-weight:950;background:#fff;border:1px solid var(--spo-line);white-space:nowrap}
.spo-plan-expiry{font-size:13px;color:var(--spo-muted);margin-top:8px}
.spo-account-actions{display:grid;gap:10px;margin-top:18px}
.spo-downloads{display:grid;gap:11px}
.spo-download-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid #d4efff;border-radius:17px;background:#fbfeff}
.spo-download-item strong{display:block;line-height:1.35}
.spo-download-meta{font-size:12px;color:var(--spo-muted);margin-top:3px}
.spo-download-item .spo-button{min-height:42px;padding:8px 12px;border-radius:13px;font-size:13px;flex:0 0 auto}
.spo-loading{padding:16px;border-radius:15px;background:var(--spo-soft);color:var(--spo-muted);display:flex;align-items:center;gap:10px;line-height:1.45}
.spo-spinner{width:18px;height:18px;border-radius:50%;border:2px solid #b9e7ff;border-top-color:var(--spo-blue-deep);animation:spo-spin .8s linear infinite;flex:0 0 auto}
@keyframes spo-spin{to{transform:rotate(360deg)}}
.spo-account-footer{padding:22px 18px;text-align:center;color:var(--spo-muted);font-size:12px;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.spo-account-footer a:hover,.spo-text-link:hover{text-decoration:underline}
@media(max-width:820px){
  .spo-auth-main{grid-template-columns:1fr;gap:28px;padding-top:34px}
  .spo-auth-copy{max-width:none}
  .spo-auth-copy h1{font-size:42px}
  .spo-auth-copy p{font-size:16px}
  .spo-account-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .spo-auth-nav-inner{padding:8px 14px}
  .spo-auth-brand img{height:43px;max-width:170px}
  .spo-auth-brand span{display:none}
  .spo-auth-header-actions .spo-button-quiet{display:none}
  .spo-auth-main,.spo-account-main{padding-left:14px;padding-right:14px}
  .spo-auth-card,.spo-account-hero,.spo-panel{border-radius:22px;padding:20px}
  .spo-account-hero{align-items:flex-start;flex-direction:column;gap:15px}
  .spo-account-hero p{font-size:15px;line-height:1.55}
  .spo-account-back-mobile{display:inline-flex}
  .spo-panel-heading{align-items:flex-start}
  .spo-download-item{align-items:flex-start;flex-direction:column}
  .spo-download-item .spo-button{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* SPO Schools account gateway */
.spo-schools-account-panel{margin-top:22px}
.spo-school-account-list{display:grid;gap:11px}
.spo-school-account-item,.spo-school-account-empty{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid #d4efff;border-radius:18px;background:#fbfeff}
.spo-school-account-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--spo-blue),#e8f8ff);border:1px solid #9cdcff;color:#074f72;font-weight:950;font-size:18px;flex:0 0 auto}
.spo-school-account-copy{min-width:0;flex:1}
.spo-school-account-copy strong,.spo-school-account-empty strong{display:block;line-height:1.35}
.spo-school-account-copy span,.spo-school-account-empty span{display:block;font-size:13px;color:var(--spo-muted);margin-top:4px;line-height:1.45}
.spo-school-account-item .spo-button,.spo-school-account-empty .spo-button{min-height:42px;padding:8px 12px;border-radius:13px;font-size:13px;flex:0 0 auto}
.spo-school-account-empty{justify-content:space-between}
@media(max-width:620px){.spo-school-account-item,.spo-school-account-empty{align-items:flex-start;flex-direction:column}.spo-school-account-item .spo-button,.spo-school-account-empty .spo-button{width:100%}}