.lesson-clock {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid #c6dfd0;
  border-radius: 14px;
  background: #eff8f2;
  color: #235638;
  text-align: left;
}
.lesson-clock-copy { display: grid; gap: 5px; min-width: 0; }
.lesson-clock-copy > span { font-size: .95rem; font-weight: 750; }
.lesson-clock-copy > small { color: #536b5c; font-size: .8rem; line-height: 1.4; }
.lesson-clock-value { flex-shrink: 0; font-size: clamp(1.65rem, 5vw, 2.1rem); font-weight: 780; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.025em; white-space: nowrap; }
.lesson-clock--soon { border-color: #e8c98b; background: #fff7e7; color: #805412; }
.lesson-clock--elapsed { border-color: #ddc8c5; background: #faf0ee; color: #8a3d32; }
.student-login-card > .lesson-clock { margin: 0 0 24px; max-width: 450px; }
.student-shell > .lesson-clock { margin: -24px 0 28px; }
@media (max-width: 480px) {
  .lesson-clock { gap: 12px; padding: 14px 16px; }
  .lesson-clock-copy > span { font-size: .87rem; }
  .lesson-clock-copy > small { font-size: .73rem; }
}