:root {
  --bg: #f7faf5;
  --bg-soft: #eef8f2;
  --card: #ffffff;
  --elevated: #f5faf7;
  --text: #173f36;
  --muted: #688178;
  --line: #d8e8df;
  --accent: #2f9b79;
  --accent-deep: #247c63;
  --accent-soft: #def2e8;
  --high: #d97556;
  --danger: #d96762;
  --shadow: 0 16px 42px rgba(42, 92, 72, 0.08);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(178, 230, 205, 0.34), transparent 34rem),
    linear-gradient(155deg, #fbfaf5 0%, #f0faf5 48%, #f8fbf5 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button, input { font: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
button, label, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; }
[hidden] { display: none !important; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
.app-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 100vh; }
.app-nav { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; padding: 24px 16px; background: rgba(255, 255, 255, 0.92); border-right: 1px solid var(--line); backdrop-filter: blur(14px); }
.app-brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 24px; color: var(--text); font-size: 19px; text-decoration: none; }
.app-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; background: var(--accent); border-radius: 10px; font-size: 15px; }
.app-nav-items { display: grid; gap: 7px; }
.app-nav-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 11px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; }
.app-nav-item:hover { color: var(--text); background: var(--bg-soft); }
.app-nav-item.active { color: var(--accent-deep); background: var(--accent-soft); font-weight: 700; }
.app-nav-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.app-nav-item:focus-visible, .app-brand:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.learning-subnav { display: grid; gap: 4px; margin: -1px 0 5px 26px; padding: 3px 0 3px 11px; border-left: 1px solid #cfe2d5; }
.learning-subnav button { width: 100%; padding: 7px 8px; color: #6b8177; background: transparent; border: 0; border-radius: 7px; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; }
.learning-subnav button:hover { color: var(--accent-deep); background: #eef7f1; }
.learning-subnav button:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.learning-subnav button.is-disabled { cursor: not-allowed; }
.app-nav-hint { margin: 14px 8px 0; color: #95604e; font-size: 12px; line-height: 1.5; }
.app-main { min-width: 0; }
.app-module { display: none; min-height: 100vh; }
.app-module.active { display: block; }

.app-header { max-width: 1160px; margin: 0 auto; padding: 34px 28px 10px; text-align: center; }
.app-header h1 { margin: 0 0 8px; color: #143d34; font-size: clamp(22px, 3vw, 30px); letter-spacing: 0.02em; }
.app-sub { margin: 0; color: var(--muted); font-size: 14px; }

.select-layout {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(320px, 42fr);
  gap: 26px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 28px 44px;
  align-items: start;
}

.sidebar, .preview-panel, .report-section {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(205, 227, 215, 0.9);
  box-shadow: var(--shadow);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  border-radius: 22px;
}
.sidebar-block + .sidebar-block { margin-top: 18px; }

.sidebar-block h2 { margin: 0 0 13px; color: #2d5742; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; }
.sidebar-block h2 small { color: var(--muted); font-size: 11px; font-weight: 500; }
.field-help { margin: -6px 0 11px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.config-list, .source-groups { display: grid; gap: 10px; }

.distress-options { display: grid; gap: 9px; }
.distress-card { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--elevated); cursor: pointer; }
.distress-card > span { display: grid; gap: 2px; }
.distress-card strong { color: var(--text); font-size: 15px; font-weight: 550; }
.distress-card small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.distress-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 155, 121, 0.12); }
.distress-card input:checked + span strong { color: var(--accent-deep); }

.emotion-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 34px minmax(150px, 1.25fr) 42px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--elevated);
  font-size: 13px;
}
.emotion-row label { cursor: pointer; }
.emotion-row output { color: var(--accent-deep); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.emotion-row input[type="range"], .crisis-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.range-hint { color: var(--muted); font-size: 10px; text-align: right; }

.source-category { overflow: visible; border: 1px solid var(--line); border-radius: 13px; background: var(--elevated); }
.source-category-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; }
.source-main-label { display: flex; align-items: flex-start; gap: 10px; width: 100%; font-size: 13px; font-weight: 550; cursor: pointer; }
.source-main-label input { margin-top: 3px; }
.source-main-copy { display: grid; gap: 3px; }
.source-main-copy strong { color: var(--text); font-size: 14px; line-height: 1.35; }
.source-main-copy small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; }
.source-custom-wrap { margin: 0 13px 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.fold-toggle {
  position: relative;
  border: 0;
  border-radius: 8px;
  color: var(--accent-deep);
  background: transparent;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
.fold-toggle:hover { background: var(--accent-soft); }
.fold-toggle:focus-visible, .btn-primary:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.25); outline-offset: 2px; }
.check-label, .check-row { display: inline-flex; align-items: center; gap: 6px; margin: 5px 12px 5px 0; font-size: 12px; cursor: pointer; }
.field-label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.field-label input { width: 100%; padding: 10px 11px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.field-label input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 155, 121, 0.12); }

