/*! EduGeo complete browser styles */
/*
    JSXGraph 1.12.2

    Copyright 2008-2025
        Matthias Ehmann,
        Michael Gerhaeuser,
        Carsten Miller,
        Bianca Valentin,
        Andreas Walter,
        Alfred Wassermann,
        Peter Wilfahrt

    This file is part of JSXGraph.

    JSXGraph is free software dual licensed under the GNU LGPL or MIT License.

    You can redistribute it and/or modify it under the terms of the

      * GNU Lesser General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version
      OR
      * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT

    JSXGraph is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License and
    the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
    and <https://opensource.org/licenses/MIT/>.
 */

.jxgbox {
    /* for IE 7 */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #356aa0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0;
    -ms-touch-action: none;
    /* "touch-action: none;" is set with JavaScript. */
}

.jxgbox svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.JXGtext {
    font-family: Courier, monospace;
    /*
     * The default font family is now set in
     * JXG.Options.text.cssdefaultstyle = 'font-family: Arial, Helvetica, Geneva, sans-serif;'
     */

    /* "background-color: transparent;" may produce artefacts in IE. Solution: setting a color explicitly. */
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.JXGinfobox {
    border-style: none;
    border-width: 0;
    border-color: black;
}

/* CSS attributes will (permantely) overwrite attributes set in JSXGraph */
.JXGimage {
    /* opacity: 1.0; */
}

.JXGimageHighlight {
    /* opacity: 0.6; */
}

.jxgbox :focus {
    outline-width: 0.5px;
    outline-style: dotted;
}

/* CSS rules for the navigation bar */

.JXG_navigation {
    position: absolute;
    right: 5px;
    bottom: 5px;

    z-index: 100;

    background-color: transparent;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}

.JXG_navigation_button {
    color: #666;
}

.JXG_navigation_button_left {
}

.JXG_navigation_button_right {
}

.JXG_navigation_button_up {
}

.JXG_navigation_button_down {
}

.JXG_navigation_button_out {
}

.JXG_navigation_button_100 {
}

.JXG_navigation_button_in {
}

.JXG_navigation_button_fullscreen {
}

.JXG_navigation_button_reload {
}

.JXG_navigation_button_cleartraces {
}

.JXG_navigation_button_screenshot {
}

.JXG_navigation_button:hover {
    border-radius: 2px;
    background: rgba(184, 184, 184, 0.5);
}

.JXG_navigation_button svg {
    top: 0.2em;
    position: relative;
    padding: 0;
}

/* CSS rules for the wrapping div in fullscreen mode */

.JXG_wrap_private:-moz-full-screen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-webkit-full-screen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:fullscreen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-ms-fullscreen {
    background-color: #ccc;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Classes for smartlabels */

.smart-label-solid {
    padding: 1px 7px 1px 7px;
    margin: 0;
    color: white;
    border-radius: 150px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-outline {
    padding: 1px 7px 1px 7px;
    margin: 0;
    border: solid 2px black;
    background-color: white;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-pure {
    padding: 20px 7px 1px 7px;
    margin: 0;
    border: none;
    background-color: transparent;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-line,
.smart-label-point {
    background-color: #0072b2;
    border-color: #0072b2;
}

.smart-label-point {
    margin-top: 12px;
}

.smart-label-angle {
    background-color: #e69f00;
    border-color: #e69f00;
    padding: 1px 7px 1px 7px;
}

.smart-label-polygon,
.smart-label-circle {
    background-color: #f0e442;
    color: black;
    border-color: #f0e442;
    padding: 1px 7px 1px 7px;
}

:root {
  color: #182026;
  background: #f5f7fa;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  --edugeo-app-bg: #eef3f8;
  --edugeo-panel-bg: #ffffff;
  --edugeo-panel-muted: #f8fafc;
  --edugeo-border: #d7dee7;
  --edugeo-board-surround: #e8eef5;
  --edugeo-text: #182026;
  --edugeo-muted: #64748b;
  --edugeo-accent: #2563eb;
  --edugeo-control-height: 40px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

.editor-body {
  background: var(--edugeo-app-bg);
  color: var(--edugeo-text);
  overflow: hidden;
}

.editor-app {
  display: grid;
  grid-template-rows: 40px auto minmax(0, 1fr) 48px 30px;
  height: 100vh;
  min-width: 980px;
}

.presentation-controls {
  display: none;
}

.editor-app.is-presentation-mode {
  background: #101820;
  grid-template-rows: 58px minmax(0, 1fr) 32px;
  min-width: 0;
}

.editor-app.is-presentation-mode .editor-menubar,
.editor-app.is-presentation-mode .geometry-toolbar,
.editor-app.is-presentation-mode .object-panel,
.editor-app.is-presentation-mode .property-panel,
.editor-app.is-presentation-mode .command-bar {
  display: none;
}

.editor-app.is-presentation-mode .presentation-controls {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #d7dee7;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 8px 16px;
  grid-row: 1;
}

.presentation-controls strong {
  font-size: 16px;
}

.presentation-controls > div {
  display: flex;
  gap: 8px;
}

.construction-player-panel {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  border-top: 3px solid #60a5fa;
  bottom: 28px;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.28);
  color: #fff;
  display: grid;
  gap: 10px;
  left: 0;
  padding: 12px 18px 14px;
  position: fixed;
  right: 0;
  z-index: 1500;
}

.construction-player-panel[hidden] {
  display: none;
}

.construction-player-heading,
.construction-player-controls {
  align-items: center;
  display: flex;
  gap: 10px;
}

.construction-player-heading strong {
  flex: 1 1 auto;
  font-size: 17px;
  min-width: 0;
}

.construction-player-mode {
  background: #fbbf24;
  border-radius: 999px;
  color: #422006;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
}

.construction-player-controls button,
.construction-player-controls select {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 13px;
}

.construction-player-controls button {
  background: #fff;
  color: #172554;
  cursor: pointer;
  font-weight: 750;
}

.construction-player-controls button:disabled {
  cursor: default;
  opacity: 0.42;
}

.construction-player-controls label {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.construction-player-step-picker {
  flex: 1 1 260px;
  min-width: 180px;
}

.construction-player-step-picker select {
  max-width: 420px;
  min-width: 0;
  width: 100%;
}

.construction-player-controls .construction-player-exit {
  background: #fef2f2;
  color: #991b1b;
}

.construction-player-progress {
  accent-color: #fbbf24;
  cursor: pointer;
  height: 24px;
  width: 100%;
}

.custom-tool-list {
  display: contents;
}

.custom-tool-empty {
  color: #94a3b8;
  font-size: 12px;
  padding: 8px 10px;
}

.custom-tool-button {
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

.custom-tool-editor {
  align-items: center;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1700;
}

.custom-tool-editor[hidden] {
  display: none;
}

.custom-tool-editor-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
  display: grid;
  gap: 14px;
  max-height: min(760px, 90vh);
  max-width: 760px;
  overflow: auto;
  padding: 22px;
  width: min(760px, 94vw);
}

.custom-tool-editor-card header,
.custom-tool-editor-card footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.custom-tool-editor-card h2 {
  margin: 2px 0 0;
}

.custom-tool-editor-card > label {
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
}

.custom-tool-editor-card input[type="text"] {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  min-height: 44px;
  padding: 9px 11px;
}

.custom-tool-choice-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-tool-choice-grid fieldset {
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  margin: 0;
  min-width: 0;
  padding: 12px;
}

.custom-tool-choice-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
}

.custom-tool-choice-list label {
  align-items: center;
  background: #f8fafc;
  border-radius: 7px;
  display: flex;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px;
}

.custom-tool-editor-card button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 14px;
}

.custom-tool-editor-card .custom-tool-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.demo-component-library {
  align-items: center;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1680;
}

.demo-component-library[hidden] {
  display: none;
}

.demo-library-dialog {
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
  display: grid;
  gap: 18px;
  max-height: 90vh;
  max-width: 1040px;
  overflow: auto;
  padding: 24px;
  width: min(1040px, 95vw);
}

.demo-library-dialog header,
.demo-library-dialog footer {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.demo-library-dialog h2 {
  color: #0f172a;
  font-size: 24px;
  margin: 3px 0 4px;
}

.demo-library-dialog p {
  color: #64748b;
  margin: 0;
}

.demo-library-eyebrow {
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-library-dialog button {
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  min-height: 44px;
  padding: 8px 14px;
}

.demo-library-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-library-card {
  align-content: start;
  background: #fff;
  border: 1px solid #dbe4ef !important;
  color: #334155;
  display: grid;
  gap: 7px;
  min-height: 158px;
  padding: 15px !important;
  text-align: left;
}

.demo-library-card:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.demo-library-card strong {
  color: #0f172a;
  font-size: 16px;
}

.demo-library-card small {
  color: #64748b;
  line-height: 1.55;
}

.demo-library-card em,
.demo-library-category {
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.demo-library-category {
  color: #2563eb;
}

.demo-library-card em {
  align-self: end;
  color: #a16207;
}

.demo-library-dialog footer {
  align-items: center;
}

.demo-library-dialog output {
  color: #1d4ed8;
  font-weight: 700;
}

.about-edugeo-dialog {
  max-width: 680px;
  width: min(680px, 95vw);
}

.about-edugeo-meta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-edugeo-meta div {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.about-edugeo-meta span,
.about-edugeo-technology,
.about-edugeo-dialog footer small {
  color: #64748b;
  font-size: 12px;
}

.about-edugeo-meta strong {
  color: #0f172a;
}

.about-edugeo-features,
.about-edugeo-technology {
  line-height: 1.7;
}

.status-version {
  color: #64748b;
  font-size: 11px;
  margin-left: 10px;
}

@media (max-width: 820px) {
  .demo-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .demo-library-grid {
    grid-template-columns: 1fr;
  }

  .about-edugeo-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .custom-tool-choice-grid {
    grid-template-columns: 1fr;
  }
}

.editor-app.is-construction-playback-mode .geometry-toolbar,
.editor-app.is-construction-playback-mode .editor-menubar,
.editor-app.is-construction-playback-mode .command-bar,
.editor-app.is-construction-playback-mode .board-frame {
  pointer-events: none;
  user-select: none;
}

.editor-app.is-construction-playback-mode .geometry-toolbar,
.editor-app.is-construction-playback-mode .command-bar {
  opacity: 0.5;
}

@media (max-width: 900px) {
  .construction-player-controls {
    flex-wrap: wrap;
  }

  .construction-player-step-picker {
    flex-basis: 100%;
  }

  .construction-player-heading strong {
    font-size: 14px;
  }
}

.editor-app.is-presentation-mode .editor-workspace,
.editor-app.is-presentation-mode.is-left-collapsed .editor-workspace,
.editor-app.is-presentation-mode.is-right-collapsed .editor-workspace,
.editor-app.is-presentation-mode.is-left-collapsed.is-right-collapsed .editor-workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-row: 2;
}

.editor-app.is-presentation-mode .board-center {
  background: #101820;
  padding: 14px;
}

.editor-app.is-presentation-mode .board-frame {
  min-height: 0;
}

.editor-app.is-presentation-mode .status-bar {
  font-size: 14px;
  grid-row: 3;
}

.editor-app:fullscreen,
.editor-app:-webkit-full-screen {
  height: 100vh;
  width: 100vw;
}

.editor-menubar {
  align-items: center;
  background: var(--edugeo-panel-bg);
  border-bottom: 1px solid var(--edugeo-border);
  display: flex;
  gap: 22px;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 20;
}

.editor-brand {
  align-items: baseline;
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.editor-brand strong {
  font-size: 17px;
}

.editor-brand span {
  color: #64748b;
  font-size: 13px;
}

.menu-cluster {
  align-items: stretch;
  display: flex;
  height: 100%;
}

.menu-item {
  position: relative;
}

.menu-item > button {
  background: transparent;
  border: 0;
  border-radius: 0;
  height: 100%;
  padding: 0 12px;
}

.menu-item > button:hover,
.menu-item:focus-within > button,
.menu-item:hover > button {
  background: #f1f5f9;
}

.menu-popover {
  background: var(--edugeo-panel-bg);
  border: 1px solid var(--edugeo-border);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  display: none;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 40;
}

.menu-item:hover .menu-popover,
.menu-item:focus-within .menu-popover {
  display: grid;
}

.menu-popover button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left;
}

.menu-popover button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.menu-popover button.is-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}

.menu-popover button.is-active::after {
  content: "✓";
  float: right;
}

.menu-section-label {
  color: var(--edugeo-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px 3px;
}

.command-help-examples {
  color: #334155;
  font-size: 12px;
  line-height: 1.65;
  min-width: 330px;
  padding: 4px 10px 8px;
}

.command-help-examples small {
  color: var(--edugeo-muted);
  display: block;
  line-height: 1.45;
  margin-top: 5px;
}

.menu-separator {
  border-top: 1px solid var(--edugeo-border);
  margin: 5px 3px;
}

.menu-popover button:disabled {
  color: #94a3b8;
  cursor: default;
}

.menu-shortcut {
  color: #94a3b8;
  float: right;
  font-size: 11px;
  margin-left: 18px;
}

.edu-geo-context-menu {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2);
  display: grid;
  min-width: 176px;
  padding: 5px;
  position: fixed;
  z-index: 1000;
}

.edu-geo-context-menu[hidden] {
  display: none;
}

.edu-geo-context-menu button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #1e293b;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.edu-geo-context-menu button:hover,
.edu-geo-context-menu button:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  outline: 0;
}

.edu-geo-context-menu button.is-danger {
  color: #b42318;
}

.edu-geo-context-menu button.is-danger:hover,
.edu-geo-context-menu button.is-danger:focus-visible {
  background: #fff1f2;
  color: #be123c;
}

.edu-geo-context-separator {
  border-top: 1px solid #e2e8f0;
  margin: 4px 2px;
}

.geometry-toolbar {
  align-items: stretch;
  background: #f8fafc;
  border-bottom: 1px solid #d7dee7;
  display: flex;
  gap: 0;
  min-height: 86px;
  overflow-x: auto;
  padding: 8px 10px;
}

.toolbar-group {
  align-content: flex-start;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 112px;
  padding: 0 10px;
}

.toolbar-group:first-child {
  padding-left: 0;
}

.toolbar-group > summary > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.toolbar-group button,
.toolbar-group a {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #182026;
  font-size: 13px;
  min-height: 30px;
  padding: 5px 9px;
  text-decoration: none;
}

.toolbar-group button:hover,
.toolbar-group a:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.toolbar-group button.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.toolbar-group button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.72;
}

.toolbar-group .danger-button {
  color: #b42318;
}

.toolbar-group .danger-button.is-active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.geometry-toolbar details.toolbar-group {
  overflow: visible;
  padding: 0;
}

.toolbar-group summary {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-height: 32px;
  padding: 6px 9px;
  user-select: none;
}

.toolbar-group summary::marker {
  color: #64748b;
}

.toolbar-group[open] summary {
  background: #eef6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.toolbar-menu {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 6px;
}

.toolbar-menu button,
.toolbar-menu a {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  max-width: 180px;
}

.function-analysis-tool-menu {
  position: relative;
}

.function-analysis-tool-menu > summary {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #182026;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  min-height: 30px;
  padding: 5px 9px;
}

.function-analysis-tool-actions {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  left: var(--function-analysis-menu-left, 8px);
  padding: 8px;
  position: fixed;
  top: var(--function-analysis-menu-top, 96px);
  width: min(278px, calc(100vw - 16px));
  z-index: 1300;
}

.function-analysis-tool-actions button { text-align: left; }

.function-learning-profile-switcher {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr);
  align-items: center;
  gap: 5px 8px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.92);
}

.function-learning-profile-switcher label {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.function-learning-profile-switcher select {
  min-width: 0;
  min-height: 34px;
  padding: 4px 28px 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}

.function-learning-profile-switcher select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.3);
  outline-offset: 1px;
  border-color: #2563eb;
}

.function-learning-profile-switcher small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 600px) {
  .function-learning-profile-switcher {
    grid-template-columns: 1fr;
  }

  .function-learning-profile-switcher select {
    min-height: 42px;
  }
}

