/* Shared design tokens and application chrome. All visual rules stay on screen;
   PDF/Word generation reuses document stylesheets and must retain paper layout. */
@media screen {
  :root {
    --studio-accent: #7547b8;
    --studio-ink: #36313f;
    --studio-muted: #776f82;
    --studio-surface: color-mix(in srgb, var(--studio-accent) 3%, #f7f7f9);
    --studio-soft: color-mix(in srgb, var(--studio-accent) 9%, white);
    --studio-line: color-mix(in srgb, var(--studio-accent) 17%, #eceaf0);
  }
  [data-workspace] {
    --workspace-ink: var(--studio-ink);
    --workspace-muted: var(--studio-muted);
    --workspace-line: var(--studio-line);
    --workspace-surface: var(--studio-surface);
    --workspace-accent: var(--studio-accent);
    --workspace-accent-soft: var(--studio-soft);
    --workspace-action: var(--studio-accent);
    --workspace-action-ink: #fff;
    --workspace-radius: 14px;
  }
  .workspace-header {
    box-sizing: border-box;
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    width: 100%;
    min-height: 78px;
    padding: 15px 28px;
    border-bottom: 1px solid var(--workspace-line);
    color: var(--workspace-ink);
    background: rgba(255, 255, 255, .97);
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  }
  .workspace-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--workspace-ink); white-space: nowrap; }
  .workspace-brand-copy { display: grid; gap: 3px; }
  .workspace-brand-copy strong { color: var(--workspace-ink); font-size: 17px; line-height: 1.2; font-weight: 750; letter-spacing: .02em; }
  .workspace-nav { display: flex; align-items: center; gap: 5px; white-space: nowrap; padding: 4px; background: color-mix(in srgb, var(--studio-accent) 8%, white); border: 1px solid color-mix(in srgb, var(--studio-accent) 13%, white); border-radius: 12px; }
  .workspace-nav a { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 14px; border-radius: 8px; color: var(--studio-muted); text-decoration: none; font-size: 12px; line-height: 1.5; font-weight: 600; }
  .workspace-nav a:hover { color: var(--workspace-ink); background: #fff; }
  .workspace-nav a[aria-current="page"] { color: var(--workspace-accent); background: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--studio-accent) 4%, transparent); }
  .workspace-header-end { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0; }
  .workspace-draft { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 11px; line-height: 1.5; color: var(--studio-muted); white-space: nowrap; }
  .workspace-draft::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--studio-accent) 36%, white); }
  .workspace-draft[data-draft-state="saved"]::before { background: #25a281; box-shadow: 0 0 0 3px #25a28112; }
  .workspace-draft[data-draft-state="saving"]::before { background: #db9a37; }
  .workspace-draft[data-draft-state="error"] { color: #b54d42; }
  .workspace-draft[data-draft-state="error"]::before { background: #d86657; }
  .workspace-actions { display: flex; align-items: center; gap: 7px; }
  .workspace-actions > .ghost-button,
  .workspace-actions .settings-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin: 0; padding: 8px 11px; border: 1px solid var(--workspace-line); border-radius: 9px; color: var(--studio-muted); background: #fff; box-shadow: none; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
  .workspace-actions .workspace-save { color: #fff; background: var(--studio-accent); border-color: var(--studio-accent); }
  .workspace-actions > .ghost-button:hover,
  .workspace-actions .settings-button:hover { color: var(--workspace-accent); border-color: color-mix(in srgb, var(--workspace-accent) 35%, white); background: var(--workspace-accent-soft); }
  .workspace-actions .workspace-save:hover { color: #fff; background: color-mix(in srgb, var(--studio-accent) 85%, black); border-color: var(--studio-accent); }
  .workspace-actions .settings-button[aria-expanded="true"] { color: var(--workspace-accent); background: var(--workspace-accent-soft); border-color: color-mix(in srgb, var(--workspace-accent) 25%, white); }
  .workspace-actions .settings-wrap { position: relative; }
  .workspace-actions .settings-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: 250px; max-width: calc(100vw - 32px); padding: 7px; border: 1px solid var(--workspace-line); border-radius: 14px; background: white; box-shadow: 0 18px 50px color-mix(in srgb, var(--studio-accent) 7%, transparent); }
  .workspace-actions .settings-menu::before { display: none; }
  .workspace-actions .settings-menu button { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; width: 100%; padding: 12px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--workspace-ink); text-align: left; }
  .workspace-actions .settings-menu button:hover { background: var(--workspace-accent-soft); }
  .workspace-actions .settings-menu button > span:first-child { text-align: center; color: var(--workspace-accent); font-size: 18px; }
  .workspace-actions .settings-menu strong { display: block; font-size: 12px; }
  .workspace-actions .settings-menu small { display: block; margin-top: 4px; font-size: 10px; color: var(--workspace-muted); font-weight: 400; }
  .workspace-header a:focus-visible,
  .workspace-header button:focus-visible { outline: 3px solid color-mix(in srgb, var(--workspace-accent) 50%, white); outline-offset: 3px; }

  /* The tools share control geometry and the selected interface accent. */
  [data-workspace="worksheet"], [data-workspace="lesson"] { color: var(--workspace-ink); background: var(--workspace-surface); }
  [data-workspace="worksheet"] .app-shell, [data-workspace="lesson"] .app-shell { height: calc(100dvh - var(--workspace-header-height, 78px)); grid-template-columns: 382px minmax(0, 1fr); }
  [data-workspace] .control-panel { --ui-ink: var(--workspace-ink); --ui-muted: var(--workspace-muted); --ui-purple: var(--workspace-accent); --ui-purple-2: var(--studio-muted); --ui-border: var(--workspace-line); background: color-mix(in srgb, var(--studio-accent) 6%, white); border-right-color: var(--workspace-line); padding: 24px 22px 70px; scrollbar-color: color-mix(in srgb, var(--studio-accent) 21%, white) transparent; }
  [data-workspace] .control-panel .eyebrow { color: var(--workspace-accent); font-size: 10px; letter-spacing: .15em; }
  [data-workspace] .panel-intro h1, [data-workspace] .panel-heading h1 { color: var(--workspace-ink); font-size: 24px; line-height: 1.35; letter-spacing: -.04em; }
  [data-workspace] .panel-heading { margin-bottom: 20px; }
  [data-workspace] .control-panel .version-pill { color: var(--workspace-accent); background: var(--workspace-accent-soft); border-color: color-mix(in srgb, var(--studio-accent) 20%, white); }
  [data-workspace] .control-panel label,
  [data-workspace] .control-panel .module-section-title { color: var(--studio-muted); }
  [data-workspace] .control-panel .form-section,
  [data-workspace] .control-panel .form-card { border: 1px solid var(--workspace-line); border-radius: var(--workspace-radius); background: white; box-shadow: 0 3px 12px color-mix(in srgb, var(--studio-accent) 2%, transparent); padding: 18px; }
  [data-workspace] .control-panel .section-title h2,
  [data-workspace] .control-panel .section-heading h2 { color: var(--workspace-ink); font-size: 14px; }
  [data-workspace] .control-panel .section-heading > span,
  [data-workspace] .control-panel .step-number { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--workspace-accent); background: var(--workspace-accent-soft); font-size: 10px; font-weight: 750; letter-spacing: 0; }
  [data-workspace] .control-panel input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  [data-workspace] .control-panel textarea,
  [data-workspace] .control-panel select { border: 1px solid color-mix(in srgb, var(--studio-accent) 15%, white); border-radius: 9px; background: #fff; color: var(--workspace-ink); font-size: 12px; }
  [data-workspace] .control-panel input:focus,
  [data-workspace] .control-panel textarea:focus,
  [data-workspace] .control-panel select:focus { outline: 0; border-color: color-mix(in srgb, var(--workspace-accent) 60%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent); background: white; }
  [data-workspace] .control-panel .primary-button,
  [data-workspace] .control-panel .generate-button,
  [data-workspace] .control-panel .bundle-button,
  [data-workspace] .control-panel .export-primary { min-height: 44px; border-radius: 10px; background: var(--workspace-action); border-color: var(--workspace-action); box-shadow: 0 4px 12px color-mix(in srgb, var(--workspace-accent) 10%, transparent); color: var(--workspace-action-ink); font-size: 13px; }
  [data-workspace] .workspace-toolbar { min-height: 66px; height: 66px; padding-inline: 24px; border-bottom-color: var(--workspace-line); background: #fff; }
  [data-workspace="lesson"] .workspace { grid-template-rows: 66px minmax(0, 1fr); }
  [data-workspace] .workspace-toolbar .view-switch,
  [data-workspace] .workspace-toolbar .segmented-control { padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--studio-accent) 8%, white); box-shadow: none; }
  [data-workspace] .workspace-toolbar .view-switch button,
  [data-workspace] .workspace-toolbar .segmented-control button { border-radius: 7px; font-size: 12px; }
  [data-workspace] .workspace-toolbar .view-switch button.active,
  [data-workspace] .workspace-toolbar .segmented-control button.active { color: var(--workspace-accent); background: white; box-shadow: 0 2px 5px color-mix(in srgb, var(--studio-accent) 2%, transparent); }
  [data-workspace] .preview-scroll { background: color-mix(in srgb, var(--studio-accent) 11%, white); }
  [data-workspace] .editor-scroll { background: color-mix(in srgb, var(--studio-accent) 6%, white); }
  [data-workspace] .about-overlay,
  [data-workspace] .modal-overlay { background: color-mix(in srgb, var(--studio-accent) 17%, transparent); backdrop-filter: blur(5px); }
  [data-workspace] .about-dialog,
  [data-workspace] .settings-dialog { --ui-purple: var(--workspace-accent); --ui-purple-2: var(--studio-muted); --ui-border: var(--workspace-line); border: 1px solid var(--workspace-line); border-radius: 20px; background: white; box-shadow: 0 28px 90px color-mix(in srgb, var(--studio-accent) 10%, transparent); }
  [data-workspace] .control-panel .work-type-switch,
  [data-workspace] .control-panel .subject-switch,
  [data-workspace] .control-panel .generation-mode,
  [data-workspace] .control-panel .mode-switch { border-radius: 10px; background: color-mix(in srgb, var(--studio-accent) 10%, white); box-shadow: none; padding: 4px; }
  [data-workspace] .control-panel .work-type-switch button,
  [data-workspace] .control-panel .subject-switch button,
  [data-workspace] .control-panel .generation-mode button,
  [data-workspace] .control-panel .mode-switch button { border-radius: 7px; }
  [data-workspace] .control-panel .work-type-switch button.active,
  [data-workspace] .control-panel .subject-switch button.active,
  [data-workspace] .control-panel .generation-mode button.active,
  [data-workspace] .control-panel .mode-switch button.active { color: var(--workspace-accent); background: white; box-shadow: 0 2px 6px color-mix(in srgb, var(--studio-accent) 3%, transparent); }
  [data-workspace] .control-panel .module-button { min-height: 75px; border-radius: 12px; border-color: var(--workspace-line); background: #fff; box-shadow: none; }
  [data-workspace] .control-panel .module-button:hover { border-color: color-mix(in srgb, var(--studio-accent) 33%, white); color: var(--workspace-accent); }
  [data-workspace] .control-panel .module-button.active { color: var(--workspace-action-ink); border-color: color-mix(in srgb, var(--studio-accent) 31%, white); background: var(--workspace-action); box-shadow: 0 5px 14px color-mix(in srgb, var(--studio-accent) 8%, transparent); }
  [data-workspace] .control-panel .ai-layout-panel { border-color: color-mix(in srgb, var(--studio-accent) 20%, white); background: color-mix(in srgb, var(--studio-accent) 6%, white); }
  [data-workspace] .control-panel .ai-mode-card { border-radius: 12px; box-shadow: none; border-color: color-mix(in srgb, var(--studio-accent) 20%, white); background: color-mix(in srgb, var(--studio-accent) 8%, white); }
  [data-workspace] .control-panel .step-nav { background: color-mix(in srgb, var(--studio-accent) 6%, white); border-bottom-color: var(--workspace-line); }
  [data-workspace] .control-panel .step-nav button.active { color: var(--workspace-accent); background: var(--workspace-accent-soft); }
  [data-workspace] .control-panel .step-nav button.active b { color: var(--workspace-action-ink); background: var(--workspace-action); }
  [data-workspace] .editor-width .subject-chip,
  [data-workspace] .workspace-toolbar .time-pill.good { color: var(--workspace-accent); background: var(--workspace-accent-soft); }
  [data-workspace] .editor-width .card-title > span { color: var(--workspace-accent); }
}
@media screen and (max-width: 1180px) {
  .workspace-header { grid-template-columns: 1fr auto; gap: 12px 20px; padding: 14px 22px; }
  .workspace-header-end { grid-column: 1 / -1; justify-content: space-between; }
  [data-workspace="home"] .workspace-header-end { display: none; }
}
@media screen and (min-width: 981px) and (max-width: 1180px) {
  [data-workspace="worksheet"] .app-shell, [data-workspace="lesson"] .app-shell { grid-template-columns: 334px minmax(0, 1fr); }
  [data-workspace] .control-panel { padding-inline: 18px; }
}
@media screen and (max-width: 980px) {
  [data-workspace="worksheet"], [data-workspace="lesson"] { overflow: auto; }
  [data-workspace="worksheet"] .app-shell, [data-workspace="lesson"] .app-shell { display: block; height: auto; }
  [data-workspace] .control-panel { overflow: visible; border-right: 0; }
  [data-workspace] .workspace-toolbar { height: auto; min-height: 66px; padding: 12px 20px; }
  [data-workspace="lesson"] .workspace { display: block; }
  [data-workspace="lesson"] .editor-scroll { overflow: visible; }
}
@media screen and (max-width: 560px) {
  .workspace-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; }
  .workspace-brand { grid-column: 1; grid-row: 1; gap: 8px; }
  .workspace-brand-copy strong { font-size: 15px; }
  .workspace-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .workspace-nav a { padding: 6px 10px; min-height: 32px; }
  .workspace-header-end { display: contents; }
  .workspace-draft { grid-column: 2; grid-row: 1; font-size: 10px; gap: 5px; }
  .workspace-actions { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .workspace-actions > .ghost-button,
  .workspace-actions .settings-button { min-height: 36px; padding: 7px 3px; width: 100%; font-size: 11px; }
  .workspace-actions .settings-wrap { width: 100%; }
  [data-workspace] .control-panel { padding: 22px 14px 36px; }
  [data-workspace] .control-panel .form-section,
  [data-workspace] .control-panel .form-card { padding: 16px 14px; }
  [data-workspace] .workspace-toolbar { padding-inline: 14px; }
}