@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');

:root {
  color: #182027;
  background: #f5f6f2;
  font-family: Inter, 'Noto Sans SC', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f5f6f2; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.app-shell { min-height: 100vh; }
.workspace, .below-board { width: min(1240px, calc(100% - 36px)); margin: 0 auto; }
.workspace { padding: 16px 0 28px; }

.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; font-weight: 800; }
.brand small { margin-top: 2px; color: #69747a; font-size: .73rem; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; border-radius: 7px; background: linear-gradient(90deg, transparent 0 8px, #f1cd68 8px 13px, transparent 13px), linear-gradient(90deg, transparent 15px, #68a995 15px 20px, transparent 20px), linear-gradient(90deg, transparent 23px, #d76550 23px 28px, transparent 28px), #172026; background-size: 100% 42%,100% 70%,100% 56%,100%; background-position: 0 18px,0 9px,0 14px,0 0; background-repeat: no-repeat; }
.mode-switch { display: flex; gap: 4px; border: 1px solid #dfe2dc; border-radius: 7px; background: #fff; padding: 4px; }
.mode-switch button { min-width: 72px; height: 32px; border: 0; border-radius: 5px; background: transparent; color: #667078; font-weight: 800; }
.mode-switch button.is-active { background: #172026; color: #fff; }

.intro-row { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 40px; padding: 24px 0 18px; }
.panel-label { margin: 0; color: #68737a; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.intro-row h1 { margin: 6px 0 0; max-width: 780px; color: #121a20; font-size: clamp(2rem, 4vw, 3.85rem); line-height: 1.04; letter-spacing: 0; }
.intro-row > p { margin: 0; color: #56636b; font-size: 1rem; line-height: 1.6; }

.how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #dfe2dc; border-radius: 7px 7px 0 0; background: #fff; overflow: hidden; }
.how-it-works span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-right: 1px solid #e4e7e1; color: #647078; font-size: .86rem; font-weight: 800; }
.how-it-works span:last-child { border: 0; }
.how-it-works b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #edf0eb; color: #56636b; font-size: .76rem; }
.how-it-works .is-current { background: #eaf3ef; color: #245e50; }
.how-it-works .is-current b { background: #2e7261; color: #fff; }

.scenario-picker { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #dfe2dc; border-top: 0; border-radius: 0 0 7px 7px; background: #fff; overflow: hidden; }
.scenario-option { min-width: 0; min-height: 58px; border: 0; border-right: 1px solid #e4e7e1; background: #fff; padding: 9px 14px; text-align: left; }
.scenario-option:last-child { border: 0; }
.scenario-option span, .scenario-option small { display: block; }
.scenario-option span { color: #172026; font-weight: 800; }
.scenario-option small { margin-top: 4px; color: #768086; font-weight: 700; }
.scenario-option.is-active { box-shadow: inset 0 -4px #d76550; background: #fff9f4; }
.scenario-option.is-active small { color: #9a4535; }

.training-board { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(380px, .86fr); gap: 14px; margin-top: 14px; }
.practice-panel, .guide-panel, .detail-panel { min-width: 0; border: 1px solid #dde1da; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(28, 38, 43, .05); }
.practice-panel { display: grid; gap: 12px; padding: 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading.compact { align-items: center; }
.panel-heading h2, .section-heading h2 { margin: 5px 0 0; color: #152027; font-size: 1.45rem; line-height: 1.15; }
.panel-heading > span { flex: 0 0 auto; border-radius: 6px; background: #eaf3ef; color: #285f52; padding: 6px 9px; font-size: .78rem; font-weight: 800; }
.outcome { margin: 0; color: #526068; line-height: 1.55; }
.prompt-box, .first-line, .recorder, .current-guide, .ai-turn-card, .advice, .transcript-box { border-radius: 7px; }
.prompt-box { border-left: 4px solid #d76550; background: #fff6e7; padding: 12px 14px; }
.prompt-box > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-box button { min-height: 30px; border: 0; border-radius: 6px; background: #172026; color: #fff; padding: 0 10px; font-size: .76rem; font-weight: 800; }
.prompt-box small, .first-line small { display: block; color: #69747a; font-size: .77rem; font-weight: 800; }
.prompt-box p, .first-line p { margin: 6px 0 0; color: #24323a; line-height: 1.5; }
.prompt-box p { font-size: 1.04rem; font-weight: 700; }
.first-line { background: #edf6f1; padding: 12px 14px; }
.first-line p { color: #285f52; font-weight: 800; }

.recorder { display: grid; grid-template-columns: 92px minmax(90px, 1fr) 130px; align-items: center; gap: 12px; margin-top: auto; background: #172026; color: #fff; padding: 12px; }
.timer span, .timer small { display: block; }
.timer span { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.timer small { margin-top: 4px; color: #aab2b5; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.meter { height: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #68a995, #f1cd68, #d76550); transition: width 90ms linear; }
.recorder button, .coach-actions button, .ai-turn-card button { min-height: 40px; border: 0; border-radius: 6px; padding: 0 12px; font-weight: 800; }
.recorder button { background: #d76550; color: #fff; }

.guide-panel { display: grid; grid-template-rows: auto auto 1fr; gap: 11px; padding: 14px; background: #172026; color: #fff; }
.coach-line { display: flex; align-items: center; gap: 10px; }
.coach-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #f1cd68; color: #172026; font-weight: 900; }
.coach-avatar.is-live { animation: pulse 1.4s ease-in-out infinite; }
.coach-line small, .coach-line strong { display: block; }
.coach-line small { color: #9eaaae; font-size: .74rem; font-weight: 800; }
.coach-line strong { margin-top: 3px; color: #fff; font-size: .88rem; line-height: 1.35; }
.current-guide { background: #fff; color: #172026; padding: 14px; }
.current-guide .panel-heading h2 { font-size: 1.25rem; }
.current-guide > p { margin: 10px 0 12px; color: #334149; font-size: 1.02rem; font-weight: 700; line-height: 1.55; }
.breath-guide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 14px; }
.breath-guide .panel-heading { grid-column: 1 / -1; }
.breath-guide > p { margin: 0; font-size: .9rem; }
.breath-guide > button { grid-column: 1 / -1; min-height: 42px; border: 0; border-radius: 6px; background: #f1cd68; color: #172026; font-weight: 800; }
.breath-visual { display: grid; place-items: center; width: 62px; height: 62px; border: 7px solid #dbe9e3; border-radius: 50%; background: #2e7261; color: #fff; transition: transform 900ms ease, background 400ms ease; }
.breath-visual span { font-weight: 900; }
.breath-visual.phase-1 { transform: scale(1.16); background: #4b8b7b; }
.breath-visual.phase-2 { transform: scale(.9); background: #d76550; }
.coach-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coach-actions button:first-child { background: #f1cd68; color: #172026; }
.coach-actions button:last-child { background: #e8ece7; color: #38454c; }
.step-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.step-track button { min-width: 0; min-height: 48px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: transparent; color: #c3cbce; padding: 6px; font-size: .68rem; font-weight: 800; text-align: left; }
.step-track button span { display: block; margin-bottom: 3px; color: #7f8c91; font-size: .63rem; }
.step-track button.is-active { border-color: #f1cd68; background: rgba(241,205,104,.12); color: #ffeaa8; }
.ai-turn-card { align-self: stretch; background: rgba(255,255,255,.08); padding: 12px; }
.ai-turn-card .panel-label { color: #aeb7ba; }
.ai-turn-card button { min-height: 30px; background: rgba(255,255,255,.12); color: #fff; }
.ai-turn-card > p { margin: 9px 0 0; color: #fff; font-weight: 700; line-height: 1.5; }
.result-card { display: grid; align-content: start; }
.result-card .live-answer { min-height: 46px; }
.answer-feedback { margin-top: 10px; border-left: 3px solid #f1cd68; color: #ffeaa8; padding-left: 10px; font-size: .84rem; font-weight: 700; line-height: 1.5; }
.answer-feedback:empty { display: none; }

.below-board { padding: 28px 0 40px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.section-heading h2 { font-size: 1.25rem; }
.details-grid { display: grid; grid-template-columns: 1.05fr .95fr 1fr .9fr; gap: 12px; }
.detail-panel { min-height: 230px; padding: 15px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 11px; }
.metric { border: 1px solid #e1e5df; border-radius: 6px; background: #fafbf8; padding: 10px; }
.metric strong { color: #172026; font-size: 1.25rem; }
.metric span { margin-left: 2px; color: #717b81; font-weight: 800; }
.metric p { margin: 5px 0 0; color: #6b757b; font-size: .74rem; font-weight: 800; }
.advice { margin-top: 9px; background: #eaf3ef; color: #285f52; padding: 10px; font-size: .84rem; font-weight: 700; line-height: 1.45; }
.chip-list, .keyword-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip-list span, .keyword-row span { border: 1px solid #dfe3dd; border-radius: 999px; background: #fafbf8; color: #536169; padding: 6px 9px; font-size: .76rem; font-weight: 800; }
.keyword-row span.is-covered { background: #eaf3ef; color: #285f52; }
.context-text { margin: 12px 0 0; color: #536169; line-height: 1.55; }
.transcript-panel h3 { margin: 4px 0 0; }
.transcript-box { min-height: 125px; margin-top: 11px; background: #f7f8f5; padding: 10px; }
.transcript-input { width: 100%; min-height: 104px; border: 0; outline: 0; resize: vertical; background: transparent; color: #26343c; line-height: 1.5; }
.history-list { display: grid; gap: 9px; margin-top: 12px; }
.history-list div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; border-bottom: 1px solid #e4e7e1; padding-bottom: 8px; }
.history-list span { font-weight: 800; }
.history-list strong { color: #285f52; }
.history-list small { grid-column: 1 / -1; color: #748087; font-size: .72rem; }

@keyframes pulse { 50% { transform: scale(1.08); } }

@media (max-width: 980px) {
  .training-board { grid-template-columns: 1fr; }
  .guide-panel { grid-template-columns: .65fr 1.35fr; grid-template-rows: auto auto; }
  .coach-line { grid-column: 1; }
  .current-guide, .ai-turn-card { grid-column: 2; }
  .current-guide { grid-row: 1; }
  .ai-turn-card { grid-row: 2; }
  .details-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .workspace, .below-board { width: min(100% - 24px, 1240px); }
  .workspace { padding-top: 10px; }
  .top-nav { align-items: flex-start; }
  .brand small { display: none; }
  .mode-switch button { min-width: 62px; }
  .intro-row { grid-template-columns: 1fr; gap: 5px; padding: 12px 0 10px; }
  .intro-row .panel-label { display: none; }
  .intro-row h1 { font-size: 1.62rem; line-height: 1.12; }
  .intro-row > p { font-size: .8rem; line-height: 1.4; }
  .how-it-works span { min-height: 38px; font-size: .78rem; }
  .how-it-works b { width: 20px; height: 20px; }
  .scenario-picker { display: flex; overflow-x: auto; scrollbar-width: none; }
  .scenario-option { min-width: 134px; }
  .practice-panel { padding: 14px; }
  .recorder { grid-template-columns: 78px 1fr; }
  .recorder button { grid-column: 1 / -1; width: 100%; }
  .guide-panel { order: -1; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }
  .coach-line, .current-guide, .ai-turn-card { grid-column: 1; grid-row: auto; }
  .details-grid { grid-template-columns: 1fr; }
  .section-heading { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Product app layout */
.product-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; background: #f5f6f2; }
.app-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid #dfe3dd; background: #fff; padding: 22px 16px; }
.app-sidebar .brand { padding: 0 6px 24px; }
.app-sidebar nav { display: grid; gap: 5px; }
.app-sidebar nav button { min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: #667078; padding: 0 12px; text-align: left; font-weight: 800; }
.app-sidebar nav button.is-active { background: #eaf3ef; color: #285f52; }
.sidebar-streak { display: flex; align-items: baseline; gap: 7px; margin-top: auto; border-top: 1px solid #e6e9e4; padding: 18px 8px 2px; }
.sidebar-streak strong { color: #d76550; font-size: 1.65rem; }
.sidebar-streak span { color: #6f797f; font-size: .78rem; font-weight: 700; }
.app-main { min-width: 0; padding: 26px clamp(22px, 4vw, 58px) 48px; }
.mobile-nav { display: none; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1080px, 100%); margin: 0 auto 20px; }
.app-header p, .section-title p { margin: 0; color: #748087; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.app-header h1 { margin: 5px 0 0; color: #152027; font-size: clamp(1.55rem, 2.7vw, 2.25rem); line-height: 1.15; }

.resume-panel { display: grid; grid-template-columns: 1fr 180px; align-items: center; gap: 30px; width: min(1080px, 100%); min-height: 230px; margin: 0 auto 16px; border-radius: 8px; background: #172026; color: #fff; padding: 30px 34px; }
.resume-copy span { color: #9eaaae; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.resume-copy h2 { margin: 8px 0 6px; font-size: clamp(1.65rem, 3vw, 2.65rem); line-height: 1.1; }
.resume-copy p { margin: 0; color: #c0c8ca; line-height: 1.55; }
.resume-button, .primary-action, .secondary-action { min-height: 46px; border: 0; border-radius: 7px; padding: 0 18px; font-weight: 900; }
.resume-button { margin-top: 22px; background: #f1cd68; color: #172026; }
.progress-ring { display: grid; place-items: center; width: 142px; aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(#f1cd68 var(--progress), rgba(255,255,255,.12) 0); }
.progress-ring::before { content: ''; grid-area: 1/1; width: 112px; aspect-ratio: 1; border-radius: 50%; background: #172026; }
.progress-ring div { z-index: 1; grid-area: 1/1; text-align: center; }
.progress-ring strong, .progress-ring span { display: block; }
.progress-ring strong { font-size: 1.75rem; }
.progress-ring span { margin-top: 3px; color: #aab3b6; font-size: .72rem; font-weight: 700; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 16px; width: min(1080px, 100%); margin: auto; }
.plan-panel, .scenario-home, .tip-panel { border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; }
.plan-panel, .scenario-home { padding: 18px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-title h2 { margin: 4px 0 0; color: #172026; font-size: 1.18rem; }
.section-title > span { border-radius: 6px; background: #edf3ef; color: #285f52; padding: 6px 9px; font-size: .74rem; font-weight: 800; }
.module-list { display: grid; margin-top: 13px; }
.module-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 68px; border: 0; border-top: 1px solid #e6e9e4; background: transparent; padding: 8px 4px; text-align: left; }
.module-row b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d8ddd7; border-radius: 50%; color: #7c878c; }
.module-row span strong, .module-row span small { display: block; }
.module-row span strong { color: #1c282f; font-size: .92rem; }
.module-row span small { margin-top: 3px; color: #748087; line-height: 1.35; }
.module-row em { color: #818b90; font-size: .74rem; font-style: normal; font-weight: 800; }
.module-row.is-next { margin: 0 -7px; border-radius: 7px; background: #fff7e4; padding-inline: 11px; }
.module-row.is-next b { border-color: #d76550; background: #d76550; color: #fff; }
.module-row.is-done b { border-color: #68a995; background: #68a995; color: #fff; }
.home-side { display: grid; align-content: start; gap: 12px; }
.scenario-home > p { margin: 12px 0; color: #59666d; line-height: 1.5; }
.scenario-mini-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.scenario-mini-list button { min-height: 58px; border: 1px solid #e0e4df; border-radius: 6px; background: #fafbf8; padding: 8px; text-align: left; }
.scenario-mini-list span, .scenario-mini-list small { display: block; }
.scenario-mini-list span { color: #26343b; font-size: .82rem; font-weight: 800; }
.scenario-mini-list small { margin-top: 3px; color: #788389; font-size: .7rem; }
.scenario-mini-list button.is-active { border-color: #d76550; background: #fff3ed; }
.tip-panel { display: flex; gap: 11px; padding: 15px; }
.tip-panel > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: #f1cd68; font-weight: 900; }
.tip-panel strong { color: #243138; font-size: .84rem; }
.tip-panel p { margin: 4px 0 0; color: #647078; font-size: .8rem; line-height: 1.45; }

.product-shell.is-session .app-main { padding-top: 18px; }
.session-header { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; width: min(980px, 100%); margin: auto; }
.session-header button { width: 38px; height: 38px; border: 1px solid #dfe3dd; border-radius: 50%; background: #fff; color: #26343b; font-size: 1.2rem; }
.session-header span, .session-header strong { display: block; }
.session-header span { color: #7a858b; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.session-header strong { margin-top: 3px; color: #202c33; font-size: .9rem; }
.session-header em { color: #68737a; font-style: normal; font-weight: 800; }
.session-progress { width: min(980px, 100%); height: 4px; margin: 14px auto 0; overflow: hidden; border-radius: 4px; background: #dfe4de; }
.session-progress span { display: block; height: 100%; background: #d76550; transition: width 250ms ease; }
.exercise-wrap { display: grid; place-items: center; width: min(980px, 100%); min-height: calc(100vh - 110px); margin: auto; padding: 30px 0; }
.single-exercise { width: min(620px, 100%); text-align: center; }
.exercise-kicker { margin: 0; color: #d76550; font-size: .77rem; font-weight: 900; text-transform: uppercase; }
.single-exercise h1, .roleplay-session h1 { margin: 8px 0; color: #152027; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; }
.exercise-lead { width: min(520px, 100%); margin: 0 auto; color: #5c6970; line-height: 1.6; }
.session-breath { display: grid; place-items: center; width: 210px; aspect-ratio: 1; margin: 34px auto 24px; border: 16px solid #dceae4; border-radius: 50%; background: #2f7262; color: #fff; box-shadow: 0 0 0 12px rgba(104,169,149,.1); transition: transform 900ms ease, background 400ms ease; }
.session-breath span { font-size: 2rem; font-weight: 900; }
.session-breath.phase-1 { transform: scale(1.13); background: #4c8d7c; }
.session-breath.phase-2 { transform: scale(.9); background: #d76550; }
.breath-sequence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.breath-sequence span { border-radius: 6px; background: #eaf3ef; color: #285f52; padding: 7px 10px; font-size: .78rem; font-weight: 800; }
.breath-sequence small { width: 100%; color: #7a858a; font-weight: 700; }
.primary-action { background: #172026; color: #fff; }
.secondary-action { margin-left: 7px; border: 1px solid #ccd3cd; background: #fff; color: #26343b; }
.technique-demo { margin: 28px 0 20px; border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; padding: 20px; }
.technique-demo > span { color: #7b858a; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.technique-demo blockquote { margin: 12px 0 16px; color: #285f52; font-size: 1.3rem; font-weight: 800; line-height: 1.5; }
.technique-demo button { min-height: 38px; border: 0; border-radius: 6px; background: #eaf3ef; color: #285f52; padding: 0 13px; font-weight: 800; }
.technique-steps { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style-position: inside; text-align: left; }
.technique-steps li { border-bottom: 1px solid #e1e5df; color: #526068; padding: 9px 4px; }

.roleplay-session { width: 100%; align-self: stretch; }
.roleplay-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.scenario-session-switch { display: flex; max-width: 55%; gap: 5px; overflow-x: auto; }
.scenario-session-switch button { flex: 0 0 auto; min-height: 34px; border: 1px solid #dfe3dd; border-radius: 6px; background: #fff; color: #667178; padding: 0 10px; font-size: .74rem; font-weight: 800; }
.scenario-session-switch button.is-active { border-color: #285f52; background: #eaf3ef; color: #285f52; }
.dialogue-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 12px; }
.ai-message, .answer-zone, .turn-feedback { border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; padding: 18px; }
.ai-message { grid-column: 1; display: flex; align-items: flex-start; gap: 12px; background: #172026; color: #fff; }
.ai-message > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: #f1cd68; color: #172026; font-weight: 900; }
.ai-message small { color: #9da9ad; font-size: .72rem; font-weight: 800; }
.ai-message p { margin: 7px 0 13px; font-size: 1.1rem; font-weight: 700; line-height: 1.55; }
.ai-message button { min-height: 34px; border: 0; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; padding: 0 10px; font-weight: 800; }
.answer-zone { grid-column: 1; }
.answer-zone > p { margin: 0 0 10px; color: #677279; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.answer-zone .first-line { margin-bottom: 12px; }
.turn-feedback { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.feedback-score { margin: 18px 0 12px; }
.feedback-score strong, .feedback-score span { display: block; }
.feedback-score strong { color: #172026; font-size: 2.3rem; }
.feedback-score span { color: #778287; font-size: .74rem; font-weight: 800; }
.turn-feedback .live-answer { color: #56636a; line-height: 1.55; }
.turn-feedback .answer-feedback { border-color: #d76550; color: #8b3828; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: auto 0 12px; }
.mini-metrics span { border-radius: 6px; background: #f2f4f0; color: #68747a; padding: 9px; font-size: .74rem; }
.mini-metrics b { display: block; margin-top: 3px; color: #243138; font-size: 1rem; }
.turn-feedback .primary-action { width: 100%; }
.review-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 18px; }
.review-summary div { border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; padding: 18px; }
.review-summary strong, .review-summary span { display: block; }
.review-summary strong { font-size: 1.8rem; }
.review-summary span { margin-top: 4px; color: #788388; font-size: .74rem; font-weight: 800; }
.reflection-input { display: block; margin-bottom: 16px; text-align: left; }
.reflection-input span { display: block; margin-bottom: 7px; color: #4d5a62; font-size: .8rem; font-weight: 800; }
.reflection-input textarea { width: 100%; min-height: 110px; border: 1px solid #dfe3dd; border-radius: 8px; outline: 0; background: #fff; padding: 12px; resize: vertical; }

.ghost-action { min-height: 42px; border: 1px solid #cfd6d0; border-radius: 7px; background: #fff; color: #2f3c43; padding: 0 14px; font-weight: 900; }
.today-hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; width: min(1080px, 100%); margin: 0 auto 16px; border-radius: 8px; background: #172026; color: #fff; padding: 30px 34px; }
.today-copy span { color: #a5afb2; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.today-copy h2 { margin: 8px 0 7px; max-width: 680px; font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.08; }
.today-copy p { margin: 0; color: #c0c8ca; line-height: 1.55; }
.payoff-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.payoff-row span { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); color: #f4f6f3; padding: 7px 10px; font-size: .78rem; font-weight: 800; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-actions .resume-button { margin: 0; }
.hero-actions .ghost-action { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
.coach-path { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; }
.coach-path .progress-ring { width: 112px; }
.coach-path .progress-ring::before { width: 86px; }
.coach-path .progress-ring strong { font-size: 1.35rem; }
.coach-path ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: path; }
.coach-path li { position: relative; color: #dce3e3; line-height: 1.45; padding-left: 26px; }
.coach-path li::before { counter-increment: path; content: counter(path); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f1cd68; color: #172026; font-size: .68rem; font-weight: 900; }
.home-grid { grid-template-columns: minmax(330px, .85fr) minmax(0, 1.15fr); align-items: start; }
.primary-scenario { min-height: 100%; }
.scenario-brief { display: grid; gap: 9px; margin: 14px 0; }
.scenario-brief div { border: 1px solid #e3e7e1; border-radius: 7px; background: #fafbf8; padding: 11px; }
.scenario-brief strong, .scenario-brief span { display: block; }
.scenario-brief strong { color: #172026; font-size: .76rem; }
.scenario-brief span { margin-top: 4px; color: #59666d; font-size: .84rem; line-height: 1.45; }
.session-header small { display: block; margin-top: 4px; color: #68737a; line-height: 1.35; }
.roleplay-subtitle { margin: 0; color: #5f6b72; line-height: 1.5; }
.roleplay-briefing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.roleplay-briefing div { border: 1px solid #dfe5de; border-radius: 8px; background: #fff; padding: 12px; }
.roleplay-briefing strong, .roleplay-briefing span { display: block; }
.roleplay-briefing strong { color: #172026; font-size: .75rem; }
.roleplay-briefing span { margin-top: 5px; color: #5c6870; font-size: .84rem; line-height: 1.4; }
.prep-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.prep-strip span { border-radius: 6px; background: #fff7e4; color: #714130; padding: 9px; font-size: .74rem; font-weight: 800; line-height: 1.35; }
.turn-feedback.is-prep { background: #fffdf7; }
.goal-list { display: grid; gap: 8px; margin-top: 18px; }
.goal-list div { border-radius: 7px; background: #fff1cf; color: #714130; padding: 11px; font-weight: 800; line-height: 1.4; }
.coach-note { margin-top: 12px; border-left: 3px solid #68a995; background: #eef7f2; padding: 12px; }
.coach-note strong { color: #285f52; }
.coach-note p { margin: 6px 0 0; color: #4e5d63; line-height: 1.5; }
.feedback-plan { display: grid; gap: 8px; margin: 12px 0; }
.feedback-plan div { border: 1px solid #e3e7e1; border-radius: 7px; background: #fafbf8; padding: 10px; }
.feedback-plan strong, .feedback-plan span { display: block; }
.feedback-plan strong { color: #172026; font-size: .74rem; }
.feedback-plan span { margin-top: 4px; color: #5d6970; font-size: .84rem; line-height: 1.45; }
.feedback-source { display: inline-flex; width: fit-content; border-radius: 999px; background: #f0f2ee; color: #5b676d; padding: 6px 10px; font-size: .72rem; font-weight: 900; }
.feedback-source.is-openai { background: #e8f4ef; color: #285f52; }
.api-error { margin-top: 9px; border-radius: 7px; background: #fff0eb; color: #8b3828; padding: 9px; font-size: .8rem; font-weight: 800; line-height: 1.45; }
.coach-loading { border-radius: 8px; background: #eef7f2; color: #285f52; padding: 14px; }
.coach-loading strong { display: block; }
.coach-loading p { margin: 7px 0 0; color: #506069; line-height: 1.5; }
.coach-note.compact { margin: 0 0 10px; padding: 10px; }
.manual-transcript-box { display: grid; gap: 8px; margin: 10px 0 12px; }
.manual-transcript-box label span { display: block; margin-bottom: 6px; color: #4d5a62; font-size: .76rem; font-weight: 800; }
.manual-transcript-box textarea { width: 100%; min-height: 72px; border: 1px solid #dfe3dd; border-radius: 7px; outline: 0; padding: 10px; resize: vertical; }
.manual-transcript-box button { min-height: 38px; border: 0; border-radius: 7px; background: #eaf3ef; color: #285f52; font-weight: 900; }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(1080px, 100%); margin: auto; }
.library-card { display: flex; flex-direction: column; gap: 14px; min-height: 330px; border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; padding: 18px; }
.library-card.is-active { border-color: #d76550; box-shadow: inset 0 0 0 2px rgba(215,101,80,.14); }
.library-card span { display: inline-flex; width: fit-content; border-radius: 6px; background: #eaf3ef; color: #285f52; padding: 6px 9px; font-size: .74rem; font-weight: 900; }
.library-card h2 { margin: 10px 0 7px; color: #172026; }
.library-card p, .library-card dd { color: #5c6870; line-height: 1.5; }
.library-card dl { display: grid; gap: 5px; margin: 0; }
.library-card dt { color: #172026; font-size: .76rem; font-weight: 900; }
.library-card dd { margin: 0 0 8px; font-size: .86rem; }
.library-card button { min-height: 42px; margin-top: auto; border: 0; border-radius: 7px; background: #172026; color: #fff; font-weight: 900; }
.progress-dashboard { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; width: min(1080px, 100%); margin: auto; }
.progress-big, .progress-list, .history-panel { border: 1px solid #dfe3dd; border-radius: 8px; background: #fff; padding: 18px; }
.progress-big { display: grid; align-content: start; gap: 16px; }
.progress-big p { margin: 0; color: #5f6b72; line-height: 1.55; }
.progress-big .progress-ring { background: conic-gradient(#68a995 var(--progress), #e4e9e3 0); }
.progress-big .progress-ring::before { background: #fff; }
.progress-list { display: grid; gap: 8px; }
.progress-list div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid #e7ebe5; padding: 9px 0; }
.progress-list b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eaf3ef; color: #285f52; }
.progress-list strong, .progress-list small { display: block; }
.progress-list small { margin-top: 3px; color: #748087; }
.history-panel { grid-column: 1 / -1; }
.history-panel h2 { margin: 0; color: #172026; font-size: 1.1rem; }
.history-panel > p { color: #677279; }

@media (max-width: 900px) {
  .product-shell { grid-template-columns: 1fr; padding-bottom: 64px; }
  .product-shell.is-session { padding-bottom: 0; }
  .app-sidebar { display: none; }
  .app-main { padding: 18px 16px 34px; }
  .mobile-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); min-height: 58px; border-top: 1px solid #dfe3dd; background: rgba(255,255,255,.96); }
  .product-shell.is-session .mobile-nav { display: none; }
  .mobile-nav button { border: 0; background: transparent; color: #7a858a; font-size: .74rem; font-weight: 800; }
  .mobile-nav button.is-active { color: #285f52; }
  .resume-panel { grid-template-columns: 1fr 120px; min-height: 210px; padding: 24px; }
  .today-hero { grid-template-columns: 1fr; padding: 24px; }
  .coach-path { grid-template-columns: 96px minmax(0, 1fr); }
  .progress-ring { width: 110px; }
  .progress-ring::before { width: 86px; }
  .home-grid { grid-template-columns: 1fr; }
  .dialogue-stage { grid-template-columns: 1fr; }
  .roleplay-briefing { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .roleplay-session, .dialogue-stage, .ai-message, .answer-zone, .turn-feedback, .roleplay-briefing { min-width: 0; max-width: 100%; }
  .roleplay-briefing div { flex: 0 0 132px; min-width: 0; }
  .turn-feedback { grid-column: 1; grid-row: auto; }
  .library-grid, .progress-dashboard { grid-template-columns: 1fr; }
  .history-panel { grid-column: auto; }
}

@media (max-width: 600px) {
  .app-main { padding-inline: 12px; }
  .app-header { align-items: flex-start; }
  .app-header h1 { font-size: 1.35rem; }
  .mode-switch button { min-width: 58px; }
  .resume-panel { grid-template-columns: 1fr; min-height: auto; padding: 20px; }
  .resume-copy h2 { font-size: 1.75rem; }
  .today-hero { padding: 20px; }
  .today-copy h2 { font-size: 1.78rem; }
  .hero-actions { display: grid; }
  .payoff-row { display: grid; }
  .coach-path { grid-template-columns: 1fr; }
  .coach-path .progress-ring { display: none; }
  .module-row { grid-template-columns: 34px minmax(0, 1fr); }
  .module-row em { grid-column: 2; }
  .scenario-mini-list { grid-template-columns: 1fr 1fr; }
  .scenario-brief { margin-bottom: 12px; }
  .exercise-wrap { min-height: calc(100vh - 140px); padding: 24px 0; }
  .session-breath { width: 175px; margin-block: 28px 20px; }
  .secondary-action { display: block; width: 100%; margin: 8px 0 0; }
  .single-exercise .primary-action { width: 100%; }
  .roleplay-top { display: block; }
  .roleplay-session h1 { font-size: 1.65rem; }
  .roleplay-subtitle { font-size: .92rem; line-height: 1.45; }
  .scenario-session-switch { max-width: 100%; margin-top: 12px; }
  .prep-strip { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .prep-strip span { flex: 0 0 132px; min-width: 0; }
  .ai-message, .answer-zone, .turn-feedback { padding: 14px; }
  .ai-message { gap: 10px; }
  .ai-message > span { width: 34px; height: 34px; }
  .ai-message p { margin: 5px 0 9px; font-size: 1rem; line-height: 1.4; }
  .answer-zone .first-line { padding: 10px; margin-bottom: 9px; }
  .prep-strip { margin-bottom: 9px; }
  .prep-strip span { padding: 7px; font-size: .68rem; }
  .answer-zone .recorder { grid-template-columns: 78px 1fr; }
  .answer-zone .recorder button { grid-column: 1 / -1; }
  .library-card { min-height: auto; }
}