/* Brand fonts, self-hosted (SIL OFL 1.1, via Fontsource): the CSP allows
   only same-origin fonts, and the Android app must not depend on Google. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url("/assets/fonts/oswald-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url("/assets/fonts/oswald-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url("/assets/fonts/oswald-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/fonts/golos-text-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/fonts/golos-text-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/fonts/caveat-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/fonts/caveat-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/fonts/caveat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Student cabinet — infoLogia brand layer.
   Taken from the brand's own channels (info-logia.kz landing, Instagram):
   indigo panels on a lined-paper grid, condensed Oswald headlines, a lime
   tape strip, Golos Text for reading and one handwritten Caveat line. */
.student-shell {
  --il-indigo: #34409d;
  --il-indigo-deep: #262f80;
  --il-ink: #10132e;
  --il-lime: #d4ff3a;
  --il-lime-edge: #a9cf16;
  --il-paper: #f4f5fb;
  --il-line: #e2e5f3;
  --il-muted: #565d84;
  --il-display: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --il-hand: "Caveat", "Segoe Print", cursive;
  font-family: "Golos Text", "Segoe UI", Arial, sans-serif;
  color: var(--il-ink);
}
.home-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Desktop sidebar */
@media (min-width: 701px) {
  .student-shell .nav-link {
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
  }
  .student-shell .nav-link:hover {
    background: #eceefb;
  }
  .student-shell .nav-link.active {
    background: var(--il-indigo);
    color: #fff;
    font-weight: 600;
  }
  .student-shell .nav-link.active svg {
    color: var(--il-lime);
  }
}

/* Greeting */
.sh-hello {
  margin: 0 0 20px;
}
.sh-hello-hi {
  margin: 0;
  color: var(--il-indigo);
  font-family: var(--il-hand);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.sh-hello h1 {
  margin: 0;
  color: var(--il-ink);
  font-family: var(--il-display);
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sh-hello-cheer {
  margin: 6px 0 0;
  color: var(--il-muted);
  font-size: 15px;
}

/* Hero: the one thing to do next, with a glossy subject emblem in the
   spirit of the 3D icons on infoLogia's Instagram highlights. */
.sh-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 24px;
  min-height: 270px;
  padding: 36px 40px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 84% 52%, #7d8cff66 0, transparent 34%),
    linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(135deg, #3a47b0 0%, var(--il-indigo) 45%, var(--il-indigo-deep) 100%);
  box-shadow: 0 24px 48px -24px #262f80b3;
}
.sh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 6px 13px 6px 10px;
  border-radius: 99px;
  background: var(--il-lime);
  color: var(--il-ink);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sh-kicker svg {
  width: 15px;
  height: 15px;
}
.sh-hero h2 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--il-display);
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sh-detail {
  margin: 12px 0 0;
  color: #dfe3ff;
  font-size: 15px;
  line-height: 1.45;
}
.sh-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 26px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--il-lime);
  color: var(--il-ink);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 5px 0 var(--il-lime-edge), 0 14px 26px #0b10402e;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sh-cta svg {
  width: 19px;
  height: 19px;
  transition: transform 0.18s;
}
.sh-cta:hover svg {
  transform: translateX(3px);
}
.sh-cta:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--il-lime-edge), 0 6px 14px #0b10402e;
}
.sh-cta:focus-visible {
  outline-color: #fff;
}
.sh-hero-art {
  position: relative;
  justify-self: center;
  width: 230px;
  height: 210px;
}
.sh-art-ring {
  position: absolute;
  inset: 8px 18px;
  border: 2px dashed #ffffff38;
  border-radius: 50%;
}
.sh-art-ring::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: #ffffff0f;
}
/* Glossy lime tile: highlight on top, pressed edge below, long soft shadow */
.sh-art-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  margin: -68px 0 0 -68px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 30% 22%, #ffffffd9 0, #ffffff00 38%),
    linear-gradient(150deg, #efffa6 0%, var(--il-lime) 46%, #b7e01f 100%);
  color: var(--il-ink);
  box-shadow:
    inset 0 -9px 0 #9fc414,
    inset 0 2px 0 #ffffffb3,
    0 28px 36px -10px #0b1040a6;
  transform: rotate(-9deg);
  animation: sh-art-in 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.sh-art-tile svg {
  width: 66px;
  height: 66px;
  margin-top: -6px;
  stroke-width: 2.1;
}
.sh-art-chip {
  position: absolute;
  right: 6px;
  top: 22px;
  min-width: 54px;
  padding: 9px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--il-indigo);
  font-family: var(--il-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 14px 24px -8px #0b104080;
  transform: rotate(8deg);
}
.sh-art-spark {
  position: absolute;
  left: 18px;
  bottom: 26px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--il-ink);
  color: var(--il-lime);
  box-shadow: 0 12px 20px -6px #0b1040a6;
}
.sh-art-spark svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}
.sh-hero--trophy .sh-art-chip,
.sh-hero--calendar .sh-art-chip {
  color: var(--il-ink);
  background: var(--il-lime);
}
@keyframes sh-art-in {
  from {
    opacity: 0;
    transform: rotate(-24deg) scale(0.7);
  }
}

