.after-school-practice-page {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: #f8f6ef;
  color: #1f3142;
  font-family: "Nunito", sans-serif;
}

.after-school-practice-page * { box-sizing: border-box; }

.practice-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 8px max(24px, calc((100% - 1180px) / 2));
  background: linear-gradient(90deg, #ffe18a, #d7f5e8, #d9f1ff);
  font-size: .82rem;
  font-weight: 900;
}

.practice-topbar a { color: #16453e; }

.practice-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 86px;
  padding: 12px max(24px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid rgba(31,49,66,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}

.practice-header .brand { text-decoration: none; }
.practice-header .brand img { width: 58px; height: 58px; }
.practice-header nav { display: flex; gap: 8px; }
.practice-header nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: #405161;
  font-weight: 900;
  text-decoration: none;
}
.practice-header nav a:hover, .practice-header nav a.is-active { color: #08786c; background: #e2f9f1; }

.practice-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 80px; }
.practice-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px,5vw,58px);
  border-radius: 32px;
  background: radial-gradient(circle at 92% 10%, rgba(255,216,111,.7), transparent 28%), linear-gradient(135deg,#fff9e7,#eaf9f5 62%,#e7f5ff);
}
.practice-eyebrow { margin: 0 0 8px; color: #078d7d; font-size: .78rem; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.practice-intro h1 { max-width: 780px; margin: 0; font-family: "Baloo 2",sans-serif; font-size: clamp(2.35rem,5.4vw,5.1rem); line-height: .95; letter-spacing: -.035em; }
.practice-intro p:not(.practice-eyebrow) { max-width: 680px; margin: 16px 0 0; color: #5c6f82; font-size: clamp(1rem,1.7vw,1.15rem); line-height: 1.5; }
.practice-time { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 18px 46px rgba(31,49,66,.1); }
.practice-time strong { color: #078d7d; font-family: "Baloo 2"; font-size: 3.6rem; line-height: .8; }
.practice-time span { font-weight: 1000; line-height: 1.05; text-transform: uppercase; }

.practice-picker, .practice-session, .practice-result, .practice-shortcuts { margin-top: 18px; border: 1px solid rgba(31,49,66,.08); border-radius: 28px; background: #fff; box-shadow: 0 20px 52px rgba(31,49,66,.08); }
.practice-picker { padding: clamp(20px,4vw,34px); }
.practice-picker-heading { display: flex; align-items: center; gap: 14px; }
.practice-picker-heading > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: #d7f5e8; color: #08786c; font-weight: 1000; }
.practice-picker h2, .practice-shortcuts h2 { margin: 0; font-family: "Baloo 2"; font-size: clamp(1.65rem,3vw,2.35rem); line-height: 1; }
.practice-picker-heading p { margin: 3px 0 0; color: #6b7c8c; }
.practice-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.practice-fields label { display: grid; gap: 7px; color: #405161; font-size: .78rem; font-weight: 1000; }
.practice-fields select { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid rgba(31,49,66,.12); border-radius: 15px; background: #f8fbfa; color: #1f3142; font-weight: 900; }
.practice-start, .practice-next, .practice-result button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 1000; }
.practice-start { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 14px; background: linear-gradient(90deg,#ffdb6f,#bfeeda); color: #16453e; font-size: 1rem; }

.practice-session { padding: clamp(20px,4vw,34px); }
.practice-session-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.practice-session-head span { color: #078d7d; font-size: .76rem; font-weight: 1000; text-transform: uppercase; }
.practice-session-head h2 { margin: 3px 0 0; font-family: "Baloo 2"; font-size: 2rem; line-height: 1; }
.practice-session-head > strong { color: #657789; font-size: .82rem; }
.practice-progress { height: 8px; margin: 18px 0; overflow: hidden; border-radius: 999px; background: #eaf0f3; }
.practice-progress i { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#12a793,#ffcf55); transition: width .25s ease; }
.practice-question-card { padding: clamp(20px,4vw,32px); border-radius: 22px; background: linear-gradient(145deg,#f5fbf9,#fffaf0); }
.practice-question-card small { color: #6c7b89; font-weight: 900; }
.practice-question-card h3 { margin: 8px 0 18px; font-family: "Baloo 2"; font-size: clamp(1.45rem,3vw,2.15rem); line-height: 1.15; }
.practice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.practice-options button { min-height: 52px; padding: 10px 14px; border: 1px solid rgba(31,49,66,.1); border-radius: 14px; background: #fff; color: #405161; cursor: pointer; font-weight: 900; text-align: left; }
.practice-options button:hover, .practice-options button.is-selected { border-color: #0ca48f; color: #08786c; background: #e3f9f2; }
.practice-options button.is-correct { background: #d8f6e4; color: #146a3c; }
.practice-options button.is-wrong { background: #ffe7df; color: #a4452f; }
.practice-feedback { margin: 14px 0 0; padding: 11px 13px; border-radius: 12px; background: #fff; font-weight: 900; }
.practice-next { width: 100%; margin-top: 14px; background: #1f3142; color: #fff; }
.practice-next:disabled { cursor: not-allowed; opacity: .42; }

.practice-result { padding: clamp(26px,5vw,50px); text-align: center; background: linear-gradient(135deg,#fff6d8,#e5faf3); }
.practice-result > span { color: #078d7d; font-weight: 1000; text-transform: uppercase; }
.practice-result > strong { display: block; margin-top: 8px; font-family: "Baloo 2"; font-size: clamp(4rem,9vw,7rem); line-height: .9; }
.practice-result h2 { margin: 10px 0 0; font-family: "Baloo 2"; font-size: 2rem; }
.practice-result p { color: #5d7082; }
.practice-result div { display: flex; justify-content: center; gap: 10px; }
.practice-result button:first-child { background: #1f3142; color: #fff; }
.practice-result button:last-child { background: #fff; color: #1f3142; }

.practice-shortcuts { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; padding: clamp(20px,4vw,32px); }
.practice-shortcuts > div { padding: 10px; }
.practice-shortcuts > a { display: grid; gap: 4px; min-height: 150px; align-content: end; padding: 20px; border-radius: 20px; color: #1f3142; text-decoration: none; }
.practice-shortcuts > a:nth-of-type(1) { background: linear-gradient(145deg,#e8f7ff,#dff6ed); }
.practice-shortcuts > a:nth-of-type(2) { background: linear-gradient(145deg,#fff2cb,#ffe8e1); }
.practice-shortcuts a span, .practice-shortcuts a small { color: #657789; font-weight: 800; }
.practice-shortcuts a strong { font-family: "Baloo 2"; font-size: 1.45rem; }
.practice-mobile-nav { display: none; }

@media (max-width: 720px) {
  .practice-topbar { justify-content: center; min-height: 34px; padding: 7px 12px; font-size: .68rem; }
  .practice-topbar a { display: none; }
  .practice-header { position: static; min-height: 72px; padding: 9px 14px; }
  .practice-header .brand img { width: 48px; height: 48px; }
  .practice-header nav { display: none; }
  .practice-main { width: 100%; padding: 0 10px 92px; }
  .practice-intro { grid-template-columns: 1fr; gap: 16px; padding: 25px 17px; border-radius: 0 0 24px 24px; }
  .practice-intro h1 { font-size: clamp(2.2rem,11vw,3.25rem); }
  .practice-time { justify-self: start; padding: 12px 16px; }
  .practice-time strong { font-size: 2.7rem; }
  .practice-picker, .practice-session, .practice-result, .practice-shortcuts { border-radius: 21px; }
  .practice-fields { grid-template-columns: 1fr; }
  .practice-options { grid-template-columns: 1fr; }
  .practice-session-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .practice-result div { flex-direction: column; }
  .practice-shortcuts { grid-template-columns: 1fr; }
  .practice-shortcuts > a { min-height: 112px; }
  .practice-mobile-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 7px max(8px,env(safe-area-inset-bottom)); border-top: 1px solid rgba(31,49,66,.1); background: rgba(255,255,255,.96); box-shadow: 0 -10px 28px rgba(31,49,66,.1); }
  .practice-mobile-nav a { padding: 9px 2px; border-radius: 12px; color: #657789; font-size: .68rem; font-weight: 1000; text-align: center; text-decoration: none; }
  .practice-mobile-nav a.is-active { color: #08786c; background: #e2f9f1;}
}