@import url("https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css");

/* --- Slider Component Styles --- */
.slider-guidance {
    color: var(--theme-title-color);
    font-style: italic;
}

/* --- Iframe Component Styles --- */
.iframe-container {
    margin: 1.5rem 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.embedded-iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Styles for form elements, inspired by quiz components */
.form-quiz-option {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0.6rem 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.form-quiz-option input[type="radio"],
.form-quiz-option input[type="checkbox"] {
    margin-right: 1rem;
    flex-shrink: 0;
    accent-color: var(--primary-green);
    width: 1.1em;
    height: 1.1em;
}

.question-container {
    background-color: transparent;
    padding: 1rem 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.question-text {
    padding-left: 0;
}

.sliders-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

.single-slider-container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.slider-label {
    font-weight: bold;
    color: var(--text-color);
    text-align: right;
}

.slider-input {
    width: 100%;
    max-width: 250px;
}

:root {
    --color-ink: #24302a;
    --color-ink-muted: #5f6f65;
    --color-paper: #ffffff;
    --color-paper-soft: #f6faf3;
    --color-surface-tint: #eef7ea;
    --color-border: #c7d9c6;
    --color-border-strong: #94bd96;
    --color-accent: #3f8f4a;
    --color-accent-dark: #2f7139;
    --color-accent-soft: #d7ecd6;
    --color-accent-muted: #77b97b;
    --color-success-bg: #d7ecd6;
    --color-success-text: #256f35;
    --color-success-border: #77b97b;
    --color-danger-bg: #fbe3e3;
    --color-danger-text: #8a2c2c;
    --color-danger-border: #efb4b4;
    --color-warning-bg: #fff3cf;
    --color-warning-text: #815b12;
    --color-warning-border: #f4d68b;
    --color-on-accent: #ffffff;
    --color-panel-muted: #f7faf6;
    --color-control-bg: #eef1ec;
    --color-code-bg: #2f352f;
    --color-code-gutter-bg: #3b443c;
    --color-code-text: #f4f7ef;
    --color-code-muted: #9aa39a;
    --color-shadow: rgba(36, 48, 42, 0.12);
    --primary-green: var(--color-accent);
    --light-green: var(--color-accent-soft);
    --dark-green: var(--color-accent-dark);
    --theme-primary: var(--primary-green);
    --theme-primary-soft: var(--light-green);
    --theme-primary-strong: var(--dark-green);
    --theme-title-color: var(--theme-primary-strong);
    --theme-title-accent: var(--theme-primary);
    --text-color: var(--color-ink);
    --muted-text-color: var(--color-ink-muted);
    --heading-color: var(--theme-title-color);
    --bg-color: var(--color-paper-soft);
    --container-bg: var(--color-paper);
    --border-color: var(--color-border);
    --highlight-bg: var(--color-surface-tint);
    --button-text-color: var(--color-on-accent);
    --secondary-color: var(--color-accent-muted);
    --secondary-dark-color: var(--color-accent);
    --feedback-correct-bg: var(--color-success-bg);
    --feedback-correct-text: var(--color-success-text);
    --feedback-correct-border: var(--color-success-border);
    --feedback-incorrect-bg: var(--color-danger-bg);
    --feedback-incorrect-text: var(--color-danger-text);
    --feedback-incorrect-border: var(--color-danger-border);
    --feedback-partial-bg: var(--color-warning-bg);
    --feedback-partial-text: var(--color-warning-text);
    --feedback-partial-border: var(--color-warning-border);
    --shadow-color: var(--color-shadow);
    --callout-info-color: var(--theme-primary);
    --callout-tip-color: var(--secondary-dark-color);
    --callout-warning-color: var(--color-warning-text);
    --callout-danger-color: var(--color-danger-text);
    --callout-strategy-color: var(--theme-primary);
    --callout-concept-color: var(--theme-primary-strong);
    --callout-quote-color: var(--secondary-color);
    --callout-reflection-color: var(--theme-primary);
    --hover-bg-subtle: rgba(0, 0, 0, 0.02);
    --editor-hover-current-bg: color-mix(in srgb, var(--highlight-bg) 36%, white 64%);
    --editor-hover-parent-bg: color-mix(in srgb, var(--highlight-bg) 24%, white 76%);
    --editor-hover-grandparent-bg: color-mix(in srgb, var(--highlight-bg) 14%, white 86%);
    --editor-hover-outer-bg: color-mix(in srgb, var(--highlight-bg) 8%, white 92%);
    --editor-hover-current-shadow: 0 8px 24px color-mix(in srgb, var(--primary-green) 10%, transparent);
    --editor-hover-parent-shadow: 0 6px 16px color-mix(in srgb, var(--primary-green) 8%, transparent);
    --editor-hover-grandparent-shadow: 0 4px 10px color-mix(in srgb, var(--primary-green) 6%, transparent);
    --editor-hover-outer-shadow: 0 2px 6px color-mix(in srgb, var(--primary-green) 4%, transparent);
    --editor-passive-hover-bg: color-mix(in srgb, var(--highlight-bg) 16%, white 84%);
    --editor-passive-hover-shadow: 0 4px 12px color-mix(in srgb, var(--primary-green) 6%, transparent);
    --editor-element-hover-bg: color-mix(in srgb, var(--primary-green) 5%, transparent);
    --editor-passive-hover-lift: translateY(-1px);
    /*
     * 教材字体体系：方正字体为首选，本机未安装时自动降级。
     * 纸书的 10.5pt 正文在屏幕上偏小，因此正文保留为 1rem；标题用 clamp
     * 在手机与桌面之间平滑缩放，桌面端上限对应纸书规范字号。
     */
    --font-fz-cu-heisong: "方正粗黑宋简体", "FZCuHeiSongS-B-GB", "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    --font-fz-cu-song: "方正粗宋简体", "方正粗宋", "FZCuSong-B09S", "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    --font-fz-cu-yuan: "方正粗圆简体", "方正粗圆", "FZCuYuan-M03S", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-fz-da-hei: "方正大黑简体", "方正大黑", "FZDaHei-B02S", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-fz-kai: "方正楷体简体", "方正楷体", "FZKai-Z03S", "KaiTi", "STKaiti", serif;
    --font-fz-hei: "方正黑体简体", "方正黑体", "FZHei-B01S", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-fz-shu-song: "方正书宋简体", "方正书宋", "FZShuSong-Z01S", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
    --font-body: var(--font-fz-shu-song);
    --font-heading: var(--font-fz-cu-song);
    --font-ui: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    --font-note: "FangSong", "STFangsong", "Songti SC", serif;
    --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
    --font-size-body: 1rem;
    --font-size-small: 0.92rem;
    --font-size-caption: 0.9rem;
    --font-size-component-title: 1.06rem;
    --font-size-question: 1.08rem;
    /*
     * 数字教材标题字号阶梯：任一视口下均满足 h1 > h2 > ... > h7 >= 正文。
     * 正文为 1rem（默认 16px），七级标题以正文大小为下限。
     */
    --font-size-h1: clamp(2rem, 1.92rem + 0.4vw, 2.1667rem); /* 32–34.67px */
    --font-size-h2: clamp(1.625rem, 1.53rem + 0.48vw, 1.8333rem); /* 26–29.33px */
    --font-size-h3: clamp(1.375rem, 1.32rem + 0.28vw, 1.5rem); /* 22–24px */
    --font-size-h4: 1.25rem; /* 20px */
    --font-size-h5: 1.125rem; /* 18px */
    --font-size-h6: 1.0625rem; /* 17px */
    --font-size-h7: 1rem; /* 16px，与正文同为最低字号 */
    --line-height-body: 1.82;
    --line-height-compact: 1.55;
    --line-height-caption: 1.68;
    --prose-max-width: 100%;
    --prose-narrow-width: 100%;
    --prose-caption-width: 34em;
    --space-block-sm: 0.75rem;
    --space-block-md: 1rem;
    --space-block-lg: 1.5rem;
    --space-section: 2.4rem;
    --radius-card: 8px;
    --radius-panel: 12px;
}

#graph-container.chart-container {
    min-height: 500px;
    padding: 20px;
    background-color: var(--color-panel-muted);
    position: relative;
    z-index: 1;
}

#graph-container .echarts-instance {
    min-height: 460px;
}

ul, ol {
  padding-left: 2rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

.nested-list {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

ul ul, ol ul, ul ol, ol ol {
  padding-left: 1.5rem;
}

ul ul, ol ul {
  list-style-type: circle;
}

ul ul ul, ol ul ul {
  list-style-type: square;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

.interactive-container .nested-list {
  padding-left: 1.5rem;
}
.interactive-container li > .nested-list {
  margin-top: 0.4rem;
}

.click-connect-wrapper {
    display: flex;
    justify-content: space-between;
}

.callout-strategy .strategy-name {
    font-weight: 700;
    font-style: normal;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 1.2em;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

.callout-strategy .strategy-description {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--text-color);
    padding-top: 10px;
}

.callout-strategy .strategy-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.callout-strategy .strategy-steps li {
    counter-increment: step-counter;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
}

.callout-strategy .strategy-steps li::before {
    content: counter(step-counter);
    background-color: var(--callout-strategy-color);
    color: var(--color-on-accent);
    font-weight: bold;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-block;
    text-align: center;
    line-height: 28px;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.separator-after {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.form-field-horizontal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-field-horizontal label {
    flex: 0 0 150px;
    text-align: right;
}

.form-field-horizontal input,
.form-field-horizontal textarea,
.form-field-horizontal select {
    flex: 1;
}

fieldset.form-group {
    border: none;
    padding: 0;
    margin: 0;
}

legend.form-label {
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0;
}

.form-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.form-option input {
    margin-right: 10px;
}

.form-container {
    background-color: var(--container-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 1.05em;
}

.form-field input[type="text"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.3s, box-shadow 0.3s;
    font-size: 10.5pt;
    min-height: 36px;
}

.form-field input[type="text"]:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--light-green);
}

.form-field .checkbox-group,
.form-field .radio-button-group,
.form-group .checkbox-group,
.form-group .radio-button-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field .checkbox-item,
.form-field .radio-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.form-field .checkbox-item input,
.form-field .radio-item input {
    margin-right: 12px;
    accent-color: var(--primary-green);
}

.form-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 25px;
}

.form-buttons button {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
}

.form-buttons button:hover {
    transform: translateY(-2px);
}

.form-title {
    color: var(--theme-title-color);
    border-bottom: 2px solid var(--theme-title-accent);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.form-field-horizontal input[type="text"],
.form-field-horizontal textarea,
.form-field-horizontal select {
    border: 1px solid var(--border-color);
}

.form-buttons .submit-button {
    background-color: var(--primary-green);
    color: var(--button-text-color);
}

.form-buttons .submit-button:hover {
    background-color: var(--dark-green);
}

.form-buttons .reset-button {
    background-color: var(--secondary-color);
    color: var(--button-text-color);
}

.form-buttons .reset-button:hover {
    background-color: var(--secondary-dark-color);
}

.form-feedback {
    margin-top: 20px;
    padding: 12px;
    border-radius: 6px;
    font-weight: 500;
}

.form-feedback.success {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border: 1px solid var(--feedback-correct-border);
}

.form-feedback.error {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
}

.callout-reflection .callout-title {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.callout-reflection .reflection-prompts {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.callout-reflection .reflection-prompts li {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 12px;
    font-size: 1em;
    line-height: 1.6;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.callout-reflection .reflection-prompts li::before {
    content: '»';
    color: var(--callout-reflection-color);
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.4em;
    transition: color 0.2s ease-in-out;
}

.click-connect-wrapper {
    position: relative;
    min-height: 300px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, white 30%);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
}

.click-connect-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.click-connect-item {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background-color: var(--container-bg);
    transition: background-color 0.2s, border-color 0.2s;
    z-index: 1;
}

.click-connect-item.is-selected {
    border-color: var(--primary-green);
    background-color: var(--highlight-bg);
    font-weight: bold;
}

.click-connect-item.is-correct {
    border-color: var(--feedback-correct-border);
}

.click-connect-item.is-incorrect {
    border-color: var(--feedback-incorrect-border);
}

.click-connect-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.concept-connector-container {
    position: relative;
    min-height: 400px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.concept-workspace {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px;
}

.concept-item {
    position: absolute;
    padding: 8px 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg);
    cursor: grab;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px var(--shadow-color);
    min-width: 80px;
    text-align: center;
}

.concept-item.is-selected {
    border-color: var(--dark-green);
    background-color: var(--highlight-bg);
    font-weight: bold;
    box-shadow: 0 0 15px var(--primary-green);
}

.connection-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.connection {
    stroke: var(--primary-green);
    stroke-width: 3px;
    fill: none;
    transition: stroke 0.2s;
}

.connection:hover {
    stroke: var(--dark-green);
}

.temp-connection {
    stroke: var(--dark-green);
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
    fill: none;
}

.connection-label {
    fill: var(--text-color);
    font-size: 14px;
    font-family: sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--container-bg);
    stroke-width: 3px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.relation-popup {
    position: absolute;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 280px;
    border-radius: 8px;
}

.popup-title {
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, white 30%);
    font-size: 16px;
    color: var(--theme-title-color);
    margin: -5px 0 5px 0;
}

.relation-popup input {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

.popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.context-menu {
    position: absolute;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 5px;
    z-index: 10;
    border-radius: 5px;
    min-width: 150px;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
}

.context-menu button:hover {
    background-color: var(--highlight-bg);
    color: var(--dark-green);
}

.feedback-container {
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 15px;
    text-align: center;
}

.feedback-container.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border: 1px solid var(--feedback-correct-border);
}

.feedback-container.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
}

.quiz-controls .check-answer-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- 全局与布局 --- */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

body {
font-family: var(--font-body);
font-feature-settings: "kern" 1;
text-rendering: optimizeLegibility;
background-color: var(--bg-color);
color: var(--text-color);
line-height: var(--line-height-body);
transition: background-color 0.4s ease, color 0.4s ease;
}

#app {
width: 90%;
height: calc(100% - 20px);
margin: 10px auto;
box-sizing: border-box;
overflow-y: auto;
padding: 2.5rem;
background-color: var(--container-bg);
border-radius: 12px;
box-shadow: 0 8px 32px var(--shadow-color);
transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.page-nav-trigger-button,
.page-share-trigger-button {
    position: fixed;
    top: 5px;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, white 24%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--container-bg) 82%, var(--highlight-bg) 18%);
    color: color-mix(in srgb, var(--dark-green) 86%, white 14%);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12), 0 4px 14px var(--shadow-color);
    backdrop-filter: blur(18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.96;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 1402;
}

.page-nav-trigger-button {
    left: 5px;
}

.page-share-trigger-button {
    right: 14px;
}

.page-nav-trigger-button:hover,
.page-share-trigger-button:hover,
.page-nav-trigger-button.is-active,
.page-share-trigger-button.is-active {
    opacity: 1;
    color: color-mix(in srgb, var(--dark-green) 92%, black 8%);
    background: color-mix(in srgb, var(--container-bg) 58%, var(--highlight-bg) 42%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18), 0 6px 16px var(--shadow-color);
    transform: translateY(-1px) scale(1.02);
}

.page-floating-action-icon {
    width: auto;
    height: auto;
    min-width: auto;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.page-floating-action-icon .component-bi-icon {
    font-size: 1.08rem;
    color: inherit;
}

.page-share-panel {
    position: fixed;
    top: 62px;
    right: 14px;
    min-width: 112px;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 66%, white 34%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--container-bg) 94%, white 6%);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16), 0 6px 14px var(--shadow-color);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.22s ease;
    z-index: 1401;
}

.page-share-panel.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.page-share-action {
    width: 100%;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-share-action:hover {
    background: color-mix(in srgb, var(--highlight-bg) 78%, white 22%);
    color: var(--dark-green);
}

nav:not(.page-floating-nav) {
background: linear-gradient(90deg, var(--primary-green), var(--dark-green));
box-shadow: 0 2px 5px var(--shadow-color);
border-radius: 12px 12px 0 0;
margin: -2.5rem -2.5rem 2.5rem -2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 2.5rem;
}

nav:not(.page-floating-nav) ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

nav:not(.page-floating-nav) ul li {
display: inline;
margin: 0 1rem;
}

nav:not(.page-floating-nav) ul li a {
color: var(--button-text-color);
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 99px;
transition: background-color 0.2s ease, transform 0.2s ease;
}

nav:not(.page-floating-nav) ul li a:hover,
nav:not(.page-floating-nav) ul li a.is-active {
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}

h1,
h2,
h3,
h4,
h5,
h6,
h7,
.heading-level-7,
[data-heading-level="7"] {
color: var(--heading-color);
font-family: var(--font-heading);
letter-spacing: 0;
text-wrap: balance;
}

h1 {
font-size: var(--font-size-h1);
font-family: var(--font-fz-cu-heisong);
font-weight: 700;
line-height: 1.2;
margin: 0.35rem auto 1.9rem;
padding: 0 0 0.62rem;
text-align: center;
}


h2 {
font-size: var(--font-size-h2);
font-family: var(--font-fz-cu-song);
font-weight: 700;
line-height: 1.28;
margin: var(--space-section) 0 1rem;
padding: 0.18rem 0 0.18rem 0.78rem;
border-left: 4px solid var(--theme-title-accent);
}

h3 {
font-size: var(--font-size-h3);
font-family: var(--font-fz-cu-yuan);
font-weight: 700;
line-height: 1.34;
margin: 2rem 0 0.85rem;
padding-bottom: 0.38rem;
border-bottom: 1px solid var(--border-color);
}

h4 {
font-size: var(--font-size-h4);
font-family: var(--font-fz-cu-song);
font-weight: 700;
line-height: 1.42;
margin: 1.55rem 0 0.62rem;
padding: 0.48rem 0.72rem;
border-left: 3px solid var(--theme-title-accent);
border-radius: 4px;
background: color-mix(in srgb, var(--highlight-bg) 82%, var(--container-bg) 18%);
}

h5 {
font-size: var(--font-size-h5);
font-family: var(--font-fz-da-hei);
font-weight: 700;
line-height: 1.45;
margin: 1.25rem 0 0.48rem;
padding: 0;
text-transform: none;
}

h6 {
font-size: var(--font-size-h6);
font-family: var(--font-fz-kai);
font-weight: 500;
line-height: 1.5;
margin: 1rem 0 0.38rem;
text-transform: none;
}

/* 网页原生仅有 h1-h6；第七级供渲染器或人工内容以类名/属性接入。 */
h7,
.heading-level-7,
[data-heading-level="7"] {
display: block;
font-size: var(--font-size-h7);
font-family: var(--font-fz-hei);
font-weight: 700;
line-height: 1.55;
margin: 0.9rem 0 0.32rem;
text-transform: none;
}

.button {
background-color: var(--primary-green);
color: var(--button-text-color);
padding: 0.6rem 1.2rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
user-select: none;
font-family: var(--font-ui);
}

.button:hover:not(:disabled) {
background-color: var(--dark-green);
transform: translateY(-2px);
box-shadow: 0 4px 10px var(--shadow-color);
}

.button:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px var(--shadow-color);
}

.layout-container {
padding: 1rem;
border: none;
border-radius: 8px;
margin-bottom: 1rem;
}

.layout-container-wrapper {
}

.layout-container,
.page-control-pane,
.table-cell-container,
.matrix-cell-clickable,
[data-component-path],
[data-layout-path] {
    transition: background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

[data-component-path]:focus,
[data-layout-path]:focus,
.is-dom-hover-trail,
.is-dom-hover-trail:focus,
.is-dom-hover-trail *:focus {
    outline: none !important;
}

.component-wrapper.is-dom-hover-trail,
.layout-container-wrapper.is-dom-hover-trail,
.layout-container.is-dom-hover-trail,
.interactive-container.is-dom-hover-trail {
    border-radius: 16px;
}

.is-dom-hover-target {
    background-color: var(--editor-hover-current-bg);
    box-shadow: var(--editor-hover-current-shadow);
    filter: saturate(1.03);
}

.is-dom-hover-ancestor[data-hover-depth="1"] {
    background-color: var(--editor-hover-parent-bg);
    box-shadow: var(--editor-hover-parent-shadow);
}

.is-dom-hover-ancestor[data-hover-depth="2"] {
    background-color: var(--editor-hover-grandparent-bg);
    box-shadow: var(--editor-hover-grandparent-shadow);
}

.is-dom-hover-ancestor[data-hover-depth="3"],
.is-dom-hover-ancestor[data-hover-depth="4"] {
    background-color: var(--editor-hover-outer-bg);
    box-shadow: var(--editor-hover-outer-shadow);
}

.component-wrapper,
.layout-container-wrapper {
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.component-wrapper:hover,
.layout-container-wrapper:hover {
    transform: var(--editor-passive-hover-lift);
}

/* 统一的外层组件悬浮效果 */
.component-wrapper:hover > .interactive-container,
.component-wrapper:hover > .page-control-container,
.component-wrapper:hover > .timeline-container,
.component-wrapper:hover > .interactive-matrix-container,
.component-wrapper:hover > .guided-tour-container,
.component-wrapper:hover > .question-container,
.component-wrapper:hover > .chart-container,
.component-wrapper:hover > .media-container,
.layout-container-wrapper:hover > .layout-container {
    background-color: var(--editor-passive-hover-bg);
    box-shadow: var(--editor-passive-hover-shadow);
}

/* 统一的组件内部元素 hover 效果：逻辑上每个独立的HTML对象都会有轻微的背景和边缘反馈 */
/* 核心：只让最深层被hover的目标响应，避免父级和子级同时高亮造成颜色堆叠 */
:is(.component-wrapper, .layout-container-wrapper) :is(h1, h2, h3, h4, h5, h6, p, blockquote, pre, caption, ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, th, td, form, label, legend, fieldset, .quiz-question, .quiz-option, .poll-question, .poll-option, .form-quiz-option, .timeline-item, .timeline-time, .timeline-title, .timeline-content, .callout-title, .callout-content, .concept-item, .matrix-cell, .draggable, .drop-target, .sortable-item, .click-connect-item, .tab-button, .accordion-header, .accordion-content, .chart-container, .media-container, .image-container, .video-container, .audio-container):hover:not(:has(:is(h1, h2, h3, h4, h5, h6, p, blockquote, pre, caption, ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, th, td, form, label, legend, fieldset, .quiz-question, .quiz-option, .poll-question, .poll-option, .form-quiz-option, .timeline-item, .timeline-time, .timeline-title, .timeline-content, .callout-title, .callout-content, .concept-item, .matrix-cell, .draggable, .drop-target, .sortable-item, .click-connect-item, .tab-button, .accordion-header, .accordion-content, .chart-container, .media-container, .image-container, .video-container, .audio-container):hover)) {
    background-color: var(--editor-element-hover-bg);
    border-radius: 4px;
    box-shadow: 0 0 0 3px var(--editor-element-hover-bg);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}


.component-wrapper:hover > .interactive-container[data-component-type="pageControl"],
.component-wrapper:hover > .interactive-container[data-component-type="collapsible"],
.component-wrapper:hover > .interactive-container[data-component-type="guidedTour"],
.component-wrapper:hover > .interactive-container[data-component-type="timeline"],
.component-wrapper:hover > .interactive-container[data-component-type="quiz"],
.component-wrapper:hover > .interactive-container[data-component-type="flipCard"],
.component-wrapper:hover > .interactive-container[data-component-type="poll"],
.component-wrapper:hover > .interactive-container[data-component-type="deepQuestion"],
.component-wrapper:hover > .interactive-container[data-component-type="form"],
.component-wrapper:hover > .interactive-container[data-component-type="fileUpload"],
.component-wrapper:hover > .interactive-container.callout-info,
.component-wrapper:hover > .interactive-container.callout-tip,
.component-wrapper:hover > .interactive-container.callout-warning,
.component-wrapper:hover > .interactive-container.callout-danger,
.component-wrapper:hover > .interactive-container.callout-key-concept,
.component-wrapper:hover > .interactive-container.callout-quote,
.component-wrapper:hover > .interactive-container.callout-strategy,
.component-wrapper:hover > .interactive-container.callout-reflection {
    background-color: var(--editor-passive-hover-bg);
    box-shadow: var(--editor-passive-hover-shadow);
    border-left-color: transparent;
    transform: none;
}

.layout-container.template-vertical-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}

.layout-container.template-horizontal-flow {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
}

.layout-container.template-two-column-50-50 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}

.layout-container.template-three-column-33 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}

