:root {
  color: #182433;
  background: #f7f8fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f7f8fa; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100%, 680px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom)); }
.app-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 6px; color: #697586; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.connection-state { flex: 0 0 auto; margin-top: 4px; color: #697586; font-size: 12px; }
.connection-state[data-state="ready"] { color: #16803c; }
.connection-state[data-state="error"] { color: #c7374c; }

.empty-state, .player-panel, .library-item { border: 1px solid #dde3ea; border-radius: 8px; background: #fff; }
.empty-state { padding: 30px 20px; text-align: center; color: #697586; }
.empty-state strong { display: block; color: #182433; }
.empty-state p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.library { display: grid; gap: 10px; }
.library-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; width: 100%; padding: 14px; text-align: left; color: inherit; }
.library-item[data-active="true"] { border-color: #2e75db; box-shadow: inset 3px 0 #2e75db; }
.library-course { margin-bottom: 5px; color: #697586; font-size: 12px; }
.library-title { overflow: hidden; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.library-duration { align-self: center; color: #697586; font-size: 12px; }

.player-panel { margin-top: 18px; padding: 18px; }
.now-playing { display: flex; gap: 12px; align-items: center; }
.course-mark { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 8px; color: #fff; background: #2374d8; font-weight: 750; }
.course-title { margin: 0 0 3px; color: #697586; font-size: 12px; }
h2 { margin: 0; overflow: hidden; font-size: 17px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.seek-slider { width: 100%; margin: 24px 0 6px; accent-color: #2374d8; }
.time-row { display: flex; justify-content: space-between; color: #697586; font-size: 12px; font-variant-numeric: tabular-nums; }
.controls { display: grid; grid-template-columns: 48px 48px minmax(84px, 1fr) 48px 48px; gap: 10px; align-items: center; margin: 18px 0; }
.speed-button, .round-button, .source-button, .state-button, select { border: 1px solid #d5dce5; border-radius: 6px; color: #3c4b5e; background: #fff; }
.speed-button, .round-button, .source-button { height: 42px; padding: 0; font-size: 13px; }
.play-button { height: 44px; border: 0; border-radius: 6px; color: #fff; background: #2374d8; font-weight: 650; }
.play-button:disabled { opacity: .55; cursor: default; }
.learning-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.state-button, select { min-height: 38px; padding: 0 10px; }
.state-button[aria-pressed="true"] { color: #fff; border-color: #c7374c; background: #c7374c; }
.note-composer { display: grid; gap: 8px; margin-top: 24px; }
.note-composer label { font-size: 13px; font-weight: 650; }
textarea { width: 100%; resize: vertical; border: 1px solid #cdd5df; border-radius: 6px; padding: 10px; color: #182433; background: #fff; }
.save-note-button { justify-self: end; border: 1px solid #bcd4f3; border-radius: 6px; padding: 8px 12px; color: #1e65c0; background: #edf5ff; }
.note-history { display: grid; gap: 9px; margin-top: 14px; }
.note-entry { border-top: 1px solid #edf0f3; padding-top: 10px; }
.note-entry time { display: block; margin-bottom: 4px; color: #8490a0; font-size: 11px; }
.note-entry p { margin: 0; white-space: pre-wrap; line-height: 1.55; }

@media (max-width: 410px) {
  .app-shell { padding-inline: 13px; }
  .player-panel { padding: 14px; }
  .controls { grid-template-columns: 42px 42px minmax(72px, 1fr) 42px 42px; gap: 7px; }
}