:root {
  --ink: #1a2d3d;
  --navy: #0f3460;
  --blue: #1a5db0;
  --line: rgba(150, 195, 230, 0.55);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #e8f4fd 0%, #ddeefa 40%, #eef6ff 100%);
}

header {
  padding: 14px 24px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 100%);
  box-shadow: 0 2px 16px rgba(15, 52, 96, 0.28);
}

h1 {
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

main {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "left preview" "clear preview" "list preview";
  gap: 12px;
  align-items: start;
  min-height: calc(100vh - 70px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px;
}

.panel {
  min-height: 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(180, 210, 240, 0.45);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 52, 96, 0.08), 0 1px 4px rgba(15, 52, 96, 0.06);
  backdrop-filter: blur(12px);
}

.panel h2 {
  margin: 0 0 10px;
  color: #7aa3c2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hidden { display: none !important; }

#leftStack {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background: rgba(249, 253, 255, 0.82);
  border: 1px solid #bdd6e6;
  border-radius: 16px;
}

#leftStack .panel {
  min-height: 0;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#leftStack .panel + .panel { border-top: 1px solid rgba(150, 195, 230, 0.4); }
#listPanel { grid-area: list; }

#previewPanel {
  grid-area: preview;
  position: sticky;
  top: 12px;
  align-self: stretch;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

#previewPanel > h2 { display: none; }

.chip-row,
.topic-group-pills,
.student-headline,
.pill-row,
#clearFilterBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#noteChipRow {
  flex-wrap: nowrap;
  max-height: none;
  padding-bottom: 4px;
  overflow-x: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #1a3d5c;
  font: inherit;
  font-size: 0.82rem;
}

button.pill { cursor: pointer; }

.note-chip {
  flex: 0 0 auto;
  padding: 5px 13px;
  font-weight: 500;
}

.note-chip:hover { background: rgba(220, 240, 255, 0.85); border-color: #7ab8d9; }
.note-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

.student-control-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.student-control-row + .student-control-row { margin-top: 10px; }

.student-control-label {
  color: #557a96;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.student-search-row { display: flex; align-items: center; gap: 8px; }

#filterInput,
#maxPageInput {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  color: #1a3d5c;
  font: inherit;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(150, 195, 230, 0.7);
  border-radius: 999px;
}

#filterInput:focus,
#maxPageInput:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 93, 176, 0.18);
}

.filter-toggle {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  color: #164b78;
  font: 600 0.82rem "Inter", sans-serif;
  background: rgba(225, 241, 253, 0.9);
  border: 1px solid rgba(120, 175, 215, 0.7);
  border-radius: 999px;
  cursor: pointer;
}

.filter-toggle:hover,
.filter-toggle.active { background: #d3eaff; border-color: var(--blue); }

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #fff;
  font-size: 0.7rem;
  background: var(--blue);
  border-radius: 999px;
}

#clearFilterBar {
  grid-area: clear;
  min-height: 0;
  padding: 0 4px;
}

#clearFilterBar:not(.has-filters) { display: none; }

.filter-clear-btn {
  padding: 3px 11px;
  color: #9b2335;
  font: 600 0.73rem "Inter", sans-serif;
  background: rgba(253, 232, 235, 0.86);
  border: 1px solid rgba(240, 160, 170, 0.7);
  border-radius: 999px;
  cursor: pointer;
}

#questionList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 174px;
  overflow: auto;
}

.question-row { display: flex; }

.question-btn {
  flex: 1;
  min-height: 36px;
  padding: 7px 12px;
  color: #1a3d5c;
  font: 500 0.84rem "Inter", sans-serif;
  text-align: left;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(170, 205, 230, 0.5);
  border-radius: 10px;
  cursor: pointer;
}

.question-btn:hover { background: rgba(210, 235, 255, 0.8); border-color: #90c0de; }

.question-btn.active {
  padding-left: 10px;
  color: var(--navy);
  font-weight: 600;
  background: rgba(219, 237, 255, 0.92);
  border-color: var(--blue);
  border-left: 4px solid var(--blue);
  outline: none;
}

#topicPanel {
  position: fixed;
  z-index: 30;
  top: 76px;
  left: min(324px, calc(100vw - 536px));
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  box-shadow: 0 18px 60px rgba(15, 52, 96, 0.24), 0 4px 16px rgba(15, 52, 96, 0.12);
}