.function-analysis-summary,
.function-analysis-warnings {
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 8px;
}

.function-analysis-warnings:empty { display: none; }

.function-analysis-warning { margin: 4px 0; }
.function-analysis-warning.warning { color: #a16207; }
.function-analysis-warning.error { color: #b91c1c; }

.tool-icon {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #dbe4ee;
  border-radius: 5px;
  color: #0f172a;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  min-width: 22px;
  padding: 0 4px;
}

.toolbar-menu button:hover .tool-icon,
.toolbar-menu button.is-active .tool-icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: inherit;
}

.toolbar-menu button[data-tool="image"] {
  color: #64748b;
}

.editor-workspace {
  display: grid;
  gap: 0;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  min-height: 0;
  overflow: hidden;
}

.editor-app.is-left-collapsed .editor-workspace {
  grid-template-columns: 0 minmax(0, 1fr) 320px;
}

.editor-app.is-right-collapsed .editor-workspace {
  grid-template-columns: 280px minmax(0, 1fr) 0;
}

.editor-app.is-left-collapsed.is-right-collapsed .editor-workspace {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

.object-panel,
.property-panel {
  background: var(--edugeo-panel-bg);
  border-right: 1px solid var(--edugeo-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.property-panel {
  border-left: 1px solid var(--edugeo-border);
  border-right: 0;
}

.editor-app.is-left-collapsed .object-panel,
.editor-app.is-right-collapsed .property-panel {
  visibility: hidden;
}

.panel-header {
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 12px;
}

.panel-header h2 {
  font-size: 15px;
  margin: 0;
}

.panel-header p {
  color: #64748b;
  font-size: 12px;
  margin: 3px 0 0;
}

.panel-toggle {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.board-center {
  background: var(--edugeo-board-surround);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.editor-app[data-theme="classroom"] {
  --edugeo-app-bg: #dbe4ee;
  --edugeo-panel-bg: #ffffff;
  --edugeo-panel-muted: #f1f5f9;
  --edugeo-border: #94a3b8;
  --edugeo-board-surround: #cbd5e1;
  --edugeo-text: #0f172a;
  --edugeo-muted: #334155;
  --edugeo-accent: #dc2626;
  grid-template-rows: 48px auto minmax(0, 1fr) 52px 34px;
}

.editor-app[data-theme="classroom"] .editor-brand strong {
  font-size: 20px;
}

.editor-app[data-theme="classroom"] .toolbar-menu button,
.editor-app[data-theme="classroom"] .menu-item > button,
.editor-app[data-theme="classroom"] .property-editor {
  font-size: 15px;
}

.editor-app[data-theme="classroom"] .board-frame .edu-geo-jxg-board {
  box-shadow: 0 0 0 2px #64748b, 0 16px 30px rgba(15, 23, 42, 0.16);
}

.editor-app[data-theme="compact"] {
  --edugeo-app-bg: #eef2f3;
  --edugeo-panel-bg: #fbfdfc;
  --edugeo-panel-muted: #f1f5f4;
  --edugeo-border: #cbd5d1;
  --edugeo-board-surround: #e2e8e6;
  --edugeo-text: #1f2933;
  --edugeo-muted: #52616b;
  --edugeo-accent: #0f766e;
  grid-template-rows: 34px auto minmax(0, 1fr) 40px 26px;
}

.editor-app[data-theme="compact"] .editor-workspace {
  grid-template-columns: 240px minmax(0, 1fr) 280px;
}

.editor-app[data-theme="compact"].is-left-collapsed .editor-workspace {
  grid-template-columns: 0 minmax(0, 1fr) 280px;
}

.editor-app[data-theme="compact"].is-right-collapsed .editor-workspace {
  grid-template-columns: 240px minmax(0, 1fr) 0;
}

.editor-app[data-theme="compact"] .panel-header {
  min-height: 46px;
  padding: 7px 9px;
}

.editor-app[data-theme="compact"] .property-section {
  gap: 7px;
  padding: 9px;
}

.editor-app[data-theme="compact"] .toolbar-menu button {
  min-height: 30px;
  padding: 4px 7px;
}

.board-frame {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.board-frame .editor-board,
.board-frame .edu-geo-jxg-board {
  height: 100%;
  width: 100%;
}

.property-panel {
  overflow-y: auto;
}

.property-empty {
  align-items: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}

.property-empty strong {
  color: #334155;
  font-size: 14px;
}

.property-empty span {
  font-size: 12px;
  line-height: 1.55;
}

.property-editor[hidden],
.property-empty[hidden],
.property-section[hidden],
.property-kind[hidden] {
  display: none;
}

.property-section {
  border-bottom: 1px solid #e2e8f0;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.property-section h3 {
  font-size: 14px;
  margin: 0;
}

.property-section label {
  color: #475569;
  display: grid;
  font-size: 13px;
  gap: 5px;
}

.property-section input,
.property-section textarea,
.property-section select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #1e293b;
  font: inherit;
  min-width: 0;
  padding: 7px 8px;
  width: 100%;
}

.property-section input:focus,
.property-section textarea:focus,
.property-section select:focus {
  border-color: #60a5fa;
  outline: 2px solid rgba(37, 99, 235, 0.12);
}

.property-section input:disabled {
  background: #f1f5f9;
  color: #64748b;
}

.property-section input[type="color"] {
  cursor: pointer;
  min-height: 36px;
  padding: 3px;
}

.inline-control,
.property-switch {
  align-items: center;
  display: flex !important;
  gap: 8px !important;
}

.inline-control input,
.property-switch input {
  accent-color: #2563eb;
  flex: 0 0 auto;
  width: auto;
}

.property-switch {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-height: 36px;
  padding: 7px 9px;
}

.property-readout {
  display: grid;
  gap: 8px;
  margin: 0;
}

.property-readout div {
  display: grid;
  gap: 6px;
  grid-template-columns: 56px minmax(0, 1fr);
}

.property-readout dt {
  color: #64748b;
  font-size: 12px;
}

.property-readout dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-readout .property-definition {
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 11px;
}

.property-color-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-color-grid label {
  min-width: 0;
}

.property-field-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.property-kind {
  display: grid;
  gap: 10px;
}

.property-note {
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding: 7px 9px;
}

.checkbox-binding-editor {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.checkbox-binding-editor[hidden] {
  display: none;
}

.checkbox-binding-editor > strong {
  color: #334155;
  font-size: 12px;
}

.checkbox-binding-list {
  display: grid;
  gap: 6px;
}

.checkbox-binding-item {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  font-size: 11px;
  gap: 8px;
  justify-content: space-between;
  padding: 6px 8px;
}

.checkbox-binding-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkbox-binding-item button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 8px;
}

.button-script-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.button-script-actions button {
  min-height: 34px;
  padding: 6px 8px;
}

#prop-button-script-preview {
  background: #f8fafc;
  color: #475569;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 11px;
}

.project-section textarea {
  min-height: 128px;
  resize: vertical;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-workbench {
  gap: 0;
  padding: 0;
}

.ai-workbench-tabs {
  background: #f1f5f9;
  border-bottom: 1px solid #dbe3ec;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
}

.ai-workbench-tabs button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 6px 8px;
}

.ai-workbench-tabs button:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #334155;
}

.ai-workbench-tabs button[aria-selected="true"] {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  color: #1d4ed8;
}

.ai-workbench-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ai-workbench-panel[hidden] {
  display: none;
}

.ai-workbench-panel-heading h3,
.ai-workbench-panel-heading p {
  margin: 0;
}

.ai-workbench-panel-heading p {
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 3px;
}

.property-actions {
  display: flex;
  margin-top: 8px;
}

.property-actions button {
  width: 100%;
}

/* Function-analysis exposes ten actions.  Keep them inside the existing
 * property sidebar instead of allowing a flex row to widen the panel. */
.property-analysis {
  min-width: 0;
}

.property-analysis .property-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.property-analysis .property-actions button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cas-test-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.cas-test-heading [data-cas-status] {
  background: #e2e8f0;
  border-radius: 999px;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
}

.cas-test-heading [data-cas-status][data-state="loading"] {
  background: #fef3c7;
  color: #92400e;
}

.cas-test-heading [data-cas-status][data-state="ready"] {
  background: #dcfce7;
  color: #166534;
}

.cas-test-heading [data-cas-status][data-state="error"] {
  background: #ffe4e6;
  color: #be123c;
}

.cas-test-controls {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 88px;
}

.cas-test-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cas-test-result {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #1e293b;
  display: block;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.55;
  min-height: 42px;
  max-height: 126px;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 9px;
  user-select: text;
  white-space: pre-wrap;
}

.cas-test-result.is-long {
  box-shadow: inset 0 -14px 12px -16px rgba(15, 23, 42, 0.7);
}

.cas-test-result.is-error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.command-bar {
  align-items: center;
  background: #ffffff;
  border-top: 1px solid #d7dee7;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 7px 10px 6px;
  position: relative;
  z-index: 25;
}

.command-bar label {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.command-bar input {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  height: 32px;
  padding: 0 10px;
}

.command-bar input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: 0;
}

.command-bar button {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #bfd3ef;
  border-radius: 6px;
  color: #1d4ed8;
  font-weight: 700;
  height: 32px;
  padding: 0 14px;
}

.command-bar button:hover,
.command-bar button:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: 0;
}

.command-bar button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.command-feedback {
  color: #64748b;
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.35;
  margin: 0;
  min-height: 16px;
  overflow-wrap: anywhere;
  padding-left: 1px;
}

.command-feedback[data-state="success"] {
  color: #047857;
}

.command-feedback[data-state="error"] {
  color: #b42318;
}

.status-bar {
  align-items: center;
  background: #182026;
  color: #dbeafe;
  display: flex;
  font-size: 13px;
  gap: 18px;
  justify-content: space-between;
  padding: 0 12px;
}

.status-bar span:last-child {
  color: #cbd5e1;
}

.editor-shell {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  padding: 18px;
  width: min(1280px, 100%);
}

.editor-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.editor-header h1 {
  font-size: 26px;
  margin: 0 0 4px;
}

.editor-header p {
  color: #52616f;
  margin: 0;
}

.editor-status {
  background: #eef6ff;
  border: 1px solid #c8ddff;
  border-radius: 8px;
  color: #1d4f91;
  font-size: 14px;
  line-height: 1.45;
  max-width: 420px;
  padding: 10px 12px;
}

.editor-toolbar {
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
}

.editor-tool-group {
  align-items: center;
  border-right: 1px solid #e6ebf1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 12px;
}

.editor-tool-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.editor-tool-group span {
  color: #697888;
  font-size: 13px;
  font-weight: 700;
}

.editor-toolbar button.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.editor-toolbar .danger-button {
  color: #b42318;
}

.editor-toolbar .danger-button.is-active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.editor-layout {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.editor-board-panel,
.editor-side-panel,
.editor-json-panel {
  background: #ffffff;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(24, 32, 38, 0.06);
}

.editor-board-panel {
  overflow: hidden;
}

.editor-board {
  width: 100%;
}

.editor-side-panel {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  overflow: hidden;
}

.editor-side-panel h2,
.editor-json-panel h2 {
  font-size: 16px;
  margin: 0;
}

.editor-side-panel h2 {
  border-bottom: 1px solid #e6ebf1;
  padding: 12px;
}

.object-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 8px 18px;
}

.construction-history-panel {
  border-top: 1px solid #d7dee7;
  flex: 0 0 auto;
  max-height: 238px;
  overflow: hidden;
}

.construction-history-panel > summary {
  align-items: center;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  user-select: none;
}

.construction-history-panel > summary::marker {
  color: #64748b;
}

#construction-history-count {
  align-items: center;
  background: #e2e8f0;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 10px;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
}

.construction-history-list {
  display: grid;
  gap: 2px;
  max-height: 202px;
  overflow-y: auto;
  padding: 5px;
}

.construction-history-empty {
  color: #94a3b8;
  font-size: 11px;
  margin: 12px 6px;
  text-align: center;
}

.construction-history-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #334155;
  display: grid;
  gap: 7px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 5px 6px;
  text-align: left;
  width: 100%;
}

.construction-history-item:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.construction-step-number {
  align-items: center;
  background: #e2e8f0;
  border-radius: 4px;
  color: #475569;
  display: inline-flex;
  font-size: 10px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.construction-step-content {
  display: grid;
  min-width: 0;
}

.construction-step-title {
  font-size: 11px;
  font-weight: 700;
}

.construction-step-definition {
  color: #64748b;
  font-family: Consolas, monospace;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-list-empty {
  align-items: center;
  color: #697888;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 160px;
  padding: 20px;
  text-align: center;
}

.object-list-empty strong {
  color: #475569;
  font-size: 14px;
}

.object-list-empty span {
  font-size: 12px;
  line-height: 1.5;
}

.object-group + .object-group {
  margin-top: 8px;
}

.object-group-heading {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  min-height: 26px;
  padding: 4px 6px;
}

.object-group-count {
  align-items: center;
  background: #eef2f7;
  border-radius: 999px;
  color: #64748b;
  display: inline-flex;
  font-size: 10px;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
}

.object-group-items {
  display: grid;
  gap: 2px;
}

.object-list-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #1e293b;
  cursor: default;
  display: grid;
  gap: 7px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 5px 6px;
  text-align: left;
  width: 100%;
}

.object-list-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.object-list-item:focus-visible {
  border-color: #60a5fa;
  outline: 2px solid rgba(37, 99, 235, 0.16);
}

.object-list-item.is-selected {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: inset 3px 0 0 #2563eb;
}

.object-visibility {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #2563eb;
  display: inline-flex;
  font-size: 15px;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.object-visibility:hover {
  background: #dbeafe;
}

.object-visibility.is-hidden {
  color: #94a3b8;
}

.object-item-content {
  min-width: 0;
}

.object-item-headline {
  align-items: baseline;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.object-name {
  color: #0f172a;
  cursor: text;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-type {
  color: #64748b;
  flex: 0 0 auto;
  font-size: 10px;
}

.object-definition {
  color: #64748b;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 10px;
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-lock-state {
  color: #9a6700;
  font-size: 10px;
  min-width: 20px;
  text-align: right;
}

.object-name-input {
  border: 1px solid #60a5fa;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  height: 25px;
  min-width: 0;
  outline: 2px solid rgba(37, 99, 235, 0.13);
  padding: 2px 5px;
  width: 100%;
}

.object-context-menu {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  display: grid;
  min-width: 148px;
  padding: 5px;
  position: fixed;
  z-index: 100;
}

.object-context-menu[hidden] {
  display: none;
}

.object-context-menu button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #1e293b;
  font-size: 13px;
  padding: 8px 10px;
  text-align: left;
}

.object-context-menu button:hover,
.object-context-menu button:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  outline: 0;
}

.object-context-menu button[data-object-action="delete"] {
  color: #b42318;
}

.edu-geo-text-selected {
  background: rgba(245, 158, 11, 0.12);
  border-radius: 3px;
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.edu-geo-text-pending {
  background: rgba(56, 189, 248, 0.12);
  border-radius: 3px;
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.editor-json-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.editor-json-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.editor-json-header p {
  color: #697888;
  font-size: 14px;
  margin: 4px 0 0;
}

.editor-json-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editor-json-panel textarea {
  border: 1px solid #ccd5df;
  border-radius: 6px;
  font-family: Consolas, monospace;
  min-height: 180px;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.project-message {
  border-radius: 6px;
  color: #52616f;
  font-size: 14px;
  line-height: 1.55;
  min-height: 22px;
  padding: 8px 10px;
  white-space: pre-wrap;
}

.project-message.is-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}

.project-message.is-success {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.example-shell {
  width: min(920px, calc(100vw - 32px));
  margin: 28px auto;
}

.example-header {
  margin-bottom: 14px;
}

.example-header h1 {
  font-size: 28px;
  margin: 0 0 4px;
}

.example-header p {
  color: #52616f;
  margin: 0;
}

.example-board,
.edu-geo-jxg-board {
  background: #ffffff;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(24, 32, 38, 0.08);
  max-width: 100%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
}

.edu-geo-jxg-board > svg {
  display: block;
}

button {
  border: 1px solid #ccd5df;
  border-radius: 6px;
  background: #ffffff;
  color: #182026;
  cursor: pointer;
  font: inherit;
  padding: 8px 14px;
}

button:hover {
  border-color: #8aa0b8;
}

.demo-shell {
  width: min(1040px, calc(100vw - 32px));
  margin: 28px auto;
}

.demo-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.demo-header h1 {
  font-size: 28px;
  margin: 0 0 4px;
}

.demo-header p {
  color: #52616f;
  margin: 0;
}

.demo-status {
  background: #eaf2ff;
  border: 1px solid #c9dcff;
  border-radius: 6px;
  color: #2457a6;
  font-size: 14px;
  font-weight: 700;
  min-width: 136px;
  padding: 8px 12px;
  text-align: center;
}

.demo-toolbar {
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
}

.tool-group {
  align-items: center;
  border-right: 1px solid #e6ebf1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 12px;
}

.tool-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.tool-group span {
  color: #697888;
  font-size: 13px;
  font-weight: 700;
  margin-right: 2px;
}

.tool-button {
  min-width: 64px;
}

.tool-button.is-active {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #ffffff;
}

.tool-button-danger {
  color: #b42318;
}

.tool-button-danger.is-active {
  background: #d92d20;
  border-color: #d92d20;
  color: #ffffff;
}

.demo-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.demo-examples button {
  background: #f8fafc;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.demo-board {
  width: 100%;
}

.demo-tip {
  color: #52616f;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.demo-json-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.demo-json-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.demo-json-panel label {
  color: #52616f;
  font-size: 14px;
}

.demo-json-panel textarea {
  border: 1px solid #ccd5df;
  border-radius: 6px;
  font-family: Consolas, monospace;
  min-height: 210px;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.edu-geo-board {
  background: #ffffff;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(24, 32, 38, 0.08);
  overflow: hidden;
  user-select: none;
}

.edu-geo-jxg-board {
  position: relative;
}

.edugeo-control-layer {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 20;
}

.edugeo-control {
  align-items: stretch;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14);
  display: flex;
  min-height: 44px;
  min-width: 96px;
  pointer-events: auto;
  position: absolute;
  touch-action: manipulation;
  transform: translateY(-50%);
}

.edugeo-control.is-selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), 0 3px 10px rgba(15, 23, 42, 0.14);
}

.edugeo-control-drag-handle {
  align-items: center;
  background: #f1f5f9;
  border: 0;
  border-right: 1px solid #cbd5e1;
  border-radius: 8px 0 0 8px;
  color: #64748b;
  cursor: grab;
  display: flex;
  font-size: 15px;
  justify-content: center;
  min-height: 44px;
  min-width: 30px;
  padding: 0 7px;
  touch-action: none;
}

.edugeo-control-drag-handle:active {
  cursor: grabbing;
}

.edugeo-control-input {
  align-items: center;
  color: #1e293b;
  display: flex;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
}

button.edugeo-control-input {
  background: #2563eb;
  border: 0;
  border-radius: 0 8px 8px 0;
  color: #ffffff;
  cursor: pointer;
  justify-content: center;
  min-width: 96px;
}

.edugeo-control-input input[type="checkbox"] {
  height: 24px;
  margin: 0;
  width: 24px;
}

.edugeo-inputbox-control input,
.edugeo-dropdown-control select {
  border: 1px solid #94a3b8;
  border-radius: 6px;
  font-size: 16px;
  min-height: 36px;
  min-width: 110px;
  padding: 5px 8px;
}

.edugeo-slider-control input[type="range"] {
  min-height: 36px;
  min-width: 150px;
  touch-action: pan-y;
}

.edugeo-slider-control output {
  min-width: 42px;
  text-align: right;
}

.edu-geo-svg {
  display: block;
  height: auto;
  touch-action: none;
  width: 100%;
}

.edu-geo-axis-line {
  stroke: #d6dee7;
  stroke-width: 1.5;
}

.edu-geo-polygon {
  cursor: pointer;
  fill: rgba(47, 111, 237, 0.08);
  pointer-events: visiblePainted;
  stroke: #2f6fed;
  stroke-width: 2;
  transition: opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}

.edu-geo-segment,
.edu-geo-line {
  cursor: pointer;
  pointer-events: stroke;
  stroke: #263238;
  stroke-linecap: round;
  stroke-width: 2;
  transition: opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}

.edu-geo-line {
  stroke-dasharray: 8 6;
}

.edu-geo-parallel-line {
  stroke: #12a594;
}

.edu-geo-perpendicular-line {
  stroke: #e5484d;
}

.edu-geo-circle {
  cursor: pointer;
  fill: transparent;
  pointer-events: visibleStroke;
  stroke: #2f6fed;
  stroke-width: 2;
  transition: opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}

.edu-geo-point {
  cursor: grab;
  fill: #2f6fed;
  stroke: #ffffff;
  stroke-width: 2;
  touch-action: none;
  transition: filter 120ms ease, r 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}

.edu-geo-point:active {
  cursor: grabbing;
}

.edu-geo-point-static {
  cursor: pointer;
}

.edu-geo-label {
  cursor: pointer;
  fill: #182026;
  font-size: 16px;
  font-weight: 700;
  pointer-events: auto;
  transition: fill 120ms ease, stroke 120ms ease;
}

.edu-geo-point:hover,
.edu-geo-segment:hover,
.edu-geo-line:hover,
.edu-geo-circle:hover,
.edu-geo-polygon:hover,
.edu-geo-label:hover {
  filter: drop-shadow(0 2px 4px rgba(47, 111, 237, 0.24));
  opacity: 0.92;
}

.edu-geo-point.edu-geo-selected {
  stroke: #f59f00;
  stroke-width: 4;
}

.edu-geo-segment.edu-geo-selected,
.edu-geo-line.edu-geo-selected,
.edu-geo-circle.edu-geo-selected,
.edu-geo-polygon.edu-geo-selected {
  stroke: #f59f00;
  stroke-width: 4;
}

.edu-geo-label.edu-geo-selected {
  fill: #b76e00;
  stroke: rgba(245, 159, 0, 0.35);
  stroke-width: 3;
  paint-order: stroke;
}

@media (max-width: 720px) {
  .editor-header,
  .editor-json-header {
    align-items: stretch;
    flex-direction: column;
  }

  .editor-layout {
    grid-template-columns: 1fr;
  }

  .editor-side-panel {
    min-height: 240px;
  }

  .editor-tool-group {
    border-right: 0;
    border-bottom: 1px solid #e6ebf1;
    padding-bottom: 10px;
    padding-right: 0;
    width: 100%;
  }

  .demo-header,
  .demo-json-header {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-actions,
  .demo-toolbar,
  .demo-examples,
  .tool-group {
    justify-content: flex-start;
  }

  .tool-group {
    border-right: 0;
    border-bottom: 1px solid #e6ebf1;
    padding-bottom: 10px;
    padding-right: 0;
    width: 100%;
  }

}

/* Embeddable SDK shells */
.edu-geo-sdk {
  background: var(--edugeo-app-bg);
  color: var(--edugeo-text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  isolation: isolate;
  max-width: 100%;
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.edu-geo-sdk,
.edu-geo-sdk * {
  box-sizing: border-box;
}

.edu-geo-sdk-viewer {
  background: #ffffff;
  border: 1px solid var(--edugeo-border);
  border-radius: 8px;
}

.edu-geo-sdk-viewer .edu-geo-sdk-board,
.edu-geo-sdk-viewer .edu-geo-jxg-board {
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  height: 100% !important;
  width: 100% !important;
}

.edu-geo-viewer-controls {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  bottom: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  display: flex;
  gap: 4px;
  padding: 4px;
  position: absolute;
  right: 10px;
  z-index: 15;
}

.edu-geo-viewer-controls button {
  background: transparent;
  border: 0;
  font-size: 12px;
  padding: 6px 8px;
}

.edu-geo-viewer-controls button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.edu-geo-sdk.edu-geo-sdk-editor {
  display: grid;
  grid-template-rows: 40px auto minmax(0, 1fr) 44px 30px;
  height: 720px;
  min-width: 0;
  width: 100%;
}

.edu-geo-sdk-editor .editor-menubar {
  min-width: 0;
  position: relative;
}

.edu-geo-sdk-editor .editor-brand span {
  display: none;
}

.edu-geo-sdk-editor .geometry-toolbar {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.edu-geo-sdk-editor .editor-workspace {
  grid-template-columns: minmax(190px, 22%) minmax(320px, 1fr) minmax(230px, 27%);
}

.edu-geo-sdk-editor.is-left-collapsed .editor-workspace {
  grid-template-columns: 0 minmax(320px, 1fr) minmax(230px, 27%);
}

.edu-geo-sdk-editor.is-right-collapsed .editor-workspace {
  grid-template-columns: minmax(190px, 22%) minmax(320px, 1fr) 0;
}

.edu-geo-sdk-editor.is-left-collapsed.is-right-collapsed .editor-workspace {
  grid-template-columns: 0 minmax(320px, 1fr) 0;
}

.edu-geo-sdk-editor .board-frame {
  min-height: 260px;
}

.edu-geo-sdk-editor .command-bar {
  min-width: 0;
}

.edu-geo-sdk-editor .status-bar {
  min-width: 0;
}

.edu-geo-sdk-editor [data-history-count] {
  align-items: center;
  background: #e2e8f0;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
}

.ai-tutor-panel {
  display: grid;
  gap: 10px;
}

.ai-task-field textarea {
  min-height: 58px;
  resize: vertical;
}

.ai-advice-button {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  font-weight: 700;
  width: 100%;
}

.ai-advice-button:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.ai-advice-button:disabled {
  background: #93c5fd;
  border-color: #93c5fd;
  cursor: wait;
}

.ai-result-grid {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  overflow: hidden;
}

.ai-result-section {
  background: #ffffff;
  border-bottom: 1px solid #e8edf3;
  padding: 10px;
}

.ai-result-section:last-child {
  border-bottom: 0;
}

.ai-result-section h4 {
  color: #475569;
  font-size: 10px;
  letter-spacing: 0.06em;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.ai-result-section p,
.ai-result-section ol,
.ai-result-section ul {
  color: #1e293b;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.ai-result-section ol,
.ai-result-section ul {
  padding-left: 18px;
}

.ai-result-section.is-warning {
  background: #fffaf0;
}

.ai-result-section.is-warning h4 {
  color: #b45309;
}

.ai-teacher-report {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  overflow: hidden;
}

.ai-teacher-report summary {
  align-items: center;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  list-style-position: inside;
  padding: 9px 10px;
}

.ai-teacher-report summary small {
  color: #64748b;
  font-size: 10px;
  font-weight: 500;
}

.ai-teacher-report[open] summary {
  border-bottom: 1px solid #e2e8f0;
}

.ai-teacher-report-content {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ai-teacher-report-content section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
}

.ai-teacher-report-content h4 {
  color: #475569;
  font-size: 11px;
  margin: 0 0 4px;
}

.ai-teacher-report-content p,
.ai-teacher-report-content ul {
  color: #1e293b;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.ai-teacher-report-content ul {
  padding-left: 18px;
}

.ai-teacher-difficulty-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ai-teacher-difficulty-row h4 {
  margin: 0;
}

.ai-teacher-difficulty-row span {
  background: #e0f2fe;
  border-radius: 999px;
  color: #075985;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
}

.ai-workbench .ai-tutor-transcript {
  min-height: 0;
}

.ai-workbench .ai-tutor-transcript:empty {
  display: none;
}

.edu-geo-ai-action-overlay {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 30;
}

.edu-geo-ai-highlight-layer,
.edu-geo-ai-label-layer {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.edu-geo-ai-highlight-shape {
  animation: edu-geo-ai-pulse 1.35s ease-in-out infinite;
  fill: rgba(245, 158, 11, 0.12) !important;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.85));
  opacity: 1 !important;
  pointer-events: none !important;
  stroke: #f59e0b !important;
  stroke-opacity: 1 !important;
  stroke-width: 6px !important;
  vector-effect: non-scaling-stroke;
}

.edu-geo-ai-temporary-label {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(120, 53, 15, 0.18);
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 180px;
  padding: 4px 7px;
  position: absolute;
  transform: translate(9px, -110%);
  white-space: normal;
}

[data-tool].is-ai-suggested {
  animation: edu-geo-ai-tool-pulse 1.35s ease-in-out infinite;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22) !important;
  color: #92400e !important;
}

@keyframes edu-geo-ai-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.6));
    opacity: 0.75;
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.95));
    opacity: 1;
  }
}

@keyframes edu-geo-ai-tool-pulse {
  0%,
  100% {
    background: #ffffff;
  }
  50% {
    background: #fffbeb;
  }
}

@media (prefers-reduced-motion: reduce) {
  .edu-geo-ai-highlight-shape,
  [data-tool].is-ai-suggested {
    animation: none;
  }
}

.ai-tutor-heading {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ai-tutor-heading h3,
.ai-tutor-heading p {
  margin: 0;
}

.ai-tutor-heading p {
  color: #64748b;
  font-size: 11px;
  margin-top: 3px;
}

.ai-tutor-heading [data-ai-status] {
  background: #e2e8f0;
  border-radius: 999px;
  color: #475569;
  flex: 0 0 auto;
  font-size: 10px;
  padding: 4px 7px;
}

.ai-tutor-heading [data-ai-status][data-state="loading"] {
  background: #fef3c7;
  color: #92400e;
}

.ai-tutor-heading [data-ai-status][data-state="success"] {
  background: #dcfce7;
  color: #166534;
}

.ai-tutor-heading [data-ai-status][data-state="error"] {
  background: #fee2e2;
  color: #b91c1c;
}

.ai-context-readout {
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 9px 10px;
}

.ai-context-readout div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ai-context-readout strong { color: #1d4ed8; }
.ai-context-readout p { color: #475569; font-size: 11px; margin: 0; }
.ai-context-readout button { justify-self: end; min-height: 32px; padding: 4px 9px; }

.ai-command-planner {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cbdaf1;
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.94);
}
.ai-command-planner label { display: grid; gap: 5px; color: #334155; font-size: 12px; font-weight: 700; }
.ai-command-planner textarea { width: 100%; min-height: 56px; resize: vertical; }
.ai-command-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-command-actions span { color: #64748b; font-size: 11px; }
.ai-command-actions span[data-state="error"] { color: #b91c1c; }
.ai-command-actions span[data-state="success"] { color: #15803d; }
.ai-command-preview { padding: 9px; border: 1px solid #93c5fd; border-radius: 8px; background: #eff6ff; }
.ai-command-preview strong { color: #1d4ed8; }
.ai-command-preview p { margin: 5px 0; color: #475569; font-size: 12px; }
.ai-command-preview ol { margin: 6px 0 8px; padding-left: 22px; }
.ai-command-preview li { margin: 4px 0; color: #475569; font-size: 12px; }
.ai-command-preview code { color: #0f3d78; font-weight: 700; overflow-wrap: anywhere; }

.ai-teaching-generator { display: grid; gap: 8px; padding: 10px; border: 1px solid #d7c8f3; border-radius: 10px; background: rgba(250, 248, 255, .95); }
.ai-teaching-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #5b21b6; }
.ai-teaching-heading label { display: flex; align-items: center; gap: 5px; color: #475569; font-size: 12px; }
.ai-teaching-kinds, .ai-teaching-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-teaching-kinds button { min-height: 34px; padding: 5px 8px; }
.ai-teaching-generator > span { color: #64748b; font-size: 11px; }
.ai-teaching-generator > span[data-state="error"] { color: #b91c1c; }
.ai-teaching-generator > span[data-state="success"] { color: #15803d; }
.ai-teaching-output { padding: 9px; border: 1px solid #c4b5fd; border-radius: 8px; background: #fff; }
.ai-teaching-output > strong { color: #6d28d9; }
.ai-teaching-output pre { max-height: 260px; overflow: auto; margin: 7px 0; padding: 8px; border-radius: 7px; background: #f8fafc; color: #334155; font: 12px/1.6 system-ui, sans-serif; white-space: pre-wrap; }

.ai-tutor-source {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.5;
  padding: 7px 8px;
}

.ai-tutor-transcript {
  display: grid;
  gap: 8px;
  max-height: 260px;
  min-height: 96px;
  overflow: auto;
}

.ai-tutor-message {
  background: #eff6ff;
  border-radius: 10px 10px 10px 3px;
  color: #1e3a5f;
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 10px;
  white-space: pre-wrap;
}

.ai-tutor-message strong {
  display: block;
  font-size: 10px;
  margin-bottom: 3px;
  opacity: 0.7;
}

.ai-tutor-message.is-student {
  background: #f1f5f9;
  border-radius: 10px 10px 3px 10px;
  color: #334155;
  margin-left: 18px;
}

.ai-tutor-message.is-error {
  background: #fef2f2;
  color: #b91c1c;
}

.ai-tutor-quick-actions {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-tutor-quick-actions button {
  font-size: 11px;
  min-width: 0;
  padding: 6px;
}

.ai-tutor-form {
  display: grid;
  gap: 6px;
}

.ai-tutor-form textarea {
  min-height: 58px;
  resize: vertical;
}

.ai-tutor-form button {
  justify-self: end;
}

.edu-geo-sdk:fullscreen,
.edu-geo-sdk:-webkit-full-screen {
  height: 100vh !important;
  width: 100vw !important;
}

@media (max-width: 820px) {
  .editor-app {
    grid-template-rows: 40px auto minmax(0, 1fr) 44px 30px;
    min-width: 0;
  }

  .editor-app .editor-brand span,
  .editor-app .object-panel,
  .editor-app .property-panel {
    display: none;
  }

  .editor-app .editor-menubar {
    gap: 8px;
    padding: 0 6px 0 10px;
  }

  .editor-app .menu-item > button {
    padding: 0 8px;
  }

  .editor-app .geometry-toolbar {
    min-height: 64px;
    padding: 6px;
  }

  .editor-app .editor-workspace,
  .editor-app.is-left-collapsed .editor-workspace,
  .editor-app.is-right-collapsed .editor-workspace,
  .editor-app.is-left-collapsed.is-right-collapsed .editor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-app .board-center {
    padding: 6px;
  }

  .editor-app .command-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px;
  }

  .editor-app .command-bar label {
    display: none;
  }

  .editor-app .status-bar {
    gap: 8px;
    overflow: hidden;
    padding: 0 8px;
  }

  .editor-app .status-bar span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .edu-geo-sdk-editor .editor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .edu-geo-sdk-editor .object-panel,
  .edu-geo-sdk-editor .property-panel {
    display: none;
  }

  .edu-geo-sdk-editor .editor-brand {
    display: none;
  }
}
.edugeo-dynamic-text-rendered {
  white-space: pre-wrap;
}

.edugeo-latex {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
}

.edugeo-latex-group {
  display: inline-flex;
  align-items: baseline;
}

.edugeo-latex-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  line-height: 1.05;
  margin: 0 0.12em;
}

.edugeo-latex-num,
.edugeo-latex-den {
  display: block;
  padding: 0 0.14em;
  text-align: center;
}

.edugeo-latex-num {
  border-bottom: 1px solid currentColor;
}

.edugeo-latex-sqrt {
  display: inline-flex;
  align-items: flex-start;
}

.edugeo-latex-radical {
  font-size: 1.15em;
  line-height: 1;
}

.edugeo-latex-radicand {
  border-top: 1px solid currentColor;
  padding: 0 0.08em;
}

.edugeo-latex-root-index {
  font-size: 0.55em;
  margin-right: -0.18em;
}

.edugeo-latex-sup,
.edugeo-latex-sub {
  font-size: 0.72em;
  line-height: 1;
}

.edugeo-latex-matrix,
.edugeo-latex-cases {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12em;
  padding: 0.08em 0.25em;
  vertical-align: middle;
}

.edugeo-latex-pmatrix::before,
.edugeo-latex-pmatrix::after {
  font-size: 1.8em;
  line-height: 0.6;
  position: absolute;
}

.edugeo-latex-pmatrix::before {
  content: "(";
  transform: translateX(-0.35em);
}

.edugeo-latex-pmatrix::after {
  content: ")";
  align-self: flex-end;
  transform: translateX(0.35em);
}

.edugeo-latex-bmatrix {
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.edugeo-latex-matrix-row,
.edugeo-latex-case-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(1.2em, auto);
  gap: 0.45em;
}

.edugeo-latex-matrix-cell,
.edugeo-latex-case-cell {
  text-align: center;
}

.edugeo-latex-cases {
  border-left: 2px solid currentColor;
  border-radius: 45% 0 0 45%;
}

.developer-only { display: none !important; }
.board-frame { position: relative; }
.interaction-mode-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 18;
  min-width: 62px; min-height: 40px; padding: 8px 13px;
  border: 1px solid rgba(37, 99, 235, .26); border-radius: 999px;
  background: rgba(248, 251, 255, .9); color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(30, 64, 175, .14); backdrop-filter: blur(10px);
  font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.interaction-mode-toggle:hover, .interaction-mode-toggle:focus-visible {
  background: #fff; border-color: rgba(37, 99, 235, .55); transform: translateY(-1px);
}
.interaction-mode-toggle[data-mode="construct"] {
  color: #0f766e; border-color: rgba(13, 148, 136, .34); background: rgba(240, 253, 250, .92);
}
.developer-panel {
  position: fixed; right: 18px; top: 72px; z-index: 90;
  width: min(460px, calc(100vw - 36px)); max-height: calc(100vh - 160px); overflow: auto;
  padding: 16px; border: 1px solid rgba(37, 99, 235, .2); border-radius: 16px;
  background: rgba(248, 251, 255, .97); box-shadow: 0 22px 56px rgba(15, 23, 42, .22);
  backdrop-filter: blur(16px);
}
.developer-panel[hidden] { display: none; }
.developer-panel header, .developer-panel .developer-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.developer-panel header div { display: grid; gap: 3px; }
.developer-panel header small { color: #64748b; }
.developer-panel button {
  min-height: 38px; border: 1px solid #cbd5e1; border-radius: 10px;
  background: #fff; color: #334155; cursor: pointer;
}
.developer-panel a[data-developer-test] { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid #9db8da; border-radius: 8px; background: #f7fbff; color: #244d7d; text-decoration: none; }
.developer-panel .developer-actions { margin: 14px 0; justify-content: flex-start; flex-wrap: wrap; }
.developer-panel section { margin-top: 12px; }
.developer-panel h3 { margin: 0 0 6px; font-size: 13px; color: #334155; }
.developer-panel pre {
  max-height: 220px; overflow: auto; margin: 0; padding: 10px; border-radius: 10px;
  background: #eef4fb; color: #334155; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .interaction-mode-toggle { right: 10px; bottom: 10px; min-height: 44px; }
  .developer-panel { right: 10px; top: 62px; width: calc(100vw - 20px); max-height: calc(100vh - 150px); }
}
/* Function value table: a compact teaching panel, never a debug-data surface. */
.function-value-table-panel{position:fixed;right:24px;bottom:24px;z-index:1200;width:min(420px,calc(100vw - 48px));max-height:min(70vh,640px);display:flex;flex-direction:column;background:var(--edugeo-panel-bg,#fff);border:1px solid var(--edugeo-border,#d7dee7);border-radius:16px;box-shadow:0 18px 48px rgba(15,23,42,.16);backdrop-filter:blur(14px);color:var(--edugeo-text,#182026);overflow:hidden}
.function-value-table-panel[hidden]{display:none}
.function-value-table-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}
.function-value-table-header>div{display:flex;flex-direction:column;gap:2px}.function-value-table-header span{font-size:12px;color:var(--edugeo-muted,#64748b)}.function-value-table-header button{width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--edugeo-muted,#64748b);font-size:22px;cursor:pointer}.function-value-table-header button:hover{background:var(--edugeo-panel-muted,#f8fafc);color:var(--edugeo-accent,#2563eb)}
.function-value-table-config{display:grid;gap:8px;padding:10px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7)}.function-value-table-config label{display:grid;gap:4px;font-size:12px;color:var(--edugeo-muted,#64748b)}.function-value-table-config input,.function-value-table-config select{min-height:34px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:8px;padding:6px 8px;background:var(--edugeo-panel-bg,#fff);color:var(--edugeo-text,#182026)}.function-value-table-config>button{min-height:36px;border:0;border-radius:9px;background:var(--edugeo-accent,#2563eb);color:#fff;font-weight:700;cursor:pointer}.function-value-table-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.function-value-table-options{display:flex;align-items:end;gap:12px}.function-value-table-options label:first-child{display:flex;align-items:center;gap:6px;flex:1}.function-value-table-options input[type=checkbox]{min-height:auto}
.function-value-table-warnings{padding:0 14px}.function-value-table-warning{margin:8px 0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-value-table-warning.error{background:#fef2f2;color:#b91c1c}
.function-value-table-scroll{min-height:120px;overflow:auto}.function-value-table-panel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.function-value-table-panel th{position:sticky;top:0;z-index:1;background:var(--edugeo-panel-muted,#f8fafc);color:var(--edugeo-muted,#64748b);font-size:12px}.function-value-table-panel th,.function-value-table-panel td{padding:8px 10px;border-bottom:1px solid var(--edugeo-border,#d7dee7);text-align:right}.function-value-table-panel th:first-child,.function-value-table-panel td:first-child{text-align:center}.function-value-table-panel tbody tr{cursor:pointer;outline:none}.function-value-table-panel tbody tr:hover,.function-value-table-panel tbody tr:focus,.function-value-table-panel tbody tr.is-selected{background:var(--edugeo-panel-muted,#f8fafc);color:var(--edugeo-accent,#2563eb)}.function-value-table-panel tbody tr.is-selected{font-weight:700}
@media(max-width:600px){.function-value-table-panel{left:0;right:0;bottom:0;width:100%;max-height:72vh;border-radius:18px 18px 0 0}.function-value-table-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.function-value-table-config{padding:9px 12px}.function-value-table-panel th,.function-value-table-panel td{padding:9px 8px}}

/* Function inquiry: persistent classroom workflow, not a debug surface. */
.function-inquiry-panel{position:fixed;right:24px;bottom:72px;z-index:1210;width:min(460px,calc(100vw - 48px));max-height:min(76vh,700px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edugeo-border,#d7dee7);border-radius:18px;background:var(--edugeo-panel-bg,#fff);color:var(--edugeo-text,#182026);box-shadow:0 20px 54px rgba(15,23,42,.18);backdrop-filter:blur(14px)}
.function-inquiry-panel[hidden]{display:none}.function-inquiry-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-inquiry-header>div{display:grid;gap:2px}.function-inquiry-header span{font-size:12px;color:var(--edugeo-muted,#64748b)}.function-inquiry-header button{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--edugeo-muted,#64748b);font-size:22px;cursor:pointer}.function-inquiry-header button:hover{background:rgba(37,99,235,.08);color:var(--edugeo-accent,#2563eb)}
.function-inquiry-phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px 10px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-inquiry-phases button{min-width:0;min-height:38px;padding:5px 3px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--edugeo-muted,#64748b);font-size:11px;cursor:pointer}.function-inquiry-phases button.is-active{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.1);color:var(--edugeo-accent,#2563eb);font-weight:700}
.function-inquiry-scroll{min-height:180px;overflow:auto;padding:12px 14px}.function-inquiry-scroll section{display:grid;gap:10px}.function-inquiry-scroll section[hidden]{display:none}.function-inquiry-scroll label{display:grid;gap:5px;color:var(--edugeo-muted,#64748b);font-size:12px}.function-inquiry-scroll input,.function-inquiry-scroll textarea,.function-inquiry-scroll select{width:100%;min-height:36px;box-sizing:border-box;border:1px solid var(--edugeo-border,#d7dee7);border-radius:9px;padding:7px 9px;background:var(--edugeo-panel-bg,#fff);color:var(--edugeo-text,#182026)}.function-inquiry-scroll textarea{min-height:88px;resize:vertical}.function-inquiry-scroll button,.function-inquiry-footer button{min-height:38px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:9px;padding:7px 12px;background:var(--edugeo-panel-bg,#fff);color:var(--edugeo-text,#182026);cursor:pointer}.function-inquiry-scroll button.primary,.function-inquiry-footer button.primary{border-color:var(--edugeo-accent,#2563eb);background:var(--edugeo-accent,#2563eb);color:#fff;font-weight:700}.function-inquiry-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:9px}.function-inquiry-prompt{margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--edugeo-accent,#2563eb);border-radius:0 9px 9px 0;background:rgba(37,99,235,.06);font-size:13px;line-height:1.55}.function-inquiry-result{padding:10px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:10px;background:var(--edugeo-panel-muted,#f8fafc)}.function-inquiry-result p{margin:4px 0}.function-inquiry-result ul{margin:7px 0;padding-left:20px}.function-inquiry-result .stale{color:#b45309;font-weight:700}.function-inquiry-parameters,.function-inquiry-tables{display:grid;gap:8px}.function-inquiry-parameters h4,.function-inquiry-tables h4,.function-inquiry-functions h4{margin:4px 0;font-size:13px}.function-inquiry-parameter span{display:flex;justify-content:space-between}.function-inquiry-parameter input[type=range]{padding:0}.function-inquiry-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.function-inquiry-check input{width:auto;min-height:auto}.function-inquiry-teacher{margin-top:14px;padding-top:10px;border-top:1px solid var(--edugeo-border,#d7dee7)}.function-inquiry-teacher summary{cursor:pointer;color:var(--edugeo-muted,#64748b);font-size:12px}.function-inquiry-teacher[open]{display:grid;gap:8px}.function-inquiry-warnings p{margin:8px 0 0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-inquiry-warnings p.error{background:#fef2f2;color:#b91c1c}.function-inquiry-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-inquiry-footer span{text-align:center;color:var(--edugeo-muted,#64748b);font-size:12px}.function-inquiry-footer button:disabled{opacity:.45;cursor:not-allowed}.function-inquiry-panel .muted{color:var(--edugeo-muted,#64748b);font-size:12px}
@media(max-width:600px){.function-inquiry-panel{left:0;right:0;bottom:0;width:100%;max-height:78vh;border-radius:18px 18px 0 0}.function-inquiry-header{padding:10px 12px}.function-inquiry-phases{gap:2px;padding:6px}.function-inquiry-phases button{min-height:42px;font-size:10px}.function-inquiry-scroll{padding:10px 12px}.function-inquiry-grid{grid-template-columns:1fr}.function-inquiry-footer{padding:8px 10px}.function-inquiry-scroll textarea{min-height:82px}}

/* Step 71.3: classroom-facing function parameter explorer. */
.function-parameter-panel{position:fixed;right:24px;bottom:72px;z-index:1220;width:min(480px,calc(100vw - 48px));max-height:min(78vh,740px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edugeo-border,#d7dee7);border-radius:18px;background:rgba(255,255,255,.97);color:var(--edugeo-text,#182026);box-shadow:0 22px 58px rgba(15,23,42,.18);backdrop-filter:blur(16px)}
.function-parameter-panel[hidden]{display:none}.function-parameter-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-parameter-header>div{display:grid;gap:2px}.function-parameter-header span{font-size:12px;color:#64748b}.function-parameter-header button{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#64748b;font-size:22px;cursor:pointer}.function-parameter-header button:hover{background:rgba(37,99,235,.08);color:#2563eb}
.function-parameter-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px 10px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.function-parameter-modes button{min-height:40px;border:1px solid transparent;border-radius:9px;background:transparent;color:#64748b;cursor:pointer}.function-parameter-modes button.is-active{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.1);color:#1d4ed8;font-weight:700}
.function-parameter-scroll{min-height:220px;overflow:auto;padding:12px;display:grid;gap:10px}.function-parameter-card{display:grid;gap:9px;padding:11px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:12px;background:#fff}.function-parameter-card h4{margin:0;font-size:13px}.function-parameter-card label{display:grid;gap:5px;color:#64748b;font-size:12px}.function-parameter-card input[type=text],.function-parameter-card textarea{box-sizing:border-box;width:100%;min-height:36px;padding:7px 9px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:9px;background:#fff;color:#172033}.function-parameter-card textarea{min-height:72px;resize:vertical}.function-parameter-card button,.function-parameter-footer button{min-height:36px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#334155;cursor:pointer}.function-parameter-card button:hover,.function-parameter-footer button:hover{border-color:#93b4e7;color:#1d4ed8;background:#f8fbff}.function-parameter-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.function-parameter-card-title>div,.function-parameter-playback{display:flex;gap:6px;flex-wrap:wrap}
.function-parameter-binding{display:grid;gap:5px;margin-top:6px}.function-parameter-binding span{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.function-parameter-binding small{color:#94a3b8}.function-parameter-binding output{font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums}.function-parameter-binding input[type=range]{width:100%;min-height:34px;touch-action:pan-x}.function-parameter-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.function-parameter-metrics div{display:grid;gap:3px;padding:9px;border-radius:9px;background:#f8fafc}.function-parameter-metrics span{font-size:11px;color:#64748b}.function-parameter-metrics strong{font-size:16px;color:#1e3a8a}
.function-parameter-snapshot{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:5px;padding:6px;border:1px solid #e2e8f0;border-radius:9px}.function-parameter-snapshot.is-selected{border-color:#93c5fd;background:#eff6ff}.function-parameter-snapshot>button:first-child{display:grid;gap:2px;text-align:left;border:0;background:transparent}.function-parameter-snapshot span{font-size:11px;color:#64748b}.function-parameter-table-wrap{overflow:auto}.function-parameter-card table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.function-parameter-card th,.function-parameter-card td{padding:7px 6px;border-bottom:1px solid #e2e8f0;text-align:right;font-size:12px}.function-parameter-card th:first-child,.function-parameter-card td:first-child{text-align:left}.function-parameter-card tr.is-invalid{color:#b91c1c}.function-parameter-check{display:flex!important;align-items:center;gap:7px!important}.function-parameter-check input{width:auto}.function-parameter-warnings p{margin:0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-parameter-warnings p.error{background:#fef2f2;color:#b91c1c}.function-parameter-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.function-parameter-footer span,.function-parameter-panel .muted{color:#64748b;font-size:12px}
@media(max-width:600px){.function-parameter-panel{left:0;right:0;bottom:0;width:100%;max-height:80vh;border-radius:18px 18px 0 0}.function-parameter-header{padding:10px 12px}.function-parameter-modes{padding:6px}.function-parameter-modes button{min-height:44px;font-size:12px}.function-parameter-scroll{padding:10px}.function-parameter-card{padding:10px}.function-parameter-card button{min-height:42px}.function-parameter-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.function-parameter-snapshot{grid-template-columns:1fr auto}.function-parameter-snapshot>button:last-child{grid-column:2}.function-parameter-footer{padding:8px 10px}}

/* Step 71.4: dynamic secant and average-rate classroom explorer. */
.function-secant-panel{position:fixed;right:24px;bottom:72px;z-index:1230;width:min(460px,calc(100vw - 48px));max-height:min(80vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edugeo-border,#d7dee7);border-radius:18px;background:rgba(255,255,255,.97);color:var(--edugeo-text,#182026);box-shadow:0 22px 58px rgba(15,23,42,.18);backdrop-filter:blur(16px)}
.function-secant-panel[hidden]{display:none}.function-secant-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-secant-header>div{display:grid;gap:2px}.function-secant-header span{font-size:12px;color:#64748b}.function-secant-header button{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#64748b;font-size:22px;cursor:pointer}.function-secant-header button:hover{background:rgba(37,99,235,.08);color:#2563eb}
.function-secant-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:8px 10px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.function-secant-modes button{min-height:40px;border:1px solid transparent;border-radius:9px;background:transparent;color:#64748b;cursor:pointer}.function-secant-modes button.is-active{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.1);color:#1d4ed8;font-weight:700}
.function-secant-scroll{min-height:220px;overflow:auto;padding:12px;display:grid;gap:10px}.function-secant-card{display:grid;gap:9px;padding:11px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:12px;background:#fff}.function-secant-card h4{margin:0;font-size:13px}.function-secant-card label{display:grid;gap:5px;color:#64748b;font-size:12px}.function-secant-card input[type=text],.function-secant-card textarea{box-sizing:border-box;width:100%;min-height:38px;padding:7px 9px;border:1px solid var(--edugeo-border,#d7dee7);border-radius:9px;background:#fff;color:#172033}.function-secant-card textarea{min-height:72px;resize:vertical}.function-secant-card button,.function-secant-footer button{min-height:38px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#334155;cursor:pointer}.function-secant-card button:hover,.function-secant-footer button:hover,.function-secant-card button.is-active{border-color:#93b4e7;color:#1d4ed8;background:#eff6ff}.function-secant-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.function-secant-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.function-secant-actions{display:flex;gap:6px;flex-wrap:wrap}
.function-secant-slider{display:grid;gap:5px;margin-top:6px}.function-secant-slider span{display:flex;justify-content:space-between}.function-secant-slider output{font-weight:700;color:#1d4ed8;font-variant-numeric:tabular-nums}.function-secant-slider input[type=range]{width:100%;min-height:36px;touch-action:pan-x}.function-secant-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.function-secant-metrics div{display:grid;gap:3px;padding:9px;border-radius:9px;background:#f8fafc}.function-secant-metrics div.rate{grid-column:1/-1;background:#eff6ff}.function-secant-metrics span{font-size:11px;color:#64748b}.function-secant-metrics strong{font-size:16px;color:#1e3a8a}.function-secant-formula{margin:0;padding:9px;border-radius:9px;background:#f8fafc;color:#334155;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.function-secant-record{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;padding:6px;border:1px solid #e2e8f0;border-radius:9px}.function-secant-record>button:first-child{display:grid;gap:2px;text-align:left;border:0;background:transparent}.function-secant-record span{font-size:11px;color:#64748b}.function-secant-animation-source{display:flex;gap:16px}.function-secant-animation-source label,.function-secant-check{display:flex!important;align-items:center;gap:6px!important}.function-secant-animation-source input,.function-secant-check input{width:auto}.function-secant-warnings p{margin:0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-secant-warnings p.error{background:#fef2f2;color:#b91c1c}.function-secant-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.function-secant-footer span,.function-secant-panel .muted{color:#64748b;font-size:12px}
@media(max-width:600px){.function-secant-panel{left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:80vh;border-radius:18px 18px 0 0}.function-secant-header{padding:10px 12px}.function-secant-modes{padding:6px}.function-secant-modes button{min-height:44px}.function-secant-scroll{padding:10px}.function-secant-card{padding:10px}.function-secant-card button{min-height:44px}.function-secant-source-grid{grid-template-columns:1fr}.function-secant-actions button{flex:1 1 42%}.function-secant-footer{padding:8px 10px}}

/* Step 73: primary-grade input/output pattern explorer. */
.function-pattern-panel{position:fixed;right:24px;bottom:72px;z-index:1240;width:min(470px,calc(100vw - 48px));max-height:min(80vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edugeo-border,#d7dee7);border-radius:18px;background:rgba(255,255,255,.97);color:var(--edugeo-text,#182026);box-shadow:0 22px 58px rgba(15,23,42,.18);backdrop-filter:blur(16px)}
.function-pattern-panel[hidden]{display:none}.function-pattern-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:var(--edugeo-panel-muted,#f8fafc)}.function-pattern-header>div{display:grid;gap:2px}.function-pattern-header span{font-size:12px;color:#64748b}.function-pattern-header button{width:44px;height:44px;border:0;border-radius:11px;background:transparent;color:#64748b;font-size:22px;cursor:pointer}.function-pattern-header button:hover{background:rgba(37,99,235,.08);color:#2563eb}
.function-pattern-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px 12px;border-bottom:1px solid #e2e8f0}.function-pattern-modes button,.function-pattern-table-actions button,.function-pattern-observation button,.function-pattern-footer button,.function-pattern-table-card td button{min-height:44px;border:1px solid #d7dee7;border-radius:10px;padding:7px 10px;background:#fff;color:#334155;cursor:pointer}.function-pattern-modes button.is-active,.function-pattern-observation button.primary{border-color:#2563eb;background:#2563eb;color:#fff;font-weight:700}
.function-pattern-scroll{min-height:180px;overflow:auto;padding:12px;display:grid;gap:12px}.function-pattern-source,.function-pattern-table-card,.function-pattern-observation{padding:11px;border:1px solid #e2e8f0;border-radius:13px;background:#fff}.function-pattern-source p{margin:7px 0 0;padding:9px 10px;border-left:3px solid #2563eb;border-radius:0 9px 9px 0;background:#eff6ff;color:#334155;font-size:13px;line-height:1.55}.function-pattern-table-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}.function-pattern-table-wrap{max-height:300px;overflow:auto}.function-pattern-panel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.function-pattern-panel th,.function-pattern-panel td{padding:8px 7px;border-bottom:1px solid #e2e8f0;text-align:center;font-size:13px}.function-pattern-panel th{position:sticky;top:0;background:#f8fafc;color:#64748b}.function-pattern-panel tbody tr{cursor:pointer}.function-pattern-panel tbody tr:hover,.function-pattern-panel tbody tr.is-selected{background:#eff6ff;color:#1d4ed8}.function-pattern-panel td input{width:86px;min-height:40px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:9px;padding:6px 8px;text-align:center}.function-pattern-feedback{min-height:20px;margin-top:7px;color:#2563eb;font-size:13px}
.function-pattern-observation{display:grid;gap:9px}.function-pattern-observation label{display:grid;gap:5px;color:#64748b;font-size:12px}.function-pattern-observation textarea{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;color:#182026;background:#fff}.function-pattern-observation .function-pattern-complete{display:flex;align-items:center;gap:7px}.function-pattern-observation .function-pattern-complete input{width:auto}.function-pattern-warnings p{margin:0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-pattern-warnings p.error{background:#fef2f2;color:#b91c1c}.function-pattern-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid #d7dee7;background:#f8fafc}.function-pattern-footer span{color:#64748b;font-size:12px}
@media (max-width: 600px){.function-pattern-panel{left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:82vh;border-radius:18px 18px 0 0}.function-pattern-header{padding:9px 11px}.function-pattern-modes{padding:6px}.function-pattern-modes button{min-height:44px;padding:6px 4px;font-size:12px}.function-pattern-scroll{padding:9px}.function-pattern-source,.function-pattern-table-card,.function-pattern-observation{padding:9px}.function-pattern-table-actions button{flex:1 1 28%;min-height:44px}.function-pattern-panel th,.function-pattern-panel td{padding:8px 5px}.function-pattern-footer{padding:8px 10px}}

/* Step 74: junior-grade function interval observation explorer. */
.function-interval-panel{position:fixed;right:24px;bottom:72px;z-index:1250;width:min(460px,calc(100vw - 48px));max-height:min(80vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edugeo-border,#d7dee7);border-radius:18px;background:rgba(255,255,255,.97);color:var(--edugeo-text,#182026);box-shadow:0 22px 58px rgba(15,23,42,.18);backdrop-filter:blur(16px)}
.function-interval-panel[hidden]{display:none}.function-interval-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.function-interval-panel__header>div{display:grid;gap:2px}.function-interval-panel__header small{font-size:12px;color:#64748b}.function-interval-panel__header button{width:44px;height:44px;border:0;border-radius:11px;background:transparent;color:#64748b;font-size:22px;cursor:pointer}.function-interval-panel__header button:hover{background:rgba(37,99,235,.08);color:#2563eb}.function-interval-panel__body{min-height:180px;overflow:auto;padding:12px;display:grid;gap:10px}.function-interval-panel__source{margin:0;padding:9px 10px;border-left:3px solid #2563eb;border-radius:0 9px 9px 0;background:#eff6ff;color:#334155;font-size:13px;line-height:1.5}.function-interval-panel__metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:#f8fafc}.function-interval-panel__metric span{color:#64748b;font-size:12px}.function-interval-panel__metric strong{color:#1e3a8a;font-size:16px}.function-interval-panel__hint{margin:0;color:#64748b;font-size:12px;line-height:1.5}.function-interval-panel__controls{display:flex;align-items:end;gap:7px;flex-wrap:wrap}.function-interval-panel__controls label{display:grid;gap:4px;color:#64748b;font-size:12px}.function-interval-panel__controls input{width:86px;min-height:40px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:9px;padding:6px 8px}.function-interval-panel__controls button,.function-interval-panel__actions button{min-height:44px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#334155;cursor:pointer}.function-interval-panel__controls button:hover,.function-interval-panel__actions button:hover{border-color:#93b4e7;color:#1d4ed8;background:#eff6ff}.function-interval-panel__table{max-height:230px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px}.function-interval-panel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.function-interval-panel th,.function-interval-panel td{padding:7px 8px;border-bottom:1px solid #e2e8f0;text-align:right;font-size:12px}.function-interval-panel th{position:sticky;top:0;background:#f8fafc;color:#64748b}.function-interval-panel__records{display:grid;gap:7px}.function-interval-record{min-height:40px;text-align:left;border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#334155;padding:7px 9px;cursor:pointer}.function-interval-record[aria-pressed=true]{border-color:#93b4e7;background:#eff6ff;color:#1d4ed8}.function-interval-panel__field{display:grid;gap:5px;color:#64748b;font-size:12px}.function-interval-panel__field textarea{box-sizing:border-box;width:100%;min-height:64px;border:1px solid #cbd5e1;border-radius:9px;padding:7px 9px;resize:vertical}.function-interval-panel__actions{display:flex;gap:7px;flex-wrap:wrap}.function-interval-panel__feedback{min-height:18px;margin:0;color:#2563eb;font-size:13px}.function-interval-panel__body>div:last-child p{margin:0;padding:7px 9px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px}.function-interval-panel__body>div:last-child p.error{background:#fef2f2;color:#b91c1c}
@media (max-width: 600px){.function-interval-panel{left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:82vh;border-radius:18px 18px 0 0}.function-interval-panel__header{padding:9px 11px}.function-interval-panel__body{padding:9px}.function-interval-panel__controls button,.function-interval-panel__actions button{min-height:44px;flex:1 1 30%}.function-interval-panel__table{max-height:210px}}
/* 第75步：高中函数参数与变化率综合探究 */
.function-advanced-panel {
  position: fixed;
  z-index: 35;
  top: 88px;
  right: 20px;
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, .35);
  border-radius: 18px;
  background: rgba(248, 251, 255, .97);
  box-shadow: 0 20px 60px rgba(30, 64, 175, .18);
  color: #172554;
}
.function-advanced-panel__header,
.function-advanced-panel__toolbar,
.function-advanced-panel__metrics,
.function-advanced-panel__inputs,
.function-advanced-panel__snapshot-actions { display: flex; gap: 8px; align-items: center; }
.function-advanced-panel__header { justify-content: space-between; margin-bottom: 12px; }
.function-advanced-panel__header small { display: block; margin-top: 3px; color: #64748b; }
.function-advanced-panel button { min-height: 36px; border: 1px solid #bfdbfe; border-radius: 10px; padding: 6px 10px; background: #fff; color: #1e3a8a; cursor: pointer; }
.function-advanced-panel button:hover,
.function-advanced-panel button.is-active { border-color: #2563eb; background: #dbeafe; }
.function-advanced-panel__toolbar button { flex: 1; }
.function-advanced-panel__metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 12px 0; }
.teaching-template-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--edugeo-border,#d7dee7);background:#f8fafc}.teaching-template-toolbar label{display:grid;gap:4px;color:#64748b;font-size:12px}.teaching-template-toolbar select{min-height:34px;border:1px solid #cbd5e1;border-radius:8px;padding:5px 8px;background:#fff;color:#172033}.teaching-template-toolbar span{color:#64748b;font-size:12px}.teaching-template-confirm{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.22)}.teaching-template-confirm[hidden]{display:none}.teaching-template-confirm-card{width:min(420px,calc(100% - 32px));padding:18px;border:1px solid #d7dee7;border-radius:14px;background:#fff;box-shadow:0 14px 35px rgba(15,23,42,.16)}.teaching-template-confirm-card h3{margin:0 0 8px;font-size:16px;color:#172033}.teaching-template-confirm-card p{margin:0;color:#64748b;font-size:13px;line-height:1.6}.teaching-template-confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}.teaching-template-confirm-actions button{min-height:38px;border:1px solid #cbd5e1;border-radius:9px;padding:7px 12px;background:#fff;color:#334155;cursor:pointer}.teaching-template-confirm-actions button.primary{border-color:#2563eb;background:#2563eb;color:#fff;font-weight:700}@media(max-width:600px){.teaching-template-toolbar{align-items:stretch;flex-direction:column;padding:9px 12px}.teaching-template-toolbar select{min-height:40px}.teaching-template-toolbar span{font-size:11px}.teaching-template-confirm-actions{display:grid;grid-template-columns:1fr}.teaching-template-confirm-actions button{min-height:44px}}
.function-advanced-panel__metrics div { padding: 8px; border-radius: 10px; background: #eff6ff; text-align: center; }
.function-advanced-panel__metrics span { display: block; font-size: 11px; color: #64748b; }
.function-advanced-panel__metrics b { display: block; margin-top: 4px; font-size: 14px; }
.function-advanced-panel section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.function-advanced-panel h4 { margin: 0 0 8px; font-size: 13px; }
.function-advanced-panel label { display: block; margin: 7px 0; font-size: 12px; color: #475569; }
.function-advanced-panel input,
.function-advanced-panel textarea { box-sizing: border-box; width: 100%; margin-top: 4px; padding: 8px 9px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a; }
.function-advanced-panel__inputs label { flex: 1; }
.function-advanced-panel__inputs button { align-self: end; }
.function-advanced-panel textarea { min-height: 52px; resize: vertical; }
.function-advanced-panel__bindings { display: flex; flex-wrap: wrap; gap: 6px; }
.function-advanced-panel__bindings .muted,
.function-advanced-panel .muted { color: #64748b; font-size: 12px; }
.function-advanced-panel__snapshots { margin: 8px 0 0; padding: 0; list-style: none; }
.function-advanced-panel__snapshots li { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.function-advanced-panel__snapshots li button:first-child { flex: 1; text-align: left; }
.function-advanced-panel__snapshots span { min-width: 52px; font-size: 12px; text-align: right; color: #475569; }
.function-advanced-panel__warning { margin: 12px 0 0; padding: 9px; border-radius: 9px; background: #fff7ed; color: #9a3412; font-size: 12px; }
.function-advanced-panel__hint { margin: 12px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) {
  .function-advanced-panel { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: min(78vh, 620px); border-radius: 18px 18px 12px 12px; padding: 12px; }
  .function-advanced-panel__metrics { grid-template-columns: repeat(2, 1fr); }
  .function-advanced-panel button { min-height: 42px; }
}