/* V21.1.2 global navigation polish */
.el-site-header,
.el-site-header *{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.el-site-header .ox-nav.el-platform-nav{
  border-color:#d8e3ef;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 10px 28px rgba(30,64,105,.08);
}
.ox-nav.el-platform-nav .ox-brand{
  color:#16375f;
}
.ox-nav.el-platform-nav .ox-brand strong{
  color:#2f6fd6;
}
.el-nav-main{
  padding:3px;
  border-radius:11px;
  background:#f3f7fb;
}
.el-nav-main a{
  color:#50647d;
}
.el-nav-main a:hover{
  background:#e8f0f9;
  color:#173c66;
}
.el-nav-main a[aria-current="page"]{
  background:#245fa8;
  color:#ffffff;
  box-shadow:0 2px 8px rgba(36,95,168,.18);
}
.el-lang-switch{
  border-color:#d4dfeb;
  background:#eef4fa;
}
.el-lang-switch button{
  color:#5d6f85;
}
.el-lang-switch button:hover{
  color:#173c66;
}
.el-lang-switch button[aria-pressed="true"]{
  background:#2f6fd6;
  color:#ffffff;
  box-shadow:0 2px 7px rgba(47,111,214,.22);
}
/* V21.1.1 universal site header */
.el-site-header{
  width:100%;
  padding:16px;
}
.el-site-header .ox-nav.el-platform-nav{
  position:sticky;
  top:12px;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}
body > .el-site-header + main,
body > .el-site-header + .wrap,
body > .el-site-header + .el-about-wrap{
  margin-top:0;
}
@media(max-width:560px){
  .el-site-header{padding:10px}
  .el-site-header .ox-nav.el-platform-nav{top:8px}
}
/* EnglishLearning V21.0.2 navigation */
.ox-nav.el-platform-nav{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  width:100%;
  padding:10px 14px;
  border:1px solid #e3e9f2;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.ox-nav.el-platform-nav .ox-brand{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  color:#142e57;
  text-decoration:none !important;
  font-size:18px;
  font-weight:850;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.ox-nav.el-platform-nav .ox-brand strong{color:#2563eb;font-weight:850}
.el-nav-main{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.el-nav-main::-webkit-scrollbar{display:none}
.el-nav-main a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 11px;
  border-radius:9px;
  color:#52657f;
  text-decoration:none !important;
  font-size:13px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.el-nav-main a:hover{background:#f1f5fb;color:#173c76}
.el-nav-main a[aria-current="page"]{
  background:#eaf1ff;
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px #d4e2ff;
}
.el-lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid #dbe3ef;
  border-radius:11px;
  background:#f7f9fc;
  white-space:nowrap;
}
.el-lang-switch button{
  min-width:48px;
  min-height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#64748b;
  padding:6px 10px;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.el-lang-switch button[aria-pressed="true"]{
  background:#235bce;
  color:#fff;
  box-shadow:0 1px 4px rgba(35,91,206,.24);
}
.el-course-picker{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:10px;
  margin:0 0 12px;
  padding:12px;
  border:1px solid #e1e7f0;
  border-radius:13px;
  background:#f8fafc;
}
.el-course-picker label{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:150px;
  color:#52657f;
  font-size:12px;
  font-weight:700;
}
.el-course-picker select{
  min-width:150px;
  height:40px;
  padding:0 34px 0 11px;
  border:1px solid #cfd8e6;
  border-radius:9px;
  background:#fff;
  color:#17233b;
  font:inherit;
  font-size:14px;
}
.el-course-picker .el-list-field{min-width:min(330px,100%)}
@media(max-width:900px){
  .ox-nav.el-platform-nav{grid-template-columns:auto auto}
  .el-nav-main{grid-column:1 / -1;grid-row:2;padding-top:2px}
  .el-lang-switch{justify-self:end}
}
@media(max-width:560px){
  .ox-nav.el-platform-nav{padding:9px 10px;gap:8px 10px;border-radius:13px}
  .ox-nav.el-platform-nav .ox-brand{padding:7px 6px;font-size:17px}
  .el-nav-main{gap:3px}
  .el-nav-main a{min-height:34px;padding:7px 9px;font-size:12px}
  .el-lang-switch button{min-width:44px;min-height:30px;padding:5px 8px}
  .el-course-picker{align-items:stretch}
  .el-course-picker label,.el-course-picker select{width:100%;min-width:0}
}
.el-platform-hero{
  padding:30px 4px 10px;
}
.el-platform-hero h1{
  margin:8px 0 10px;
  font-size:clamp(32px,6vw,54px);
  line-height:1.05;
  color:#142e57;
}
.el-platform-hero p{
  max-width:760px;
  color:#64748b;
  font-size:17px;
  line-height:1.7;
}
.el-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:#eaf1ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.el-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:22px 0;
}
.el-card{
  display:block;
  background:#fff;
  border:1px solid #dfe5ef;
  border-radius:16px;
  padding:20px;
  text-decoration:none;
  color:#17233b;
  box-shadow:0 4px 16px #152b4610;
}
.el-card:hover{
  border-color:#b8cae8;
  transform:translateY(-1px);
}
.el-card h2,.el-card h3{
  color:#173c76;
  margin:8px 0;
}
.el-card p{
  color:#64748b;
  line-height:1.65;
}
.el-card .el-icon{
  font-size:28px;
}
.el-card .el-tag{
  display:inline-flex;
  margin-top:8px;
  padding:5px 9px;
  border-radius:999px;
  background:#f0f4fa;
  color:#52657f;
  font-size:12px;
  font-weight:700;
}
.el-card.is-disabled{
  opacity:.68;
  cursor:default;
}
.el-section-title{
  margin-top:30px;
  color:#173c76;
}
.el-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.el-primary-link,.el-secondary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:9px;
  padding:10px 14px;
  font-weight:700;
}
.el-primary-link{background:#235bce;color:#fff}
.el-secondary-link{background:#eaf0fa;color:#233a62}
.el-note{
  margin:18px 0;
  padding:13px 14px;
  border-radius:11px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  line-height:1.6;
}
@media(max-width:760px){
  .el-card-grid{grid-template-columns:1fr}
  .el-lang-switch{margin-left:0}
  .el-platform-hero{padding-top:20px}
}

/* V21.1.3 navigation palette
   Inspired by the architecture figure: ink + cobalt + amber + green. */
:root{
  --el-nav-ink:#263548;
  --el-nav-muted:#5f6d7e;
  --el-nav-blue:#2867e8;
  --el-nav-blue-soft:#eaf1ff;
  --el-nav-amber:#b85a00;
  --el-nav-amber-soft:#fff4c7;
  --el-nav-green:#168a46;
  --el-nav-green-soft:#e7f7ea;
  --el-nav-line:#d8e0ea;
}

.el-site-header .ox-nav.el-platform-nav{
  border:1px solid var(--el-nav-line);
  background:#ffffff;
  box-shadow:0 9px 26px rgba(38,53,72,.08);
}

.ox-nav.el-platform-nav .ox-brand{
  color:var(--el-nav-ink);
}
.ox-nav.el-platform-nav .ox-brand strong{
  color:var(--el-nav-blue);
}

.el-nav-main{
  padding:4px;
  border:1px solid #e5eaf0;
  border-radius:12px;
  background:#f7f9fc;
}

.el-nav-main a{
  position:relative;
  border:1px solid transparent;
  color:var(--el-nav-muted);
  background:transparent;
}

.el-nav-main a:hover{
  border-color:#f1c77e;
  background:var(--el-nav-amber-soft);
  color:#874500;
}

.el-nav-main a[aria-current="page"]{
  border-color:#8eb2f3;
  background:var(--el-nav-blue-soft);
  color:#164fae;
  box-shadow:0 2px 8px rgba(40,103,232,.12);
}

.el-nav-main a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:25%;
  right:25%;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:var(--el-nav-amber);
}

.el-lang-switch{
  border:1px solid #bcdcc8;
  background:var(--el-nav-green-soft);
}

.el-lang-switch button{
  color:#4d6758;
}

.el-lang-switch button:hover{
  color:#0d6a34;
}

.el-lang-switch button[aria-pressed="true"]{
  background:var(--el-nav-green);
  color:#ffffff;
  box-shadow:0 2px 8px rgba(22,138,70,.20);
}