.layout-container.template-four-column-25 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}

@media (max-width: 768px) {
.layout-container.template-two-column-50-50,
.layout-container.template-three-column-33,
.layout-container.template-four-column-25 {
grid-template-columns: 1fr;
}
}

.layout-container .component-wrapper {
margin: 0;
}

.layout-container .interactive-container {
margin: 0;
}

.interactive-container {
    margin: 2rem 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.interactive-container[data-component-type="image"],
.image-container {
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 1.2rem;
}

.interactive-container[data-component-type="svg"],
.svg-container {
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 1.2rem;
}

.svg-container .svg-figure {
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

.svg-container.has-explicit-svg-size .svg-figure {
    width: 100%;
    height: 100%;
}

.svg-inline-wrapper {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    line-height: 0;
}

.svg-inline-wrapper.has-explicit-svg-size {
    width: 100%;
    height: 100%;
}

.svg-inline-wrapper svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.svg-inline-wrapper .inline-svg-root {
    overflow: visible;
}

.svg-container.zoomable .svg-inline-wrapper {
    cursor: zoom-in;
}

.svg-loading-state,
.svg-error-state {
    min-width: 220px;
    min-height: 120px;
    padding: 1rem 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--border-color) 72%, white 28%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.6;
    box-sizing: border-box;
}

.svg-loading-state {
    background: color-mix(in srgb, var(--highlight-bg) 78%, var(--container-bg) 22%);
    color: color-mix(in srgb, var(--text-color) 80%, var(--container-bg) 20%);
}

.svg-error-state {
    border-color: color-mix(in srgb, var(--callout-danger-color) 28%, var(--container-bg) 72%);
    background: color-mix(in srgb, var(--callout-danger-color) 8%, var(--container-bg) 92%);
    color: color-mix(in srgb, var(--callout-danger-color) 82%, var(--feedback-incorrect-text) 18%);
}

.interactive-container[data-component-type="list"] {
    margin: 1rem 0;
    padding-left: 0;
}

/* 本课程的无序列表已在正文中保留原编号，不再显示浏览器默认圆点。 */
ul[data-component-type="list"],
ul[data-component-type="list"] ul {
    list-style: none;
}

.interactive-container[data-component-type="pageControl"],
.interactive-container[data-component-type="collapsible"],
.interactive-container[data-component-type="guidedTour"],
.interactive-container[data-component-type="timeline"] 
{
    padding-left: 1.5rem;
    border-left: 2px solid rgba(0, 0, 0, 0.06);
}

.interactive-container[data-component-type="quiz"],
.interactive-container[data-component-type="flipCard"],
.interactive-container[data-component-type="poll"],
.interactive-container[data-component-type="deepQuestion"],
.interactive-container[data-component-type="form"],
.interactive-container[data-component-type="fileUpload"],
.interactive-container[data-component-type="slider"],
.interactive-container[data-component-type="argumentMapper"],
.interactive-container[data-component-type="conceptConnector"],
.interactive-container[data-component-type="kwhl"]
{
    padding: 2rem;
    background-color: var(--container-bg);
    border-radius: 8px; 
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.interactive-container[data-component-type="table"],
.interactive-container[data-component-type="interactiveMatrix"],
.interactive-container[data-component-type="echarts"],
.interactive-container[data-component-type="codeBlock"],
.interactive-container[data-component-type="video"],
.interactive-container[data-component-type="audio"],
.interactive-container[data-component-type="iframe"],
.interactive-container[data-component-type="fileDownload"] {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.interactive-container[data-component-type="video"] {
    width: fit-content;
    max-width: 100%;
    margin: 0.55rem auto 0.8rem;
}

.interactive-container.callout-info,
.interactive-container.callout-tip,
.interactive-container.callout-warning,
.interactive-container.callout-danger,
.interactive-container.callout-key-concept,
.interactive-container.callout-quote,
.interactive-container.callout-strategy,
.interactive-container.callout-reflection {
    display: block;
    padding: 1.05rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 14px;
}

.interactive-container.callout-info {
    background: color-mix(in srgb, var(--highlight-bg) 44%, var(--container-bg) 56%);
    border-color: color-mix(in srgb, var(--callout-info-color) 18%, var(--container-bg) 82%);
}

.interactive-container.callout-tip {
    background: color-mix(in srgb, var(--light-green) 32%, var(--container-bg) 68%);
    border-color: color-mix(in srgb, var(--callout-tip-color) 16%, var(--container-bg) 84%);
}

.interactive-container.callout-warning {
    background: color-mix(in srgb, var(--feedback-partial-bg) 38%, var(--container-bg) 62%);
    border-color: color-mix(in srgb, var(--feedback-partial-border) 22%, var(--container-bg) 78%);
}

.interactive-container.callout-danger {
    background: color-mix(in srgb, var(--feedback-incorrect-bg) 32%, var(--container-bg) 68%);
    border-color: color-mix(in srgb, var(--feedback-incorrect-border) 20%, var(--container-bg) 80%);
}

.interactive-container.callout-key-concept {
    background: color-mix(in srgb, var(--highlight-bg) 40%, var(--container-bg) 60%);
    border-color: color-mix(in srgb, var(--callout-concept-color) 16%, var(--container-bg) 84%);
}

.interactive-container.callout-quote {
    background: color-mix(in srgb, var(--highlight-bg) 34%, var(--container-bg) 66%);
    border-color: color-mix(in srgb, var(--callout-quote-color) 16%, var(--container-bg) 84%);
}

.interactive-container.callout-strategy {
    background: color-mix(in srgb, var(--light-green) 26%, var(--container-bg) 74%);
    border-color: color-mix(in srgb, var(--callout-strategy-color) 18%, var(--container-bg) 82%);
}

.interactive-container.callout-reflection {
    background: color-mix(in srgb, var(--highlight-bg) 36%, var(--container-bg) 64%);
    border-color: color-mix(in srgb, var(--callout-reflection-color) 18%, var(--container-bg) 82%);
}

.interactive-container .callout-container,
.interactive-container .callout {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    border: none;
    border-left: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.interactive-container .callout-info,
.interactive-container .callout-tip,
.interactive-container .callout-warning,
.interactive-container .callout-danger,
.interactive-container .callout-key-concept,
.interactive-container .callout-quote,
.interactive-container .callout-strategy,
.interactive-container .callout-reflection {
    background: transparent;
    border: none;
    border-left: 0;
    box-shadow: none;
}

/* 窗口型容器中的内容区不再二次收窄，嵌套组件直接占满可用宽度。 */
.interactive-container .callout-text-wrapper,
.interactive-container .callout-content,
.interactive-container[data-component-type="deepQuestion"] > .deep-question,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.interactive-container.callout-info .callout-content > .component-wrapper,
.interactive-container.callout-tip .callout-content > .component-wrapper,
.interactive-container.callout-warning .callout-content > .component-wrapper,
.interactive-container.callout-danger .callout-content > .component-wrapper,
.interactive-container.callout-key-concept .callout-content > .component-wrapper,
.interactive-container.callout-quote .callout-content > .component-wrapper,
.interactive-container.callout-strategy .callout-content > .component-wrapper,
.interactive-container.callout-reflection .callout-content > .component-wrapper,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content > .component-wrapper,
.interactive-container.callout-info .callout-content > .interactive-container,
.interactive-container.callout-tip .callout-content > .interactive-container,
.interactive-container.callout-warning .callout-content > .interactive-container,
.interactive-container.callout-danger .callout-content > .interactive-container,
.interactive-container.callout-key-concept .callout-content > .interactive-container,
.interactive-container.callout-quote .callout-content > .interactive-container,
.interactive-container.callout-strategy .callout-content > .interactive-container,
.interactive-container.callout-reflection .callout-content > .interactive-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content > .interactive-container,
.interactive-container.callout-info .callout-content .form-wrapper,
.interactive-container.callout-tip .callout-content .form-wrapper,
.interactive-container.callout-warning .callout-content .form-wrapper,
.interactive-container.callout-danger .callout-content .form-wrapper,
.interactive-container.callout-key-concept .callout-content .form-wrapper,
.interactive-container.callout-quote .callout-content .form-wrapper,
.interactive-container.callout-strategy .callout-content .form-wrapper,
.interactive-container.callout-reflection .callout-content .form-wrapper,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .form-wrapper,
.interactive-container.callout-info .callout-content .question-container,
.interactive-container.callout-tip .callout-content .question-container,
.interactive-container.callout-warning .callout-content .question-container,
.interactive-container.callout-danger .callout-content .question-container,
.interactive-container.callout-key-concept .callout-content .question-container,
.interactive-container.callout-quote .callout-content .question-container,
.interactive-container.callout-strategy .callout-content .question-container,
.interactive-container.callout-reflection .callout-content .question-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .question-container,
.interactive-container.callout-info .callout-content .custom-form,
.interactive-container.callout-tip .callout-content .custom-form,
.interactive-container.callout-warning .callout-content .custom-form,
.interactive-container.callout-danger .callout-content .custom-form,
.interactive-container.callout-key-concept .callout-content .custom-form,
.interactive-container.callout-quote .callout-content .custom-form,
.interactive-container.callout-strategy .callout-content .custom-form,
.interactive-container.callout-reflection .callout-content .custom-form,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .custom-form,
.interactive-container.callout-info .callout-content .form-container,
.interactive-container.callout-tip .callout-content .form-container,
.interactive-container.callout-warning .callout-content .form-container,
.interactive-container.callout-danger .callout-content .form-container,
.interactive-container.callout-key-concept .callout-content .form-container,
.interactive-container.callout-quote .callout-content .form-container,
.interactive-container.callout-strategy .callout-content .form-container,
.interactive-container.callout-reflection .callout-content .form-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .form-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.interactive-container.callout-info .callout-content .image-container,
.interactive-container.callout-tip .callout-content .image-container,
.interactive-container.callout-warning .callout-content .image-container,
.interactive-container.callout-danger .callout-content .image-container,
.interactive-container.callout-key-concept .callout-content .image-container,
.interactive-container.callout-quote .callout-content .image-container,
.interactive-container.callout-strategy .callout-content .image-container,
.interactive-container.callout-reflection .callout-content .image-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .image-container,
.interactive-container.callout-info .callout-content .svg-container,
.interactive-container.callout-tip .callout-content .svg-container,
.interactive-container.callout-warning .callout-content .svg-container,
.interactive-container.callout-danger .callout-content .svg-container,
.interactive-container.callout-key-concept .callout-content .svg-container,
.interactive-container.callout-quote .callout-content .svg-container,
.interactive-container.callout-strategy .callout-content .svg-container,
.interactive-container.callout-reflection .callout-content .svg-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .svg-container,
.interactive-container.callout-info .callout-content .media-container,
.interactive-container.callout-tip .callout-content .media-container,
.interactive-container.callout-warning .callout-content .media-container,
.interactive-container.callout-danger .callout-content .media-container,
.interactive-container.callout-key-concept .callout-content .media-container,
.interactive-container.callout-quote .callout-content .media-container,
.interactive-container.callout-strategy .callout-content .media-container,
.interactive-container.callout-reflection .callout-content .media-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .media-container,
.interactive-container.callout-info .callout-content .iframe-container,
.interactive-container.callout-tip .callout-content .iframe-container,
.interactive-container.callout-warning .callout-content .iframe-container,
.interactive-container.callout-danger .callout-content .iframe-container,
.interactive-container.callout-key-concept .callout-content .iframe-container,
.interactive-container.callout-quote .callout-content .iframe-container,
.interactive-container.callout-strategy .callout-content .iframe-container,
.interactive-container.callout-reflection .callout-content .iframe-container,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .iframe-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.interactive-container.callout-info .callout-content .image-container figure,
.interactive-container.callout-tip .callout-content .image-container figure,
.interactive-container.callout-warning .callout-content .image-container figure,
.interactive-container.callout-danger .callout-content .image-container figure,
.interactive-container.callout-key-concept .callout-content .image-container figure,
.interactive-container.callout-quote .callout-content .image-container figure,
.interactive-container.callout-strategy .callout-content .image-container figure,
.interactive-container.callout-reflection .callout-content .image-container figure,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .image-container figure,
.interactive-container.callout-info .callout-content .svg-container .svg-figure,
.interactive-container.callout-tip .callout-content .svg-container .svg-figure,
.interactive-container.callout-warning .callout-content .svg-container .svg-figure,
.interactive-container.callout-danger .callout-content .svg-container .svg-figure,
.interactive-container.callout-key-concept .callout-content .svg-container .svg-figure,
.interactive-container.callout-quote .callout-content .svg-container .svg-figure,
.interactive-container.callout-strategy .callout-content .svg-container .svg-figure,
.interactive-container.callout-reflection .callout-content .svg-container .svg-figure,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .svg-container .svg-figure,
.interactive-container.callout-info .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-tip .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-warning .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-danger .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-key-concept .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-quote .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-strategy .callout-content .image-container .image-with-hotspots,
.interactive-container.callout-reflection .callout-content .image-container .image-with-hotspots,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .image-container .image-with-hotspots,
.interactive-container.callout-info .callout-content .media-container .video-player-shell,
.interactive-container.callout-tip .callout-content .media-container .video-player-shell,
.interactive-container.callout-warning .callout-content .media-container .video-player-shell,
.interactive-container.callout-danger .callout-content .media-container .video-player-shell,
.interactive-container.callout-key-concept .callout-content .media-container .video-player-shell,
.interactive-container.callout-quote .callout-content .media-container .video-player-shell,
.interactive-container.callout-strategy .callout-content .media-container .video-player-shell,
.interactive-container.callout-reflection .callout-content .media-container .video-player-shell,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .media-container .video-player-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.interactive-container.callout-info .callout-content .media-container .video-player-shell,
.interactive-container.callout-tip .callout-content .media-container .video-player-shell,
.interactive-container.callout-warning .callout-content .media-container .video-player-shell,
.interactive-container.callout-danger .callout-content .media-container .video-player-shell,
.interactive-container.callout-key-concept .callout-content .media-container .video-player-shell,
.interactive-container.callout-quote .callout-content .media-container .video-player-shell,
.interactive-container.callout-strategy .callout-content .media-container .video-player-shell,
.interactive-container.callout-reflection .callout-content .media-container .video-player-shell,
.interactive-container[data-component-type="deepQuestion"] .deep-question-content .media-container .video-player-shell {
    height: auto;
    min-height: 240px;
    margin-left: 0;
    margin-right: 0;
}

figure {
margin: 1.4rem 0 1.6rem;
position: relative;
overflow: hidden;
line-height: 0;
text-align: center;
}

.image-container figure {
width: fit-content;
max-width: 100%;
margin: 0;
}

figcaption {
font-family: var(--font-ui);
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
letter-spacing: 0;
color: var(--muted-text-color);
max-width: var(--prose-caption-width);
margin: 0.62rem auto 0;
text-align: center;
}

.image-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
margin: 0 auto;
}

.image-container .image-with-hotspots {
display: inline-block;
max-width: 100%;
}

.image-container.zoomable img {
cursor: zoom-in;
}

.question-text,
.quiz-question,
.poll-question {
font-weight: 650;
color: var(--theme-title-color);
margin: 0 0 1.2rem 0;
font-size: var(--font-size-question);
line-height: var(--line-height-compact);
}

.quiz-controls {
margin-top: 1.5rem;
display: flex;
justify-content: center;
gap: 0.5rem;
}

.kwhl-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.kwhl-column {
flex: 1;
min-width: 200px;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--highlight-bg);
}

.kwhl-header {
font-weight: 700;
color: var(--theme-title-color);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 2px solid var(--theme-primary-soft);
}

.kwhl-list {
list-style-position: inside;
padding-left: 0.5rem;
margin: 0;
font-size: 0.95rem;
}

.kwhl-list li {
margin-bottom: 0.5rem;
}

[data-component-type="collapsible"] .collapsible {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    text-align: left;
    background-color: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 1.1em;
    transform: none !important;
}

[data-component-type="collapsible"] .collapsible:hover {
    color: var(--theme-title-accent) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-component-type="collapsible"] .collapsible:before {
    content: '+';
    font-size: 1.2rem;
    font-weight: 400;
    margin-right: 0.8rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--theme-title-accent);
    background-color: transparent;
    flex-shrink: 0;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 2px;
}

[data-component-type="collapsible"] .collapsible:hover:before {
    border-color: var(--theme-title-accent);
    background-color: var(--highlight-bg);
}

[data-component-type="collapsible"] .collapsible.is-active:before {
    content: '-';
    transform: none;
    padding-bottom: 4px;
}

[data-component-type="collapsible"] .content-wrapper {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}

[data-component-type="collapsible"] .content {
padding: 1.5rem;
margin-top: 0;
}

.glossary-term {
    color: var(--theme-title-color);
    border-bottom: 2px dotted var(--theme-title-accent);
    cursor: help;
    position: relative;
    font-weight: 600;
}

.glossary-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background-color: var(--container-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    z-index: 1010;
    width: 300px;
    max-width: 90vw;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.glossary-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
}

.deep-question {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--primary-green) 22%, white 78%);
    border-left: none;
    border-radius: 14px;
    background: color-mix(in srgb, var(--highlight-bg) 74%, white 26%);
    max-width: none;
}