/* Streak and week strip */
.sh-streak-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.sh-streak-count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.sh-streak-count strong {
  font-family: var(--il-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.95;
}
.sh-streak-count > span:last-child {
  max-width: 6em;
  color: var(--il-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.sh-flame {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #eceefb;
  color: #a5aacb;
}
.sh-flame svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
.sh-flame.is-lit {
  background: var(--il-ink);
  color: var(--il-lime);
}
.sh-flame.is-lit svg path:first-child {
  fill: #d4ff3a33;
}
.sh-week {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sh-week li {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.sh-week small {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 500;
}
.sh-day-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #dfe2f2;
  border-radius: 50%;
  background: #fff;
}
.sh-day-dot svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}
.sh-week .is-done .sh-day-dot {
  border-color: var(--il-indigo);
  background: var(--il-indigo);
  color: var(--il-lime);
}
.sh-week .is-today .sh-day-dot {
  border: 2px dashed var(--il-indigo);
}
.sh-week .is-today small {
  color: var(--il-indigo);
  font-weight: 700;
}
.sh-week .is-later .sh-day-dot {
  border-color: #eceef8;
  background: #f7f8fc;
}
.sh-streak-note {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f4f5fb;
  color: var(--il-ink);
  font-size: 14px;
}

/* infoLogia offers: horizontal snap row */
.sh-promos {
  margin-top: 30px;
}
.sh-promo-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  margin: 0 -4px;
  padding: 4px 4px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.sh-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 18px;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.18s;
}
.sh-promo:hover {
  transform: translateY(-3px);
}
.sh-promo-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.sh-promo strong {
  margin-top: 14px;
  font-family: var(--il-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sh-promo-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.85;
}
.sh-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
}
.sh-promo-cta svg {
  width: 17px;
  height: 17px;
}
.sh-promo--lime {
  background: var(--il-lime);
  color: var(--il-ink);
}
.sh-promo--lime .sh-promo-tag {
  background: var(--il-ink);
  color: var(--il-lime);
}
.sh-promo--indigo {
  background:
    linear-gradient(#ffffff12 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / 22px 22px,
    var(--il-indigo);
  color: #fff;
}
.sh-promo--indigo strong {
  color: var(--il-lime);
  font-size: 40px;
}
.sh-promo--indigo .sh-promo-tag,
.sh-promo--ink .sh-promo-tag {
  background: var(--il-lime);
  color: var(--il-ink);
}
.sh-promo--paper {
  border: 1px solid var(--il-line);
  background: #fff;
  color: var(--il-ink);
}
.sh-promo--paper .sh-promo-tag {
  background: #eceefe;
  color: var(--il-indigo);
}
.sh-promo--paper .sh-promo-cta {
  color: var(--il-indigo);
}
.sh-promo--ink {
  background: var(--il-ink);
  color: #fff;
}

/* Path + last result */
.sh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.sh-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--il-line);
  border-radius: 22px;
  background: #fff;
}
.sh-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sh-card-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.sh-card-head span {
  color: var(--il-muted);
  font-size: 13px;
  text-align: right;
}
ol.sh-path {
  margin: 0;
  padding: 10px;
  list-style: none;
}
.sh-stop {
  position: relative;
}
.sh-stop + .sh-stop::before {
  content: "";
  position: absolute;
  left: 30px;
  top: -10px;
  height: 20px;
  border-left: 2px dashed #c9cdec;
}
.sh-stop.is-done + .sh-stop::before {
  border-left-style: solid;
  border-color: var(--il-indigo);
}
.sh-stop > a,
.sh-stop.is-locked {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 16px;
}
.sh-stop > a:hover {
  background: #f3f4fc;
}
.sh-stop.is-now > a {
  background: #eceefe;
}
.sh-stop-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border: 2px solid var(--il-indigo);
  border-radius: 12px;
  background: #fff;
  color: var(--il-indigo);
  font-family: var(--il-display);
  font-size: 13px;
  font-weight: 600;
}
.sh-stop-mark svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}
.sh-stop.is-done .sh-stop-mark {
  border-color: var(--il-indigo);
  background: var(--il-indigo);
  color: var(--il-lime);
}
.sh-stop.is-now .sh-stop-mark {
  border-color: var(--il-ink);
  background: var(--il-lime);
  color: var(--il-ink);
}
.sh-stop.is-locked {
  background: none;
  color: #7c82a3;
}
.sh-stop.is-locked .sh-stop-mark {
  border-color: #d2d5ea;
  color: #8d93b3;
}
.sh-stop-text {
  min-width: 0;
}
.sh-stop-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sh-stop-text small {
  display: block;
  margin-top: 2px;
  color: var(--il-muted);
  font-size: 13px;
}
.sh-stop.is-locked .sh-stop-text small {
  color: #7c82a3;
}

