/* Approved card/button adaptation. Presentation only; preserve existing workflows. */
:root {
  --brand: #2d8052;
  --bg: #f5f7f3;
  --surface-soft: #edf6e9;
  --text: #294333;
  --muted: #566151;
  --border: #dce3d6;
  --blue-soft: #e1f2f5;
  --studio-mint: #d0f2cc;
  --studio-purple: #efdef7;
  --studio-yellow: #fcf0ce;
  --studio-card: 26px;
  --studio-inset: 20px;
  --studio-coral: #fbe6e8;
}
.button { border-radius: 26px; font-weight: 650; box-shadow: none; }
.button.primary { background: var(--brand); color: white; }
.button.primary:hover { background: var(--brand-strong); }
.button.secondary { background: #eef2e9; border-color: #c6d3bd; color: #25452c; }
.button.secondary:hover { background: #e2ecda; }
.icon-button { border-radius: 50%; }
input, select, textarea { border-radius: 14px; }
textarea { border-radius: 18px; }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #237648; outline-offset: 3px;
}
.login-panel { border-radius: var(--studio-card); box-shadow: none; }
.star-balance { border-radius: 18px; background: var(--studio-yellow); }
.spectrum-line { display: none; }
.course-phase { border: 1px solid var(--border); border-radius: var(--studio-card); padding: 28px; }
.course-phase[data-phase-panel="connect"], .course-phase[data-phase-panel="apply"] { --phase-tint: #edf6e9; }
.course-phase[data-phase-panel="understand"] { --phase-tint: #eef6eb; }
.course-phase[data-phase-panel="watch"] { --phase-tint: #e1f2f5; }
.course-phase[data-phase-panel="try"] { --phase-tint: #fcf0ce; }
.course-phase[data-phase-panel="reflect"] { --phase-tint: #efdef7; }
.course-phase .course-section { border-radius: var(--studio-inset); padding: 22px; }
.course-section p, .course-section li { line-height: 1.9; }
.course-navigation .button.secondary { background: #e8ede3; border-color: transparent; }
.course-navigation .button.primary { background: var(--studio-mint); color: #173e23; border-color: #819578; }
.course-choice .button { border-radius: 20px; }
.course-choice [aria-pressed="true"] { background: var(--studio-mint); color: #173e23; }
.course-lesson output, .course-observation { border-radius: 16px; }
.checkpoint, .scenario-question, .mindmap-list button { border-radius: var(--studio-card); }
.checkpoint { border: 1px solid var(--border); margin-top: 20px; }
.checkpoint-reply { border-radius: var(--studio-inset); }
.followup-section, .chat-composer, .coach-empty, .skill-usage-card {
  border-radius: var(--studio-inset); box-shadow: none;
}
.chat-message.parent > div { background: var(--studio-mint); border-radius: 22px; }
.answer-block { border-left: 0; border-radius: var(--studio-inset); padding: 20px; }
.answer-today { background: var(--studio-yellow); }
.answer-say { background: var(--studio-purple); }
.answer-activity { background: #e2f4dd; }
.answer-skill { background: var(--blue-soft); }
.answer-prevention { background: #fae8dd; }
.answer-followup { background: #e1f1ec; }
.skill-usage-card { background: var(--blue-soft); }
.day-game-guide, .playable-game-picker, .trainer-game-shell,
.trainer-reflection, .trainer-debrief { border-radius: var(--studio-card); box-shadow: none; }
/* Game canvas geometry and input pads deliberately retain their existing shapes. */
.trainer-choice-row button, .trainer-future-grid button { border-radius: 18px; }
.robot-current, .people-conversation, .strengths-selection { border-radius: var(--studio-inset); }
.people-notebook section, .strengths-map li { border-radius: 16px; }
.hi-zone-card, .share-post, .hi-zone-preview, .hi-zone-share-form,
.share-form, .admin-section, .admin-grid > section {
  border-radius: var(--studio-card); box-shadow: none;
}
.hi-zone-card { background: #edf6e9; }
.hi-zone-preview { background: var(--blue-soft); }
.admin-page { background: var(--bg); }
.admin-message { border-radius: 16px; }
.admin-navigation { border-radius: var(--studio-inset); }
.admin-navigation a { border-radius: 18px; }
.segmented { border-radius: 24px; padding: 3px; gap: 3px; background: #e8ede3; border: 0; }
.segmented button { border: 0; border-radius: 22px; background: transparent; }
.segmented button.active { background: var(--brand); color: white; }
.share-studio, .my-shares, .share-preview-card, .quiz-card {
  border-radius: var(--studio-card); box-shadow: none;
}
.share-preview-card { background: var(--blue-soft); }
.quiz-option { border-radius: 18px; }
.admin-kpi-card, .admin-stat-card { border-radius: 18px; background: #edf6e9; }
.starter-prompts button { border-radius: 24px; min-height: 44px; background: var(--surface-soft); }
.trainer-difficulty, .game-difficulty { border-radius: 24px; padding: 3px; gap: 3px; border: 0; background: #e8ede3; }
.trainer-difficulty button, .game-difficulty button { border: 0; border-radius: 22px; background: transparent; }
.trainer-difficulty button.active, .game-difficulty button.active { background: var(--brand); }
.chat-thread { border-radius: var(--studio-card) var(--studio-card) 0 0; }
.chat-composer { border-radius: 0 0 var(--studio-card) var(--studio-card); }
.trainer-game-tile { border-radius: var(--studio-card); border-top-width: 1px; }
.trainer-tile-visual { background: var(--blue-soft); }
.trainer-tile-actions .button { background: var(--brand); color: white; }
/* Official BI accents: colour identifies a section, while text/selection stays explicit. */
.nav-item[data-section="a"] { --nav-tint: #e3f3e6; --nav-accent: #2d8052; }
.nav-item[data-section="b"] { --nav-tint: #efdef7; --nav-accent: #8762b5; }
.nav-item[data-section="c"] { --nav-tint: #fcf0ce; --nav-accent: #a07910; }
.nav-item[data-section="d"] { --nav-tint: #e1f2f5; --nav-accent: #007bb5; }
.nav-item.active, .nav-item:hover { background: var(--nav-tint); }
.nav-item::after { display: none; }
.login-panel { border-top: 1px solid var(--border); }
.course-phase[data-phase-panel="connect"] { --phase-accent: #57b77b; --phase-tint: #e8f6eb; }
.course-phase[data-phase-panel="understand"] { --phase-accent: #77ac83; --phase-tint: #edf6e9; }
.course-phase[data-phase-panel="watch"] { --phase-accent: #58a6c6; --phase-tint: #e1f2f5; }
.course-phase[data-phase-panel="try"] { --phase-accent: #d9b739; --phase-tint: #fcf0ce; }
.course-phase[data-phase-panel="reflect"] { --phase-accent: #af7df2; --phase-tint: #efdef7; }
.course-phase[data-phase-panel="apply"] { --phase-accent: #db929b; --phase-tint: #fbecef; }
.course-phase { border-top: 1px solid var(--border); }
.course-navigation [data-phase="watch"].secondary { background: var(--blue-soft); }
.course-navigation [data-phase="try"].secondary { background: var(--studio-yellow); }
.course-navigation [data-phase="reflect"].secondary { background: var(--studio-purple); }
.course-navigation [data-phase="apply"].secondary { background: var(--studio-coral); }
.course-navigation [data-phase="connect"] { --tab-selected: #b5ddb9; --tab-ink: #214d2e; }
.course-navigation [data-phase="understand"] { --tab-selected: #c3d5b8; --tab-ink: #344b29; }
.course-navigation [data-phase="watch"] { --tab-selected: #add8e4; --tab-ink: #245b6b; }
.course-navigation [data-phase="try"] { --tab-selected: #edd488; --tab-ink: #624a13; }
.course-navigation [data-phase="reflect"] { --tab-selected: #d4b2ea; --tab-ink: #62417b; }
.course-navigation [data-phase="apply"] { --tab-selected: #ecc0c7; --tab-ink: #733c48; }
.course-navigation .button.primary,
.course-navigation .button:focus-visible { background: var(--tab-selected); color: var(--tab-ink); border-color: var(--tab-ink); box-shadow: none; }
.course-navigation .button:focus-visible { outline-color: var(--tab-ink); }
.nav-item { --nav-selected: color-mix(in srgb, var(--nav-tint) 78%, var(--nav-accent)); }
.nav-item.active, .nav-item:focus-visible { background: var(--nav-selected); }
.nav-item.active strong { color: #294333; }
.nav-item:focus-visible { outline-color: var(--nav-accent); }
.skill-usage-card { border-color: #9ac8d9; }
.followup-section { background: #f5edf9; border-color: #dfcde8; }
.share-post, .hi-zone-card { background: #eff8fa; border-color: #b7d9e2; }
.share-studio, .hi-zone-share-form { background: #f3f8ef; }
.trainer-game-tile:nth-child(3n+1) .trainer-tile-visual { background: var(--studio-mint); }
.trainer-game-tile:nth-child(3n+2) .trainer-tile-visual { background: var(--studio-yellow); }
.trainer-game-tile:nth-child(3n+3) .trainer-tile-visual { background: var(--studio-purple); }
.admin-kpi-card:nth-child(4n+2), .admin-stat-card:nth-child(4n+2) { background: var(--studio-yellow); border-top-color: #cfac26; }
.admin-kpi-card:nth-child(4n+3), .admin-stat-card:nth-child(4n+3) { background: var(--blue-soft); border-top-color: #007bb5; }
.admin-kpi-card:nth-child(4n+4), .admin-stat-card:nth-child(4n+4) { background: var(--studio-purple); border-top-color: #af7df2; }
/* Plain card edges: retain layout dividers and safety/error indicators. */
.admin-kpi-card, .admin-stat-card, .quiz-card, .featured-trainer-game,
.trainer-game-tile, .trainer-game-shell, .trainer-reflection, .trainer-debrief,
.playable-game-picker, .day-tip-action, .people-notebook section {
  border-top: 1px solid var(--border);
}
.admin-kpi-card:nth-child(n), .admin-stat-card:nth-child(n) { border-top-color: var(--border); }
/* No decorative stripes. Colour lives in surfaces; focus and state remain explicit. */
.course-navigation.has-main-stage { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.course-navigation [data-phase="focus"] { --tab-selected: #b5ddb9; --tab-ink: #214d2e; }
.course-navigation [data-phase="focus"].secondary { background: #e3f3e6; }
.course-main-stage { margin-top: 20px; scroll-margin-top: 90px; }
.course-main-stage h3:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.main-stage-heading { margin-bottom: 24px; }
.main-stage-heading h3, .main-stage-detail h3 { margin: 0 0 12px; font-size: 26px; color: var(--text); scroll-margin-top: 100px; }
.main-stage-heading p { max-width: 76ch; line-height: 1.8; margin: 0; color: var(--muted); }
.main-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.main-stage-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main-stage-group { grid-column: 1 / -1; margin: 12px 0 0; font-size: 18px; }
[data-tone="mint"] { --concept-fill: #e3f3e6; --concept-active: #b5ddb9; }
[data-tone="blue"] { --concept-fill: #e1f2f5; --concept-active: #add8e4; }
[data-tone="yellow"] { --concept-fill: #fcf0ce; --concept-active: #edd488; }
[data-tone="purple"] { --concept-fill: #efdef7; --concept-active: #d4b2ea; }
[data-tone="coral"] { --concept-fill: #fbe6e8; --concept-active: #ecc0c7; }
.main-stage-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 0; border-radius: var(--studio-card); background: var(--concept-fill); }
.main-stage-card h4, .main-stage-card h5 { margin: 0 0 16px; font-size: 24px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.main-stage-card p { margin: 0 0 24px; line-height: 1.8; flex: 1; }
.main-stage-card .button { background: #ffffffb3; border: 0; color: var(--text); }
.main-stage-card .button:hover, .main-stage-card .button:focus-visible { background: var(--concept-active); }
.main-stage-detail { padding: 28px; border-radius: var(--studio-card); background: white; }
.main-stage-detail header { margin: 28px 0 24px; }
.main-stage-detail header p { margin: 0; line-height: 1.8; color: var(--muted); }
.main-stage-detail .course-section { background: var(--concept-fill); border: 0; border-radius: var(--studio-inset); padding: 24px; }
.main-stage-detail .course-section p { line-height: 1.9; }
.main-stage-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.main-stage-switcher .button { background: var(--concept-fill); border: 0; color: var(--text); white-space: normal; }
.main-stage-switcher .button[aria-pressed="true"], .main-stage-switcher .button:hover, .main-stage-switcher .button:focus-visible { background: var(--concept-active); }
.main-stage-switcher .button[aria-pressed="true"] { font-weight: 800; }
@media (max-width: 1023px) {
  .main-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .course-navigation.has-main-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .course-navigation.has-main-stage .button { font-size: 13px; padding-inline: 4px; }
  .main-stage-grid, .main-stage-grid[data-count="4"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .course-main-stage { scroll-margin-top: 140px; }
  .main-stage-card, .main-stage-detail { padding: 20px; }
  .main-stage-detail .course-section { padding: 18px; }
  .main-stage-heading h3, .main-stage-detail h3 { font-size: 23px; scroll-margin-top: 150px; }
  .main-stage-card h4, .main-stage-card h5 { font-size: 22px; }
}
[data-robot-comparison], .people-conversation blockquote, .strengths-self-summary,
.staff-reply .assistant-body, .course-observation, .course-lesson output,
.lesson-focus blockquote, .benefits div, .guided-practice blockquote,
.checkpoint-reply, .daily-status, .share-reward, .day-tip-note, .live-twist,
.game-feedback, .challenge-target, .game-result, .single-reflection .praise,
.day-complete blockquote, .category-help, .feedback-card, .feedback-followup,
.trainer-why { border-left: 0; }
.topic-card, .topic-card.is-active, .topic-card.is-complete, .topic-card.is-locked,
.chapter-summary, .reflection-prompts, .day-complete {
  border-top: 1px solid var(--border);
}
.focus-benefits section, .auto-reply { border-top: 0; }
.admin-header { border-bottom: 1px solid var(--border); }
.arcade-status, .status-toast, .status-toast.error, .trainer-save-error {
  border-left: 1px solid var(--border);
}
.arcade-status.good, .arcade-status.warning, .arcade-status.error {
  border-left-color: var(--border);
}
.chapter-tabs button.active, .lesson-stepper button.active,
.day-chapter-tabs button.active, .quiz-option.is-selected { box-shadow: none; }
.trainer-feature-visual::before, .trainer-feature-visual::after,
.trainer-tile-visual::after { display: none; }
.trainer-tutorial-steps, .trainer-adjustment { border-left: 0; border-top: 0; }
.arcade-controls button, .arcade-controls button:active { border-bottom: 0; }
/* Keep game colour cues as fills instead of decorative edge bands. */
.beat-deck button { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--beat) 18%, white); }
.rule-actions { border-right: 1px solid var(--border); }
@media (max-width: 600px) {
  .rule-actions { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  :root { --studio-card: 24px; --studio-inset: 18px; }
  .course-phase { padding: 18px; }
  .course-phase .course-section { padding: 16px; }
  .answer-block { padding: 16px; }
}
/* English sits below the primary title, without an eyebrow or decorative rule. */
.heading-en {
  display: block;
  margin-top: 5px;
  color: #52675b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
h1 > .heading-en { font-size: 16px; }
.main-stage-card .heading-en, .main-stage-detail .heading-en { color: #52675b; }
.brand-lockup .heading-en { font-size: 14px; }

/* Day Tip: choose a game, then give the activity the main space. */
.day-featured { background: var(--studio-yellow); padding: 24px; margin-bottom: 28px; }
.day-featured h2 { font-size: 18px; margin: 0 0 16px; }
.day-featured h3 { font-size: 24px; margin: 0; }
.day-featured p { margin: 12px 0; }
.day-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.day-library-heading h2 { margin: 0; font-size: 24px; }
.day-library-heading > span { color: var(--muted); white-space: nowrap; font-size: 14px; }
.trainer-game-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 0; background: #e1f2f5; }
.trainer-game-tile:nth-child(3n+2) { background: var(--studio-mint); }
.trainer-game-tile:nth-child(3n+3) { background: var(--studio-purple); }
.trainer-game-tile > :not(.trainer-tile-visual) { margin: 0; }
.trainer-game-tile h2 { color: var(--text); font-size: 21px; }
.trainer-game-tile > p:not(.english-title) { font-size: 15px; line-height: 1.65; color: var(--text); flex: 1; }
.day-game-kind { font-size: 13px; color: #52675b; }
.trainer-tile-actions { padding: 0; margin-top: 4px !important; }
.day-guide-details { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.day-guide-details details { flex: 1 1 180px; border: 0; }
.day-guide-details details[open] { flex-basis: 100%; }
.day-safety-note { color: var(--muted); font-size: 14px; }
.day-experience-help { margin-bottom: 8px; }
.trainer-game-topbar { gap: 12px; }
.trainer-game-topbar h1 { margin: 0; font-size: 22px; flex: 1; }
.trainer-game-topbar .heading-en { text-transform: none; font-size: 14px; color: #52675b; }
.trainer-stage-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; }
.day-round-label { margin: 0; font-size: 14px; }
.day-play-help { border: 0; margin: 0; }
.day-play-help[open] { flex-basis: 100%; }
.day-adjustment { margin: 0; flex-basis: 100%; }
.trainer-arcade { display: flex; flex-direction: column; min-height: 0; }
.trainer-live-status { order: -1; display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 0; padding: 10px 16px; }
.trainer-live-status small { font-size: 12px; }
.trainer-game-canvas { height: clamp(240px, 36vh, 380px); min-height: 240px; }
.day-round-stats { padding: 12px 18px; }
.day-round-stats p { font-size: 13px; color: var(--muted); }
.day-round-stats .trainer-hud { background: var(--studio-mint); color: var(--text); }
.day-round-stats .trainer-hud span, .day-round-stats .trainer-hud strong { color: var(--text); }
.trainer-engine-controls, .trainer-engine-controls button { min-height: 56px; }
.trainer-stage-footer { padding: 8px 18px; }
@media (max-width: 600px) {
  .trainer-game-tile { padding: 20px; }
  .trainer-game-topbar { display: flex; flex-wrap: wrap; padding: 12px; }
  .trainer-game-topbar h1 { font-size: 19px; flex-basis: 65%; }
  .trainer-game-tools { width: auto; margin-left: auto; }
  .trainer-game-tools .game-tool-button { min-height: 40px; padding: 8px 12px; }
  .trainer-game-canvas, .trainer-game-shell.is-expanded .trainer-game-canvas { height: clamp(210px, 30dvh, 280px); min-height: 210px; }
  .trainer-stage-intro { padding: 10px 12px; }
  .trainer-engine-controls button { min-height: 56px; }
  .trainer-engine-controls kbd { display: none; }
  .day-guide-details { display: block; }
}