.deep-question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-top: 0.08rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-green) 22%, white 78%);
    background: color-mix(in srgb, var(--highlight-bg) 64%, white 36%);
    box-shadow: 0 1px 3px rgba(56, 142, 60, 0.08);
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: none !important;
}

.deep-question-content {
    flex: 1;
    min-width: 0;
}

.deep-question-text {
    margin: 0;
    font-family: var(--font-note);
    font-size: var(--font-size-body);
    line-height: 1.84;
    letter-spacing: 0;
    text-wrap: pretty;
    max-width: none;
}

[data-component-type="flipCard"] {
text-align: center;
}

.flip-card {
display: block;
width: 100%;
height: 180px;
perspective: 1000px;
cursor: pointer;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
border-radius: 12px;
box-shadow: 0 6px 20px var(--shadow-color);
}

.flip-card-front {
background-image: linear-gradient(45deg, var(--light-green), var(--primary-green));
color: var(--color-on-accent);
font-size: 1.5rem;
font-weight: bold;
}

.flip-card-back {
background-image: linear-gradient(225deg, var(--highlight-bg), var(--light-green));
color: var(--text-color);
transform: rotateY(180deg);
}

.feedback-area.is-partial {
    background-color: var(--feedback-partial-bg);
    color: var(--feedback-partial-text);
    border-left: 5px solid var(--feedback-partial-border);
}

.quiz-option.is-correct {
    background-color: var(--feedback-correct-bg);
    border-color: var(--feedback-correct-border);
}

.quiz-option.is-incorrect {
    background-color: var(--feedback-incorrect-bg);
    border-color: var(--feedback-incorrect-border);
}

.is-answered .quiz-option.is-correct-answer {
    background-color: var(--light-green);
    border: 2px solid var(--primary-green);
}

.is-answered .quiz-option input {
    pointer-events: none;
}