.topic-panel-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.topic-panel-header h2 { margin-bottom: 3px; color: #315f82; }
.topic-panel-header p { margin: 0; color: #718da3; font-size: 0.8rem; }

.topic-panel-close {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #315f82;
  background: #edf6fc;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.topic-panel-label,
.topic-group-label {
  color: #557a96;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topic-panel-label { margin-bottom: 8px; }
.topic-group { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.topic-group-label { flex: 0 0 90px; padding-top: 5px; color: #7a9ab0; }
.topic-group-pills { flex: 1; gap: 5px; }

.topic-pill { padding: 4px 11px; font-size: 0.78rem; font-weight: 500; }
.topic-pill:hover { background: rgba(210, 235, 255, 0.85); border-color: #80b4d4; }
.topic-pill.active { color: #fff; font-weight: 600; background: var(--blue); border-color: var(--blue); }

.student-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(219, 237, 255, 0.75), rgba(235, 247, 255, 0.85));
  border: 1px solid rgba(160, 205, 240, 0.5);
  border-radius: 14px;
}

.pill-label {
  padding-top: 5px;
  color: #7aa3c2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.id-pill { color: #fff; font-weight: 600; background: var(--navy); border-color: var(--navy); }
.set-pill { background: rgba(220, 240, 255, 0.6); }
.page-pill { color: #0d5c38; font-weight: 600; background: #d4f5e8; border-color: #4dcfa1; }
.tag-pill { color: #6b4a00; font-weight: 500; background: #fef7e0; border-color: #e8c050; }
.empty-pill { color: #667; background: #f6f6f6; }

.video-details { margin-top: 6px; }
.video-summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.video-summary::-webkit-details-marker { display: none; }
.video-summary .pill-label::before { content: "▶"; display: inline-block; margin-right: 4px; font-size: 0.6rem; }
.video-details[open] .video-summary .pill-label::before { transform: rotate(90deg); }
.video-count { color: #666; font-size: 0.72rem; font-weight: 600; }

.video-link-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.video-link-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #7a1515;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255, 238, 238, 0.7);
  border: 1px solid rgba(220, 160, 160, 0.45);
  border-radius: 10px;
}

.video-link-list a::before { content: "▶"; color: #fff; padding: 3px 7px; font-size: 0.65rem; background: #c00; border-radius: 5px; }
.video-link-list a:hover { background: rgba(255, 218, 218, 0.9); }

.student-question {
  width: min(100%, 760px);
  min-height: 400px;
  margin: 0 auto;
  padding: 28px 32px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 28px rgba(15, 52, 96, 0.1), 0 1px 6px rgba(15, 52, 96, 0.07);
}

.student-question .prompt { margin-bottom: 12px; }
.student-question ol { margin-top: 8px; padding-left: 20px; }
.student-question li { margin: 6px 0; }
.student-inline-figures { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 12px; }
.student-inline-figures.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-inline-figure { margin: 0; }
.student-inline-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.student-inline-figures:not(.two-up) img { width: min(100%, 760px); max-height: 520px; margin: 0 auto; object-fit: contain; }

#questionList::-webkit-scrollbar,
#noteChipRow::-webkit-scrollbar,
.topic-rail::-webkit-scrollbar { width: 5px; height: 5px; }

#questionList::-webkit-scrollbar-thumb,
#noteChipRow::-webkit-scrollbar-thumb,
.topic-rail::-webkit-scrollbar-thumb { background: rgba(120, 175, 215, 0.55); border-radius: 999px; }

@media (max-width: 1200px) {
  #topicPanel { left: 16px; }
}

@media (max-width: 760px) {
  main {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "clear" "list" "preview";
  }
  #previewPanel { position: static; max-height: none; }
  #topicPanel { inset: 70px 12px auto; width: auto; max-height: calc(100vh - 84px); }
  .student-question { padding: 20px 18px; }
  .student-inline-figures.two-up { grid-template-columns: 1fr; }
}