.study-flow-bar { display:grid; grid-template-columns:auto minmax(170px,1fr) auto; gap:14px; align-items:center; margin:-4px 0 18px; padding:12px 0 15px; border-bottom:1px solid var(--line); }
.study-flow-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.study-flow-link, .study-bookmark { min-height:38px; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#28415f; text-decoration:none; font-size:10px; font-weight:850; display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.study-flow-link:hover, .study-bookmark:hover { border-color:#aebed2; background:#f8fafc; }
.study-flow-link.primary { border-color:var(--blue); background:var(--blue); color:#fff; }
.study-bookmark.active { border-color:#d6ad42; background:#fff8df; color:#795700; }
.study-flow-edge-label, .session-end-label { color:var(--muted); font-size:9px; font-weight:800; white-space:nowrap; }
.study-flow-edge-label.final { color:#56677d; }
.session-end-label { padding:0 2px; color:#567088; }
.study-session-progress { min-width:0; }
.study-session-progress > div:first-child { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.study-session-progress strong { font-size:10px; color:#304760; }
.study-session-progress span { font-size:9px; color:var(--muted); }
.study-progress-track { height:5px; margin-top:7px; border-radius:999px; overflow:hidden; background:#e8eef5; }
.study-progress-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--teal)); }
.study-session-status { padding:0 0 14px; border-bottom:1px solid var(--line); }
.study-session-status strong { display:block; margin-top:5px; font-size:12px; color:#203b5b; }
.study-session-status small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.explanation-jump-nav { position:sticky; top:78px; z-index:8; display:flex; gap:7px; overflow:auto; margin:13px 0 20px; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); scrollbar-width:none; }
.explanation-jump-nav button { min-height:32px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:#4d6178; font-size:9px; font-weight:850; display:inline-flex; align-items:center; white-space:nowrap; }
.explanation-jump-nav button:hover { background:#edf4fb; color:var(--blue); }
#explanation-summary, #key-concept, #option-rationale, #evidence, #study-notes { scroll-margin-top:130px; }

@media (max-width: 1199px) {
  .study-flow-bar { grid-template-columns:auto minmax(130px,1fr) auto; }
  .study-flow-actions { justify-content:flex-end; }
}

@media (max-width: 900px) {
  .study-session-status { grid-column:1 / -1; }
}

@media (max-width: 767px) {
  .study-flow-bar { grid-template-columns:auto minmax(72px,1fr) auto; gap:7px; margin:-5px 0 14px; padding:8px 0 11px; }
  .study-flow-link, .study-bookmark { min-height:34px; border-radius:9px; font-size:9px; }
  .study-flow-bar > .study-flow-edge-label { justify-self:start; }
  .study-session-progress { min-width:72px; }
  .study-session-progress > div:first-child { display:block; text-align:center; }
  .study-session-progress strong { font-size:9px; }
  .study-session-progress > div:first-child span { display:none; }
  .study-progress-track { height:4px; margin-top:5px; }
  .study-flow-actions { gap:5px; }
  .study-bookmark span:last-child, .retry-link, .session-end-label { display:none; }
  .study-bookmark { width:34px; padding:0; font-size:15px; }
  .study-flow-actions .study-flow-link.primary { padding:0 9px; }
  .study-flow-edge-label.final { max-width:64px; overflow:hidden; text-overflow:ellipsis; }
  .explanation-jump-nav { top:68px; margin:10px -4px 17px; padding:6px; gap:4px; }
  .explanation-jump-nav button { min-height:30px; padding:0 8px; font-size:8px; }
}

@media (max-width: 380px) {
  .study-flow-bar { grid-template-columns:auto minmax(62px,1fr) auto; gap:5px; }
  .study-flow-link.primary { padding:0 7px; }
  .study-flow-edge-label.final { display:none; }
}