.page-control-container {
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-control-tabs {
display: flex;
padding: 0.5rem 0.5rem 0 0.5rem;
border-bottom: 1px solid var(--border-color);
border-radius: 8px 8px 0 0;
}

.page-control-tab {
padding: 0.7rem 1.2rem;
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: 6px 6px 0 0;
cursor: pointer;
margin-right: 0.25rem;
margin-bottom: -1px;
background-color: transparent;
font-family: var(--font-ui);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-control-tab:hover {
background-color: var(--highlight-bg);
}

.page-control-tab.is-current {
background-color: var(--container-bg);
border-color: var(--border-color);
border-bottom: 1px solid var(--container-bg);
font-weight: 600;
color: var(--theme-title-color);
}

.page-control-content-panes {
padding: 1.5rem;
}

.page-control-pane {
display: none;
animation: fadeIn 0.4s;
}

.page-control-pane.is-current {
display: block;
}

.table-container {
    overflow-x: auto;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.table-layout-fixed-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    line-height: 1.62;
    border-top: 2px solid var(--primary-green);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

table.table-layout-auto {
    table-layout: auto;
}

table.table-layout-fixed {
    table-layout: fixed;
}

caption {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--font-size-caption);
    color: var(--theme-title-color);
    text-align: center;
    padding: 0.4rem 0 0.9rem;
}

th,
td {
    padding: 0.8rem 1rem;
    vertical-align: top;
}

td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

th {
    background-color: color-mix(in srgb, var(--highlight-bg) 32%, var(--container-bg) 68%);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    color: var(--text-color);
    border-bottom: 2px solid color-mix(in srgb, var(--primary-green) 36%, var(--border-color) 64%);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

.table-cell-text,
.table-cell-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-cell-has-media {
    vertical-align: top;
}

.table-cell-has-media .table-cell-content,
.table-cell-has-media .image-container,
.table-cell-has-media .image-with-hotspots {
    width: 100%;
    max-width: 100%;
}

.table-cell-has-media figure {
    margin: 0;
}

.table-cell-has-media img,
.table-cell-has-media video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.chart-container {
    background-color: var(--color-panel-muted);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-container .echarts-instance {
    min-height: 400px;
    width: 100%;
}

.echarts-fullscreen-trigger {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 6;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, white 12%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--dark-green);
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.echarts-fullscreen-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.echarts-fullscreen-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3000;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
}

.echarts-fullscreen-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg-color) 94%, white 6%);
}

.echarts-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.echarts-fullscreen-title {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echarts-fullscreen-close {
    border: none;
    border-radius: 999px;
    background: var(--dark-green);
    color: var(--color-on-accent);
    padding: 0.48rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.echarts-fullscreen-body {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    display: flex;
}

.echarts-fullscreen-body > .chart-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.chart-container.is-echarts-fullscreen-active {
    cursor: zoom-out;
}

.chart-container.is-echarts-fullscreen-active .echarts-instance {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.echarts-fullscreen-body > .chart-container .echarts-instance {
    min-height: 100%;
}

.echarts-debug-panel {
    margin-top: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--callout-warning-color) 30%, var(--container-bg) 70%);
    background: color-mix(in srgb, var(--highlight-bg) 84%, var(--container-bg) 16%);
    color: var(--text-color);
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: normal;
}

.echarts-debug-panel[data-level="error"] {
    border-color: color-mix(in srgb, var(--callout-danger-color) 42%, var(--container-bg) 58%);
    background: color-mix(in srgb, var(--callout-danger-color) 8%, var(--container-bg) 92%);
}

.echarts-debug-title {
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--theme-title-color);
}

.echarts-debug-panel[data-level="error"] .echarts-debug-title {
    color: var(--callout-danger-color);
}

.echarts-debug-detail {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    line-height: 1.55;
}

.chart-title {
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

#tree-water-concepts.chart-container {
    min-height: 500px;
    padding: 10px;
    background-color: var(--container-bg);
}

#tree-water-concepts .echarts-instance {
    min-height: 480px;
}

.quiz-option {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0.6rem 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.quiz-option input {
margin-right: 0.8rem;
flex-shrink: 0;
}

.question-container.is-answered .quiz-option {
cursor: not-allowed;
pointer-events: none;
opacity: 0.7;
}

.question-container.is-answered.is-correct .quiz-option input[data-correct="true"]:checked {
accent-color: var(--primary-green);
}

.question-container.is-answered:not(.is-correct) .quiz-option input:checked {
accent-color: var(--callout-danger-color);
}

.question-container .check-answer-btn {
display: inline-block;
}

.question-container .reset-btn {
display: none;
}

.question-container.is-answered .check-answer-btn {
display: none;
}

.question-container.is-answered .reset-btn {
display: inline-block;
}

.question-container.is-answered.is-correct .reset-btn {
display: none;
}

.feedback-area {
margin-top: 1rem;
padding: 1rem;
border-radius: 6px;
border-width: 1px;
border-style: solid;
display: none;
white-space: normal; 
line-height: 1.6;
}

.file-download-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.file-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon svg {
    width: 100%;
    height: 100%;
}

.file-details {
    flex-grow: 1;
    min-width: 0;
}

.file-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--heading-color);
    margin: 0;
}

.file-description {
    font-size: 0.9rem;
    color: var(--muted-text-color);
    margin: 0.25rem 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--muted-text-color);
    margin-top: 0.5rem;
}

.file-download-list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.file-download-list-item:last-child {
    border-bottom: none;
}

.file-download-list-item .file-icon {
    width: 32px;
    height: 32px;
    margin-right: 0.75rem;
}

.file-download-list-item .file-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

.file-download-list-item .file-name {
    font-size: 1rem;
    flex-grow: 1;
}

.file-download-list-item .file-meta {
    margin-top: 0;
    flex-shrink: 0;
    width: 180px;
    justify-content: space-between;
}

.file-download-compact {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    background-color: var(--highlight-bg);
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.file-download-compact .file-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.file-download-compact .file-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.file-download-compact .file-details,
.file-download-compact .file-meta {
    display: none;
}

.feedback-area.is-visible {
display: block;
animation: fadeIn 0.3s;
}

.feedback-area.is-correct {
background-color: var(--feedback-correct-bg);
color: var(--feedback-correct-text);
border-color: var(--feedback-correct-border);
}

.feedback-area.is-incorrect {
background-color: var(--feedback-incorrect-bg);
color: var(--feedback-incorrect-text);
border-color: var(--feedback-incorrect-border);
}

.drag-drop-container {
display: flex;
gap: 1rem;
}

.draggable-items,
.drop-targets {
flex: 1;
padding: 1rem;
border: 1px dashed var(--border-color);
border-radius: 8px;
min-height: 100px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drag-match-heading {
width: fit-content;
min-width: 6em;
margin: 0 auto 0.85rem;
padding-bottom: 0.35rem;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
text-align: center;
border-bottom: 2px solid transparent;
}

.draggable-items .drag-match-heading {
color: var(--color-warning-text);
border-bottom-color: color-mix(in srgb, var(--color-warning-border) 64%, transparent 36%);
}

.drop-targets .drag-match-heading {
color: var(--theme-title-accent);
border-bottom-color: color-mix(in srgb, var(--theme-title-accent) 28%, transparent 72%);
}

.draggable {
position: relative;
background-color: var(--container-bg);
padding: 0.8rem;
border: 1px solid var(--border-color);
border-radius: 6px;
cursor: grab;
text-align: center;
margin-bottom: 0.5rem;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.draggable:hover {
transform: scale(1.03);
box-shadow: 0 4px 8px var(--shadow-color);
}

.draggable.is-dragging {
opacity: 0.5;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transform: rotate(3deg) scale(1.05);
}

.drop-target-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}

.drop-target {
flex-grow: 1;
min-height: 48px;
background: var(--color-panel-muted);
border: 2px dashed var(--border-color);
border-radius: 6px;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}

.draggable.is-partially-used::after {
content: attr(data-usage);
position: absolute;
top: 0.3rem;
right: 0.45rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.35;
color: var(--theme-title-accent);
background: color-mix(in srgb, var(--theme-title-accent) 12%, white 88%);
}

.drop-target .draggable {
flex: 0 1 auto;
margin: 0;
padding: 0.55rem 0.7rem;
cursor: grab;
}

.drop-target {
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
gap: 0.45rem;
}

.drop-target:empty { justify-content: center; }
.drop-target.is-correct { border-color: var(--feedback-correct-border); background: var(--feedback-correct-bg); }
.drop-target.is-incorrect { border-color: var(--feedback-incorrect-border); background: var(--feedback-incorrect-bg); }

.drop-target.is-over {
background: var(--highlight-bg);
border-color: var(--primary-green);
border-style: solid;
transform: scale(1.02);
}

.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-item .drag-handle {
    margin-right: 10px;
    cursor: move;
    color: var(--muted-text-color);
}

.sortable-item.is-dragging {
    opacity: 0.5;
}

.placeholder-container {
    padding: 2rem;
    border: 2px dashed var(--border-color);
    background-color: var(--color-panel-muted);
    text-align: center;
    color: var(--muted-text-color);
    border-radius: 8px;
    margin: 3px 0;
}

.media-container video,
.media-container audio {
width: 100%;
border-radius: 6px;
}

.media-container.video-component,
.interactive-container[data-component-type="video"] {
    padding: 0;
}

.media-container .video-player-shell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 640px;
height: 480px;
max-width: 100%;
overflow: hidden;
margin: 0 auto;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
background: linear-gradient(180deg, color-mix(in srgb, var(--highlight-bg) 92%, white 8%), color-mix(in srgb, var(--container-bg) 96%, var(--highlight-bg) 4%));
}

.media-container video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: color-mix(in srgb, var(--container-bg) 88%, var(--highlight-bg) 12%);
}

.media-container .video-iframe-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 6px;
}

.media-container .video-iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.media-caption {
text-align: center;
font-style: italic;
color: color-mix(in srgb, var(--text-color) 66%, white 34%);
margin-top: 0.5rem;
font-size: 0.92rem;
line-height: 1.72;
letter-spacing: 0;
}

.interactive-container[data-component-type="video"] .media-caption {
margin-top: 0.28rem;
}

.media-title {
margin-bottom: 1rem;
}

.code-block-container {
position: relative;
display: flex;
flex-direction: column;
max-width: 100%;
}

.code-block-container .copy-code-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
background-color: var(--color-control-bg);
color: var(--text-color);
opacity: 0.7;
transition: opacity 0.2s;
z-index: 2;
}

.code-block-container:hover .copy-code-btn {
opacity: 1;
}

.code-block-content {
display: flex;
background-color: var(--color-code-bg);
border-radius: 6px;
margin-top: 1rem;
flex-grow: 1;
min-height: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: auto;
}

.line-numbers-column {
flex-shrink: 0;
padding: 1.5rem 1rem;
background-color: var(--color-code-gutter-bg);
text-align: right;
user-select: none;
color: var(--color-code-muted);
}

.line-numbers-column span {
display: block;
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 1.5;
}

.code-block-content pre {
flex-grow: 1;
margin: 0;
padding: 1.5rem;
background-color: transparent;
color: var(--color-code-text);
font-family: var(--font-mono);
font-size: 0.95rem;
line-height: 1.5;
white-space: pre;
overflow-x: auto;
}

.code-block-content code {
font-size: inherit;
line-height: inherit;
white-space: inherit;
}

.kwhl-outer-container .kwhl-title {
text-align: center;
}

.kwhl-container .add-kwhl-item-btn {
  display: none !important;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.poll-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background-color: transparent;
}

.poll-option input {
  margin-right: 1rem;
  flex-shrink: 0;
  accent-color: var(--primary-green);
  width: 1.1em;
  height: 1.1em;
}

.poll-option label {
  cursor: pointer;
  color: var(--text-color);
  font-size: 1rem;
}

.poll-controls {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.form-button-group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.poll-btn, .quiz-btn,
.check-answer-btn, .reset-btn,
.poll-submit-btn, .submit-poll-btn,
.custom-form .submit-btn, .custom-form .submit-button,
.custom-form .reset-btn, .custom-form .reset-button {
    background-color: transparent;
    border: 1px solid var(--action-color, var(--primary-green));
    color: var(--action-color, var(--primary-green));
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.poll-btn:hover, .quiz-btn:hover,
.check-answer-btn:hover, .reset-btn:hover,
.poll-submit-btn:hover, .submit-poll-btn:hover,
.custom-form .submit-btn:hover, .custom-form .submit-button:hover,
.custom-form .reset-btn:hover, .custom-form .reset-button:hover {
    background-color: var(--action-color, var(--primary-green));
    color: var(--button-text-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--action-color, var(--primary-green)) 20%, transparent);
}

.reset-btn,
.custom-form .reset-btn,
.custom-form .reset-button {
    --action-color: var(--muted-text-color);
}

.poll-results {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--primary-green);
}

.poll-results-title {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: var(--theme-title-color);
}

.poll-result-bar-wrapper {
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--bg-color);
    transition: background-color 0.3s ease;
}

.poll-result-bar-wrapper.is-selected {
    background-color: var(--highlight-bg);
    border: 1px solid var(--primary-green);
}

.poll-result-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.95em;
}

.poll-result-text {
    font-weight: bold;
    color: var(--text-color);
}

.poll-result-votes {
    font-size: 0.9em;
    color: var(--text-color);
}

.poll-result-bar-container {
    width: 100%;
    background-color: var(--border-color);
    border-radius: 5px;
    height: 28px;
    overflow: hidden;
}

.modal-content {
    display: flex;
    flex-direction: column;
}

.modal-btn {
    margin-top: 1rem;
}

.poll-result-bar {
    height: 100%;
    background-color: var(--primary-green);
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color-on-accent);
    font-weight: bold;
    font-size: 0.9em;
    padding-right: 8px;
    white-space: nowrap;
    transition: width 0.5s ease-in-out;
}

.poll-result-percentage {
    padding-left: 8px;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.timeline-container {
padding-left: 1.5rem;
position: relative;
}

.timeline-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: var(--primary-green);
border-radius: 2px;
}

.timeline-title {
margin-top: 0;
padding-left: 0;
}

.timeline-wrapper {
position: relative;
}

.timeline-event {
position: relative;
padding: 0.5rem 0 2rem 1.5rem;
}

.timeline-marker {
position: absolute;
top: 0.6rem;
left: -25px;
width: 14px;
height: 14px;
background-color: var(--container-bg);
border: 3px solid var(--primary-green);
border-radius: 50%;
z-index: 1;
}

.timeline-date {
font-weight: bold;
color: var(--theme-title-color);
margin-bottom: 0.25rem;
}

.timeline-content h5 {
margin: 0 0 0.5rem 0;
}

.timeline-content p {
margin: 0;
line-height: 1.6;
}

.image-zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 10000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.image-zoom-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
overflow: auto;
}

.image-zoom-wrapper img {
max-width: none;
transition: width 0.2s, height 0.2s;
}