.switch-row { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--elevated); cursor: pointer; font-size: 13px; font-weight: 600; }
.switch-row small { margin-left: auto; color: var(--muted); font-weight: 400; }
.crisis-panel { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid #cae4d7; border-radius: 14px; background: #f8fcf9; }
fieldset { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 11px; }
legend { padding: 0 5px; color: var(--muted); font-size: 12px; }
.radio-card { display: block; padding: 6px 0; font-size: 13px; cursor: pointer; }
.radio-card small { margin-left: 5px; color: var(--muted); }
.radio-card.disabled { color: #9aaba4; cursor: not-allowed; }
.risk-levels, .disclosure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.risk-levels label, .disclosure-grid label { display: flex; align-items: flex-start; gap: 7px; min-height: 46px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; cursor: pointer; }
.disclosure-grid label > span { display: grid; gap: 2px; }
.disclosure-grid label small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.risk-levels .risk-high { color: #a85039; border-color: #edc2b4; background: #fff8f5; }
.fold-toggle { justify-self: start; padding-left: 2px; }
.crisis-details { display: grid; gap: 18px; padding: 20px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.crisis-details h3 { margin: 3px 0 0; color: var(--text); font-size: 15px; font-weight: 550; line-height: 1.5; }
.crisis-preset-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crisis-preset-head strong { color: #2d5742; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; }
.crisis-restore { padding: 7px 11px; color: var(--accent-deep); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; }
.crisis-restore:hover:not(:disabled) { background: var(--accent-soft); }
.crisis-restore:disabled { color: var(--muted); opacity: 0.5; cursor: not-allowed; }
.crisis-preset-warning { margin: 0; padding: 9px 11px; color: #8a513f; background: #fff8f2; border: 1px solid #efcfbe; border-radius: 9px; font-size: 13px; line-height: 1.55; }
.crisis-range { display: grid; grid-template-columns: 1fr 32px minmax(150px, 1.2fr) 36px; gap: 9px; align-items: center; font-size: 12px; }
.crisis-range output { color: var(--accent-deep); font-weight: 700; text-align: right; }
.crisis-range small { color: var(--muted); font-size: 10px; }
.crisis-range-label { display: inline-flex; align-items: center; gap: 5px; }
.crisis-help { position: relative; width: 16px; height: 16px; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--accent-deep); background: var(--accent-soft); border-radius: 50%; font-size: 10px; font-weight: 700; cursor: help; outline: none; }
.crisis-help:focus-visible { box-shadow: 0 0 0 3px rgba(47, 155, 121, 0.2); }
.crisis-help-tooltip { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); width: 230px; padding: 8px 10px; color: #45665b; background: #fbfffc; border: 1px solid #d5e9dd; border-radius: 8px; box-shadow: 0 8px 24px rgba(37, 88, 68, 0.14); font-size: 11px; font-weight: 400; line-height: 1.5; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 3px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease; }
.crisis-help:hover .crisis-help-tooltip, .crisis-help:focus .crisis-help-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.crisis-details-title { margin-bottom: -10px !important; color: #2d5742 !important; font-size: 18px !important; font-weight: 700 !important; }
.crisis-parameter-group { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid #e1eee6; }
.crisis-parameter-group h4 { margin: 0 0 2px; color: #2d5742; font-size: 16px; font-weight: 700; line-height: 1.5; }
.crisis-level-field { display: grid; grid-template-columns: 180px minmax(220px, 1fr); gap: 5px 18px; align-items: center; min-width: 0; padding: 0; border: 0; border-radius: 0; }
.crisis-level-field legend { display: contents; }
.crisis-field-label, .crisis-boolean-title { color: var(--text); font-size: 15px; font-weight: 550; line-height: 1.5; }
.crisis-selected-explanation { grid-column: 2; margin: -1px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.crisis-level-options, .crisis-inline-options { display: flex; align-items: stretch; }
.crisis-segments { overflow: hidden; width: fit-content; min-width: 210px; border: 1px solid #bedbcd; border-radius: 9px; background: #fff; }
.crisis-segments label { position: relative; display: inline-grid; min-width: 68px; min-height: 40px; place-items: center; margin: 0; padding: 0 16px; color: var(--text); border-right: 1px solid #d7e8df; background: #fff; font-size: 15px; font-weight: 550; cursor: pointer; }
.crisis-segments label:last-child { border-right: 0; }
.crisis-segments input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crisis-segments label:has(input:checked) { color: #176f57; background: #e2f3e9; box-shadow: inset 0 0 0 1px #57ad90; }
.crisis-segments label:focus-within { z-index: 1; outline: 3px solid rgba(47, 155, 121, 0.22); outline-offset: -3px; }
.crisis-level-options strong { color: inherit; font-size: 15px; font-weight: 550; line-height: 1.4; }
.crisis-boolean-field { display: grid; grid-template-columns: 180px minmax(220px, 1fr); gap: 18px; align-items: center; }
.crisis-inline-options label { min-width: 82px; }
.crisis-details .check-row { font-size: 15px; }
.crisis-details .field-help { margin: -8px 0 0; font-size: 12px; }
.is-disabled { opacity: 0.5; }
.is-disabled .crisis-segments { background: #f2f5f3; }
.is-disabled .crisis-segments label { color: #87968f; background: #f2f5f3; cursor: not-allowed; }
.disclosure-grid { display: flex; grid-template-columns: none; gap: 0; }
.disclosure-grid label { min-height: 40px; padding: 0 18px; border: 0; border-right: 1px solid #d7e8df; border-radius: 0; font-size: 15px; }
.crisis-disclosure-group { margin-top: 4px; }
.crisis-disclosure-group .field-help { margin: -4px 0 0; }
.crisis-disclosure-group .crisis-selected-explanation { grid-column: auto; margin: -5px 0 0; }

.config-error { min-height: 17px; margin: -3px 0 0; color: #b4514d; font-size: 12px; line-height: 1.4; }
.btn-primary { padding: 14px 24px; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(135deg, #3bad88, #278b70); box-shadow: 0 9px 20px rgba(47, 155, 121, 0.2); font-size: 15px; font-weight: 650; cursor: pointer; }
.btn-primary:disabled { opacity: 0.42; box-shadow: none; cursor: not-allowed; }
.btn-primary:not(:disabled):hover { filter: brightness(1.04); }

.preview-panel { position: sticky; top: 24px; min-height: 410px; padding: 36px; border-radius: 22px; display: flex; align-items: center; justify-content: center; text-align: center; }
.preview-empty { max-width: 290px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.preview-content { max-width: 360px; }
.preview-icon { width: 82px; height: 82px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #eefaf3, #dff3e8); box-shadow: 0 9px 22px rgba(47, 155, 121, 0.12); font-size: 40px; }
.preview-content h3 { margin: 0 0 12px; font-size: 19px; }
.preview-content p { color: var(--muted); line-height: 1.7; font-size: 14px; }
.preview-note { margin-top: 17px; font-size: 12px !important; opacity: 0.85; }

.call-container { max-width: 500px; min-height: 100vh; margin: 0 auto; padding: 18px; display: flex; align-items: center; }
.voice-call-wrap { position: relative; width: 100%; min-height: 72vh; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); background: rgba(255,255,255,0.94); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.voice-call-wrap .avatar-wrap { width: 122px; height: 122px; margin-bottom: 17px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #eefaf3, #dff3e8); box-shadow: 0 12px 30px rgba(47,155,121,0.14); font-size: 50px; }
.voice-call-wrap .name { margin-bottom: 5px; font-size: 20px; font-weight: 650; }
.voice-call-wrap .status, .calling-text, .calling-sub { color: var(--muted); }
.voice-call-wrap .status { margin-bottom: 25px; font-size: 14px; }
.voice-output-status { min-height: 22px; margin: -12px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.voice-retry-play { min-height: 42px; margin: -4px 0 14px; padding: 8px 15px; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid #b9ddcb; border-radius: 10px; font-weight: 650; cursor: pointer; }
.voice-retry-play:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.25); outline-offset: 2px; }
.voice-text-fallback { width: min(100%, 390px); max-height: 150px; overflow: auto; margin: -3px 0 16px; padding: 10px 13px; color: var(--text); background: #f5faf7; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.voice-text-fallback strong { color: var(--accent-deep); font-size: 12px; }
.voice-text-fallback p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.voice-call-wrap .timer { margin-bottom: 24px; font-size: 28px; font-variant-numeric: tabular-nums; }
.waveform-wrap { height: 48px; margin-bottom: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.waveform-bar { width: 4px; min-height: 8px; max-height: 48px; background: #5bb895; border-radius: 2px; animation: wave 0.6s ease-in-out infinite alternate; }
.waveform-bar:nth-child(2n) { animation-delay: .1s; } .waveform-bar:nth-child(3n) { animation-delay: .2s; }
@keyframes wave { from { height: 8px; } to { height: 48px; } }
.hangup-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--danger); border: 0; border-radius: 50%; box-shadow: 0 8px 22px rgba(217,103,98,.26); font-size: 28px; cursor: pointer; transition: transform .15s ease; }
.hangup-btn:hover { transform: scale(1.04); }
.calling-wrap { padding: 48px 24px; text-align: center; }
.ring-icon { margin-bottom: 24px; font-size: 64px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .72; transform: scale(1.04); } }
.calling-text { margin-bottom: 8px; font-size: 18px; }
.calling-sub { font-size: 14px; opacity: .85; }

.report-wrap { max-width: 760px; margin: 0 auto; padding: 34px 24px 50px; }
.report-wrap h2 { margin: 0 0 21px; font-size: 22px; }
.report-loading { padding: 40px 0; color: var(--muted); text-align: center; }
.report-degraded { margin-bottom: 16px; padding: 12px 16px; color: #8a513f; background: #fff8f2; border: 1px solid #efcfbe; border-radius: 10px; font-size: 13px; }
.report-section { margin-bottom: 14px; padding: 20px 22px; border-radius: 16px; }
.report-section h3 { margin: 0 0 12px; font-size: 15px; }
.report-section p { margin: 0; line-height: 1.75; font-size: 14px; }
.report-section ul { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.75; font-size: 14px; }
.training-result .report-kind { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.training-result .report-basis { color: var(--muted); font-size: 12px; }
.overall-summary { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.overall-summary strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.training-settings { padding-top: 18px; padding-bottom: 18px; }
.training-setting-list { display: grid; gap: 8px; margin: 0; }
.training-setting-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13px; line-height: 1.55; }
.training-setting-row dt { color: var(--muted); }
.training-setting-row dd { margin: 0; color: var(--text); }
.crisis-settings-toggle { margin-top: 13px; padding: 6px 0; color: var(--accent-deep); background: transparent; border: 0; font-size: 12px; cursor: pointer; }
.crisis-settings-toggle:hover { text-decoration: underline; }
.crisis-settings-toggle:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.crisis-settings-detail { margin-top: 7px; padding: 12px; background: var(--elevated); border-radius: 10px; }
.report-modules-title { margin: 24px 2px 12px; font-size: 16px; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.score-row { display: flex; justify-content: space-between; padding: 10px 13px; background: var(--elevated); border-radius: 8px; font-size: 13px; }
.stage-head { margin-bottom: 12px; color: var(--accent-deep); }
.report-evidence { margin-top: 12px !important; color: var(--muted); }
.total-score { color: var(--accent-deep); font-size: 21px !important; font-weight: 750; }
.stage-brief { color: var(--text); }
.stage-not-applicable { display: inline-block; margin: 0 0 8px !important; padding: 4px 8px; color: var(--muted); background: var(--elevated); border-radius: 999px; font-size: 11px !important; }
.stage-details-toggle { margin-top: 13px; padding: 6px 0; color: var(--accent-deep); background: transparent; border: 0; font-size: 12px; cursor: pointer; }
.stage-details-toggle:hover { text-decoration: underline; }
.stage-details-toggle:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.stage-details { display: grid; gap: 10px; margin-top: 9px; }
.feedback-item { padding: 13px; background: var(--elevated); border-radius: 10px; }
.feedback-item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.feedback-type { display: inline-block; margin-bottom: 6px; color: var(--accent-deep); font-size: 12px; font-weight: 700; }
.feedback-improvement .feedback-type { color: #95604e; }
.feedback-evidence { padding-left: 15px; border-left: 1px solid var(--line); }
.feedback-evidence > strong { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.learning-extension { width: 100%; box-sizing: border-box; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.learning-extension summary { color: var(--accent-deep); font-size: 12px; font-weight: 700; cursor: pointer; }
.learning-extension summary:hover { text-decoration: underline; }
.learning-extension summary:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.learning-extension-body { padding-top: 8px; }
.learning-extension-body > strong { font-size: 13px; }
.learning-extension-body ul { margin: 7px 0; padding-left: 20px; }
.learning-extension-body li { margin: 4px 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.learning-tip { margin: 7px 0 !important; color: var(--muted); font-size: 12px !important; }
.learning-topic-button { padding: 3px 0; color: var(--accent-deep); background: transparent; border: 0; font-size: 12px; cursor: pointer; }
.learning-topic-button:hover { text-decoration: underline; }
.learning-topic-button:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.learning-topic-status { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.p2-4c-preview { padding-top: 36px; padding-bottom: 48px; }
.preview-header { margin-bottom: 24px; }
.preview-header h1 { margin: 9px 0; font-size: 28px; }
.preview-header p { max-width: 760px; color: var(--muted); line-height: 1.7; }
.preview-badge { display: inline-block; padding: 4px 9px; color: #95604e; background: #fff2ec; border-radius: 999px; font-size: 12px; font-weight: 700; }
.preview-report-block { margin-top: 22px; }
.preview-report-block > h2 { margin: 0 0 10px; font-size: 18px; }
.evidence-list { display: grid; gap: 7px; }
.evidence-list blockquote { margin: 0; padding: 8px 10px; background: var(--surface); border-radius: 8px; }
.evidence-list blockquote span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.evidence-list blockquote p { font-size: 13px; line-height: 1.55; }
.empty-evidence { color: var(--muted); font-size: 12px !important; }
.learning-center-wrap { max-width: 820px; margin: 0 auto; padding: 30px 24px 54px; }
.module-header { margin-bottom: 24px; }
.module-header > span { color: var(--accent-deep); font-size: 12px; font-weight: 700; }
.module-header h1 { margin: 7px 0 6px; font-size: clamp(25px, 4vw, 32px); }
.module-header p { margin: 0; color: var(--muted); font-size: 14px; }
.learning-index-group { margin-bottom: 28px; }
.learning-index-group > h2 { margin: 0 0 12px; font-size: 18px; }
.learning-group-description { margin: -3px 0 16px; color: var(--muted); font-size: 13px; }
.learning-legend { display: flex; gap: 18px; margin-bottom: 22px; font-size: 12px; color: var(--muted); }
.learning-legend span:first-child { color: var(--accent-deep); }
.learning-stage-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.learning-stage-card { min-width: 0; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.learning-stage-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 9px; font-size: 16px; }
.learning-stage-number { color: var(--accent-deep); font-size: 13px; }
.learning-stage-card > p { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.learning-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.learning-skill-open, .learning-skill-coming { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 13px; text-align: left; }
.learning-skill-open { color: var(--accent-deep); background: var(--accent-soft); border: 1px solid transparent; cursor: pointer; }
.learning-skill-open:hover { border-color: var(--accent-deep); }
.learning-skill-open:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.learning-skill-coming { color: var(--muted); background: rgba(128, 128, 128, 0.05); border: 1px solid transparent; }
.learning-skills small { font-size: 11px; white-space: nowrap; }
.learning-reference-note { color: var(--muted); font-size: 12px; }
#learning-index-content > .learning-references { display: block; border-top: 1px solid var(--line); padding-top: 24px; }
.learning-reference-card { overflow-wrap: anywhere; }
.learning-back { min-height: 46px; padding: 10px 17px; color: var(--accent-deep); background: #fffefa; border: 1px solid #afd1b5; border-radius: 11px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(39, 104, 65, 0.08); }
.learning-back:hover { background: #eef7eb; border-color: #79aa86; }
.learning-back:focus-visible { outline: 3px solid rgba(47, 155, 121, 0.2); outline-offset: 2px; }
.learning-back-bottom { margin-top: 22px; }
.learning-topic { margin-top: 14px; }
.learning-topic-header { margin-bottom: 16px; padding: 25px 27px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.learning-topic-header > span { display: inline-block; padding: 4px 9px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; font-size: 12px; font-weight: 700; }
.learning-topic-header h1 { margin: 12px 0 9px; font-size: clamp(24px, 4vw, 31px); }
.learning-topic-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.learning-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.learning-content-card { margin-bottom: 14px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; }
.learning-content-grid .learning-content-card { margin-bottom: 0; }
.learning-content-card h2, .learning-references > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #234f3d; font-size: 21px; font-weight: 750; line-height: 1.45; }
.learning-content-card h2::before { content: ''; flex: 0 0 5px; height: 22px; border-radius: 4px; background: #55ad7d; }
.learning-content-card p { margin: 0; font-size: 14px; line-height: 1.8; }
.learning-points, .learning-mistakes, .learning-example-list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.75; }
.learning-points li, .learning-mistakes li, .learning-example-list li { margin: 4px 0; }
.learning-examples { margin-top: 14px; }
.learning-example-list { display: grid; gap: 9px; padding: 0; list-style: none; }
.learning-example-list li { position: relative; margin: 0; padding: 12px 16px 12px 42px; border: 1px solid #e1ebe2; border-radius: 11px; background: #f6faf5; }
.learning-example-list li::before { content: '“'; position: absolute; left: 14px; top: 2px; color: #62a780; font-family: Georgia, serif; font-size: 34px; line-height: 1.2; }
.learning-example-note { margin-top: 14px !important; color: var(--muted); font-size: 13px !important; }
.learning-takeaway { margin-bottom: 22px; padding: 17px 20px; background: var(--accent-soft); border-radius: 14px; }
.learning-takeaway strong { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #234f3d; font-size: 20px; }
.learning-takeaway strong::before { content: ''; flex: 0 0 5px; height: 22px; border-radius: 4px; background: #55ad7d; }
.learning-takeaway p { margin: 0; font-size: 14px; line-height: 1.75; }
.learning-references { padding-top: 4px; }
.learning-reference-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding: 22px; border: 1px solid #dce7da; border-radius: 16px; background: rgba(255, 254, 250, 0.72); }
.learning-reference-section + .learning-reference-section { margin-top: 16px; }
.learning-reference-section > h3 { grid-column: 1 / -1; margin: 0 0 3px; color: #345c48; font-size: 18px; }
.learning-reference-card { margin: 0; padding: 17px 19px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.learning-reference-card h4 { margin: 0 0 8px; font-size: 14px; }
.learning-reference-card p { margin: 5px 0; font-size: 13px; line-height: 1.65; }
.learning-reference-meta { margin: 2px 0 !important; color: var(--muted); font-size: 12px !important; }
.learning-reference-card a { display: inline-block; margin-top: 7px; color: var(--accent-deep); font-size: 12px; font-weight: 650; text-decoration: none; }
.learning-reference-card a:hover { text-decoration: underline; }
.placeholder-page { max-width: 600px; margin: 0 auto; padding: 100px 24px; text-align: center; }
.placeholder-page > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 18px; font-size: 26px; }
.placeholder-page h1 { margin: 0 0 22px; font-size: 28px; }
.placeholder-page h2 { margin: 0 0 9px; font-size: 17px; }
.placeholder-page p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

@media (max-width: 860px) {
  .select-layout { grid-template-columns: 1fr; }
  .preview-panel { position: static; min-height: 260px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-nav { position: sticky; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; height: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-brand { flex: 0 0 auto; padding: 0 8px 0 0; font-size: 16px; }
  .app-brand-mark { width: 29px; height: 29px; border-radius: 9px; }
  .app-nav-items { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .app-nav-item { justify-content: center; width: auto; padding: 8px 10px; font-size: 13px; }
  .app-nav-item span { display: none; }
  .learning-subnav { display: none; order: 10; flex: 0 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .app-nav-item[data-module-nav="learning"].active + .learning-subnav { display: grid; }
  .learning-subnav button { min-height: 40px; padding: 7px 6px; font-size: 12px; text-align: center; }
  .app-nav-hint { flex-basis: 100%; margin: 1px 0 0; text-align: right; }
  .app-module, .screen { min-height: calc(100vh - 50px); }
  .learning-stage-cards { grid-template-columns: 1fr; }
  .learning-reference-section { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-header { padding: 26px 18px 8px; }
  .select-layout { padding: 18px 14px 34px; }
  .sidebar { padding: 18px; border-radius: 17px; }
  .source-category-header, .switch-row, .risk-levels label, .disclosure-grid label, .check-label, .check-row { min-height: 48px; }
  .source-main-label { flex: 1; align-self: stretch; }
  .emotion-row { grid-template-columns: 1fr 30px; }
  .emotion-row input[type="range"] { grid-column: 1 / span 2; }
  .range-hint { grid-column: 1 / span 2; }
  .crisis-range { grid-template-columns: 1fr 30px; }
  .crisis-range input[type="range"], .crisis-range small { grid-column: 1 / span 2; }
  .training-setting-row { grid-template-columns: 1fr; gap: 2px; }
  .risk-levels { grid-template-columns: 1fr; }
  .crisis-details { padding: 16px; }
  .crisis-level-field, .crisis-boolean-field { grid-template-columns: 1fr; gap: 7px; }
  .crisis-selected-explanation { grid-column: 1; }
  .crisis-segments { width: 100%; min-width: 0; }
  .crisis-segments label { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .disclosure-grid { display: flex; }
  .score-grid, .feedback-item-grid { grid-template-columns: 1fr; }
  .feedback-evidence { padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .learning-center-wrap { padding: 22px 14px 40px; }
  .learning-topic-header { padding: 21px 18px; }
  .learning-content-grid { grid-template-columns: 1fr; }
  .learning-content-card { padding: 18px; }
}

/* Presentation readability and the local demo profile. */
body { font-size: 16px; line-height: 1.65; }
.app-sub, .module-header p { font-size: 16px; }
.app-nav-item { min-height: 48px; font-size: 16px; }
.sidebar-block h2 { font-size: 22px; }
.emotion-row, .source-main-label, .check-label, .check-row, .radio-card { font-size: 15px; }
.fold-toggle, .sidebar-block h2 small { font-size: 13px; }
.learning-center-wrap, .profile-wrap { max-width: 1000px; margin: 0 auto; padding: 36px 28px 56px; }
.module-header h1 { font-size: clamp(28px, 3vw, 34px); }
.learning-index-group > h2, .profile-wrap section > h2 { font-size: 22px; margin-bottom: 16px; }
.learning-stage-card { padding: 24px; }
.learning-stage-card h3 { font-size: 18px; }
.learning-stage-card > p, .learning-group-description { font-size: 15px; }
.learning-skill-open, .learning-skill-coming { font-size: 15px; padding: 12px; }
.learning-skills small, .learning-reference-meta { font-size: 13px !important; }
.learning-reference-card a { font-size: 14px; }
.learning-topic-header p, .learning-content-card p, .learning-points, .learning-mistakes, .learning-example-list, .learning-takeaway p { font-size: 16px; }
.learning-reference-card h4 { font-size: 16px; }
.learning-reference-card p { font-size: 14px; }
.learning-reference-section > h3 { font-size: 16px; }
.profile-wrap h2 { margin: 0 0 14px; font-size: 22px; }
.demo-notice { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--accent-deep); font-size: 14px; }
.profile-identity { display: flex; align-items: center; gap: 22px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.profile-avatar { flex-shrink: 0; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: var(--accent-soft); color: var(--accent-deep); font-size: 30px; }
.profile-eyebrow { color: var(--accent-deep); font-size: 14px; }
.profile-identity h2 { margin: 4px 0 7px; }
.profile-identity h2 small, .profile-history h2 small { display: inline-block; font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.profile-identity p, .profile-note p { margin: 0; color: var(--muted); }
.profile-overview, .profile-history { margin-top: 30px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.profile-stats article { padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.profile-stats article > span { color: var(--muted); font-size: 15px; }
.profile-stats strong { display: block; color: var(--accent-deep); font-size: 36px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.profile-stats small { font-size: 14px; font-weight: 400; }
.profile-history ul { padding: 0; margin: 0; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.profile-history li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; }
.profile-history li + li { border-top: 1px solid var(--line); }
.profile-history li > span { flex-shrink: 0; color: var(--muted); font-size: 13px; }
.profile-history p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.profile-note { margin-top: 24px; padding: 22px 24px; background: var(--accent-soft); border-radius: 16px; }
.profile-note strong { display: block; margin-bottom: 6px; }
@media (max-width: 760px) {
  .learning-center-wrap, .profile-wrap { padding: 24px 16px 40px; }
  .learning-stage-card { padding: 18px; }
  .profile-identity { padding: 20px; gap: 14px; align-items: flex-start; }
  .profile-avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; }
  .profile-stats { grid-template-columns: 1fr; gap: 10px; }
  .profile-stats article { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
  .profile-stats strong { margin: 0; font-size: 28px; }
  .profile-history li { padding: 18px; align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Learning map: warm sage surfaces with a consistent heading hierarchy. */
#module-learning { background: linear-gradient(160deg, #fafaf4 0%, #f1f7f0 58%, #fafbf7 100%); }
#learning-index-view > .module-header { position: relative; isolation: isolate; overflow: hidden; padding: 30px 32px; margin-bottom: 34px; border: 1px solid #d6e7d7; border-radius: 22px; background: linear-gradient(110deg, #edf6e9, #f8faf2); }
#learning-index-view > .module-header::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 210px; height: 210px; right: -65px; top: -95px; border: 28px solid rgba(121, 166, 123, 0.09); border-radius: 50%; }
#learning-index-view > .module-header h1 { margin: 0 0 8px; color: #218451; font-weight: 750; letter-spacing: 0.04em; }
#learning-index-view > .module-header p { color: #526e5b; line-height: 1.8; }
#learning-index-content > .learning-index-group { margin-bottom: 64px; scroll-margin-top: 24px; }
#learning-index-content > .learning-index-group + .learning-index-group { margin-top: 10px; }
#learning-index-content > .learning-index-group > h2,
#learning-index-content > .learning-references > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #2d5742; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; }
#learning-index-content > .learning-index-group > h2::before,
#learning-index-content > .learning-references > h2::before { content: ''; flex: 0 0 5px; height: 22px; background: #7ba887; border-radius: 4px; }
#learning-index-content .learning-group-description { margin: 0 0 20px 17px; color: #647c69; }
#learning-index-content .learning-stage-cards { grid-template-columns: 1fr; gap: 26px; }
#learning-index-content .learning-stage-card { padding: 28px 30px; border-color: #dce7da; border-radius: 20px; background: #fffefa; box-shadow: 0 10px 28px rgba(51, 82, 50, 0.065); }
#learning-index-content .learning-stage-card h3 { align-items: center; gap: 12px; color: #30523e; margin-bottom: 14px; line-height: 1.5; }
#learning-index-content .learning-stage-number { display: inline-grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: #edf3e7; color: #547b52; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#learning-index-content .learning-stage-card > p { color: #627462; line-height: 1.8; margin-bottom: 20px; }
#learning-index-content .learning-skills { gap: 11px; }
#learning-index-content .learning-skill-open { min-height: 52px; padding: 13px 17px; }
#learning-index-content .learning-skill-open { color: #276841; background: #e9f3e5; border-color: #d8e8d2; border-radius: 10px; }
#learning-index-content .learning-skill-open:hover { background: #deecd8; border-color: #8eaf85; }
#learning-index-content .learning-skill-open > span { font-weight: 600; }
#learning-index-content .learning-skill-coming { color: #6d7868; background: #f5f5ee; border-radius: 10px; }
#learning-index-content > .learning-references { margin-top: 10px; padding: 28px; border: 1px solid #dce5d6; border-radius: 20px; background: #edf2e8; scroll-margin-top: 24px; }
#learning-index-content .learning-reference-section > h3 { color: #576e4f; font-weight: 600; margin-bottom: 14px; }
#learning-index-content .learning-reference-card { background: #fffefa; border-color: #dde5d6; border-radius: 14px; padding: 20px; }
@media (max-width: 760px) {
  #learning-index-view > .module-header { padding: 24px 20px; margin-bottom: 28px; border-radius: 18px; }
  #learning-index-content > .learning-index-group > h2,
  #learning-index-content > .learning-references > h2 { font-size: 20px; }
  #learning-index-content .learning-stage-cards { gap: 20px; }
  #learning-index-content > .learning-index-group { margin-bottom: 48px; scroll-margin-top: 132px; }
  #learning-index-content .learning-stage-card { padding: 22px 20px; }
  #learning-index-content > .learning-references { padding: 20px 16px; scroll-margin-top: 132px; }
}

#learning-index-view > .module-header { min-height: 190px; padding-right: 290px; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 760px) {
  .sidebar-block h2 { font-size: 20px; }
  .crisis-preset-head strong { font-size: 17px; }
}
.learning-header-art { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 260px; height: auto; pointer-events: none; }
@media (max-width: 760px) {
  #learning-index-view > .module-header { min-height: 170px; padding-right: 140px; }
  .learning-header-art { width: 150px; right: -12px; }
}
@media (max-width: 440px) {
  #learning-index-view > .module-header { padding-right: 20px; padding-bottom: 95px; }
  .learning-header-art { width: 140px; top: auto; bottom: -7px; right: 8px; transform: none; }
}

/* Matching illustrated headers for training setup and profile. */
.illustrated-header { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; padding: 30px 290px 30px 32px; display: flex; flex-direction: column; justify-content: center; text-align: left; border: 1px solid #d6e7d7; border-radius: 22px; background: linear-gradient(110deg, #edf6e9, #f8faf2); }
.app-header.illustrated-header { max-width: 1104px; width: calc(100% - 56px); margin: 36px auto 0; }
.illustrated-header::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 210px; height: 210px; right: -65px; top: -95px; border: 28px solid rgba(121, 166, 123, 0.09); border-radius: 50%; }
.illustrated-header h1 { margin: 0 0 8px; color: #218451; font-size: clamp(28px, 3vw, 34px); font-weight: 750; letter-spacing: 0.04em; line-height: 1.4; }
.illustrated-header p { color: #526e5b; font-size: 16px; line-height: 1.8; }
.page-header-art { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 260px; height: auto; pointer-events: none; }
@media (max-width: 760px) {
  .illustrated-header { min-height: 170px; padding: 24px 140px 24px 20px; border-radius: 18px; }
  .app-header.illustrated-header { width: calc(100% - 32px); margin-top: 24px; }
  .page-header-art { width: 150px; right: -12px; }
}
@media (max-width: 440px) {
  .illustrated-header { padding-right: 20px; padding-bottom: 95px; }
  .page-header-art { width: 140px; top: auto; bottom: -7px; right: 8px; transform: none; }
}

.profile-login { position: absolute; top: 16px; right: 20px; z-index: 1; min-height: 40px; padding: 6px 20px; color: #276841; background: #fffefa; border: 1px solid #b8d1b4; border-radius: 999px; font-size: 14px; cursor: pointer; }
.profile-login:hover { background: #e9f3e5; }
.profile-login:focus-visible { outline: 3px solid #218451; outline-offset: 3px; }
#module-profile .illustrated-header { padding-top: 64px; }

/* Training configuration: crisp white-and-green SaaS iteration. */
#screen-select {
  --scene-accent: #168a63;
  --scene-accent-soft: #e9f6f0;
  --scene-text: #15352a;
  --scene-muted: #64766f;
  --scene-line: #dce5e1;
  background: #fafcfb;
}
#screen-select .app-header.illustrated-header {
  width: auto;
  max-width: 1320px;
  min-height: 150px;
  margin: 0 auto;
  padding: 38px 250px 18px 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#screen-select .illustrated-header::after { display: none; }
#screen-select .illustrated-header h1 {
  color: var(--scene-text);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 720;
  letter-spacing: -0.02em;
}
#screen-select .illustrated-header p { color: var(--scene-muted); font-size: 16px; }
#screen-select .page-header-art { right: 22px; width: 215px; }
#screen-select .select-layout {
  grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
  gap: 18px;
  max-width: 1320px;
  padding: 18px 28px 48px;
}
#screen-select .sidebar,
#screen-select .preview-panel {
  border-color: var(--scene-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
#screen-select .sidebar { gap: 24px; padding: 24px; }
#screen-select .sidebar-block + .sidebar-block { margin-top: 2px; }
#screen-select .sidebar-block h2,
#screen-select .training-type-block h2 {
  margin: 0 0 12px;
  color: var(--scene-text);
  font-size: 18px;
  font-weight: 680;
  line-height: 1.45;
}
.training-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.training-type-options label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 11px 15px;
  border: 1px solid var(--scene-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.training-type-options label:has(input:checked) {
  border-color: var(--scene-accent);
  background: var(--scene-accent-soft);
  box-shadow: inset 0 0 0 1px var(--scene-accent);
}
.training-type-options span { display: grid; gap: 1px; }
.training-type-options strong { color: var(--scene-text); font-size: 15px; font-weight: 680; }
.training-type-options small { color: var(--scene-muted); font-size: 12px; }
.training-type-help { margin: 9px 0 0; color: var(--scene-muted); font-size: 12px; line-height: 1.55; }
.config-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 -4px;
  color: var(--scene-accent);
  font-size: 16px;
  font-weight: 700;
}
.config-section-heading::after { content: ''; flex: 1; height: 1px; background: var(--scene-line); }
#screen-select .distress-options { gap: 8px; }
#screen-select .distress-card,
#screen-select .source-category {
  border-color: var(--scene-line);
  border-radius: 10px;
  background: #fbfdfc;
}
#screen-select .distress-card:has(input:checked) {
  border-color: #9ed6c2;
  background: var(--scene-accent-soft);
}
#screen-select .source-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#screen-select .source-category:last-child { grid-column: 1 / -1; }
#screen-select .btn-primary {
  align-self: flex-end;
  min-width: 250px;
  border-radius: 9px;
  background: var(--scene-accent);
  box-shadow: none;
}
#screen-select .preview-panel {
  top: 20px;
  min-height: 470px;
  align-items: flex-start;
  padding: 28px;
  text-align: left;
}
#screen-select .preview-content { width: 100%; max-width: none; }
#screen-select .preview-icon { width: 58px; height: 58px; margin: 18px auto 12px; font-size: 27px; box-shadow: none; }
.preview-type {
  display: table;
  margin: 0 auto 13px;
  padding: 5px 13px;
  color: var(--scene-accent);
  background: var(--scene-accent-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
#screen-select .preview-content h3 { text-align: center; }
#screen-select .preview-content > #preview-desc { margin: 0 auto 24px; max-width: 300px; text-align: center; }
.preview-facts { margin: 0; padding: 18px 0; border-top: 1px solid var(--scene-line); border-bottom: 1px solid var(--scene-line); }
.preview-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; }
.preview-facts dt { color: var(--scene-muted); font-size: 13px; }
.preview-facts dd { margin: 0; color: var(--scene-text); font-size: 14px; font-weight: 680; }
.preview-mode-note { margin: 18px 0 0; padding: 14px 16px; color: var(--scene-accent) !important; background: var(--scene-accent-soft); border-radius: 9px; font-weight: 600; }
#screen-select .preview-note { margin-bottom: 0; text-align: center; }

@media (max-width: 860px) {
  #screen-select .select-layout { grid-template-columns: 1fr; }
  #screen-select .preview-panel { position: static; min-height: 300px; }
  #screen-select .source-groups { grid-template-columns: 1fr; }
  #screen-select .source-category:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  #screen-select .app-header.illustrated-header { min-height: 165px; padding: 24px 130px 14px 18px; }
  #screen-select .page-header-art { width: 130px; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); }
  .training-type-options { grid-template-columns: 1fr; }
  #screen-select .btn-primary { width: 100%; min-width: 0; }
}
.profile-login-note { padding: 12px 16px; background: #edf3e7; border-radius: 10px; color: #526e5b; font-size: 14px; }

.crisis-record { max-width: 780px; margin-inline: auto; }
.crisis-record form { display: grid; gap: 12px; }
.crisis-record label, .crisis-record legend, .crisis-record dt { font-weight: 600; font-size: 1rem; }
.crisis-record select, .crisis-record textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 12px; border: 1px solid #a9c4b0; border-radius: 8px; background: #fff; color: #244d3b; }
.crisis-record textarea { resize: vertical; min-height: 76px; }
.crisis-record fieldset { min-width: 0; border: 0; padding: 8px 0; margin: 0; display: grid; gap: 12px; }
.crisis-record dd { margin: 6px 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crisis-record p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.crisis-record :focus-visible { outline: 3px solid #237448; outline-offset: 3px; }
#record-error { color: #9d2424; margin: 0; }
.stage-score-meaning { margin-left: 10px; color: #9a5b43; font-size: 14px; font-weight: 600; }
.simulation-consistency { border-color: #e6cdbd; background: #fff9f4; }
.simulation-consistency h3 { color: #8a513f; }
.simulation-consistency p { color: #6f5d55; }

/* Learning content details */
.learning-steps ol { margin: 0; padding-left: 1.5em; }
.learning-steps li { padding-left: 5px; margin: 10px 0; font-size: 16px; line-height: 1.8; }
.learning-topic :focus-visible { outline: 3px solid #237448; outline-offset: 4px; }
.learning-topic { overflow-wrap: anywhere; }

/* Unified training flow: one visual grid across type, visitor-state and crisis pages. */
:root {
  --training-nav-width: 248px;
  --training-form-width: 700px;
  --training-summary-width: 360px;
  --training-column-gap: 44px;
  --training-canvas-min-height: calc(100vh - 28px);
  --training-olive: #91a05f;
  --training-forest: #163c32;
  --training-muted: #6f817a;
  --training-mint: rgba(232, 247, 239, 0.62);
  --training-mint-selected: rgba(215, 242, 229, 0.78);
  --training-glass-border: rgba(153, 199, 177, 0.46);
}

.app-shell { grid-template-columns: var(--training-nav-width) minmax(0, 1fr); gap: 14px; padding: 14px 14px 14px 0; }
.app-nav {
  position: sticky;
  top: 14px;
  width: var(--training-nav-width);
  height: calc(100vh - 28px);
  margin-left: 14px;
  padding: 28px 18px;
  color: #fff;
  background: linear-gradient(155deg, #87975a 0%, #9baa68 100%);
  border: 0;
  border-radius: 30px;
  box-shadow: 0 18px 45px rgba(58, 81, 47, 0.14);
  backdrop-filter: none;
}
.app-brand { color: #fff; padding: 6px 10px 34px; font-size: 23px; }
.app-brand-mark { color: #78914f; background: rgba(255,255,255,.94); border-radius: 50%; }
.app-nav-items { gap: 12px; }
.app-nav-item { min-height: 58px; padding: 14px 15px; color: rgba(255,255,255,.83); border-radius: 14px; font-size: 16px; }
.app-nav-item:hover { color: #fff; background: rgba(255,255,255,.12); }
.app-nav-item.active { color: #174c3d; background: rgba(255,255,255,.9); }
.nav-chevron { margin-left: auto; font-size: 18px; }
.learning-subnav { margin-left: 34px; border-left-color: rgba(255,255,255,.35); }
.learning-subnav button { color: rgba(255,255,255,.8); }
.learning-subnav button:hover { color: #fff; background: rgba(255,255,255,.1); }
.app-main { padding-left: 14px; }

.training-scene-screen {
  --scene-accent: #168a63;
  --scene-accent-soft: #e9f6f0;
  --scene-text: var(--training-forest);
  --scene-muted: var(--training-muted);
  --scene-line: #dce7e1;
  min-height: var(--training-canvas-min-height);
  overflow: clip;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(214,230,220,.78);
  border-radius: 30px;
  box-shadow: 0 18px 55px rgba(49, 86, 68, .08);
}

.type-screen-inner { position: relative; min-height: var(--training-canvas-min-height); max-width: 1104px; margin: 0 auto; padding: 92px 30px 54px; text-align: center; }
.type-hero-art { position: absolute; top: 34px; right: -8px; width: 235px; height: auto; }
.scene-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 22px; color: var(--scene-accent); background: rgba(229,245,237,.82); border: 1px solid rgba(196,226,211,.5); border-radius: 999px; font-size: 14px; font-weight: 700; }
.type-screen-inner h1 { margin: 28px 0 16px; color: var(--training-forest); font-size: clamp(34px, 3.5vw, 46px); letter-spacing: -.03em; }
.type-intro { margin: 0 auto; color: var(--training-muted); font-size: 17px; line-height: 1.85; }
.type-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; width: min(100%, 790px); margin: 36px auto 0; }
.type-choice-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 330px;
  padding: 30px 28px 26px;
  color: #49675d;
  background: linear-gradient(145deg, rgba(255,255,255,.7), var(--training-mint));
  border: 1px solid var(--training-glass-border);
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.92), 0 14px 35px rgba(56,104,82,.07);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.type-choice-card:hover { transform: translateY(-2px); border-color: rgba(61,160,121,.58); }
.type-choice-icon { display: grid; place-items: center; width: 92px; height: 92px; background: rgba(225,242,232,.8); border-radius: 50%; font-size: 42px; }
.type-choice-card strong { font-size: 25px; font-weight: 680; }
.type-choice-card small { min-height: 52px; color: var(--training-muted); font-size: 14px; line-height: 1.65; }
.type-choice-action { align-self: end; width: 100%; padding: 14px 18px; color: #fff; background: linear-gradient(135deg,#0ca071,#178b68); border-radius: 999px; font-weight: 700; }
.type-difference { margin: 26px 0 0; color: var(--training-muted); font-size: 13px; }

.scene-header { position: relative; display: flex; align-items: center; justify-content: space-between; width: 1104px; min-height: 142px; margin: 0 auto; padding: 34px 250px 16px 0; }
.scene-header > div { margin-left: 26px; }
.scene-header h1 { margin: 0 0 7px; color: var(--training-forest); font-size: 34px; letter-spacing: -.025em; }
.scene-header p { margin: 0; color: var(--training-muted); font-size: 15px; }
.scene-header .page-header-art { right: 0; width: 220px; }
.scene-toolbar { display: flex; align-items: center; justify-content: space-between; width: 1104px; margin: 0 auto 20px; }
.scene-steps { display: flex; align-items: center; gap: 10px; color: var(--training-muted); font-size: 14px; }
.scene-steps { margin-left: 26px; }
.scene-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; }
.scene-steps span.done { color: #fff; background: #879b5c; }
.scene-steps span.active { color: #fff; background: var(--scene-accent); }
.scene-steps strong { color: var(--training-forest); font-size: 14px; }
.scene-steps i { width: 58px; height: 1px; margin: 0 7px; background: #69af93; }
.scene-type-actions { display: flex; align-items: center; gap: 16px; }
.scene-page-back { min-height: 30px; margin: -2px 0 10px; text-align: right; }
.scene-page-back button { padding: 6px 0; color: var(--scene-accent); background: transparent; border: 0; cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

#screen-select .select-layout, #screen-crisis .select-layout {
  grid-template-columns: minmax(0, var(--training-form-width)) var(--training-summary-width);
  gap: var(--training-column-gap);
  width: 1104px;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 38px;
  align-items: stretch;
}
.scene-card { background: rgba(255,255,255,.72) !important; border: 1px solid rgba(204,224,214,.82) !important; box-shadow: inset 0 1px rgba(255,255,255,.95), 0 12px 32px rgba(49,91,71,.055) !important; backdrop-filter: blur(14px); }
#screen-select .sidebar { min-height: 610px; gap: 18px; padding: 24px 26px; border-radius: 18px; }
#screen-select .sidebar-block + .sidebar-block { margin-top: 0; }
#screen-select .sidebar-block h2 { color: var(--training-forest); font-size: 19px; }
.field-help { color: #82928c; }
#screen-select .distress-card, #screen-select .source-category {
  background: linear-gradient(145deg, rgba(255,255,255,.64), var(--training-mint));
  border: 1px solid var(--training-glass-border);
  box-shadow: inset 0 1px rgba(255,255,255,.88), 0 7px 18px rgba(48,100,77,.035);
  backdrop-filter: blur(10px);
}
#screen-select .distress-card:has(input:checked), #screen-select .source-category:has(input:checked) { background: var(--training-mint-selected); border-color: #54b490; box-shadow: inset 0 0 0 1px rgba(47,167,124,.18); }
.distress-card strong, .source-main-copy strong { color: #49675d !important; font-weight: 620 !important; }
#screen-select .source-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 12px; }
#screen-select .source-category { width: 100%; min-height: 66px; }
#screen-select .source-category:last-child { grid-column: auto; }
.source-category-header { height: 100%; }

#screen-select .preview-panel { position: sticky; top: 20px; display: flex; flex-direction: column; min-height: 610px; height: fit-content; padding: 26px 28px; align-items: stretch; justify-content: flex-start; text-align: left; border-radius: 18px; }
#screen-select .preview-panel > h2 { margin: 0; color: var(--training-forest); font-size: 20px; }
#screen-select .preview-empty { margin: auto; text-align: center; }
#screen-select .preview-content { display: flex; flex: 1; flex-direction: column; justify-content: flex-start; width: 100%; padding-top: 30px; }
#screen-select .preview-icon { position: relative; width: 82px; height: 82px; margin: 0 auto 20px; overflow: visible; font-size: 34px; }
#screen-select .preview-icon::before, #screen-select .preview-icon::after { position: absolute; top: 42px; color: #7f9d58; font-size: 33px; line-height: 1; }
#screen-select .preview-icon::before { right: calc(100% - 5px); content: '❧'; transform: rotate(30deg); }
#screen-select .preview-icon::after { left: calc(100% - 5px); content: '❧'; transform: scaleX(-1) rotate(30deg); }
#screen-select .preview-content h3 { color: var(--training-forest); font-size: 19px; font-weight: 700; }
#screen-select .preview-content > #preview-desc { margin-bottom: 26px; }
#screen-select .preview-panel .btn-primary { width: 100%; min-width: 0; margin-top: auto; border-radius: 999px; }

#screen-crisis .crisis-config-card, #screen-crisis .crisis-summary { min-height: 610px; padding: 24px 26px; border-radius: 18px; }
.crisis-page-actions { min-height: 28px; text-align: right; }
#screen-crisis .crisis-panel { margin: 0; padding: 0; background: transparent; border: 0; }
#screen-crisis .crisis-details { padding: 18px; background: rgba(255,255,255,.52); border-color: var(--training-glass-border); }
#screen-crisis .crisis-segments { display: grid; width: 300px; min-width: 300px; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--training-mint); border-color: var(--training-glass-border); backdrop-filter: blur(10px); }
#screen-crisis .crisis-segments label, #screen-crisis .crisis-inline-options label, #screen-crisis .disclosure-grid label { min-width: 0; width: auto; padding: 0 9px; color: #587069; background: rgba(255,255,255,.28); }
#screen-crisis .crisis-segments label:has(input:checked) { color: #14795d; background: var(--training-mint-selected); }
#screen-crisis .crisis-summary { position: sticky; top: 20px; display: flex; flex-direction: column; height: fit-content; }
#screen-crisis .crisis-summary h2 { margin: 0 0 28px; color: var(--training-forest); font-size: 20px; }
#screen-crisis .crisis-summary dl { display: grid; grid-template-columns: 110px 1fr; gap: 12px; margin: 0; padding: 22px 18px; background: var(--training-mint); border-radius: 14px; }
#screen-crisis .crisis-summary dt { color: var(--training-muted); }
#screen-crisis .crisis-summary dd { margin: 0; color: #49675d; font-weight: 650; }
.crisis-summary-tip { margin: 18px 0; padding: 14px 16px; color: #547068; background: rgba(226,244,234,.74); border-radius: 12px; font-size: 13px; line-height: 1.65; }
#screen-crisis .crisis-summary .btn-primary { width: 100%; margin-top: auto; border-radius: 999px; }

@media (max-width: 1220px) {
  :root { --training-nav-width: 210px; --training-form-width: 1fr; --training-summary-width: 320px; --training-column-gap: 24px; }
  .scene-header, .scene-toolbar, #screen-select .select-layout, #screen-crisis .select-layout { width: calc(100% - 40px); }
}
@media (max-width: 900px) {
  #screen-select .select-layout, #screen-crisis .select-layout { grid-template-columns: 1fr; }
  #screen-select .preview-panel, #screen-crisis .crisis-summary { position: static; min-height: 360px; }
  .scene-header { padding-right: 190px; }
  .scene-header .page-header-art { width: 175px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; padding: 0; }
  .app-main { padding-left: 0; }
  .app-nav { position: relative; top: 0; width: 100%; height: auto; margin: 0; padding: 10px 12px; border-radius: 0; }
  .type-screen-inner { padding-top: 150px; }
  .type-hero-art { top: 20px; right: 20px; width: 150px; }
  .type-choice-grid { grid-template-columns: 1fr; }
  .scene-toolbar { align-items: flex-start; gap: 16px; }
  .scene-steps { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  #screen-select .source-groups { grid-template-columns: 1fr; }
  .scene-header { min-height: 170px; padding: 24px 130px 15px 0; }
  .scene-header h1 { font-size: 27px; }
  .scene-header .page-header-art { width: 125px; }
  .scene-type-actions { align-items: flex-end; flex-direction: column; }
}

/* Functional iteration: compact back action, detailed sources, live records and real history. */
#screen-select .sidebar, #screen-crisis .crisis-config-card { position: relative; }
.scene-page-back { position: absolute; top: 17px; right: 26px; z-index: 2; min-height: 0; margin: 0; }
#screen-select .sidebar > .sidebar-block:first-of-type, #screen-crisis #crisis-options { padding-top: 28px; }

#screen-select .source-category-header { padding: 10px 12px; }
#screen-select .source-main-label { min-width: 0; width: auto; flex: 1; }
.source-detail-toggle { flex: 0 0 auto; padding: 7px 2px 7px 10px; color: var(--scene-accent); background: transparent; border: 0; font-size: 12px; font-weight: 650; cursor: pointer; }
.source-detail-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.source-detail-panel { margin: 0 12px 12px; padding: 11px 12px; background: rgba(225,244,234,.62); border: 1px solid rgba(96,177,142,.28); border-radius: 12px; }
.source-detail-panel > span { display: block; margin-bottom: 9px; color: #789087; font-size: 11px; }
.source-detail-panel > div { display: flex; flex-wrap: wrap; gap: 8px; }
.source-detail-panel label { cursor: pointer; }
.source-detail-panel input { position: absolute; opacity: 0; pointer-events: none; }
.source-detail-panel label span { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 11px; color: #5f766e; background: rgba(255,255,255,.72); border: 1px solid #d6e7df; border-radius: 999px; font-size: 12px; }
.source-detail-panel input:checked + span { color: #14795d; background: #dff3e9; border-color: #45ad88; box-shadow: inset 0 0 0 1px rgba(38,148,111,.12); }
#screen-select .source-category.source-category-other { grid-column: 1 / -1; min-height: 60px; }
#screen-select .source-category-other .source-custom-wrap { margin-top: 0; }
#screen-select .source-category:has(.source-detail-panel:not([hidden])) { grid-column: 1 / -1; }
#screen-select .source-category:has(.source-detail-panel:not([hidden])) .source-category-header { height: auto; }
#screen-select .source-category:has(.source-detail-panel:not([hidden])) .source-detail-panel { position: static; width: auto; }

.voice-call-page { width: 100%; }
.voice-call-page.has-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(540px, 1.13fr); gap: 24px; align-items: start; }
.call-container.crisis-call-container { max-width: 1260px; min-height: 100vh; align-items: flex-start; padding: 28px; }
.call-record-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding: 24px; color: var(--text); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.call-record-panel header > span { display: inline-flex; padding: 5px 12px; color: #a65c4a; background: #fff0ea; border-radius: 999px; font-size: 12px; font-weight: 700; }
.call-record-panel h2 { margin: 10px 0 4px; font-size: 23px; }
.call-record-panel header p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.call-record-panel form { display: grid; gap: 16px; }
.call-record-panel fieldset { margin: 0; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); }
.call-record-panel fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
.call-record-panel legend { margin-bottom: 10px; color: var(--text); font-size: 14px; font-weight: 700; }
.call-record-safety, .call-record-segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; border: 1px solid #cfe3d8; border-radius: 9px; }
.call-record-safety label, .call-record-segments label { display: grid; min-height: 38px; place-items: center; color: #647b73; border-right: 1px solid #cfe3d8; font-size: 12px; cursor: pointer; }
.call-record-safety label:last-child, .call-record-segments label:last-child { border-right: 0; }
.call-record-safety input, .call-record-segments input { position: absolute; opacity: 0; }
.call-record-safety label:has(input:checked), .call-record-segments label:has(input:checked) { color: #14795d; background: #e0f3ea; font-weight: 700; }
.call-record-safety label:last-child:has(input:checked) { color: #a74e3e; background: #fff0eb; }
.call-record-risk-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.call-record-risk-row:last-child { margin-bottom: 0; }
.call-record-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.call-record-actions label { display: flex; min-height: 40px; align-items: center; gap: 7px; padding: 8px 10px; background: #f5faf7; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; cursor: pointer; }
.call-record-panel textarea { width: 100%; margin: 6px 0 10px; padding: 10px 11px; resize: vertical; color: var(--text); background: #fbfdfc; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 12px; line-height: 1.5; }
.call-record-panel textarea:focus { border-color: var(--accent); outline: 3px solid rgba(47,155,121,.12); }
.call-record-panel fieldset > label { color: #60766e; font-size: 12px; }
.call-record-autosave { margin: 0; color: #7b9189; font-size: 11px; text-align: center; }

#module-profile { background: linear-gradient(160deg, #f4faf6 0%, #eef8f3 58%, #f9fbf9 100%); }
.profile-history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.9); }
.profile-history-item + .profile-history-item { border-top: 1px solid var(--line); }
.profile-history-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 24px; color: var(--text); background: transparent; border: 0; text-align: left; cursor: pointer; }
.profile-history-row:hover { background: #f5faf7; }
.profile-history-main { display: grid; gap: 6px; min-width: 0; }
.profile-history-main strong { overflow-wrap: anywhere; font-size: 16px; }
.profile-history-main small { color: var(--muted); font-size: 12px; }
.profile-history-score { display: grid; grid-template-columns: auto auto auto; gap: 4px; align-items: baseline; color: var(--accent-deep); white-space: nowrap; }
.profile-history-score > strong { font-size: 25px; }
.profile-history-score small { color: var(--muted); font-size: 12px; }
.profile-history-score i { margin-left: 8px; font-style: normal; transition: transform .2s ease; }
.profile-history-row[aria-expanded="true"] .profile-history-score i { transform: rotate(180deg); }
.profile-history-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 0 24px 22px; }
.profile-history-detail section { padding: 16px 18px; background: var(--accent-soft); border-radius: 12px; }
.profile-history-detail h3 { margin: 0 0 8px; font-size: 14px; }
.profile-history-detail p, .profile-history-detail ul { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.profile-history-detail ul { padding-left: 18px; }
.profile-history-empty { padding: 42px 24px; text-align: center; }
.profile-history-empty strong { color: var(--text); }
.profile-history-empty p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1000px) {
  .voice-call-page.has-record { grid-template-columns: 1fr; }
  .call-record-panel { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .call-container.crisis-call-container { padding: 14px; }
  .call-record-actions, .profile-history-detail { grid-template-columns: 1fr; }
  .call-record-risk-row { grid-template-columns: 1fr; }
  .profile-history-row { align-items: flex-start; padding: 17px; }
  .profile-history-score { grid-template-columns: auto auto; }
  .profile-history-score i { grid-column: 1 / -1; margin: 0; text-align: right; }
}

/* Compact learning dimensions and in-row source refinement. */
#learning-index-content .learning-skills {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 11px;
}

#screen-select .source-groups {
  grid-template-columns: 1fr;
  gap: 12px;
}
#screen-select .source-category,
#screen-select .source-category.source-category-other,
#screen-select .source-category:has(.source-detail-panel:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.55fr);
  grid-column: 1 / -1;
  min-height: 68px;
  align-items: stretch;
}
#screen-select .source-category-header {
  grid-column: 1;
  min-width: 0;
  height: auto;
  padding: 12px 16px;
}
#screen-select .source-category:not(:has(.source-detail-panel:not([hidden]))):not(:has(.source-custom-wrap:not([hidden]))) .source-category-header {
  grid-column: 1 / -1;
}
#screen-select .source-detail-panel,
#screen-select .source-category:has(.source-detail-panel:not([hidden])) .source-detail-panel {
  grid-column: 2;
  align-self: center;
  position: static;
  width: auto;
  margin: 8px 10px 8px 0;
  padding: 10px 12px;
}
#screen-select .source-detail-panel > span { margin-bottom: 7px; }
#screen-select .source-custom-wrap {
  grid-column: 2;
  align-self: center;
  margin: 8px 10px 8px 0;
  padding: 0;
  border: 0;
}
#screen-select .source-custom-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  color: #70867e;
  font-size: 12px;
}
#screen-select .source-custom-label input { min-width: 0; width: 100%; }

@media (max-width: 760px) {
  #learning-index-content .learning-skills { grid-template-columns: 1fr; }
  #screen-select .source-category,
  #screen-select .source-category.source-category-other,
  #screen-select .source-category:has(.source-detail-panel:not([hidden])) { grid-template-columns: 1fr; }
  #screen-select .source-category-header,
  #screen-select .source-category:not(:has(.source-detail-panel:not([hidden]))):not(:has(.source-custom-wrap:not([hidden]))) .source-category-header,
  #screen-select .source-detail-panel,
  #screen-select .source-category:has(.source-detail-panel:not([hidden])) .source-detail-panel,
  #screen-select .source-custom-wrap { grid-column: 1; }
  #screen-select .source-detail-panel,
  #screen-select .source-category:has(.source-detail-panel:not([hidden])) .source-detail-panel,
  #screen-select .source-custom-wrap { margin: 0 12px 12px; }
  #screen-select .source-custom-label { gap: 7px; }
}

/* 实验版训练准备页：沿用原有视觉体系，合并不必要的页面跳转。 */
.preparation-screen { padding-top: 66px; padding-bottom: 44px; }
.preparation-screen .type-hero-art { top: 22px; width: 205px; opacity: .95; }
.preparation-type-grid { width: min(100%, 700px); gap: 20px; margin-top: 28px; }
.preparation-type-grid .type-choice-card { min-height: 205px; padding: 24px 26px 20px; }
.preparation-type-grid .type-choice-card.selected { border-color: rgba(25,139,104,.72); background: rgba(244,251,247,.94); box-shadow: 0 18px 42px rgba(35,96,70,.12); }
.preparation-type-grid .type-choice-card.selected .type-choice-action { background: #e1f2e8; color: var(--scene-accent); }
.preparation-type-grid .type-choice-icon { width: 68px; height: 68px; font-size: 31px; }
.preparation-type-grid .type-choice-card strong { font-size: 21px; }
.preparation-type-grid .type-choice-card small { min-height: 42px; }
.preparation-type-grid .type-choice-action { padding: 10px 16px; }
.preparation-card { display: flex; align-items: center; gap: 22px; width: min(100%, 700px); margin: 22px auto 0; padding: 24px 28px; text-align: left; background: rgba(255,255,255,.82); border: 1px solid rgba(194,222,208,.72); border-radius: 24px; box-shadow: 0 16px 42px rgba(49,86,68,.07); }
.preparation-card[hidden] { display: none; }
.preparation-icon { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; color: #fff; background: linear-gradient(145deg,#79b993,#2a9670); border-radius: 18px; font-size: 27px; }
.preparation-copy { flex: 1; min-width: 0; }
.preparation-copy h2 { margin: 0 0 7px; color: var(--training-forest); font-size: 21px; }
.preparation-copy p { margin: 0; color: var(--training-muted); font-size: 14px; line-height: 1.75; }
.preparation-copy small { display: block; margin-top: 6px; color: #6d887c; }
.crisis-preparation { display: block; }
.plan-tier-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.plan-tier-options button { display: grid; gap: 7px; min-height: 100px; padding: 18px 20px; text-align: left; color: var(--training-forest); background: #f7fbf8; border: 1px solid #d7e8df; border-radius: 16px; cursor: pointer; }
.plan-tier-options button:hover { border-color: #80bea0; }
.plan-tier-options button.selected { color: #0b7554; background: #e2f3e9; border-color: #42a57d; box-shadow: inset 0 0 0 1px #42a57d; }
.plan-tier-options button strong { font-size: 17px; }
.plan-tier-options button small { color: #718b80; line-height: 1.55; }
.preparation-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.preparation-actions .btn-primary, .preparation-actions .btn-secondary { min-width: 230px; border-radius: 999px; }
.preparation-privacy { margin: 12px 0 0; color: var(--training-muted); font-size: 12px; }
#preparation-error { min-height: 20px; margin: 10px auto 0; text-align: center; }
.training-result .total-score { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 2px; }
.training-result .total-score strong { color: var(--accent-deep); font-size: 38px; line-height: 1; }
.training-result .total-score span { color: var(--muted); font-size: 13px; font-weight: 600; }
.score-calculation { margin-bottom: 8px !important; color: var(--muted); font-size: 12px !important; }
.stage-dimension-not-applicable { background: #f7f9f7; border-style: dashed; }
.stage-dimension-not-applicable .stage-head strong { display: inline-flex; padding: 5px 10px; background: #e9eeea; border-radius: 999px; color: #67756d; }

@media (max-width: 760px) {
  .preparation-screen { padding: 125px 16px 36px; }
  .preparation-type-grid, .plan-tier-options { grid-template-columns: 1fr; }
  .preparation-card { align-items: flex-start; padding: 20px; border-radius: 18px; }
  .preparation-actions { flex-direction: column; align-items: stretch; }
  .preparation-actions .btn-primary, .preparation-actions .btn-secondary { width: 100%; min-width: 0; }
}
.research-consent-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(16, 24, 40, .62); }
.research-consent { width: min(620px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box; padding: 28px; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .24); }
.research-consent h2 { margin-top: 0; }
.research-consent label { display: block; margin: 14px 0; line-height: 1.55; }
.research-consent label > input[type="text"], .research-consent label > input:not([type]) { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; }
.research-consent-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.research-consent-error { min-height: 1.5em; color: #b42318; }

.call-artifacts { margin: 18px 0; padding: 20px; border: 1px solid #cbded2; border-radius: 14px; background: #f6faf7; }
.call-artifacts .btn-secondary { display: inline-block; margin: 8px 10px 8px 0; padding: 10px 14px; border: 1px solid #b7d6c5; border-radius: 8px; background: #fff; color: #136c50; text-decoration: none; }
.call-artifacts audio { display: block; width: 100%; margin: 12px 0; }
.call-artifacts pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font: inherit; line-height: 1.7; }
.call-artifacts summary { cursor: pointer; margin-top: 12px; }

/* Learning category entry and compact directories */
#learning-index-view > #learning-home-header[hidden] { display: none; }
#learning-index-view > #learning-home-header { min-height: 120px; padding: 24px 28px; margin-bottom: 24px; background: transparent; border: 0; }
#learning-index-view > #learning-home-header::after, #learning-index-view > #learning-home-header .learning-header-art { display: none; }
.learning-entry-grid, .learning-entry-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.learning-entry-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; color: #2d5742; background: #fffefa; text-align: left; cursor: pointer; }
.learning-entry-card:hover, .learning-entry-secondary button:hover { background: #edf4e8; border-color: #88a87f; }
.learning-entry-card:focus-visible, .learning-entry-secondary button:focus-visible, .learning-directory-stage summary:focus-visible { outline: 3px solid #6d9466; outline-offset: 3px; }
.learning-entry-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #eaf2e4; font-size: 24px; }
.learning-entry-card strong { font-size: 24px; }
.learning-entry-description { color: #526c5a; font-size: 15px; }
.learning-entry-card small { color: #627462; font-size: 13px; margin-top: 5px; }
.learning-entry-action { margin-top: 9px; font-weight: 600; font-size: 15px; }
.learning-entry-secondary { margin-top: 18px; }
.learning-entry-secondary button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; color: #2d5742; border: 1px solid var(--line); border-radius: 14px; background: #fffefa; text-align: left; cursor: pointer; }
.learning-entry-secondary button > span:first-child { display: grid; gap: 4px; }
.learning-entry-secondary strong { font-size: 16px; }
.learning-entry-secondary small { color: #627462; font-size: 13px; }
.learning-category-back { margin-bottom: 22px; }
.learning-category-directory > header { margin-bottom: 24px; }
.learning-category-directory h1 { margin: 0 0 10px; color: #2d5742; font-size: 30px; }
.learning-category-directory header p { margin: 0; color: #526c5a; }
.learning-directory-stages { display: grid; gap: 12px; }
.learning-directory-stage { background: #fffefa; border: 1px solid #dce7da; border-radius: 14px; padding: 0 20px; }
.learning-directory-stage summary { display: flex; align-items: center; gap: 12px; list-style: none; padding: 18px 0; cursor: pointer; color: #30523e; font-weight: 600; }
.learning-directory-stage summary::-webkit-details-marker { display: none; }
.learning-directory-number { font-size: 13px; color: #617a59; font-variant-numeric: tabular-nums; }
.learning-directory-stage summary small { font-size: 12px; color: #627462; font-weight: 400; margin-left: auto; white-space: nowrap; }
.learning-directory-toggle::after { content: '＋'; color: #627462; }
.learning-directory-stage[open] .learning-directory-toggle::after { content: '−'; }
#learning-index-content .learning-directory-stage .learning-skills { margin: 0 0 18px; }
.learning-other-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
#learning-index-content .learning-other-list .learning-skill-open { min-height: 60px; padding: 16px 20px; background: #fffefa; border-color: #dce7da; }
.learning-subnav { grid-template-columns: 1fr; }
@media (max-width: 820px) { .learning-subnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  #learning-index-view > #learning-home-header { padding: 12px 0 18px; margin-bottom: 12px; }
  .learning-entry-grid, .learning-entry-secondary { grid-template-columns: 1fr; gap: 12px; }
  .learning-entry-card { padding: 22px; gap: 9px; }
  .learning-entry-secondary { margin-top: 12px; }
  .learning-entry-secondary button { padding: 17px 20px; }
  .learning-directory-stage { padding: 0 14px; }
  .learning-directory-stage summary { gap: 8px; font-size: 14px; }
  .learning-directory-stage summary > span:nth-child(2) { flex: 1; min-width: 0; }
}

.learning-entry-card, .learning-entry-secondary button { font-family: inherit; line-height: 1.6; }

/* Botanical illustrations: compact category landing page */
#module-learning .learning-center-wrap { max-width: 1060px; }
#learning-index-view > #learning-home-header { min-height: 112px; margin-bottom: 20px; padding: 18px 4px; }
#learning-index-view > #learning-home-header h1 { font-size: 34px; letter-spacing: .01em; margin-bottom: 12px; }
#learning-index-view > #learning-home-header p { font-size: 15px; color: #587364; }
.learning-entry-grid { gap: 22px; }
.learning-entry-card { position: relative; isolation: isolate; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; min-height: 250px; padding: 28px 18px 28px 30px; overflow: hidden; border-color: #d8e5d4; border-radius: 24px; background: linear-gradient(125deg, #fffefa 22%, #f0f5e9 100%); box-shadow: 0 8px 24px rgba(42,76,47,.045); transition: border-color .18s, box-shadow .18s, transform .18s; }
.learning-entry-crisis { background: linear-gradient(125deg, #fffefa 22%, #edf3e9 100%); }
.learning-entry-card::before { content: ''; position: absolute; right: -35px; top: -34px; width: 160px; height: 160px; border-radius: 50%; background: rgba(137,162,107,.075); z-index: -1; pointer-events: none; }
.learning-entry-card:hover { background: linear-gradient(125deg, #fffefa 22%, #e9f2e2 100%); border-color: #91b286; box-shadow: 0 12px 28px rgba(42,76,47,.08); transform: translateY(-2px); }
.learning-entry-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; position: relative; z-index: 1; flex: 1; min-width: 0; }
.learning-entry-kicker { font-size: 12px; color: #688061; letter-spacing: .08em; }
.learning-entry-card strong { font-size: 26px; color: #27573f; line-height: 1.35; }
.learning-entry-description { font-size: 14px; line-height: 1.65; max-width: 13em; }
.learning-entry-card small { font-size: 12px; color: #68806d; margin-top: 4px; }
.learning-entry-action { display: inline-flex; align-items: center; gap: 13px; padding-top: 5px; margin-top: 6px; font-size: 14px; color: #2b6747; }
.learning-entry-action > span { transition: transform .18s; }
.learning-entry-card:hover .learning-entry-action > span { transform: translateX(3px); }
.learning-entry-art { display: block; flex: 0 0 48%; width: 48%; max-width: 205px; height: auto; object-fit: contain; pointer-events: none; }
.learning-entry-secondary { gap: 22px; margin-top: 20px; }
.learning-entry-secondary button { gap: 12px; min-height: 102px; padding: 16px 20px 16px 12px; border-color: #dbe6d6; border-radius: 18px; background: #fffefa; }
.learning-secondary-art { flex: 0 0 70px; width: 70px; height: 60px; object-fit: contain; pointer-events: none; }
.learning-entry-secondary button > .learning-secondary-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.learning-entry-secondary strong { color: #345f45; font-size: 16px; }
.learning-entry-secondary small { font-size: 12px; color: #637b6a; line-height: 1.65; }
.learning-secondary-arrow { color: #4f7657; }
@media (max-width: 1050px) and (min-width: 821px) {
  .learning-entry-card { padding: 24px 12px 24px 22px; gap: 4px; }
  .learning-entry-card strong { font-size: 24px; }
  .learning-entry-art { flex-basis: 42%; width: 42%; }
  .learning-secondary-art { flex-basis: 55px; width: 55px; }
}
@media (max-width: 660px) {
  .learning-entry-grid { grid-template-columns: 1fr; gap: 14px; }
  .learning-entry-card { min-height: 200px; padding: 22px 20px 22px 24px; }
  .learning-entry-copy { gap: 8px; }
  .learning-entry-art { flex-basis: 42%; width: 42%; max-width: 175px; }
  .learning-entry-secondary { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .learning-entry-secondary button { min-height: 88px; }
  #learning-index-view > #learning-home-header { padding: 10px 0 16px; min-height: 0; margin-bottom: 8px; }
  #learning-index-view > #learning-home-header h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .learning-entry-card, .learning-entry-action > span { transition: none; } .learning-entry-card:hover, .learning-entry-card:hover .learning-entry-action > span { transform: none; } }

/* Illustrated learning banner and three-tier training controls. */
#learning-index-view > #learning-home-header {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 190px; margin-bottom: 24px; padding: 30px 290px 30px 32px;
  border: 1px solid #d6e7d7; border-radius: 22px;
  background: linear-gradient(110deg, #edf6e9, #f8faf2);
}
#learning-index-view > #learning-home-header::after {
  display: block; content: ''; position: absolute; z-index: -1;
  pointer-events: none; width: 260px; height: 260px; right: -65px; top: -100px;
  border: 28px solid rgba(121, 166, 123, 0.09); border-radius: 50%;
}
#learning-index-view > #learning-home-header .learning-header-art {
  display: block; position: absolute; width: 255px; height: auto;
  right: 12px; top: 50%; bottom: auto; transform: translateY(-50%); pointer-events: none;
}
.preparation-setting { min-width: 0; width: min(100%,700px); margin: 20px auto; padding: 18px 20px 12px; text-align: left; border: 1px solid #d7e7dc; border-radius: 16px; background: rgba(255,255,255,.78); }
.preparation-setting legend { padding: 0 8px; color: #244f40; font-size: 17px; font-weight: 700; }
.training-tier-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.training-tier-options label { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #dce8df; border-radius: 10px; background: #fff; cursor: pointer; }
.training-tier-options label:has(input:checked) { border-color: #458765; background: #eaf4e8; box-shadow: 0 0 0 1px #458765; }
.training-tier-options label:focus-within { outline: 2px solid #286d4c; outline-offset: 3px; }
.training-tier-options input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: #267e52; }
.training-tier-options span { display: grid; gap: 4px; min-width: 0; }
.training-tier-options strong { color: #244f40; font-size: 16px; }
.training-tier-options small { color: #60796b; font-size: 13px; line-height: 1.5; }
.preparation-setting .field-help { margin: 10px 0 0; font-size: 13px; }
.crisis-preparation .resistance-setting { width: 100%; margin: 18px 0 0; background: #f7faf5; }
@media (max-width: 760px) {
  #learning-index-view > #learning-home-header { min-height: 170px; padding: 24px 170px 24px 24px; }
  #learning-index-view > #learning-home-header .learning-header-art { width: 160px; right: 4px; }
}
@media (max-width: 480px) {
  #learning-index-view > #learning-home-header { min-height: 170px; padding: 24px 20px 95px; border-radius: 18px; }
  #learning-index-view > #learning-home-header .learning-header-art { width: 150px; top: auto; bottom: -6px; transform: none; }
  .preparation-setting { padding: 14px 12px 12px; }
  .training-tier-options { gap: 7px; }
  .training-tier-options label { padding: 10px 7px; gap: 5px; }
  .training-tier-options small { font-size: 12px; }
  .preparation-screen .type-hero-art { width: 160px; }
}

.reuse-case-option { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px auto 0; color: #436853; font-size: 14px; }
.reuse-case-option[hidden] { display: none; }
.simulation-consistency .consistency-status { display: inline-block; padding: 3px 9px; border-radius: 8px; background: #f6e6dc; color: #805138; font-size: 13px; }
.simulation-consistency blockquote { margin: 8px 0 16px; padding: 10px 14px; background: #fff; border-left: 3px solid #d3a17e; border-radius: 6px; }
.training-setting-row dd { overflow-wrap: anywhere; }