.book-course-bar {
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 14px 16px;
  border: 1px solid #b9ded8;
  border-radius: 12px;
  background: linear-gradient(135deg, #ecfdf9, #ffffff 58%, #f0f7ff);
  box-shadow: 0 10px 24px rgba(15, 118, 110, .08);
}

.book-course-head,
.book-course-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.book-course-kicker {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-course-title {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 900;
}

.book-course-count {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.book-course-progress {
  height: 8px;
  margin: 11px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #dce9e7;
}

.book-course-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0f766e;
  transition: width .25s ease;
}

.book-course-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.book-course-actions a,
.book-course-actions button,
.book-course-open {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #17324d;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.book-course-actions .primary {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

.book-course-open {
  display: block;
  width: min(760px, 100%);
  margin: 0 auto 14px;
  border-color: #99cbc4;
  color: #0b5d57;
}

.book-course-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .25);
}

.book-course-dialog::backdrop { background: rgba(15, 23, 42, .58); }
.book-course-dialog-inner { padding: 22px; overflow: auto; max-height: calc(100vh - 40px); }
.book-course-dialog header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.book-course-dialog h2 { margin: 2px 0 6px; font-size: 24px; }
.book-course-dialog p { margin: 0; color: #64748b; line-height: 1.55; }
.book-course-close { border: 0; background: #eef2f7; border-radius: 999px; width: 38px; height: 38px; cursor: pointer; font-size: 20px; }
.book-volume { margin-top: 22px; }
.book-volume h3 { margin: 0 0 9px; font-size: 16px; }
.book-lessons { display: grid; grid-template-columns: repeat(10, minmax(54px, 1fr)); gap: 7px; }
.book-lesson { padding: 8px 5px; border: 1px solid #dbe3ec; border-radius: 8px; color: #334155; text-align: center; text-decoration: none; font-size: 12px; font-weight: 800; background: #fff; }
.book-lesson.done { border-color: #78bfae; background: #e8faf5; color: #076558; }
.book-lesson.current { outline: 2px solid #0f766e; outline-offset: 1px; }

@media (max-width: 640px) {
  .book-course-head { align-items: flex-start; }
  .book-course-count { white-space: normal; text-align: right; }
  .book-lessons { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
}