.zoom-btn {
background: transparent;
border: 1px solid color-mix(in srgb, var(--color-on-accent) 70%, transparent 30%);
color: var(--color-on-accent);
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.2s, border-color 0.2s;
}

.zoom-btn:hover {
background-color: var(--primary-green);
border-color: var(--primary-green);
}

.zoom-btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}

.image-zoom-wrapper .hotspot-zoom-outline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.image-zoom-wrapper .hotspot-zoom-outline-path {
    fill: transparent;
    stroke: #ffd700;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.interactive-container.is-fullscreenable {
cursor: pointer;
}

.interactive-container.is-fullscreenable::after {
content: '双击全屏';
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 5;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--border-color);
padding: 0.2rem 0.6rem;
font-size: 0.8rem;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}

.interactive-container.is-fullscreenable:hover::after {
opacity: 1;
}

.interactive-container.is-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
z-index: 1000;
padding: 2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
cursor: zoom-out;
margin: 0 !important;
overflow: auto;
}

.interactive-container.is-fullscreen > * {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
flex-grow: 1;
min-height: 0;
}

.interactive-container.is-fullscreen::after {
content: '双击退出全屏';
background: var(--dark-green);
color: var(--color-on-accent);
opacity: 1;
}

.chart-container.is-echarts-fullscreen-active::after {
content: '双击退出全屏';
background: var(--dark-green);
color: var(--color-on-accent);
opacity: 1;
}

.image-with-hotspots {
position: relative;
display: inline-block;
line-height: 0;
}

.image-hotspot-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.hotspot-svg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.hotspot-svg-overlay a {
pointer-events: auto;
}

.hotspot-group {
pointer-events: auto;
cursor: pointer;
}

.hotspot-path,
.hotspot-path-outline {
fill: transparent;
vector-effect: non-scaling-stroke;
transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.hotspot-path-outline {
stroke: rgba(0, 0, 0, 0.4);
stroke-width: 1.5;
}

.hotspot-path {
stroke: rgba(255, 255, 255, 0.7);
stroke-width: 0.7;
}

.hotspot-group:hover .hotspot-path-outline {
stroke: rgba(0, 0, 0, 0.8);
stroke-width: 3;
}

.hotspot-group:hover .hotspot-path {
stroke: white;
stroke-width: 1.2;
fill: rgba(255, 255, 255, 0.25);
}

.hotspot-group.is-visited .hotspot-path-outline {
    stroke: rgba(75, 0, 130, 0.8);
}

.hotspot-group.is-visited .hotspot-path {
    stroke: #9370DB;
    fill: rgba(147, 112, 219, 0.2);
}

.hotspot-icon {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
    transform-origin: center center; 
}

.hotspot-group:hover .hotspot-icon {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(0,0,0,1));
}

.hotspot-group.is-visited .hotspot-icon {
    opacity: 1;
    filter: drop-shadow(0 0 2px #4B0082) sepia(1) saturate(5) hue-rotate(220deg) brightness(1.1);
}

.hotspot-group[data-action="link"] .hotspot-icon {
font-size: 4px;
}

.hotspot-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10010;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hotspot-popup-container {
    position: absolute; 
    overflow: hidden;
    min-height: 80px;
    min-width: 250px;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 95vw;
    max-height: 90vh;
}

.hotspot-popup-header {
    background-color: var(--dark-green);
    color: var(--color-on-accent);
    padding: 0 0 0 8px;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    height: 32px;
    flex-shrink: 0;
    border-bottom: none;
}

.hotspot-popup-header h4 {
    color: var(--color-on-accent);
    font-size: 0.9rem;
    font-weight: 600;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    margin: 0;
    min-width: 0;
}

.hotspot-popup-header .window-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.hotspot-popup-window-controls {
    display: flex;
    height: 100%;
}

.hotspot-popup-window-controls .window-control {
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--color-on-accent);
    font-size: 1.2rem;
    font-family: 'Segoe UI Symbol', sans-serif;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotspot-popup-window-controls .window-control:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hotspot-popup-window-controls .window-control.close-btn:hover {
    background-color: var(--callout-danger-color);
}

.hotspot-popup-container.is-maximized .window-control.maximize-btn {
    display: none;
}
.hotspot-popup-container:not(.is-maximized) .window-control.restore-btn {
    display: none;
}

.hotspot-popup-close-btn {
    display: none;
}

.hotspot-popup-content {
    padding: 1.5rem;
    overflow-y: auto;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
    flex-grow: 1;
    min-height: 0;
}

.hotspot-popup-content img,
.hotspot-popup-content video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.hotspot-popup-content audio {
    width: 100%;
}

.hotspot-popup-container .resizer {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 10;
}
.hotspot-popup-container .resizer.top-left { top: -5px; left: -5px; cursor: nwse-resize; }
.hotspot-popup-container .resizer.top-right { top: -5px; right: -5px; cursor: nesw-resize; }
.hotspot-popup-container .resizer.bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; }
.hotspot-popup-container .resizer.bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; }
.hotspot-popup-container .resizer.top { top: -5px; left: 5px; right: 5px; height: 10px; cursor: ns-resize; }
.hotspot-popup-container .resizer.bottom { bottom: -5px; left: 5px; right: 5px; height: 10px; cursor: ns-resize; }
.hotspot-popup-container .resizer.left { top: 5px; bottom: 5px; left: -5px; width: 10px; cursor: ew-resize; }
.hotspot-popup-container .resizer.right { top: 5px; bottom: 5px; right: -5px; width: 10px; cursor: ew-resize; }

html.hotspot-popup-active,
body.hotspot-popup-active {
    overflow: visible !important;
}

.hotspot-popup-overlay.is-window-maximized {
    padding: 0;
    background-color: transparent;
}

.hotspot-popup-container.is-maximized {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    box-shadow: none;
    border: none;
    transition: border-radius 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    max-width: none;
    max-height: none;
}

.hotspot-popup-container.is-maximized .hotspot-popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hotspot-popup-container.is-maximized .hotspot-popup-content img,
.hotspot-popup-container.is-maximized .hotspot-popup-content video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.interactive-matrix-container {
    margin: 2rem 0;
}

.interactive-matrix-container .matrix-title {
    text-align: center;
    margin: 0 0 1rem;
    padding: 0.4rem 0 0.8rem;
    font-family: var(--font-ui);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-weight: 600;
    color: var(--theme-title-color);
}

.interactive-matrix {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--primary-green);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-small);
}

.interactive-matrix th,
.interactive-matrix td {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.interactive-matrix thead th {
    background-color: transparent;
    color: var(--theme-title-color);
    font-weight: 700;
    font-size: 1em;
    border-bottom: 2px solid var(--theme-title-accent);
    vertical-align: bottom;
}

.interactive-matrix tbody th {
    background-color: transparent;
    font-weight: 600;
    text-align: center;
    padding-left: 0.5rem;
    color: var(--text-color);
    border-right: 1px solid rgba(0,0,0,0.05);
}

.interactive-matrix td {
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    position: relative;
}

.matrix-cell-clickable {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
}

.matrix-cell-placeholder {
    font-size: 1.4rem;
    color: var(--border-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.jc-statement .error-span {
    cursor: pointer;
    border-bottom: 2px dashed var(--primary-green);
}
.jc-statement .error-span.is-selected {
    background-color: var(--highlight-bg);
    border-bottom-color: var(--primary-green);
    font-weight: 600;
}

.matrix-cell-content-wrapper {
    padding: 0.5rem;
    text-align: left;
    font-size: 1.1em;
}

.interactive-matrix td.has-popup::after {
    content: '↗';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.8rem;
    opacity: 0.5;
    color: var(--primary-green);
}

.popup-icon {
    display: none;
}

.matrix-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10020;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.3s;
}

.matrix-popup-container {
    width: 60vw;
    max-width: 800px;
    max-height: 80vh;
    background-color: var(--container-bg);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.matrix-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--container-bg);
    color: var(--theme-title-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.matrix-popup-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.matrix-popup-close-btn {
    background: transparent;
    border: none;
    color: var(--muted-text-color);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.matrix-popup-close-btn:hover {
    color: var(--theme-title-color);
}

.matrix-popup-content {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex-grow: 1;
}

.guided-tour-container {
    position: relative;
    margin: 1.5rem 0;
}

.guided-tour-title {
    padding: 0.5rem 0;
    margin: 0 0 1rem 0;
    background-color: transparent;
    border-bottom: 2px solid var(--theme-title-accent);
    color: var(--theme-title-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.guided-tour-image-container {
    position: relative;
    padding: 1rem;
    background-color: var(--container-bg);
}

.guided-tour-wrapper {
    position: relative;
    line-height: 0;
    width: 100%;
    height: auto;
    display: inline-block;
}

.guided-tour-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.guided-tour-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.guided-tour-target-area {
    fill: rgba(0, 0, 0, 0);
    stroke: #FFC107;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.3s ease, fill 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.guided-tour-target-area:hover {
    stroke-width: 3;
    stroke: #FFA000;
}

.guided-tour-target-area.current-step {
    stroke: var(--primary-green);
    stroke-width: 4;
    stroke-dasharray: none;
    fill: rgba(76, 175, 80, 0.2);
    cursor: default;
}

.guided-tour-popup {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--shadow-color);
    z-index: 1001;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
}

.guided-tour-popup.is-dragging {
    user-select: none;
    box-shadow: 0 8px 25px var(--shadow-color);
}

.guided-tour-popup .popup-title {
    padding: 15px;
    background-color: var(--dark-green);
    color: var(--color-on-accent);
    cursor: move;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.guided-tour-popup .popup-content {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.guided-tour-popup .popup-content p {
    margin: 0;
    line-height: 1.6;
}

.guided-tour-tooltip {
    position: absolute;
    z-index: 1002;
    background-color: var(--container-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 18px var(--shadow-color);
    max-width: min(420px, 80%);
    max-height: 50vh;
    overflow: hidden;
    pointer-events: auto;
}

.guided-tour-tooltip .tooltip-content {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    overflow-y: auto;
    word-break: break-word;
    white-space: normal;
}

.guided-tour-tooltip .tooltip-content::-webkit-scrollbar { width: 8px; }
.guided-tour-tooltip .tooltip-content::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }
.guided-tour-tooltip .tooltip-content::-webkit-scrollbar-track { background-color: transparent; }

.guided-tour-tooltip .tooltip-content .interactive-container { margin: 8px 0; }
.guided-tour-tooltip .tooltip-content .interactive-container:last-child { margin-bottom: 0; }
.guided-tour-tooltip .tooltip-content * { pointer-events: auto; }

.guided-tour-popup .popup-content .interactive-container { margin: 12px 0; }
.guided-tour-popup .popup-content .interactive-container:last-child { margin-bottom: 0; }

.guided-tour-popup .popup-content img,
.guided-tour-tooltip .tooltip-content img { max-width: 100%; height: auto; display: block; }

.guided-tour-hover-tooltip {
    position: absolute;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-on-accent);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    pointer-events: none;
    z-index: 1002;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.guided-tour-hover-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.guided-tour-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--highlight-bg);
    flex-shrink: 0;
}

.guided-tour-nav .button {
    margin: 0 1rem;
}

.guided-tour-nav .step-counter {
    font-weight: 500;
    min-width: 50px;
    text-align: center;
}

.page-nav-trigger-zone {
    display: none;
    pointer-events: none;
}

nav.page-floating-nav {
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 1399;
    width: min(360px, calc(100vw - 10px));
    max-height: min(calc(100vh - 10px), 84vh);
    margin: 0;
    padding: 1rem 0.95rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    background: color-mix(in srgb, var(--container-bg) 96%, white 4%);
    background-attachment: scroll;
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, white 26%);
    border-radius: 22px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18), 0 10px 30px var(--shadow-color);
    backdrop-filter: none;
    isolation: isolate;
    transform: translate(calc(-100% - 28px), 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.24s ease, box-shadow 0.24s ease;
}


nav.page-floating-nav.is-visible,
nav.page-floating-nav.is-visible:hover,
nav.page-floating-nav.is-visible:focus,
nav.page-floating-nav.is-visible:focus-within {
    background: color-mix(in srgb, var(--container-bg) 96%, white 4%);
    background-attachment: scroll;
    backdrop-filter: none;
}

nav.page-floating-nav * {
    opacity: 1;
}

nav.page-floating-nav::before {
    content: '';
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-green) 72%, white 28%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-green) 24%, transparent 76%);
}

nav.page-floating-nav.is-visible {
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
    pointer-events: auto;
}

nav.page-floating-nav:not(.is-visible) {
    visibility: hidden;
}

.page-nav-theme {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0 0.95rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent 32%);
}

.page-nav-theme-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--theme-title-color) 86%, white 14%);
}

.page-nav-theme-select {
    width: 100%;
    min-height: 42px;
    padding: 0.62rem 0.82rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, white 24%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--container-bg) 70%, var(--highlight-bg) 30%);
    color: var(--text-color);
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.page-nav-theme-select option {
    background: color-mix(in srgb, var(--container-bg) 88%, white 12%);
    color: var(--text-color);
}

.page-nav-theme-select option:hover,
.page-nav-theme-select option:focus,
.page-nav-theme-select option:checked {
    background: color-mix(in srgb, var(--highlight-bg) 78%, white 22%);
    color: color-mix(in srgb, var(--dark-green) 88%, black 12%);
}

.page-nav-theme-select:focus,
.page-nav-theme-select:hover {
    border-color: var(--primary-green);
    background: color-mix(in srgb, var(--container-bg) 44%, var(--highlight-bg) 56%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--light-green) 70%, transparent 30%);
    transform: translateY(-1px);
}

.page-nav-scroll {
    overflow-y: auto;
    padding-right: 0.24rem;
}

.page-nav-scroll::-webkit-scrollbar {
    width: 8px;
}

.page-nav-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border-color) 80%, var(--primary-green) 20%);
    border-radius: 999px;
}

.page-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.page-floating-nav .page-nav-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-floating-nav .page-nav-tree li {
    display: block;
    margin: 0;
}

.page-floating-nav .page-nav-item {
    margin-bottom: 0.28rem;
}

.page-nav-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    padding: 0.16rem 0;
    border-radius: 14px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-nav-item:hover > .page-nav-row {
    background: color-mix(in srgb, var(--container-bg) 42%, var(--highlight-bg) 58%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-color) 16%, transparent 84%);
    transform: translateX(1px);
}

