/* Soft lilac, peach and periwinkle. Presentation only; keep the study frame intact. */
:root {
  --paper: #f7f3ff;
  --white: #fff;
  --ink: #302449;
  --muted: #71647f;
  --green: #6c49b6;
  --mint: #eee5fc;
  --lime: #e0d2f6;
  --line: #e5dbf3;
  --sand: #fff0e7;
  --orange: #bd503b;
  --violet: #6c49b6;
  --violet-dark: #563397;
  --violet-soft: #eee5fc;
  --peach: #fff0e7;
  --coral: #bd503b;
  --coral-dark: #a6402e;
  --periwinkle: #e9edff;
  --surface-shadow: 0 2px 10px #5e388308;
  accent-color: var(--violet);
}

body { background: var(--paper); }
::selection { background: #e1d2fa; color: var(--ink); }
.sidebar {
  background: linear-gradient(160deg, #f2eaff, #ede5fa);
  border-color: #dfd1f2;
}
.brand-mark { background: linear-gradient(140deg, #5c35b0, #8058cf); color: #fff; }
.brand-name { color: #382355; }
.brand small, .nav-label { color: #716080; }
.nav button { color: #65547a; }
.nav button.active { background: linear-gradient(110deg, #6540b6, #7a53c4); color: #fff; box-shadow: 0 3px 9px #6c49b619; }
.nav button:not(.active):hover { background: #e3d6f7; color: #513281; }
.topbar { background: #faf7ff; border-color: var(--line); }
.top-tools, .breadcrumb, .breadcrumb strong { color: var(--muted); }
.icon-btn { color: #65547a; }
.icon-btn:hover { background: #e9dff9; }
.page-heading h1 { color: #302047; }
.page-heading p, .eyebrow, .subtle { color: var(--muted); }
.date-pill { background: #eee7fc; border-color: #d9caee; color: #61488a; }

button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline-color: #8b62d2;
}
.primary { background: linear-gradient(110deg, #6942b6, #7a52c0); color: #fff; }
.primary:hover { background: var(--violet-dark); }
.secondary, .toggle {
  color: #5c4088;
  background: #fdfaff;
  border-color: #d8c7ee;
}
.secondary:hover:not(:disabled), .toggle:hover { background: #f0e7fc; border-color: #b79adf; }
.muted-link { color: #68439f; }
.muted-link:hover { color: #4e287e; }
.practice-box, .panel, .player, .review-large, .plan-doc,
.calendar-full, .chat-box, .scenario, .course-card {
  border-color: var(--line);
  box-shadow: var(--surface-shadow);
}

.course-progress { background: linear-gradient(115deg, #fff0e7, #fff5f0); border-color: #f1d6c9; }
.course-progress-title { color: #7a5d71; }
.course-progress-title strong, .course-progress-title b { color: #55317f; }
.course-progress-title small, .course-progress-task .help-note { color: #725d75; }
.course-progress-track { background: #e8dce4; }
.course-progress-track > span { background: linear-gradient(90deg, #8b67be, #6c49b6); }
.dialogue-tab { background: #fff; border-color: #e3d8f2; }
.dialogue-tab small { color: #756584; }
.dialogue-tab strong { color: #3b2b52; }
.dialogue-tab:hover { background: #f4eefe; border-color: #c3aae7; }
.dialogue-tab.dialogue-complete { border-color: #9abeb5; }
.dialogue-tab.dialogue-complete small, .dialogue-tab .check { color: #367063; }
.dialogue-tab.active, .dialogue-tab.dialogue-complete.active { background: #eae0fa; border-color: #ae8ddd; }
.dialogue-tab.active small { color: #6b46a0; }
.stage-strip { background: #fdfbff; border-color: #eee6f7; }
.stage { color: #776a87; }
.stage:before { background: #e0d4ef; }
.stage b { background: #fff; border-color: #ded1ed; }
.stage.active { color: #56328a; }
.stage.active b { background: linear-gradient(140deg, #7046c5, #825bc8); border-color: #7951bc; color: #fff; }
.stage.done b { background: #e6dcf7; border-color: #c7b1e5; color: #694299; }
.stage-head p, .stage-num, .practice-top h3 small { color: var(--muted); }
.practice-top, .practice-footer { border-color: #eee5f7; }
.listen-hero p { color: var(--muted); }
.audio-art { background: #f5edff; }
.audio-art i { background: #a283d7; }
.audio-art i:nth-child(-n+3) { background: #e99680; }
.audio-art i:nth-child(4) { background: #c294d1; }
.speed-ladder button { color: #644c80; background: #fff; border-color: #dfd1ee; }
.speed-ladder button:hover:not(.active) { background: #fff3ec; border-color: #e4b1a2; }
.speed-ladder button.active, .play-big { background: linear-gradient(115deg, #b94b36, #bd503b); color: #fff; border-color: #bd503b; }
.speed-ladder button.active:hover, .play-big:hover { background: var(--coral-dark); }
.player-dock { background: #f6efff; border-color: #dfd2ef; }
.player { background: #fff; }
.player-title { color: #4a345e; }
.player-title small, .player-time { color: var(--muted); }
.player input[type=range], .noise-control input, .ambience-controls input { accent-color: var(--coral); }
.player .icon-btn { background: #f0e9fa; color: #65488b; }
.speed-select { color: #65488b; background: #f7f2ff; border-color: #ddceee; }

.text-toolbar { background: #f6f0ff; border-color: #e9def5; }
.text-toolbar span { color: #715c85; }
.toggle.on { color: #604080; background: #e9dcfa; border-color: #cdb5e9; }
.speech-row { border-color: #eee7f5; }
.speaker-avatar { color: #6f4f9a; background: #eee4fc; }
.speaker-avatar.staff { color: #9a503d; background: #ffecdf; }
.line-speaker, .line-speaker button { color: #78638d; }
.chunk:hover { background: #f1e8ff; }
.chunk .en { color: #3b2c52; border-color: #cfbce9; }
.chunk .zh, .sentence-zh { color: #746280; }
.sentence-nav, .large-nav small, .recognition-note { color: var(--muted); }
.large-nav strong { color: #593884; }
.sentence-step { color: #64418f; background: #f0e7fc; border-color: #d3bfe9; }
.sentence-step:hover:not(:disabled) { background: #e7d8fb; border-color: #bfa0e0; }
.prompt-card { background: #f8f3ff; border-color: #e2d4f2; }
.prompt-card .prompt-zh { color: #725082; }
.listen-sentence { color: #874330; background: #ffe9df; border-color: #edc1b0; }
.listen-sentence:hover:not(:disabled) { background: #ffdfd1; }
.record-button { background: #fff0e8; border-color: #e5b9a6; color: #994530; }
.record-button:hover:not(:disabled) { background: #ffe4d7; }
.record-button.recording, .voice-record.recording { background: #ad3f43; border-color: #ad3f43; color: #fff; }
.record-button.recording:hover, .voice-record.recording:hover { background: #943137; }
.transcript-input { background: #fffdff; color: var(--ink); border-color: #d9c8ed; }
.comparison { background: #f1e8fc; }
.comparison small { color: #735c87; }
.comparison .missing { background: #ffe4dc; color: #a33e35; }
.comparison .extra { background: #ffefd9; color: #8b571c; }

.calendar-panel { background: linear-gradient(#f2f0ff, #fff 65%); border-color: #ded9f5; }
.panel-head span, .month-weekdays { color: #78658e; }
.calendar-day { color: #705c87; }
.calendar-day:hover:not(:disabled) { background: #eee4fc; }
.calendar-day svg { color: #8c4c38; fill: #f4b59d; }
.calendar-day.today { background: #e2e8ff; border-color: #b8c4ee; color: #4d4ba2; }
.calendar-day.checked { background: #ffecdf; color: #874734; }
.full .calendar-day { border-color: #e7dbf3; }
.full .calendar-day.other-month { background: #faf7ff; color: #776584; }
.calendar-footer { color: #756087; }
.checkin-button { background: #f0e8fd; color: #66409b; border-color: #d1bce9; }
.checkin-button:hover { background: #e6d8f9; }
.checkin-button.checked { background: #ffe9dd; color: #944b34; border-color: #ecc4b1; }
.checkin-question { background: #f6efff; border-color: #dfd0f0; }
.checkin-question input { accent-color: var(--violet); }
.checkin-question input:checked + span { color: #643e94; }
.review-card { border-color: #eee6f6; }
.review-card:hover { background: #fbf7ff; }
.review-card small, .review-card svg { color: #796b85; }
.offset { color: #a04630; background: #ffecdf; }
.review-card:nth-of-type(even) .offset { color: #5754a3; background: #e9e9ff; }
.review-large:nth-child(even) .offset { color: #5754a3; background: #e9e9ff; }
.review-large p, .date-control, .empty-line { color: var(--muted); }
.panel-footnote { color: var(--muted); border-color: #e9e0f3; }
.weekend-card { background: #eee5fc; border-color: #d8c9ec; }
.weekend-card .eyebrow, .weekend-card p, .weekend-card button { color: #715087; }
.week-summary, .week-summary strong, .day, .day b { color: var(--muted); border-color: var(--line); }
.day.active, .day.active b { color: #fff; background: var(--violet); }
.day i { background: #cbb8e5; }

.course-card.available { background: #fcf9ff; border-color: #e1d4f0; }
.course-card.available:nth-child(4n+2) { background: #fff4ed; border-color: #f0dace; }
.course-card.available:nth-child(4n+3) { background: #f1f3ff; border-color: #dce0f5; }
.course-card.available:nth-child(4n) { background: #f7edfa; border-color: #e9d4ee; }
.course-card.available:hover { background: #eee4fc; border-color: #b895df; }
.course-card.available.selected { background: #e9dcfb; border-color: #a989d3; }
.course-card small, .course-card p, .catalog-note { color: var(--muted); }
.plan-intro, .course-banner { background: linear-gradient(110deg, #6442a8, #815cc6); }
.plan-intro p, .course-banner p, .lesson-meta, .tag { color: #eee5ff; }
.banner-icon { color: #e5d3ff; }
.plan-doc p, .plan-doc li, .plan-cell small, .flow, .objective { color: var(--muted); }
.plan-cell { background: #fdfaff; border-color: #e4d8f1; }
.flow b { color: #67408d; background: #f0e7fc; border-color: #decaef; }
.objective.completed { color: #377164; }

.scenario.active { background: #eee2fc; border-color: #c9aae8; }
.scenario p, .help-note, .field-label { color: var(--muted); }
.chat-head { background: #faf6ff; border-color: var(--line); }
.bubble, .voice-bubble { color: #65418c; background: #efe5fc; }
.bubble.user, .voice-message.user .voice-bubble { background: #7150b2; color: #fff; }
.bubble small { color: #725b86; }
.bubble.user small { color: #f0e7ff; }
.voice-avatar { color: #704c9a; background: #e9ddfa; }
.voice-message.user .voice-avatar { color: #a04d35; background: #ffe5d7; }
.voice-message-actions, .voice-status, .voice-empty, .api-status { color: var(--muted); }
.voice-empty h3 { color: #6f4a95; }
.voice-empty > svg { color: #9c7dca; }
.voice-transcript { background: #fdfaff; border-color: #e2d5f0; }
.voice-controls { background: #fdfbff; border-color: var(--line); }
.voice-message-error { color: #a03b40; }
.voice-message.failed .voice-bubble { outline-color: #bd656b; }
.voice-message-actions button[data-chat-retry],
.voice-message-actions button[data-chat-retry-audio] { color: #a03b40; }
.status-dot { background: #438573; }

.field, select.field, input.field, .date-control input, .chat-form input {
  color: var(--ink); background: #fffdff; border-color: #9378b2;
}
.field:hover, .date-control input:hover { border-color: #78559f; }
.word-chips button { background: #f0e7fc; color: #624184; border-color: #d3bfe9; }
.word-chips button:hover { background: #e5d7f8; }
dialog { background: #fdfaff; border-color: #dac8ed; box-shadow: 0 16px 50px #38205326; }
dialog::backdrop { background: #30204466; }
dialog p { color: var(--muted); }
dialog hr, .learning-records { border-color: #e6daf2; }
.service-connection { background: #f0e8fc; border-color: #dbcbef; }
#local-service-status[data-state="online"] { color: #34715f; }
#local-service-status[data-state="offline"], #checkin-error, #settings-result { color: #9d4540; }
.notice, .source-variation { color: #85512f; background: #fff2e7; border-color: #edc29e; }
.source-variation { border-left-color: #d59061; }
.danger-button { color: #a03c43; border-color: #e2b5bd; background: #fff3f5; }
.danger-button:hover { background: #fce5e9; }
.danger-solid { background: #a33f48; border-color: #a33f48; color: #fff; }
.danger-solid:hover { background: #8a303b; }
#clear-records-result { color: #a03c43; }
#toast { background: #583581; }
.load-error { color: #61437e; }
.load-error button { background: var(--violet); }
.bottom-note { color: var(--muted); }

@media (max-width: 740px) {
  .sidebar { background: #eee6fb; border-color: #ddcfef; }
}