/* Color and control treatment only: native workbench geometry stays intact. */
html:root[data-lexiang-kids] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f7f3;
  --panel: #ffffff;
  --panel-soft: #ffffff;
  --line: #cbd9cf;
  --text: #2b4245;
  --muted: #6a7d7c;
  --green: #278b70;
  --cyan: #498ea0;
  --amber: #c28b37;
  --danger: #bd5b65;
  --rail: #e5f0e5;
  --accent: #278b70;
  --accent-soft: #dfefe4;
  --ok: #278b70;
  --warn: #a57528;
  --dialog-border: #b8cdbd;
  --dialog-header: #f3f6e9;
  --shadow: 0 8px 24px #405c4a12;
  --dialog-shadow: 0 18px 60px #34544624;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
html:root[data-lexiang-kids][data-theme="dark"] {
  color-scheme: dark;
  --bg: #253936; --surface: #2d423f; --surface-2: #354d47;
  --surface-3: #405a50; --line: #577368; --text: #f3f3dd;
  --muted: #b5ccbd; --rail: #233832; --green: #8bd3ac;
  --accent: #8bd3ac; --accent-soft: #3d5f4f;
}
html[data-lexiang-kids] body { background: var(--bg); color: var(--text); }
html[data-lexiang-kids] .topbar,
html[data-lexiang-kids] .status-bar { background: var(--surface); border-bottom: 2px solid var(--line); }
html[data-lexiang-kids="student"] .status-bar { color: var(--text); }
html[data-lexiang-kids="student"] :is(.status-indicator,.student-account-button) {
  color: var(--text); background: var(--surface-2); border-color: var(--line);
}
html[data-lexiang-kids="student"] .status-indicator.is-ok { color: #21654e; background: #dfefe4; border-color: #a9cdb6; }
html[data-lexiang-kids="student"] .status-indicator.is-warn { color: #815a23; background: #fff0c9; border-color: #dec68e; }
html[data-lexiang-kids="student"] .status-indicator.is-bad { color: #963f4b; background: #f8e2e5; border-color: #dfb5bd; }
html[data-lexiang-kids="student"] .status-control.is-lan-direct { color: #276e81; background: #e0f3f7; text-shadow: none; box-shadow: none; }
html[data-lexiang-kids] :is(.icon-action,.mini-action,.primary-action,.secondary-action,.session-action,.view-switcher-button,.teacher-chip,.status-indicator) { border-radius: 12px; }
html[data-lexiang-kids] :is(.primary-action,.session-action) { box-shadow: 0 3px 0 #244c3720; }
html[data-lexiang-kids] button:focus-visible { outline: 3px solid #e2b95a; outline-offset: 2px; }
html[data-lexiang-kids] :is(.tree-row,.tree-node,.activity-button,.component-card) { border-radius: 10px; }
html[data-lexiang-kids] :is(.tree-row,.tree-node).is-selected { background: var(--accent-soft, #dfefe4); color: var(--text); }
html[data-lexiang-kids] .activity-button svg { color: var(--green); stroke-width: 2.1; }
html[data-lexiang-kids] .activity-button[data-view="prep"] svg { color: #c39247; }
html[data-lexiang-kids] .activity-button[data-view="exercises"] svg { color: #718fbe; }
html[data-lexiang-kids] .activity-button[data-view="grading"] svg { color: #ba7a89; }
html[data-lexiang-kids] .view-switcher::before {
  content: "✦"; display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-right: 4px; border-radius: 10px;
  background: #f9e4ac; color: #8b6632; border: 1.5px solid #d8bd78;
  transform: rotate(-8deg); font-size: 19px;
}
html[data-lexiang-kids] :is(.component-card,.interactive-card) { border-width: 2px; border-radius: 16px; }
html[data-lexiang-kids] :is(.submit-btn,.html-sandbox-open-button) { border-radius: 12px; }
html[data-lexiang-kids] .classroom-nav-button:not(:disabled) {
  opacity: 1; pointer-events: auto; transform: none;
  border: 2px solid #d7c38d; background: #fff0c9;
}
html[data-lexiang-kids] .kids-flow-button { background: #f7e9c2; border-color: #d7c38d; color: #6d592f; }
html[data-lexiang-kids] :is(.lesson-editor-panel,.classroom-preview,.lesson-content) { border-radius: 14px; }
html[data-lexiang-kids] .tree-node:disabled { opacity: 1; cursor: default; color: var(--muted); }
html[data-lexiang-kids] .tree-node.is-selected:disabled { color: var(--text); }
html[data-lexiang-kids] .kids-flow-button { margin-right: 6px; white-space: nowrap; }
html[data-lexiang-kids] .kids-flow-dialog {
  width: min(640px, calc(100vw - 40px)); max-height: 80vh; overflow: auto;
  padding: 24px; border: 2px solid var(--line); border-radius: 22px;
  background: var(--surface); color: var(--text); box-shadow: var(--dialog-shadow);
}
.kids-flow-dialog::backdrop { background: #233e3955; }
.kids-template-overlay { position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:20px; background:#233e3977; }
.kids-template-overlay[hidden] { display:none; }
.kids-template-card { box-sizing:border-box; width:min(800px,100%); max-height:90vh; overflow:auto; padding:24px; border:2px solid var(--line); border-radius:22px; background:#fff; color:var(--text); box-shadow:var(--dialog-shadow); }
.kids-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.kids-template-option { text-align:left; padding:16px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--text); cursor:pointer; }
.kids-template-option[aria-pressed=true] { border-color:var(--green); background:#eef8f1; }
.kids-template-option strong,.kids-template-option span { display:block; }
.kids-template-option strong { font-size:18px; margin-bottom:8px; }.kids-template-option span { line-height:1.6; color:var(--muted); }
.kids-template-card input { display:block; box-sizing:border-box; width:100%; margin:8px 0; padding:12px; border:1px solid var(--line); border-radius:10px; font:inherit; color:var(--text); background:#fff; }
.kids-template-card footer { display:flex; justify-content:flex-end; gap:12px; }.kids-template-card [role=status] { min-height:24px; }
@media(max-width:560px){.kids-template-grid{grid-template-columns:1fr}.kids-template-card{padding:16px}}
.kids-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kids-flow-heading h2 { font-size: 21px; margin: 0; }
.kids-flow-target { color: var(--muted); }
.kids-flow-list { padding-left: 28px; }
.kids-flow-list li { padding: 10px 0; }
.kids-flow-list li > span { display: inline-block; width: calc(100% - 190px); vertical-align: middle; overflow-wrap: anywhere; }
.kids-flow-list button { margin-left: 5px; padding: 5px 9px; }
.kids-flow-add label { display: block; margin-bottom: 8px; }
.kids-flow-add > div { display: flex; gap: 10px; }
.kids-flow-add input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); }
.kids-flow-status { min-height: 24px; color: var(--muted); }
.kids-flow-list { padding-left: 0; counter-reset: kids-flow; }
.kids-flow-list li { display: grid; grid-template-columns: minmax(80px,1fr) auto 32px 32px auto; gap: 6px; align-items: center; counter-increment: kids-flow; }
.kids-flow-list li > span { width: auto; }
.kids-flow-list li > span::before { content: counter(kids-flow) ". "; }
.kids-flow-list button { margin: 0; }
.kids-flow-add select { max-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.kids-config-dialog { width: min(720px,calc(100vw - 32px)) !important; }
.kids-config-form label { display: block; margin: 14px 0; }
.kids-config-form textarea { display: block; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.kids-config-form select,.kids-config-form input { padding: 8px; margin: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }
.kids-config-form input:not([type=checkbox]) { width: 80px; }
.kids-capabilities label { display:flex; align-items:center; gap:10px; }
.kids-capabilities input[type=checkbox] { width:18px; height:18px; padding:0; margin:0; accent-color:var(--green); }
.kids-config-form fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 18px 0; padding: 12px; }
.kids-config-actions,.kids-config-form footer { display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.kids-config-actions { margin-top: 16px; }
.kids-config-actions span,.kids-config-status { color: var(--muted); }
.kids-board-dialog { width: min(960px,calc(100vw - 32px)) !important; }
.kids-board-filters { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.kids-board-filters select { max-width: 240px; padding:8px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface); }
.kids-board-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.kids-student-tile { border:2px solid var(--line); border-radius:14px; padding:14px; background:var(--surface); }
.kids-student-tile.needs-help { border-color:#d88891; background:#fff8f8; }
.kids-student-tile h3 { margin:0; font-size:16px; }.kids-student-tile p { white-space:pre-wrap; overflow-wrap:anywhere; }
.kids-student-tile textarea { width:100%; box-sizing:border-box; margin:10px 0; padding:8px; font:inherit; }
.kids-flow-task { border:2px solid #b9d9c5; border-radius:18px; margin:24px 0; padding:22px; background:#fff; color:var(--text); font-size:18px; }
.kids-task-heading,.kids-task-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kids-task-heading h2 { margin:0; font-size:20px; }.kids-flow-task h3 { white-space:pre-wrap; font-size:21px; line-height:1.6; }
.kids-flow-task textarea { width:100%; box-sizing:border-box; display:block; margin:10px 0; padding:14px; border:2px solid var(--line); border-radius:14px; font:inherit; color:var(--text); background:#fff; resize:vertical; }
.kids-flow-task button { padding:10px 16px; border:1px solid #a9cbb7; border-radius:13px; color:#285541; background:#e4f2e9; font:inherit; cursor:pointer; }
.kids-flow-task button[type=submit] { background:#278b70; color:#fff; border-color:#278b70; font-weight:700; }
.kids-flow-task button:disabled { opacity:.55; cursor:default; }.kids-task-receipt { border-left:3px solid #dcecdf; padding:2px 14px; margin:16px 0; white-space:pre-wrap; }
.kids-task-receipt p:last-child,.kids-flow-task [data-status] { color:var(--muted); }
@media(max-width:560px) {
  .kids-flow-list li { grid-template-columns:minmax(0,1fr) 32px 32px auto; }
  .kids-flow-list li > span { grid-column:1/-1; }.kids-flow-list .kids-settings-button { grid-column:1; }
  .kids-flow-add > div { flex-wrap:wrap; }.kids-flow-add input { flex-basis:100%; }
  .kids-flow-task { padding:14px; }
}