nav.page-floating-nav:hover .page-nav-item > .page-nav-row:not(:hover) {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.page-nav-toggle,
.page-nav-spacer {
    width: 22px;
    min-width: 22px;
    height: 22px;
}

.page-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent 60%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--container-bg) 44%, var(--highlight-bg) 56%);
    color: var(--dark-green);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-nav-toggle:hover {
    background: color-mix(in srgb, var(--highlight-bg) 68%, white 32%);
    border-color: color-mix(in srgb, var(--primary-green) 42%, var(--border-color) 58%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color) 58%, transparent 42%);
    transform: scale(1.06);
}

.page-nav-link {
    display: block;
    color: var(--text-color);
    text-decoration: none;
    padding: 0.48rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 12px;
    line-height: 1.45;
    word-break: break-word;
    font-family: var(--font-ui);
    background: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-nav-link:hover,
.page-nav-link.is-active {
    background: color-mix(in srgb, var(--highlight-bg) 68%, white 32%);
    border-color: color-mix(in srgb, var(--primary-green) 28%, transparent 72%);
    color: color-mix(in srgb, var(--dark-green) 90%, black 10%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color) 26%, transparent 74%);
    transform: translateX(2px);
}

.page-nav-item.depth-1 > .page-nav-row .page-nav-link {
    font-weight: 700;
    font-size: 0.98rem;
}

.page-nav-item.depth-2 > .page-nav-row .page-nav-link {
    font-weight: 600;
    font-size: 0.93rem;
}

.page-nav-item.depth-3 > .page-nav-row .page-nav-link,
.page-nav-item.depth-4 > .page-nav-row .page-nav-link,
.page-nav-item.depth-5 > .page-nav-row .page-nav-link,
.page-nav-item.depth-6 > .page-nav-row .page-nav-link {
    font-size: 0.88rem;
}

.page-nav-children {
    margin: 0.2rem 0 0.4rem 0.62rem;
    padding-left: 0.9rem;
    border-left: 1px dashed color-mix(in srgb, var(--border-color) 72%, transparent 28%);
}

.page-nav-item.is-collapsed > .page-nav-children {
    display: none;
}

.page-share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1500;
}

.page-share-modal {
    position: relative;
    width: min(92vw, 360px);
    padding: 1.4rem 1.25rem 1.1rem;
    border-radius: 20px;
    background: var(--container-bg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
    text-align: center;
}

.page-share-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--highlight-bg) 80%, white 20%);
    color: var(--text-color);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.page-share-qrcode {
    width: min(72vw, 250px);
    min-height: 250px;
    margin: 0 auto 0.8rem;
    padding: 0.9rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--highlight-bg) 72%, white 28%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-share-qrcode img,
.page-share-qrcode canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.page-share-modal-actions {
    margin-top: 0;
}

.page-share-copy-btn {
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    background: var(--primary-green);
    color: var(--button-text-color);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.page-share-copy-btn:hover {
    background: var(--dark-green);
    transform: translateY(-1px);
}

.slider-btn {
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-color: var(--color-control-bg);
    border-radius: 4px;
    font-size: 16px;
    margin: 0 5px;
}

.quiz-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 5px;
    font-weight: bold;
}

.quiz-feedback.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border: 1px solid var(--feedback-correct-border);
}

.quiz-feedback.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border: 1px solid var(--feedback-incorrect-border);
}

.quiz-feedback .retry-btn {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary-green);
    color: var(--color-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.quiz-feedback .retry-btn:hover {
    background-color: var(--dark-green);
}

.hotspot-image-container {
    position: relative;
    max-width: 100%;
    line-height: 0;
}

.hotspot-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

.hotspot-image-container[data-is-multi="true"]::after {
    content: '可多选';
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(40, 167, 69, 0.9);
    color: var(--color-on-accent);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.hotspot-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

.hotspot-area {
    fill: rgba(0, 123, 255, 0.3);
    stroke: #007bff;
    stroke-width: 2px;
    cursor: pointer;
    pointer-events: all;
    transition: fill 0.2s, stroke 0.2s;
    vector-effect: non-scaling-stroke;
}

.hotspot-area:hover {
    fill: rgba(0, 123, 255, 0.5);
}

.hotspot-area.selected {
    fill: rgba(40, 167, 69, 0.5);
    stroke: #28a745;
}

.quiz-container.is-answered .hotspot-svg {
    pointer-events: none;
}

.quiz-container.is-answered .hotspot-area {
    fill: rgba(128, 128, 128, 0.2);
    stroke: #808080;
}

.quiz-container.is-answered .hotspot-area[data-correct="true"] {
    fill: rgba(40, 167, 69, 0.3);
    stroke: #28a745;
}

.quiz-container.is-answered .hotspot-area.selected[data-correct="true"] {
    fill: rgba(40, 167, 69, 0.7);
    stroke: #1e7e34;
}

.quiz-container.is-answered .hotspot-area.selected:not([data-correct="true"]) {
    fill: rgba(220, 53, 69, 0.7);
    stroke: #dc3545;
}

.quiz-container.is-answered .hotspot-area:not(.selected)[data-correct="true"] {
    fill: rgba(255, 193, 7, 0.5);
    stroke: #ffc107;
}

.argument-mapper-container {
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: var(--container-bg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.argument-mapper-statement {
    margin: 0 0 1.25rem;
    color: var(--theme-title-color);
    font-size: 1.35rem;
    line-height: 1.45;
}

.argument-mapper-workspace {
    display: grid;
    gap: 1.25rem;
}

.argument-mapper-items,
.argument-mapper-column {
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, white 22%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--container-bg) 90%, var(--highlight-bg) 10%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.argument-mapper-items {
    padding: 1rem;
}

.items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.items-header h5,
.argument-mapper-column > h5 {
    margin: 0;
    color: var(--theme-title-color);
    font-size: 1rem;
    line-height: 1.5;
}

.argument-mapper-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.argument-mapper-column {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
}

.argument-mapper-container .drop-zone,
.argument-mapper-container .argument-mapper-items {
    min-height: 84px;
}

.argument-mapper-container .drop-zone {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem;
    border: 2px dashed transparent;
    border-radius: 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.argument-mapper-container .drop-zone.is-over,
.argument-mapper-container .argument-mapper-items.is-over {
    border-color: color-mix(in srgb, var(--primary-green) 56%, white 44%);
    background: color-mix(in srgb, var(--highlight-bg) 76%, white 24%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-green) 20%, transparent 80%);
}

.argument-mapper-container .draggable {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.95rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, white 14%);
    border-radius: 14px;
    background: var(--container-bg);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    cursor: grab;
}

.argument-mapper-container .drop-zone .draggable:last-child,
.argument-mapper-container .argument-mapper-items .draggable:last-child {
    margin-bottom: 0;
}

.argument-mapper-container .draggable:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.argument-mapper-container .draggable.is-dragging {
    opacity: 0.78;
    transform: scale(0.98);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.argument-text {
    flex: 1;
    min-width: 0;
    color: var(--text-color);
    line-height: 1.75;
    word-break: break-word;
}

.controls-container,
.vote-container {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.controls-container {
    flex-shrink: 0;
}

.argument-mapper-container .add-item-btn,
.argument-mapper-container .vote-btn,
.argument-mapper-container .delete-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--container-bg) 84%, var(--highlight-bg) 16%);
    color: var(--dark-green);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.argument-mapper-container .add-item-btn:hover,
.argument-mapper-container .vote-btn:hover,
.argument-mapper-container .delete-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--highlight-bg) 76%, white 24%);
    border-color: color-mix(in srgb, var(--primary-green) 45%, var(--border-color) 55%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.argument-mapper-container .add-item-btn {
    font-size: 1rem;
    font-weight: 700;
}

.argument-mapper-container .vote-btn svg,
.argument-mapper-container .delete-btn svg {
    width: 16px;
    height: 16px;
}

.argument-mapper-container .vote-btn.voted.upvote {
    color: var(--feedback-correct-text);
    border-color: color-mix(in srgb, var(--feedback-correct-text) 34%, white 66%);
    background: color-mix(in srgb, var(--feedback-correct-bg) 64%, white 36%);
}

.argument-mapper-container .vote-btn.voted.downvote,
.argument-mapper-container .delete-btn:hover {
    color: var(--feedback-incorrect-text);
    border-color: color-mix(in srgb, var(--feedback-incorrect-text) 34%, white 66%);
    background: color-mix(in srgb, var(--feedback-incorrect-bg) 72%, white 28%);
}

.argument-submit-btn {
    justify-self: start;
    margin-top: 0.5rem;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(4px);
    z-index: 2000;
}

.modal-content {
    width: min(100%, 520px);
    padding: 1.2rem;
    border-radius: 18px;
    background: var(--container-bg);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
    gap: 0.9rem;
}

.modal-input {
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
    border-radius: 12px;
    resize: vertical;
    font: inherit;
    color: var(--text-color);
    background: color-mix(in srgb, var(--container-bg) 84%, var(--highlight-bg) 16%);
}

.modal-input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--light-green) 74%, white 26%);
    background: var(--container-bg);
}

.modal-close-btn {
    align-self: flex-end;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .argument-mapper-container {
        padding: 1rem;
    }

    .argument-mapper-columns {
        grid-template-columns: 1fr;
    }

    .argument-mapper-container .draggable {
        flex-direction: column;
    }

    .controls-container {
        width: 100%;
        justify-content: flex-end;
    }
}

.form-quiz-option:has(.form-input),
.form-quiz-option:has(.form-textarea),
.form-quiz-option:has(.form-select) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
}

.form-quiz-option:has(.form-input) .form-label,
.form-quiz-option:has(.form-textarea) .form-label,
.form-quiz-option:has(.form-select) .form-label {
    margin: 0;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.5;
}

.form-quiz-option .form-control-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.form-quiz-option .form-control-row .required-star {
    flex: 0 0 auto;
    min-width: 0.9rem;
    padding-top: 10px;
    color: var(--callout-danger-color);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.form-quiz-option .form-control-row .form-input,
.form-quiz-option .form-control-row .form-textarea,
.form-quiz-option .form-control-row .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.form-quiz-option .form-input,
.form-quiz-option .form-textarea,
.form-quiz-option .form-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--primary-green) 48%, white 52%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--container-bg) 88%, var(--highlight-bg) 12%);
    color: var(--text-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.form-quiz-option .form-input,
.form-quiz-option .form-select {
    min-height: 42px;
    padding: 10px 12px;
    line-height: 1.4;
}

.form-quiz-option .form-textarea {
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

.form-quiz-option .form-input:focus,
.form-quiz-option .form-textarea:focus,
.form-quiz-option .form-select:focus,
.form-field-horizontal .form-input:focus,
.form-field-horizontal .form-textarea:focus,
.form-field-horizontal .form-select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--light-green) 76%, white 24%);
    background: var(--container-bg);
}

.form-quiz-option .form-help,
.form-quiz-option .form-counter {
    color: color-mix(in srgb, var(--text-color) 78%, white 22%);
    font-size: 0.9rem;
    line-height: 1.5;
}

.form-quiz-option.form-field-horizontal:has(.form-input),
.form-quiz-option.form-field-horizontal:has(.form-textarea),
.form-quiz-option.form-field-horizontal:has(.form-select) {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
}

.form-quiz-option.form-field-horizontal:has(.form-input) .form-label,
.form-quiz-option.form-field-horizontal:has(.form-textarea) .form-label,
.form-quiz-option.form-field-horizontal:has(.form-select) .form-label {
    margin: 0;
    padding-top: 10px;
    text-align: right;
}

.form-quiz-option.form-field-horizontal:has(.form-input) .form-control-row,
.form-quiz-option.form-field-horizontal:has(.form-textarea) .form-control-row,
.form-quiz-option.form-field-horizontal:has(.form-select) .form-control-row,
.form-quiz-option.form-field-horizontal:has(.form-input) .form-help,
.form-quiz-option.form-field-horizontal:has(.form-textarea) .form-help,
.form-quiz-option.form-field-horizontal:has(.form-select) .form-help,
.form-quiz-option.form-field-horizontal:has(.form-input) .form-counter,
.form-quiz-option.form-field-horizontal:has(.form-textarea) .form-counter,
.form-quiz-option.form-field-horizontal:has(.form-select) .form-counter {
    grid-column: 2;
}

.callout-reflection .reflection-prompts li {
    border-left: none;
    background: transparent;
    border-color: color-mix(in srgb, var(--callout-reflection-color) 18%, var(--container-bg) 82%);
}

/* 版心、字体、排版优化 */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-level-7 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

p,
.page-control-pane > p,
.content > p {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-wrap: pretty;
    margin: 0 0 var(--space-block-md);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: 0;
}

.callout-content p {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-wrap: pretty;
    margin: 0 0 0.85rem;
    font-size: var(--font-size-body);
    line-height: 1.78;
    letter-spacing: 0;
}

p[data-component-type="paragraph"],
.interactive-container[data-component-type="callout"] .callout-content > p,
.interactive-container[data-component-type="learningStrategyTip"] .callout-content > p {
    text-indent: 2em;
}

p.page-intro[data-component-type="paragraph"] {
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--theme-primary);
    border-radius: 0 0.55rem 0.55rem 0;
    background: color-mix(in srgb, var(--highlight-bg) 72%, var(--container-bg) 28%);
    color: var(--theme-title-color);
    font-weight: 600;
}

p.page-bridge[data-component-type="paragraph"] {
    padding: 0.7rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-primary) 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 22%, transparent);
    background: color-mix(in srgb, var(--highlight-bg) 42%, transparent);
    color: var(--muted-text-color);
    font-style: italic;
}

.callout-title,
.callout-reflection .callout-title,
.callout-strategy .callout-title {
    color: var(--theme-title-color);
    font-size: var(--font-size-component-title);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.52rem;
}

.interactive-container .callout-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-top: 0.12rem;
    border-radius: 999px;
    border: 1px solid var(--callout-icon-border, color-mix(in srgb, var(--primary-green) 22%, var(--container-bg) 78%));
    background: var(--callout-icon-bg, color-mix(in srgb, var(--highlight-bg) 70%, var(--container-bg) 30%));
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary-green) 8%, transparent);
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: none !important;
}

.interactive-container .callout-icon::before,
.deep-question-icon::before {
    content: none !important;
    display: none !important;
}