.sh-result {
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: border-color 0.18s;
}
a.sh-result:hover {
  border-color: var(--il-indigo);
}
.sh-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  font-family: var(--il-display);
}
.sh-score strong {
  font-size: 76px;
  font-weight: 700;
  line-height: 0.95;
}
.sh-score span {
  color: var(--il-muted);
  font-size: 28px;
  font-weight: 600;
}
.sh-result-lesson {
  margin: 10px 0 16px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sh-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
}
.sh-verdict svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.sh-result.is-passed .sh-verdict {
  background: #e3f5ec;
  color: #16704a;
}
.sh-result.is-failed .sh-verdict {
  background: #fff1dc;
  color: #87530c;
}
.sh-result-empty {
  margin: 0;
  color: var(--il-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Subjects */
.sh-grid--study {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 30px;
}
.sh-grid--study > :only-child {
  grid-column: 1 / -1;
}
.sh-grid--study .sh-subject-grid {
  grid-template-columns: minmax(0, 1fr);
}
.sh-grid--study > .sh-subjects:only-child .sh-subject-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.sh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.sh-section-head h2 {
  margin: 0;
  font-family: var(--il-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.sh-section-head a {
  color: var(--il-indigo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--il-lime);
  text-underline-offset: 5px;
}
.sh-section-head > span {
  color: var(--il-muted);
  font-size: 14px;
}
.sh-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.sh-subject {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--il-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color 0.18s;
}
.sh-subject:hover {
  border-color: var(--il-indigo);
}
.sh-subject-cover {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--il-indigo);
}
.sh-subject-cover > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: #ffffff59;
  stroke-width: 1.4;
}
.sh-subject-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--il-lime);
  color: var(--il-ink);
}
.sh-subject-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.sh-subject-body {
  flex: 1;
  min-width: 0;
}
.sh-subject-body strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.sh-subject-body small {
  display: block;
  margin-top: 3px;
  color: var(--il-muted);
  font-size: 13px;
}
.sh-bar {
  display: block;
  height: 7px;
  margin-top: 10px;
  border-radius: 99px;
  background: #e8eaf6;
  overflow: hidden;
}
.sh-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--il-indigo);
}
.sh-subject-go {
  color: var(--il-indigo);
}
.sh-subject-go svg {
  width: 20px;
  height: 20px;
}
.sh-empty {
  margin: 0;
  color: var(--il-muted);
}

