:root { color-scheme:light; }
* { box-sizing:border-box; }
body.learning-login-page {
  margin:0;
  min-height:100vh;
  color:#17305c;
  background:radial-gradient(circle at 12% 4%,rgba(91,146,244,.2),transparent 34%),radial-gradient(circle at 92% 18%,rgba(45,212,191,.15),transparent 30%),linear-gradient(180deg,#f8fbff,#effbf9);
  font-family:"Segoe UI Variable Text","Segoe UI","Noto Sans",Arial,sans-serif;
}
.learning-login-shell { width:min(100% - 28px,430px); margin:0 auto; padding:28px 0; }
.learning-login-brand { display:flex; justify-content:center; margin-bottom:18px; }
.learning-login-brand img { width:152px; height:52px; object-fit:contain; }
.learning-login-card { padding:26px; border:1px solid rgba(77,115,223,.16); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 20px 48px rgba(41,79,199,.13); }
.learning-login-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:16px; border-radius:14px; color:#3768d8; background:#edf4ff; }
.learning-login-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.learning-login-kicker { margin:0 0 5px; color:#4774df; font-size:11px; font-weight:750; letter-spacing:.12em; }
.learning-login-card h1 { margin:0; font-family:"Segoe UI Variable Display","Segoe UI",sans-serif; font-size:25px; line-height:1.2; letter-spacing:-.035em; }
.learning-login-description { margin:10px 0 20px; color:#607493; font-size:14px; line-height:1.55; font-weight:450; }
.learning-login-card label { display:block; margin-bottom:6px; color:#365580; font-size:12px; font-weight:700; }
.learning-login-card input { width:100%; min-height:48px; padding:12px 14px; border:1px solid #cdddf5; border-radius:14px; color:#17305c; background:#fff; font:450 15px/1.3 inherit; outline:none; }
.learning-login-card input:focus { border-color:#5a82e1; box-shadow:0 0 0 4px rgba(77,115,223,.12); }
.learning-login-card button { width:100%; min-height:48px; margin-top:11px; border:0; border-radius:14px; color:#fff; background:linear-gradient(135deg,#3c69d9,#67a0f4); box-shadow:0 10px 22px rgba(62,107,217,.22); font:700 15px/1.2 inherit; cursor:pointer; }
.learning-login-card button:disabled { opacity:.62; cursor:wait; }
.learning-login-status { display:none; margin-top:12px; padding:10px 12px; border-radius:12px; font-size:12px; line-height:1.45; }
.learning-login-status.is-success,.learning-login-status.is-loading,.learning-login-status.is-error { display:block; }
.learning-login-status.is-success { color:#087b4b; background:#ebfbf3; }
.learning-login-status.is-loading { color:#315bba; background:#edf4ff; }
.learning-login-status.is-error { color:#b8324b; background:#fff0f3; }
.learning-login-dev-link { display:block; margin-top:10px; padding:10px; border-radius:11px; color:#315bba; background:#edf4ff; text-align:center; font-size:12px; font-weight:700; text-decoration:none; }
.learning-login-privacy { margin:15px 0 0; color:#7b879a; font-size:11px; line-height:1.5; text-align:center; }
.learning-login-back { display:block; margin-top:16px; color:#48658f; font-size:13px; font-weight:600; text-align:center; text-decoration:none; }
.learning-login-waiting { margin-top:14px; padding:14px; border:1px solid #cfe2ff; border-radius:16px; background:linear-gradient(145deg,#f5f9ff,#effcf9); }
.learning-login-waiting:not([hidden]) { display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:start; }
.learning-login-waiting-icon { width:38px; height:38px; border:3px solid #d9e6fb; border-top-color:#4774df; border-radius:50%; animation:learning-login-spin .9s linear infinite; }
.learning-login-waiting strong { display:block; color:#17305c; font-size:13px; }
.learning-login-waiting p { margin:5px 0 7px; color:#607493; font-size:12px; line-height:1.45; }
.learning-login-waiting span { color:#315bba; font-size:12px; font-weight:700; }
.learning-login-card .learning-login-waiting button { grid-column:1/-1; min-height:40px; margin-top:1px; color:#315bba; border:1px solid #c9daf7; background:#fff; box-shadow:none; font-size:12px; }
@keyframes learning-login-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){.learning-login-waiting-icon{animation:none;border-color:#4774df}}
@media(max-width:480px){.learning-login-shell{padding:18px 0}.learning-login-card{padding:20px;border-radius:22px}.learning-login-card h1{font-size:22px}}