.interactive-container .callout-icon .component-bi-icon,
.deep-question-icon .component-bi-icon {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--callout-icon-color, var(--primary-green));
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.callout-info .callout-icon { --callout-icon-color: var(--callout-info-color); --callout-icon-bg: color-mix(in srgb, var(--highlight-bg) 50%, var(--container-bg) 50%); --callout-icon-border: color-mix(in srgb, var(--callout-info-color) 18%, var(--container-bg) 82%); }
.callout-tip .callout-icon { --callout-icon-color: var(--callout-tip-color); --callout-icon-bg: color-mix(in srgb, var(--light-green) 40%, var(--container-bg) 60%); --callout-icon-border: color-mix(in srgb, var(--callout-tip-color) 16%, var(--container-bg) 84%); }
.callout-warning .callout-icon { --callout-icon-color: var(--callout-warning-color); --callout-icon-bg: color-mix(in srgb, var(--feedback-partial-bg) 48%, var(--container-bg) 52%); --callout-icon-border: color-mix(in srgb, var(--feedback-partial-border) 42%, var(--container-bg) 58%); }
.callout-danger .callout-icon { --callout-icon-color: var(--callout-danger-color); --callout-icon-bg: color-mix(in srgb, var(--feedback-incorrect-bg) 42%, var(--container-bg) 58%); --callout-icon-border: color-mix(in srgb, var(--feedback-incorrect-border) 36%, var(--container-bg) 64%); }
.callout-key-concept .callout-icon { --callout-icon-color: var(--callout-concept-color); --callout-icon-bg: color-mix(in srgb, var(--highlight-bg) 50%, var(--container-bg) 50%); --callout-icon-border: color-mix(in srgb, var(--callout-concept-color) 18%, var(--container-bg) 82%); }
.callout-quote .callout-icon { --callout-icon-color: var(--callout-quote-color); --callout-icon-bg: color-mix(in srgb, var(--highlight-bg) 44%, var(--container-bg) 56%); --callout-icon-border: color-mix(in srgb, var(--callout-quote-color) 18%, var(--container-bg) 82%); }
.callout-strategy .callout-icon { --callout-icon-color: var(--callout-strategy-color); --callout-icon-bg: color-mix(in srgb, var(--light-green) 34%, var(--container-bg) 66%); --callout-icon-border: color-mix(in srgb, var(--callout-strategy-color) 18%, var(--container-bg) 82%); }
.callout-reflection .callout-icon { --callout-icon-color: var(--callout-reflection-color); --callout-icon-bg: color-mix(in srgb, var(--highlight-bg) 46%, var(--container-bg) 54%); --callout-icon-border: color-mix(in srgb, var(--callout-reflection-color) 18%, var(--container-bg) 82%); }

.form-quiz-option.form-width-full,
.form-group.form-width-full { max-width: 100% !important; }
.form-quiz-option.form-width-medium,
.form-group.form-width-medium { max-width: min(100%, 760px) !important; }
.form-quiz-option.form-width-small,
.form-group.form-width-small { max-width: min(100%, 380px) !important; }

@media (max-width: 768px) {
    #app {
        width: 100%;
        min-height: 100vh;
        height: auto;
        margin: 0;
        padding: 4.2rem 1rem 1.4rem;
        border-radius: 0;
        box-shadow: none;
    }

    .page-nav-trigger-button,
    .page-share-trigger-button {
        top: 10px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .page-nav-trigger-button {
        left: 10px;
    }

    .page-share-trigger-button {
        right: 10px;
    }

    .page-share-panel {
        top: 56px;
        right: 10px;
    }

    nav.page-floating-nav {
        width: min(300px, calc(100vw - 16px));
        top: 56px;
        left: 10px;
        max-height: min(calc(100vh - 68px), 78vh);
    }

    .page-control-container {
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(56, 142, 60, 0.08);
    }

    .page-control-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.55rem;
        padding: 0.75rem 0.75rem 0.65rem;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 68%, white 32%);
        background: color-mix(in srgb, var(--highlight-bg) 72%, white 28%);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }

    .page-control-tabs::-webkit-scrollbar {
        display: none;
    }

    .page-control-tab {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: min(72vw, 18rem);
        margin-right: 0;
        margin-bottom: 0;
        padding: 0.72rem 1rem;
        border: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, white 28%);
        border-radius: 999px;
        background: color-mix(in srgb, var(--container-bg) 82%, white 18%);
        color: color-mix(in srgb, var(--text-color) 88%, white 12%);
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
        scroll-snap-align: start;
    }

    .page-control-tab:hover {
        background: color-mix(in srgb, var(--highlight-bg) 82%, white 18%);
        color: var(--theme-title-color);
        transform: translateY(-1px);
    }

    .page-control-tab.is-current {
        border-color: color-mix(in srgb, var(--primary-green) 62%, white 38%);
        border-bottom-color: color-mix(in srgb, var(--primary-green) 62%, white 38%);
        background: linear-gradient(135deg, color-mix(in srgb, var(--light-green) 78%, white 22%), color-mix(in srgb, var(--highlight-bg) 68%, white 32%));
        color: var(--theme-title-color);
        box-shadow: 0 8px 18px rgba(56, 142, 60, 0.16);
    }

    .page-control-content-panes {
        padding: 1rem 1rem 1.2rem;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-container.table-container-has-media table,
    .table-container table.table-has-media {
        table-layout: fixed;
    }

    .table-container table.table-has-media th,
    .table-container table.table-has-media td {
        padding: 0.65rem 0.7rem;
        vertical-align: top;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .table-container table.table-has-media .table-cell-has-media {
        width: clamp(96px, 30vw, 136px);
        min-width: clamp(96px, 30vw, 136px);
    }

    .table-container table.table-has-media .table-cell-has-media .table-cell-content,
    .table-container table.table-has-media .table-cell-has-media .image-container,
    .table-container table.table-has-media .table-cell-has-media .image-with-hotspots {
        width: 100%;
        max-width: 100%;
    }

    .table-container table.table-has-media .table-cell-has-media figure {
        margin: 0 auto;
    }

    .table-container table.table-has-media .table-cell-has-media img,
    .table-container table.table-has-media .table-cell-has-media video {
        width: 100%;
        max-width: clamp(96px, 30vw, 136px);
        height: auto;
        object-fit: contain;
    }

    .table-container table.table-has-media .table-cell-has-media figcaption {
        margin-top: 0.45rem;
        font-size: 0.8rem;
        line-height: 1.45;
        word-break: break-word;
    }

    .interactive-container[data-component-type="image"],
    .image-container {
        margin: 0.85rem auto 1rem;
    }

    .image-container figure {
        max-width: min(100%, calc(100vw - 2rem));
    }

    .image-container figcaption {
        margin-top: 0.28rem;
    }

    .chart-container {
        padding: 0.95rem 0.85rem 1rem;
        margin: 1rem 0 1.2rem;
        border-radius: 14px;
        overflow: hidden;
    }

    .chart-container .echarts-instance {
        min-height: 320px;
    }

    .echarts-debug-panel {
        margin-top: 0.7rem;
        padding: 0.75rem 0.8rem;
        font-size: 0.88rem;
    }

    .chart-title {
        margin-bottom: 0.6rem;
        font-size: 1rem;
    }

    .interactive-container.is-fullscreenable::after {
        display: none;
    }

    .echarts-fullscreen-trigger {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.32rem 0.72rem;
        font-size: 0.76rem;
    }

    .echarts-fullscreen-header {
        padding: 0.75rem 0.85rem;
    }

    .echarts-fullscreen-title {
        font-size: 0.92rem;
    }

    .echarts-fullscreen-close {
        padding: 0.42rem 0.82rem;
        font-size: 0.82rem;
    }

    .echarts-fullscreen-body {
        padding: 0.55rem;
    }

    .form-quiz-option.form-field-horizontal:has(.form-input),
    .form-quiz-option.form-field-horizontal:has(.form-textarea),
    .form-quiz-option.form-field-horizontal:has(.form-select) {
        grid-template-columns: 1fr;
    }

    .form-quiz-option.form-field-horizontal:has(.form-input) .form-label,
    .form-quiz-option.form-field-horizontal:has(.form-textarea) .form-label,
    .form-quiz-option.form-field-horizontal:has(.form-select) .form-label {
        padding-top: 0;
        text-align: left;
    }

    .form-quiz-option.form-field-horizontal:has(.form-input) .form-control-row,
    .form-quiz-option.form-field-horizontal:has(.form-textarea) .form-control-row,
    .form-quiz-option.form-field-horizontal:has(.form-select) .form-control-row,
    .form-quiz-option.form-field-horizontal:has(.form-input) .form-help,
    .form-quiz-option.form-field-horizontal:has(.form-textarea) .form-help,
    .form-quiz-option.form-field-horizontal:has(.form-select) .form-help,
    .form-quiz-option.form-field-horizontal:has(.form-input) .form-counter,
    .form-quiz-option.form-field-horizontal:has(.form-textarea) .form-counter,
    .form-quiz-option.form-field-horizontal:has(.form-select) .form-counter {
        grid-column: 1;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: 0;
    }

    .interactive-container .callout-icon,
    .deep-question-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }

    .form-quiz-option.form-width-medium,
    .form-group.form-width-medium,
    .form-quiz-option.form-width-small,
    .form-group.form-width-small {
        max-width: 100% !important;
    }

    :root {
        --prose-max-width: 100%;
        --prose-narrow-width: 100%;
        --prose-caption-width: 100%;
    }

    h1 { margin-bottom: 1.4rem; }
    h2 { margin-top: 2.35rem; }
    h3 { margin-top: 1.9rem; }

    blockquote { padding-left: 1.05rem; }

    ul,
    ol,
    .interactive-container ul,
    .interactive-container ol {
        padding-left: 1.25rem;
    }
}

@media (max-width: 480px) {
    .page-control-tabs {
        padding: 0.7rem 0.65rem 0.6rem;
        gap: 0.45rem;
    }

    .page-control-tab {
        max-width: min(78vw, 15rem);
        padding: 0.68rem 0.9rem;
        font-size: 0.92rem;
    }

    .table-container table.table-has-media .table-cell-has-media {
        width: 104px;
        min-width: 104px;
    }

    .table-container table.table-has-media .table-cell-has-media img,
    .table-container table.table-has-media .table-cell-has-media video {
        max-width: 104px;
    }
}

/* WEBPAGE-EDITOR-TYPOGRAPHY-TABLE-CONTRACT-V1:BEGIN */
/* 编辑器标题层级与表格对齐的统一契约。em 相对于正文继承字号，保证 1～7 级逐级不增大。 */
/* CURRENT-COURSE-HEADING-HIERARCHY-V2：仅用于当前课程，不同步到其他课程或模板。 */
[data-component-type="heading"][aria-level="1"] { font-size: 2.1667em; }
[data-component-type="heading"][aria-level="2"] {
    font-size: 1.8333em;
    border-left: 0;
}
[data-component-type="heading"][aria-level="3"] { font-size: 1.5em; }
[data-component-type="heading"][aria-level="4"] {
    font-size: 1.25em;
    border-left: 0;
}
[data-component-type="heading"][aria-level="5"] { font-size: 1.125em; }
[data-component-type="heading"][aria-level="6"] {
    font-size: 1.0625em;
    font-family: var(--font-fz-hei, var(--font-heading));
    font-weight: 700;
}
[data-component-type="heading"][aria-level="7"],
body h7,
body .heading-level-7,
body [data-heading-level="7"] {
    display: block;
    font-size: 1em;
    font-family: var(--font-fz-hei, var(--font-heading));
    font-weight: 700;
}

/* 默认表头居中；组件写入的单元格行内对齐仍可覆盖这里的默认值。 */
table th,
.table-container table th,
.interactive-container table th,
.interactive-matrix thead th,
.interactive-matrix tbody th,
.custom-form table th,
form table th {
    text-align: center;
    vertical-align: middle;
}
/* WEBPAGE-EDITOR-TYPOGRAPHY-TABLE-CONTRACT-V1:END */

/* FILE-UPLOAD-SCOPE-AND-LAYOUT-V2:BEGIN */
.file-upload-container {
    width: 100%;
    margin: 1.25rem 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 12px;
    background: var(--container-bg, #fff);
    box-sizing: border-box;
}

.file-upload-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--text-color, #1f2937);
}