@media (max-width: 1050px) {
  .sh-hero {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 12px;
    padding: 30px 28px;
  }
  .sh-hero-art {
    width: 170px;
    height: 170px;
    transform: scale(0.8);
  }
  .sh-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone */
@media (max-width: 700px) {
  .student-shell .home-page {
    padding-inline: 16px;
  }
  .sh-hello {
    margin-bottom: 16px;
  }
  .sh-hello-hi {
    font-size: 26px;
  }
  .sh-hello h1 {
    font-size: 44px;
  }
  .sh-hello-cheer {
    font-size: 14px;
  }
  .sh-streak-count strong {
    font-size: 54px;
  }
  .sh-flame {
    width: 46px;
    height: 46px;
  }
  .sh-week {
    justify-content: space-between;
    gap: 4px;
    width: 100%;
  }
  .sh-day-dot {
    width: 32px;
    height: 32px;
  }
  .sh-promos {
    margin-top: 26px;
  }
  .sh-promo-row {
    grid-auto-columns: 78%;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .sh-promo-row::-webkit-scrollbar {
    display: none;
  }
  .sh-grid--study {
    margin-top: 26px;
  }
  /* Phone hero: the emblem shrinks into the top-right corner */
  .sh-hero {
    display: block;
    min-height: 0;
    padding: 22px 20px 20px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 12%, #7d8cff66 0, transparent 34%),
      linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(135deg, #3a47b0 0%, var(--il-indigo) 45%, var(--il-indigo-deep) 100%);
  }
  .sh-hero-art {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 68px;
    height: 68px;
  }
  .sh-art-ring,
  .sh-art-chip,
  .sh-art-spark {
    display: none;
  }
  .sh-art-tile {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 20px;
    box-shadow:
      inset 0 -5px 0 #9fc414,
      inset 0 1px 0 #ffffffb3,
      0 14px 20px -8px #0b1040a6;
  }
  .sh-art-tile svg {
    width: 32px;
    height: 32px;
    margin-top: -3px;
  }
  .sh-kicker {
    max-width: calc(100% - 78px);
    margin-bottom: 14px;
    font-size: 12px;
  }
  .sh-hero h2 {
    max-width: calc(100% - 78px);
    font-size: clamp(28px, 8.4vw, 36px);
  }
  .sh-detail {
    font-size: 14px;
  }
  .sh-cta {
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
  .sh-grid {
    gap: 14px;
    margin-top: 18px;
  }
  .sh-card {
    padding: 16px;
    border-radius: 18px;
  }
  .sh-stop > a,
  .sh-stop.is-locked {
    gap: 12px;
    padding: 9px 8px;
  }
  .sh-stop + .sh-stop::before {
    left: 26px;
  }
  .sh-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 16px;
  }
  .sh-result .sh-card-head {
    grid-column: 1 / -1;
  }
  .sh-score {
    grid-row: span 2;
  }
  .sh-score strong {
    font-size: 58px;
  }
  .sh-score span {
    font-size: 22px;
  }
  .sh-result-lesson {
    margin: 0 0 8px;
  }
  .sh-section-head h2 {
    font-size: 24px;
  }
  .sh-subject-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .sh-subject-cover {
    flex-basis: 64px;
    height: 64px;
    border-radius: 14px;
  }
  .sh-subject-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  /* Floating bottom bar with a sliding indicator */
  .student-shell .bottom-nav {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    min-height: 66px;
    padding: 6px;
    gap: 0;
    border: 1px solid #ffffffb3;
    border-radius: 26px;
    background: #ffffffb8;
    box-shadow: 0 12px 32px #10132e26, inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
  }
  .student-shell .bottom-nav a {
    position: relative;
    z-index: 1;
    justify-content: center;
    gap: 4px;
    min-height: 54px;
    padding: 4px 2px;
    border-radius: 18px;
    color: var(--il-muted);
    font-size: 11px;
    font-weight: 500;
    transition: color 0.25s;
  }
  .student-shell .bottom-nav a span {
    font-size: 11px;
    overflow-wrap: normal;
  }
  .student-shell .bottom-nav a:active svg {
    transform: scale(0.84);
  }
  .student-shell .bottom-nav a svg {
    transition: transform 0.15s;
  }
  .student-shell .bottom-nav a.active {
    color: #fff;
    font-weight: 600;
  }
  .student-shell .bottom-nav a.active svg {
    color: var(--il-lime);
    animation: sh-tab-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .nav-indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / var(--count));
    border-radius: 18px;
    background: var(--il-indigo);
    box-shadow: 0 6px 14px #34409d47;
    transform: translateX(calc(var(--to) * 100%));
    animation: sh-nav-slide 0.46s cubic-bezier(0.32, 1.35, 0.5, 1);
  }
  .student-shell .main {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }
  .sh-enter-next {
    animation: sh-page-next 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .sh-enter-prev {
    animation: sh-page-prev 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
}
/* Liquid move: the pill stretches while travelling, then settles. */
@keyframes sh-nav-slide {
  from {
    transform: translateX(calc(var(--from) * 100%));
  }
  45% {
    transform: translateX(calc((var(--from) + var(--to)) * 50%)) scaleX(1.35) scaleY(0.88);
  }
}
@keyframes sh-tab-pop {
  0% {
    transform: translateY(3px) scale(0.7);
  }
  60% {
    transform: translateY(-3px) scale(1.15);
  }
  100% {
    transform: none;
  }
}
@keyframes sh-page-next {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}
@keyframes sh-page-prev {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-indicator,
  .sh-art-tile,
  .student-shell .bottom-nav a.active svg,
  .sh-enter-next,
  .sh-enter-prev {
    animation: none;
  }
  .sh-cta,
  .sh-cta svg,
  .student-shell .bottom-nav a svg {
    transition: none;
  }
}

/* Course covers and sections on the student side */
.course-page-cover { display: block; width: 100%; max-height: 260px; margin: 0 0 18px; border-radius: 22px; object-fit: cover; }
.course-entry-cover { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.sh-subject-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-section-student { margin-bottom: 22px; }
.course-section-student > h2 { margin: 0 0 10px; font-size: 18px; }

/* Nested course sections on the course page. */
.course-section-student .course-section-student { margin: 14px 0 0 14px; padding-left: 14px; border-left: 3px solid #d4ff3a; }
.course-section-student > h3 { margin: 0 0 10px; font-size: 16px; }
.course-section-student > h4 { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
/* Analysis / task lessons: lighter than stop lessons. */
.lesson-list-item.is-extra { border-style: dashed; }

/* Konspekt task on the lesson page. */
.lesson-task {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 21px;
  padding: 21px;
  border: 1px solid #dfe3ff;
  border-radius: 13px;
  background: linear-gradient(110deg, #f7f8ff, #eef0ff);
}
.lesson-task .tile-icon {
  flex: 0 0 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #34409d;
  color: #d4ff3a;
}
.lesson-task-body { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.lesson-task-body h3 { margin: 0; font-size: 15px; }
.lesson-task-body p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.lesson-task-body .passed-note, .lesson-task-body .lock-note { display: inline-flex; align-items: center; gap: 6px; }
.lesson-task-body .passed-note svg, .lesson-task-body .lock-note svg { width: 15px; height: 15px; }
.task-comment { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #dfe3ff; }
.task-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfe3ff;
  color: inherit;
}
.task-file svg { flex-shrink: 0; width: 18px; height: 18px; color: #34409d; }
.task-file span { display: grid; min-width: 0; }
.task-file strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-file small { color: var(--muted); font-size: 12px; }
.task-upload { position: relative; flex-shrink: 0; cursor: pointer; }
.task-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.task-upload:focus-within { outline: 3px solid #959ee0; outline-offset: 3px; }
.task-upload.is-busy { opacity: 0.6; pointer-events: none; }
@media (max-width: 640px) {
  .lesson-task { flex-wrap: wrap; }
  .task-upload { width: 100%; justify-content: center; }
}

/* Result review: wrong questions are marked, the key is not shown. */
.review-summary { margin: 18px 0 0; font-size: 14px; line-height: 1.5; }
.review-mark { margin-left: 8px; font-size: 12px; font-weight: 700; }
.review-mark.wrong { color: #c2462e; }
.review-mark.right { color: #198654; }
.review-item.is-wrong { border-color: #f0c5bb; background: #fff8f6; }
.review-item.is-wrong strong { color: #c2462e; }

/* Push news page: opened by tapping a notification. */
.news-page { min-height: 100vh; padding: 16px 16px 40px; background: linear-gradient(#f4f5ff, #fff); }
.news-top { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto 14px; }
.news-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid #dfe3ff; color: #34409d; }
.news-back svg { width: 20px; height: 20px; }
.news-card { max-width: 720px; margin: 0 auto; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(52, 64, 157, 0.12); }
.news-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #34409d; }
.news-image--empty { display: grid; place-items: center; color: #d4ff3a; background: linear-gradient(#ffffff14 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, #ffffff14 1px, transparent 1px) 0 0 / 22px 22px, #34409d; }
.news-image--empty svg { width: 56px; height: 56px; }
.news-body { display: grid; gap: 12px; padding: 22px 22px 26px; }
.news-tag { justify-self: start; padding: 6px 14px; border-radius: 8px; background: #d4ff3a; color: #1d2300; font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transform: rotate(-2deg); }
.news-body h1 { margin: 0; color: #10132e; font-size: clamp(24px, 6vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }
.news-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #6b7190; font-size: 13px; }
.news-date svg { width: 15px; height: 15px; }
.news-text p { margin: 0 0 10px; color: #2b2f52; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.news-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-top: 6px; border-radius: 16px; background: #d4ff3a; color: #1d2300; font-size: 17px; font-weight: 800; box-shadow: 0 6px 0 #a8cc1f; }
.news-cta svg { width: 20px; height: 20px; }
.news-cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #a8cc1f; }
.news-until, .news-expired { margin: 0; color: #6b7190; font-size: 13px; text-align: center; }
.news-expired { padding: 12px; border-radius: 12px; background: #fff4dc; color: #87530c; }
/* Admin push editor: news page fields. */
.push-news-fields { display: grid; gap: 6px; margin: 14px 0 8px; padding: 14px; border: 1px solid #dfe3ff; border-radius: 14px; }
.push-news-fields legend { padding: 0 6px; font-weight: 700; }
.push-image-field { display: flex; gap: 12px; align-items: flex-start; }
.push-image-preview { flex: 0 0 120px; width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #eef0fb; }
.push-news-link { margin: 6px 0; }