/* Shared site frame, based on eLearning. */
html { min-height: 100%; background: #f4f7fb; }
body {
  margin: 0;
  min-height: 100vh;
  color: #152238;
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 8% 0%, rgba(36,87,214,.13), transparent 28%),
    radial-gradient(circle at 94% 4%, rgba(15,136,127,.12), transparent 25%), #f4f7fb;
}
.site-layout.site-layout {
  box-sizing: border-box;
  width: min(1240px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 18px 0 44px;
}
.site-layout > .topbar { width: 100%; min-height: 0; margin: 0; top: auto; }
.site-layout > .topbar .brand { font-size: 16px; }
.site-layout > main,
.site-layout > main.container { width: 100%; max-width: none; margin: 0; padding: 0; }
.site-layout .site-banner {
  box-sizing: border-box;
  display: block;
  min-height: 0;
  margin: 18px 0 24px;
  padding: 26px 32px;
  border-radius: 34px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #122e78 0%, #2457d6 52%, #0f887f 100%);
  box-shadow: 0 18px 50px rgba(31,55,91,.12);
}
.site-layout .site-banner h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: normal;
  max-width: 760px;
  margin: 0 0 10px;
}
.site-layout .site-banner p {
  color: rgba(255,255,255,.88);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 720px;
  margin: 0;
}
.site-layout .site-banner::before,
.site-layout .site-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}
.site-layout .site-banner::before { width: 330px; height: 330px; right: -110px; top: -150px; }
.site-layout .site-banner::after { width: 220px; height: 220px; left: 45%; bottom: -175px; top: auto; right: auto; }
@media (max-width: 700px) {
  .site-layout.site-layout { width: calc(100% - 18px); padding-top: 8px; }
  .site-layout .site-banner { padding: 24px 18px; border-radius: 22px; }
  .site-layout .site-banner h1 { font-size: clamp(1.72rem, 8.4vw, 2.05rem); line-height: 1.04; margin: 7px 0 11px; }
  .site-layout .site-banner p { font-size: .88rem; line-height: 1.48; }
  .site-layout > .topbar .brand small { display: none; }
}
@media (max-width: 540px) {
  .site-layout > .topbar .brand { font-size: 13px; }
}
@media (max-width: 360px) {
  .site-layout .site-banner { padding: 20px 16px; }
  .site-layout .site-banner h1 { font-size: 1.68rem; margin: 0 0 9px; }
  .site-layout .site-banner p { font-size: .82rem; line-height: 1.4; }
}

.topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:13px 16px!important;background:rgba(255,255,255,.94)!important;border:1px solid #dbe5f1!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(31,55,91,.07)!important;position:relative;z-index:20}
.topbar .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#182943;font-weight:850;line-height:1.3}
.topbar .brand-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:linear-gradient(135deg,#2457d6,#0f887f);color:#fff;font-size:20px}
.topbar .brand small{display:block;color:#5c6b80;font-size:12px;font-weight:600;margin-top:2px}
.topbar .links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.topbar .links a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:800;padding:10px 13px;background:#fff;color:#182943;border:1px solid #dbe5f1;border-radius:12px;white-space:nowrap}
.topbar .links a:hover,.topbar .links a[aria-current="page"]{color:#2457d6;border-color:#96b7ed;background:#eff5ff}
.topbar .install-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;border:1px solid transparent;background:linear-gradient(135deg,#2457d6,#0f887f);color:white;font-size:16px;font-weight:800;box-shadow:0 8px 18px rgba(36,87,214,.2)}
.topbar .install-btn[hidden]{display:none!important}
.elearning-utilities{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:10px 0 0}
.elearning-utilities .ghost-btn{font-size:13px;padding:8px 12px}
@media(max-width:860px){.topbar{flex-wrap:wrap}.topbar .links{justify-content:flex-start}}
@media(max-width:540px){.topbar .brand{font-size:13px}.topbar .links{gap:5px}.topbar .links a{padding:8px 9px;font-size:12px}}