.file-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 1rem;
    border: 2px dashed var(--border-color, #cbd5e1);
    border-radius: 10px;
    color: var(--text-muted, #64748b);
    background: var(--highlight-bg, #f8fafc);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: var(--primary-color, var(--primary-green, #2563eb));
    background: var(--container-bg, #fff);
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.file-upload-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.file-upload-list:empty {
    display: none;
}

.file-upload-list .file-list-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 9px;
    background: var(--container-bg, #fff);
    box-shadow: none;
}

.file-upload-list .file-icon {
    width: 36px;
    height: 36px;
    margin: 0;
}

.file-upload-list .file-info {
    min-width: 0;
    text-align: left;
}

.file-upload-list .file-link,
.file-upload-list .file-name {
    display: block;
    overflow: hidden;
    color: var(--primary-color, #2563eb);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-upload-list .file-size {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.file-upload-list .file-progress {
    grid-column: 2 / 4;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-color, #e2e8f0);
}

.file-upload-list .progress-bar {
    width: 0;
    height: 100%;
    background: var(--primary-color, var(--primary-green, #2563eb));
    transition: width 0.2s ease;
}

.file-upload-list .file-actions {
    display: flex;
    align-items: center;
    margin: 0;
}

.file-upload-list .delete-btn {
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid #fecaca;
    border-radius: 7px;
    color: #b91c1c;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
}

.file-upload-list .delete-btn:hover {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

.file-upload-list .hidden {
    display: none;
}

@media (max-width: 640px) {
    .file-upload-container {
        padding: 1rem;
    }

    .file-upload-list .file-list-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .file-upload-list .file-actions,
    .file-upload-list .file-progress {
        grid-column: 2;
        justify-self: start;
    }
}
/* FILE-UPLOAD-SCOPE-AND-LAYOUT-V2:END */

/* FILE-UPLOAD-TEACHER-COLLECTION-V1:BEGIN */
.file-upload-teacher-panel[hidden] {
    display: none;
}

.file-upload-teacher-view .file-drop-zone[hidden] {
    display: none;
}

.file-upload-teacher-panel {
    margin-top: 0.25rem;
    color: var(--text-color, #21412c);
}

.teacher-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid #b7d9bd;
    border-left: 4px solid #2f7d45;
    border-radius: 9px;
    background: linear-gradient(135deg, #f2faf4 0%, #ffffff 72%);
}

.teacher-upload-heading-group {
    display: grid;
    gap: 0.18rem;
}

.teacher-upload-title {
    color: #1f5f35;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.teacher-upload-count {
    color: #66816e;
    font-size: 0.86rem;
}

.batch-download-btn,
.file-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.batch-download-btn {
    min-height: 38px;
    padding: 0.55rem 0.9rem;
    border: 1px solid #2f7d45;
    color: #ffffff;
    background: #2f7d45;
    box-shadow: 0 5px 14px rgba(47, 125, 69, 0.16);
}

.batch-download-btn:hover {
    color: #ffffff;
    background: #245f35;
    border-color: #245f35;
    transform: translateY(-1px);
}

.student-upload-groups {
    display: grid;
    gap: 0.9rem;
}

.student-upload-group {
    overflow: hidden;
    border: 1px solid #d4e5d7;
    border-radius: 10px;
    background: #ffffff;
}

.student-upload-group-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid #e3eee5;
    background: #f7fbf8;
    cursor: pointer;
    list-style: none;
}

.student-upload-group-header::-webkit-details-marker {
    display: none;
}

.student-upload-group-header::after {
    content: "收起";
    margin-left: 0.3rem;
    color: #66816e;
    font-size: 0.78rem;
}

.student-upload-group:not([open]) .student-upload-group-header {
    border-bottom-color: transparent;
}

.student-upload-group:not([open]) .student-upload-group-header::after {
    content: "展开";
}

.student-upload-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: #397d4c;
    font-weight: 800;
}

.student-upload-identity {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.student-upload-name {
    overflow: hidden;
    color: #244b30;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-upload-id,
.student-file-count {
    color: #718277;
    font-size: 0.82rem;
}

.student-file-count {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #e7f3e9;
}

.teacher-file-list {
    margin: 0;
    padding: 0.55rem;
}

.teacher-file-list .file-list-item {
    border-color: transparent;
    background: #ffffff;
}

.teacher-file-list .file-list-item + .file-list-item {
    border-top-color: #edf3ee;
}

.file-upload-list .file-meta {
    display: block;
    margin-top: 0.18rem;
    color: #7a887e;
    font-size: 0.8rem;
}

.file-download-link {
    min-height: 32px;
    padding: 0.38rem 0.7rem;
    border: 1px solid #9fc8a8;
    color: #28643a;
    background: #f4faf5;
    font-size: 0.88rem;
}

.file-download-link:hover {
    color: #ffffff;
    background: #397d4c;
    border-color: #397d4c;
}

.teacher-upload-empty {
    padding: 1.4rem 1rem;
    border: 1px dashed #bfd7c4;
    border-radius: 9px;
    color: #708176;
    background: #fbfdfb;
    text-align: center;
}

@media (max-width: 640px) {
    .teacher-upload-header {
        align-items: stretch;
        flex-direction: column;
    }

    .batch-download-btn {
        width: 100%;
    }

    .student-upload-group-header {
        grid-template-columns: 34px minmax(0, 1fr) auto auto;
    }
}
/* FILE-UPLOAD-TEACHER-COLLECTION-V1:END */

/* FILE-UPLOAD-TEACHER-COMPACT-LIST-V2:BEGIN */
.file-upload-teacher-panel {
    margin-top: 0;
}

.teacher-upload-header {
    min-height: 42px;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.48rem 0.65rem 0.48rem 0.72rem;
    border-left-width: 3px;
    border-radius: 7px;
    background: #f7fbf8;
    box-shadow: none;
}

.teacher-upload-heading-group {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.55rem;
}

.teacher-upload-title {
    font-size: 0.96rem;
    letter-spacing: 0;
}

.teacher-upload-count {
    padding-left: 0.55rem;
    border-left: 1px solid #cfe0d2;
    font-size: 0.78rem;
    white-space: nowrap;
}

.batch-download-btn {
    min-height: 30px;
    padding: 0.35rem 0.65rem;
    border-radius: 5px;
    box-shadow: none;
    font-size: 0.82rem;
}

.student-upload-groups {
    gap: 0.48rem;
}

.student-upload-group {
    border-color: #d7e4d9;
    border-radius: 7px;
}

.student-upload-group-header {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.35rem 0.58rem;
    border-bottom-color: #e4ece5;
    background: #f8fbf8;
}

.student-upload-group-header:hover {
    background: #f1f7f2;
}

.student-upload-group-header::after {
    width: 2.3rem;
    margin-left: 0;
    font-size: 0.72rem;
    text-align: right;
}

.student-upload-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
}

.student-upload-identity {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.45rem;
}

.student-upload-name {
    font-size: 0.88rem;
}

.student-upload-id,
.student-file-count {
    font-size: 0.72rem;
}

.student-upload-id {
    white-space: nowrap;
}

.student-file-count {
    padding: 0.15rem 0.4rem;
}

.teacher-file-column-head,
.teacher-file-list .teacher-file-row {
    display: grid;
    grid-template-columns: 28px minmax(180px, 1fr) 72px 136px 48px;
    align-items: center;
    column-gap: 0.55rem;
}

.teacher-file-column-head {
    padding: 0.26rem 0.58rem;
    border-bottom: 1px solid #edf2ee;
    color: #839087;
    background: #fcfdfc;
    font-size: 0.68rem;
    line-height: 1.2;
}

.teacher-file-list {
    display: block;
    margin: 0;
    padding: 0;
}

.teacher-file-list .teacher-file-row {
    min-height: 43px;
    margin: 0;
    padding: 0.38rem 0.58rem;
    border: 0;
    border-bottom: 1px solid #edf2ee;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.teacher-file-list .teacher-file-row:last-child {
    border-bottom: 0;
}

.teacher-file-list .teacher-file-row:hover {
    background: #fbfdfb;
}

.teacher-file-row .file-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border-radius: 5px;
    box-sizing: border-box;
}

.teacher-file-row .file-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.file-icon.file-kind-word { background: #e8f2ff; }
.file-icon.file-kind-pdf { background: #ffeded; }
.file-icon.file-kind-sheet { background: #eaf7ed; }
.file-icon.file-kind-slides { background: #fff1e8; }
.file-icon.file-kind-image { background: #edf8ef; }
.file-icon.file-kind-archive { background: #fff5df; }
.file-icon.file-kind-audio { background: #f4ebfb; }
.file-icon.file-kind-video { background: #fbeaf1; }
.file-icon.file-kind-text,
.file-icon.file-kind-code,
.file-icon.file-kind-other { background: #edf1f3; }

.teacher-file-row .file-info {
    min-width: 0;
}

.file-primary-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.42rem;
}

.teacher-file-row .file-link {
    min-width: 0;
    overflow: hidden;
    color: #245d34;
    font-size: 0.84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-type-badge {
    flex: 0 0 auto;
    padding: 0.08rem 0.28rem;
    border: 1px solid #d7e0d9;
    border-radius: 3px;
    color: #6d786f;
    background: #f6f8f6;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
}

.file-type-badge.file-kind-word { color: #1767ad; border-color: #c9dff5; background: #eef6ff; }
.file-type-badge.file-kind-pdf { color: #b92d2d; border-color: #f0cccc; background: #fff2f2; }
.file-type-badge.file-kind-sheet { color: #28713b; border-color: #cce4d1; background: #f0f8f2; }
.file-type-badge.file-kind-slides { color: #b75520; border-color: #f0d4c3; background: #fff5ef; }
.file-type-badge.file-kind-image { color: #347849; border-color: #cee5d3; background: #f1f8f2; }
.file-type-badge.file-kind-archive { color: #9b650f; border-color: #ead8ae; background: #fff8e9; }

.file-size-column,
.file-time-column {
    overflow: hidden;
    color: #7b867e;
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-file-row .file-actions {
    justify-content: flex-end;
}

.teacher-file-row .file-download-link {
    min-height: 26px;
    padding: 0.24rem 0.46rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.teacher-upload-empty {
    padding: 0.8rem;
    border-radius: 6px;
    font-size: 0.84rem;
}

@media (max-width: 760px) {
    .teacher-upload-header {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-upload-heading-group {
        justify-content: space-between;
    }

    .batch-download-btn {
        width: 100%;
    }

    .student-upload-group-header {
        grid-template-columns: 26px minmax(0, 1fr) auto auto;
    }

    .student-upload-id {
        display: none;
    }

    .teacher-file-column-head {
        display: none;
    }

    .teacher-file-list .teacher-file-row {
        grid-template-columns: 26px minmax(0, 1fr) auto;
        gap: 0.45rem;
    }

    .teacher-file-row .file-size-column,
    .teacher-file-row .file-time-column {
        grid-column: 2;
        display: inline;
        font-size: 0.68rem;
    }

    .teacher-file-row .file-time-column {
        margin-top: -0.32rem;
    }

    .teacher-file-row .file-actions {
        grid-column: 3;
        grid-row: 1 / span 3;
    }
}
/* FILE-UPLOAD-TEACHER-COMPACT-LIST-V2:END */

/* FILE-UPLOAD-TEACHER-FLAT-TABLE-V3:BEGIN */
.student-upload-table {
    display: block;
    overflow: hidden;
    border: 1px solid #d7e4d9;
    border-radius: 7px;
    background: #ffffff;
}

.student-upload-table .teacher-file-column-head,
.student-upload-table .teacher-file-row {
    grid-template-columns: 104px 28px minmax(180px, 1fr) 72px 136px 48px;
}

.student-upload-table .teacher-file-column-head {
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
    background: #f7faf7;
}

.teacher-flat-file-list {
    border: 0;
}

.teacher-flat-file-list .teacher-file-row:nth-child(even) {
    background: #fbfdfb;
}

.teacher-flat-file-list .teacher-file-row:hover {
    background: #f3f8f4;
}

.student-name-column {
    min-width: 0;
    overflow: hidden;
    color: #285d37;
    font-size: 0.8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .student-upload-table .teacher-file-row {
        grid-template-columns: 78px 26px minmax(0, 1fr) auto;
    }

    .student-upload-table .student-name-column {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
    }

    .student-upload-table .file-icon {
        grid-column: 2;
        grid-row: 1;
    }

    .student-upload-table .file-info,
    .student-upload-table .file-size-column,
    .student-upload-table .file-time-column {
        grid-column: 3;
    }

    .student-upload-table .file-actions {
        grid-column: 4;
        grid-row: 1 / span 3;
    }
}
/* FILE-UPLOAD-TEACHER-FLAT-TABLE-V3:END */

/* FILE-UPLOAD-TEACHER-SORTING-V4:BEGIN */
.teacher-sort-status {
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
    color: #4f7259;
    background: #eaf3ec;
    font-size: 0.7rem;
    white-space: nowrap;
}

.sort-column-btn {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    color: #7b897f;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sort-column-btn:hover,
.sort-column-btn.is-active {
    color: #28663a;
}

.sort-column-btn:focus-visible {
    outline: 2px solid #6aa87a;
    outline-offset: 2px;
}

.sort-column-btn.is-active .sort-column-label {
    font-weight: 700;
}

.sort-direction-indicator {
    display: inline-block;
    width: 0.8rem;
    color: #4b8159;
    font-size: 0.72rem;
    text-align: center;
}

.teacher-file-column-head > :last-child {
    text-align: center;
}

.teacher-file-row .icon-only-download {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 5px;
}

.icon-only-download svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 760px) {
    .teacher-sort-status {
        display: none;
    }
}
/* FILE-UPLOAD-TEACHER-SORTING-V4:END */

/* FILE-UPLOAD-TEACHER-TITLE-ACTION-V5:BEGIN */
.file-upload-title-row {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.42rem;
}

.file-upload-title-row[hidden],
.teacher-title-meta[hidden],
.teacher-title-actions[hidden] {
    display: none;
}

.file-upload-title-row .file-upload-label {
    flex: 0 1 auto;
    margin: 0;
}

.teacher-title-meta {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
}

.teacher-title-meta .teacher-upload-count {
    padding-left: 0;
    border-left: 0;
}

.teacher-title-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
}

.file-upload-teacher-panel {
    margin-top: 0;
}

.teacher-title-actions .icon-only-batch-download {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid #9fc8a8;
    border-radius: 5px;
    color: #28643a;
    background: #f6faf7;
    box-shadow: none;
}

.teacher-title-actions .icon-only-batch-download:hover {
    color: #ffffff;
    background: #397d4c;
    border-color: #397d4c;
    transform: none;
}

.icon-only-batch-download svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

@media (max-width: 760px) {
    .file-upload-title-row {
        flex-wrap: wrap;
    }

    .teacher-title-meta {
        order: 3;
        width: 100%;
    }

    .teacher-title-actions .icon-only-batch-download {
        width: 30px;
    }
}
/* FILE-UPLOAD-TEACHER-TITLE-ACTION-V5:END */

/* FILE-UPLOAD-ROLE-GROUPS-V6:BEGIN */
.file-upload-container {
    padding: 1rem;
}

.file-upload-title-row {
    min-height: 0;
    margin-bottom: 0.7rem;
    padding: 0 0.1rem;
}

.file-upload-role-group {
    padding: 0.8rem;
    border: 1px solid #dce8df;
    border-radius: 10px;
    background: #fff;
}

.file-upload-role-group[hidden] {
    display: none;
}

.file-upload-role-group + .file-upload-role-group {
    margin-top: 0.75rem;
}

.file-upload-student-panel {
    border-color: #eadfdf;
    background: #fffdfd;
}

.file-upload-teacher-panel {
    margin-top: 0;
    border-color: #d4e4d7;
    background: #f8fbf8;
}

.file-upload-role-header {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
    padding: 0 0.1rem 0.6rem;
    border-bottom: 1px solid #edf1ee;
}

.file-upload-role-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.5rem;
}

.file-upload-role-title {
    flex: none;
    color: #285f39;
    font-size: 0.98rem;
    line-height: 1.4;
}

.file-upload-role-description,
.file-upload-role-meta {
    color: #7b8b80;
    font-size: 0.8rem;
    line-height: 1.4;
}

.file-upload-role-meta {
    margin-left: auto;
    white-space: nowrap;
}

.file-upload-student-panel .file-drop-zone {
    min-height: 78px;
    margin: 0;
}

.file-upload-student-panel .file-upload-list {
    margin-top: 0.6rem;
}

.file-upload-student-panel .file-list-item {
    padding: 0.65rem 0.75rem;
}

.file-upload-teacher-header .teacher-title-meta {
    margin-left: auto;
}

.file-upload-teacher-header .teacher-title-actions {
    margin-left: 0;
}

.file-upload-teacher-panel .student-upload-table {
    margin-top: 0;
}

.file-upload-teacher-panel .teacher-upload-empty {
    padding: 0.8rem 0.25rem 0.15rem;
}

@media (max-width: 760px) {
    .file-upload-role-header {
        flex-wrap: wrap;
    }

    .file-upload-role-heading {
        width: 100%;
        flex-wrap: wrap;
    }

    .file-upload-role-meta,
    .file-upload-teacher-header .teacher-title-meta {
        width: auto;
        margin-left: 0;
    }

    .file-upload-teacher-header .teacher-title-actions {
        margin-left: auto;
    }
}
/* FILE-UPLOAD-ROLE-GROUPS-V6:END */