.filter-panel {
  margin: 0 4px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: #f6f8fc;
  color: var(--blue-ink);
}

.filter-toggle span {
  color: var(--muted);
  font-size: 12px;
}

.filter-controls {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.filter-controls[hidden] {
  display: none;
}

.filter-group > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.filter-chip {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #ced9e9;
  background: #fff;
  color: #344054;
  font-size: 11px;
  line-height: 1.2;
}

.filter-chip.active {
  border-color: var(--blue);
  background: #e9f2ff;
  color: var(--blue-ink);
}

.tab-copy {
  min-width: 0;
}

.tab-meta {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.empty-filter {
  padding: 16px 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.brand-lockup {
  display: block;
  width: 264px;
  height: 68px;
  border: 0;
  background: #fff;
  clip-path: none;
  text-decoration: none;
}

.brand-lockup img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-button { display:inline-flex; align-items:center; gap:7px; }
.guide-button > span { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--yellow); color:var(--blue-ink); font-weight:900; }
.guide-button .guide-label-full { width:auto; height:auto; border-radius:0; background:transparent; color:inherit; }
.guide-button .guide-label-mobile,
.mobile-lesson-toggle { display:none; }
.student-guide { width:min(760px,calc(100% - 24px)); max-height:min(760px,calc(100vh - 24px)); padding:0; overflow:auto; border:1px solid #b8cae1; border-top:8px solid var(--blue); border-radius:8px; background:#fff; color:var(--ink); box-shadow:0 24px 70px rgba(15,35,65,.3); }
.student-guide::backdrop { background:rgba(10,26,50,.58); }
.student-guide-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:20px 22px 16px; border-bottom:1px solid var(--line); background:#fff; }
.student-guide-head h2 { margin:4px 0 0; color:var(--blue-ink); font-size:28px; }
.guide-volume { color:var(--red); font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.guide-close { width:42px; min-width:42px; min-height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:#f2f5f9; color:var(--blue-ink); font-size:25px; line-height:1; }
.student-guide > section { padding:18px 22px; border-bottom:1px solid var(--line); }
.student-guide > section:last-child { border-bottom:0; }
.student-guide h3 { margin:0 0 8px; color:var(--blue); font-size:17px; }
.student-guide p { margin:0; color:#33435b; font-size:14px; font-weight:700; line-height:1.55; }
.student-guide .it-copy { margin-top:7px; padding:8px 10px; border-left:4px solid #9badc4; background:#f0f3f7; color:#59677a; font-style:italic; }
.guide-intro { background:#f7fbff; }
.guide-audience { background:#f2fbf6; }
.guide-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:guide-step; }
.guide-steps li { counter-increment:guide-step; display:grid; grid-template-columns:34px minmax(0,1fr); gap:3px 10px; align-items:start; }
.guide-steps li::before { content:counter(guide-step); grid-row:1 / 4; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--yellow); color:var(--blue-ink); font-size:12px; font-weight:900; }
.guide-steps strong,.guide-steps span { grid-column:2; }
.guide-steps strong { color:var(--blue-ink); font-size:14px; }
.guide-steps span { color:#45546a; font-size:13px; font-weight:700; line-height:1.45; }
.guide-steps .it-copy { margin-top:3px; }

.lesson-overview {
  border-top: 8px solid var(--blue);
  background: #fff;
}

.lesson-overview h2 {
  letter-spacing: 0;
}

.lesson-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.lesson-tags span {
  padding: 6px 9px;
  border-left: 4px solid var(--green);
  background: #eefaf4;
  color: #17623d;
  font-size: 12px;
  font-weight: 800;
}

.lesson-section summary {
  grid-template-columns: 104px minmax(0, 1fr) 30px;
}

.section-art {
  width: 96px;
  height: 76px;
  clip-path: none;
  background: #fff;
}

.section-art img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: none;
}

.section-art.semantic-warning,
.section-art.semantic-error,
.section-art.semantic-compare {
  width: 116px;
}

.section-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 22px;
  border: 2px solid #b8cae1;
  border-radius: 50%;
  background: #f4f7fb;
  color: var(--blue-ink);
  font-size: 14px;
  font-weight: 900;
}

.section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.section-translation {
  margin-top: 4px;
  color: #5f6f82;
  font-style: italic;
  font-weight: 700;
}

.lesson-section-body {
  padding: 24px 28px 28px;
  background: #fff;
}

.source-line {
  max-width: 1050px;
  letter-spacing: 0;
}

.source-line.en-line {
  color: #18253a;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.65;
}

.source-line.translation-line,
.inline-translation {
  color: #5e6d81;
  font-style: italic;
  font-weight: 550;
}

.source-line.translation-line {
  margin: 6px 0 14px;
  padding: 10px 13px;
  border-left: 4px solid #91a6be;
  background: #f3f6f9;
  font-size: 15px;
  line-height: 1.55;
}

.inline-translation {
  display: block;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-left: 4px solid #91a6be;
  background: #f3f6f9;
  font-size: 15px;
  line-height: 1.5;
}

.source-line.pattern-line {
  margin: 12px 0;
  padding: 13px 15px;
  border: 2px solid #a9c9ef;
  border-radius: 6px;
  background: #edf6fd;
  color: #083f88;
  font-weight: 900;
}

.source-line.example-line {
  margin-top: 14px;
  color: #b63d1d;
  font-weight: 900;
}

.source-line.error-line {
  color: #a51d2d;
  font-weight: 850;
}

.source-line.correct-line {
  color: #087847;
  font-weight: 850;
}

.english-only .it-copy {
  display: none !important;
}

@media (max-width: 760px) {
  .brand-lockup { width:230px; height:58px; }
  .student-guide-head { padding:15px; }
  .student-guide > section { padding:15px; }
  .student-guide-head h2 { font-size:23px; }
  .filter-panel {
    margin: 10px 0 14px;
  }

  .lesson-section summary {
    grid-template-columns: 72px minmax(0, 1fr) 26px;
    gap: 10px;
  }

  .section-art {
    width: 68px;
    height: 58px;
  }

  .section-art.semantic-warning,
  .section-art.semantic-error,
  .section-art.semantic-compare {
    width: 72px;
  }

  .section-marker {
    width: 34px;
    height: 34px;
    margin-left: 17px;
  }

  .lesson-section-body {
    padding: 18px 16px 22px;
  }

  .source-line.en-line {
    font-size: 15px;
    line-height: 1.55;
  }

  .source-line.translation-line,
  .inline-translation {
    font-size: 13px;
  }

  .lesson-overview h2 {
    font-size: 30px;
  }
}

@media (max-width: 620px) {
  .sidebar {
    padding: 10px 10px 8px;
  }

  .brand-block {
    padding: 0 2px 8px;
    text-align: center;
  }

  .brand-lockup {
    width: min(270px, 88vw);
    height: 72px;
    margin: 0 auto 2px;
  }

  .brand-sub {
    margin-top: 0;
    text-align: center;
  }

  .mobile-lesson-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    width: 100%;
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #b9cff2;
    border-radius: 8px;
    background: #edf4ff;
    color: var(--blue-ink);
    text-align: left;
  }

  .mobile-lesson-position {
    color: #5c6f8a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-lesson-title {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-label {
    grid-column: 2;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 900;
  }

  .mobile-menu-label::after {
    content: "⌄";
    font-size: 16px;
    line-height: 1;
    transition: transform .2s ease;
  }

  .mobile-nav-open .mobile-menu-label::after {
    transform: rotate(180deg);
  }

  .sidebar > .overall,
  .sidebar > .filter-panel,
  .sidebar > .lesson-list {
    display: none;
  }

  .sidebar.mobile-nav-open > .overall,
  .sidebar.mobile-nav-open > .filter-panel {
    display: block;
  }

  .sidebar.mobile-nav-open > .lesson-list {
    display: flex;
  }

  .sidebar.mobile-nav-open > .overall {
    margin: 8px 0;
  }

  .sidebar.mobile-nav-open > .filter-panel {
    margin: 8px 0;
  }

  .sidebar.mobile-nav-open > .lesson-list {
    gap: 8px;
    margin: 0 -2px;
    padding: 2px 2px 8px;
    scrollbar-color: #99b6df #edf3fb;
    scrollbar-width: thin;
  }

  .sidebar.mobile-nav-open .lesson-tab {
    min-width: min(78vw, 292px);
    min-height: 58px;
    padding: 8px 10px;
  }

  .lesson-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .lesson-controls .action-group:first-child {
    display: flex;
    min-width: 0;
    gap: 6px;
  }

  .lesson-controls .action-group:last-child {
    display: flex;
    width: auto;
    gap: 6px;
  }

  .lesson-controls .guide-button,
  .lesson-controls .language-switch,
  .lesson-controls #prevBtn,
  .lesson-controls #nextBtn {
    width: auto;
    min-height: 40px;
  }

  .lesson-controls .guide-button {
    flex: 1;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .guide-label-full { display: none !important; }
  .guide-button .guide-label-mobile {
    display: inline;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
  }

  .lesson-controls .language-switch {
    flex: 0 0 auto;
    padding-inline: 8px;
  }

  .lesson-controls #prevBtn,
  .lesson-controls #nextBtn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0;
  }

  .lesson-controls #prevBtn::before,
  .lesson-controls #nextBtn::before {
    font-size: 20px;
    line-height: 1;
  }

  .lesson-controls #prevBtn::before { content: "←"; }
  .lesson-controls #nextBtn::before { content: "→"; }
}