* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --line: #dbe4f0;
  --text: #142133;
  --muted: #4d6078;
  --brand: #1f5d9c;
  --brand-dark: #16497d;
  --brand-ink: #0d2743;
  --brand-teal: #238298;
  --brand-gold: #e5b45c;
  --danger: #a33a2c;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.boot-diagnostics {
  margin: 0;
  padding: 0.8rem 1rem;
  background: #fff4db;
  color: #5f3f00;
  border-bottom: 1px solid #ebcc8d;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.boot-diagnostics[data-level="error"] {
  background: #ffe7e3;
  color: #842b1f;
  border-bottom-color: #e9aea3;
}

.toolbar-history-restore-label,
.maven-question-label {
  display: block;
  margin-bottom: 0.35rem;
}

body[data-color-mode="dark"] {
  --bg: #0f1620;
  --panel: #17212d;
  --line: #2a3a4c;
  --text: #edf3fb;
  --muted: #9fb3c9;
  --brand: #5ea0ff;
  --brand-dark: #3c84eb;
  --brand-ink: #dcecff;
  --brand-teal: #3eb6c8;
  --brand-gold: #e5b45c;
  --danger: #d46c60;
  color-scheme: dark;
}

body[data-color-mode="dark"] .sidebar,
body[data-color-mode="dark"] .sidebar-courses-region {
  background: #121b26;
  border-color: var(--line);
}

body[data-color-mode="dark"] .sidebar h1 {
  color: #edf3fb;
}

body[data-color-mode="dark"] .sidebar.courses-panel-collapsed .sidebar-courses-region {
  background: #17212d;
  border-color: #304154;
}

body[data-color-mode="dark"] .sidebar.courses-panel-collapsed #sidebar-courses-toggle {
  color: #edf3fb;
  border-color: #4d647e;
  background: #213246;
}

body[data-color-mode="dark"] .main {
  background: transparent;
}

body[data-color-mode="dark"] .course-item,
body[data-color-mode="dark"] .history-chip,
body[data-color-mode="dark"] .toolbar-history,
body[data-color-mode="dark"] .toolbar-history-workspace,
body[data-color-mode="dark"] .toolbar-history-restore-wrap,
body[data-color-mode="dark"] .sidebar-section-toggle,
body[data-color-mode="dark"] .toolbar-overflow-panel,
body[data-color-mode="dark"] .inspector-group,
body[data-color-mode="dark"] .inspector-empty,
body[data-color-mode="dark"] .workspace-diagnostics,
body[data-color-mode="dark"] .quiz-settings,
body[data-color-mode="dark"] .quiz-question,
body[data-color-mode="dark"] .labeled-stage-card,
body[data-color-mode="dark"] .save-indicator,
body[data-color-mode="dark"] .lesson-rail,
body[data-color-mode="dark"] .document-shell,
body[data-color-mode="dark"] .lesson-list-item,
body[data-color-mode="dark"] .build-start-card,
body[data-color-mode="dark"] .doc-lesson,
body[data-color-mode="dark"] .doc-lesson-editor-bar,
body[data-color-mode="dark"] .doc-block,
body[data-color-mode="dark"] .doc-quick-bar,
body[data-color-mode="dark"] .doc-insert-btn,
body[data-color-mode="dark"] .doc-recent-chip,
body[data-color-mode="dark"] .theme-card,
body[data-color-mode="dark"] .font-library-card,
body[data-color-mode="dark"] .builder-motion-preview-card,
body[data-color-mode="dark"] .style-box,
body[data-color-mode="dark"] .course-list-empty,
body[data-color-mode="dark"] .toolbar-publish-card,
body[data-color-mode="dark"] .doc-preview-disclosure,
body[data-color-mode="dark"] .sidebar-tools-region .toolbar-overflow-panel,
body[data-color-mode="dark"] .maven-why,
body[data-color-mode="dark"] .next-step-choice-card,
body[data-color-mode="dark"] .inspector-shell {
  background: #17212d;
  border-color: #304154;
  color: var(--text);
}

body[data-color-mode="dark"] .doc-preview-disclosure > summary {
  background: #1c2734;
  border-color: #304154;
  color: var(--text);
}

body[data-color-mode="dark"] .toolbar-overflow-trigger,
body[data-color-mode="dark"] .inspector-group > summary,
body[data-color-mode="dark"] .workspace-diagnostics summary {
  background: #1c2734;
  border-color: #304154;
  color: var(--text);
}

body[data-color-mode="dark"] .toolbar-overflow[open] .toolbar-overflow-trigger {
  background: #233244;
}

body[data-color-mode="dark"] .publish-head h2,
body[data-color-mode="dark"] .preview-head h2 {
  color: #edf4fc;
}

body[data-color-mode="dark"] .preview-title-row-shell {
  background:
    linear-gradient(180deg, rgba(26, 40, 56, 0.92), rgba(20, 31, 44, 0.98)),
    radial-gradient(circle at top, rgba(132, 172, 219, 0.16), transparent 58%);
  border-color: rgba(95, 128, 167, 0.56);
  box-shadow:
    0 16px 32px rgba(3, 9, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-color-mode="dark"] .preview-title-row-shell::before {
  background: linear-gradient(90deg, #5f8bc4, #b7d1f3 52%, #5f8bc4);
  opacity: 0.92;
}

body[data-color-mode="dark"] .preview-title-row-shell > h2 {
  color: #f4f8fd;
  text-shadow: 0 2px 14px rgba(6, 12, 20, 0.3);
}

body[data-color-mode="dark"] .preview-title-row-shell > h2::after {
  background: linear-gradient(90deg, rgba(116, 160, 213, 0.06), rgba(182, 210, 244, 0.98), rgba(116, 160, 213, 0.06));
}

body[data-color-mode="dark"] .publish-modal-title {
  color: #edf4fc;
}

body[data-color-mode="dark"] .publish-course-context {
  color: #b7c7d9;
}

body[data-color-mode="dark"] .publish-modal-footer-actions {
  border-top-color: #314356;
}

body[data-color-mode="dark"] .publish-target-btn-tooltip::after {
  border-color: #31465d;
  background: rgba(15, 27, 40, 0.97);
  box-shadow: 0 14px 28px rgba(3, 9, 16, 0.34);
  color: #dce8f6;
}

body[data-color-mode="dark"] .doc-lesson,
body[data-color-mode="dark"] .doc-block,
body[data-color-mode="dark"] .document-shell,
body[data-color-mode="dark"] .lesson-rail,
body[data-color-mode="dark"] .inspector-shell,
body[data-color-mode="dark"] .toolbar,
body[data-color-mode="dark"] .lessons-wrap {
  box-shadow: none;
}

body[data-color-mode="dark"] .font-library-sample,
body[data-color-mode="dark"] .builder-motion-preview-card,
body[data-color-mode="dark"] .live-preview {
  background: linear-gradient(180deg, #1a2431, #141d28);
  border-color: #35506d;
  color: var(--text);
}

body[data-color-mode="dark"] .doc-block.is-expanded:not(.selected) {
  border-color: #466281;
  box-shadow: 0 0 0 1px rgba(88, 146, 201, 0.18);
}

body[data-color-mode="dark"] .doc-block.is-expanded:not(.selected) .doc-block-head {
  background: rgba(37, 53, 70, 0.88);
}

body[data-color-mode="dark"] .doc-block.is-expanded:not(.selected) .block-type {
  color: #c9ddf4;
}

body[data-color-mode="dark"] .toolbar,
body[data-color-mode="dark"] .lessons-wrap,
body[data-color-mode="dark"] .lesson-card,
body[data-color-mode="dark"] .block,
body[data-color-mode="dark"] .preview-wrap {
  background: var(--panel);
}

body[data-color-mode="dark"] .doc-inline-editor,
body[data-color-mode="dark"] .doc-lesson-settings-body,
body[data-color-mode="dark"] .rte,
body[data-color-mode="dark"] .editor-section-card,
body[data-color-mode="dark"] .structured-advanced-details,
body[data-color-mode="dark"] .custom-code-frame {
  border-color: #35506d;
}

body[data-color-mode="dark"] .doc-inline-editor,
body[data-color-mode="dark"] .doc-direct-editor,
body[data-color-mode="dark"] .rte-editor,
body[data-color-mode="dark"] .custom-code-frame,
body[data-color-mode="dark"] .editor-section-body {
  background: #101923;
  color: #edf3fb;
}

body[data-color-mode="dark"] .rte,
body[data-color-mode="dark"] .editor-section-card,
body[data-color-mode="dark"] .structured-advanced-details {
  background: #16212c;
  color: #edf3fb;
}

body[data-color-mode="dark"] .rte-toolbar,
body[data-color-mode="dark"] .editor-section-head,
body[data-color-mode="dark"] .structured-advanced-details > summary {
  background: #1b2734;
  border-color: #304154;
  color: #edf3fb;
}

body[data-color-mode="dark"] .editor-section-head strong,
body[data-color-mode="dark"] .structured-advanced-details > summary,
body[data-color-mode="dark"] .rte-editor,
body[data-color-mode="dark"] .doc-direct-editor {
  color: #edf3fb;
}

body[data-color-mode="dark"] .editor-section-kicker,
body[data-color-mode="dark"] .editor-section-disclosure > .editor-section-head::before,
body[data-color-mode="dark"] .structured-advanced-details > summary::before {
  color: #9fb6cd;
}

body[data-color-mode="dark"] .lesson-list-item.active,
body[data-color-mode="dark"] .course-item.active,
body[data-color-mode="dark"] .doc-recent-chip:hover {
  background: rgba(94, 160, 255, 0.18);
}

body[data-color-mode="dark"] .course-item.is-selected {
  border-color: #5b86b6;
  box-shadow: 0 0 0 1px rgba(94, 160, 255, 0.18);
}

body[data-color-mode="dark"] .lesson-list-item,
body[data-color-mode="dark"] .doc-insert-btn,
body[data-color-mode="dark"] .doc-recent-chip,
body[data-color-mode="dark"] .save-indicator {
  background: #1a2633;
  border-color: #40556d;
  color: #dcecff;
}

body[data-color-mode="dark"] .doc-quick-bar {
  background: rgba(23, 33, 45, 0.97);
  border-color: #35506d;
}

body[data-color-mode="dark"] .build-start-card {
  background: linear-gradient(180deg, #1a2633 0%, #17212d 100%);
}

body[data-color-mode="dark"] .entitlement-banner,
body[data-color-mode="dark"] .admin-entitlement-panel {
  background: linear-gradient(180deg, rgba(91, 44, 30, 0.92), rgba(53, 28, 19, 0.95));
  border-color: rgba(230, 177, 121, 0.35);
  color: #fff3e5;
}

body[data-color-mode="dark"] .entitlement-banner .field-hint,
body[data-color-mode="dark"] .admin-entitlement-panel .field-hint {
  color: #f0d8c4;
}

body[data-color-mode="dark"] .build-start-card > summary,
body[data-color-mode="dark"] .doc-lesson-editor-bar,
body[data-color-mode="dark"] .maven-why,
body[data-color-mode="dark"] .next-step-choice-card {
  background: #1a2633;
  border-color: #304154;
  color: var(--text);
}

body[data-color-mode="dark"] .course-item:hover,
body[data-color-mode="dark"] .lesson-list-item:hover,
body[data-color-mode="dark"] .doc-insert-btn:hover,
body[data-color-mode="dark"] .next-step-choice-card:hover {
  background: #223142;
}

body[data-color-mode="dark"] .course-item.is-selected:hover {
  background: #25384b;
}

body[data-color-mode="dark"] .course-item-select {
  border-color: #4e6781;
  background: rgba(23, 33, 45, 0.96);
  box-shadow: none;
  color: #bdd8f5;
}

body[data-color-mode="dark"] .course-item-select:hover,
body[data-color-mode="dark"] .course-item-select:focus-visible {
  border-color: #79aef0;
  background: #203246;
  color: #e1efff;
}

body[data-color-mode="dark"] .course-item-select.is-selected {
  border-color: #79aef0;
  background: #5ea0ff;
  color: #08131e;
}

body[data-color-mode="dark"] .course-item-select.is-selected:hover,
body[data-color-mode="dark"] .course-item-select.is-selected:focus-visible {
  background: #7fb4ff;
  color: #08131e;
}

body[data-color-mode="dark"] .font-library-tag,
body[data-color-mode="dark"] .font-library-status,
body[data-color-mode="dark"] .preview-pill {
  background: #213246;
  border-color: #39526d;
  color: #dbe9f8;
}

body[data-color-mode="dark"] input,
body[data-color-mode="dark"] textarea,
body[data-color-mode="dark"] select {
  background: #0f1720;
  border-color: #41556d;
  color: var(--text);
}

body[data-color-mode="dark"] input::placeholder,
body[data-color-mode="dark"] textarea::placeholder {
  color: #7f95ad;
}

body[data-color-mode="dark"] .toolbar label {
  color: #dbe9f8;
}

body[data-color-mode="dark"] #course-title {
  background: #12202d;
  border-color: #4d647e;
  color: #f4f8ff;
  font-weight: 600;
}

body[data-color-mode="dark"] #course-title::placeholder {
  color: #9fb2c8;
}

body[data-color-mode="dark"] button.secondary {
  border-color: #4d647e;
  background: #1a2633;
  color: #eaf2fb;
}

body[data-color-mode="dark"] button.secondary:hover {
  background: #233244;
  border-color: #5a7290;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body[data-color-mode="dark"] .workspace-tabs .tab-btn {
  border-color: #4d647e;
  background: #1a2633;
  color: #eaf2fb;
}

body[data-color-mode="dark"] .workspace-tabs .tab-btn:hover {
  background: #233244;
  border-color: #5a7290;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body[data-color-mode="dark"] .workspace-tabs .tab-btn.active {
  border-color: #5ea0ff;
  background: #182637;
  color: #edf3fb;
}

body[data-color-mode="dark"] .workspace-tabs-left .tab-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

body[data-color-mode="dark"] button.danger {
  background: #311b1a;
  color: #ffd8d4;
}

body[data-color-mode="dark"] a,
body[data-color-mode="dark"] .field-label,
body[data-color-mode="dark"] .doc-preview-disclosure > summary::after,
body[data-color-mode="dark"] .build-start-card > summary::after,
body[data-color-mode="dark"] .font-library-name,
body[data-color-mode="dark"] .doc-block-head-main .block-type,
body[data-color-mode="dark"] .doc-block-preview-text,
body[data-color-mode="dark"] .doc-block-status-chip,
body[data-color-mode="dark"] .toolbar-publish-card strong {
  color: #dfeeff;
}

body[data-color-mode="dark"] .doc-block-status-chip {
  background: rgba(34, 49, 67, 0.96);
  border-color: rgba(86, 112, 141, 0.34);
}

body[data-color-mode="dark"] .doc-block-status-chip.is-info {
  background: rgba(25, 63, 92, 0.92);
  border-color: rgba(87, 154, 214, 0.34);
  color: #cce9ff;
}

body[data-color-mode="dark"] .doc-block-status-chip.is-warning {
  background: rgba(75, 51, 17, 0.94);
  border-color: rgba(194, 148, 63, 0.35);
  color: #ffe0a9;
}

body[data-color-mode="dark"] .doc-block-status-chip.is-accent {
  background: rgba(42, 49, 93, 0.94);
  border-color: rgba(110, 128, 223, 0.34);
  color: #dde2ff;
}

body[data-color-mode="dark"] .doc-block-status-chip.is-muted {
  background: rgba(42, 53, 66, 0.94);
  border-color: rgba(100, 118, 138, 0.32);
  color: #cdd7e1;
}

body[data-color-mode="dark"] .field-hint,
body[data-color-mode="dark"] .course-item-date,
body[data-color-mode="dark"] .history-chip time,
body[data-color-mode="dark"] .history-chip-detail,
body[data-color-mode="dark"] .next-step-choice-card span,
body[data-color-mode="dark"] .font-library-family,
body[data-color-mode="dark"] .font-library-note,
body[data-color-mode="dark"] .course-item-title {
  color: var(--muted);
}

body[data-color-mode="dark"] .build-disclosure,
body[data-color-mode="dark"] .build-flow-card,
body[data-color-mode="dark"] .build-flow-overview,
body[data-color-mode="dark"] .build-flow-step,
body[data-color-mode="dark"] .welcome-setup-card,
body[data-color-mode="dark"] .welcome-setup-summary,
body[data-color-mode="dark"] .welcome-setup-summary-section,
body[data-color-mode="dark"] .feedback-modal-panel,
body[data-color-mode="dark"] .feedback-log-item,
body[data-color-mode="dark"] .feedback-case-item,
body[data-color-mode="dark"] .review-inbox-item,
body[data-color-mode="dark"] .maven-faq-item,
body[data-color-mode="dark"] .review-inbox-warning {
  background: #17212d;
  border-color: #304154;
  color: #edf3fb;
}

body[data-color-mode="dark"] .build-disclosure > summary {
  background: #1c2734;
  color: #edf3fb;
}

body[data-color-mode="dark"] .build-disclosure > summary strong,
body[data-color-mode="dark"] .build-flow-overview-title,
body[data-color-mode="dark"] .build-flow-step strong,
body[data-color-mode="dark"] .welcome-setup-card strong,
body[data-color-mode="dark"] .welcome-setup-summary strong,
body[data-color-mode="dark"] .welcome-setup-summary-section strong,
body[data-color-mode="dark"] .review-inbox-head strong {
  color: #edf3fb;
}

body[data-color-mode="dark"] .build-flow-overview-message,
body[data-color-mode="dark"] .feedback-log-body,
body[data-color-mode="dark"] .feedback-log-detail,
body[data-color-mode="dark"] .maven-faq-answer,
body[data-color-mode="dark"] .review-inbox-body,
body[data-color-mode="dark"] .review-inbox-byline,
body[data-color-mode="dark"] .review-inbox-detail {
  color: #c9d7e7;
}

body[data-color-mode="dark"] .feedback-log-view-tabs .active {
  background: #5ea0ff;
  border-color: #5ea0ff;
  color: #07101b;
}

body[data-color-mode="dark"] .build-flow-overview-kicker {
  background: rgba(94, 160, 255, 0.18);
  color: #a9ccff;
}

body[data-color-mode="dark"] .build-flow-step.is-complete {
  background: #1f372e;
  border-color: #3f6b56;
}

body[data-color-mode="dark"] .build-flow-step.is-current {
  background: #1b2f47;
  border-color: #5d84b2;
  box-shadow: 0 0 0 2px rgba(94, 160, 255, 0.18);
}

body[data-color-mode="dark"] .welcome-setup-upload-field input[type="file"] {
  background: #101923;
  border-color: #35506d;
  color: #edf3fb;
}

body[data-color-mode="dark"] .feedback-log-detail {
  border-top-color: #40556d;
}

body[data-color-mode="dark"] .review-inbox-item.is-version-warning {
  background: #2a2419;
  border-color: #8a6b34;
}

body[data-color-mode="dark"] .review-inbox-pill {
  border-color: #40556d;
  background: #213246;
  color: #dcecff;
}

body[data-color-mode="dark"] .review-inbox-pill.is-warning {
  border-color: #8a6b34;
  background: #3a2c16;
  color: #ffd78d;
}

body[data-color-mode="dark"] .doc-direct-editor:focus {
  background: #101a24;
}

body[data-color-mode="dark"] .doc-block-preview,
body[data-color-mode="dark"] .live-preview,
body[data-color-mode="dark"] .preview-wrap {
  --preview-page-bg: #111a24;
  --preview-surface-bg: #17212d;
  --preview-text: #edf3fb;
  --preview-muted: #9fb3c9;
  --preview-border: #304154;
  --preview-accent: #69a9ff;
  --preview-token-gallery-card-bg: #17212d;
  --preview-token-table-header-bg: #1c2734;
  --preview-token-table-stripe-bg: #14202b;
  --preview-token-statement-accent-bg: #13263a;
  --preview-token-statement-subtle-bg: #16212c;
  --preview-token-statement-success-bg: #13261f;
  --preview-token-statement-warning-bg: #2b2115;
  --preview-token-statement-contrast-bg: #0f2740;
  --media-frame-bg: #17212d;
  --table-header-bg: #1c2734;
  --table-body-bg: #17212d;
  --table-body-text: #edf3fb;
  color: #edf3fb;
}

body[data-color-mode="dark"] .preview-wrap,
body[data-color-mode="dark"] .live-preview,
body[data-color-mode="dark"] .button-preview {
  background: #101923;
  border-color: #304154;
  color: #edf3fb;
}

body[data-color-mode="dark"] .doc-preview-disclosure-body,
body[data-color-mode="dark"] .doc-block-preview,
body[data-color-mode="dark"] .preview-stage,
body[data-color-mode="dark"] .preview-header,
body[data-color-mode="dark"] .preview-lesson,
body[data-color-mode="dark"] .preview-media-frame,
body[data-color-mode="dark"] .preview-callout {
  color: #edf3fb;
}

body[data-color-mode="dark"] .preview-pill,
body[data-color-mode="dark"] .preview-score-row .preview-pill {
  background: #1a2633;
  border-color: #39526d;
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-sidebar,
body[data-color-mode="dark"] .preview-lesson-nav-btn,
body[data-color-mode="dark"] .preview-sidebar-nav-btn {
  background: #17222f;
  border-color: #35506b;
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-lesson-nav-btn:hover,
body[data-color-mode="dark"] .preview-lesson-nav-btn:focus-visible,
body[data-color-mode="dark"] .preview-sidebar-nav-btn:hover,
body[data-color-mode="dark"] .preview-sidebar-nav-btn:focus-visible {
  background: #203041;
  border-color: #4d7094;
}

body[data-color-mode="dark"] .preview-sidebar-nav-move-btn,
body[data-color-mode="dark"] .preview-lesson-direct-edit {
  background: #17222f;
  border-color: #35506b;
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-sidebar-nav-move-btn:hover,
body[data-color-mode="dark"] .preview-sidebar-nav-move-btn:focus-visible,
body[data-color-mode="dark"] .preview-lesson-direct-edit:focus {
  background: #203041;
  border-color: #4d7094;
  color: #b8dbff;
}

body[data-color-mode="dark"] .preview-sidebar-actions .preview-lesson-action:hover,
body[data-color-mode="dark"] .preview-sidebar-actions .preview-lesson-action:focus-visible {
  background: #233244;
  border-color: #5a7290;
  color: #eaf2fb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body[data-color-mode="dark"] .preview-sidebar-actions .preview-lesson-action:disabled {
  opacity: 0.6;
  color: #9bb0c6;
}

body[data-color-mode="dark"] .preview-lesson-nav-btn.is-active,
body[data-color-mode="dark"] .preview-sidebar-nav-btn.is-active {
  background: rgba(111, 177, 244, 0.18);
  border-color: #6fb1f4;
  color: #b8dbff;
  box-shadow: 0 0 0 1px rgba(111, 177, 244, 0.12);
}

body[data-color-mode="dark"] .preview-lesson-options-mode-btn.is-active,
body[data-color-mode="dark"] .preview-lesson-options-mode-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(111, 177, 244, 0.28) 0%, rgba(111, 177, 244, 0.2) 100%);
  border-color: #6fb1f4;
  color: #e6f3ff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(111, 177, 244, 0.16), 0 0 0 2px rgba(111, 177, 244, 0.16), 0 8px 16px rgba(0, 0, 0, 0.24);
}

body[data-color-mode="dark"] .preview-lesson-options-mode-btn.is-active:hover,
body[data-color-mode="dark"] .preview-lesson-options-mode-btn.is-active:focus-visible,
body[data-color-mode="dark"] .preview-lesson-options-mode-btn[aria-pressed="true"]:hover,
body[data-color-mode="dark"] .preview-lesson-options-mode-btn[aria-pressed="true"]:focus-visible {
  background: linear-gradient(180deg, rgba(111, 177, 244, 0.34) 0%, rgba(111, 177, 244, 0.24) 100%);
  border-color: #8bc2f8;
  color: #f2f8ff;
}

body[data-color-mode="dark"] .preview-lesson-options-mode-btn:disabled {
  opacity: 0.56;
  border-color: #4b6077;
  background: linear-gradient(180deg, #253445 0%, #1b2735 100%);
  color: #8ea4bb;
  box-shadow: none;
}

body[data-color-mode="dark"] .preview-lesson-options-theme-branch {
  border-left-color: rgba(111, 177, 244, 0.42);
  background: linear-gradient(180deg, rgba(111, 177, 244, 0.12) 0%, rgba(111, 177, 244, 0.04) 100%);
}

body[data-color-mode="dark"] .preview-lesson-options-theme-label {
  color: #b8dbff;
}

body[data-color-mode="dark"] .preview-sidebar-duplicate-btn {
  border-color: #a3c2e7;
  background: linear-gradient(180deg, #294059 0%, #1f3349 100%);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(178, 208, 242, 0.16), 0 6px 14px rgba(0, 0, 0, 0.3);
}

body[data-color-mode="dark"] .preview-sidebar-duplicate-btn:hover,
body[data-color-mode="dark"] .preview-sidebar-duplicate-btn:focus-visible {
  border-color: #c0d8f3;
  background: linear-gradient(180deg, #314c6a 0%, #263e58 100%);
  color: #ffffff;
}

body[data-color-mode="dark"] .preview-lesson-nav-btn:disabled,
body[data-color-mode="dark"] .preview-sidebar-nav-btn:disabled {
  background: #1a2633;
  border-color: #40556d;
  color: #dcecff;
  opacity: 0.82;
}

body[data-color-mode="dark"] .preview-lesson-nav-wrap {
  border-top-color: #304154;
}

body[data-color-mode="dark"] .preview-sidebar-label,
body[data-color-mode="dark"] .preview-lesson-nav-label {
  color: #9fb3c9;
}

body[data-color-mode="dark"] .preview-header p,
body[data-color-mode="dark"] .preview-header-description,
body[data-color-mode="dark"] .preview-caption,
body[data-color-mode="dark"] .preview-note {
  color: #9fb3c9;
}

body[data-color-mode="dark"] .preview-header-tool {
  border-color: #4d647e;
  background: #1a2633;
  color: #eaf2fb;
}

body[data-color-mode="dark"] .preview-header-tool:hover,
body[data-color-mode="dark"] .preview-header-tool:focus-visible,
body[data-color-mode="dark"] .preview-header-quick[open] > summary.preview-header-tool {
  background: #233244;
  border-color: #5a7290;
  color: #eaf2fb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body[data-color-mode="dark"] .preview-header-quick .preview-menu-panel {
  border-color: #35506b;
  background: #17222f;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.36);
}

body[data-color-mode="dark"] .preview-header-quick-panel-title {
  color: #eef5ff;
}

body[data-color-mode="dark"] .preview-header-quick-panel-hint {
  color: #adc2d8;
}

body[data-color-mode="dark"] .preview-title-master-menu[open] > summary.media-workspace-action {
  background: #233244;
  border-color: #5a7290;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body[data-color-mode="dark"] .preview-header-quick-field,
body[data-color-mode="dark"] .preview-header-quick-checkbox {
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-header-quick-shell-field {
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-course-title-quick-field {
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-course-title-quick-field input,
body[data-color-mode="dark"] .preview-course-title-quick-field textarea {
  border-color: #35506b;
  background: #17222f;
  color: #e7f0fa;
}

body[data-color-mode="dark"] .preview-header-quick .preview-menu-section-label {
  color: #a9bfd6;
}

body[data-color-mode="dark"] .preview-header-quick .preview-menu-section-hint {
  color: #b2c6dc;
}

body[data-color-mode="dark"] .preview-header-quick-field input[type="color"] {
  border-color: #35506b;
  background: #17222f;
}

body[data-color-mode="dark"] .preview-header-quick-primary-color-field {
  border-color: #35506b;
  background: rgba(24, 36, 50, 0.96);
}

body[data-color-mode="dark"] .preview-header-quick-field input[type="number"],
body[data-color-mode="dark"] .preview-header-quick-field select {
  border-color: #35506b;
  background: #17222f;
  color: #e7f0fa;
}

body[data-color-mode="dark"] .preview-header-quick-shell-field input,
body[data-color-mode="dark"] .preview-header-quick-shell-field select,
body[data-color-mode="dark"] .preview-header-quick-shell-field textarea {
  border-color: #35506b;
  background: #17222f;
  color: #e7f0fa;
}

body[data-color-mode="dark"] .preview-header-quick-ai {
  border-color: #35506b;
  background: rgba(20, 31, 45, 0.88);
}

body[data-color-mode="dark"] .preview-header-quick-ai-chip {
  border-color: #3e5976;
  background: #1a2734;
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-header-quick-ai-chip:hover,
body[data-color-mode="dark"] .preview-header-quick-ai-chip:focus-visible,
body[data-color-mode="dark"] .preview-header-quick-ai-chip.is-active {
  border-color: #6ea7dd;
  background: #25384d;
}

body[data-color-mode="dark"] .preview-header-quick-ai-swatch {
  border-color: rgba(185, 208, 235, 0.32);
}

body[data-color-mode="dark"] .preview-header-quick-preview {
  border-color: #35506b;
  background: rgba(20, 31, 45, 0.88);
}

body[data-color-mode="dark"] .preview-header-quick-preview-title,
body[data-color-mode="dark"] .preview-header-quick-preview-legend-label {
  color: #b5c9df;
}

body[data-color-mode="dark"] .preview-header-quick-preview-hint {
  color: #9fb7d1;
}

body[data-color-mode="dark"] .preview-header-quick-preview-muted {
  color: #9fb7d1;
}

body[data-color-mode="dark"] .preview-header-quick-preview-stage,
body[data-color-mode="dark"] .preview-header-quick-preview-surface,
body[data-color-mode="dark"] .preview-header-quick-preview-lesson,
body[data-color-mode="dark"] .preview-header-quick-preview-builder,
body[data-color-mode="dark"] .preview-header-quick-preview-inner-card,
body[data-color-mode="dark"] .preview-header-quick-preview-button {
  border-color: #35506b;
}

body[data-color-mode="dark"] .preview-header-quick-preview-legend-swatch {
  border-color: rgba(191, 212, 236, 0.38);
}

body[data-color-mode="dark"] .preview-header-quick-preview-label {
  border-color: rgba(191, 212, 236, 0.38);
  color: #d9e8f8;
  background: rgba(21, 34, 47, 0.84);
  box-shadow: 0 6px 14px rgba(5, 10, 18, 0.3);
}

body[data-color-mode="dark"] .preview-header-quick-contrast-item {
  border-color: #3b5876;
  background: rgba(25, 39, 55, 0.94);
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-header-quick-contrast {
  border-color: #3b5876;
  background: rgba(20, 31, 44, 0.94);
}

body[data-color-mode="dark"] .preview-header-quick-contrast-summary-label {
  color: #edf5ff;
}

body[data-color-mode="dark"] .preview-header-quick-contrast-summary-status {
  border-color: #3b5876;
  background: rgba(25, 39, 55, 0.94);
  color: #dbe9f8;
}

body[data-color-mode="dark"] .preview-header-quick-contrast-item strong {
  color: #edf5ff;
}

body[data-color-mode="dark"] .preview-header-quick-contrast-item.is-pass {
  border-color: #5ea07d;
  background: rgba(21, 53, 37, 0.88);
}

body[data-color-mode="dark"] .preview-header-quick-contrast-item.is-fail {
  border-color: #b36e6e;
  background: rgba(66, 32, 32, 0.88);
}

body[data-color-mode="dark"] .toolbar-overflow-trigger::after,
body[data-color-mode="dark"] .workspace-diagnostics summary::after,
body[data-color-mode="dark"] .inspector-group > summary::after {
  color: #a8bdd3;
}

body[data-color-mode="dark"] .lessons-head h2,
body[data-color-mode="dark"] .interaction-review-stat strong,
body[data-color-mode="dark"] .interaction-review-list-head strong,
body[data-color-mode="dark"] .interaction-review-empty strong,
body[data-color-mode="dark"] .item-card strong {
  color: #edf3fb;
}

body[data-color-mode="dark"] .item-card,
body[data-color-mode="dark"] .interaction-review-stat,
body[data-color-mode="dark"] .interaction-review-signal,
body[data-color-mode="dark"] .interaction-review-empty {
  background: #17212d;
  border-color: #304154;
}

body[data-color-mode="dark"] .interaction-review-signal {
  color: #dbe9f8;
}

body[data-color-mode="dark"] .interaction-review-signal.tone-warn {
  background: #2a2419;
  border-color: #725c2d;
  color: #f3e3bb;
}

body[data-color-mode="dark"] .interaction-review-signal.tone-good {
  background: #18271d;
  border-color: #3f6a4c;
  color: #d3efd9;
}

body[data-color-mode="dark"] .interaction-review-chip {
  background: #1d2a39;
  border-color: #3b5168;
  color: #e3eefb;
}

body[data-color-mode="dark"] .interaction-review-chip.is-missing {
  background: #2b1f1c;
  border-color: #7d5347;
  color: #f2d2ca;
}

.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
  align-items: start;
  transition: grid-template-columns 180ms ease;
}

.layout.sidebar-fully-collapsed {
  grid-template-columns: 52px 1fr;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #eef3fa;
  padding: 1rem 1rem 1rem 1.3rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 0;
}

.sidebar-collapse-strip {
  display: none;
}

.sidebar-collapse-strip:hover {
  background: transparent;
}

.sidebar-collapse-strip button,
.lessons-collapse-toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  min-width: 1.7rem;
  width: 1.7rem;
  min-height: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  padding: 0;
  border: 1px solid rgba(92, 117, 145, 0.24);
  background: rgba(255, 255, 255, 0.7);
  color: #264868;
  border-radius: 8px;
  box-shadow: none;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px Arial, sans-serif;
  cursor: pointer;
}

.sidebar-collapse-strip button {
  display: none;
}

.sidebar-collapse-strip button:hover,
.sidebar-collapse-strip button:focus-visible,
.lessons-collapse-toggle-btn:hover,
.lessons-collapse-toggle-btn:focus-visible {
  border-color: rgba(92, 117, 145, 0.34);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.sidebar-collapse-ribbon {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}

.sidebar-collapse-ribbon span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #476685;
}

.sidebar-tools-region {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding-top: 1.8rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.sidebar-section-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

.sidebar-section-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-color: #d7e3f0;
  border-radius: 10px;
  background: #f8fbff;
  color: #2d4864;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(18, 42, 68, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-section-switch-btn:hover,
.sidebar-section-switch-btn:focus-visible {
  border-color: #b9cddd;
  background: #ffffff;
}

.sidebar-section-switch-btn.is-active,
.sidebar-section-switch-btn[aria-pressed="true"] {
  border-color: #2f6db4;
  background: linear-gradient(180deg, #ffffff 0%, #e7f0ff 100%);
  color: #163f67;
  box-shadow: inset 0 0 0 1px rgba(47, 109, 180, 0.18), 0 10px 18px rgba(18, 42, 68, 0.1);
  transform: translateY(-1px);
}

.sidebar-section-switch-btn.is-active:hover,
.sidebar-section-switch-btn.is-active:focus-visible,
.sidebar-section-switch-btn[aria-pressed="true"]:hover,
.sidebar-section-switch-btn[aria-pressed="true"]:focus-visible {
  border-color: #265d98;
  background: linear-gradient(180deg, #ffffff 0%, #dfeeff 100%);
  color: #143756;
  box-shadow: inset 0 0 0 1px rgba(38, 93, 152, 0.22), 0 12px 22px rgba(18, 42, 68, 0.14);
}

.sidebar-courses-region {
  border-top: 1px solid #d7e3f0;
  padding-top: 0.65rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.5rem;
  align-content: start;
  background: #eef3fa;
  min-height: 0;
}

.sidebar:not(.courses-panel-collapsed) {
  grid-template-rows: auto minmax(0, 1fr);
}

.sidebar:not(.courses-panel-collapsed) .sidebar-tools-region {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.sidebar:not(.courses-panel-collapsed) .sidebar-courses-region {
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
}

.sidebar:not(.courses-panel-collapsed) .course-list {
  max-height: none;
  min-height: 0;
  height: 100%;
}

.sidebar:not(.courses-panel-collapsed) .toolbar-history {
  display: none;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.sidebar-head-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.sidebar-search-btn {
  min-width: 0;
}

.sidebar-section-collapse-btn {
  min-width: 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.toolbar-history-title-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.toolbar-history-panel-toggle {
  min-width: 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.sidebar h1,
.toolbar-history-title strong,
.toolbar-history-workspace-title strong {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.course-sort-wrap {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.85rem;
  color: #35506c;
}

.course-sort-wrap select {
  width: 100%;
}

.course-actions {
  display: flex;
  gap: 0.35rem;
  margin: 0.35rem 0 0.2rem;
}

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

.course-action-feedback {
  min-height: 1.1rem;
  margin-bottom: 0.2rem;
}

.course-action-feedback.is-success {
  color: #2d6b47;
}

.course-action-feedback.is-error {
  color: #9c2d1f;
}

.workspace-course-actions {
  margin: 0.1rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.32rem;
}

.workspace-course-actions button {
  width: 100%;
  white-space: nowrap;
  padding: 0.42rem 0.48rem;
  line-height: 1.15;
}

.course-list {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  max-height: 14rem;
  overflow: auto;
}

.course-item {
  position: relative;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.7rem 2rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.course-item.active {
  border-color: var(--brand);
  background: rgba(31, 93, 156, 0.08);
}

.course-item.is-selected {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 1px rgba(31, 93, 156, 0.12);
}

.course-item:hover {
  background: #f7fbff;
}

.course-item.is-selected:hover {
  background: #f2f8ff;
}

.course-item.active:hover {
  background: rgba(31, 93, 156, 0.12);
}

.course-item-select {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #7f97b2;
  background: rgba(255, 255, 255, 0.98);
  color: #2a4e72;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.course-item-select::before {
  content: "";
  width: 0.46rem;
  height: 0.46rem;
  border: 1.35px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
  opacity: 0.92;
}

.course-item-select:hover,
.course-item-select:focus-visible {
  border-color: var(--brand);
  background: #f4f9ff;
  color: var(--brand);
  outline: none;
  transform: scale(1.06);
}

.course-item-select.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.course-item-select.is-selected::before {
  content: "✓";
  width: auto;
  height: auto;
  border: 0;
  font-size: 0.62rem;
  line-height: 1;
}

.course-item-select.is-selected:hover,
.course-item-select.is-selected:focus-visible {
  background: color-mix(in srgb, var(--brand) 88%, black);
  color: #ffffff;
}

.course-item-title {
  display: block;
  min-width: 0;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.course-item-date {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.course-list-empty {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px dashed #c2d2e5;
  border-radius: 10px;
  background: #f8fbff;
}

.main {
  padding: 1rem;
}

body[data-active-tab="preview"] .main {
  height: 100vh;
  overflow: hidden;
}

body[data-active-tab="publish"] .main {
  height: 100vh;
  overflow: hidden;
}

.global-display-controls {
  position: sticky;
  top: 0.85rem;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.55rem;
  pointer-events: none;
}

.global-display-controls > * {
  pointer-events: auto;
}

body[data-active-tab="preview"] .global-display-controls {
  display: none;
}

.brand-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(220px, 0.75fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.34rem 0.92rem 0.18rem;
  border: 1px solid rgba(16, 50, 82, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(229, 180, 92, 0.34), transparent 34%),
    radial-gradient(circle at bottom left, rgba(35, 130, 152, 0.24), transparent 36%),
    linear-gradient(135deg, #1e6981 0%, #143a5c 48%, #0f2640 100%);
  box-shadow: 0 22px 44px rgba(10, 33, 56, 0.14);
}

.startup-hero-overlay {
  position: fixed;
  inset: 1rem 1rem auto 1rem;
  z-index: 60;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    visibility 0.42s ease,
    inset 0.52s ease,
    width 0.52s ease,
    min-height 0.52s ease,
    padding 0.52s ease,
    border-radius 0.52s ease,
    box-shadow 0.52s ease,
    background 0.52s ease;
}

.startup-hero-overlay.startup-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.startup-hero-overlay.startup-minimized {
  inset: 1rem auto auto 1rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  min-width: 0;
  min-height: 0;
  padding: 0.06rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, max-content);
  gap: 0;
  margin-bottom: 0;
}

.layout.sidebar-fully-collapsed .startup-hero-overlay.startup-minimized {
  inset: 1rem auto auto 3.35rem;
  max-width: calc(100vw - 4.35rem);
}

.startup-hero-overlay .brand-hero-copy,
.startup-hero-overlay .brand-hero-mark,
.startup-hero-overlay .brand-hero-image,
.startup-hero-overlay .brand-hero-kicker,
.startup-hero-overlay h1,
.startup-hero-overlay .brand-hero-points {
  transition:
    opacity 0.42s ease,
    transform 0.52s ease,
    max-width 0.52s ease,
    width 0.52s ease,
    height 0.52s ease;
}

.startup-hero-overlay.startup-minimized::before {
  display: none;
}

.startup-hero-overlay.startup-minimized .brand-hero-mark {
  opacity: 0;
  width: 0;
  max-width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-0.35rem);
}

.startup-hero-overlay.startup-minimized .brand-hero-image {
  width: 0;
  height: 0;
  opacity: 0;
}

.startup-hero-overlay.startup-minimized h1,
.startup-hero-overlay.startup-minimized .brand-hero-points {
  opacity: 0;
  max-width: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
}

.startup-hero-overlay.startup-minimized .brand-hero-copy {
  opacity: 1;
  max-width: none;
  transform: none;
}

.startup-hero-overlay.startup-minimized .brand-hero-kicker {
  opacity: 1;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  transform: none;
  background: rgba(12, 34, 58, 0.72);
  box-shadow: 0 10px 20px rgba(8, 24, 42, 0.14);
}

.brand-hero-actions {
  position: absolute;
  top: 0.44rem;
  right: 0.72rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.brand-hero-toggle {
  min-width: 1.46rem;
  min-height: 1.46rem;
  padding: 0.1rem 0.28rem;
  font-size: 0.6rem;
  line-height: 1;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #edf5fc;
}

.brand-hero-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

.brand-hero::before {
  content: "";
  position: absolute;
  inset: auto auto -80px -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  filter: blur(2px);
}

.brand-hero-copy,
.brand-hero-mark {
  position: relative;
  z-index: 1;
}

.brand-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.12);
  color: #dceafb;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-hero-kicker::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1cb86 0%, #e5b45c 100%);
  box-shadow: 0 0 0 6px rgba(229, 180, 92, 0.12);
}

.brand-hero h1 {
  max-width: 52ch;
  margin: 0.16rem 0 0;
  color: #f6fbff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(1.24rem, 2.05vw, 1.78rem);
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.brand-hero-headline-nowrap {
  white-space: nowrap;
}

.brand-hero-tagline {
  max-width: 60ch;
  margin: 0.65rem 0 0;
  color: rgba(233, 242, 250, 0.88);
  font-size: 0.92rem;
  line-height: 1.45;
}

.brand-hero-points {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.42rem;
  margin-top: 0.22rem;
}

.brand-hero-points span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 100%;
  padding: 0.21rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f8fc;
  font-size: 0.64rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.brand-hero-mark {
  display: grid;
  align-content: start;
  align-self: start;
  justify-items: end;
  min-width: 0;
  margin-top: 0;
  transform: translateY(-1.15rem);
  pointer-events: none;
}

.brand-hero-image {
  display: block;
  width: min(100%, 320px);
  max-height: 112px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(8, 24, 54, 0.34));
  pointer-events: none;
}

.brand-mark-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 200px);
  aspect-ratio: 1;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)),
    rgba(12, 33, 54, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(6, 20, 34, 0.24);
  backdrop-filter: blur(8px);
}

.brand-mark-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 18px;
  background: linear-gradient(155deg, #f8eed6 0%, #e2b25b 100%);
  color: var(--brand-ink);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -0.1em;
  line-height: 1;
  text-indent: -0.08em;
  box-shadow: 0 18px 24px rgba(8, 23, 39, 0.18);
}

.brand-mark-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.brand-mark-ring-one {
  width: 76%;
  height: 76%;
}

.brand-mark-ring-two {
  width: 56%;
  height: 56%;
  border-style: dashed;
  border-color: rgba(229, 180, 92, 0.4);
  animation: hero-spin 18s linear infinite;
}

.brand-mark-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brand-mark-orbit-one {
  animation: hero-orbit-one 14s linear infinite;
}

.brand-mark-orbit-two {
  animation: hero-orbit-two 18s linear infinite;
}

.brand-mark-orbit-three {
  animation: hero-orbit-three 22s linear infinite;
}

.brand-mark-node {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #f2cf92;
  box-shadow: 0 0 0 7px rgba(242, 207, 146, 0.12);
  transform: translate(-50%, -50%);
}

.brand-mark-node-two {
  background: #90d5de;
  box-shadow: 0 0 0 7px rgba(144, 213, 222, 0.14);
}

.brand-mark-node-three {
  background: #ffffff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.12);
}

.brand-mark-caption {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  max-width: 15rem;
  color: #e2edf8;
  text-align: center;
}

.brand-mark-caption strong {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-mark-caption span {
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(226, 237, 248, 0.76);
}

.brand-hero.collapsed {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  padding: 0.46rem 1rem 0.28rem;
}

.brand-hero.collapsed::before,
.brand-hero.collapsed .brand-hero-tagline,
.brand-hero.collapsed .brand-hero-points,
 .brand-hero.collapsed .brand-mark-node,
 .brand-hero.collapsed .brand-hero-mark {
  display: none;
}

.brand-hero.collapsed .brand-hero-copy {
  min-width: 0;
  display: block;
}

.brand-hero.collapsed .brand-hero-kicker {
  margin-right: 0;
}

.brand-hero.collapsed h1 {
  display: none;
}

@keyframes hero-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-orbit-one {
  from {
    transform: translate(-50%, -50%) rotate(18deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(378deg);
  }
}

@keyframes hero-orbit-two {
  from {
    transform: translate(-50%, -50%) rotate(154deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-206deg);
  }
}

@keyframes hero-orbit-three {
  from {
    transform: translate(-50%, -50%) rotate(264deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(624deg);
  }
}

@keyframes startup-hero-segment-fade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.workspace-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin: 0;
  flex-wrap: nowrap;
}

.workspace-tabs-hero {
  grid-column: 1 / -1;
  padding-right: 11rem;
  overflow-x: auto;
}

.toolbar-workspace-tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.workspace-tabs-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.workspace-tabs-right {
  justify-content: flex-start;
  align-items: center;
  margin-left: 2rem;
}

.workspace-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-color: #8aa3c0;
  background: #eef4fb;
  color: #173652;
  padding: 0.34rem 0.6rem;
  font-size: 0.79rem;
}

.workspace-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  flex: 0 0 0.95rem;
  font-size: 0.82em;
  line-height: 1;
}

.workspace-tab-label {
  min-width: 0;
  display: block;
  width: 100%;
  text-align: center;
}

.workspace-tabs .tab-btn.active {
  border-color: var(--brand);
  background: #bfd4ee;
  color: #08263f;
}

.workspace-tabs-left .tab-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.hero-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.hero-save-actions {
  order: 2;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.hero-tools-dropdown {
  order: 4;
  margin-left: 0.2rem;
  flex: 0 0 auto;
}

.toolbar-tools-dropdown {
  margin-left: auto;
  flex: 0 0 auto;
  justify-self: end;
}

.workspace-tabs-left {
  order: 1;
}

.workspace-tabs-right {
  order: 3;
}

.tab-panel {
  display: none;
  margin-top: 0.8rem;
}

.tab-panel.active {
  display: block;
}

body[data-active-tab="preview"] #tab-preview.tab-panel.active {
  height: calc(100vh - 2rem);
  margin-top: 0;
  overflow: hidden;
}

body[data-active-tab="publish"] #tab-publish.tab-panel.active {
  height: calc(100vh - 2rem);
  margin-top: 0;
  overflow: hidden;
}

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mode-toggle-label {
  display: inline-flex;
  align-items: center;
}

.mode-toggle-label-stacked {
  display: inline-grid;
  grid-auto-flow: row;
  gap: 0.02rem;
  line-height: 1.05;
}

.toolbar,
.lessons-wrap,
.lesson-card,
.block {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
}

.toolbar {
  padding: 1rem;
  position: relative;
}

.toolbar.collapsed {
  display: none;
}

body[data-active-tab="preview"] #entitlement-banner,
body[data-active-tab="preview"] .main > .toolbar {
  display: none !important;
}

.toolbar-color-mode-toggle {
  min-width: 0;
  align-self: center;
  padding: 0.3rem 0.45rem;
  font-size: 0.82rem;
  justify-content: center;
  flex: 0 0 auto;
}

.global-color-mode-toggle {
  min-width: 2rem;
  min-height: 2rem;
  border-color: rgba(23, 50, 77, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: #17324d;
  box-shadow: 0 10px 22px rgba(15, 34, 55, 0.12);
  backdrop-filter: blur(12px);
}

.global-color-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.98);
}

.brand-hero-color-toggle {
  min-width: 1.46rem;
  min-height: 1.46rem;
  padding: 0.1rem 0.28rem;
  font-size: 0.6rem;
  line-height: 1;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #edf5fc;
}

.brand-hero-color-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

body[data-color-mode="dark"] .global-color-mode-toggle {
  border-color: rgba(224, 235, 247, 0.18);
  background: rgba(24, 32, 41, 0.88);
  color: #eef5fc;
}

@media (max-width: 980px) {
  .build-flow-steps,
  .build-global-grid {
    grid-template-columns: 1fr;
  }

  .startup-hero-overlay {
    inset: 0.75rem 0.75rem auto 0.75rem;
  }

  .brand-hero {
    grid-template-columns: 1fr;
  }

  .brand-hero-actions {
    top: 0.75rem;
    right: 0.75rem;
  }

  .brand-hero h1 {
    max-width: none;
  }

  .brand-hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-tabs {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .workspace-tabs-hero {
    padding-right: 0;
  }

  .toolbar-workspace-controls {
    grid-template-columns: 1fr;
  }

  .workspace-tabs-group {
    width: auto;
    flex-wrap: wrap;
  }

  .hero-quick-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-tools-dropdown {
    margin-left: 0;
  }

  .toolbar-tools-dropdown {
    margin-left: 0;
  }

  .brand-hero-points span {
    white-space: normal;
  }

  .brand-hero-mark {
    justify-items: start;
  }

  .brand-mark-caption {
    justify-items: start;
    text-align: left;
  }

  .brand-hero.collapsed {
    grid-template-columns: 1fr;
    padding: 0.58rem 1rem;
    gap: 0.5rem;
  }

}

@media (max-width: 640px) {
  .toolbar-overflow {
    width: 100%;
  }

  .toolbar-overflow-trigger {
    width: 100%;
    justify-content: center;
  }

  .toolbar-overflow-panel {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .brand-hero-points {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark-ring-two,
  .brand-mark-orbit-one,
  .brand-mark-orbit-two,
  .brand-mark-orbit-three {
    animation: none;
  }
}

.toolbar-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1.9fr) minmax(360px, 4.9fr);
  gap: 0.6rem;
  align-items: stretch;
}

.toolbar-more-tools-slot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.toolbar-publish-slot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: fit-content;
}

label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
}

input,
textarea,
select {
  border: 1px solid #bccad9;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  font: inherit;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
}

#course-description {
  resize: none;
}

#course-title,
#course-description {
  min-height: 3rem;
  box-sizing: border-box;
}

#course-description {
  min-height: 4.35rem;
}

.toolbar-actions {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.toolbar-overflow {
  position: relative;
}

.toolbar-overflow[open] {
  z-index: 6;
}

.toolbar-overflow-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #7b8da4;
  background: #f4f7fb;
  color: #183049;
  border-radius: 8px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  user-select: none;
}

.toolbar-overflow-trigger::-webkit-details-marker {
  display: none;
}

.toolbar-overflow-trigger::after {
  content: "▾";
  font-size: 0.78rem;
  color: #506279;
}

.toolbar-overflow[open] .toolbar-overflow-trigger::after {
  content: "▴";
}

.toolbar-overflow[open] .toolbar-overflow-trigger {
  background: #eaf2fb;
}

.toolbar-overflow-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 320px;
  max-width: min(92vw, 420px);
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid #d0deed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(12, 30, 46, 0.16);
}

.toolbar-overflow-head {
  display: grid;
  gap: 0.2rem;
}

.toolbar-overflow-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.toolbar-overflow-row > * {
  flex: 1 1 140px;
}

.toolbar-overflow-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.toolbar-overflow-grid .mode-toggle-column {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.toolbar-overflow-grid .mode-toggle {
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
}

.toolbar-overflow-grid .mode-toggle select {
  min-width: 0;
}

.toolbar-history {
  margin-top: 0;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.45rem 0.55rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.32rem;
  height: 100%;
  min-height: 0;
}

.sidebar:not(.courses-panel-collapsed) .toolbar-history {
  min-height: 0;
  height: 100%;
}

.toolbar-history-workspace {
  margin-top: 0;
  padding: 0.1rem 0 0.22rem;
  border-bottom: 1px solid #d7e3f0;
}

.toolbar-history-workspace-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.toolbar-history-title-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.workspace-course-title {
  margin: 0.08rem 0 0;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 600;
  color: #26415d;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.toolbar-history-workspace-body {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  align-content: start;
}

.toolbar-history-workspace-body .course-action-feedback {
  margin: -0.1rem 0 0;
}

.toolbar-history-head {
  display: grid;
  gap: 0.35rem;
}

.toolbar-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.toolbar-history-restore-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.toolbar-history-restore {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr);
  gap: 0.28rem;
  align-items: stretch;
}

.toolbar-history-restore #restore-point-apply-btn {
  order: 1;
  justify-self: start;
}

.toolbar-history-restore #restore-point-select {
  order: 2;
  min-width: 14rem;
}

.toolbar-history-restore-wrap {
  display: grid;
  gap: 0.28rem;
  padding: 0.42rem 0.46rem;
  border: 1px solid #d7e3f0;
  border-radius: 7px;
  background: #ffffff;
}

.toolbar-history-restore-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3f556f;
}

.toolbar-history-quick-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.35rem;
}

.toolbar-history-title {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.toolbar-history-title.toolbar-history-workspace-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.toolbar-history-title .field-hint {
  margin: 0;
  font-size: 0.76rem;
}

.toolbar-history-retention {
  font-size: 0.74rem;
  color: #4d6078;
}

.toolbar-history-head .secondary {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  font-size: 0.76rem;
}

.toolbar-history-restore-top .secondary {
  padding: 0.2rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.02;
  min-height: 0;
}

.toolbar-history-restore .secondary {
  padding: 0.24rem 0.4rem;
  font-size: 0.69rem;
  line-height: 1.05;
  white-space: nowrap;
  text-align: center;
  min-height: 0;
  width: fit-content;
  justify-self: start;
}

.toolbar-history-restore #restore-point-select {
  min-width: 14rem;
  width: 100%;
  font-size: 0.74rem;
  padding: 0.28rem 1.8rem 0.28rem 0.46rem;
}

.history-timeline {
  display: grid;
  gap: 0.16rem;
  max-height: none;
  overflow: auto;
  padding: 0.12rem 0.04rem 0 0;
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  border-top: 1px solid #d7e3f0;
}

.sidebar:not(.courses-panel-collapsed) .history-timeline {
  min-height: 8rem;
}

.toolbar-history.history-suspended {
  grid-template-rows: auto;
}

.toolbar-history.history-suspended .toolbar-history-head,
.toolbar-history.history-suspended .toolbar-history-restore-wrap,
.toolbar-history.history-suspended .history-timeline {
  display: none !important;
}

.toolbar-history.is-collapsed .history-timeline {
  display: none !important;
}

.toolbar-history.is-collapsed .toolbar-history-workspace {
  display: none !important;
}

.toolbar-history.is-collapsed {
  gap: 0.2rem;
}

.toolbar-history.is-collapsed .toolbar-history-title .field-hint {
  display: none;
}

.sidebar .toolbar-history {
  width: 100%;
}

.sidebar.courses-panel-collapsed .sidebar-courses-region {
  gap: 0.35rem;
  padding-top: 0.45rem;
  border-top-color: #cfdcec;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: #f4f8fd;
}

.sidebar.courses-panel-collapsed .sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.sidebar.courses-panel-collapsed .sidebar-head h1 {
  display: none;
}

.sidebar.courses-panel-collapsed .sidebar-head-actions button {
  display: none;
}

.sidebar.courses-panel-collapsed .sidebar-head-actions {
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
}

.sidebar.courses-panel-collapsed .course-sort-wrap,
.sidebar.courses-panel-collapsed .course-list {
  display: none;
}

.sidebar.courses-panel-collapsed #sidebar-courses-toggle {
  min-width: 2.2rem;
}

.layout.sidebar-fully-collapsed .sidebar {
  padding: 0.4rem 0.2rem;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  z-index: 61;
}

.layout.sidebar-fully-collapsed .sidebar-tools-region {
  display: grid;
  grid-template-rows: auto;
  padding-top: 1.8rem;
  overflow: visible;
}

.layout.sidebar-fully-collapsed .sidebar-courses-region,
.layout.sidebar-fully-collapsed .toolbar-history {
  display: none;
}

.layout.sidebar-fully-collapsed .preview-sidebar-course-actions {
  display: none;
}

.layout.sidebar-fully-collapsed .sidebar-section-switch {
  grid-template-columns: 1fr;
  justify-items: center;
  position: relative;
  z-index: 70;
}

.layout.sidebar-fully-collapsed .sidebar-section-switch-btn {
  display: none;
}

.layout.sidebar-fully-collapsed .sidebar-section-collapse-btn {
  position: relative;
  z-index: 71;
}

.sidebar-tools-region .toolbar-history-workspace-body {
  gap: 0.22rem;
  overflow-x: hidden;
}

.sidebar-tools-region .toolbar-history-workspace.toolbar-workspace-controls {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
}

.sidebar-tools-region .toolbar-workspace-tabs,
.sidebar-tools-region .workspace-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 7rem));
  gap: 0.28rem;
  overflow: visible;
  justify-content: start;
}

.sidebar-tools-region .workspace-tabs-group {
  display: contents;
}

.sidebar-tools-region .workspace-tabs .tab-btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.26rem 0.36rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: stretch;
}

.sidebar-tools-region .workspace-course-actions {
  width: 100%;
  padding-top: 0.14rem;
}

.sidebar-tools-region .workspace-course-actions.preview-sidebar-course-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  padding-top: 0.18rem;
}

.layout.sidebar-fully-collapsed .sidebar-tools-region .workspace-course-actions.preview-sidebar-course-actions {
  display: none !important;
}

.sidebar-tools-region .workspace-course-actions.preview-sidebar-course-actions button {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.sidebar-tools-region .toolbar-tools-dropdown {
  margin-left: 0;
  justify-self: stretch;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.sidebar-tools-region .toolbar-overflow {
  position: static;
  width: 100%;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  overflow: hidden;
}

.sidebar-tools-region .toolbar-overflow[open] {
  z-index: auto;
}

.sidebar-tools-region .toolbar-overflow-trigger {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  font-size: 0.82rem;
  padding: 0.38rem 0.55rem;
}

.sidebar-tools-region .toolbar-overflow-panel {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  left: auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  margin-top: 0;
  display: none;
  padding: 0.65rem;
  box-shadow: none;
  border-radius: 10px;
}

.sidebar-tools-region .toolbar-overflow[open] > .toolbar-overflow-panel {
  display: grid;
  margin-top: 0.35rem;
}


.history-chip {
  border: 1px solid #d7e3f0;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.14rem 0.32rem;
  font-size: 0.67rem;
  color: #16344f;
  display: grid;
  gap: 0.02rem;
  line-height: 1.1;
  min-width: 0;
}

.history-chip time {
  color: #4d6078;
  margin-right: 0;
  font-size: 0.6rem;
  line-height: 1.05;
  order: 2;
}

.history-chip-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.1;
  font-weight: 600;
  order: 1;
}

.history-chip-detail {
  color: #5b6f86;
  font-size: 0.6rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.05;
  order: 3;
}

.toolbar-workspace-controls {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.toolbar-theme-btn {
  justify-content: center;
}

#restore-point-select {
  min-width: 170px;
  max-width: 260px;
}

.save-indicator {
  font-size: 0.84rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background: #f7fbff;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

.lessons-wrap {
  margin-top: 1rem;
  padding: 1rem;
}

.course-workspace-dock {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.lesson-rail .course-workspace-dock {
  margin-bottom: 0.7rem;
}

.course-workspace-dock-panel.toolbar-workspace-controls {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.course-workspace-dock-panel.toolbar-history-workspace {
  border-bottom: 0;
}

.course-workspace-dock-panel .toolbar-history-workspace-body {
  gap: 0.42rem;
}

.course-workspace-dock-panel .workspace-tabs,
.course-workspace-dock-panel .toolbar-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: start;
}

.course-workspace-dock-panel .workspace-tabs-group {
  display: contents;
}

.course-workspace-dock-panel .workspace-tabs-right {
  margin-left: 0;
}

.course-workspace-dock-panel .workspace-tabs .tab-btn {
  min-width: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.08;
  min-height: 2.08rem;
  padding: 0.34rem 0.42rem;
  font-size: 0.72rem;
}

.course-workspace-dock-panel .workspace-tab-label {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.08;
}

.course-workspace-dock-panel .workspace-course-title {
  font-size: 0.92rem;
}

.course-workspace-dock-panel #workspace-topbar-toggle,
.course-workspace-dock-panel #sidebar-workspace-toggle {
  white-space: nowrap;
}

.edit-tab-heading {
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.8rem;
}

.edit-tab-heading .lessons-head {
  margin-bottom: 0;
  gap: 0.12rem;
  align-items: center;
  text-align: center;
}

.edit-tab-heading .lessons-head h2 {
  font-size: 0.95rem;
  line-height: 1.05;
}

.edit-tab-heading .field-hint {
  font-size: 0.79rem;
  line-height: 1.18;
}

.edit-lesson-summary[hidden] {
  display: none !important;
}

.edit-lesson-summary {
  margin-top: 0.35rem;
}

.edit-lesson-summary-card {
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #fbfdff;
}

.edit-lesson-summary-card .doc-lesson-title-field .field-label {
  font-size: 0.75rem;
}

.edit-lesson-summary-card .lesson-control-center-card {
  padding: 0.5rem 0.6rem;
}

.edit-lesson-summary-card .doc-lesson-editor-bar {
  margin: 0.35rem 0 0.5rem;
}

.builder-shell {
  display: grid;
  grid-template-columns: var(--lesson-rail-width, 228px) minmax(640px, 1fr) var(--inspector-resizer-width, 8px) minmax(240px, min(var(--inspector-width, 340px), 38vw));
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
  transition: none;
}

body.layout-ready .builder-shell {
  transition: grid-template-columns 180ms ease;
}

.builder-shell.inspector-collapsed {
  grid-template-columns: var(--lesson-rail-width, 228px) minmax(760px, 1fr) 0 0;
}

.inspector-resizer {
  background: linear-gradient(180deg, transparent, rgba(15, 32, 51, 0.08), transparent);
  border-radius: 999px;
  cursor: ew-resize;
  transition: background 0.15s ease;
}

.inspector-resizer:hover,
.inspector-resizer:focus-visible {
  background: rgba(15, 32, 51, 0.15);
}

.builder-shell.inspector-collapsed .inspector-resizer {
  display: none;
}

.lesson-rail,
.document-shell,
.inspector-shell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  min-width: 0;
}

.lesson-rail {
  padding: 0.7rem;
  position: sticky;
  top: 0.8rem;
  width: 100%;
  overflow: hidden;
}

.lesson-rail.collapsed {
  padding: 0.35rem 0.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lesson-rail.collapsed .course-workspace-dock {
  display: none;
}

.lesson-rail.collapsed .lesson-list {
  display: none;
}

.lesson-list {
  display: grid;
  gap: 0.45rem;
}

.lesson-list-item {
  border: 1px solid #d6e1ef;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.45rem;
  text-align: left;
  color: #19324a;
}

.lesson-list-item.active {
  border-color: var(--brand);
  background: #e7f1ff;
}

.document-shell {
  padding: 0.75rem;
  min-height: 400px;
  width: 100%;
  position: relative;
}

.document-jump-controls {
  position: fixed;
  top: 5.6rem;
  bottom: 1.1rem;
  right: calc(var(--inspector-width, 340px) + var(--inspector-resizer-width, 8px) + 1.35rem);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 12;
}

.builder-shell.inspector-collapsed .document-jump-controls {
  right: 1rem;
}

.document-jump-controls-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.65rem;
  height: 100%;
}

.document-jump-controls [hidden] {
  display: none !important;
}

.course-edit-progress-nav {
  pointer-events: auto;
  width: 1rem;
  flex: 1 1 auto;
  min-height: 9rem;
  max-height: calc(100vh - 15rem);
  display: flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.course-edit-progress-track {
  position: relative;
  width: 0.36rem;
  height: 100%;
  border-radius: 999px;
  background: rgba(137, 156, 180, 0.28);
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(84, 108, 138, 0.14);
}

.course-edit-progress-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fa8d8 0%, #1f5d9c 100%);
}

.course-edit-progress-thumb {
  position: absolute;
  left: 50%;
  top: calc(0% - 8px);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 2px solid #1f5d9c;
  box-shadow: 0 6px 14px rgba(16, 31, 49, 0.18);
}

.course-edit-progress-nav:focus-visible .course-edit-progress-thumb,
.course-edit-progress-nav:hover .course-edit-progress-thumb {
  box-shadow: 0 0 0 3px rgba(31, 93, 156, 0.18), 0 6px 14px rgba(16, 31, 49, 0.18);
}

.document-jump-btn {
  pointer-events: none;
  justify-content: center;
  min-width: 4.9rem;
  padding: 0.24rem 0.42rem;
  font-size: 0.76rem;
  line-height: 1.15;
  box-shadow: 0 8px 18px rgba(16, 31, 49, 0.12);
  opacity: 0;
  transform: translateX(0.35rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.document-jump-controls-stack.jump-controls-active .document-jump-btn:not([hidden]),
.document-jump-controls-stack:focus-within .document-jump-btn:not([hidden]) {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}

.document-jump-btn[data-suppressed='true'] {
  visibility: hidden;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(0.35rem);
}

.document-jump-btn-bottom {
  margin-top: auto;
  margin-bottom: 3.2rem;
}

.build-global-editor {
  margin-bottom: 0.85rem;
}

.build-flow-guide {
  margin-bottom: 0.85rem;
}

.build-disclosure {
  border: 1px solid #d6e3f1;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.build-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  cursor: pointer;
}

.build-disclosure-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  flex: 1 1 auto;
}

.build-disclosure > summary::-webkit-details-marker {
  display: none;
}

.build-disclosure > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: #506279;
  font-size: 0.85rem;
  transition: transform 160ms ease;
}

.build-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.build-disclosure > summary strong {
  color: #17314c;
}

.build-disclosure > summary .field-hint {
  margin: 0;
}

.build-disclosure > section {
  margin: 0 0.85rem 0.85rem;
}

.build-flow-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #ffffff;
}

.build-flow-overview {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid #d6e3f1;
  border-radius: 12px;
  background: linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}

.build-flow-overview-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.1);
  color: #1f5d9c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.build-flow-overview-title {
  color: #17314c;
  font-size: 1rem;
}

.build-flow-overview-message {
  color: #35506c;
  font-size: 0.9rem;
  line-height: 1.45;
}

.build-flow-overview-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
}

.build-flow-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.build-flow-head strong {
  display: block;
  margin-bottom: 0.2rem;
}

.build-flow-steps {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.build-flow-step {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.8rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #ffffff;
}

.build-flow-step.is-complete {
  border-color: #bfd4bf;
  background: #f5fbf3;
}

.build-flow-step.is-current {
  border-color: #9bbce0;
  background: #edf5ff;
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.08);
}

.build-flow-step strong {
  color: #17314c;
}

.setup-walkthrough-card {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.setup-walkthrough-intro {
  color: #35506c;
  font-size: 0.92rem;
  line-height: 1.5;
}

.setup-walkthrough-sections {
  display: grid;
  gap: 0.9rem;
}

.setup-walkthrough-section {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
  padding: 0.95rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #ffffff;
}

.setup-walkthrough-section.is-current {
  border-color: #9bbce0;
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.08);
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.setup-walkthrough-section-head {
  display: grid;
  gap: 0.35rem;
}

.setup-walkthrough-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.1);
  color: #1f5d9c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.setup-walkthrough-title {
  color: #17314c;
  font-size: 1rem;
}

.setup-walkthrough-where {
  display: grid;
  gap: 0.2rem;
}

.setup-walkthrough-where strong {
  color: #17314c;
  font-size: 0.82rem;
}

.setup-walkthrough-where p {
  margin: 0;
  color: #35506c;
  font-size: 0.88rem;
  line-height: 1.45;
}

.setup-walkthrough-steps {
  margin: 0;
  padding-left: 1.15rem;
  color: #35506c;
  font-size: 0.9rem;
  line-height: 1.55;
}

.setup-walkthrough-steps li + li {
  margin-top: 0.3rem;
}

.setup-walkthrough-section > button {
  justify-self: start;
}

.author-walkthrough-mock {
  display: grid;
  gap: 0.65rem;
  min-height: 188px;
  padding: 0.7rem;
  border: 1px solid #d6e3f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.author-walkthrough-windowbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.1rem;
}

.author-walkthrough-windowdot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d6e3f1;
}

.author-walkthrough-windowdot:nth-child(1) {
  background: #f39aa0;
}

.author-walkthrough-windowdot:nth-child(2) {
  background: #f4c978;
}

.author-walkthrough-windowdot:nth-child(3) {
  background: #92d29f;
}

.author-walkthrough-windowtitle {
  margin-left: auto;
  color: #6b8098;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.author-walkthrough-mock-topbar {
  display: flex;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.author-walkthrough-topbar-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #d6e3f1;
  background: #ffffff;
  color: #506279;
  font-size: 0.72rem;
  font-weight: 600;
}

.author-walkthrough-topbar-chip.is-active {
  border-color: #8db2da;
  background: #e9f3ff;
  color: #1f5d9c;
}

.author-walkthrough-mock-body {
  display: grid;
  gap: 0.75rem;
  min-height: 132px;
}

.author-walkthrough-shell {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 110px minmax(0, 1fr);
  min-height: 136px;
}

.author-walkthrough-shell-builders {
  grid-template-columns: 92px minmax(0, 1fr) 128px;
}

.author-walkthrough-shell-preview {
  grid-template-columns: 96px minmax(0, 1fr);
}

.author-walkthrough-shell-publish {
  grid-template-columns: minmax(0, 1fr) 132px;
}

.author-walkthrough-sidebar {
  display: grid;
  gap: 0.42rem;
  align-content: start;
  padding: 0.5rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-sidebar-item {
  padding: 0.42rem 0.5rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #ffffff;
  color: #506279;
  font-size: 0.76rem;
  font-weight: 600;
}

.author-walkthrough-sidebar-item.is-active {
  border-color: #8db2da;
  background: #edf5ff;
  color: #1f5d9c;
}

.author-walkthrough-mainpanel {
  align-content: start;
}

.author-walkthrough-section-header {
  display: grid;
  gap: 0.18rem;
}

.author-walkthrough-section-header strong {
  color: #17314c;
  font-size: 0.84rem;
}

.author-walkthrough-section-header span {
  color: #6b8098;
  font-size: 0.73rem;
  line-height: 1.35;
}

.author-walkthrough-theme-controls,
.author-walkthrough-publish-checks {
  display: grid;
  gap: 0.45rem;
}

.author-walkthrough-control-row,
.author-walkthrough-publish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #35506c;
  font-size: 0.8rem;
}

.author-walkthrough-swatch {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(23, 49, 76, 0.12);
  flex: 0 0 auto;
}

.author-walkthrough-swatch.swatch-1 {
  background: linear-gradient(135deg, #f0f6ff 0%, #dae8fb 100%);
}

.author-walkthrough-swatch.swatch-2 {
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
}

.author-walkthrough-swatch.swatch-3 {
  background: linear-gradient(135deg, #fff9ef 0%, #f7f1ff 100%);
}

.author-walkthrough-swatch.swatch-4 {
  background: linear-gradient(135deg, #ffffff 0%, #ecf6f4 100%);
}

.author-walkthrough-theme-preview {
  padding: 0.75rem;
  border: 1px dashed #c9dbee;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.author-walkthrough-theme-mini-label {
  color: #6b8098;
  font-size: 0.72rem;
  font-weight: 700;
}

.author-walkthrough-theme-viewport {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #f1f6ff 0%, #ffffff 100%);
}

.author-walkthrough-theme-lesson {
  padding: 0.9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8ef 0%, #fefefe 100%);
}

.author-walkthrough-theme-card,
.author-walkthrough-builder-card,
.author-walkthrough-preview-block {
  padding: 0.85rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #ffffff;
  color: #35506c;
  font-size: 0.82rem;
}

.author-walkthrough-theme-card {
  background: linear-gradient(180deg, #eef7f3 0%, #ffffff 100%);
  color: #234b44;
  text-align: center;
  font-weight: 600;
}

.author-walkthrough-actionrow {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.author-walkthrough-builder-rail {
  display: grid;
  gap: 0.4rem;
}

.author-walkthrough-lessonrail {
  align-content: start;
  padding: 0.5rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-builder-rail-item {
  padding: 0.42rem 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #506279;
  font-size: 0.78rem;
}

.author-walkthrough-builder-rail-item.is-active,
.author-walkthrough-publish-row.is-active,
.author-walkthrough-preview-block.is-focus {
  border-color: #8db2da;
  background: #edf5ff;
  color: #1f5d9c;
}

.author-walkthrough-builder-canvas {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-canvas-head {
  display: flex;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.author-walkthrough-canvas-chip,
.author-walkthrough-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  border: 1px solid #d6e3f1;
  background: #ffffff;
  color: #506279;
  font-size: 0.72rem;
  font-weight: 600;
}

.author-walkthrough-canvas-chip.is-active {
  border-color: #8db2da;
  background: #edf5ff;
  color: #1f5d9c;
}

.author-walkthrough-builder-card {
  display: grid;
  gap: 0.35rem;
  min-height: 120px;
  background: linear-gradient(180deg, #fff8ef 0%, #ffffff 100%);
}

.author-walkthrough-builder-card strong {
  color: #17314c;
}

.author-walkthrough-builder-meta {
  color: #5c7189;
  font-size: 0.78rem;
}

.author-walkthrough-builder-tools {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.author-walkthrough-inspector {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-inspector strong {
  color: #17314c;
  font-size: 0.82rem;
}

.author-walkthrough-preview-pane {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-preview-block {
  min-height: 42px;
}

.author-walkthrough-preview-progress {
  margin-top: 0.1rem;
  height: 6px;
  border-radius: 999px;
  background: #dce7f3;
  overflow: hidden;
}

.author-walkthrough-preview-progress span {
  display: block;
  width: 52%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f6db4 0%, #68a8ea 100%);
}

.author-walkthrough-publish-actions {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.55rem;
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.author-walkthrough-export-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #d6e3f1;
  background: #ffffff;
  color: #35506c;
  font-size: 0.76rem;
  font-weight: 600;
}

.author-walkthrough-export-chip.is-primary {
  border-color: #8db2da;
  background: #edf5ff;
  color: #1f5d9c;
}

body[data-color-mode="dark"] .setup-walkthrough-card,
body[data-color-mode="dark"] .setup-walkthrough-section,
body[data-color-mode="dark"] .author-walkthrough-mock,
body[data-color-mode="dark"] .author-walkthrough-control-row,
body[data-color-mode="dark"] .author-walkthrough-publish-row,
body[data-color-mode="dark"] .author-walkthrough-theme-preview,
body[data-color-mode="dark"] .author-walkthrough-theme-card,
body[data-color-mode="dark"] .author-walkthrough-builder-card,
body[data-color-mode="dark"] .author-walkthrough-preview-block,
body[data-color-mode="dark"] .author-walkthrough-builder-rail-item,
body[data-color-mode="dark"] .author-walkthrough-export-chip,
body[data-color-mode="dark"] .author-walkthrough-topbar-chip,
body[data-color-mode="dark"] .theme-clipboard-status {
  border-color: rgba(130, 168, 207, 0.3);
}

body[data-color-mode="dark"] .setup-walkthrough-card,
body[data-color-mode="dark"] .setup-walkthrough-section,
body[data-color-mode="dark"] .author-walkthrough-mock {
  background: linear-gradient(180deg, rgba(25, 35, 47, 0.96) 0%, rgba(15, 23, 33, 0.98) 100%);
}

body[data-color-mode="dark"] .setup-walkthrough-intro,
body[data-color-mode="dark"] .setup-walkthrough-where p,
body[data-color-mode="dark"] .setup-walkthrough-steps,
body[data-color-mode="dark"] .author-walkthrough-control-row,
body[data-color-mode="dark"] .author-walkthrough-publish-row,
body[data-color-mode="dark"] .author-walkthrough-builder-meta,
body[data-color-mode="dark"] .author-walkthrough-export-chip,
body[data-color-mode="dark"] .author-walkthrough-topbar-chip,
body[data-color-mode="dark"] .author-walkthrough-builder-rail-item,
body[data-color-mode="dark"] .author-walkthrough-preview-block {
  color: #c6d6e6;
}

body[data-color-mode="dark"] .setup-walkthrough-title,
body[data-color-mode="dark"] .setup-walkthrough-where strong,
body[data-color-mode="dark"] .author-walkthrough-builder-card strong,
body[data-color-mode="dark"] .author-walkthrough-section-header strong,
body[data-color-mode="dark"] .author-walkthrough-inspector strong {
  color: #f3f8ff;
}

body[data-color-mode="dark"] .author-walkthrough-topbar-chip,
body[data-color-mode="dark"] .author-walkthrough-control-row,
body[data-color-mode="dark"] .author-walkthrough-publish-row,
body[data-color-mode="dark"] .author-walkthrough-builder-rail-item,
body[data-color-mode="dark"] .author-walkthrough-export-chip,
body[data-color-mode="dark"] .author-walkthrough-theme-preview,
body[data-color-mode="dark"] .author-walkthrough-theme-viewport,
body[data-color-mode="dark"] .author-walkthrough-theme-lesson,
.author-walkthrough-sidebar,
.author-walkthrough-builder-canvas,
.author-walkthrough-inspector,
.author-walkthrough-preview-pane,
.author-walkthrough-publish-actions,
body[data-color-mode="dark"] .theme-clipboard-status,
body[data-color-mode="dark"] .author-walkthrough-theme-card,
body[data-color-mode="dark"] .author-walkthrough-builder-card,
body[data-color-mode="dark"] .author-walkthrough-preview-block {
  background: rgba(20, 30, 42, 0.92);
}

body[data-color-mode="dark"] .theme-clipboard-status {
  color: #d6e6f7;
}

body[data-color-mode="dark"] .author-walkthrough-sidebar,
body[data-color-mode="dark"] .author-walkthrough-builder-canvas,
body[data-color-mode="dark"] .author-walkthrough-inspector,
body[data-color-mode="dark"] .author-walkthrough-preview-pane,
body[data-color-mode="dark"] .author-walkthrough-publish-actions,
body[data-color-mode="dark"] .author-walkthrough-canvas-chip,
body[data-color-mode="dark"] .author-walkthrough-mini-chip {
  border-color: rgba(130, 168, 207, 0.3);
  background: rgba(20, 30, 42, 0.92);
}

body[data-color-mode="dark"] .author-walkthrough-windowtitle,
body[data-color-mode="dark"] .author-walkthrough-section-header span,
body[data-color-mode="dark"] .author-walkthrough-theme-mini-label {
  color: #9fb6cc;
}

body[data-color-mode="dark"] .author-walkthrough-topbar-chip.is-active,
body[data-color-mode="dark"] .author-walkthrough-sidebar-item.is-active,
body[data-color-mode="dark"] .author-walkthrough-builder-rail-item.is-active,
body[data-color-mode="dark"] .author-walkthrough-publish-row.is-active,
body[data-color-mode="dark"] .author-walkthrough-preview-block.is-focus,
body[data-color-mode="dark"] .author-walkthrough-canvas-chip.is-active,
body[data-color-mode="dark"] .author-walkthrough-export-chip.is-primary,
body[data-color-mode="dark"] .setup-walkthrough-section.is-current {
  background: rgba(22, 63, 103, 0.42);
  color: #dfeeff;
}

@media (max-width: 1080px) {
  .setup-walkthrough-section {
    grid-template-columns: 1fr;
  }
}

.build-global-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #ffffff;
}

.build-global-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.build-global-head strong {
  display: block;
  margin-bottom: 0.2rem;
}

.build-global-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.builder-finder-card {
  display: block;
  padding: 0.55rem 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #d9e4f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 12px 28px rgba(15, 32, 51, 0.05);
}

.lesson-list .builder-finder-card {
  margin-top: 0.35rem;
  margin-bottom: 0;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
}

.lesson-list .builder-finder-body,
.lesson-list .builder-finder-head,
.lesson-list .builder-finder-summary,
.lesson-list .builder-finder-results,
.lesson-list .builder-finder-lesson-group,
.lesson-list .builder-finder-entry-list,
.lesson-list .builder-finder-entry {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lesson-list .builder-finder-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.lesson-list .builder-finder-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.lesson-list .builder-finder-head {
  padding: 0.45rem 0.6rem;
  border: 1px solid #d6e1ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #19324a;
}

.lesson-list .builder-finder-card[open] .builder-finder-head {
  border-color: var(--brand);
  background: #e7f1ff;
}

.builder-finder-head {
  display: grid;
  gap: 0.12rem;
  cursor: pointer;
  list-style: none;
}

.builder-finder-head::-webkit-details-marker {
  display: none;
}

.builder-finder-body {
  display: grid;
  gap: 0.7rem;
  padding-top: 0.7rem;
}

.builder-finder-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.builder-finder-input {
  flex: 1 1 320px;
  min-width: 220px;
}

.builder-finder-summary {
  font-size: 0.9rem;
  color: #29435f;
}

.builder-finder-results {
  display: grid;
  gap: 0.85rem;
}

.builder-finder-lesson-group {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.1rem;
}

.builder-finder-lesson-label {
  font-weight: 700;
  color: #173654;
}

.builder-finder-entry-list {
  display: grid;
  gap: 0.45rem;
}

.builder-finder-entry {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d5e1ee;
  border-radius: 10px;
  background: #ffffff;
  color: #173654;
}

.builder-finder-entry:hover,
.builder-finder-entry:focus-visible {
  border-color: #7fa8d6;
  box-shadow: 0 0 0 3px rgba(47, 109, 180, 0.14);
}

.builder-finder-entry-type {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2f6db4;
}

.builder-finder-entry-meta {
  font-size: 0.76rem;
  color: #5b6f86;
}

.builder-finder-entry-preview {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #173654;
}

.doc-lesson-next-row {
  width: 100%;
  justify-content: space-between;
}

.doc-lesson-next-row .doc-lesson-prev-btn {
  margin-right: auto;
}

.doc-lesson-next-row .doc-lesson-next-btn {
  margin-left: auto;
}

.build-global-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.build-global-stat {
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.7rem;
}

.build-global-stat strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #17314c;
}

.build-global-swatch {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(21, 33, 46, 0.14);
  vertical-align: middle;
}

.basic-action-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.basic-action-card {
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.basic-action-card summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 0.9rem;
  font-weight: 700;
  color: #17314c;
}

.basic-action-card summary::-webkit-details-marker {
  display: none;
}

.basic-action-card[open] summary {
  background: #f3f8ff;
  border-bottom: 1px solid #dce7f3;
}

.basic-action-hint {
  padding: 0.7rem 0.9rem 0;
}

.basic-action-card > .item-list,
.basic-action-card > .block-content,
.basic-action-card > .ai-image-panel,
.basic-action-card > .style-box,
.basic-action-card > .attached-audio-editor,
.basic-action-card > .image-crop-editor,
.basic-action-card > .quick-remove-editor,
.basic-action-card > .basic-action-button-wrap {
  padding: 0.85rem 0.9rem 0.9rem;
}

.basic-action-button-wrap {
  display: flex;
  align-items: center;
}

.basic-action-button-wrap .btn {
  min-width: 0;
}

.basic-builder-jump-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  flex: 1 1 320px;
}

.basic-builder-jump-strip .btn {
  min-width: 0;
  padding: 0.34rem 0.62rem;
  font-size: 0.78rem;
  line-height: 1.1;
}

.guided-setup-snapshot-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 0.8rem;
}

.guided-choice-group {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.guided-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.95fr);
  gap: 0.95rem;
  align-items: start;
  margin-top: 0.55rem;
}

.guided-setup-choices,
.guided-setup-preview-column {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.guided-live-preview {
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: 0 12px 30px rgba(15, 73, 130, 0.08);
  position: sticky;
  top: 0.8rem;
}

.guided-live-preview-viewport {
  border: 1px solid #d7e3f0;
  border-radius: 16px;
  padding: 0.9rem;
}

.guided-live-preview-shell {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 0.8rem;
  border: 1px solid #d7e3f0;
  border-radius: 18px;
  padding: 0.85rem;
}

.guided-live-preview-sidebar,
.guided-live-preview-stage {
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  padding: 0.72rem;
}

.guided-live-preview-sidebar {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.guided-live-preview-sidebar-title,
.guided-live-preview-heading {
  display: block;
  color: #17314c;
}

.guided-live-preview-sidebar-item,
.guided-live-preview-search {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.42rem 0.55rem;
  font-size: 0.8rem;
}

.guided-live-preview-stage {
  display: grid;
  gap: 0.7rem;
}

.guided-live-preview-card {
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  display: grid;
  gap: 0.45rem;
}

.guided-live-preview-badge {
  width: max-content;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.guided-live-preview-body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

.guided-live-preview-inner-card {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  padding: 0.66rem 0.72rem;
  font-size: 0.8rem;
}

.guided-live-preview-action {
  width: max-content;
  padding: 0.46rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #2f6db4;
  font-size: 0.79rem;
  font-weight: 700;
}

.guided-choice-heading {
  display: block;
  color: #17314c;
  font-size: 0.95rem;
}

.guided-choice-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.guided-template-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.guided-choice-card {
  width: 100%;
  text-align: left;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.78rem 0.82rem;
  display: grid;
  gap: 0.28rem;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.guided-choice-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16, 45, 74, 0.08);
  border-color: #b8cee7;
}

.guided-choice-card.is-selected {
  border-color: #6f8fb0;
  background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 100%);
  box-shadow: 0 12px 24px rgba(31, 79, 128, 0.14);
}

.guided-choice-card strong,
.guided-choice-card span {
  display: block;
}

.guided-choice-card strong {
  color: #17314c;
  font-size: 0.9rem;
}

.guided-choice-card span {
  color: #4b6580;
  font-size: 0.8rem;
  line-height: 1.35;
}

.guided-template-card {
  padding: 0.82rem;
  gap: 0.45rem;
}

.guided-template-preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(130, 154, 180, 0.32);
  background: #f2f7fc;
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  min-height: 92px;
}

.guided-template-preview-hero {
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.86);
}

.guided-template-preview-row {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 0.42rem;
}

.guided-template-preview-card {
  min-height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.guided-template-preview-card-accent {
  background: rgba(255, 255, 255, 0.72);
}

.guided-template-preview-card-detail {
  min-height: 18px;
  border-radius: 999px;
}

.guided-template-preview-clean_modern {
  background: linear-gradient(180deg, #eff6ff 0%, #f9fbff 100%);
}

.guided-template-preview-clean_modern .guided-template-preview-hero {
  background: linear-gradient(90deg, #2f6db4 0%, #8eb6e9 100%);
}

.guided-template-preview-editorial {
  background: linear-gradient(180deg, #f2ede6 0%, #fbf9f5 100%);
}

.guided-template-preview-editorial .guided-template-preview-hero {
  background: linear-gradient(90deg, #6e5d4f 0%, #b7a58f 100%);
}

.guided-template-preview-warm_training {
  background: linear-gradient(180deg, #fff2e8 0%, #fffaf5 100%);
}

.guided-template-preview-warm_training .guided-template-preview-hero {
  background: linear-gradient(90deg, #d97443 0%, #f0b37d 100%);
}

.guided-template-preview-bold_dark {
  background: linear-gradient(180deg, #1a2230 0%, #263348 100%);
}

.guided-template-preview-bold_dark .guided-template-preview-hero,
.guided-template-preview-bold_dark .guided-template-preview-card {
  background: rgba(255, 255, 255, 0.16);
}

.guided-template-preview-bold_dark .guided-template-preview-card-accent {
  background: rgba(88, 211, 198, 0.38);
}

.guided-template-preview-playful_gradient {
  background: linear-gradient(180deg, #eef6ff 0%, #f8f3ff 100%);
}

.guided-template-preview-playful_gradient .guided-template-preview-hero {
  background: linear-gradient(90deg, #18b8b3 0%, #8f7cff 100%);
}

.guided-setup-snapshot-chip {
  border: 1px solid #dce7f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.8rem 0.9rem;
}

.guided-setup-snapshot-chip strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #17314c;
}

body[data-color-mode="dark"] .guided-choice-card,
body[data-color-mode="dark"] .guided-setup-snapshot-chip {
  background: linear-gradient(180deg, #1a2633 0%, #17212d 100%);
  border-color: #304154;
}

body[data-color-mode="dark"] .guided-choice-card.is-selected {
  background: linear-gradient(180deg, #213246 0%, #192432 100%);
  border-color: #6d8fb4;
}

body[data-color-mode="dark"] .guided-choice-card strong,
body[data-color-mode="dark"] .guided-choice-heading,
body[data-color-mode="dark"] .guided-setup-snapshot-chip strong {
  color: #eff6ff;
}

body[data-color-mode="dark"] .guided-live-preview {
  background: #17212d;
  border-color: #304154;
}

body[data-color-mode="dark"] .guided-live-preview-viewport,
body[data-color-mode="dark"] .guided-live-preview-shell,
body[data-color-mode="dark"] .guided-live-preview-sidebar,
body[data-color-mode="dark"] .guided-live-preview-stage,
body[data-color-mode="dark"] .guided-live-preview-card,
body[data-color-mode="dark"] .guided-live-preview-inner-card {
  border-color: #304154;
}

body[data-color-mode="dark"] .guided-choice-card span {
  color: #b7c8da;
}

@media (max-width: 980px) {
  .guided-setup-layout {
    grid-template-columns: 1fr;
  }

  .guided-live-preview {
    position: static;
  }
}

.next-step-helper {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(520px, calc(100vw - 1.5rem));
  max-height: min(78vh, 760px);
  padding: 0.8rem;
  border: 1px solid #c6d8eb;
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(35, 130, 152, 0.12), transparent 56%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  box-shadow: 0 16px 32px rgba(16, 45, 74, 0.18);
  z-index: 30;
}

.floating-utility-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.maven-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  min-width: 132px;
  padding: 0.78rem 1rem;
  border: 1px solid #0f5b7a;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f6a8f 0%, #148a8f 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(11, 54, 78, 0.24);
  transition: transform 140ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.maven-chat-callout::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: -0.34rem;
  width: 0.68rem;
  height: 0.68rem;
  background: linear-gradient(135deg, #117191 0%, #13898f 100%);
  border-right: 1px solid rgba(8, 53, 74, 0.42);
  border-bottom: 1px solid rgba(8, 53, 74, 0.42);
  transform: rotate(45deg);
  border-radius: 0.08rem;
  pointer-events: none;
}

.maven-chat-callout-icon {
  width: 1.02rem;
  height: 0.82rem;
  border: 1.6px solid rgba(255, 255, 255, 0.9);
  border-radius: 0.36rem;
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}

.maven-chat-callout-icon::after {
  content: '';
  position: absolute;
  left: 0.16rem;
  bottom: -0.22rem;
  width: 0.34rem;
  height: 0.34rem;
  border-left: 1.6px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1.6px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  transform: skewX(-26deg) rotate(-22deg);
  border-bottom-left-radius: 0.08rem;
}

.maven-chat-callout-label {
  line-height: 1;
}

.maven-launcher:hover,
.maven-launcher:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(11, 54, 78, 0.3);
  filter: saturate(1.08);
}

.maven-launcher[hidden] {
  display: none !important;
}

.next-step-helper[hidden] {
  display: none !important;
}

.next-step-helper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.maven-helper-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0.35rem;
}

.maven-faq-modal-panel {
  width: min(820px, 96vw);
}

.maven-faq-list {
  display: grid;
  gap: 0.65rem;
  max-height: min(60vh, 620px);
  overflow: auto;
  padding-right: 0.15rem;
}

.maven-faq-item {
  border: 1px solid #d9e6f2;
  border-radius: 12px;
  background: #fbfdff;
  overflow: hidden;
}

.maven-faq-item > summary {
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  color: #17314c;
  list-style: none;
}

.maven-faq-item > summary::-webkit-details-marker {
  display: none;
}

.maven-faq-answer {
  padding: 0 0.9rem 0.85rem;
  color: #35506c;
  line-height: 1.5;
}

.maven-faq-tags,
.maven-faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 0.9rem 0.85rem;
}

.next-step-helper-copy {
  margin: 0.55rem 0 0.75rem;
  color: #35506c;
  font-size: 0.9rem;
  line-height: 1.45;
}

.next-step-helper-disclosure {
  border: 1px solid #d9e6f2;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.next-step-helper-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.58rem 0.72rem;
  cursor: pointer;
  list-style: none;
}

.next-step-helper-disclosure > summary::-webkit-details-marker {
  display: none;
}

.next-step-helper-disclosure > summary::after {
  content: "▸";
  color: #58708a;
  font-size: 0.82rem;
  transition: transform 160ms ease;
}

.next-step-helper-disclosure[open] > summary::after {
  transform: rotate(90deg);
}

.next-step-helper-disclosure-body {
  padding: 0 0.72rem 0.7rem;
  display: grid;
  gap: 0.35rem;
}

.next-step-helper-heading {
  display: block;
  color: #17314c;
  font-size: 0.96rem;
}

.next-step-helper-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.next-step-helper-options {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.4rem;
}

.next-step-helper-options button {
  justify-content: flex-start;
}

.maven-conversation {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #dce7f3;
  display: grid;
  gap: 0.55rem;
}

.maven-conversation-list {
  display: grid;
  gap: 0.45rem;
  max-height: min(42vh, 460px);
  overflow-y: auto;
}

.maven-conversation-empty {
  border: 1px dashed #cad9e8;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  background: #f9fbfe;
}

.maven-message {
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0.72rem;
  border-radius: 10px;
  border: 1px solid #dce7f3;
  background: #ffffff;
}

.maven-message-user {
  background: #edf6ff;
  border-color: #c6ddf6;
}

.maven-message-assistant {
  background: #f7fbff;
}

.maven-message-role {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4a6580;
}

.maven-message-heading {
  color: #17314c;
}

.maven-message-body {
  color: #35506c;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.maven-message-sources {
  margin-top: 0.45rem;
  color: #5b728b;
  font-size: 0.72rem;
  line-height: 1.35;
}

.maven-message-question {
  margin-top: 0.35rem;
  color: #6a7f94;
  font-size: 0.75rem;
  line-height: 1.35;
}

.maven-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.maven-conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.maven-conversation-row input {
  min-width: 0;
}

#maven-ask-btn.maven-chat-send {
  position: relative;
  min-width: 5.25rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border-color: #0f5b7a;
  background: linear-gradient(135deg, #0f6a8f 0%, #148a8f 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(9, 42, 64, 0.22);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#maven-ask-btn.maven-chat-send::after {
  content: '';
  position: absolute;
  right: 0.62rem;
  bottom: -0.22rem;
  width: 0.44rem;
  height: 0.44rem;
  background: linear-gradient(135deg, #117191 0%, #148a8f 100%);
  border-right: 1px solid rgba(9, 42, 64, 0.4);
  border-bottom: 1px solid rgba(9, 42, 64, 0.4);
  transform: rotate(45deg);
  border-radius: 0.06rem;
  pointer-events: none;
}

#maven-ask-btn.maven-chat-send:hover,
#maven-ask-btn.maven-chat-send:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(9, 42, 64, 0.28);
  filter: saturate(1.08);
}

body[data-color-mode="dark"] .maven-launcher,
body[data-color-mode="dark"] #maven-ask-btn.maven-chat-send {
  border-color: #3f6f8f;
  background: linear-gradient(135deg, #285f84 0%, #2a7a83 100%);
  box-shadow: 0 14px 28px rgba(3, 11, 19, 0.34);
}

.maven-why {
  margin-top: 0.4rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #f3f8fd;
  color: #35506c;
  font-size: 0.85rem;
  line-height: 1.4;
}

.next-step-choice-card {
  display: grid;
  gap: 0.18rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.78rem;
  border-radius: 10px;
}

.next-step-choice-card strong,
.next-step-choice-card span {
  display: block;
}

.next-step-choice-card span {
  font-size: 0.82rem;
  color: #45607b;
  line-height: 1.35;
}

.build-start-card {
  margin-bottom: 0.85rem;
  border: 1px solid #d6e3f1;
  border-radius: 10px;
  background: linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}

.build-start-card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem;
  cursor: pointer;
}

.build-start-card > summary::-webkit-details-marker {
  display: none;
}

.build-start-card > summary::after {
  content: "▸";
  flex: 0 0 auto;
  color: #506279;
  font-size: 0.85rem;
  transition: transform 160ms ease;
}

.build-start-card[open] > summary::after {
  transform: rotate(90deg);
}

.build-start-card-body {
  padding: 0 0.9rem 0.9rem;
  display: grid;
  gap: 0.65rem;
}

.build-start-card strong {
  color: #17314c;
}

.build-start-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
}

@media (max-width: 640px) {
  .maven-launcher {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
  }

  .next-step-helper {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }

  .next-step-helper-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.document-canvas {
  display: grid;
  gap: 0.55rem;
}

.doc-lesson {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.65rem;
}

.doc-lesson-head {
  display: grid;
  gap: 0.55rem;
}

.doc-lesson-title-field,
.doc-lesson-head input {
  flex: 1;
}

.doc-lesson-title-field {
  margin: 0;
}

.doc-lesson-title-field .field-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3f5670;
}

.doc-lesson-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0.55rem 0 0.7rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #ffffff;
}

.doc-lesson-editor-bar .field-hint {
  margin: 0;
}

.doc-lesson-settings {
  margin: 0;
}

.doc-lesson-settings-body {
  display: grid;
  gap: 0.7rem;
}

.doc-lesson-settings-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.lesson-control-center-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #f8fbff;
}

.doc-single-builder-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.35rem 0 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.doc-single-builder-note-copy {
  display: grid;
  gap: 0.2rem;
}

.doc-single-builder-note .field-hint {
  margin: 0;
}

.doc-block {
  border: 1px solid var(--builder-surface-border, #d6e3f1);
  border-radius: 10px;
  background: var(--builder-surface-fill, var(--builder-surface-bg, #ffffff));
  color: var(--builder-surface-text, inherit);
  padding: 0.6rem;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
  cursor: pointer;
}

.doc-block.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.18);
}

.doc-block.is-expanded:not(.selected) {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--builder-surface-border, #d6e3f1));
  box-shadow: 0 0 0 1px rgba(31, 93, 156, 0.08);
}

.doc-block.is-expanded:not(.selected) .doc-block-head {
  background: color-mix(in srgb, var(--builder-surface-bg, #ffffff) 86%, #eef5ff 14%);
  border-radius: 8px;
  padding: 0.18rem 0.24rem;
  margin: -0.12rem -0.12rem 0.28rem;
}

.doc-block.is-expanded:not(.selected) .block-type {
  color: color-mix(in srgb, var(--builder-surface-text, #17314c) 82%, #1f5d9c 18%);
}

.doc-inline-editor {
  margin-top: 0.65rem;
  border-top: 1px dashed color-mix(in srgb, var(--builder-surface-border, #c5d6ea) 88%, transparent);
  padding-top: 0.65rem;
  cursor: default;
}

.doc-preview-disclosure {
  margin-top: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--builder-surface-border, #d7e3f0) 92%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--builder-surface-bg, #f8fbff) 92%, #ffffff 8%);
  overflow: hidden;
}

.doc-preview-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0.65rem;
  font-weight: 600;
  color: var(--builder-surface-text, #17314c);
  background: color-mix(in srgb, var(--builder-surface-bg, #f0f6fd) 84%, #ffffff 16%);
  border-bottom: 1px solid color-mix(in srgb, var(--builder-surface-border, #d7e3f0) 92%, transparent);
}

.doc-preview-disclosure > summary::-webkit-details-marker {
  display: none;
}

.doc-preview-disclosure > summary::after {
  content: "▾";
  float: right;
  color: #506279;
  transition: transform 140ms ease;
}

.doc-preview-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.doc-preview-disclosure:not([open]) > summary {
  border-bottom: 0;
}

.doc-preview-disclosure-body {
  padding: 0.55rem;
}

.doc-preview-disclosure-body .doc-block-preview {
  margin: 0;
}

.doc-block-preview {
  pointer-events: auto;
}

.doc-block-preview a,
.doc-block-preview button,
.doc-block-preview input,
.doc-block-preview select,
.doc-block-preview textarea {
  pointer-events: none !important;
}

.doc-block-preview .preview-accordion-summary {
  pointer-events: auto !important;
}

.doc-block-preview .preview-tab-btn {
  pointer-events: auto !important;
}

.doc-direct-editor {
  outline: none;
  border-radius: 6px;
  cursor: text;
}

.doc-direct-editor:focus {
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.25);
  background: #ffffff;
}

.doc-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.doc-block-head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 auto;
}

.doc-block-head-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.doc-block-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.doc-block-head-main .block-type {
  flex: 0 1 auto;
}

.doc-block-preview-text {
  color: #506279;
  font-size: 0.82rem;
  line-height: 1.35;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-block-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.doc-block-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.14rem 0.48rem;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(104, 133, 167, 0.24);
  background: rgba(237, 244, 255, 0.96);
  color: #254d74;
}

.doc-block-status-chip.is-clickable {
  appearance: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.doc-block-status-chip.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 45, 74, 0.1);
}

.doc-block-status-chip.is-clickable:focus-visible {
  outline: 2px solid rgba(31, 93, 156, 0.45);
  outline-offset: 2px;
}

.doc-block-status-chip.is-info {
  background: rgba(231, 244, 255, 0.98);
  border-color: rgba(88, 146, 201, 0.3);
  color: #20557f;
}

.doc-block-status-chip.is-warning {
  background: rgba(255, 245, 227, 0.98);
  border-color: rgba(190, 142, 46, 0.3);
  color: #7a5310;
}

.doc-block-status-chip.is-accent {
  background: rgba(236, 241, 255, 0.98);
  border-color: rgba(101, 126, 210, 0.28);
  color: #3348a2;
}

.doc-block-status-chip.is-muted {
  background: rgba(244, 247, 250, 0.98);
  border-color: rgba(133, 153, 176, 0.22);
  color: #55687d;
}

.doc-block-head-main .editor-layout-switch-inline {
  margin-left: 0;
}

.doc-block-head-main .editor-layout-switch-inline .editor-view-switch {
  padding: 0.18rem;
  gap: 0.2rem;
}

.doc-block-head-main .editor-layout-switch-inline .editor-view-chip {
  padding: 0.28rem 0.6rem;
  font-size: 0.76rem;
}

.doc-block-collapse-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0.05rem 0.24rem;
  line-height: 1;
  font-size: 0.74rem;
  font-weight: 600;
}

.doc-block-settings-toggle {
  margin-left: 0;
}

.doc-block-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 0.1rem;
}

.doc-quick-bar {
  position: static;
  display: flex;
  justify-content: flex-end;
  width: max-content;
  margin: 0 0 0 auto;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid #d6e3f1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: none;
  max-height: 3rem;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.doc-quick-bar-inline {
  margin: 0;
  padding: 0.14rem;
  gap: 0.18rem;
}

.doc-quick-bar-inline .doc-quick-btn {
  width: 1.7rem;
  height: 1.7rem;
}

.doc-quick-btn {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  line-height: 1;
}

.doc-quick-btn[data-tip],
.doc-block-collapse-btn[data-tip] {
  position: relative;
  overflow: visible;
}

.doc-quick-btn[data-tip]::before,
.doc-block-collapse-btn[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 0.18rem);
  max-width: calc(100vw - 1.5rem);
  width: max-content;
  padding: 0.34rem 0.5rem;
  border-radius: 0.48rem;
  background: rgba(18, 31, 47, 0.96);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(7, 15, 24, 0.24);
  z-index: 4600;
}

.doc-quick-btn[data-tip]::after,
.doc-block-collapse-btn[data-tip]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.12rem);
  width: 0.55rem;
  height: 0.55rem;
  background: rgba(18, 31, 47, 0.96);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 4599;
}

.doc-quick-btn[data-tip]:hover::before,
.doc-quick-btn[data-tip]:focus-visible::before,
.doc-block-collapse-btn[data-tip]:hover::before,
.doc-block-collapse-btn[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.doc-quick-btn[data-tip]:hover::after,
.doc-quick-btn[data-tip]:focus-visible::after,
.doc-block-collapse-btn[data-tip]:hover::after,
.doc-block-collapse-btn[data-tip]:focus-visible::after {
  opacity: 1;
}

.doc-block-collapse-btn[data-tip]::before {
  left: auto;
  right: 0;
  top: calc(100% + 0.45rem);
  bottom: auto;
  transform: translate(0, -0.18rem);
}

.doc-block-collapse-btn[data-tip]::after {
  left: auto;
  right: 0.62rem;
  top: calc(100% + 0.12rem);
  bottom: auto;
  transform: rotate(45deg);
}

.doc-block-collapse-btn[data-tip]:hover::before,
.doc-block-collapse-btn[data-tip]:focus-visible::before {
  transform: translate(0, 0);
}

.doc-quick-btn-advanced {
  font-size: 0.92rem;
  font-weight: 700;
}

.doc-quick-icon-svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
  pointer-events: none;
}

.doc-block-tools {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.doc-insert-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.doc-insert-btn {
  border: 1px dashed #8ea5c1;
  background: #f7fbff;
  color: #21415f;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.1rem;
}

.doc-quick-add-btn {
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  font-size: 1rem;
  line-height: 1;
}

.doc-recent-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.doc-recent-chip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  padding: 0;
  font-size: 0.63rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  border-color: #9fb6d1;
  background: #eef4fb;
  color: #113654;
}

.doc-recent-chip:hover {
  background: #ddeafe;
}

.inspector-shell {
  padding: 0.7rem;
  position: sticky;
  top: 0.8rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5.5rem);
  overflow: hidden;
  min-width: 0;
}

.inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.inspector-head h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.15;
}

.inspector-shell.collapsed {
  padding: 0.5rem 0.35rem;
}

.inspector-shell #block-inspector {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.inspector-global-tools {
  flex: 0 0 auto;
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inspector-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  margin: 0 0 0.55rem;
  padding: 0.6rem 0.7rem 0.5rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.96);
  backdrop-filter: blur(8px);
}

.inspector-breadcrumb-trail {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #17324d;
}

.inspector-global-tools .toolbar-overflow-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.inspector-global-tools .toolbar-overflow-row > * {
  min-width: 0;
}

.inspector-global-tools .toolbar-overflow-row button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.inspector-global-tools .toolbar-overflow-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.inspector-global-tools .toolbar-overflow-grid .mode-toggle-column {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.workspace-auto-collapse-toggle {
  align-items: start;
  margin: 0;
}

.inspector-global-tools .toolbar-overflow-grid .mode-toggle {
  display: grid;
  align-items: start;
  gap: 0.35rem;
  min-width: 0;
}

.inspector-global-tools .toolbar-overflow-grid .mode-toggle .mode-toggle-label-stacked {
  justify-self: start;
}

.inspector-global-tools .toolbar-overflow-grid .mode-toggle select {
  width: 100%;
  min-width: 0;
}

#rte-mode {
  font-size: 0.8rem;
  line-height: 1.1;
  padding: 0.35rem 1.45rem 0.35rem 0.42rem;
  letter-spacing: -0.01em;
}

.editor-mode-button-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.editor-mode-button-group .btn,
.editor-mode-button-group button {
  min-width: 0;
  padding-inline: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.1;
}

.editor-mode-button-group .btn.active,
.editor-mode-button-group button.active {
  background: #16324f;
  color: #ffffff;
  border-color: #16324f;
}

body.night-mode .editor-mode-button-group .btn.active,
body.night-mode .editor-mode-button-group button.active {
  background: #d7e7ff;
  color: #11263a;
  border-color: #d7e7ff;
}

.workspace-diagnostics {
  grid-column: 1 / -1;
  padding: 0.55rem 0.65rem;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #f8fbff;
}

.workspace-diagnostics summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.workspace-diagnostics summary::-webkit-details-marker {
  display: none;
}

.workspace-diagnostics summary::after {
  content: '▴';
  float: right;
  font-size: 0.8rem;
  color: #5f7190;
}

.workspace-diagnostics:not([open]) summary::after {
  content: '▾';
}

.workspace-diagnostics-body {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.45rem;
}

.workspace-diagnostics .quiz-inline {
  margin: 0;
}

.workspace-diagnostics-actions {
  display: flex;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.inspector-shell.collapsed #block-inspector,
.inspector-shell.collapsed .inspector-head h2,
.inspector-shell.collapsed .inspector-global-tools {
  display: none;
}

.inspector-shell.collapsed .inspector-head {
  justify-content: center;
  margin-bottom: 0;
}

.inspector-empty {
  border: 1px dashed #b8c9dc;
  border-radius: 8px;
  background: #f7fbff;
  padding: 0.7rem;
  color: var(--muted);
  font-size: 0.87rem;
}

.inspector-group {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 0.55rem;
  overflow: hidden;
}

.inspector-group > summary {
  cursor: pointer;
  padding: 0.45rem 0.6rem;
  background: #f5f9ff;
  color: #1b3b5b;
  font-weight: 600;
}

.inspector-group > .group-body {
  padding: 0.55rem;
  display: grid;
  gap: 0.5rem;
}

.inspector-global-tools > .group-body {
  min-height: 0;
  max-height: min(58vh, calc(100vh - 12rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 1360px) {
  .builder-shell {
    grid-template-columns: var(--lesson-rail-width, 228px) minmax(560px, 1fr) var(--inspector-resizer-width, 8px) minmax(220px, min(var(--inspector-width, 320px), 34vw));
  }
}

@media (max-width: 1120px) {
  .inspector-global-tools .toolbar-overflow-row,
  .inspector-global-tools .toolbar-overflow-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.block-library {
  position: fixed;
  inset: 0;
  background: rgba(7, 15, 27, 0.08);
  z-index: 3200;
  display: block;
  padding: 0;
}

.command-palette {
  position: fixed;
  inset: 0;
  background: rgba(7, 15, 27, 0.14);
  z-index: 50;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 15, 27, 0.18);
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.feedback-modal[hidden] {
  display: none !important;
}

#course-search-modal,
#preview-search-modal {
  z-index: 2606;
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.99), rgba(238, 244, 251, 0.995));
  backdrop-filter: blur(6px);
}

.feedback-modal-panel {
  width: min(760px, 96vw);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 1px solid #c8d9ec;
  border-radius: 14px;
  background: #fff;
  padding: 0.95rem;
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 22px 42px rgba(9, 22, 36, 0.24);
}

.workspace-settings-modal-panel {
  width: min(1180px, 97vw);
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.workspace-settings-modal-tools {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
}

.workspace-settings-modal-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.workspace-settings-modal-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.workspace-settings-modal-admin-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #f8fbff;
}

.workspace-settings-modal-theme-editor {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.2rem;
  scrollbar-gutter: stable;
}

.preview-dashboard-modal-panel {
  width: min(1280px, 98vw);
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.preview-dashboard-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.preview-dashboard-view-toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid #d7e3f0;
  border-radius: 999px;
  background: #f8fbff;
}

.preview-dashboard-view-toggle .secondary {
  min-height: 2.2rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

.preview-dashboard-view-toggle .secondary.is-active {
  border-color: #1f5d9c;
  background: #1f5d9c;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(31, 93, 156, 0.18);
}

.preview-dashboard-search {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.preview-dashboard-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.2rem;
  display: grid;
  gap: 0.9rem;
  scrollbar-gutter: stable;
}

.preview-dashboard-hero,
.preview-dashboard-section {
  border: 1px solid #d7e3f0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96)),
    #ffffff;
  box-shadow: 0 18px 38px rgba(15, 32, 51, 0.08);
}

.preview-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.05rem 1.1rem;
}

.preview-dashboard-hero-copy {
  display: grid;
  gap: 0.38rem;
}

.preview-dashboard-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  background: #ebf4ff;
  color: #1d5b97;
  border: 1px solid #cfe1f7;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preview-dashboard-hero h3 {
  margin: 0;
  color: #102945;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.4rem, 1.08rem + 0.7vw, 1.9rem);
  line-height: 1.04;
}

.preview-dashboard-hero p {
  margin: 0;
  color: #51697f;
  line-height: 1.5;
  max-width: 68ch;
}

.preview-dashboard-hero-actions,
.preview-dashboard-action-row,
.preview-dashboard-action-grid,
.preview-dashboard-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.preview-dashboard-hero-actions {
  align-items: flex-start;
  justify-content: flex-end;
}

.preview-dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.preview-dashboard-action-btn {
  min-height: 2.3rem;
  padding: 0.5rem 0.92rem;
  border-radius: 12px;
}

.preview-dashboard-section {
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.75rem;
}

.preview-dashboard-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.preview-dashboard-section-copy {
  display: grid;
  gap: 0.18rem;
}

.preview-dashboard-section-copy > strong {
  color: #102945;
  font-size: 1rem;
}

.preview-dashboard-section-body {
  display: grid;
  gap: 0.75rem;
}

.preview-dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.preview-dashboard-metric-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid #dbe6f1;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.preview-dashboard-metric-card.is-interactive {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.preview-dashboard-metric-card.is-interactive:hover,
.preview-dashboard-metric-card.is-interactive:focus-visible {
  transform: translateY(-1px);
  border-color: #93b3d4;
  box-shadow: 0 14px 24px rgba(19, 41, 69, 0.08);
}

.preview-dashboard-metric-card.is-active {
  border-color: #6f98c3;
  box-shadow: 0 16px 30px rgba(39, 82, 130, 0.12);
}

.preview-dashboard-metric-card.tone-assessment {
  background: linear-gradient(180deg, #fffdf5, #fff8e6);
  border-color: #ead7a6;
}

.preview-dashboard-metric-card.tone-builder {
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
  border-color: #cfe0f6;
}

.preview-dashboard-metric-card.tone-theme {
  background: linear-gradient(180deg, #fff9f4, #fff0e4);
  border-color: #ebccb1;
}

.preview-dashboard-metric-card.tone-adaptive {
  background: linear-gradient(180deg, #f6fbff, #e8f4ff);
  border-color: #bfd8f2;
}

.preview-dashboard-metric-card.tone-lesson {
  background: linear-gradient(180deg, #f8fcff, #eff7fb);
  border-color: #cfe4ef;
}

.preview-dashboard-metric-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #56708a;
}

.preview-dashboard-metric-value {
  color: #102945;
  font-size: 1.7rem;
  line-height: 1;
}

.preview-dashboard-metric-meta {
  color: #5d748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.preview-dashboard-metric-footer {
  color: #2d5b86;
  font-size: 0.79rem;
  font-weight: 600;
}

.preview-dashboard-inventory-row,
.preview-dashboard-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-dashboard-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.58rem;
  border-radius: 999px;
  border: 1px solid #d5e0ec;
  background: #f8fbff;
  color: #35506e;
  font-size: 0.76rem;
  font-weight: 600;
}

.preview-dashboard-inventory-chip {
  display: grid;
  gap: 0.14rem;
  min-width: min(100%, 12rem);
  padding: 0.72rem 0.82rem;
  border-radius: 14px;
  text-align: left;
}

.preview-dashboard-inventory-chip strong {
  font-size: 0.92rem;
}

.preview-dashboard-inventory-chip span {
  font-size: 0.78rem;
  color: #60778e;
}

.preview-dashboard-inventory-chip.is-active {
  border-color: #1f5d9c;
  background: #edf5ff;
}

.preview-dashboard-lesson-stack,
.preview-dashboard-builder-list,
.preview-dashboard-course-list {
  display: grid;
  gap: 0.7rem;
}

.preview-dashboard-lesson-card {
  border: 1px solid #dbe6f1;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.preview-dashboard-lesson-card > summary {
  list-style: none;
  cursor: pointer;
}

.preview-dashboard-lesson-card > summary::-webkit-details-marker {
  display: none;
}

.preview-dashboard-lesson-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.9rem 0.95rem;
  background: linear-gradient(180deg, #fbfdff, #f5f9fe);
}

.preview-dashboard-lesson-summary-copy {
  display: grid;
  gap: 0.36rem;
}

.preview-dashboard-lesson-summary-copy > strong {
  color: #102945;
  font-size: 1rem;
}

.preview-dashboard-lesson-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem 0.95rem;
}

.preview-dashboard-builder-item {
  width: 100%;
  display: grid;
  gap: 0.38rem;
  padding: 0.82rem 0.88rem;
  border: 1px solid #d7e3ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.preview-dashboard-builder-item:hover,
.preview-dashboard-builder-item:focus-visible {
  transform: translateY(-1px);
  border-color: #9db6d2;
  box-shadow: 0 12px 22px rgba(19, 41, 69, 0.08);
}

.preview-dashboard-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.preview-dashboard-builder-head strong {
  color: #12304d;
  font-size: 0.95rem;
}

.preview-dashboard-builder-type {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d6e4f2;
  background: #f7fbff;
  color: #46647f;
  font-size: 0.74rem;
  white-space: nowrap;
}

.preview-dashboard-builder-chip-row {
  gap: 0.38rem;
}

.preview-dashboard-builder-chip {
  background: #f4f8fd;
}

.preview-dashboard-builder-preview,
.preview-dashboard-course-description {
  color: #5a7086;
  font-size: 0.86rem;
  line-height: 1.45;
}

.preview-dashboard-builder-locator {
  color: #6b8094;
  font-size: 0.79rem;
  line-height: 1.4;
}

.preview-dashboard-drilldown-list {
  display: grid;
  gap: 0.7rem;
}

.preview-dashboard-drilldown-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.88rem 0.95rem;
  border: 1px solid #dbe6f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.preview-dashboard-drilldown-copy {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.preview-dashboard-drilldown-copy > strong {
  color: #12304d;
  font-size: 0.94rem;
}

.preview-dashboard-drilldown-meta {
  color: #5f7488;
  font-size: 0.83rem;
  line-height: 1.45;
}

.preview-dashboard-drilldown-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.preview-dashboard-course-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.preview-dashboard-course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.9rem 0.95rem;
  border: 1px solid #dbe6f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.preview-dashboard-course-card.is-current {
  border-color: #bdd4ef;
  background: linear-gradient(180deg, #f7fbff, #edf5ff);
}

.preview-dashboard-course-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.preview-dashboard-course-copy > strong {
  color: #102945;
  font-size: 0.98rem;
}

.preview-dashboard-empty,
.preview-dashboard-empty-inline {
  display: grid;
  gap: 0.3rem;
  border: 1px dashed #cfddeb;
  border-radius: 12px;
  background: #f8fbff;
  color: #526a82;
  padding: 0.9rem 0.95rem;
}

body[data-color-mode="dark"] .preview-dashboard-view-toggle {
  border-color: #334b66;
  background: #132336;
}

body[data-color-mode="dark"] .preview-dashboard-view-toggle .secondary.is-active {
  border-color: #78a7de;
  background: #2e6db4;
  color: #ffffff;
}

body[data-color-mode="dark"] .preview-dashboard-hero,
body[data-color-mode="dark"] .preview-dashboard-section,
body[data-color-mode="dark"] .preview-dashboard-lesson-card,
body[data-color-mode="dark"] .preview-dashboard-course-card,
body[data-color-mode="dark"] .preview-dashboard-metric-card,
body[data-color-mode="dark"] .preview-dashboard-builder-item,
body[data-color-mode="dark"] .preview-dashboard-drilldown-item {
  background: linear-gradient(180deg, rgba(18, 32, 51, 0.98), rgba(12, 22, 35, 0.98));
  border-color: #2d445d;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

body[data-color-mode="dark"] .preview-dashboard-kicker,
body[data-color-mode="dark"] .preview-dashboard-builder-type,
body[data-color-mode="dark"] .preview-dashboard-chip {
  background: #15283c;
  border-color: #36506d;
  color: #d6e6fb;
}

body[data-color-mode="dark"] .preview-dashboard-builder-chip {
  background: #182b40;
}

body[data-color-mode="dark"] .preview-dashboard-hero h3,
body[data-color-mode="dark"] .preview-dashboard-section-copy > strong,
body[data-color-mode="dark"] .preview-dashboard-lesson-summary-copy > strong,
body[data-color-mode="dark"] .preview-dashboard-course-copy > strong,
body[data-color-mode="dark"] .preview-dashboard-builder-head strong,
body[data-color-mode="dark"] .preview-dashboard-drilldown-copy > strong,
body[data-color-mode="dark"] .preview-dashboard-metric-value {
  color: #eef5ff;
}

body[data-color-mode="dark"] .preview-dashboard-hero p,
body[data-color-mode="dark"] .preview-dashboard-metric-meta,
body[data-color-mode="dark"] .preview-dashboard-metric-footer,
body[data-color-mode="dark"] .preview-dashboard-builder-preview,
body[data-color-mode="dark"] .preview-dashboard-builder-locator,
body[data-color-mode="dark"] .preview-dashboard-drilldown-meta,
body[data-color-mode="dark"] .preview-dashboard-course-description,
body[data-color-mode="dark"] .preview-dashboard-empty,
body[data-color-mode="dark"] .preview-dashboard-empty-inline {
  color: #b8cbe0;
}

body[data-color-mode="dark"] .preview-dashboard-empty,
body[data-color-mode="dark"] .preview-dashboard-empty-inline {
  background: #132336;
  border-color: #334b66;
}

@media (max-width: 900px) {
  .preview-dashboard-modal-panel {
    width: min(98vw, 98vw);
  }

  .preview-dashboard-toolbar,
  .preview-dashboard-hero,
  .preview-dashboard-course-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-dashboard-hero-actions {
    justify-content: flex-start;
  }
}

body.course-create-modal-open #course-create-modal {
  z-index: 240;
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.99), rgba(238, 244, 251, 0.995));
  backdrop-filter: blur(6px);
}

body.publish-modal-open #publish-modal {
  z-index: 235;
  background: linear-gradient(180deg, rgba(244, 248, 253, 0.99), rgba(238, 244, 251, 0.995));
  backdrop-filter: blur(6px);
  place-items: start center;
  padding-top: 1.8rem;
}

body.workspace-settings-modal-open #workspace-settings-modal {
  z-index: 236;
}

body.publish-modal-open #tab-preview .preview-head,
body.publish-modal-open .preview-header,
body.publish-modal-open .workspace-course-title,
body.publish-modal-open .toolbar {
  opacity: 0;
  pointer-events: none;
}

body.course-create-modal-open #tab-preview .preview-head,
body.course-create-modal-open .preview-header,
body.course-create-modal-open .workspace-course-title,
body.course-create-modal-open .toolbar {
  opacity: 0;
  pointer-events: none;
}

.cookie-manage-btn {
  box-shadow: 0 12px 28px rgba(13, 39, 67, 0.18);
}

.cookie-consent-banner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 25;
  width: min(32rem, calc(100vw - 5rem));
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(20, 33, 51, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 54px rgba(13, 39, 67, 0.22);
  backdrop-filter: blur(10px);
}

.cookie-consent-banner[hidden] {
  display: none !important;
}

.cookie-consent-copy {
  display: grid;
  gap: 0.22rem;
}

.cookie-consent-copy strong {
  color: var(--brand-ink);
}

.cookie-consent-copy span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.cookie-consent-modal-panel {
  width: min(42rem, 96vw);
}

.cookie-consent-region-summary {
  margin-top: 0.65rem;
}

.cookie-consent-gpc-note {
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #d2e2f2;
  border-radius: 14px;
  background: #f3f8fd;
  color: var(--brand-ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cookie-consent-gpc-note[hidden] {
  display: none !important;
}

.cookie-consent-region-grid {
  margin-top: 0.8rem;
}

.cookie-consent-options {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.cookie-consent-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: #f8fbff;
}

.cookie-consent-option input {
  margin-top: 0.2rem;
}

.cookie-consent-option span {
  display: grid;
  gap: 0.14rem;
}

.cookie-consent-option strong {
  color: var(--brand-ink);
}

.cookie-consent-option small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.cookie-consent-option.is-required {
  background: #f3f7fc;
}


.course-create-modal-panel {
  width: min(1100px, 97vw);
  max-height: min(820px, 95vh);
  overflow: auto;
  padding: 0.66rem;
  gap: 0.38rem;
  grid-template-rows: auto auto;
}

.publish-modal-panel {
  width: min(1120px, 97vw);
  max-height: min(780px, 94vh);
  overflow: hidden;
  padding: 0.56rem 0.62rem 0.62rem;
  gap: 0.38rem;
  align-self: start;
}

.publish-shared-shell,
.publish-modal-content-slot {
  display: grid;
  gap: 0.52rem;
}

.publish-modal-content-slot {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

.publish-modal-footnote {
  margin-top: 0;
}

.publish-inline-slot {
  display: grid;
}

.publish-modal-content-slot .publish-shared-shell {
  gap: 0.5rem;
}

.publish-modal-content-slot .publish-target-shell {
  margin-top: 0;
}

.publish-modal-content-slot .publish-dashboard-shell,
.publish-modal-content-slot .publish-validation-actions,
.publish-modal-content-slot .publish-disclosure {
  margin-top: 0;
}

.publish-modal-content-slot .publish-target-shell,
.publish-modal-content-slot .publish-dashboard-shell,
.publish-modal-content-slot .publish-disclosure {
  width: 100%;
}

.publish-modal-footer-actions {
  margin-top: 0.1rem;
  padding-top: 0.4rem;
  border-top: 1px solid #d8e3ef;
  justify-content: flex-end;
}

.course-create-body {
  display: grid;
  gap: 0.32rem;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.course-create-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.course-create-panel {
  min-height: 0;
  align-content: start;
}

.import-stepper {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.import-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(20, 33, 51, 0.12);
  border-radius: 14px;
  background: #fbfdff;
}

.import-step.is-active {
  border-color: rgba(31, 93, 156, 0.34);
  background: #edf5ff;
}

.import-step.is-complete {
  border-color: rgba(78, 145, 88, 0.32);
  background: #f4fbf4;
}

.import-step-number {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #dbe8f6;
  color: #17314c;
  font-weight: 700;
  font-size: 0.76rem;
}

.import-step.is-active .import-step-number {
  background: var(--brand);
  color: #ffffff;
}

.import-step.is-complete .import-step-number {
  background: #5f9b69;
  color: #ffffff;
}

.import-step-copy {
  display: grid;
  gap: 0.08rem;
}

.import-step-copy strong {
  color: var(--brand-ink);
}

.import-step-copy span {
  color: var(--muted);
  line-height: 1.28;
  font-size: 0.81rem;
}

.import-stepper-review {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.course-import-resume {
  display: grid;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(31, 93, 156, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.course-import-resume strong {
  color: var(--brand-ink);
}

.course-import-resume-error {
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: rgba(173, 52, 62, 0.08);
  border: 1px solid rgba(173, 52, 62, 0.18);
  color: #8a2430;
  font-size: 0.92rem;
}

.course-import-resume-history {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.course-import-resume-history li + li {
  margin-top: 0.18rem;
}

.course-import-resume-progress {
  margin-top: 0;
}

.course-import-resume-actions {
  justify-content: flex-start;
  gap: 0.4rem;
}

.course-import-resume-details {
  margin-top: 0.1rem;
}

.course-import-resume-secondary-actions {
  padding-top: 0.2rem;
}

body[data-color-mode="dark"] .course-import-resume-error {
  background: rgba(255, 120, 134, 0.12);
  border-color: rgba(255, 120, 134, 0.24);
  color: #ffb7bf;
}

.course-create-choice {
  display: grid;
  gap: 0.28rem;
  align-content: start;
  min-height: 0;
  align-self: start;
  padding: 0.65rem;
  border: 1px solid rgba(20, 33, 51, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.course-create-choice strong,
.course-import-panel strong {
  font-size: 0.92rem;
  color: var(--brand-ink);
}

.course-create-choice-primary {
  border-color: rgba(31, 93, 156, 0.26);
  background: linear-gradient(180deg, #f2f8ff 0%, #e6f0fb 100%);
  box-shadow: 0 10px 24px rgba(31, 93, 156, 0.08);
}

.course-create-choice-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.1);
  color: #1f5d9c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.course-create-choice-details {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.18rem;
}

.course-create-choice-details span {
  color: var(--brand-ink);
  font-size: 0.76rem;
  line-height: 1.22;
}

.course-create-choice span {
  color: var(--muted);
  line-height: 1.24;
  font-size: 0.8rem;
}

.course-create-choice:hover {
  border-color: rgba(31, 93, 156, 0.38);
  box-shadow: 0 14px 30px rgba(31, 93, 156, 0.12);
}

.course-import-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.28rem;
  padding: 0.55rem;
  border: 1px solid rgba(20, 33, 51, 0.12);
  border-radius: 16px;
  background: #fdfefe;
  min-height: 0;
}

.course-import-summary {
  display: grid;
  gap: 0.16rem;
  padding-bottom: 0.12rem;
  border-bottom: 1px solid rgba(20, 33, 51, 0.08);
}

.course-import-summary-topline {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.95fr);
  gap: 0.65rem;
  align-items: start;
}

.course-import-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.course-import-summary-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.course-create-scratch-quick-btn {
  flex: 0 0 auto;
  padding: 0.54rem 0.88rem;
  min-height: 2.2rem;
  border: 1px solid rgba(31, 93, 156, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, #f2f8ff 0%, #e3eefb 100%);
  color: var(--brand-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(31, 93, 156, 0.12);
}

.course-create-scratch-quick-btn:hover {
  border-color: rgba(31, 93, 156, 0.42);
  box-shadow: 0 12px 24px rgba(31, 93, 156, 0.16);
}

.course-import-main {
  display: grid;
  gap: 0.38rem;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.course-import-source-card,
.course-import-options-disclosure {
  align-self: start;
}

.course-import-config-grid {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.course-import-options-disclosure {
  margin: 0;
}

.course-import-options-disclosure > section {
  display: grid;
  gap: 0.35rem;
}

.course-import-source-card {
  display: grid;
  gap: 0.32rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid #bfd5ea;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
  box-shadow: 0 8px 18px rgba(24, 52, 84, 0.05);
}

.course-import-source-head {
  display: grid;
  gap: 0.1rem;
}

.import-type-guide-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding-left: 1.1rem;
}

.course-create-scratch-panel {
  display: grid;
}

.course-create-scratch-panel .course-create-choice {
  width: 100%;
}

.course-import-panel input[type="file"] {
  padding: 0.48rem;
  border: 1px dashed rgba(31, 93, 156, 0.28);
  border-radius: 12px;
  background: #f8fbff;
}

.course-import-inline-options {
  display: grid;
  gap: 0.18rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #f7fbff;
}

.course-import-ai-card {
  display: grid;
  gap: 0.42rem;
}

.course-import-ai-advanced {
  margin-top: 0.08rem;
}

.course-import-ai-advanced > summary {
  padding: 0.72rem 0.8rem;
}

.course-import-ai-settings-grid {
  display: grid;
  gap: 0.48rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.course-import-actions {
  margin-top: auto;
  display: grid;
  gap: 0.32rem;
  padding-top: 0;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(253, 254, 254, 0.72), rgba(253, 254, 254, 0.98) 26%);
  padding-bottom: 0.1rem;
}

.course-import-actions > .status-progress {
  margin-top: 0;
}

.course-import-panel .build-disclosure {
  border-color: #bfd5ea;
  background: linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
  box-shadow: 0 8px 18px rgba(24, 52, 84, 0.05);
}

.course-import-panel .build-disclosure > summary {
  padding: 0.95rem 1rem;
}

.course-import-panel .build-disclosure > summary:hover,
.course-import-panel .build-disclosure > summary:focus-visible {
  background: rgba(47, 109, 180, 0.04);
}

.welcome-setup-modal-panel {
  width: min(980px, 96vw);
  max-height: min(760px, 92vh);
  overflow: auto;
}

.welcome-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.9fr);
  gap: 0.9rem;
  align-items: start;
}

.welcome-setup-main {
  display: grid;
  gap: 0.75rem;
}

.welcome-setup-stepper {
  margin-top: 0;
}

.welcome-setup-card,
.welcome-setup-summary {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid rgba(20, 33, 51, 0.12);
  border-radius: 16px;
  background: #fbfdff;
}

.welcome-setup-card strong,
.welcome-setup-summary strong {
  color: var(--brand-ink);
}

.welcome-setup-prompt-toggle {
  margin-top: -0.15rem;
}

.welcome-setup-upload-field {
  display: grid;
  gap: 0.35rem;
}

.welcome-setup-upload-field input[type="file"] {
  padding: 0.48rem;
  border: 1px dashed rgba(31, 93, 156, 0.28);
  border-radius: 12px;
  background: #f8fbff;
}

.welcome-setup-summary {
  position: sticky;
  top: 0.25rem;
}

.welcome-setup-summary-body {
  display: grid;
  gap: 0.7rem;
}

.welcome-setup-summary-section {
  display: grid;
  gap: 0.22rem;
  padding: 0.75rem;
  border: 1px solid #d9e4ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.welcome-setup-summary-section strong {
  font-size: 0.88rem;
}

.welcome-setup-summary-section span,
.welcome-setup-summary-section li {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.36;
}

.welcome-setup-summary-section ul {
  margin: 0;
  padding-left: 1rem;
}

.welcome-setup-summary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.welcome-setup-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #edf5ff;
  color: #1b4876;
  font-size: 0.74rem;
  font-weight: 700;
}

.welcome-setup-actions {
  justify-content: space-between;
}

.welcome-setup-actions button[hidden],
.welcome-setup-step[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  .course-import-main {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.88fr);
    align-items: start;
  }

  .course-import-options-disclosure > summary {
    padding: 0.82rem 0.9rem;
  }

  .course-create-modal-panel .import-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .course-create-modal-panel .field-hint {
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .course-create-modal-panel .powerpoint-import-options {
    gap: 0.35rem;
  }
}

@media (max-width: 760px) {
  .course-create-modal-panel {
    max-height: min(760px, 92vh);
    overflow: auto;
  }

  .course-create-body {
    overflow: auto;
  }

  .course-import-main {
    overflow: visible;
    padding-right: 0;
  }

  .course-import-ai-settings-grid {
    grid-template-columns: 1fr;
  }

  .course-import-actions {
    position: static;
    background: transparent;
    padding-bottom: 0;
  }

  .course-import-summary-topline {
    grid-template-columns: 1fr;
  }

  .course-import-summary-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .course-create-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

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

  .welcome-setup-summary {
    position: static;
  }

  .cookie-manage-btn {
    left: 0.75rem;
    bottom: 0.75rem;
  }

  .cookie-consent-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4rem;
    width: auto;
  }

  .import-step {
    grid-template-columns: 1fr;
  }

  .course-import-config-grid {
    grid-template-columns: 1fr;
  }
}

.feedback-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.publish-modal-head {
  display: grid;
  grid-template-columns: minmax(2.4rem, 1fr) auto minmax(2.4rem, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.publish-modal-head-spacer {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.publish-modal-title {
  justify-self: center;
  margin: 0;
  color: #102945;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.32rem, 1.05rem + 0.7vw, 1.76rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-align: center;
}

.publish-modal-head-copy {
  display: grid;
  justify-items: center;
  gap: 0.02rem;
}

.publish-head-copy {
  display: grid;
  justify-self: center;
  justify-items: center;
  gap: 0.02rem;
  text-align: center;
}

.publish-course-context {
  margin: 0;
  color: #54708e;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  padding: 0.02rem 0.08rem 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.publish-modal-head > .secondary {
  justify-self: end;
}

.publish-modal-preview-btn {
  display: inline-grid;
  justify-items: center;
  gap: 0.04rem;
  min-width: 5.8rem;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.feedback-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.feedback-context-preview {
  border: 1px solid #d4e0ee;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.75rem;
  font-size: 0.84rem;
  color: #35506c;
  white-space: pre-wrap;
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.feedback-log-modal-panel {
  width: min(980px, 96vw);
}

.feedback-log-modal-panel .feedback-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feedback-log-view-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.feedback-log-view-tabs .active {
  background: #1f5d9c;
  color: #fff;
  border-color: #1f5d9c;
}

.feedback-log-list {
  display: grid;
  gap: 0.6rem;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 0.2rem;
}

.feedback-log-item {
  border: 1px solid #d4e0ee;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.7rem;
  display: grid;
  gap: 0.35rem;
}

.feedback-log-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.feedback-log-body {
  color: #1d3550;
  white-space: pre-wrap;
}

.feedback-log-detail {
  border-top: 1px dashed #c9d8e9;
  padding-top: 0.35rem;
  color: #3e5872;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.feedback-case-item {
  border: 1px solid #d4e0ee;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.85rem;
  display: grid;
  gap: 0.6rem;
}

.feedback-case-chips,
.feedback-case-related {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.feedback-case-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.feedback-case-controls textarea {
  min-height: 5.5rem;
}

@media (max-width: 860px) {
  .feedback-log-modal-panel .feedback-form-grid,
  .feedback-case-controls {
    grid-template-columns: 1fr;
  }
}

.review-inbox-modal-panel {
  width: min(900px, 96vw);
}

.review-inbox-list {
  display: grid;
  gap: 0.7rem;
  max-height: min(60vh, 620px);
  overflow: auto;
  padding-right: 0.2rem;
}

.review-inbox-item {
  border: 1px solid #d4e0ee;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.8rem;
  display: grid;
  gap: 0.5rem;
}

.review-inbox-item.is-version-warning {
  border-color: #f0c179;
  background: #fffaf1;
}

.review-inbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-inbox-head strong {
  color: #16314b;
}

.review-inbox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.review-inbox-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.46rem;
  border-radius: 999px;
  border: 1px solid #c8d8eb;
  background: #eef5ff;
  color: #254869;
  font-size: 0.74rem;
  font-weight: 600;
}

.review-inbox-pill.is-warning {
  border-color: #efc17b;
  background: #fff2d8;
  color: #8a5411;
}

.review-inbox-body {
  color: #18324c;
  white-space: pre-wrap;
}

.review-inbox-byline,
.review-inbox-detail {
  color: #4b6887;
  font-size: 0.84rem;
  white-space: pre-wrap;
}

.review-inbox-warning {
  border: 1px solid #efc17b;
  border-radius: 10px;
  background: #fff5e3;
  color: #7f5417;
  padding: 0.55rem 0.65rem;
  font-size: 0.83rem;
}

.review-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.review-inbox-resolution {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 0.7rem;
}

.review-inbox-resolution label {
  display: grid;
  gap: 0.25rem;
}

.review-inbox-resolution textarea,
.review-inbox-resolution select {
  width: 100%;
}

@media (max-width: 760px) {
  .review-inbox-resolution {
    grid-template-columns: 1fr;
  }
}

.command-palette[hidden] {
  display: none !important;
}

.command-palette-panel {
  width: min(860px, 96vw);
  max-height: min(760px, 92vh);
  border: 1px solid #c9d9ec;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
  overflow: auto;
  margin: 5vh auto 0;
  box-shadow: 0 22px 42px rgba(7, 21, 35, 0.28);
}

.command-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.command-palette-results {
  display: grid;
  gap: 0.4rem;
}

.command-item {
  border: 1px solid #d4e0ee;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.5rem 0.55rem;
  text-align: left;
  color: #153450;
  display: grid;
  gap: 0.2rem;
}

.command-item.active {
  border-color: var(--brand);
  background: #e7f1ff;
}

.command-item .command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #4d6078;
}

.block-library[hidden] {
  display: none !important;
}

.block-library-panel {
  position: absolute;
  width: min(980px, calc(100vw - 28px));
  max-height: min(780px, calc(100vh - 24px));
  overflow: hidden;
  border: 1px solid #c8d9ec;
  border-radius: 12px;
  background: #fff;
  padding: 0.55rem 0.65rem 0.68rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.34rem;
  box-shadow: 0 18px 38px rgba(9, 22, 36, 0.24);
}

.block-library-head {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
}

.block-library-head > strong {
  font-size: 1.05rem;
}

.block-library-head-search {
  display: block;
  min-width: 0;
}

.block-library-head-search input {
  width: 100%;
  min-width: 0;
}

.block-library-categories {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.block-library-categories button.active {
  border-color: var(--brand);
  background: #e7f1ff;
}

.block-library-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.38rem;
  align-content: start;
  overflow: auto;
  min-height: 0;
  padding-right: 0.12rem;
}

.block-library-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.32rem;
}

.block-library-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #50667f;
  padding-top: 0.12rem;
}

.block-library-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.38rem;
}

.block-library-section-grid-fixed {
  grid-template-columns: repeat(auto-fill, minmax(150px, 150px));
  justify-content: start;
}

.block-library-item {
  border: 1px solid #d4e0ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
  padding: 0.3rem;
  display: grid;
  gap: 0.24rem;
  text-align: left;
  color: #173451;
  box-shadow: 0 6px 14px rgba(20, 55, 95, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.block-library-item:hover,
.block-library-item:focus-within {
  border-color: #90b1d5;
  box-shadow: 0 10px 20px rgba(20, 55, 95, 0.08);
  transform: translateY(-1px);
}

.block-library-item.is-selected {
  border-color: #8fb0d4;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
  box-shadow: 0 10px 22px rgba(20, 55, 95, 0.08);
}

.block-library-item-trigger {
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #173451;
  text-align: left;
  display: grid;
  gap: 0.24rem;
  align-content: start;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0;
  cursor: pointer;
  transition: color 140ms ease;
}

.block-library-item-trigger:hover,
.block-library-item-trigger:focus-visible {
  outline: none;
}

.block-library-item-trigger.active {
  color: #12385b;
}

.block-library-item-title {
  min-height: 2.05rem;
  border: 1px solid #cfe0f1;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0.42rem 0.54rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
}

.block-library-item:hover .block-library-item-title,
.block-library-item:focus-within .block-library-item-title {
  border-color: #90b1d5;
  background: #f8fbff;
}

.block-library-item.is-selected .block-library-item-title {
  border-color: #7fa3ca;
  background: linear-gradient(180deg, #eff6ff 0%, #e4efff 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.08);
}

.block-library-starter-wrap {
  display: grid;
  gap: 0.26rem;
  padding: 0 0.08rem 0.08rem;
}

.block-library-item-description {
  color: #52677e;
  font-size: 0.72rem;
  line-height: 1.25;
  min-height: 1.8em;
  padding: 0 0.08rem;
}

.block-library-starter-title {
  color: #4e6681;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.block-library-starter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.block-library-starter-row-inline {
  padding: 0 0.08rem;
}

.block-library-starter-chip {
  border: 1px solid #c9daee;
  border-radius: 999px;
  background: #ffffff;
  color: #274663;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.32rem 0.46rem;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.block-library-starter-chip-inline {
  background: #f6faff;
}

.block-library-starter-chip:hover,
.block-library-starter-chip:focus-visible {
  border-color: #8fb0d4;
  background: #eef5ff;
  box-shadow: 0 8px 16px rgba(20, 55, 95, 0.08);
}

.block-library-preview {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid #dbe7f5;
  background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-library-preview-badge {
  position: absolute;
  right: 0.32rem;
  top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.16rem 0.34rem;
  border-radius: 999px;
  background: rgba(19, 56, 91, 0.92);
  color: #f6fbff;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(19, 56, 91, 0.16);
}

.block-library-preview-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.54rem;
  line-height: 1;
}

.block-library-preview-svg {
  display: block;
  width: 84px;
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.carousel-slide-preview {
  border-radius: 10px;
  border: 1px dashed #ccd7ef;
  background: #f4f6ff;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  position: relative;
}

.carousel-slide-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.carousel-slide-preview-empty {
  font-size: 0.85rem;
  color: #4d6078;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.block-library-icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
  border: 1px solid #c4d6eb;
  background: #ffffff;
  color: #0f3d67;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 8px rgba(15, 61, 103, 0.06);
}

.block-library-variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}

.block-library-variant-chip {
  border: 1px solid #d1e0f0;
  border-radius: 999px;
  background: #f6faff;
  color: #36516c;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.18rem 0.34rem;
}

.favorite-toggle {
  border: 1px solid #b4c8de;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  background: #fff;
  color: #24435f;
}

.validation-summary {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.publish-settings {
  display: grid;
  gap: 0.5rem;
}

.publish-target-shell {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.publish-target-selector {
  display: grid;
  gap: 0.3rem;
  padding: 0.48rem 0.56rem;
  border: 1px solid #d3dfed;
  border-radius: 10px;
  background: #f8fbff;
}

.publish-target-selector-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.publish-target-divider {
  width: 0.9rem;
  flex: 0 0 0.9rem;
}

.publish-target-panel {
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.42rem 0.5rem;
  display: grid;
  gap: 0.28rem;
}

.publish-target-panel[hidden],
.publish-target-panel [hidden] {
  display: none !important;
}

.publish-preview-launch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.publish-preview-launch label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #24435f;
}

.publish-preview-launch select {
  min-width: 11.5rem;
}

.publish-review-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem 0.58rem;
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.42rem 0.5rem;
}

.publish-dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 0.45rem;
  margin-bottom: 0.18rem;
  align-items: start;
}

.publish-target-summary {
  display: grid;
}

.publish-target-summary-card {
  border: 1px solid #d3dfed;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.52rem 0.62rem;
  display: grid;
  gap: 0.28rem;
}

.publish-target-summary-card strong {
  color: #17314c;
}

.publish-target-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.3rem;
}

.publish-target-summary-metric {
  border: 1px solid #dce7f3;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.34rem 0.4rem;
  display: grid;
  gap: 0.08rem;
}

.publish-target-summary-metric.is-interactive {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.publish-target-summary-metric.is-interactive:hover,
.publish-target-summary-metric.is-interactive:focus-visible {
  border-color: #8fb0d2;
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.12);
  transform: translateY(-1px);
}

.publish-target-summary-metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #587089;
  font-weight: 700;
}

.publish-target-summary-metric-value {
  font-size: 1.15rem;
  line-height: 1.05;
  color: #17314c;
  font-weight: 700;
}

.publish-target-summary-list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.publish-target-summary-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.publish-target-summary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.publish-target-summary-status {
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #f7fbff;
  padding: 0.5rem 0.6rem;
  font-size: 0.84rem;
  color: #26425c;
}

.publish-target-summary-status.is-ready {
  border-color: #c8dfce;
  background: #f3fff5;
  color: #1f4a2d;
}

.publish-target-summary-status.is-blocked {
  border-color: #e0c2bb;
  background: #fff6f4;
  color: #6b3022;
}

.publish-target-summary-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.publish-target-summary-test-row {
  margin-top: 0.2rem;
}

.publish-target-summary-test-controls {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(134, 155, 179, 0.28);
}

.publish-target-summary-test-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.publish-target-summary-test-head .field-hint {
  margin: 0;
}

.publish-target-summary-inline-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #4a6886;
  white-space: nowrap;
}

.publish-target-summary-disclosure {
  margin-bottom: 0;
}

.publish-target-summary-disclosure > .publish-target-summary-list,
.publish-target-summary-disclosure > .publish-target-summary-action-row {
  padding-top: 0.15rem;
}

.publish-target-summary-item {
  border: 1px solid #dce7f3;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.45rem 0.55rem;
  color: #21384f;
  font-size: 0.88rem;
}

.publish-target-summary-outcome {
  border: 1px solid #c9dfce;
  border-radius: 12px;
  background: linear-gradient(180deg, #f3fff5 0%, #ffffff 100%);
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.42rem;
}

.publish-target-summary-outcome.is-preview {
  border-color: #c7d8ea;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.publish-target-summary-outcome-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.publish-target-summary-outcome-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a6886;
}

.publish-target-summary-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.publish-target-blocked-panel {
  border: 1px solid #e3c3bc;
  border-radius: 10px;
  background: #fff6f4;
  padding: 0.6rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.publish-target-blocked-panel strong {
  color: #8e2f1d;
}

.publish-target-blocked-next-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6f2a1e;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.publish-target-blocked-list {
  display: grid;
  gap: 0.28rem;
}

.publish-target-blocked-item {
  border: 1px solid #efd2cc;
  border-radius: 8px;
  background: #fffefe;
  padding: 0.35rem 0.45rem;
  color: #402013;
  font-size: 0.84rem;
}

.publish-gate {
  display: grid;
  gap: 0.45rem;
}

.publish-validation-actions {
  display: flex;
  justify-content: flex-start;
  margin: 0.1rem 0 0.45rem;
}

.publish-dashboard-actions {
  margin-top: -0.1rem;
}

.publish-disclosure {
  margin-bottom: 0.55rem;
  border-color: #bfd5ea;
  background: linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
  box-shadow: 0 8px 18px rgba(24, 52, 84, 0.06);
}

.publish-disclosure > summary {
  padding: 0.95rem 1rem;
}

.publish-disclosure > summary:hover,
.publish-disclosure > summary:focus-visible {
  background: rgba(47, 109, 180, 0.04);
}

.publish-disclosure > summary::after {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #edf4ff;
  color: #2f5f90;
}

.publish-disclosure > summary strong {
  font-size: 0.96rem;
}

.publish-disclosure > section {
  display: grid;
  gap: 0.55rem;
}

.publish-gate-head {
  display: grid;
  gap: 0.18rem;
}

.publish-gate.status-fail {
  border-color: #e0c2bb;
  background: #fff6f4;
}

.publish-gate.status-pass {
  border-color: #c8dfce;
  background: #f3fff5;
}

.publish-gate-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.4rem;
}

.publish-gate-check {
  border: 1px solid #d6e2f0;
  border-radius: 8px;
  background: #fff;
  padding: 0.38rem 0.45rem;
  font-size: 0.82rem;
}

.publish-gate-check.fail {
  border-color: #dfc2bb;
  background: #fff4f2;
}

.publish-gate-check.pass {
  border-color: #c5ddcb;
  background: #f1fbf4;
}

.publish-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.publish-gate-subdisclosure {
  margin-bottom: 0;
}

.publish-gate-options {
  display: grid;
  gap: 0.45rem;
}

body[data-color-mode="dark"] .publish-settings,
body[data-color-mode="dark"] .publish-target-selector,
body[data-color-mode="dark"] .publish-gate,
body[data-color-mode="dark"] .publish-target-summary-metric,
body[data-color-mode="dark"] .publish-disclosure {
  border-color: #35506b;
  background: #17222f;
  color: #e7f0fa;
}

body[data-color-mode="dark"] .publish-target-panel,
body[data-color-mode="dark"] .publish-review-options,
body[data-color-mode="dark"] .publish-target-summary-card,
body[data-color-mode="dark"] .publish-target-summary-item,
body[data-color-mode="dark"] .publish-target-summary-status,
body[data-color-mode="dark"] .publish-target-summary-outcome,
body[data-color-mode="dark"] .publish-target-blocked-item,
body[data-color-mode="dark"] .publish-gate-check {
  border-color: #35506b;
  background: #1a2734;
  color: #dbe9f8;
}

body[data-color-mode="dark"] .publish-target-summary-card strong,
body[data-color-mode="dark"] .publish-target-summary-metric-value,
body[data-color-mode="dark"] .publish-gate strong,
body[data-color-mode="dark"] .publish-target-blocked-panel strong,
body[data-color-mode="dark"] .publish-target-blocked-next-title,
body[data-color-mode="dark"] .publish-preview-launch label {
  color: #edf5ff;
}

body[data-color-mode="dark"] .publish-target-summary-metric-label,
body[data-color-mode="dark"] .publish-target-summary-outcome-kicker {
  color: #9ab6d5;
}

body[data-color-mode="dark"] .publish-target-summary-metric.is-interactive:hover,
body[data-color-mode="dark"] .publish-target-summary-metric.is-interactive:focus-visible {
  border-color: #6f92b8;
  box-shadow: 0 0 0 2px rgba(143, 176, 210, 0.18);
}

body[data-color-mode="dark"] .publish-disclosure > summary:hover,
body[data-color-mode="dark"] .publish-disclosure > summary:focus-visible {
  background: rgba(143, 176, 210, 0.08);
}

body[data-color-mode="dark"] .publish-disclosure > summary::after {
  background: rgba(143, 176, 210, 0.12);
  color: #cfe2f7;
}

body[data-color-mode="dark"] .publish-target-summary-status {
  background: rgba(23, 34, 47, 0.96);
  color: #dbe9f8;
}

body[data-color-mode="dark"] .publish-target-summary-status.is-ready,
body[data-color-mode="dark"] .publish-gate.status-pass,
body[data-color-mode="dark"] .publish-gate-check.pass {
  border-color: #456c58;
  background: rgba(21, 53, 37, 0.88);
  color: #d3efd9;
}

body[data-color-mode="dark"] .publish-target-summary-status.is-blocked,
body[data-color-mode="dark"] .publish-gate.status-fail,
body[data-color-mode="dark"] .publish-target-blocked-panel,
body[data-color-mode="dark"] .publish-gate-check.fail {
  border-color: #7d5347;
  background: rgba(66, 32, 32, 0.88);
  color: #f2d2ca;
}

body[data-color-mode="dark"] .publish-target-blocked-item {
  border-color: rgba(125, 83, 71, 0.9);
  background: rgba(43, 31, 28, 0.96);
  color: #f2d2ca;
}

body[data-color-mode="dark"] .publish-target-divider {
  background: rgba(86, 112, 141, 0.45);
}

body[data-color-mode="dark"] .publish-preview-launch select,
body[data-color-mode="dark"] .publish-review-options select,
body[data-color-mode="dark"] .publish-settings select,
body[data-color-mode="dark"] .publish-settings input,
body[data-color-mode="dark"] .publish-settings textarea {
  border-color: #35506b;
  background: #17222f;
  color: #e7f0fa;
}

@media (max-width: 980px) {
  .publish-dashboard-shell {
    grid-template-columns: 1fr;
  }
}

.entitlement-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(163, 58, 44, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff5f0, #fffaf7);
  box-shadow: 0 12px 28px rgba(163, 58, 44, 0.08);
}

.entitlement-banner-copy {
  display: grid;
  gap: 0.28rem;
}

.entitlement-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-ops-shell {
  display: grid;
  gap: 1rem;
}

.admin-entitlement-panel {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(31, 93, 156, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.admin-ops-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.admin-ops-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-ops-content {
  display: grid;
  gap: 1rem;
}

.admin-ops-section {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #d6dbe7;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.admin-ops-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.admin-ops-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(31, 93, 156, 0.12);
}

.admin-ops-card-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #47607c;
}

.admin-ops-card-value {
  font-size: 1.7rem;
  line-height: 1.05;
  color: #15212e;
}

.admin-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.admin-ops-panel {
  display: grid;
  gap: 0.75rem;
}

.admin-ops-inline-form {
  display: grid;
  gap: 0.75rem;
}

.admin-ops-action-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.admin-ops-doc-list {
  display: grid;
  gap: 0.75rem;
}

.admin-ops-doc-item {
  display: grid;
  gap: 0.28rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(31, 93, 156, 0.12);
  background: rgba(248, 251, 255, 0.92);
}

.admin-ops-doc-item code {
  white-space: normal;
  overflow-wrap: anywhere;
  color: #3f5873;
}

.admin-ops-request-list {
  display: grid;
  gap: 0.9rem;
}

.admin-ops-request-item {
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(31, 93, 156, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.96));
}

.admin-ops-request-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.admin-ops-request-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}

.admin-ops-request-meta > div,
.admin-ops-request-notes > div {
  display: grid;
  gap: 0.2rem;
}

.admin-ops-request-meta span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5b7087;
}

.admin-ops-request-notes {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(240, 246, 255, 0.72);
  border: 1px solid rgba(31, 93, 156, 0.1);
}

.admin-ops-request-controls {
  display: grid;
  gap: 0.75rem;
}

.admin-ops-field {
  display: grid;
  gap: 0.25rem;
}

.admin-ops-field span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5b7087;
}

.admin-ops-table-wrap {
  overflow-x: auto;
}

.admin-ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-ops-table th,
.admin-ops-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid rgba(21, 33, 46, 0.08);
}

.admin-ops-table th {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5a6d85;
}

.admin-ops-table td {
  color: #15212e;
  min-width: 90px;
}

.confidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.confidence-item {
  border: 1px solid #d6e2f0;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.32rem;
}

.confidence-item.status-pass {
  border-color: #c9dfce;
  background: #f4fff6;
}

.confidence-item.status-warn {
  border-color: #e3d7b6;
  background: #fffdef;
}

.confidence-item.status-fail {
  border-color: #e3c2bc;
  background: #fff5f3;
}

.confidence-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.confidence-pill {
  border-radius: 999px;
  padding: 0.14rem 0.52rem;
  font-size: 0.74rem;
  border: 1px solid #bdd2ea;
  background: #ebf4ff;
  color: #1a4368;
  white-space: nowrap;
}

.confidence-pill.status-pass {
  border-color: #b7d7bf;
  background: #eaffee;
  color: #215b2d;
}

.confidence-pill.status-warn {
  border-color: #dbcda5;
  background: #fff8dc;
  color: #6a5615;
}

.confidence-pill.status-fail {
  border-color: #dfc2bb;
  background: #ffeceb;
  color: #7a2a1d;
}

.validation-empty {
  border: 1px solid #c8dfce;
  background: #f3fff5;
  color: #235733;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
}

.validation-result-card {
  border: 1px solid #c8dfce;
  background: #f3fff5;
  color: #235733;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.25rem;
}

.validation-result-card.warn {
  border-color: #dfd7be;
  background: #fffced;
  color: #5f4a12;
}

.validation-result-card.error {
  border-color: #e0c2bb;
  background: #fff6f4;
  color: #7a2a1d;
}

.validation-section {
  border: 1px solid #d3dfed;
  background: #f8fbff;
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  display: grid;
  gap: 0.45rem;
}

.validation-section.accessibility {
  border-color: #dccfb6;
  background: #fffdf3;
}

.validation-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.validation-section-copy {
  display: grid;
  gap: 0.18rem;
}

.validation-section-pill {
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.76rem;
  border: 1px solid #c5ddcb;
  background: #f1fbf4;
  color: #215b2d;
  white-space: nowrap;
}

.validation-section-pill.error {
  border-color: #dfc2bb;
  background: #ffeceb;
  color: #7a2a1d;
}

.validation-item {
  border: 1px solid #dfd7be;
  background: #fffced;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.validation-item.error {
  border-color: #e0c2bb;
  background: #fff6f4;
}

.validation-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.validation-item.compact {
  padding: 0.45rem 0.55rem;
}

.validation-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.validation-item-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.48rem;
  font-size: 0.72rem;
  border: 1px solid #d8e2ef;
  background: #ffffff;
  color: #35506e;
}

.validation-priority-list,
.validation-collapsed-warnings-body {
  display: grid;
  gap: 0.45rem;
}

.validation-lesson-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #ffffff;
}

.validation-lesson-group.has-errors {
  border-color: #e0c2bb;
  background: #fffaf9;
}

.validation-lesson-group-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.validation-lesson-group-copy {
  display: grid;
  gap: 0.18rem;
}

.validation-collapsed-warnings {
  border: 1px dashed #d5deeb;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.2rem 0.55rem 0.55rem;
}

.validation-collapsed-warnings > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.35rem 0;
  list-style: none;
}

.validation-collapsed-warnings > summary::-webkit-details-marker {
  display: none;
}

body.night-mode .lesson-control-center-card,
body[data-color-mode="dark"] .lesson-control-center-card {
  background: #122033;
  border-color: #2c455f;
}

body.night-mode .inspector-breadcrumb,
body[data-color-mode="dark"] .inspector-breadcrumb {
  background: rgba(18, 32, 51, 0.96);
  border-color: #2c455f;
}

body.night-mode .inspector-breadcrumb-trail,
body[data-color-mode="dark"] .inspector-breadcrumb-trail {
  color: #e4eefb;
}

body.night-mode .validation-item-chip,
body[data-color-mode="dark"] .validation-item-chip {
  background: #132336;
  border-color: #334b66;
  color: #d7e7ff;
}

body.night-mode .validation-lesson-group,
body[data-color-mode="dark"] .validation-lesson-group {
  background: #0f1a29;
  border-color: #2c455f;
}

body.night-mode .validation-lesson-group.has-errors,
body[data-color-mode="dark"] .validation-lesson-group.has-errors {
  background: #241714;
  border-color: #6b3f35;
}

body.night-mode .validation-collapsed-warnings,
body[data-color-mode="dark"] .validation-collapsed-warnings {
  background: #132336;
  border-color: #334b66;
}

@media (max-width: 760px) {
  .validation-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .validation-lesson-group-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.lessons-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.publish-head {
  display: grid;
  grid-template-columns: minmax(2.4rem, 1fr) auto minmax(2.4rem, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

body[data-active-tab="publish"] #tab-publish .lessons-wrap {
  margin-top: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

body[data-active-tab="publish"] #publish-inline-slot {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

body[data-active-tab="publish"] #publish-inline-slot .publish-shared-shell {
  align-content: start;
}

.publish-head h2,
.preview-head h2 {
  margin: 0;
  color: #102945;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.32rem, 1.05rem + 0.7vw, 1.76rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.publish-head h2 {
  justify-self: center;
  text-align: center;
}

.publish-head-spacer {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.publish-head > .secondary {
  justify-self: end;
}

@media (max-width: 900px) {
  .publish-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .publish-head-spacer {
    display: none;
  }

  .publish-head-copy,
  .publish-head h2,
  .publish-head > .secondary {
    justify-self: start;
    text-align: left;
  }

  .publish-head-copy,
  .publish-modal-head-copy {
    justify-items: start;
  }
}

.lessons-head-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem 0.5rem;
  width: 100%;
}

.lessons-head-top h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #102945;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.12rem, 0.96rem + 0.42vw, 1.34rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.lessons-head-quick-actions,
.lessons-head-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.14rem;
}

.lessons-head-quick-actions {
  flex: 0 0 auto;
}

.lessons-head-tools {
  width: 100%;
}

.lessons-head-quick-actions button:not(.lessons-collapse-toggle-btn),
.lessons-head-tools button:not(.lessons-collapse-toggle-btn) {
  min-width: 1.56rem;
  width: 1.56rem;
  min-height: 1.56rem;
  height: 1.56rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lessons-head-quick-actions #add-lesson-btn,
.lessons-head-quick-actions #remove-lesson-btn {
  font-size: 0.84rem;
  font-weight: 700;
}

.lessons-head-quick-actions #remove-lesson-btn.lesson-delete-quick-btn {
  color: #8f251d;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.lessons-head-quick-actions #remove-lesson-btn.lesson-delete-quick-btn:hover,
.lessons-head-quick-actions #remove-lesson-btn.lesson-delete-quick-btn:focus-visible {
  color: #ffffff;
}

#toggle-lessons-btn {
  align-self: center;
}

#toggle-lessons-btn:hover,
#toggle-lessons-btn:focus-visible {
  box-shadow: none;
}

.lessons-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.lessons-head-actions-secondary {
  margin-top: -0.1rem;
}

.lessons-action-feedback {
  min-height: 1.1rem;
  margin-top: 0.05rem;
}

.lessons-action-feedback.is-success {
  color: #2d6b47;
}

.lessons-action-feedback.is-error {
  color: #9c2d1f;
}

.lessons-head-actions button {
  width: 100%;
}

.lesson-rail.collapsed .lessons-head {
  align-items: center;
  margin-bottom: 0;
  width: auto;
}

.lesson-rail.collapsed .lessons-head-top {
  justify-content: center;
  width: auto;
}

.lesson-rail.collapsed .lessons-head-top h2,
.lesson-rail.collapsed .lessons-action-feedback,
.lesson-rail.collapsed #add-lesson-btn,
.lesson-rail.collapsed #remove-lesson-btn,
.lesson-rail.collapsed .lessons-head-tools {
  display: none;
}

.lesson-rail.collapsed .lessons-head-quick-actions {
  width: auto;
  gap: 0;
}

.lesson-rail.collapsed .lessons-head-actions {
  display: none;
}

.lesson-card {
  padding: 0.85rem;
  margin-bottom: 0.8rem;
}

.lesson-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lesson-head input {
  flex: 1;
}

.lesson-blocks {
  margin-top: 0.6rem;
}

.block {
  margin-top: 0.55rem;
  padding: 0.6rem;
}

.block-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  align-items: center;
}

.block-type {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.block-tools {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.publish-target-btn {
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.publish-target-btn-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 0.5rem);
  width: min(18rem, 44vw);
  padding: 0.55rem 0.7rem;
  border: 1px solid #c7d8ea;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 30px rgba(15, 32, 51, 0.12);
  color: #35506c;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%) translateY(-0.2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 12;
}

.publish-target-btn-tooltip:hover::after,
.publish-target-btn-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.publish-target-btn.inactive {
  border-color: #cbd6e3;
  background: #eef3f8;
  color: #5b7189;
  box-shadow: none;
  opacity: 0.88;
}

.publish-target-btn.inactive:hover,
.publish-target-btn.inactive:focus-visible {
  border-color: #afc2d7;
  background: #e6edf5;
  color: #31485f;
}

.publish-target-btn.active {
  border-color: #9db3cb;
  background: #ffffff;
  color: #17314c;
  box-shadow: 0 10px 20px rgba(24, 48, 73, 0.08);
  opacity: 1;
  transform: translateY(-1px);
}


.attachment-editor-meta,
.preview-attachment-card {
  display: grid;
  gap: 0.6rem;
}

.attachment-meta-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.attachment-meta-summary {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.attachment-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.attachment-icon {
  width: 2.8rem;
  min-width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f5d9c, #3d86d1);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 24px rgba(31, 93, 156, 0.18);
}

.attachment-badge,
.attachment-meta-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.52rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.attachment-badge {
  background: #eaf3ff;
  color: #11416f;
  border: 1px solid #bcd3ef;
}

.attachment-meta-pill {
  background: #f4f7fb;
  color: #38516a;
  border: 1px solid #d5deea;
}

.attachment-file-name {
  color: #52667c;
  font-size: 0.84rem;
  word-break: break-word;
}

.block-library-order {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.block-library-order-inline {
  justify-self: start;
  align-items: center;
  flex-direction: row;
  gap: 0.35rem;
  white-space: nowrap;
}

.block-library-order-inline > span {
  font-weight: 600;
}

.block-library-order select {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #cfd5e6;
  background: #fff;
}

.block-content {
  display: grid;
  gap: 0.5rem;
}

.field {
  display: grid;
  gap: 0.25rem;
}

.field-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.field-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.field-description {
  margin-top: -0.05rem;
}

.field-error {
  font-size: 0.78rem;
  color: #a12727;
  font-weight: 600;
}

.advanced-color-control {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}

.advanced-color-control input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 2.15rem;
  padding: 0.12rem;
}

.advanced-color-control input[type="text"] {
  min-width: 0;
}

.builder-element-color-group {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.builder-element-color-group + .builder-element-color-group {
  border-top: 1px solid rgba(162, 184, 210, 0.45);
  padding-top: 0.65rem;
  margin-top: 0.1rem;
}

.builder-element-color-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #355778;
}

.builder-background-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #214b73;
}

.builder-background-group-box {
  border: 1px solid rgba(131, 165, 201, 0.45);
  border-radius: 10px;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(239, 246, 255, 0.98));
  display: grid;
  gap: 0.65rem;
}

.builder-background-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.lesson-background-report-list {
  display: grid;
  gap: 0.5rem;
}

.lesson-background-report-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid rgba(131, 165, 201, 0.34);
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  background: rgba(255, 255, 255, 0.68);
}

.lesson-background-report-copy {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.lesson-background-report-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.lesson-background-report-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(91, 126, 164, 0.34);
  background: rgba(234, 242, 252, 0.92);
  color: #244e76;
  font-size: 0.74rem;
  font-weight: 700;
}

.gradient-editor {
  border: 1px solid rgba(131, 165, 201, 0.42);
  border-radius: 10px;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(243, 248, 255, 0.98));
  display: grid;
  gap: 0.65rem;
}

.gradient-preview-swatch {
  min-height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(137, 167, 199, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.gradient-choice-preview {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(137, 167, 199, 0.3);
}

.gradient-origin-stage {
  position: relative;
  min-height: 120px;
  border: 1px solid rgba(137, 167, 199, 0.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.82), rgba(222, 236, 255, 0.9) 55%, rgba(201, 223, 247, 0.94) 100%);
  overflow: hidden;
  cursor: crosshair;
}

.gradient-origin-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #2f6db4;
  box-shadow: 0 4px 12px rgba(9, 23, 38, 0.18);
  transform: translate(-50%, -50%);
}

.gradient-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gradient-preset-chip {
  border-radius: 999px;
}

.gradient-preset-chip.is-active {
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.28);
  background: linear-gradient(180deg, #eff6ff, #dfeeff);
}

.gradient-stop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.gradient-stop-list {
  display: grid;
  gap: 0.55rem;
}

.gradient-stop-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, 0.8fr) auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.55rem;
  border: 1px solid rgba(164, 186, 212, 0.44);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.gradient-stop-color {
  min-width: 0;
}

.gradient-range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.gradient-range-value {
  min-width: 2.5rem;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  color: #284767;
}

.builder-background-inline-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.32rem;
  padding: 0.15rem 0;
}

.builder-background-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: #17314c;
  font-size: 0.84rem;
  line-height: 1.25;
  white-space: nowrap;
}

.builder-background-inline-item input[type="checkbox"] {
  margin: 0;
}

.builder-background-inline-item span {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-background-inline-comma {
  color: #5d7793;
  font-size: 0.84rem;
  line-height: 1;
}

.builder-background-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.builder-background-actions-selection {
  margin-top: -0.1rem;
  margin-bottom: -0.1rem;
}

@media (max-width: 760px) {
  .gradient-stop-grid,
  .gradient-stop-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quote-editor {
  display: grid;
  gap: 0.9rem;
}

.quote-editor-select-grid,
.quote-editor-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.quote-editor .field {
  margin: 0;
}

.rte {
  border: 1px solid #bccad9;
  border-radius: 8px;
  overflow: visible;
  background: #fff;
}

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border-bottom: 1px solid #dfe7f2;
  background: #f4f8fd;
}

.rte-toolbar button {
  min-width: 2.2rem;
  padding: 0.3rem 0.5rem;
}

.rte-toolbar button.icon-btn {
  width: 2.2rem;
  height: 2rem;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rte-toolbar button.icon-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rte-toolbar input[type="color"] {
  width: 2.2rem;
  height: 2rem;
  padding: 0.1rem;
}

.rte-floating-toolbar {
  position: fixed;
  z-index: 5000;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  max-width: min(92vw, 900px);
  border: 1px solid #c5d6ea;
  background: #ffffff;
  border-radius: 16px;
  padding: 0.22rem 0.3rem;
  box-shadow: 0 8px 20px rgba(11, 28, 45, 0.2);
}

.rte-floating-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.canvas-floating-toolbar {
  z-index: 5001;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.2rem;
  max-width: min(92vw, 900px);
  border-radius: 16px;
  padding: 0.22rem 0.3rem;
}

.rte-floating-toolbar[hidden] {
  display: none !important;
}

.rte-float-btn {
  min-width: 1.65rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.rte-float-menu-trigger-text {
  min-width: auto;
  padding: 0 0.58rem;
}

.rte-float-btn.icon-btn {
  width: 1.8rem;
  min-width: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rte-float-btn.icon-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rte-float-btn[data-tip],
.rte-float-menu-trigger[data-tip],
.rte-float-tip-host[data-tip],
.rte-float-color[data-tip],
.rte-float-font[data-tip],
.rte-float-size[data-tip] {
  position: relative;
}

.rte-float-btn[data-tip]::before,
.rte-float-menu-trigger[data-tip]::before,
.rte-float-tip-host[data-tip]::before,
.rte-float-color[data-tip]::before,
.rte-float-font[data-tip]::before,
.rte-float-size[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.38rem);
  transform: translate(-50%, 0.18rem);
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  padding: 0.22rem 0.42rem;
  border-radius: 8px;
  background: rgba(18, 28, 40, 0.94);
  color: #f5f9ff;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(11, 28, 45, 0.22);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 4600;
}

.rte-float-btn[data-tip]::after,
.rte-float-menu-trigger[data-tip]::after,
.rte-float-tip-host[data-tip]::after,
.rte-float-color[data-tip]::after,
.rte-float-font[data-tip]::after,
.rte-float-size[data-tip]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.08rem);
  width: 0.46rem;
  height: 0.46rem;
  background: rgba(18, 28, 40, 0.94);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 4599;
}

.rte-float-btn[data-tip]:hover::before,
.rte-float-btn[data-tip]:focus-visible::before,
.rte-float-menu-trigger[data-tip]:hover::before,
.rte-float-menu-trigger[data-tip]:focus-visible::before,
.rte-float-tip-host[data-tip]:hover::before,
.rte-float-tip-host[data-tip]:focus-within::before,
.rte-float-color[data-tip]:hover::before,
.rte-float-color[data-tip]:focus-visible::before,
.rte-float-font[data-tip]:hover::before,
.rte-float-font[data-tip]:focus-visible::before,
.rte-float-size[data-tip]:hover::before,
.rte-float-size[data-tip]:focus-visible::before,
.rte-float-menu.is-open .rte-float-menu-trigger[data-tip]::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.rte-float-btn[data-tip]:hover::after,
.rte-float-btn[data-tip]:focus-visible::after,
.rte-float-menu-trigger[data-tip]:hover::after,
.rte-float-menu-trigger[data-tip]:focus-visible::after,
.rte-float-tip-host[data-tip]:hover::after,
.rte-float-tip-host[data-tip]:focus-within::after,
.rte-float-color[data-tip]:hover::after,
.rte-float-color[data-tip]:focus-visible::after,
.rte-float-font[data-tip]:hover::after,
.rte-float-font[data-tip]:focus-visible::after,
.rte-float-size[data-tip]:hover::after,
.rte-float-size[data-tip]:focus-visible::after,
.rte-float-menu.is-open .rte-float-menu-trigger[data-tip]::after {
  opacity: 1;
}

.rte-float-color {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.08rem;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c5d6ea;
  background: transparent;
}

.rte-float-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.rte-float-color::-webkit-color-swatch {
  border: none;
  border-radius: 999px;
}

.rte-float-color::-moz-color-swatch {
  border: none;
  border-radius: 999px;
}

.rte-float-font {
  min-width: 5.5rem;
  max-width: 10rem;
  height: 1.7rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
}

.rte-float-size {
  width: 3.15rem;
  height: 1.7rem;
  padding: 0.1rem 1.1rem 0.1rem 0.32rem;
  border-radius: 999px;
  font-size: 0.74rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

.rte-float-size::-webkit-outer-spin-button,
.rte-float-size::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rte-float-size-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rte-float-size-wrap .rte-float-size {
  width: 4.2rem;
}

.rte-float-size-steps {
  position: absolute;
  right: 0.18rem;
  top: 0.14rem;
  bottom: 0.14rem;
  width: 0.92rem;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 0.08rem;
  pointer-events: auto;
}

.rte-float-size-step {
  appearance: none;
  border: 1px solid #c7d7e8;
  border-radius: 999px;
  background: #f5f9ff;
  color: #24425f;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rte-float-size-step:hover {
  background: #eaf3ff;
  border-color: #8fb2d9;
}

.rte-float-size-step:focus-visible {
  outline: 2px solid rgba(72, 131, 196, 0.28);
  outline-offset: 1px;
}

.rte-float-tip-host {
  display: inline-flex;
  align-items: center;
}

.rte-float-menu {
  position: relative;
  display: inline-flex;
}

.rte-float-menu-list,
.rte-float-menu-symbols {
  position: relative;
}

.rte-float-menu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.3rem;
  border: 1px solid #c5d6ea;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(11, 28, 45, 0.18);
  z-index: 6;
}

.rte-float-menu-panel-symbols {
  top: calc(100% + 0.45rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  min-width: 0;
  max-width: min(24rem, calc(100vw - 1rem));
  display: none;
  grid-template-columns: repeat(10, 2.1rem);
  grid-auto-rows: 2.1rem;
  justify-content: start;
  gap: 0.32rem;
  padding: 0.42rem;
  border-radius: 14px;
  z-index: 7;
}

.rte-float-menu-panel-list {
  top: calc(100% + 0.35rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  min-width: 0;
  max-width: min(20rem, calc(100vw - 1rem));
  display: none;
  grid-template-columns: repeat(8, 2.1rem);
  grid-auto-rows: 2.1rem;
  justify-content: start;
  gap: 0.32rem;
  padding: 0.42rem;
  border-radius: 14px;
  z-index: 7;
}

.rte-float-menu-panel-list .rte-float-btn,
.rte-float-menu-panel-symbols .rte-float-btn {
  justify-content: center;
}

.rte-float-menu-panel-controls {
  min-width: 12rem;
  align-items: stretch;
}

.rte-float-menu-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #3c5267;
  line-height: 1.2;
  margin-top: 0.08rem;
}

.rte-float-menu-note {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #566b81;
}

.rte-float-state-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.rte-float-state-tab {
  min-width: 0;
  height: 1.7rem;
  min-height: 1.7rem;
  justify-content: center;
  font-size: 0.72rem;
}

.rte-float-state-tab.is-active {
  background: #2f6db4;
  color: #ffffff;
  border-color: #2f6db4;
  box-shadow: 0 8px 18px rgba(47, 109, 180, 0.18);
}

.rte-float-state-pane {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.rte-float-menu-field {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.rte-float-menu-panel-controls .rte-float-font,
.rte-float-menu-panel-controls .rte-float-size {
  width: 100%;
  max-width: none;
}

.rte-float-menu-panel-controls .rte-float-color {
  width: 100%;
  height: 1.9rem;
  border-radius: 10px;
}

.rte-float-menu-apply {
  justify-content: center;
  margin-top: 0.18rem;
}

.rte-float-menu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.18rem;
}

.rte-float-menu-actions .rte-float-btn,
.rte-float-menu-actions .rte-float-menu-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.7rem;
  min-height: 1.7rem;
  margin-top: 0;
}

.rte-float-choice-grid {
  display: grid;
  gap: 0.6rem;
}

.rte-float-choice-grid-text-orientation {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rte-float-choice-card {
  min-height: 7.5rem;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.38rem;
  padding: 0.7rem 0.58rem;
  text-align: center;
  white-space: normal;
}

.rte-float-choice-card.is-active {
  border-color: #2f6db4 !important;
  background: linear-gradient(180deg, rgba(47, 109, 180, 0.12), rgba(47, 109, 180, 0.03)) !important;
  box-shadow: 0 10px 22px rgba(47, 109, 180, 0.14) !important;
}

.rte-float-choice-card-sample {
  min-height: 3.2rem;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff, #eef4fb);
  color: #17314c;
  padding: 0.4rem;
}

.rte-float-choice-card-sample-text {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.rte-float-choice-card-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #17314c;
}

.rte-float-choice-card-note {
  font-size: 0.68rem;
  line-height: 1.3;
  color: #50657a;
}

@media (max-width: 720px) {
  .rte-float-choice-grid-text-orientation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rte-float-menu-check {
  margin-top: 0.15rem;
}

.rte-float-menu:hover .rte-float-menu-panel,
.rte-float-menu:focus-within .rte-float-menu-panel,
.rte-float-menu.is-open .rte-float-menu-panel {
  display: flex;
}

.rte-float-menu:hover .rte-float-menu-panel-symbols,
.rte-float-menu:focus-within .rte-float-menu-panel-symbols,
.rte-float-menu.is-open .rte-float-menu-panel-symbols,
.rte-float-menu:hover .rte-float-menu-panel-list,
.rte-float-menu:focus-within .rte-float-menu-panel-list,
.rte-float-menu.is-open .rte-float-menu-panel-list {
  display: grid;
}

.rte-float-menu-trigger.is-selection-active {
  background: #85abd2;
  border-color: #3f6589;
  color: #0b2237;
  box-shadow: inset 0 0 0 1px rgba(34, 63, 96, 0.2);
}

.rte-float-menu-trigger.is-selection-mixed {
  background: #e5eaf0;
  border-color: #b3c0cc;
  color: #395166;
  box-shadow: inset 0 0 0 1px rgba(110, 126, 141, 0.08);
}

.rte-float-menu.is-open .rte-float-menu-trigger.is-selection-active,
.rte-float-btn.is-selection-active,
.rte-float-color.is-selection-active,
.rte-float-font.is-selection-active,
.rte-float-size.is-selection-active,
.rte-float-menu-trigger.is-selection-active:hover,
.rte-float-menu-trigger.is-selection-active:focus-visible,
.rte-float-btn.is-selection-active:hover,
.rte-float-btn.is-selection-active:focus-visible,
.rte-float-color.is-selection-active:hover,
.rte-float-color.is-selection-active:focus-visible,
.rte-float-font.is-selection-active:hover,
.rte-float-font.is-selection-active:focus-visible,
.rte-float-size.is-selection-active:hover,
.rte-float-size.is-selection-active:focus-visible,
.rte-float-tip-host.is-selection-active > * {
  background: #85abd2;
  border-color: #3f6589;
  color: #0b2237;
  box-shadow: inset 0 0 0 1px rgba(34, 63, 96, 0.2);
}

.rte-float-menu.is-open .rte-float-menu-trigger.is-selection-active,
.rte-float-menu.is-open .rte-float-btn.is-selection-active,
.rte-float-menu.is-open .rte-float-color.is-selection-active,
.rte-float-menu.is-open .rte-float-font.is-selection-active,
.rte-float-menu.is-open .rte-float-size.is-selection-active,
.rte-float-menu-trigger.is-selection-active:hover,
.rte-float-menu-trigger.is-selection-active:focus-visible,
.rte-float-btn.is-selection-active:hover,
.rte-float-btn.is-selection-active:focus-visible,
.rte-float-color.is-selection-active:hover,
.rte-float-color.is-selection-active:focus-visible,
.rte-float-font.is-selection-active:hover,
.rte-float-font.is-selection-active:focus-visible,
.rte-float-size.is-selection-active:hover,
.rte-float-size.is-selection-active:focus-visible,
.rte-float-tip-host.is-selection-active > * {
  background: #789fc9;
  border-color: #395e82;
}

.rte-float-menu.is-open .rte-float-menu-trigger.is-selection-mixed,
.rte-float-btn.is-selection-mixed,
.rte-float-color.is-selection-mixed,
.rte-float-font.is-selection-mixed,
.rte-float-size.is-selection-mixed,
.rte-float-menu-trigger.is-selection-mixed:hover,
.rte-float-menu-trigger.is-selection-mixed:focus-visible,
.rte-float-btn.is-selection-mixed:hover,
.rte-float-btn.is-selection-mixed:focus-visible,
.rte-float-color.is-selection-mixed:hover,
.rte-float-color.is-selection-mixed:focus-visible,
.rte-float-font.is-selection-mixed:hover,
.rte-float-font.is-selection-mixed:focus-visible,
.rte-float-size.is-selection-mixed:hover,
.rte-float-size.is-selection-mixed:focus-visible,
.rte-float-tip-host.is-selection-mixed > * {
  background: #e5eaf0;
  border-color: #b3c0cc;
  color: #395166;
  box-shadow: inset 0 0 0 1px rgba(110, 126, 141, 0.08);
}

.rte-float-menu.is-open .rte-float-menu-trigger.is-selection-mixed,
.rte-float-menu.is-open .rte-float-btn.is-selection-mixed,
.rte-float-menu.is-open .rte-float-color.is-selection-mixed,
.rte-float-menu.is-open .rte-float-font.is-selection-mixed,
.rte-float-menu.is-open .rte-float-size.is-selection-mixed,
.rte-float-menu-trigger.is-selection-mixed:hover,
.rte-float-menu-trigger.is-selection-mixed:focus-visible,
.rte-float-btn.is-selection-mixed:hover,
.rte-float-btn.is-selection-mixed:focus-visible,
.rte-float-color.is-selection-mixed:hover,
.rte-float-color.is-selection-mixed:focus-visible,
.rte-float-font.is-selection-mixed:hover,
.rte-float-font.is-selection-mixed:focus-visible,
.rte-float-size.is-selection-mixed:hover,
.rte-float-size.is-selection-mixed:focus-visible,
.rte-float-tip-host.is-selection-mixed > * {
  background: #dce3ea;
  border-color: #a5b4c1;
}

/* Keep color swatches visible; do not wash them out with mixed/active fills. */
.rte-float-color.is-selection-active,
.rte-float-color.is-selection-active:hover,
.rte-float-color.is-selection-active:focus-visible,
.rte-float-menu.is-open .rte-float-color.is-selection-active,
.rte-float-tip-host.is-selection-active > input[type="color"] {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: #3f6589 !important;
}

.rte-float-color.is-selection-mixed,
.rte-float-color.is-selection-mixed:hover,
.rte-float-color.is-selection-mixed:focus-visible,
.rte-float-menu.is-open .rte-float-color.is-selection-mixed,
.rte-float-tip-host.is-selection-mixed > input[type="color"] {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border-color: #a5b4c1 !important;
}

.rte-float-menu:hover .rte-float-menu-panel-symbols,
.rte-float-menu:focus-within .rte-float-menu-panel-symbols,
.rte-float-menu.is-open .rte-float-menu-panel-symbols {
  display: grid;
}

[data-text-motion-preset] {
  --text-motion-color: #2f6db4;
  --text-motion-soft: rgba(47, 109, 180, 0.22);
  --text-motion-strong: rgba(47, 109, 180, 0.52);
  --text-motion-duration: 1.25s;
  --text-motion-step: 0.09s;
  --text-motion-iterations: 1;
  position: relative;
  display: inline-block;
  transform-origin: 50% 72%;
  animation-duration: var(--text-motion-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--text-motion-iterations);
  animation-fill-mode: both;
  will-change: transform, opacity, background-size, background-color, text-shadow;
}

.rte-editor [data-text-motion-preset],
.doc-inline-editor [data-text-motion-preset],
.doc-direct-editor [data-text-motion-preset] {
  isolation: isolate;
}

.rte-editor [data-text-motion-preset]::after,
.doc-inline-editor [data-text-motion-preset]::after,
.doc-direct-editor [data-text-motion-preset]::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.2em;
  height: 0.34em;
  background-image: radial-gradient(circle, currentColor 0 1.35px, transparent 1.7px);
  background-size: 8px 6px;
  background-repeat: repeat-x;
  background-position: center bottom;
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.82));
  pointer-events: none;
}

[data-text-motion-preset][data-text-motion-trigger="hover"],
[data-text-motion-preset][data-text-motion-trigger="hover"] [data-text-motion-letter] {
  animation-play-state: paused;
}

[data-text-motion-preset][data-text-motion-trigger="hover"]:hover,
[data-text-motion-preset][data-text-motion-trigger="hover"]:hover [data-text-motion-letter] {
  animation-play-state: running;
}

.preview-stage-scroll-motion .preview-block:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"],
.preview-stage-scroll-motion .preview-block:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] [data-text-motion-letter],
.preview-stage-scroll-motion .preview-block:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] .text-motion-word,
.preview-stage-scroll-motion .preview-block:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] .text-motion-line {
  animation: none !important;
}

.preview-stage-scroll-motion .preview-block[data-attention-replay="true"]:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"],
.preview-stage-scroll-motion .preview-block[data-attention-replay="true"]:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] [data-text-motion-letter],
.preview-stage-scroll-motion .preview-block[data-attention-replay="true"]:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] .text-motion-word,
.preview-stage-scroll-motion .preview-block[data-attention-replay="true"]:not(.is-preview-visible) [data-text-motion-preset][data-text-motion-trigger="auto"] .text-motion-line {
  animation: none !important;
}

[data-text-motion-preset="pulse"] {
  animation-name: text-motion-pulse;
}

[data-text-motion-preset="breathe"] {
  animation-name: text-motion-breathe;
}

[data-text-motion-preset="flash_highlight"] {
  border-radius: 0.24em;
  padding-inline: 0.08em;
  animation-name: text-motion-flash-highlight;
}

[data-text-motion-preset="glow"] {
  animation-name: text-motion-glow;
}

[data-text-motion-preset="underline_draw"] {
  padding-bottom: 0.08em;
  background-image: linear-gradient(var(--text-motion-color), var(--text-motion-color));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.02em);
  background-size: 0% 0.14em;
  animation-name: text-motion-underline-draw;
}

[data-text-motion-preset="marker_swipe"] {
  border-radius: 0.22em;
  padding-inline: 0.08em;
  background-image: linear-gradient(transparent 0 34%, var(--text-motion-soft) 34% 90%, transparent 90% 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  animation-name: text-motion-marker-swipe;
}

[data-text-motion-preset="wave_letters"] {
  animation: none;
}

[data-text-motion-preset="wave_letters"] [data-text-motion-letter] {
  display: inline-block;
  animation-name: text-motion-wave-letter;
  animation-duration: var(--text-motion-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--text-motion-iterations);
  animation-fill-mode: both;
  animation-delay: calc(var(--text-motion-step) * var(--text-motion-letter-index, 0));
  transform-origin: 50% 72%;
}

[data-text-motion-preset="pop_in"] {
  animation-name: text-motion-pop-in;
  animation-timing-function: cubic-bezier(.2, .8, .24, 1);
}

[data-text-motion-preset="blur_in"] {
  animation-name: text-motion-blur-in;
  animation-timing-function: cubic-bezier(.2, .82, .24, 1);
}

[data-text-motion-preset="rise_settle"] {
  animation-name: text-motion-rise-settle;
  animation-timing-function: cubic-bezier(.18, .84, .2, 1);
}

[data-text-motion-preset="spotlight_reveal"] {
  border-radius: 0.22em;
  padding-inline: 0.08em;
  background-image: linear-gradient(90deg, transparent 0%, var(--text-motion-soft) 45%, transparent 100%);
  background-repeat: no-repeat;
  background-position: -180% 0;
  animation-name: text-motion-spotlight-reveal;
}

[data-text-motion-preset="stagger_words"],
[data-text-motion-preset="stagger_lines"],
[data-text-motion-preset="type_on"] {
  animation: none;
}

[data-text-motion-preset="stagger_words"] .text-motion-word,
[data-text-motion-preset="type_on"] .text-motion-word,
[data-text-motion-preset="stagger_lines"] .text-motion-line {
  display: inline-block;
  animation-duration: var(--text-motion-duration);
  animation-timing-function: ease-out;
  animation-iteration-count: var(--text-motion-iterations);
  animation-fill-mode: both;
  animation-delay: calc(var(--text-motion-step) * var(--text-motion-fragment-index, 0));
}

[data-text-motion-preset="stagger_lines"] .text-motion-line {
  display: block;
}

[data-text-motion-preset="stagger_words"] .text-motion-word {
  animation-name: text-motion-rise-settle;
}

[data-text-motion-preset="stagger_lines"] .text-motion-line {
  animation-name: text-motion-blur-in;
}

[data-text-motion-preset="type_on"] .text-motion-word {
  animation-name: text-motion-type-on;
}

.inline-glossary-term {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 52%, transparent);
  text-decoration: none;
}

.inline-text-orientation {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.inline-text-orientation--rotate-90 {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.inline-text-orientation--rotate-270 {
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

.inline-text-orientation--stacked {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.08em;
}

.inline-glossary-term::after {
  content: attr(data-glossary-definition);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translate(-50%, 0.35rem);
  min-width: 220px;
  max-width: min(32ch, 70vw);
  padding: 0.6rem 0.72rem;
  border-radius: 14px;
  background: rgba(17, 28, 44, 0.96);
  color: #f7fbff;
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 42px rgba(7, 17, 29, 0.24);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  z-index: 35;
  transition: opacity 160ms ease, transform 160ms ease;
}

.inline-glossary-term:hover::after,
.inline-glossary-term:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.inline-text-state {
  --inline-text-state-accent: #2f6db4;
  --inline-text-state-soft: rgba(47, 109, 180, 0.18);
  --inline-text-state-strong: rgba(47, 109, 180, 0.34);
  --inline-text-state-contrast: #ffffff;
  position: relative;
  cursor: pointer;
  border-radius: 0.3em;
  outline: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, text-shadow 160ms ease, transform 160ms ease;
}

.inline-text-state[data-text-state-hover="underline"]:hover,
.inline-text-state[data-text-state-hover="underline"]:focus {
  text-decoration: underline;
  text-decoration-color: var(--inline-text-state-accent);
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.14em;
}

.inline-text-state[data-text-state-hover="highlight"]:hover,
.inline-text-state[data-text-state-hover="highlight"]:focus {
  box-shadow: inset 0 -0.58em 0 var(--inline-text-state-soft);
}

.inline-text-state[data-text-state-hover="glow"]:hover,
.inline-text-state[data-text-state-hover="glow"]:focus {
  text-shadow: 0 0 0.32rem var(--inline-text-state-soft), 0 0 0.8rem var(--inline-text-state-strong);
}

.inline-text-state[data-text-state-hover="lift"]:hover,
.inline-text-state[data-text-state-hover="lift"]:focus {
  transform: translateY(-1px);
  text-shadow: 0 7px 18px var(--inline-text-state-soft);
}

.inline-text-state[data-text-state-hover="invert"]:hover,
.inline-text-state[data-text-state-hover="invert"]:focus {
  background: var(--inline-text-state-accent);
  color: var(--inline-text-state-contrast);
  box-shadow: 0 8px 20px var(--inline-text-state-soft);
}

.inline-text-state[data-text-state-selected="outline"]:focus,
.inline-text-state[data-text-state-selected="outline"]:focus-visible {
  box-shadow: 0 0 0 2px var(--inline-text-state-strong);
}

.inline-text-state[data-text-state-selected="fill"]:focus,
.inline-text-state[data-text-state-selected="fill"]:focus-visible {
  background: var(--inline-text-state-soft);
  box-shadow: inset 0 0 0 1px var(--inline-text-state-strong);
}

.inline-text-state[data-text-state-selected="pill"]:focus,
.inline-text-state[data-text-state-selected="pill"]:focus-visible {
  background: var(--inline-text-state-accent);
  color: var(--inline-text-state-contrast);
  box-shadow: 0 12px 24px var(--inline-text-state-soft);
}

.inline-text-state[data-text-state-selected="glow"]:focus,
.inline-text-state[data-text-state-selected="glow"]:focus-visible {
  text-shadow: 0 0 0.4rem var(--inline-text-state-soft), 0 0 1rem var(--inline-text-state-strong);
  box-shadow: 0 0 0 1px var(--inline-text-state-soft);
}

.inline-text-state[data-text-state-selected="invert"]:focus,
.inline-text-state[data-text-state-selected="invert"]:focus-visible {
  background: color-mix(in srgb, var(--inline-text-state-accent) 88%, black);
  color: var(--inline-text-state-contrast);
  box-shadow: 0 12px 24px var(--inline-text-state-soft);
}

.text-surface-effect[data-text-surface-effect="glass"] {
  backdrop-filter: blur(4px);
}

.text-surface-effect[data-text-surface-effect="foil"] {
  letter-spacing: 0.01em;
}

.text-surface-effect[data-text-surface-effect="chalk"] {
  font-family: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif;
}

.text-surface-effect[data-text-surface-effect="marker"] {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-surface-effect[data-text-surface-effect="editorial_ink"] {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}

.text-surface-effect[data-text-surface-effect="grain"] {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 72% 38%, rgba(0,0,0,0.08) 0 0.7px, transparent 0.9px);
  background-size: 7px 7px, 9px 9px;
  background-repeat: repeat;
}

@keyframes text-motion-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
  65% { transform: scale(1.03); }
}

@keyframes text-motion-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

@keyframes text-motion-flash-highlight {
  0%, 100% {
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
  }
  28%, 70% {
    background-color: var(--text-motion-soft);
    box-shadow: 0 0 0.8rem var(--text-motion-soft);
  }
}

@keyframes text-motion-glow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 0.3rem var(--text-motion-soft), 0 0 0.9rem var(--text-motion-strong);
  }
}

@keyframes text-motion-underline-draw {
  0% { background-size: 0% 0.14em; }
  100% { background-size: 100% 0.14em; }
}

@keyframes text-motion-marker-swipe {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}

@keyframes text-motion-wave-letter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-0.16em) rotate(-2deg); }
  75% { transform: translateY(0.08em) rotate(2deg); }
}

@keyframes text-motion-pop-in {
  0% {
    transform: scale(0.78);
    opacity: 0;
  }
  72% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes text-motion-blur-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.35em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes text-motion-rise-settle {
  0% {
    opacity: 0;
    transform: translateY(0.6em) scale(0.96);
  }
  68% {
    opacity: 1;
    transform: translateY(-0.12em) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes text-motion-type-on {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(0.08em);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes text-motion-spotlight-reveal {
  0% {
    opacity: 0;
    background-position: -180% 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    background-position: 180% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-text-motion-preset],
  [data-text-motion-preset] [data-text-motion-letter] {
    animation: none !important;
    transition: none !important;
  }

  [data-text-motion-preset="underline_draw"],
  [data-text-motion-preset="marker_swipe"] {
    background-size: 100% 100%;
  }
}

[data-reduced-motion="true"] [data-text-motion-preset],
[data-reduced-motion="true"] [data-text-motion-preset] [data-text-motion-letter] {
  animation: none !important;
  transition: none !important;
}

[data-reduced-motion="true"] [data-text-motion-preset="underline_draw"],
[data-reduced-motion="true"] [data-text-motion-preset="marker_swipe"] {
  background-size: 100% 100%;
}

.custom-code-frame {
  width: 100%;
  border: 1px solid #c9d9ec;
  border-radius: 8px;
  background: #ffffff;
}

.rte-editor {
  min-height: 130px;
  padding: 0.55rem;
  outline: none;
}

.item-list {
  display: grid;
  gap: 0.6rem;
}

.item-card {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.builder-howto-card {
  border-style: dashed;
}

.builder-howto-card .field-hint {
  margin: 0;
}

.interaction-review {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.interaction-review-stats,
.interaction-review-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
}

.interaction-review-stat {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.7rem;
  display: grid;
  gap: 0.25rem;
}

.interaction-review-stat strong {
  font-size: 1.35rem;
  color: #17314c;
}

.interaction-review-signals,
.interaction-review-recommendations {
  display: grid;
  gap: 0.45rem;
}

.interaction-review-signal {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.55rem 0.65rem;
  color: #21384f;
}

.interaction-review-signal.tone-warn {
  border-color: #e4d1a5;
  background: #fff9ee;
}

.interaction-review-signal.tone-good {
  border-color: #c8dfce;
  background: #f3fff5;
}

.interaction-review-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.interaction-review-chip {
  border: 1px solid #c7d8eb;
  border-radius: 999px;
  background: #ffffff;
  color: #21415f;
  padding: 0.22rem 0.55rem;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.interaction-review-chip.is-missing {
  border-color: #e1cbbb;
  background: #fff6f3;
  color: #7a3e22;
}

.interaction-review-chip.is-clickable {
  appearance: none;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.interaction-review-chip.is-clickable:hover {
  border-color: #8fb2d9;
  background: #f0f7ff;
  box-shadow: 0 0 0 2px rgba(94, 160, 255, 0.12);
}

.interaction-review-chip.is-clickable:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.interaction-review-target.is-emphasized {
  border-color: #5ea0ff;
  box-shadow: 0 0 0 2px rgba(94, 160, 255, 0.18);
}

.interaction-review-list-head {
  display: grid;
  gap: 0.2rem;
  margin: 0.15rem 0 0.5rem;
}

.interaction-review-empty {
  border: 1px dashed #c2d2e5;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.interaction-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.overlay-editor {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.overlay-list {
  display: grid;
  gap: 0.5rem;
}
.overlay-card {
  border: 1px dashed #c5d7ec;
  background: #f7f9ff;
}
.overlay-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.builder-overlay-stage-host {
  display: grid;
  gap: 0.55rem;
}

.builder-overlay-stage-card {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  padding: 0.7rem;
  display: grid;
  gap: 0.55rem;
}

.builder-overlay-stage {
  position: relative;
  border: 1px solid #c5d8ee;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9),
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  min-height: 260px;
}

.builder-overlay-stage-canvas {
  position: relative;
  min-height: 260px;
  outline: none;
}

.builder-overlay-stage-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(47, 109, 180, 0.24);
}

.builder-overlay-stage-object {
  pointer-events: auto;
  cursor: move;
}

.builder-overlay-stage-object.is-stage-selected {
  filter: drop-shadow(0 12px 24px rgba(15, 32, 51, 0.22));
}

.builder-overlay-stage-object.is-stage-group-peer {
  filter: drop-shadow(0 8px 18px rgba(47, 109, 180, 0.14));
}

.builder-overlay-stage-object.is-stage-group-peer::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(47, 109, 180, 0.3);
  border-radius: 12px;
  pointer-events: none;
}

.builder-overlay-stage-object.is-stage-merge-peer {
  filter: drop-shadow(0 8px 18px rgba(155, 89, 182, 0.16));
}

.builder-overlay-stage-object.is-stage-merge-peer::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(155, 89, 182, 0.38);
  border-radius: 14px;
  pointer-events: none;
}

.builder-overlay-stage-object.is-stage-selected::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(47, 109, 180, 0.55);
  border-radius: 14px;
  pointer-events: none;
}

.builder-overlay-stage-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #2f6db4;
  box-shadow: 0 2px 8px rgba(9, 23, 38, 0.2);
}

.builder-overlay-stage-handle.is-resize {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.builder-overlay-stage-handle.is-rotate {
  left: calc(50% - 7px);
  top: -22px;
  cursor: grab;
}

.builder-overlay-stage-handle.is-rotate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: rgba(47, 109, 180, 0.45);
}

.gallery-trace {
  border: 1px dashed #c5d7ec;
  border-radius: 8px;
  padding: 0.45rem;
  background: #fcfdff;
  display: grid;
  gap: 0.35rem;
}

.gallery-image-tab-strip {
  display: grid;
  gap: 0.6rem;
}

.gallery-image-tab {
  width: 100%;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  text-align: left;
}

.gallery-image-tab.active {
  border-color: #1f5d9c;
  box-shadow: 0 10px 24px rgba(31, 93, 156, 0.16);
  transform: translateY(-1px);
}

.gallery-image-tab-thumb {
  min-height: 62px;
  border-radius: 10px;
  border: 1px solid #cfdded;
  background-color: #eef4fb;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gallery-image-tab-thumb.is-empty {
  display: grid;
  place-items: center;
  color: #5d7696;
  font-size: 0.75rem;
  font-weight: 700;
}

.gallery-image-tab-meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.gallery-image-tab-meta strong {
  color: #15212e;
}

.gallery-image-tab-meta span {
  color: #5d7696;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-image-tab.item-card-sortable {
  cursor: grab;
}

.gallery-image-tab-flags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.gallery-image-add-tab {
  justify-self: start;
}

.media-workspace-shell {
  gap: 0.85rem;
}

.media-workspace-header {
  display: grid;
  gap: 0.35rem;
}

.media-workspace-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.media-workspace-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.media-workspace-action {
  appearance: none;
  border: 1px solid #d7e3f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #18314d;
  border-radius: 0.7rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  position: relative;
}

.media-workspace-action.is-icon {
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.2rem;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-workspace-action-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.media-workspace-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 32, 51, 0.08);
}

.media-workspace-action.active {
  border-color: #1f5d9c;
  background: linear-gradient(180deg, #edf5ff 0%, #dfeeff 100%);
  color: #0d4277;
  box-shadow: 0 10px 20px rgba(31, 93, 156, 0.14);
}

.media-workspace-action-maven {
  border-color: #c7d9ee;
  background: linear-gradient(180deg, #fffdf7 0%, #eef6ff 100%);
}

.media-workspace-action-maven.active {
  border-color: #1f5d9c;
  background: linear-gradient(180deg, #e7f1ff 0%, #d6e9ff 100%);
  color: #0d4277;
}

.media-workspace-action-delete {
  margin-left: auto;
  border-color: #e5c3c7;
  background: linear-gradient(180deg, #fff7f7 0%, #ffefef 100%);
  color: #8d2b36;
}

.media-workspace-action-delete:hover {
  box-shadow: 0 8px 18px rgba(141, 43, 54, 0.14);
}

.media-workspace-action[data-hover-hint]:hover::after,
.media-workspace-action[data-hover-hint]:focus-visible::after {
  content: attr(data-hover-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
  z-index: 4600;
  max-width: calc(100vw - 1.5rem);
  width: max-content;
  padding: 0.38rem 0.56rem;
  border-radius: 0.7rem;
  background: #132033;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 32, 51, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.image-format-workspace {
  display: grid;
  gap: 0.75rem;
}

.image-format-dock {
  display: grid;
  gap: 0.9rem;
  align-items: start;
}

.image-format-dock-stage-shell {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.image-format-preview-stage {
  display: grid;
  gap: 0.75rem;
  height: clamp(280px, 34vw, 360px);
  min-height: 0;
  padding: 0.85rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  overflow: auto;
}

.image-format-preview-stage[data-layout="split"] {
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  align-items: stretch;
}

.image-format-preview-stage[data-layout="split"][data-text-position="left"] {
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
}

.image-format-preview-stage[data-layout="overlay"] {
  display: block;
}

.image-format-preview-media-wrap {
  display: flex;
  min-width: 0;
}

.image-format-preview-media-wrap[data-align="left"] {
  justify-content: flex-start;
}

.image-format-preview-media-wrap[data-align="center"] {
  justify-content: center;
}

.image-format-preview-media-wrap[data-align="right"] {
  justify-content: flex-end;
}

.image-format-preview-media-host {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vw, 300px);
  display: grid;
  place-items: center;
  border: 1px solid #cfdded;
  border-radius: 12px;
  overflow: hidden;
  background: #eef4fb;
}

.image-format-preview-media-host.is-empty {
  color: #5d7696;
  font-weight: 700;
}

.image-format-preview-media-host .item-media-preview-img,
.image-format-preview-media-host .media-workspace-preview-crop-shell,
.image-format-preview-media-host .preview-media-frame {
  width: 100%;
  max-width: 100%;
}

.image-format-preview-media-host .media-workspace-preview-crop-shell,
.image-format-preview-media-host .preview-media-frame,
.image-format-preview-media-host .preview-media-frame > .media-workspace-preview-crop-shell {
  height: 100%;
  min-height: inherit;
}

.image-format-preview-media-host .item-media-preview-img,
.image-format-preview-media-host .media-workspace-preview-crop-shell .image-crop-target {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #eef4fb;
}

.image-format-preview-copy {
  display: grid;
  gap: 0.5rem;
  align-content: center;
  min-width: 0;
}

.image-format-preview-copy[data-vertical-align="top"] {
  align-content: start;
}

.image-format-preview-copy[data-vertical-align="center"] {
  align-content: center;
}

.image-format-preview-copy[data-vertical-align="bottom"] {
  align-content: end;
}

.image-format-preview-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #18314d;
}

.image-format-preview-body {
  color: #40576f;
  line-height: 1.5;
}

.image-format-preview-body > :first-child {
  margin-top: 0;
}

.image-format-preview-body > :last-child {
  margin-bottom: 0;
}

.image-format-preview-caption {
  color: #5a6e86;
}

.image-format-preview-overlay-wrap {
  position: relative;
  min-height: 100%;
}

.image-format-preview-overlay-wrap .image-format-preview-media-wrap,
.image-format-preview-overlay-wrap .image-format-preview-media-host {
  min-height: inherit;
  height: 100%;
}

.image-format-preview-copy.is-overlay {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: rgba(15, 32, 51, 0.62);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.image-format-preview-copy.is-overlay .image-format-preview-heading,
.image-format-preview-copy.is-overlay .image-format-preview-body,
.image-format-preview-copy.is-overlay .image-format-preview-caption {
  color: #ffffff;
}

.image-format-sidebar-panel {
  align-content: start;
}

.image-format-sidebar-actions {
  margin-bottom: 0.35rem;
}

.image-style-preview-shell {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-style-preview-card {
  width: min(100%, 640px);
  border: 1px solid #d8e2ef;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 32, 51, 0.08);
}

.image-style-preview-media {
  margin: 0;
}

.image-style-sidebar-panel .editor-section-actions {
  margin-bottom: 0.4rem;
  overflow: visible;
  position: relative;
  align-items: flex-start;
}

.image-style-sidebar-panel .editor-section-actions [data-hover-hint] {
  position: relative;
  overflow: visible;
}

.image-style-sidebar-panel .editor-section-actions [data-hover-hint]:hover::after,
.image-style-sidebar-panel .editor-section-actions [data-hover-hint]:focus-visible::after {
  top: calc(100% + 0.4rem);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: normal;
  min-width: 11rem;
  max-width: min(20rem, calc(100vw - 2rem));
  overflow: visible;
  text-overflow: clip;
}

.image-format-fine-details {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.image-format-fine-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 0.9rem;
  font-weight: 700;
}

.image-format-fine-details > summary::-webkit-details-marker {
  display: none;
}

.image-format-fine-details > .style-grid {
  padding: 0 0.9rem 0.9rem;
}

.media-workspace-switch .editor-view-chip {
  min-width: 6.2rem;
  justify-content: center;
}

.media-workspace-side-panel {
  display: grid;
  gap: 0.9rem;
}

.media-workspace-side-panel.is-single-panel {
  grid-template-columns: minmax(0, 1fr);
}

.media-workspace-dock {
  display: grid;
  gap: 0.9rem;
  align-items: start;
}

.media-workspace-dock-stage-shell {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.media-workspace-dock-stage-shell .media-workspace-action-bar {
  justify-content: flex-start;
}

.media-workspace-dock-stage {
  min-width: 0;
  width: 100%;
  max-width: 500px;
}

.media-workspace-dock-actions {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
}

.paragraph-workspace-shell {
  gap: 0.2rem;
  margin-top: -0.15rem;
}

.paragraph-workspace-dock {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-left: -0.35rem;
}

.paragraph-workspace-dock.is-toolbar-only {
  grid-template-columns: minmax(0, 1fr);
}

.paragraph-workspace-stage-shell .media-workspace-action-bar {
  margin-bottom: 0.1rem;
}

.paragraph-workspace-stage-shell {
  position: relative;
  gap: 0.25rem;
  padding-top: 2.9rem;
}

.paragraph-workspace-actions {
  align-content: start;
}

.paragraph-workspace-actions.is-toolbar-only {
  justify-self: stretch;
  width: 100%;
}

.paragraph-workspace-actions .media-workspace-action-bar {
  margin-bottom: 0.1rem;
  justify-content: flex-end;
}

.paragraph-workspace-popup-dock .paragraph-workspace-stage-shell > .media-workspace-action-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  justify-content: flex-end;
  border: 1px solid rgba(215, 227, 240, 0.94);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(15, 32, 51, 0.08);
  padding: 0.35rem;
  backdrop-filter: blur(10px);
}

.paragraph-workspace-stage-host {
  align-items: stretch;
  max-width: none;
}

.paragraph-workspace-stage {
  min-height: 20rem;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 0.25rem 0.3rem;
}

.paragraph-workspace-stage .paragraph-workspace-editor-field {
  min-width: 0;
}

.paragraph-workspace-editor-label {
  display: none;
}

.paragraph-workspace-editor-rte {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.paragraph-workspace-editor-rte .rte-editor {
  border: none;
  background: transparent;
  min-height: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

.paragraph-workspace-editor-rte .rte-editor > :first-child {
  margin-top: 0;
}

.paragraph-workspace-editor-rte .rte-editor > :last-child {
  margin-bottom: 0;
}

.paragraph-workspace-editor-rte .rte-editor:focus {
  outline: none;
}

.paragraph-workspace-editor-field.preview-text-stack-heading .rte-editor {
  font-family: var(--preview-heading-font-family);
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.14;
}

.paragraph-workspace-editor-field.preview-text-stack-subheading .rte-editor {
  font-family: var(--preview-font-family);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.45;
  color: color-mix(in srgb, currentColor 72%, white);
}

.paragraph-workspace-editor-field.preview-text-stack-body .rte-editor {
  font-family: var(--preview-font-family);
  column-count: var(--preview-text-columns, 1);
  column-gap: clamp(1.1rem, 2vw, 2rem);
}

.paragraph-workspace-editor-field.preview-text-stack-body .rte-editor > * {
  break-inside: avoid;
}

.paragraph-workspace-panel {
  gap: 0.85rem;
}

.paragraph-popup-compact-panel {
  gap: 0.6rem;
}

.paragraph-popup-compact-panel > .field {
  margin-top: 0;
}

.paragraph-popup-compact-panel > .field > .field-label,
.paragraph-popup-compact-panel .field-hint {
  display: none;
}

.paragraph-popup-compact-panel .style-box {
  gap: 0.55rem;
  padding: 0.7rem;
}

.paragraph-popup-compact-panel .editor-section-actions {
  margin-bottom: 0.35rem;
}

.paragraph-popup-more {
  margin-top: 0.1rem;
}

.paragraph-popup-more > summary {
  font-size: 0.82rem;
  font-weight: 700;
}

.paragraph-workspace-popup-panel {
  position: absolute;
  top: 2.9rem;
  right: 0;
  z-index: 5;
  width: min(760px, calc(100% - 1rem));
  max-height: min(76vh, 860px);
  overflow: auto;
  border: 1px solid rgba(214, 221, 231, 0.96);
  border-radius: 14px;
  background: #e7edf4;
  box-shadow: 0 26px 56px rgba(15, 32, 51, 0.22);
}

.paragraph-workspace-popup-head {
  display: grid;
  gap: 0.45rem;
  position: sticky;
  top: -0.01rem;
  z-index: 1;
  margin: -0.12rem -0.12rem 0;
  padding: 0.2rem 0.2rem 0.28rem;
  border-bottom: 1px solid #dbe4ef;
  background: rgba(231, 237, 244, 0.988);
  backdrop-filter: blur(10px);
}

.paragraph-workspace-popup-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.paragraph-workspace-popup-head strong {
  font-size: 0.92rem;
  color: #17324d;
}

.paragraph-workspace-popup-head-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.paragraph-workspace-popup-head-tab {
  min-width: 0;
  padding: 0.34rem 0.72rem;
  font-size: 0.78rem;
  line-height: 1;
  border-radius: 999px;
}

.paragraph-workspace-popup-head-tab.is-active {
  background: #1f5d9c;
  border-color: #1f5d9c;
  color: #ffffff;
}

.preview-first-block-workspace-shell {
  gap: 0.2rem;
  margin-top: -0.15rem;
}

.preview-first-block-workspace-dock {
  grid-template-columns: minmax(0, 1fr) 680px;
  column-gap: 0.45rem;
  align-items: start;
  margin-left: -0.35rem;
}

.preview-first-block-workspace-stage-shell {
  gap: 0.25rem;
}

.preview-first-block-workspace-stage-host {
  align-items: stretch;
  max-width: none;
}

.preview-first-block-workspace-stage {
  min-height: 20rem;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 0.25rem 0.3rem;
}

.preview-first-block-workspace-actions {
  align-content: start;
}

.preview-first-block-workspace-actions .media-workspace-action-bar {
  margin-bottom: 0.1rem;
  justify-content: flex-end;
}

.preview-first-block-workspace-panel {
  gap: 0.85rem;
}

.paragraph-workspace-inline-switch {
  width: 100%;
}

.paragraph-subpanel-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  width: 100%;
}

.paragraph-subpanel-switch.editor-view-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  width: 100%;
}

.paragraph-subpanel-switch .editor-view-chip {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.paragraph-workspace-focus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.paragraph-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.65rem;
}

.paragraph-quick-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
}

.paragraph-range-control {
  display: grid;
  gap: 0.35rem;
}

.paragraph-range-control input[type="range"] {
  width: 100%;
}

.paragraph-range-readout {
  font-size: 0.78rem;
  font-weight: 700;
  color: #36597c;
}

.paragraph-style-card {
  align-content: start;
}

.paragraph-custom-panel .style-box {
  margin-top: 0.55rem;
}

.paragraph-workspace-layout-thumb,
.paragraph-workspace-preset-thumb {
  display: grid;
  gap: 0.32rem;
  width: 100%;
}

.paragraph-workspace-layout-line {
  display: block;
  height: 0.34rem;
  border-radius: 999px;
  background: #b7c9dc;
}

.paragraph-workspace-layout-line.is-heading {
  width: 72%;
  height: 0.46rem;
  background: #7ea1c8;
}

.paragraph-workspace-layout-line.is-subheading {
  width: 56%;
  background: #95aec7;
}

.paragraph-workspace-layout-line.is-body {
  width: 100%;
}

.paragraph-workspace-preset-title {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #16314a;
}

.paragraph-workspace-preset-body {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #4f6479;
}

.paragraph-workspace-preset-body.is-lead {
  font-size: 0.97rem;
  color: #18344d;
}

.paragraph-workspace-preset-body.is-fine-print {
  font-size: 0.72rem;
}

.paragraph-workspace-preset-thumb.is-supporting-note {
  padding: 0.45rem;
  border-radius: 0.8rem;
  background: #f6f9fc;
}

.media-workspace-replace-panel,
.media-workspace-sidebar-panel {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  min-width: 0;
}

.maven-ai-panel {
  width: min(100%, 760px);
  gap: 0.9rem;
}

.maven-ai-panel .media-workspace-action-bar {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.maven-ai-panel .style-box,
.maven-ai-panel .media-workspace-side-panel {
  padding: 1rem;
  gap: 0.8rem;
}

.media-workspace-dock-actions .field {
  margin-top: 0;
}

.media-workspace-dock-actions .item-media-upload-control,
.media-workspace-dock-actions .attached-audio-editor {
  max-width: 100%;
}

.media-workspace-fixed-preview {
  display: grid;
  gap: 0.35rem;
  width: 100%;
}

.media-workspace-fixed-preview-media {
  min-height: 0;
  height: clamp(280px, 34vw, 360px);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  border: 1px solid #cfdded;
  border-radius: 12px;
  overflow: hidden;
  background: #eef4fb;
}

.media-workspace-fixed-preview-media.is-empty {
  color: #5d7696;
  font-weight: 700;
}

.media-workspace-fixed-preview-media .item-media-preview-img,
.media-workspace-fixed-preview-media .preview-media-frame {
  width: 100%;
  max-width: 100%;
}

.media-workspace-fixed-preview-media .media-workspace-preview-crop-shell,
.media-workspace-fixed-preview-media .preview-media-frame,
.media-workspace-fixed-preview-media .preview-media-frame > .media-workspace-preview-crop-shell {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: inherit;
}

.media-workspace-fixed-preview-media .media-workspace-preview-crop-shell {
  aspect-ratio: auto;
  border-radius: 0;
  margin-bottom: 0;
}

.media-workspace-fixed-preview-media .media-workspace-preview-crop-shell .image-crop-target,
.media-workspace-fixed-preview-media .item-media-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #eef4fb;
}

.media-workspace-fixed-preview-media .media-workspace-preview-crop-shell.is-edge-crop .image-crop-target {
  object-fit: fill;
}

.media-workspace-fixed-preview-meta {
  margin-top: 0.1rem;
}

.media-workspace-fixed-preview-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  min-width: 4.8rem;
  height: 2rem;
  border: 1px solid rgba(141, 43, 54, 0.18);
  border-radius: 999px;
  background: rgba(255, 247, 247, 0.96);
  color: #8d2b36;
  font-weight: 700;
  font-size: 0.76rem;
  line-height: 1;
  padding: 0 0.7rem;
  cursor: pointer;
}

.media-workspace-fixed-preview-delete:hover {
  background: rgba(255, 239, 239, 0.98);
}

.media-workspace-caption-preview {
  position: relative;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #cfdded;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.media-workspace-caption-preview-body {
  width: 100%;
}

.media-workspace-caption-preview-scene {
  margin: 0;
}

.media-workspace-sidebar,
.media-workspace-main {
  display: grid;
  gap: 0.7rem;
}

.media-workspace-preview-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid #d7e3f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.media-workspace-preview-media {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #cfdded;
  background-color: #eef4fb;
  overflow: hidden;
}

.media-workspace-preview-media.is-empty {
  color: #5d7696;
  font-weight: 700;
}

.media-workspace-preview-media .item-media-preview-img,
.media-workspace-preview-media .preview-media-frame {
  width: 100%;
  max-width: 100%;
}

.media-workspace-preview-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.media-workspace-fine-tune {
  border-top: 1px solid #e4edf7;
  padding-top: 0.75rem;
}

.media-workspace-fine-tune summary {
  cursor: pointer;
  font-weight: 600;
}

.media-workspace-replace-panel .item-media-preview {
  margin-top: 0;
  max-width: 320px;
}

.media-workspace-replace-panel .item-media-preview img,
.media-workspace-replace-panel .item-media-preview .preview-media-frame {
  max-width: 320px;
}

.media-workspace-dock .image-crop-visual-editor,
.media-workspace-dock .quick-remove-editor,
.media-workspace-dock .quick-remove-body {
  width: 100%;
}

.media-workspace-dock .image-crop-visual-stage,
.media-workspace-dock .quick-remove-stage {
  width: 100%;
  min-height: 0;
  height: clamp(280px, 34vw, 360px);
}

.media-workspace-dock .quick-remove-preview-canvas:not(.quick-remove-stage-preview) {
  width: 100%;
  max-width: 100%;
}

.media-workspace-dock .quick-remove-stage-preview {
  width: 100%;
  height: 100%;
}

.media-workspace-dock .image-crop-visual-image,
.media-workspace-dock .quick-remove-stage-image,
.media-workspace-dock .quick-remove-stage-preview {
  position: absolute;
  inset: 0;
  object-fit: contain;
  background: #eef4fb;
  width: 100%;
  height: 100%;
}

.media-workspace-dock .quick-remove-stage-preview {
  object-fit: contain;
}

.gallery-active-image-workspace {
  gap: 0.75rem;
}

.gallery-active-image-header {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #e4edf7;
}

.gallery-workspace-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gallery-workspace-switch .editor-view-chip {
  min-width: 6.2rem;
  justify-content: center;
}

.gallery-active-media-tool {
  display: grid;
  gap: 0.7rem;
}

.gallery-active-media-tool .item-media-preview {
  min-height: 320px;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid #d7e3f0;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.gallery-active-media-tool .item-media-preview-url {
  display: none;
}

.gallery-active-media-tool .image-crop-visual-stage {
  width: 100%;
  min-height: 320px;
}

.gallery-active-image-workspace .gallery-overlay-stage {
  min-height: 320px;
}

.gallery-active-image-workspace .gallery-overlay-stage-image {
  max-height: 560px;
}

.gallery-side-panel-layout {
  display: grid;
  gap: 0.8rem;
}

.gallery-side-panel-layout.is-single-panel {
  grid-template-columns: minmax(0, 1fr);
}

.gallery-side-panel-sidebar,
.gallery-side-panel-main {
  display: grid;
  gap: 0.55rem;
}

.gallery-selected-preview-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid #d7e3f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.gallery-selected-preview-media {
  min-height: 180px;
  border-radius: 12px;
  border: 1px solid #cfdded;
  background-color: #eef4fb;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gallery-selected-preview-media.is-empty {
  display: grid;
  place-items: center;
  color: #5d7696;
  font-weight: 700;
}

.gallery-selected-preview-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

@media (min-width: 980px) {
  .media-workspace-dock {
    grid-template-columns: minmax(340px, 430px) minmax(420px, 1fr);
    column-gap: 1.15rem;
  }

  .paragraph-workspace-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .paragraph-workspace-dock.is-toolbar-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-first-block-workspace-dock {
    grid-template-columns: minmax(0, 1fr) 680px;
    column-gap: 0.45rem;
  }

  .image-format-dock {
    grid-template-columns: minmax(340px, 430px) minmax(420px, 1fr);
    column-gap: 1.15rem;
  }

  .media-workspace-dock-actions {
    min-width: 0;
  }

  .media-workspace-side-panel {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
  }

  .media-workspace-side-panel.is-single-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-side-panel-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
  }

  .gallery-side-panel-layout.is-single-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gallery-trace-row {
  border-bottom: 1px solid rgba(140, 156, 179, 0.3);
  padding-bottom: 0.3rem;
}
.gallery-trace-row:last-child {
  border-bottom: none;
}
.gallery-trace-row strong {
  display: block;
}
.gallery-trace-meta {
  font-size: 0.75rem;
  color: #596680;
  margin-bottom: 0.2rem;
}
.gallery-trace-detail {
  margin: 0;
  font-size: 0.72rem;
  background: rgba(31, 93, 156, 0.05);
  border-radius: 4px;
  padding: 0.35rem;
  overflow-x: auto;
}

body[data-color-mode="dark"] .gallery-image-tab {
  border-color: rgba(122, 145, 178, 0.3);
  background: linear-gradient(180deg, rgba(23, 35, 50, 0.96) 0%, rgba(18, 28, 42, 0.98) 100%);
}

body[data-color-mode="dark"] .gallery-image-tab.active {
  border-color: #5ea2f0;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

body[data-color-mode="dark"] .gallery-image-tab-thumb {
  border-color: rgba(122, 145, 178, 0.26);
  background-color: rgba(37, 54, 73, 0.95);
}

body[data-color-mode="dark"] .gallery-image-tab-thumb.is-empty,
body[data-color-mode="dark"] .gallery-image-tab-meta span {
  color: #b7cadf;
}

body[data-color-mode="dark"] .gallery-image-tab-meta strong {
  color: #eef4ff;
}

body[data-color-mode="dark"] .gallery-active-image-header {
  border-bottom-color: rgba(122, 145, 178, 0.22);
}

body[data-color-mode="dark"] .media-workspace-preview-card {
  border-color: rgba(122, 145, 178, 0.28);
  background: linear-gradient(180deg, rgba(23, 35, 50, 0.96) 0%, rgba(18, 28, 42, 0.98) 100%);
}

body[data-color-mode="dark"] .media-workspace-fixed-preview-media {
  border-color: rgba(122, 145, 178, 0.26);
  background-color: rgba(37, 54, 73, 0.95);
}

body[data-color-mode="dark"] .media-workspace-fixed-preview-media.is-empty {
  color: #b7cadf;
}

body[data-color-mode="dark"] .media-workspace-fixed-preview-delete {
  border-color: rgba(220, 124, 135, 0.36);
  background: rgba(73, 29, 38, 0.92);
  color: #ffd6db;
}

body[data-color-mode="dark"] .media-workspace-action {
  border-color: rgba(122, 145, 178, 0.3);
  background: linear-gradient(180deg, rgba(23, 35, 50, 0.96) 0%, rgba(18, 28, 42, 0.98) 100%);
  color: #eef4ff;
}

body[data-color-mode="dark"] .media-workspace-action.active {
  border-color: #5ea2f0;
  background: linear-gradient(180deg, rgba(24, 55, 87, 0.98) 0%, rgba(18, 45, 73, 0.98) 100%);
  color: #e9f4ff;
}

body[data-color-mode="dark"] .media-workspace-action-delete {
  border-color: rgba(220, 124, 135, 0.36);
  background: linear-gradient(180deg, rgba(73, 29, 38, 0.95) 0%, rgba(54, 20, 28, 0.98) 100%);
  color: #ffd6db;
}

body[data-color-mode="dark"] .media-workspace-preview-media {
  border-color: rgba(122, 145, 178, 0.26);
  background-color: rgba(37, 54, 73, 0.95);
}

body[data-color-mode="dark"] .media-workspace-preview-media.is-empty {
  color: #b7cadf;
}

body[data-color-mode="dark"] .media-workspace-fine-tune {
  border-top-color: rgba(122, 145, 178, 0.22);
}

body[data-color-mode="dark"] .gallery-active-media-tool .item-media-preview {
  border-color: rgba(122, 145, 178, 0.28);
  background: linear-gradient(180deg, rgba(20, 33, 48, 0.98) 0%, rgba(15, 25, 39, 1) 100%);
}

body[data-color-mode="dark"] .gallery-selected-preview-card {
  border-color: rgba(122, 145, 178, 0.28);
  background: linear-gradient(180deg, rgba(23, 35, 50, 0.96) 0%, rgba(18, 28, 42, 0.98) 100%);
}

body[data-color-mode="dark"] .gallery-selected-preview-media {
  border-color: rgba(122, 145, 178, 0.26);
  background-color: rgba(37, 54, 73, 0.95);
}

body[data-color-mode="dark"] .gallery-selected-preview-media.is-empty {
  color: #b7cadf;
}


.checkbox-editor-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkbox-editor-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid #dfe6f5;
  background: #fff;
  box-shadow: 0 6px 18px rgba(13, 24, 56, 0.05);
}

.checkbox-editor-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.checkbox-editor-toggle input {
  opacity: 0;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
}

.checkbox-indicator {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  border: 2px solid #cfd8ec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.checkbox-editor-toggle input:checked + .checkbox-indicator {
  border-color: var(--brand, #1f5d9c);
  background: var(--brand, #1f5d9c);
}

.checkbox-editor-toggle input:checked + .checkbox-indicator::after {
  content: '✔';
  font-size: 0.65rem;
  color: #fff;
}

.checkbox-editor-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.checkbox-detail-field {
  background: #f8fbff;
  padding: 0.4rem;
  border-radius: 8px;
}

.checkbox-editor-controls {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.checkbox-text-editor {
  min-height: 120px;
}

.process-editor {
  display: grid;
  gap: 1rem;
}

.process-editor-general {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  padding: 0.9rem;
  background: #fbfdff;
  display: grid;
  gap: 0.7rem;
}

.process-editor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.process-editor-legend-chip {
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #d4d8ea;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f2b46;
  background: #f5f7ff;
}

.process-editor-legend-chip[data-status="complete"] {
  border-color: #a8d9b4;
  color: #1b5535;
  background: #e8f8ef;
}

.process-editor-legend-chip[data-status="current"] {
  border-color: #f5d6a5;
  color: #704b09;
  background: #fff4d9;
}

.process-editor-legend-chip[data-status="upcoming"] {
  border-color: #d5dbea;
  color: #32445f;
  background: #f0f3fb;
}

.process-editor-legend-chip[data-status="blocked"] {
  border-color: #ebc2c2;
  color: #5c1d1d;
  background: #fdeeea;
}

.process-editor-steps {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  padding: 0.85rem;
  background: #ffffff;
}

.process-editor-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2b46;
  margin-bottom: 0.3rem;
}

.item-media-control input[type="text"] {
  width: 100%;
}

.item-media-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.item-media-upload input[type="file"] {
  flex: 1;
  min-width: 180px;
}

.item-media-preview {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.item-media-preview-frame {
  position: relative;
}

.item-media-preview img {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin-bottom: 0.35rem;
}

.item-media-preview iframe {
  width: 100%;
  display: block;
  min-height: 220px;
  border-radius: 8px;
  margin-bottom: 0.35rem;
}

.item-media-preview-edit-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.item-media-preview-edit-toolbar {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  right: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.item-media-preview-frame:hover .item-media-preview-edit-toolbar,
.item-media-preview-frame:focus-within .item-media-preview-edit-toolbar,
.item-media-preview-frame.is-edit-panel-open .item-media-preview-edit-toolbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.item-media-preview-edit-button {
  pointer-events: auto;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(9, 23, 38, 0.14);
}

.item-media-preview-edit-button-primary {
  font-weight: 700;
}

.item-media-preview-edit-panel {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  max-height: calc(100% - 3.8rem);
  overflow: auto;
  padding: 0.8rem;
  border: 1px solid rgba(31, 61, 102, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px rgba(9, 23, 38, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.item-media-preview-edit-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.item-media-preview-edit-panel-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #16314a;
}

.item-media-preview-edit-panel-body {
  display: grid;
  gap: 0.65rem;
}

.item-media-preview-edit-panel .item-list,
.item-media-preview-edit-panel .style-box,
.item-media-preview-edit-panel details {
  margin-top: 0;
}

@media (max-width: 820px) {
  .item-media-preview-edit-panel {
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.45rem;
    max-height: calc(100% - 3.25rem);
    padding: 0.7rem;
  }
}

.image-crop-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f8fd;
  aspect-ratio: var(--image-crop-aspect, 16 / 9);
  margin-bottom: 0.35rem;
}

.image-crop-shell .image-crop-target {
  width: 100%;
  height: 100%;
  max-width: none;
  margin-bottom: 0;
  display: block;
  object-fit: cover;
  object-position: var(--image-crop-x, 50%) var(--image-crop-y, 50%);
  transform: scale(var(--image-crop-zoom, 1));
  transform-origin: center center;
}

.image-crop-shell.is-edge-crop .image-crop-target {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% * var(--image-crop-scale-x, 1));
  height: calc(100% * var(--image-crop-scale-y, 1));
  max-width: none;
  max-height: none;
  left: calc(var(--image-crop-shift-x, 0) * -1%);
  top: calc(var(--image-crop-shift-y, 0) * -1%);
  object-fit: fill;
  object-position: 0 0;
  transform: none;
}

.image-crop-visual-editor {
  display: grid;
  gap: 0.45rem;
}

.image-crop-visual-stage {
  position: relative;
  width: min(100%, 560px);
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9),
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  user-select: none;
  touch-action: none;
}

.image-crop-visual-stage.is-disabled {
  opacity: 0.92;
}

.image-crop-visual-image {
  display: block;
  width: 100%;
  height: auto;
}

.image-crop-visual-prompt {
  padding: 0.1rem 0.1rem 0;
  color: #4d6078;
  font-size: 0.76rem;
  line-height: 1.35;
}

.image-crop-visual-box {
  position: absolute;
  border: 2px solid #2f6db4;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(9, 23, 38, 0.44);
  cursor: move;
}

.image-crop-visual-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 33.333% 100%, 100% 33.333%;
}

.image-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #2f6db4;
  box-shadow: 0 2px 8px rgba(9, 23, 38, 0.2);
}

.image-crop-handle-nw,
.image-crop-handle-ne,
.image-crop-handle-se,
.image-crop-handle-sw {
  width: 14px;
  height: 14px;
}

.image-crop-handle-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.image-crop-handle-n {
  top: -6px;
  left: calc(50% - 6px);
  cursor: ns-resize;
}

.image-crop-handle-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.image-crop-handle-e {
  top: calc(50% - 6px);
  right: -6px;
  cursor: ew-resize;
}

.image-crop-handle-se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.image-crop-handle-s {
  bottom: -6px;
  left: calc(50% - 6px);
  cursor: ns-resize;
}

.image-crop-handle-sw {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.image-crop-handle-w {
  top: calc(50% - 6px);
  left: -6px;
  cursor: ew-resize;
}

.guided-annotation-visual-editor {
  display: grid;
  gap: 0.45rem;
}

.guided-annotation-visual-stage {
  position: relative;
  width: min(100%, 640px);
  min-height: 220px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9),
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  user-select: none;
}

.guided-annotation-visual-image {
  display: block;
  width: 100%;
  height: auto;
}

.guided-annotation-visual-zone-layer {
  position: absolute;
  inset: 0;
}

.guided-annotation-visual-zone {
  position: absolute;
  padding: 0;
  border: 2px solid #2f6db4;
  border-radius: 8px;
  background: rgba(47, 109, 180, 0.14);
  box-shadow: 0 0 0 9999px rgba(9, 23, 38, 0.08);
  cursor: move;
}

.guided-annotation-visual-zone.is-selected {
  border-color: #12457a;
  background: rgba(47, 109, 180, 0.2);
  box-shadow: 0 0 0 2px rgba(18, 69, 122, 0.18), 0 0 0 9999px rgba(9, 23, 38, 0.1);
}

.guided-annotation-visual-zone-label {
  position: absolute;
  left: 0.35rem;
  top: 0.35rem;
  max-width: calc(100% - 0.7rem);
  padding: 0.12rem 0.36rem;
  border-radius: 999px;
  background: rgba(9, 23, 38, 0.8);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.guided-annotation-visual-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #2f6db4;
  box-shadow: 0 2px 8px rgba(9, 23, 38, 0.2);
}

.guided-annotation-visual-handle-nw,
.guided-annotation-visual-handle-ne,
.guided-annotation-visual-handle-se,
.guided-annotation-visual-handle-sw {
  width: 14px;
  height: 14px;
}

.guided-annotation-visual-handle-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.guided-annotation-visual-handle-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.guided-annotation-visual-handle-se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.guided-annotation-visual-handle-sw {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.image-resize-visual-editor {
  display: grid;
  gap: 0.45rem;
}

.image-resize-visual-stage {
  position: relative;
  width: min(100%, 560px);
  min-height: 220px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9),
    linear-gradient(45deg, #eef3f9 25%, transparent 25%, transparent 75%, #eef3f9 75%, #eef3f9);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  user-select: none;
}

.image-resize-visual-host {
  position: relative;
  margin: 1.1rem auto;
  max-width: 100%;
}

.image-resize-visual-slot {
  position: relative;
}

.image-resize-visual-host .item-media-preview-img,
.image-resize-visual-host .image-crop-shell {
  margin-bottom: 0;
}

.image-resize-handle {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #2f6db4;
  box-shadow: 0 2px 8px rgba(9, 23, 38, 0.2);
}

.image-resize-handle-e {
  top: calc(50% - 8px);
  right: -8px;
  width: 14px;
  height: 14px;
  cursor: ew-resize;
  transform: translate(50%, -50%);
}

.image-resize-handle-se {
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  transform: translate(50%, 50%);
}

.quick-remove-editor {
  margin-top: 0.8rem;
}

.quick-remove-body {
  display: grid;
  gap: 0.75rem;
}

.quick-remove-stage {
  position: relative;
  width: min(100%, 560px);
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f8fd;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}

.quick-remove-stage-image {
  display: block;
  width: 100%;
  height: auto;
}

.quick-remove-stage.is-single-preview .quick-remove-stage-image {
  opacity: 0;
}

.quick-remove-selection {
  position: absolute;
  border: 2px dashed #2f6db4;
  background: rgba(47, 109, 180, 0.18);
  box-shadow: 0 0 0 9999px rgba(20, 33, 51, 0.12);
  pointer-events: none;
  z-index: 2;
}

.quick-remove-preview-label {
  margin-top: -0.1rem;
}

.quick-remove-preview-canvas {
  display: block;
  width: min(100%, 560px);
  max-width: 100%;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #ffffff;
}

.quick-remove-stage-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 1;
}

.quick-remove-meta {
  margin-top: -0.2rem;
}

.quick-remove-actions {
  flex-wrap: wrap;
}

.item-media-preview-url {
  word-break: break-all;
  font-size: 0.73rem;
  color: #4b5f79;
}

.preview-attached-audio {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.attached-audio-media-host {
  position: relative;
}

.attached-audio-inline-player {
  display: none;
}

.image-audio-play-button {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  background: rgba(9, 23, 38, 0.86);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(9, 23, 38, 0.28);
  cursor: pointer;
}

.image-audio-play-button:hover {
  background: rgba(9, 23, 38, 0.94);
}

.image-audio-play-button.is-playing {
  background: rgba(20, 98, 74, 0.92);
}

.preview-attached-audio-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334861;
}

.preview-attached-audio audio {
  width: 100%;
}

.item-media-preview-empty {
  color: var(--muted);
}

.selected-item {
  border-color: #84a7d0;
  box-shadow: 0 0 0 1px rgba(47, 109, 180, 0.25) inset;
}

.labeled-stage-card {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.6rem;
  display: grid;
  gap: 0.45rem;
}

.labeled-stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.labeled-stage-inline-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0.45rem;
  align-items: start;
}

.labeled-stage-tool.is-armed {
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.16);
}

.labeled-stage-selection-note {
  font-size: 0.82rem;
  color: #36516d;
  font-weight: 600;
}

.labeled-stage {
  position: relative;
  border: 1px solid #c5d8ee;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #ecf4ff, #dfeeff);
  min-height: 220px;
}

.preview-labeled-stage {
  background: #ffffff;
  border-color: #d6dbe7;
  box-shadow: 0 12px 30px rgba(15, 73, 130, 0.15);
  padding: 0;
  margin-bottom: 0.85rem;
}

.labeled-stage-image {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: contain;
  background: #0b1725;
}

.labeled-stage-placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.labeled-stage-overlay {
  position: absolute;
  inset: 0;
}

.labeled-stage-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--maven-hotspot-size, 30px);
  height: var(--maven-hotspot-size, 30px);
  border-radius: 999px;
  border: 2px solid var(--maven-hotspot-border, #ffffff);
  background: var(--maven-hotspot-bg, #2f6db4);
  color: var(--maven-hotspot-text, #ffffff);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: move;
  padding: 0;
  line-height: 1;
  opacity: var(--maven-hotspot-opacity, 1);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.labeled-stage-marker:hover,
.labeled-stage-marker:focus-visible {
  background: var(--maven-hotspot-hover-bg, var(--maven-hotspot-bg, #2f6db4));
  color: var(--maven-hotspot-hover-text, var(--maven-hotspot-text, #ffffff));
  border-color: var(--maven-hotspot-hover-border, var(--maven-hotspot-border, #ffffff));
  box-shadow: 0 0 0 3px var(--maven-hotspot-hover-ring, var(--maven-hotspot-ring, rgba(47, 109, 180, 0.3)));
  outline: none;
}

.labeled-stage-marker.active {
  background: var(--maven-hotspot-selected-bg, var(--maven-hotspot-bg, #0f4e8e));
  color: var(--maven-hotspot-selected-text, var(--maven-hotspot-text, #ffffff));
  border-color: var(--maven-hotspot-selected-border, var(--maven-hotspot-border, #ffffff));
  box-shadow: 0 0 0 3px var(--maven-hotspot-selected-ring, var(--maven-hotspot-ring, rgba(47, 109, 180, 0.3)));
}

.preview-hotspot-marker {
  width: 2.35rem;
  height: 2.35rem;
  border-width: 3px;
  box-shadow: 0 10px 22px rgba(16, 49, 88, 0.32), 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.preview-hotspot-marker.is-correct {
  background: linear-gradient(180deg, #2ba675 0%, #187857 100%);
}

.preview-hotspot-marker:disabled {
  opacity: var(--maven-hotspot-opacity, 1);
  color: var(--maven-hotspot-text, #ffffff);
  border-color: var(--maven-hotspot-border, rgba(255, 255, 255, 0.95));
  cursor: default;
}

.hotspot-stage-target {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px dashed #2f6db4;
  border-radius: 999px;
  background: rgba(47, 109, 180, 0.12);
  color: #16375b;
  cursor: move;
  padding: 0;
  min-width: 2.8rem;
  min-height: 2.8rem;
}

.hotspot-stage-target.active {
  box-shadow: 0 0 0 3px rgba(47, 109, 180, 0.24);
  background: rgba(47, 109, 180, 0.18);
}

.hotspot-stage-target.is-correct {
  border-color: #187857;
  background: rgba(24, 120, 87, 0.14);
}

.hotspot-stage-target-label {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #183b63;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.hotspot-stage-target.is-correct .hotspot-stage-target-label {
  background: #187857;
}

.hotspot-stage-target-handle {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2f6db4;
  box-shadow: 0 2px 8px rgba(15, 34, 69, 0.18);
  cursor: nwse-resize;
}

.hotspot-stage-target.is-correct .hotspot-stage-target-handle {
  border-color: #187857;
}

.simulation-stage-target {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px dashed #2f6db4;
  border-radius: 12px;
  background: rgba(47, 109, 180, 0.12);
  color: #16375b;
  cursor: move;
  padding: 0;
  display: grid;
  place-items: start;
  min-width: 3rem;
  min-height: 2.2rem;
}

.simulation-stage-target span {
  margin: 0.3rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: #183b63;
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.simulation-stage-target-handle {
  position: absolute;
  right: -0.38rem;
  bottom: -0.38rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2f6db4;
  box-shadow: 0 2px 8px rgba(15, 34, 69, 0.18);
  cursor: nwse-resize;
}

.simulation-storyboard-card,
.simulation-timeline-editor-card {
  display: grid;
  gap: 0.55rem;
}

.simulation-preview-workbench {
  display: grid;
  gap: 0.85rem;
  align-items: start;
}

.simulation-preview-transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.8rem;
}

.simulation-preview-transport-range {
  width: 100%;
}

.simulation-preview-transport-time {
  font-size: 0.78rem;
  color: #4a617a;
  white-space: nowrap;
}

@media (min-width: 980px) {
  .simulation-preview-workbench {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}

.simulation-annotation-tool-rail {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.8rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.simulation-annotation-tool-buttons {
  display: grid;
  gap: 0.45rem;
}

.simulation-annotation-tool-btn {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #ffffff;
  color: #17314c;
  text-align: left;
  cursor: pointer;
}

.simulation-annotation-tool-btn.is-active {
  border-color: #2f6db4;
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.14);
  background: linear-gradient(180deg, #eef5ff 0%, #f9fbff 100%);
}

.simulation-annotation-tool-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 10px;
  background: #edf4ff;
  color: #1d4f8d;
  font-size: 1rem;
  font-weight: 700;
}

.simulation-annotation-tool-text {
  font-size: 0.84rem;
  font-weight: 700;
}

.simulation-storyboard-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.simulation-storyboard-step {
  flex: 0 0 180px;
  display: grid;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  text-align: left;
  cursor: pointer;
}

.simulation-storyboard-step.is-selected {
  border-color: #84a7d0;
  box-shadow: 0 0 0 1px rgba(47, 109, 180, 0.22) inset;
  background: linear-gradient(180deg, #eef5ff 0%, #f9fbff 100%);
}

.simulation-storyboard-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid #d7e3f0;
  background: #0b1725;
  color: #d8e8fb;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 0.76rem;
}

.simulation-storyboard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.simulation-storyboard-meta {
  display: grid;
  gap: 0.15rem;
}

.simulation-storyboard-meta strong {
  color: #17314c;
  font-size: 0.86rem;
}

.simulation-storyboard-meta span {
  font-size: 0.74rem;
  color: #4a617a;
}

.simulation-storyboard-badge {
  width: max-content;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: #e8f1fc;
  color: #1c4f82 !important;
  font-weight: 700;
}

.simulation-timeline-ruler {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #566f88;
}

.simulation-timeline-track {
  position: relative;
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid #d7e3f0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,249,255,0.96)),
    repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), rgba(120, 149, 183, 0.22) calc(20% - 1px), rgba(120, 149, 183, 0.22) 20%);
  overflow: hidden;
}

.simulation-timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d14f3f;
  box-shadow: 0 0 0 1px rgba(209, 79, 63, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
}

.simulation-timeline-current-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2f6db4;
  box-shadow: 0 0 0 1px rgba(47, 109, 180, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
}

.simulation-timeline-segment {
  position: absolute;
  top: 16px;
  bottom: 16px;
  min-width: 24px;
  border: 1px solid #7fa5cf;
  border-radius: 10px;
  background: linear-gradient(180deg, #cfe2f7 0%, #b9d5f2 100%);
  color: #15324f;
  padding: 0 0.8rem;
  cursor: grab;
}

.simulation-timeline-segment.is-selected {
  border-color: #2f6db4;
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.18);
}

.simulation-timeline-segment:active {
  cursor: grabbing;
}

.simulation-timeline-segment-label {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 30px;
}

.simulation-timeline-handle {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 8px;
  border-radius: 999px;
  background: rgba(21, 50, 79, 0.28);
  cursor: ew-resize;
}

.simulation-timeline-handle.is-start {
  left: 4px;
}

.simulation-timeline-handle.is-end {
  right: 4px;
}

.simulation-marker-track {
  position: relative;
  min-height: 38px;
  border-radius: 12px;
  border: 1px dashed #d7e3f0;
  background: #f9fbff;
}

.simulation-marker-chip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #bdd2ea;
  background: #ffffff;
  color: #20476d;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: ew-resize;
  white-space: nowrap;
}

.simulation-annotation-track {
  position: relative;
  min-height: 120px;
  border-radius: 12px;
  border: 1px dashed #d7e3f0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,250,255,0.96)),
    repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), rgba(120, 149, 183, 0.18) calc(20% - 1px), rgba(120, 149, 183, 0.18) 20%);
  overflow: hidden;
}

.simulation-annotation-bar {
  position: absolute;
  min-width: 24px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #c8d9ec;
  background: linear-gradient(180deg, #fffdf3 0%, #fff3c8 100%);
  color: #6b4d00;
  cursor: grab;
  padding: 0 0.8rem;
}

.simulation-annotation-bar:active {
  cursor: grabbing;
}

.simulation-annotation-bar.is-selected {
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.18);
}

.simulation-annotation-bar-arrow {
  background: linear-gradient(180deg, #fff4e8 0%, #ffe0bf 100%);
  color: #8a3b00;
}

.simulation-annotation-bar-callout {
  background: linear-gradient(180deg, #eff6ff 0%, #dcecff 100%);
  color: #1d4f8d;
}

.simulation-annotation-bar-label {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 26px;
}

.simulation-annotation-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.simulation-annotation-layer.is-drawing {
  pointer-events: auto;
}

.simulation-annotation {
  position: absolute;
  border-radius: 12px;
  border: var(--annotation-line-width, 3px) solid var(--annotation-color, #ffb100);
  background: color-mix(in srgb, var(--annotation-fill, #fff5cc) 78%, transparent);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}

.simulation-annotation.is-selected {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.82),
    0 0 0 5px rgba(47, 109, 180, 0.28),
    0 14px 28px rgba(15, 23, 42, 0.18);
}

.simulation-annotation.is-outside-range {
  opacity: 0.55;
}

.simulation-annotation.is-draft {
  opacity: 0.7;
  pointer-events: none;
}

.simulation-annotation-arrow {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.simulation-annotation-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.16));
}

.simulation-annotation-callout {
  border-radius: 18px;
}

.simulation-annotation-label {
  position: absolute;
  top: -1.6rem;
  left: 0;
  max-width: min(260px, 100%);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  color: var(--annotation-text, #0f172a);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.simulation-annotation-callout .simulation-annotation-label {
  top: 0.45rem;
  left: 0.45rem;
  max-width: calc(100% - 0.9rem);
  white-space: normal;
  border-radius: 12px;
  background: color-mix(in srgb, var(--annotation-fill, #dbeafe) 88%, white);
}

.simulation-annotation-resize {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--annotation-color, #ffb100);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  cursor: nwse-resize;
}

.labeled-stage-marker:disabled {
  cursor: default;
  opacity: 0.95;
}

.preview-labeled-note {
  position: absolute;
  min-width: 180px;
  max-width: 240px;
  background: var(--maven-hotspot-note-bg, #ffffff);
  border: 1px solid var(--maven-hotspot-note-border, #c5d8ee);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 12px 24px rgba(15, 73, 130, 0.18);
  z-index: 10;
  pointer-events: none;
  color: var(--maven-hotspot-note-text, #1c2534);
}

.preview-labeled-note.is-hidden {
  display: none;
}

.preview-labeled-note-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.preview-labeled-note-body {
  font-size: 0.85rem;
  color: var(--maven-hotspot-note-text, #1c2534);
}

.preview-labeled-legend {
  margin-top: 0.4rem;
  margin-bottom: 0.55rem;
}

.block-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.kc-option {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 0.4rem;
  align-items: center;
}

.quiz-settings {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 0.7rem;
  display: grid;
  gap: 0.6rem;
}

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 0.6rem;
}

.quiz-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.quiz-question {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.7rem;
  margin-top: 0.6rem;
}

.quiz-question.is-emphasized {
  border-color: #5ea0ff;
  box-shadow: 0 0 0 2px rgba(94, 160, 255, 0.18);
}

.quiz-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.match-pair {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.theme-card {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 0.75rem;
  display: grid;
  gap: 0.7rem;
}

.workspace-settings-dashboard-card {
  gap: 0.85rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border-color: #cfdef0;
  box-shadow: 0 10px 28px rgba(24, 61, 101, 0.06);
}

.workspace-settings-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.workspace-settings-dashboard-copy {
  display: grid;
  gap: 0.18rem;
}

.workspace-settings-dashboard-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.workspace-settings-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.workspace-settings-dashboard-tile {
  border: 1px solid #d8e3f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.75rem 0.8rem;
  display: grid;
  gap: 0.35rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.workspace-settings-dashboard-tile:hover,
.workspace-settings-dashboard-tile:focus-visible {
  border-color: #91b6dd;
  box-shadow: 0 12px 24px rgba(31, 93, 156, 0.1);
  transform: translateY(-1px);
}

.workspace-settings-dashboard-tile strong {
  color: #18314f;
  font-size: 0.96rem;
}

.workspace-settings-dashboard-tile-meta {
  color: #58718f;
  font-size: 0.82rem;
  font-weight: 600;
}

.workspace-settings-dashboard-chip-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.workspace-settings-dashboard-chip {
  border-radius: 999px;
  border: 1px solid #d9e5f2;
  background: #f7fbff;
  color: #365271;
  padding: 0.16rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 0.6rem;
}

.theme-grid > .style-box {
  grid-column: 1 / -1;
}

.course-look-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
  gap: 0.9rem;
  align-items: start;
}

.course-look-controls,
.theme-preview-controls {
  display: grid;
  gap: 0.7rem;
}

.course-look-preview-column {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.course-look-preview-actions {
  display: flex;
  justify-content: flex-start;
}

.theme-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
  gap: 0.9rem;
  align-items: start;
}

.quick-visual-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
}

.quick-visual-preset-btn {
  width: 100%;
  justify-content: center;
}

.course-look-preview {
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: 0 12px 30px rgba(15, 73, 130, 0.08);
}

.theme-clipboard-status {
  padding: 0.65rem 0.8rem;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%);
  color: #294662;
  font-size: 0.8rem;
  font-weight: 600;
}

.theme-sample-preview {
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: 0 12px 30px rgba(15, 73, 130, 0.08);
}

.course-look-preview-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #18314a;
}

.theme-sample-preview-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #18314a;
}

.course-look-preview-viewport {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid rgba(31, 93, 156, 0.08);
  overflow: hidden;
}

.theme-sample-preview-viewport {
  position: relative;
  min-height: 320px;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid rgba(31, 93, 156, 0.08);
  overflow: hidden;
}

.course-look-preview-canvas {
  position: relative;
  min-height: 100%;
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(31, 93, 156, 0.1);
}

.course-look-preview-lesson {
  position: relative;
  margin-top: 1.8rem;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
  box-shadow: 0 8px 20px rgba(15, 73, 130, 0.08);
}

.course-look-preview-lesson-title {
  display: block;
  padding-top: 0.7rem;
  color: #18314a;
}

.course-look-preview-builder {
  position: relative;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  padding: 0.9rem;
  display: grid;
  gap: 0.45rem;
}

.course-look-preview-builder-heading {
  display: block;
  padding-top: 0.75rem;
}

.course-look-preview-builder-body {
  margin: 0;
  line-height: 1.45;
}

.course-look-preview-builder-meta {
  font-size: 0.78rem;
  opacity: 0.72;
  font-weight: 600;
}

.course-look-preview-action {
  justify-self: start;
  border: 1px solid #2f6db4;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: #2f6db4;
  color: #ffffff;
  font-weight: 700;
}

.course-look-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #20415f;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(122, 150, 182, 0.45);
  box-shadow: 0 6px 14px rgba(15, 32, 51, 0.08);
}

.theme-sample-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #20415f;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(122, 150, 182, 0.45);
  box-shadow: 0 6px 14px rgba(15, 32, 51, 0.08);
}

.theme-sample-label-inline {
  position: static;
  justify-self: start;
}

.theme-sample-label-top-left {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
}

.course-look-label-outer,
.course-look-label-canvas {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
}

.course-look-label-canvas {
  top: 0.7rem;
}

.course-look-label-lesson,
.course-look-label-builder {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
}

.font-library-panel {
  gap: 0.75rem;
}

.font-library-picker,
.font-library-preview {
  display: grid;
  gap: 0.7rem;
}

.font-library-role-help {
  margin-top: -0.1rem;
}

.font-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}

.font-library-card {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(15, 73, 130, 0.06);
}

.font-library-card.is-selected {
  border-color: #88a8d2;
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.14), 0 10px 28px rgba(15, 73, 130, 0.1);
}

.font-library-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: flex-start;
}

.font-library-title-wrap {
  min-width: 0;
}

.font-library-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #17314c;
}

.font-library-family {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: #5a6d84;
  word-break: break-word;
}

.font-library-status {
  flex: 0 0 auto;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #edf4ff;
  color: #1d4f83;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.font-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.font-library-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.52rem;
  border: 1px solid #d4dfef;
  border-radius: 999px;
  background: #f8fbff;
  color: #28435f;
  font-size: 0.7rem;
}

.font-library-note {
  font-size: 0.8rem;
  color: #31455d;
  min-height: 3em;
}

.font-library-sample {
  border: 1px dashed #c9d8eb;
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fbff, #f2f7ff);
  padding: 0.8rem;
  color: #1a2738;
  font-size: 1.12rem;
  line-height: 1.35;
}

.font-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.font-library-actions button {
  flex: 1 1 8.5rem;
}

.layout-preview-canvas,
.layout-preview-lesson,
.layout-preview-card,
.typography-preview-panel,
.builder-defaults-preview-card,
.navigation-preview-frame,
.navigation-preview-card,
.navigation-preview-sidebar,
.navigation-preview-search,
.navigation-preview-button,
.builder-defaults-preview-button,
.builder-defaults-preview-pill,
.builder-defaults-token-card,
.builder-defaults-token-band,
.builder-defaults-table-header,
.builder-defaults-table-stripe,
.builder-defaults-gallery-card,
.builder-defaults-transition-sample,
.builder-defaults-reflection-card {
  transition: all 180ms ease;
}

.layout-settings-preview {
  background: #f4f7fb;
}

.layout-preview-canvas {
  position: relative;
  min-height: 100%;
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(31, 93, 156, 0.1);
  background: #ffffff;
}

.layout-preview-lesson {
  position: relative;
  min-height: 230px;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 10px 26px rgba(15, 73, 130, 0.08);
}

.layout-preview-card {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  gap: 0.45rem;
}

.layout-preview-card-hero {
  margin-top: 1rem;
}

.layout-motion-preview {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.layout-preview-title {
  display: block;
  color: #18314a;
}

.layout-preview-body {
  margin: 0;
  color: #294156;
}

.layout-preview-meta {
  font-size: 0.76rem;
  font-weight: 700;
  color: #56708b;
}

.layout-motion-preview-meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: #56708b;
}

.layout-motion-preview-stage {
  display: grid;
  gap: 0.45rem;
  min-height: 116px;
}

.layout-motion-preview-chip {
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,249,255,0.96));
  padding: 0.62rem 0.8rem;
  color: #28435f;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 73, 130, 0.06);
}

.typography-settings-preview {
  background: #f4f7fb;
}

.typography-preview-panel {
  min-height: 100%;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: #ffffff;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 10px 26px rgba(15, 73, 130, 0.08);
}

.typography-preview-heading {
  margin: 0;
  line-height: 1.1;
  color: #18314a;
}

.typography-preview-subheading {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #56708b;
}

.typography-preview-paragraph,
.typography-preview-list {
  margin: 0;
  color: #24384b;
}

.typography-preview-list {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.25rem;
}

.typography-preview-quote {
  border-left: 4px solid #d8e2ef;
  padding-left: 0.8rem;
  color: #294156;
  font-style: italic;
}

.typography-preview-button {
  justify-self: start;
  border: 1px solid #2f6db4;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  background: #2f6db4;
  color: #ffffff;
  font-weight: 700;
}

.builder-defaults-settings-preview {
  background: #f4f7fb;
}

.builder-defaults-preview-stack {
  display: grid;
  gap: 0.8rem;
}

.builder-defaults-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
}

.builder-defaults-preview-card {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.95rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: 0 10px 26px rgba(15, 73, 130, 0.08);
}

.builder-defaults-preview-title {
  display: block;
  color: #18314a;
}

.builder-defaults-preview-body {
  margin: 0;
}

.builder-defaults-preview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.builder-defaults-preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
  font-weight: 700;
}

.builder-defaults-preview-button {
  justify-self: start;
  border: 1px solid #2f6db4;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  background: #2f6db4;
  color: #ffffff;
  font-weight: 700;
}

.builder-defaults-token-card {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.95rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: 0 10px 26px rgba(15, 73, 130, 0.08);
}

.builder-defaults-token-band,
.builder-defaults-table-header,
.builder-defaults-table-stripe,
.builder-defaults-gallery-card,
.builder-defaults-transition-sample,
.builder-defaults-reflection-card {
  border: 1px solid rgba(122, 150, 182, 0.35);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.builder-defaults-table-sample {
  display: grid;
  gap: 0.35rem;
}

.navigation-settings-preview {
  background: #f4f7fb;
}

.navigation-preview-frame {
  min-height: 100%;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.85rem;
  display: grid;
  grid-template-columns: minmax(140px, 0.72fr) minmax(0, 1.28fr);
  gap: 0.8rem;
  box-shadow: 0 10px 26px rgba(15, 73, 130, 0.08);
}

.navigation-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  border-right: 1px solid #e2eaf4;
  padding-right: 0.75rem;
}

.navigation-preview-search {
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
  color: #61788f;
  font-size: 0.8rem;
  background: #f8fbff;
}

.navigation-preview-lessons {
  display: grid;
  gap: 0.32rem;
}

.navigation-preview-lesson-item {
  border-radius: 10px;
  padding: 0.42rem 0.55rem;
  color: #30485f;
  background: transparent;
  font-size: 0.82rem;
}

.navigation-preview-lesson-item.is-active {
  background: #edf4ff;
  color: #1f4f83;
  font-weight: 700;
}

.navigation-preview-content {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.navigation-preview-meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: #56708b;
}

.navigation-preview-card {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 1rem;
  color: #294156;
}

.navigation-preview-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

.navigation-preview-button {
  flex: 1 1 0;
  border: 1px solid #2f6db4;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  background: #2f6db4;
  color: #ffffff;
  font-weight: 700;
}

.navigation-preview-button.secondary {
  background: #f8fbff;
  color: #244668;
  border-color: #c8d7ea;
}

.navigation-preview-button:disabled {
  opacity: 0.45;
}

.builder-motion-preview {
  padding: 0.2rem 0 0;
}

.builder-motion-preview-card {
  margin-top: 0;
  padding: 0.8rem 0.9rem;
  border: 1px dashed #c8d7ea;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff, #f2f7ff);
  color: #17314c;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(15, 73, 130, 0.05);
}

.style-box {
  border: 1px dashed #c9d8eb;
  border-radius: 8px;
  padding: 0.55rem;
  background: #f8fbff;
  display: grid;
  gap: 0.5rem;
}

.cover-page-quick-card {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
}

.cover-page-image-card {
  gap: 0.75rem;
}

.cover-page-image-card .field {
  min-width: 0;
}

.cover-page-builder-card {
  gap: 0.7rem;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0.5rem;
}

.style-grid-color-stack {
  grid-template-columns: minmax(0, 1fr);
}

.style-selector-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0.5rem;
  align-items: start;
}

.style-selector-row .field {
  min-width: 0;
}

@media (max-width: 560px) {
  .style-selector-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tabs-style-panel {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  padding: 0.6rem;
  background: #fff;
  display: grid;
  gap: 0.55rem;
}

.tab-style-thumbnail button {
  border-radius: 999px;
  font-size: 0.8rem;
  border: none;
  width: 100%;
}

.process-style-panel {
  border: 1px solid #d5dce8;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.04);
  display: grid;
  gap: 0.45rem;
}

.process-style-thumbnail {
  border-radius: 8px;
  background: #f5f7ff;
  padding: 0.35rem;
  display: grid;
  gap: 0.25rem;
}

.process-style-thumbnail .process-style-preview {
  height: 40px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.preset-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.4rem;
}

.button-style-editor.is-compact .preset-thumbnails,
.style-surface-studio.is-compact .preset-thumbnails {
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.28rem;
}

.preset-thumb {
  border: 1px solid #d2dfed;
  border-radius: 8px;
  background: #fff;
  padding: 0.35rem;
  display: grid;
  gap: 0.3rem;
  text-align: left;
}

.button-style-editor.is-compact .preset-thumb,
.style-surface-studio.is-compact .preset-thumb {
  padding: 0.22rem;
  gap: 0.18rem;
}

.preset-thumb.active {
  border-color: var(--brand);
  background: #eaf3ff;
}


.editor-layout-switch {
  display: grid;
  gap: 0.4rem;
}

.editor-layout-switch-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.editor-view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid #d7e3f0;
  border-radius: 999px;
  background: #f5f9ff;
  width: fit-content;
}

.editor-view-chip {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #4d6078;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  pointer-events: auto;
}

.editor-view-chip.active {
  background: #1f5d9c;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(31, 93, 156, 0.22);
}

.structured-block-editor {
  display: grid;
  gap: 0.75rem;
}

.editor-section-card {
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  overflow: hidden;
}

.editor-section-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

.editor-section-disclosure > summary::-webkit-details-marker {
  display: none;
}

.editor-section-head {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 0.65rem 2rem;
  border-bottom: 1px solid #e2eaf5;
  background: rgba(255, 255, 255, 0.85);
  position: relative;
}

.editor-section-title-wrap {
  display: grid;
  gap: 0.15rem;
}

.editor-section-disclosure > .editor-section-head::before {
  content: '▸';
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #5d7696;
  transition: transform 140ms ease;
}

.editor-section-disclosure[open] > .editor-section-head::before {
  transform: translateY(-50%) rotate(90deg);
}

.editor-section-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d7696;
}

.editor-section-head strong {
  color: #15212e;
  font-size: 0.95rem;
}

.editor-section-body {
  padding: 0.8rem 0.9rem 0.9rem;
}

.editor-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.structured-block-editor-hint {
  margin-top: -0.1rem;
}


.structured-advanced-details {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
}

.structured-advanced-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 0.95rem;
  font-weight: 700;
  color: #18314f;
}

.structured-summary-meta {
  margin-left: 0.5rem;
  font-weight: 600;
  font-size: 0.82rem;
  color: #5d7696;
}

.structured-advanced-details > summary::-webkit-details-marker {
  display: none;
}

.structured-advanced-details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.45rem;
  color: #5d7696;
  transition: transform 140ms ease;
}

.structured-advanced-details[open] > summary::before {
  transform: rotate(90deg);
}

.structured-advanced-body {
  padding: 0 0.85rem 0.9rem;
  display: grid;
  gap: 0.65rem;
}

.builder-applied-settings-list {
  display: grid;
  gap: 0.25rem;
}

.style-surface-studio {
  display: grid;
  gap: 0.7rem;
}

.style-surface-studio.is-compact {
  gap: 0.45rem;
}

.style-surface-preview {
  border-radius: 16px;
  padding: 0.9rem;
  border: 1px dashed #c8d8ea;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.style-surface-preview-card {
  display: grid;
  gap: 0.45rem;
  min-height: 8.5rem;
  border: 1px solid #d8e2ef;
  background: #ffffff;
  color: #15212e;
  box-shadow: 0 12px 28px rgba(15, 32, 51, 0.08);
}

.style-surface-preview-meta {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d7696;
}

.style-surface-preview-copy {
  color: #4b607a;
  font-size: 0.86rem;
  line-height: 1.4;
}

.style-surface-preview-line {
  width: 3.2rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #d8e2ef;
}

.style-surface-preview-range {
  display: grid;
  gap: 0.35rem;
}

.style-surface-preview-range input[type="range"] {
  width: 100%;
}

.style-surface-thumb {
  width: 100%;
  min-height: 3rem;
  border: 2px solid #d8e2ef;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  box-shadow: 0 10px 22px rgba(15, 32, 51, 0.08);
}

.style-surface-studio.is-compact .style-surface-preview {
  padding: 0.55rem;
  border-radius: 12px;
}

.style-surface-studio.is-compact .style-surface-preview-card {
  min-height: 5.4rem;
  gap: 0.28rem;
}

.style-surface-studio.is-compact .style-surface-preview-copy {
  font-size: 0.74rem;
}

.style-surface-studio.is-compact .style-surface-thumb {
  min-height: 2rem;
  border-width: 1px;
  box-shadow: 0 6px 14px rgba(15, 32, 51, 0.07);
}

.item-card-sortable {
  position: relative;
  cursor: grab;
}

.item-card-drag-hint {
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
  color: #5d7696;
  font-size: 0.78rem;
}

.item-card-sortable.is-dragging {
  opacity: 0.66;
}

.item-card-sortable.is-drop-target {
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.22);
}

.lesson-coverage-preview {
  display: grid;
  gap: 0.45rem;
}

.lesson-coverage-preview-stage {
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #d7e3f0;
  overflow: hidden;
}

.lesson-coverage-preview-lesson {
  display: grid;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.lesson-coverage-preview-builder {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(20, 33, 51, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(15, 73, 130, 0.1);
}

.lesson-coverage-preview-builder[data-surface-mode="soft_blend"] {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(8px);
}

.lesson-coverage-preview-builder[data-surface-mode="transparent"] {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
}

.lesson-coverage-preview-builder[data-coverage="lesson_and_builders"],
.lesson-coverage-preview-builder[data-coverage="lesson_and_builders_and_inner_cards"] {
  background: rgba(255, 255, 255, 0.54);
}

.lesson-coverage-preview-inner {
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(20, 33, 51, 0.08);
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.82rem;
  color: #38506d;
}

.lesson-coverage-preview-inner[data-coverage="lesson_and_builders_and_inner_cards"] {
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(8px);
}

.button-canvas-preview-card {
  display: grid;
  gap: 0.55rem;
}

.button-canvas-preview-stage {
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 16px;
  border: 1px dashed #c8d8ea;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.button-canvas-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.carousel-variant-thumb,
.accordion-variant-thumb {
  width: 100%;
  min-height: 70px;
  border-radius: 10px;
  border: 1px solid #d7e3f0;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  display: grid;
  gap: 0.3rem;
  padding: 0.45rem;
}

.carousel-variant-thumb {
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.carousel-variant-thumb-pane {
  display: block;
  min-height: 2.5rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cfddec;
  box-shadow: 0 6px 12px rgba(18, 37, 62, 0.08);
}

.carousel-variant-thumb-cards .carousel-variant-thumb-pane,
.carousel-variant-thumb-coverflow .carousel-variant-thumb-pane {
  box-shadow: 0 10px 18px rgba(18, 37, 62, 0.12);
}

.carousel-variant-thumb-strip .carousel-variant-thumb-pane {
  min-height: 1.6rem;
}

.accordion-variant-thumb-row {
  display: block;
  min-height: 1.35rem;
  border-radius: 999px;
  border: 1px solid #cfdded;
  background: #ffffff;
}

.accordion-variant-thumb-card .accordion-variant-thumb-row {
  border-radius: 12px;
}

body[data-color-mode="dark"] .style-surface-preview {
  border-color: rgba(114, 146, 182, 0.35);
  background: linear-gradient(180deg, rgba(15, 25, 38, 0.92) 0%, rgba(18, 31, 48, 0.96) 100%);
}

body[data-color-mode="dark"] .style-surface-preview-card {
  border-color: rgba(122, 145, 178, 0.3);
  background: rgba(22, 34, 49, 0.92);
  color: #eef4ff;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
}

body[data-color-mode="dark"] .style-surface-preview-copy,
body[data-color-mode="dark"] .item-card-drag-hint {
  color: #b7cadf;
}

body[data-color-mode="dark"] .style-surface-preview-meta {
  color: #8fb3da;
}

body[data-color-mode="dark"] .style-surface-thumb {
  border-color: rgba(122, 145, 178, 0.34);
  background: linear-gradient(180deg, rgba(26, 40, 59, 0.98) 0%, rgba(18, 29, 44, 1) 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

.preset-thumb.active .preset-thumb-preview {
  box-shadow: 0 6px 18px rgba(31, 93, 156, 0.25);
  transform: translateY(-1px);
}

.preset-thumb-preview {
  min-height: 1.6rem;
  border: 1px solid #cfdded;
  border-radius: 6px;
  background: linear-gradient(180deg, #f8fbff, #f0f6fe);
  display: grid;
  place-items: center;
  padding: 0.22rem;
  font-size: 0.68rem;
  color: #1e3a56;
}

.button-style-editor.is-compact .preset-thumb-preview,
.style-surface-studio.is-compact .preset-thumb-preview {
  min-height: 2rem;
  padding: 0.16rem;
}

.preset-thumb-label {
  font-size: 0.76rem;
  color: #27445f;
}

.button-style-editor.is-compact .preset-thumb-label,
.style-surface-studio.is-compact .preset-thumb-label {
  font-size: 0.62rem;
  line-height: 1.1;
}

.list-style-thumbnail {
  width: 100%;
  min-height: 82px;
  border-radius: 10px;
  border: 1px solid #d7e3f0;
  background: #f7fbff;
  padding: 0.45rem;
  display: grid;
  gap: 0.28rem;
}

.list-style-thumbnail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem;
  align-items: center;
}

.list-style-thumbnail-marker {
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d9e9f8;
  color: #1f5d9c;
  font-size: 0.64rem;
  font-weight: 800;
}

.list-style-thumbnail-lines {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31, 93, 156, 0.18) 0%, rgba(31, 93, 156, 0.42) 72%, rgba(31, 93, 156, 0.16) 100%);
}

.list-style-thumbnail-number_cards,
.list-style-thumbnail-spotlight_panels {
  background: linear-gradient(180deg, #13253a 0%, #0f1e30 100%);
  border-color: #1d4368;
}

.list-style-thumbnail-number_cards .list-style-thumbnail-marker,
.list-style-thumbnail-spotlight_panels .list-style-thumbnail-marker {
  background: #7ab6ff;
  color: #0f2134;
}

.list-style-thumbnail-number_cards .list-style-thumbnail-lines,
.list-style-thumbnail-spotlight_panels .list-style-thumbnail-lines {
  background: linear-gradient(90deg, rgba(238, 246, 255, 0.25) 0%, rgba(238, 246, 255, 0.7) 75%, rgba(238, 246, 255, 0.2) 100%);
}

.list-style-thumbnail-editorial_rules .list-style-thumbnail-marker,
.list-style-thumbnail-minimal_dots .list-style-thumbnail-marker {
  background: transparent;
  color: #4d6178;
}

.list-style-thumbnail-soft_checks .list-style-thumbnail-marker {
  background: #d9f2e8;
  color: #187553;
}

.list-style-thumbnail-orbit_tags .list-style-thumbnail-marker {
  background: #ece3ff;
  color: #6b3fd1;
}

.list-style-thumbnail-stacked_ribbons .list-style-thumbnail-marker {
  background: #ffe2cf;
  color: #a74f25;
  border-radius: 8px;
}

.bullet-highlight-thumbnail {
  width: 100%;
  min-height: 82px;
  border-radius: 12px;
  border: 1px solid #d9e6f2;
  background: #f7fbff;
  padding: 0.45rem;
  display: grid;
  gap: 0.35rem;
}

.bullet-highlight-thumbnail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem;
  align-items: center;
}

.bullet-highlight-thumbnail-marker {
  min-width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d9e9f8;
  color: #1f5d9c;
  font-size: 0.62rem;
  font-weight: 800;
}

.bullet-highlight-thumbnail-body {
  display: block;
  height: 1.35rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.12), rgba(31, 93, 156, 0.05));
  border: 1px solid rgba(31, 93, 156, 0.14);
}

.bullet-highlight-thumbnail-spotlight_dark {
  background: linear-gradient(180deg, #122438 0%, #0d1d2f 100%);
  border-color: #214a72;
}

.bullet-highlight-thumbnail-spotlight_dark .bullet-highlight-thumbnail-marker {
  background: #7ab6ff;
  color: #0f2134;
}

.bullet-highlight-thumbnail-spotlight_dark .bullet-highlight-thumbnail-body {
  background: linear-gradient(180deg, rgba(238, 246, 255, 0.2), rgba(238, 246, 255, 0.08));
  border-color: rgba(238, 246, 255, 0.18);
}

.bullet-highlight-thumbnail-ribbon_steps .bullet-highlight-thumbnail-marker {
  background: #ffe2cf;
  color: #a74f25;
  border-radius: 8px;
}

.bullet-highlight-thumbnail-soft_checks .bullet-highlight-thumbnail-marker {
  background: #d9f2e8;
  color: #187553;
}

.bullet-highlight-thumbnail-orbit_markers .bullet-highlight-thumbnail-marker {
  box-shadow: 0 0 0 6px rgba(123, 86, 216, 0.12);
}

.quote-template-preview {
  position: relative;
  height: 96px;
  border-radius: 12px;
  border: 1px solid var(--template-border, #d2dfed);
  background: var(--template-bg, #f8fbff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem;
  font-size: 0.75rem;
  color: var(--template-text, #374560);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 34, 77, 0.08);
}

.quote-template-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.quote-template-preview-icon {
  font-size: 1.4rem;
  color: var(--template-accent, #1f5d9c);
  z-index: 1;
}

.quote-template-preview-label {
  font-size: 0.72rem;
  text-align: center;
  letter-spacing: 0.02em;
  z-index: 1;
}

.quote-template-preview[data-layout='card'] {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--template-accent, #1f5d9c);
}

.quote-template-preview[data-layout='banner'] {
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: var(--template-accent, #1f5d9c);
  padding-top: 0.6rem;
}

.quote-template-preview[data-layout='glass'] {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 25px rgba(12, 52, 92, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.quote-template-preview[data-layout='spotlight'] {
  background: #0c1420;
  color: var(--template-text, #f8f5ea);
  border: 1px solid transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.quote-template-preview[data-align='center'] {
  text-align: center;
}

.quote-template-preview[data-align='right'] {
  text-align: right;
}

.quote-template-preview[data-pattern='dots']::after {
  background-image: radial-gradient(var(--template-accent, rgba(31, 93, 156, 0.6)) 2px, transparent 2px);
  background-size: 14px 14px;
}

.quote-template-preview[data-pattern='lines']::after {
  background-image: none;
  opacity: 0;
}

.quote-template-preview[data-pattern='waves']::after {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0) 30px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0) 35px);
  opacity: 0.2;
}

.quote-template-preview[data-pattern='grid']::after {
  background-image: none;
  opacity: 0;
}

.quote-template-preview[data-pattern='none']::after {
  background-image: none;
  opacity: 0;
}

.divider-style-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.45rem;
}

.divider-choice {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  padding: 0.5rem;
}

.divider-choice.active {
  border-color: var(--brand);
  background: #eaf3ff;
}

.divider-choice-line {
  width: 100%;
  display: grid;
  min-height: 24px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}

.divider-preview {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fff;
  padding: 0.45rem 0.6rem;
}

.divider-preview-line,
.preview-divider-line {
  display: block;
}

.divider-visual {
  width: 100%;
}

.divider-visual-lines {
  display: grid;
  gap: var(--divider-line-gap, 10px);
}

.divider-visual-line {
  display: block;
}

.divider-visual-shape {
  display: block;
  width: 100%;
  overflow: hidden;
}

.divider-visual-shape svg {
  display: block;
  width: 100%;
  height: 100%;
}

.divider-visual-shape.is-flipped svg {
  transform: scaleY(-1);
  transform-origin: center;
}

.divider-thumb-preview {
  width: 100%;
}

.preset-thumb-preview .divider-thumb-preview,
.preset-thumb-preview .divider-thumb-preview .divider-visual-shape,
.preset-thumb-preview .divider-thumb-preview .divider-visual-lines,
.divider-choice-line .divider-visual-shape,
.divider-choice-line .divider-visual-lines {
  width: 100%;
}

.divider-symbol-line,
.preview-divider-symbol {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.divider-preview-symbol {
  margin: 0.2rem 0;
}

.preview-divider-symbol {
  font-weight: 600;
}

.button-preview {
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fff;
  padding: 0.6rem;
}

.button-style-editor.is-compact {
  gap: 0.55rem;
}

.button-style-editor.is-compact .item-card {
  padding: 0.5rem 0.6rem;
}

.button-style-editor.is-compact .button-preview {
  padding: 0.35rem;
}

.button-style-editor.is-compact .button-preview .preview-action,
.button-style-editor.is-compact .button-preview a {
  transform: scale(0.9);
  transform-origin: center;
}

.button-style-editor.is-compact .style-grid {
  gap: 0.35rem;
}

.button-style-editor.is-compact .field-hint {
  font-size: 0.74rem;
}

.button-style-compact-more {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.2rem 0.5rem 0.45rem;
}

.button-style-compact-more > summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #36516f;
}

.preview-wrap {
  background: linear-gradient(180deg, #f8fbff, #f2f7fd);
  margin-top: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.35rem;
  min-height: 0;
  padding-right: 0.15rem;
  transition: opacity 0.28s ease, transform 0.34s ease;
}

body.preview-startup-blocking #tab-preview .preview-head {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.preview-title-row {
  display: grid;
  grid-template-columns: minmax(2.4rem, 1fr) auto minmax(2.4rem, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  grid-column: 1;
  width: 100%;
  justify-self: stretch;
}

.preview-head h2 {
  grid-column: auto;
  justify-self: center;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

.preview-title-row-shell {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid rgba(151, 179, 215, 0.68);
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.98)),
    radial-gradient(circle at top, rgba(111, 158, 214, 0.12), transparent 62%);
  box-shadow:
    0 18px 34px rgba(29, 62, 104, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.preview-title-row-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  width: min(15rem, 44%);
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(56, 115, 190, 0.08), rgba(56, 115, 190, 0.9), rgba(56, 115, 190, 0.08));
}

.preview-title-row-shell > h2 {
  position: relative;
  z-index: 1;
  white-space: normal;
  text-wrap: balance;
  max-width: min(100%, 16ch);
  padding-bottom: 0.62rem;
  color: #0c2745;
  font-family: "Avenir Next Condensed", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 1.24rem + 1.86vw, 2.95rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.preview-title-row-shell > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(7.25rem, 72%);
  height: 0.28rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(56, 115, 190, 0.08), rgba(56, 115, 190, 0.94), rgba(56, 115, 190, 0.08));
}

.preview-title-row-spacer {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.preview-color-mode-toggle {
  position: relative;
  z-index: 1;
  justify-self: end;
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.preview-utility-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.preview-primary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.preview-action-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(198, 213, 230, 0.95);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 253, 0.96)),
    rgba(246, 250, 255, 0.92);
  box-shadow:
    0 8px 18px rgba(18, 42, 68, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.preview-action-group-publish {
  margin-left: 0.3rem;
}

.preview-action-group .secondary {
  min-height: 2.35rem;
  padding: 0.5rem 0.88rem;
  border-radius: 10px;
  border-color: #c8d6e4;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 4px 10px rgba(24, 48, 73, 0.03);
  font-weight: 600;
}

.preview-action-group .secondary:hover {
  transform: translateY(-1px);
  border-color: #9db3cb;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(24, 48, 73, 0.06);
}

.preview-access {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.preview-menu {
  position: relative;
}

.preview-menu > summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.preview-menu > summary::-webkit-details-marker {
  display: none;
}

.preview-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 1200;
  display: grid;
  gap: 0.35rem;
  min-width: 10.5rem;
  padding: 0.5rem;
  border: 1px solid rgba(215, 227, 240, 0.96);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 30px rgba(15, 32, 51, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.preview-controls .preview-menu-panel {
  left: auto;
  right: 0;
  max-width: min(18rem, calc(100vw - 1.5rem));
}

.preview-menu-panel .secondary {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.preview-menu-section {
  display: grid;
  gap: 0.2rem;
}

.preview-menu-admin-group {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(215, 227, 240, 0.96);
}

.preview-menu-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #486179;
}

.preview-menu-section-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #5a7086;
}

.preview-menu-settings-group {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.preview-menu-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.6rem, auto);
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #2b3f56;
}

.preview-menu-select-row span {
  min-width: 0;
  font-weight: 600;
}

.preview-menu-select-row select {
  min-width: 5.6rem;
  max-width: 8.5rem;
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  justify-self: end;
  margin-left: auto;
}

.preview-controls-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(198, 213, 230, 0.95);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 252, 0.95)),
    rgba(246, 250, 255, 0.92);
  box-shadow:
    0 10px 24px rgba(18, 42, 68, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.preview-controls-cluster .preview-access {
  margin-left: 0;
}

.preview-controls label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.86rem;
}

.preview-controls-cluster label {
  padding: 0.18rem 0.22rem;
  color: #28425d;
  font-weight: 600;
}

.preview-controls select {
  min-width: 7.4rem;
}

.preview-controls .secondary {
  white-space: nowrap;
}

.preview-controls-cluster .secondary {
  min-height: 2.25rem;
  padding: 0.46rem 0.88rem;
  border-radius: 999px;
  border-color: #c6d4e3;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84), 0 6px 14px rgba(24, 48, 73, 0.04);
}

.preview-controls-cluster .secondary:hover {
  background: #ffffff;
  border-color: #9db3cb;
  box-shadow: 0 10px 20px rgba(24, 48, 73, 0.08);
}

body[data-color-mode="dark"] .preview-action-group {
  border-color: rgba(75, 98, 126, 0.94);
  background:
    linear-gradient(180deg, rgba(29, 42, 57, 0.96), rgba(20, 31, 44, 0.96)),
    rgba(19, 29, 41, 0.94);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-color-mode="dark"] .preview-action-group .secondary {
  border-color: #50657f;
  background: rgba(33, 49, 68, 0.92);
  color: #e6eff8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

body[data-color-mode="dark"] .preview-action-group .secondary:hover {
  border-color: #6985a7;
  background: rgba(40, 58, 79, 0.98);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

body[data-color-mode="dark"] .preview-controls-cluster {
  border-color: rgba(75, 98, 126, 0.94);
  background:
    linear-gradient(180deg, rgba(29, 42, 57, 0.96), rgba(20, 31, 44, 0.96)),
    rgba(19, 29, 41, 0.94);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-color-mode="dark"] .preview-controls-cluster label {
  color: #dce8f5;
}

body[data-color-mode="dark"] .preview-controls-cluster .secondary {
  border-color: #50657f;
  background: rgba(33, 49, 68, 0.92);
  color: #e6eff8;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

body[data-color-mode="dark"] .preview-controls-cluster .secondary:hover {
  border-color: #6985a7;
  background: rgba(40, 58, 79, 0.98);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

@media (max-width: 900px) {
  .preview-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    min-height: 0;
  }

  .preview-title-row {
    grid-column: 1;
    width: 100%;
    order: 1;
    justify-self: stretch;
  }

  .preview-utility-row {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-primary-actions {
    width: 100%;
  }

  .preview-action-group {
    width: 100%;
  }

  .preview-action-group-publish {
    margin-left: 0;
  }

  .preview-access {
    flex-wrap: wrap;
  }

  .preview-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: 0;
  }

  .preview-controls-cluster {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .preview-menu-panel {
    position: static;
    margin-top: 0.35rem;
  }
}


.live-preview {
  border: 1px solid #cfdcec;
  border-radius: 10px;
  background: #e8f0fa;
  padding: 0.8rem;
  overflow: auto;
  position: relative;
  min-height: 0;
  height: 100%;
}

.preview-stage {
  margin: 0 auto 0 0;
  border: 1px solid transparent;
  border-image-slice: 1;
  border-image-source: var(--preview-frame-liner-source, linear-gradient(var(--preview-border, #d8e2ef), var(--preview-border, #d8e2ef)));
  border-radius: 14px;
  background: var(--preview-page-shell-bg, var(--preview-page-bg, #f4f7fb));
  color: var(--preview-text, #15212e);
  font-family: var(--preview-font-family, "Segoe UI", Tahoma, sans-serif);
  font-size: var(--preview-base-font-size, 16px);
}

.preview-stage.preview-stage-with-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(82vh, 980px);
  overflow: hidden;
}

.preview-stage[data-device="desktop"] {
  width: min(100%, 1280px);
}

.preview-stage[data-device="tablet"] {
  width: min(100%, 900px);
}

.preview-stage[data-device="mobile"] {
  width: min(100%, 430px);
}

.preview-header {
  position: sticky;
  top: 0;
  z-index: 120;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--preview-border, #d8e2ef);
  background: var(--preview-surface-bg, #fff);
  overflow: visible;
}

.preview-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  overflow: visible;
}

.preview-header-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 0.42rem;
}

.preview-header h1 {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--preview-heading-font-family, "Segoe UI", Tahoma, sans-serif);
  font-size: var(--preview-heading-font-size, 22px);
}

.preview-header p {
  margin: 0.35rem 0 0;
  color: var(--preview-muted, #496078);
}

.preview-header-description {
  margin: 0.35rem 0 0;
  min-height: 1.35rem;
  color: var(--preview-text, #15212e);
  opacity: 0.82;
}

.preview-course-header-direct-edit {
  outline: none;
  cursor: text;
}

.preview-course-header-direct-edit:focus {
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.26);
  background: transparent;
}

.preview-course-header-direct-edit-title {
  display: inline-block;
  min-width: 8rem;
}

.preview-course-header-direct-edit.is-empty::before {
  content: attr(data-placeholder);
  color: var(--preview-muted, #6f8398);
  opacity: 0.88;
}

.preview-header-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.preview-title-master-bar {
  gap: 0.34rem;
}

.preview-title-master-bar .media-workspace-action {
  width: 2.05rem;
  min-width: 2.05rem;
  height: 1.92rem;
  padding: 0.18rem;
  border-radius: 0.62rem;
}

.preview-title-master-bar .media-workspace-action-icon {
  width: 0.92rem;
  height: 0.92rem;
}

.preview-title-master-menu {
  position: relative;
  z-index: 1202;
}

.preview-title-master-menu > summary {
  list-style: none;
}

.preview-title-master-menu > summary::-webkit-details-marker {
  display: none;
}

.preview-title-master-menu[open] > summary.media-workspace-action {
  background: #e8eef6;
  border-color: #697f99;
  box-shadow: 0 4px 12px rgba(24, 48, 73, 0.08);
}

.preview-title-master-menu .preview-menu-panel {
  left: 0;
  right: auto;
  min-width: min(24rem, calc(100vw - 2.2rem));
  max-width: min(28rem, calc(100vw - 2.2rem));
  z-index: 1300;
}

.preview-shortcuts-panel {
  position: fixed;
  top: clamp(3.5rem, 6.2vh, 5.2rem);
  left: max(0.6rem, calc(50vw - 28rem));
  right: auto;
  width: min(56rem, calc(100vw - 1.2rem));
  min-width: min(56rem, calc(100vw - 1.2rem));
  max-width: min(56rem, calc(100vw - 1.2rem));
  max-height: min(88vh, 56rem);
  overflow: auto;
}

.preview-shortcuts-shell {
  display: grid;
  grid-template-columns: minmax(8.4rem, 9.6rem) minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
}

.preview-shortcuts-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.46rem;
  position: sticky;
  top: 0;
}

.preview-shortcuts-tab {
  appearance: none;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  color: #17324f;
  padding: 0.62rem 0.55rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 0.48rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.preview-shortcuts-tab .media-workspace-action-icon {
  width: 1.02rem;
  height: 1.02rem;
}

.preview-shortcuts-tab-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.preview-shortcuts-tab:hover,
.preview-shortcuts-tab:focus-visible,
.preview-shortcuts-tab.is-active {
  border-color: #6c85a3;
  background: linear-gradient(180deg, #eff5fb 0%, #dce7f3 100%);
  box-shadow: 0 0 0 1px rgba(108, 133, 163, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  outline: none;
}

.preview-shortcuts-body {
  display: grid;
  gap: 0.65rem;
}

.preview-shortcuts-body-head {
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.8rem 0.78rem;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.preview-shortcuts-body-title {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #17324f;
}

.preview-shortcuts-body-hint {
  font-size: 0.73rem;
  line-height: 1.35;
  color: #46607d;
}

.preview-shortcuts-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.preview-shortcuts-section.is-active {
  animation: preview-shortcuts-section-in 180ms ease-out;
}

.preview-shortcuts-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  grid-column: 1 / -1;
}

.preview-shortcuts-color-field {
  display: grid;
  gap: 0.32rem;
  padding: 0.45rem;
  border: 1px solid #d9e3ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  font-size: 0.7rem;
  color: #2b3f56;
}

.preview-shortcuts-color-field > span {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.preview-shortcuts-color-field input[type="color"] {
  width: 100%;
  height: 2.15rem;
  border: 1px solid #c5d6ea;
  border-radius: 10px;
  background: #ffffff;
}

.preview-shortcuts-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  grid-column: 1 / -1;
}

.preview-shortcuts-icon-action {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  text-align: center;
  padding: 0.52rem 0.34rem;
  border-radius: 12px;
}

.preview-shortcuts-icon-action .media-workspace-action-icon {
  width: 1rem;
  height: 1rem;
}

.preview-shortcuts-icon-action span {
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.preview-shortcuts-icon-action.is-active {
  border-color: #6c85a3;
  background: #eaf1f9;
  color: #17324f;
}

.preview-shortcuts-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
  grid-column: 1 / -1;
}

.preview-shortcuts-preset {
  appearance: none;
  border: 1px solid #d9e3ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  color: #17324f;
  padding: 0.48rem 0.42rem;
  display: grid;
  gap: 0.34rem;
  justify-items: center;
  cursor: pointer;
}

.preview-shortcuts-preset:hover,
.preview-shortcuts-preset:focus-visible,
.preview-shortcuts-preset.is-active {
  border-color: #6c85a3;
  background: linear-gradient(180deg, #eff5fb 0%, #dce7f3 100%);
  outline: none;
}

.preview-shortcuts-preset-swatches {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
}

.preview-shortcuts-preset-swatch {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  border: 1px solid rgba(23, 50, 79, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.preview-shortcuts-preset-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.preview-shortcuts-choice-card {
  display: grid;
  gap: 0.38rem;
  padding: 0.46rem;
  border: 1px solid #d9e3ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.preview-shortcuts-choice-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.preview-shortcuts-choice-icon {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #355271;
}

.preview-shortcuts-choice-icon .media-workspace-action-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.preview-shortcuts-choice-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #17324f;
}

.preview-shortcuts-choice-current {
  margin-left: auto;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #e8eff6;
  color: #355271;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.preview-shortcuts-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

.preview-shortcuts-choice {
  appearance: none;
  min-width: 0;
  border: 1px solid #d7e2ef;
  border-radius: 10px;
  background: #ffffff;
  color: #1d3550;
  padding: 0.42rem 0.2rem;
  display: grid;
  justify-items: center;
  gap: 0.16rem;
  cursor: pointer;
}

.preview-shortcuts-choice:hover,
.preview-shortcuts-choice:focus-visible,
.preview-shortcuts-choice.is-active {
  border-color: #6c85a3;
  background: #eaf1f9;
  outline: none;
}

.preview-shortcuts-choice-option-icon {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.preview-shortcuts-choice-option-icon .media-workspace-action-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.preview-shortcuts-choice > span:last-child {
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
}

.preview-shortcuts-nav-preview {
  margin-top: 0.1rem;
  grid-column: 1 / -1;
}

.preview-shortcuts-nav-preview-fallback {
  margin-top: 0.1rem;
  padding: 0.42rem;
  border-radius: 12px;
  background: #f4f7fb;
}

.preview-shortcuts-nav-preview-fallback .preview-shortcuts-nav-preview {
  display: grid;
  grid-template-columns: minmax(12rem, 0.82fr) minmax(18rem, 1.18fr);
  gap: 0.45rem;
  padding: 0.45rem;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #ffffff;
}

@keyframes preview-shortcuts-section-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preview-shortcuts-nav-rail,
.preview-shortcuts-nav-content {
  display: grid;
  gap: 0.38rem;
}

.preview-shortcuts-nav-search,
.preview-shortcuts-nav-lesson,
.preview-shortcuts-nav-meta,
.preview-shortcuts-nav-card {
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #17324f;
  font-size: 0.68rem;
}

.preview-shortcuts-nav-search,
.preview-shortcuts-nav-meta {
  padding: 0.34rem 0.42rem;
  font-weight: 700;
}

.preview-shortcuts-nav-lessons {
  display: grid;
  gap: 0.28rem;
}

.preview-shortcuts-nav-lesson {
  padding: 0.34rem 0.42rem;
}

.preview-shortcuts-nav-lesson.is-active {
  border-color: #6c85a3;
  background: #eaf1f9;
}

.preview-shortcuts-nav-card {
  min-height: 3.8rem;
  display: grid;
  place-items: center;
  padding: 0.4rem;
  font-weight: 700;
}

.preview-shortcuts-nav-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

.preview-shortcuts-nav-btn {
  appearance: none;
  border: 1px solid #2f6db4;
  border-radius: 10px;
  background: #2f6db4;
  color: #ffffff;
  padding: 0.4rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.preview-shortcuts-nav-btn.secondary {
  border-color: #c9d8e8;
  background: #ffffff;
  color: #17324f;
}

.preview-shortcuts-nav-btn:disabled {
  opacity: 0.55;
}

.preview-course-title-quick-fields {
  display: grid;
  gap: 0.38rem;
}

.preview-course-title-quick-field {
  display: grid;
  gap: 0.22rem;
  font-size: 0.78rem;
  color: #2b3f56;
}

.preview-course-title-quick-field > span {
  font-weight: 700;
}

.preview-course-title-quick-field input,
.preview-course-title-quick-field textarea {
  width: 100%;
}

.preview-course-title-quick-field textarea {
  min-height: 4.6rem;
  resize: vertical;
}

.preview-header-tool {
  appearance: none;
  border: 1px solid #7b8da4;
  background: #f4f7fb;
  color: #183049;
  border-radius: 10px;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.2rem 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.preview-header-tool:hover,
.preview-header-tool:focus-visible,
.preview-header-quick[open] > summary.preview-header-tool {
  background: #e8eef6;
  border-color: #697f99;
  box-shadow: 0 4px 12px rgba(24, 48, 73, 0.08);
  outline: none;
}

.preview-header-tool[data-hover-hint] {
  position: relative;
  overflow: visible;
}

.preview-header-tool[data-hover-hint]::before {
  content: attr(data-hover-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 0.18rem);
  max-width: calc(100vw - 1.5rem);
  width: max-content;
  padding: 0.34rem 0.52rem;
  border-radius: 0.48rem;
  background: rgba(18, 31, 47, 0.96);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(7, 15, 24, 0.24);
  z-index: 4600;
}

.preview-header-tool[data-hover-hint]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.12rem);
  width: 0.55rem;
  height: 0.55rem;
  background: rgba(18, 31, 47, 0.96);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 4599;
}

.preview-header-tool[data-hover-hint]:hover::before,
.preview-header-tool[data-hover-hint]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.preview-header-tool[data-hover-hint]:hover::after,
.preview-header-tool[data-hover-hint]:focus-visible::after {
  opacity: 1;
}

.preview-header-tools .preview-header-tool[data-hover-hint]::before {
  top: calc(100% + 0.45rem);
  bottom: auto;
  left: auto;
  right: 0;
  transform: translate(0, 0.18rem);
}

.preview-header-tools .preview-header-tool[data-hover-hint]::after {
  top: calc(100% + 0.12rem);
  bottom: auto;
  left: auto;
  right: 0.72rem;
  transform: rotate(45deg);
}

.preview-header-tools .media-workspace-action[data-hover-hint]:hover::after,
.preview-header-tools .media-workspace-action[data-hover-hint]:focus-visible::after {
  top: calc(100% + 0.45rem);
  bottom: auto;
  left: auto;
  right: 0;
  transform: none;
}

.preview-header-quick {
  position: relative;
  z-index: 1203;
}

.preview-header-quick > summary {
  list-style: none;
}

.preview-header-quick > summary::-webkit-details-marker {
  display: none;
}

.preview-header-quick .preview-menu-panel {
  position: fixed;
  top: clamp(4.35rem, 8vh, 6.8rem);
  left: max(0.6rem, calc(50vw - 37rem));
  right: auto;
  max-width: calc(100vw - 1.2rem);
  min-width: min(62rem, calc(100vw - 1.2rem));
  width: min(74rem, calc(100vw - 1.2rem));
  max-height: min(95vh, 1280px);
  overflow: auto;
  z-index: 1301;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.preview-header-quick-panel {
  display: grid;
  grid-template-columns: minmax(36rem, 1.1fr) minmax(21rem, 0.9fr);
  gap: 0.24rem 0.4rem;
  align-items: start;
}

.preview-header-quick-panel-head {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.12rem;
  padding: 0.08rem 0.08rem 0.02rem;
}

.preview-header-quick-panel-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #17324f;
}

.preview-header-quick-panel-close {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  min-width: 4.9rem;
}

.preview-header-quick-panel-hint {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 48rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #46617b;
}

.preview-header-quick-left-rail {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  gap: 0.22rem;
  align-content: start;
  position: sticky;
  top: 0.18rem;
}

.preview-header-quick-right-rail {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  gap: 0.12rem;
  align-content: start;
}

.preview-header-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24rem 0.34rem;
}

.preview-header-quick-format-row {
  margin-top: 0.02rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr));
  gap: 0.24rem 0.34rem;
}

.preview-header-quick-tools {
  display: grid;
  gap: 0.28rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.9);
  padding: 0.38rem 0.44rem;
}

.preview-header-quick-mini-actions {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  flex-wrap: wrap;
  margin-top: -0.08rem;
}

.preview-header-quick-mini-actions .secondary {
  min-width: 4.8rem;
}

.preview-header-quick-starter-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.4rem, 1fr));
  width: 100%;
  border-radius: 16px;
}

.preview-header-quick-starter-chip {
  display: grid;
  gap: 0.36rem;
  align-content: start;
  justify-items: start;
  min-height: 3.35rem;
  padding: 0.56rem 0.72rem;
  border: 1px solid var(--starter-chip-border, #d8e2ef);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--starter-chip-page, #f4f7fb) 82%, white) 0%, var(--starter-chip-surface, #ffffff) 100%);
  color: var(--starter-chip-text, #15212e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.preview-header-quick-starter-chip.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--starter-chip-page, #f4f7fb) 72%, var(--starter-chip-accent, #2f6db4) 28%) 0%, var(--starter-chip-surface, #ffffff) 100%);
  color: var(--starter-chip-text, #15212e);
  border-color: var(--starter-chip-accent, #2f6db4);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--starter-chip-accent, #2f6db4) 22%, transparent), 0 10px 22px rgba(15, 31, 49, 0.12);
}

.preview-header-quick-starter-swatch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
}

.preview-header-quick-starter-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 31, 49, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.preview-header-quick-starter-swatch-page {
  background: var(--starter-chip-page, #f4f7fb);
}

.preview-header-quick-starter-swatch-surface {
  background: var(--starter-chip-surface, #ffffff);
}

.preview-header-quick-starter-swatch-accent {
  background: var(--starter-chip-accent, #2f6db4);
}

.preview-header-quick-starter-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.18;
}

.preview-header-quick-frame-grid {
  display: grid;
  gap: 0.34rem;
}

.preview-header-quick-frame-row {
  display: grid;
  gap: 0.24rem;
  padding: 0.34rem;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #ffffff;
}

.preview-header-quick-frame-row > strong {
  font-size: 0.72rem;
  color: #17324f;
}

.preview-header-quick-frame-row select,
.preview-header-quick-frame-row textarea,
.preview-header-quick-frame-row .item-media-control {
  width: 100%;
  min-width: 0;
}

.preview-header-quick-frame-detail textarea {
  min-height: 1.8rem;
  resize: vertical;
  font-size: 0.68rem;
  line-height: 1.18;
}

.preview-header-quick-shell-grid {
  margin-top: 0.02rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem 0.34rem;
}

.preview-header-quick-path {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: 0.24rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(250, 252, 255, 0.92);
  padding: 0.42rem 0.5rem;
}

.preview-header-quick-path-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

.preview-header-quick-path-actions .secondary {
  min-width: 0;
}

.preview-header-quick-path-actions .secondary.is-active {
  border-color: #6c85a3;
  background: #eaf1f9;
  color: #17324f;
}

.preview-header-quick-path-primary {
  display: grid;
  gap: 0.22rem;
  border-top: 1px solid rgba(213, 226, 240, 0.9);
  padding-top: 0.34rem;
  justify-items: start;
}

.preview-header-quick-primary-color-field {
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 0.38rem;
  padding: 0.14rem 0.2rem;
  border: 1px solid #d5e2f0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.preview-header-quick-primary-color-field > span {
  white-space: nowrap;
}

.preview-header-quick-primary-color-field input[type="color"] {
  width: 2rem;
  height: 1.25rem;
  border-radius: 999px;
}

.preview-header-quick-shell-note {
  grid-column: 1 / -1;
}

.preview-header-quick-advanced {
  margin-top: 0.06rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.84);
  overflow: hidden;
}

.preview-header-quick-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.42rem 0.62rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #17324f;
}

.preview-header-quick-advanced > summary::-webkit-details-marker {
  display: none;
}

.preview-header-quick-advanced > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.36rem;
  color: #567391;
}

.preview-header-quick-advanced[open] > summary::before {
  content: '▾';
}

.preview-header-quick-advanced > .preview-header-quick-shell-grid {
  padding: 0 0.62rem 0.58rem;
}

.preview-header-quick-shell-field {
  display: grid;
  gap: 0.22rem;
  font-size: 0.72rem;
  color: #2b3f56;
}

.preview-header-quick-shell-field.is-full {
  grid-column: 1 / -1;
}

.preview-header-quick-shell-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: -0.02rem;
}

.preview-header-quick-shell-actions .secondary {
  min-width: 8.6rem;
}

.preview-header-quick-shell-field > span {
  min-width: 0;
  font-weight: 700;
}

.preview-header-quick-shell-field input,
.preview-header-quick-shell-field select,
.preview-header-quick-shell-field textarea {
  width: 100%;
  min-width: 0;
}

.preview-header-quick-shell-field textarea {
  min-height: 1.7rem;
  resize: vertical;
  line-height: 1.18;
  font-size: 0.64rem;
}

.preview-header-quick-upload-control .item-media-upload {
  align-items: center;
}

.preview-header-quick-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.preview-header-quick-upload-status {
  min-width: 0;
  margin: 0;
  font-size: 0.68rem;
  color: #4a637f;
}

.preview-header-quick-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.7rem;
  color: #2b3f56;
}

.preview-header-quick-color-field {
  cursor: pointer;
}

.preview-header-quick-field > span {
  min-width: 0;
  font-weight: 700;
}

.preview-header-quick-field input[type="color"] {
  width: 1.6rem;
  height: 1.05rem;
  border: 1px solid #c5d6ea;
  border-radius: 5px;
  padding: 0.04rem;
  background: #ffffff;
}

.preview-header-quick-field input[type="number"],
.preview-header-quick-field select {
  min-width: 4.4rem;
  max-width: 7.2rem;
}

.preview-header-quick-field-compact {
  font-size: 0.72rem;
  gap: 0.32rem;
}

.preview-header-quick-field-compact > span {
  letter-spacing: 0.01em;
}

.preview-header-quick-field-compact input[type="number"] {
  min-width: 3.9rem;
  max-width: 4.6rem;
  padding: 0.18rem 0.24rem;
  font-size: 0.72rem;
}

.preview-header-quick-field-compact select {
  min-width: 4.3rem;
  max-width: 5.2rem;
  padding: 0.18rem 1.15rem 0.18rem 0.3rem;
  font-size: 0.72rem;
}

.preview-header-quick-checkbox {
  margin-top: 0.14rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.76rem;
  color: #2b3f56;
}

.preview-header-quick-ai {
  margin-top: 0;
  display: grid;
  gap: 0.22rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(245, 250, 255, 0.86);
  padding: 0.26rem;
}

.preview-header-quick-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
  gap: 0.36rem;
}

.preview-header-quick-ai-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.preview-header-quick-ai-actions .secondary {
  min-width: 4.9rem;
}

.preview-header-quick-ai-suggestions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
}

.preview-header-quick-ai-empty {
  grid-column: 1 / -1;
}

.preview-header-quick-ai-chip {
  appearance: none;
  border: 1px solid #c8d8eb;
  background: #ffffff;
  border-radius: 8px;
  min-height: 2.2rem;
  padding: 0.22rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-align: left;
  color: #17324f;
  cursor: pointer;
}

.preview-header-quick-ai-chip:hover,
.preview-header-quick-ai-chip:focus-visible,
.preview-header-quick-ai-chip.is-active {
  border-color: #6c85a3;
  background: #eaf1f9;
  outline: none;
}

.preview-header-quick-ai-chip-swatches {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  flex: 0 0 auto;
}

.preview-header-quick-ai-swatch {
  width: 0.48rem;
  height: 0.92rem;
  border-radius: 3px;
  border: 1px solid rgba(18, 43, 69, 0.18);
  background: #d8e2ef;
}

.preview-header-quick-ai-chip-text {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  font-size: 0.58rem;
  line-height: 1.14;
}

.preview-header-quick-ai-chip-text > strong {
  font-size: 0.64rem;
}

.preview-header-quick-actions {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.preview-header-quick-actions .secondary {
  width: auto;
  min-width: 5.4rem;
  justify-content: center;
  text-align: center;
}

.preview-header-quick-preview {
  margin-top: 0;
  display: grid;
  gap: 0.24rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(246, 250, 255, 0.88);
  padding: 0.28rem;
}

.preview-header-quick-preview-title {
  font-size: 0.67rem;
  font-weight: 700;
  color: #35506a;
  letter-spacing: 0.01em;
}

.preview-header-quick-preview-hint {
  font-size: 0.62rem;
  line-height: 1.3;
  color: #4a637f;
}

.preview-header-quick-preview-stage {
  border: 1px solid #d8e2ef;
  border-radius: 9px;
  padding: 0.34rem;
  display: grid;
  gap: 0.22rem;
}

.preview-header-quick-preview-area {
  cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.preview-header-quick-preview-area:hover,
.preview-header-quick-preview-area:focus-visible {
  border-color: #9bb7d6;
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.12);
  outline: none;
}

.preview-header-quick-preview-area.is-bg-active {
  box-shadow: 0 0 0 2px rgba(47, 109, 180, 0.18);
}

.preview-header-quick-preview-area.is-bg-excluded {
  opacity: 0.72;
}

.preview-header-quick-preview-surface {
  border: 1px solid #d8e2ef;
  border-radius: 9px;
  padding: 0.32rem;
  display: grid;
  gap: 0.24rem;
}

.preview-header-quick-preview-lesson {
  border: 1px solid #d8e2ef;
  border-radius: 9px;
  padding: 0.32rem;
  display: grid;
  gap: 0.22rem;
}

.preview-header-quick-preview-builder {
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  padding: 0.3rem;
  display: grid;
  gap: 0.2rem;
}

.preview-header-quick-preview-label {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(122, 150, 182, 0.45);
  border-radius: 999px;
  padding: 0.1rem 0.34rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #20415f;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 10px rgba(15, 32, 51, 0.08);
}

.preview-header-quick-preview-label.is-toggle {
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.preview-header-quick-preview-label.is-toggle:hover,
.preview-header-quick-preview-label.is-toggle:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 6px 12px rgba(15, 32, 51, 0.12);
}

.preview-header-quick-preview-label.is-toggle-excluded {
  opacity: 0.62;
  border-style: dashed;
}

.preview-header-quick-preview-label.is-toggle-selected {
  box-shadow: 0 6px 14px rgba(15, 32, 51, 0.14);
}

.preview-header-quick-preview-heading {
  font-size: 0.64rem;
  line-height: 1.2;
}

.preview-header-quick-preview-body {
  font-size: 0.6rem;
  line-height: 1.25;
}

.preview-header-quick-preview-muted {
  font-size: 0.58rem;
  line-height: 1.2;
  opacity: 0.92;
}

.preview-header-quick-preview-inner-card {
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  padding: 0.25rem;
  display: grid;
  gap: 0.16rem;
}

.preview-header-quick-preview-accent {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-width: 2.65rem;
  min-height: 1.12rem;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0.08rem 0.34rem;
  font-size: 0.62rem;
  font-weight: 700;
}

.preview-header-quick-preview-button {
  justify-self: start;
  border: 1px solid #2f6db4;
  border-radius: 999px;
  min-height: 1.1rem;
  padding: 0.06rem 0.42rem;
  background: #2f6db4;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
}

.preview-header-quick-preview-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.18rem 0.3rem;
}

.preview-header-quick-preview-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
}

.preview-header-quick-preview-legend-swatch {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(24, 49, 77, 0.25);
  background: #d8e2ef;
}

.preview-header-quick-preview-legend-label {
  font-size: 0.61rem;
  color: #39526d;
  font-weight: 600;
}

.preview-header-quick-contrast {
  margin-top: 0.06rem;
  border: 1px solid #d5e2f0;
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.9);
  overflow: hidden;
}

.preview-header-quick-contrast-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  padding: 0.42rem 0.56rem;
}

.preview-header-quick-contrast-summary::-webkit-details-marker {
  display: none;
}

.preview-header-quick-contrast-summary-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #17324f;
}

.preview-header-quick-contrast-summary-status {
  border: 1px solid #cfddec;
  border-radius: 999px;
  background: #f8fbff;
  padding: 0.14rem 0.42rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #244463;
}

.preview-header-quick-contrast-summary-status.is-pass {
  border-color: #7bb899;
  background: #ecf9f1;
  color: #1f5a3a;
}

.preview-header-quick-contrast-summary-status.is-fail {
  border-color: #d99c9c;
  background: #fff1f1;
  color: #8a3131;
}

.preview-header-quick-contrast-body {
  padding: 0 0.56rem 0.56rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.18rem 0.24rem;
}

.preview-header-quick-contrast-item {
  border: 1px solid #d6e2ef;
  border-radius: 7px;
  background: #ffffff;
  padding: 0.18rem 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.22rem;
  font-size: 0.58rem;
  color: #244463;
}

.preview-header-quick-contrast-item strong {
  font-size: 0.6rem;
  color: #163450;
}

.preview-header-quick-contrast-item.is-pass {
  border-color: #7bb899;
  background: #ecf9f1;
}

.preview-header-quick-contrast-item.is-fail {
  border-color: #d99c9c;
  background: #fff1f1;
}

@media (max-width: 640px) {
  .preview-header-top {
    flex-wrap: wrap;
  }

  .preview-header-title-wrap {
    width: 100%;
  }

  .preview-title-master-bar {
    flex-wrap: wrap;
  }

  .preview-header-tools {
    width: 100%;
    justify-content: flex-end;
  }

  .preview-header-quick .preview-menu-panel {
    left: 0.35rem;
    right: auto;
    width: calc(100vw - 0.7rem);
    min-width: calc(100vw - 0.7rem);
    max-width: calc(100vw - 0.7rem);
    max-height: min(90vh, 980px);
  }

  .preview-header-quick-panel {
    grid-template-columns: 1fr;
  }

  .preview-shortcuts-panel {
    left: 0.35rem;
    width: calc(100vw - 0.7rem);
    min-width: calc(100vw - 0.7rem);
    max-width: calc(100vw - 0.7rem);
    max-height: min(90vh, 980px);
  }

  .preview-shortcuts-shell {
    grid-template-columns: 1fr;
  }

  .preview-shortcuts-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: static;
  }

  .preview-shortcuts-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.48rem 0.3rem;
  }

  .preview-shortcuts-section {
    grid-template-columns: 1fr;
  }

  .preview-shortcuts-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-shortcuts-icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preview-shortcuts-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preview-header-quick-left-rail,
  .preview-header-quick-right-rail {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }

  .preview-header-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-header-quick-shell-grid {
    grid-template-columns: 1fr;
  }

  .preview-header-quick-ai-grid {
    grid-template-columns: 1fr;
  }

  .preview-header-quick-ai-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-header-quick-preview-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-header-quick-contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preview-score-row {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-lesson-nav {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preview-lesson-nav-wrap {
  margin-top: 0.95rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--preview-border, #d8e2ef);
}

.preview-lesson-nav-label {
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--preview-muted, #496078);
}

.preview-lesson-nav-btn {
  appearance: none;
  border: 1px solid #c9d8ea;
  border-radius: 999px;
  background: #f4f8fd;
  color: var(--preview-text, #15212e);
  padding: 0.38rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.preview-lesson-nav-btn:hover,
.preview-lesson-nav-btn:focus-visible {
  border-color: #8fb3d8;
  background: #eaf3ff;
  outline: none;
}

.preview-lesson-nav-btn.is-active {
  border-color: var(--preview-accent, #1f5d9c);
  background: rgba(31, 93, 156, 0.12);
  color: var(--preview-accent, #1f5d9c);
  box-shadow: 0 0 0 1px rgba(31, 93, 156, 0.08);
}

.preview-pill {
  border: 1px solid #c9d8ea;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.8rem;
  background: #eff5fd;
}

.preview-content {
  max-width: var(--preview-content-width, 900px);
  margin: 0 auto 0 0;
  padding: 0.9rem 0.9rem 4.25rem;
  scroll-padding-bottom: 4.25rem;
}

.preview-shell {
  display: block;
  background: var(--preview-canvas-shell-bg, transparent);
}

.preview-shell.has-lesson-sidebar {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed {
  grid-template-columns: 3.35rem minmax(0, 1fr);
}

.preview-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 0.52rem 0.7rem 0.8rem;
  border-right: 1px solid var(--preview-border, #d8e2ef);
  background: color-mix(in srgb, var(--preview-surface-bg, #fff) 92%, var(--preview-page-bg, #f4f7fb) 8%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 1;
}

.preview-sidebar-header-shell {
  display: grid;
  gap: 0.4rem;
  padding: 0.52rem 0.56rem 0.58rem;
  margin-bottom: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--preview-border, #d8e2ef) 82%, #8ba4c2 18%);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 248, 253, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.preview-sidebar-top {
  display: grid;
  gap: 0.34rem;
  margin-bottom: 0;
}

.preview-sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  width: 100%;
}

.preview-sidebar-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  flex: 0 0 auto;
}

.preview-sidebar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  width: 100%;
}

.preview-sidebar-search-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.78rem;
  padding: 0.16rem 0.56rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.preview-sidebar-search-btn-compact {
  flex: 0 1 4.45rem;
  max-width: 4.45rem;
  min-width: 0;
  min-height: 1.72rem;
  padding: 0.12rem 0.36rem;
  font-size: 0.69rem;
}

.preview-sidebar-add-btn {
  width: 1.56rem;
  max-width: 1.56rem;
  flex: 0 0 1.56rem;
  min-width: 1.56rem;
  min-height: 1.56rem;
  height: 1.56rem;
  padding: 0.08rem;
  border-width: 2px;
  border-color: #244a70;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #d9e8fa 100%);
  color: #0f2d49;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 0.92rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 4px 10px rgba(15, 36, 59, 0.14);
}

.preview-sidebar-add-btn:hover,
.preview-sidebar-add-btn:focus-visible {
  border-color: #183d61;
  background: linear-gradient(180deg, #ffffff 0%, #cfe3fb 100%);
  color: #0b2740;
}

.preview-sidebar-delete-btn {
  width: 1.56rem;
  max-width: 1.56rem;
  flex: 0 0 1.56rem;
  min-width: 1.56rem;
  min-height: 1.56rem;
  height: 1.56rem;
  padding: 0.08rem;
  border-width: 2px;
  border-radius: 8px;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 0.96rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 4px 10px rgba(135, 37, 23, 0.12);
}

.preview-sidebar-actions {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  grid-template-columns: minmax(0, 1fr);
}

.preview-sidebar-actions-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-lesson-options-body {
  display: grid;
  gap: 0.34rem;
}

.preview-lesson-options-mode {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(2, 2.35rem);
  justify-content: start;
}

.preview-lesson-options-mode-inline {
  flex: 0 0 auto;
}

.preview-lesson-options-mode-btn {
  min-height: 1.84rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.74rem;
  line-height: 1.04;
}

.preview-lesson-options-mode-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  border-color: #9cb0c7;
  background: linear-gradient(180deg, #f3f6fa 0%, #e1e8f0 100%);
  color: #6a7f96;
  box-shadow: none;
}

.preview-lesson-options-mode-icon-btn {
  min-width: 2.35rem;
  width: 2.35rem;
  padding: 0.16rem;
  font-size: 0;
  line-height: 1;
}

.preview-lesson-options-mode-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.preview-lesson-options-mode-btn.is-active,
.preview-lesson-options-mode-btn[aria-pressed="true"] {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.24) 0%, rgba(31, 93, 156, 0.15) 100%);
  color: #103a61;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.12), 0 0 0 2px rgba(31, 93, 156, 0.14), 0 8px 16px rgba(18, 42, 68, 0.08);
}

.preview-lesson-options-mode-btn.is-active:hover,
.preview-lesson-options-mode-btn.is-active:focus-visible,
.preview-lesson-options-mode-btn[aria-pressed="true"]:hover,
.preview-lesson-options-mode-btn[aria-pressed="true"]:focus-visible {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.28) 0%, rgba(31, 93, 156, 0.18) 100%);
  color: #0f3557;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.14), 0 0 0 2px rgba(31, 93, 156, 0.18), 0 10px 18px rgba(18, 42, 68, 0.1);
}

.preview-lesson-options-targets {
  grid-template-columns: minmax(0, 1fr);
}

.preview-lesson-options-targets[hidden] {
  display: none !important;
}

.preview-lesson-options-choice-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-lesson-options-choice-row[hidden] {
  display: none !important;
}

.preview-lesson-options-choice-btn {
  min-height: 1.9rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.72rem;
  line-height: 1.04;
}

.preview-lesson-options-choice-btn.is-active,
.preview-lesson-options-choice-btn[aria-pressed="true"] {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.24) 0%, rgba(31, 93, 156, 0.15) 100%);
  color: #103a61;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.12), 0 0 0 2px rgba(31, 93, 156, 0.14), 0 8px 16px rgba(18, 42, 68, 0.08);
}

.preview-lesson-options-choice-btn.is-active:hover,
.preview-lesson-options-choice-btn.is-active:focus-visible,
.preview-lesson-options-choice-btn[aria-pressed="true"]:hover,
.preview-lesson-options-choice-btn[aria-pressed="true"]:focus-visible {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.28) 0%, rgba(31, 93, 156, 0.18) 100%);
  color: #0f3557;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.14), 0 0 0 2px rgba(31, 93, 156, 0.18), 0 10px 18px rgba(18, 42, 68, 0.1);
}

.preview-lesson-options-theme-scopes {
  margin-top: 0;
  margin-bottom: 0;
  gap: 0.26rem;
}

.preview-lesson-options-theme-branch {
  display: grid;
  gap: 0.22rem;
  margin-top: 0.04rem;
  margin-left: 0;
  padding: 0.34rem 0.36rem 0.2rem 0.52rem;
  border-left: 2px solid rgba(31, 93, 156, 0.32);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.08) 0%, rgba(31, 93, 156, 0.03) 100%);
}

.preview-lesson-options-theme-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.34rem;
}

.preview-lesson-options-theme-branch[hidden] {
  display: none !important;
}

.preview-lesson-options-theme-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2d567f;
  line-height: 1.05;
  white-space: nowrap;
}

.preview-lesson-options-theme-scopes .preview-lesson-action-compact {
  min-height: 1.54rem;
  padding: 0.1rem 0.22rem;
  font-size: 0.63rem;
  line-height: 1.02;
}

.preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active,
.preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"] {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.24) 0%, rgba(31, 93, 156, 0.15) 100%);
  color: #103a61;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.12), 0 0 0 2px rgba(31, 93, 156, 0.14), 0 8px 16px rgba(18, 42, 68, 0.08);
}

.preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active:hover,
.preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active:focus-visible,
.preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"]:hover,
.preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"]:focus-visible {
  border-color: var(--preview-accent, #1f5d9c);
  background: linear-gradient(180deg, rgba(31, 93, 156, 0.28) 0%, rgba(31, 93, 156, 0.18) 100%);
  color: #0f3557;
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.14), 0 0 0 2px rgba(31, 93, 156, 0.18), 0 10px 18px rgba(18, 42, 68, 0.1);
}

body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active,
body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(111, 177, 244, 0.28) 0%, rgba(111, 177, 244, 0.2) 100%);
  border-color: #6fb1f4;
  color: #e6f3ff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(111, 177, 244, 0.16), 0 0 0 2px rgba(111, 177, 244, 0.16), 0 8px 16px rgba(0, 0, 0, 0.24);
}

body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active:hover,
body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact.is-active:focus-visible,
body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"]:hover,
body[data-color-mode="dark"] .preview-lesson-options-theme-scopes .preview-lesson-action-compact[aria-pressed="true"]:focus-visible {
  background: linear-gradient(180deg, rgba(111, 177, 244, 0.34) 0%, rgba(111, 177, 244, 0.24) 100%);
  border-color: #8bc2f8;
  color: #f2f8ff;
}

.preview-lesson-action {
  min-width: 0;
  width: 100%;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.preview-sidebar-header-shell .preview-sidebar-actions {
  margin-bottom: 0;
}

.preview-lesson-action-primary {
  min-height: 1.78rem;
  padding: 0.16rem 0.5rem;
  font-size: 0.74rem;
  line-height: 1.05;
}

.preview-lesson-action-compact {
  min-height: 2.02rem;
  padding: 0.18rem 0.26rem;
  font-size: 0.67rem;
  line-height: 1.06;
  white-space: normal;
  overflow-wrap: anywhere;
}

.preview-sidebar-actions .preview-lesson-action:hover,
.preview-sidebar-actions .preview-lesson-action:focus-visible {
  border-color: #697f99;
  background: #e8eef6;
  box-shadow: 0 4px 12px rgba(24, 48, 73, 0.08);
}

.preview-sidebar-actions .preview-lesson-action:active {
  transform: translateY(1px);
}

.preview-sidebar-actions .preview-lesson-action:disabled {
  opacity: 0.64;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.preview-lesson-options .preview-sidebar-actions {
  margin-bottom: 0;
}

.preview-lesson-action-icon {
  min-width: 1.56rem;
  min-height: 1.56rem;
  padding: 0.08rem 0.16rem;
  line-height: 1;
}

.preview-sidebar-toggle {
  width: 2.1rem;
  max-width: 2.1rem;
  flex: 0 0 2.1rem;
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.18rem 0.32rem;
  border-width: 2px;
  border-color: #244a70;
  background: linear-gradient(180deg, #f8fbff 0%, #d6e5f7 100%);
  color: #0f2d49;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 1.16rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 4px 10px rgba(15, 36, 59, 0.16);
}

.preview-sidebar-toggle-compact {
  width: 1.3rem;
  max-width: 1.3rem;
  flex: 0 0 1.3rem;
  min-width: 1.3rem;
  min-height: 1.3rem;
  height: 1.3rem;
  padding: 0.04rem;
  border-radius: 6px;
  font-size: 0.82rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 4px 10px rgba(15, 36, 59, 0.14);
}

.preview-sidebar-toggle:hover,
.preview-sidebar-toggle:focus-visible {
  border-color: #1d3f62;
  background: linear-gradient(180deg, #f2f8ff 0%, #c9dcf2 100%);
  color: #0b2338;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 6px 14px rgba(15, 36, 59, 0.2);
}

.preview-sidebar-toggle:focus-visible {
  outline: 2px solid #1f5d9c;
  outline-offset: 1px;
}

body[data-color-mode="dark"] .preview-sidebar-toggle {
  border-color: #a3c2e7;
  background: linear-gradient(180deg, #294059 0%, #1f3349 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(5, 11, 19, 0.48);
  box-shadow: inset 0 0 0 1px rgba(178, 208, 242, 0.16), 0 6px 14px rgba(0, 0, 0, 0.3);
}

body[data-color-mode="dark"] .preview-sidebar-toggle:hover,
body[data-color-mode="dark"] .preview-sidebar-toggle:focus-visible {
  border-color: #c0d8f3;
  background: linear-gradient(180deg, #314c6a 0%, #263e58 100%);
  color: #ffffff;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-toggle {
  width: 1.95rem;
  max-width: 1.95rem;
  flex-basis: 1.95rem;
  min-width: 1.95rem;
  min-height: 2rem;
  padding: 0.12rem 0.2rem;
}

.preview-sidebar-label {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--preview-text, #15212e);
  opacity: 0.92;
  line-height: 1;
}

.preview-sidebar-nav {
  display: grid;
  gap: 0.28rem;
}

.preview-sidebar-nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.24rem;
}

.preview-sidebar-nav-row.has-controls {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem;
}

.search-modal-panel {
  width: min(720px, calc(100vw - 2.2rem));
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.search-modal-body {
  display: grid;
  gap: 0.65rem;
}

.search-modal-input {
  width: 100%;
  min-width: 0;
}

.search-modal-meta {
  min-height: 1.1rem;
  font-size: 0.78rem;
}

.search-modal-results {
  display: grid;
  gap: 0.42rem;
  max-height: min(60vh, 34rem);
  overflow: auto;
  padding-right: 0.12rem;
  position: relative;
  z-index: 1;
}

.search-modal-empty {
  padding: 0.75rem 0.85rem;
  border: 1px dashed #c6d5e7;
  border-radius: 10px;
  background: #f8fbff;
}

.search-modal-entry,
.preview-sidebar-finder-entry {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: 0.14rem;
  text-align: left;
  border: 1px solid #d7e2ef;
  border-radius: 9px;
  background: #fff;
  color: var(--preview-text, #15212e);
  padding: 0.48rem 0.55rem;
  cursor: pointer;
}

.search-modal-entry:hover,
.search-modal-entry:focus-visible,
.preview-sidebar-finder-entry:hover,
.preview-sidebar-finder-entry:focus-visible {
  border-color: #c0d4ea;
  background: #f7fbff;
  outline: none;
}

.search-modal-entry-lesson,
.preview-sidebar-finder-entry-lesson {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--preview-muted, #496078);
}

.search-modal-entry-type,
.preview-sidebar-finder-entry-type {
  display: block;
  width: 100%;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.search-modal-entry-preview,
.preview-sidebar-finder-entry-preview {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  color: #3f5368;
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: anywhere;
}

.search-modal-entry-preview mark,
.preview-sidebar-finder-entry-preview mark {
  padding: 0 0.12rem;
  border-radius: 3px;
  background: #fff1a6;
  color: #102030;
}

body[data-color-mode="dark"] #course-search-modal,
body[data-color-mode="dark"] #preview-search-modal {
  background: rgba(6, 11, 18, 0.72);
}

body[data-color-mode="dark"] .search-modal-empty {
  background: #121b26;
  border-color: #314356;
  color: #cdd8e5;
}

body[data-color-mode="dark"] .search-modal-entry,
body[data-color-mode="dark"] .preview-sidebar-finder-entry {
  background: #1a2532;
  border-color: #304154;
  color: #edf3fb;
}

body[data-color-mode="dark"] .search-modal-entry:hover,
body[data-color-mode="dark"] .search-modal-entry:focus-visible,
body[data-color-mode="dark"] .preview-sidebar-finder-entry:hover,
body[data-color-mode="dark"] .preview-sidebar-finder-entry:focus-visible {
  background: #223142;
  border-color: #49627e;
}

body[data-color-mode="dark"] .search-modal-entry-lesson,
body[data-color-mode="dark"] .preview-sidebar-finder-entry-lesson {
  color: #90abca;
}

body[data-color-mode="dark"] .search-modal-entry-type,
body[data-color-mode="dark"] .preview-sidebar-finder-entry-type {
  color: #edf3fb;
}

body[data-color-mode="dark"] .search-modal-entry-preview,
body[data-color-mode="dark"] .preview-sidebar-finder-entry-preview,
body[data-color-mode="dark"] .search-modal-meta {
  color: #c9d7e7;
}

body[data-color-mode="dark"] .search-modal-entry-preview mark,
body[data-color-mode="dark"] .preview-sidebar-finder-entry-preview mark {
  background: #6b5615;
  color: #fff6cf;
}

.preview-sidebar-nav-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--preview-text, #15212e);
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.22;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.preview-sidebar-nav-btn:disabled {
  opacity: 1;
  color: #42596f;
  background: #eef4fa;
  border-color: #d3dfec;
  cursor: not-allowed;
}

.preview-sidebar-nav-move {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.16rem;
}

.preview-sidebar-nav-move-btn {
  appearance: none;
  border: 1px solid #d0deec;
  border-radius: 7px;
  background: #fff;
  color: #3f5368;
  min-width: 1.34rem;
  min-height: 1.34rem;
  padding: 0.03rem 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.preview-sidebar-nav-move-btn:hover,
.preview-sidebar-nav-move-btn:focus-visible {
  border-color: #b9cfe7;
  background: #f4f8fd;
  color: #1f5d9c;
  outline: none;
}

.preview-sidebar-nav-move-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.preview-sidebar-nav-row.has-controls .preview-sidebar-nav-move {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}

.preview-sidebar-nav-row.has-controls:hover .preview-sidebar-nav-move,
.preview-sidebar-nav-row.has-controls:focus-within .preview-sidebar-nav-move {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.preview-sidebar-nav-btn:hover,
.preview-sidebar-nav-btn:focus-visible {
  border-color: #c7d7ea;
  background: #f4f8fd;
  outline: none;
}

.preview-sidebar-nav-btn.is-active {
  border-color: var(--preview-accent, #1f5d9c);
  background: rgba(31, 93, 156, 0.12);
  color: var(--preview-text, #15212e);
  box-shadow: inset 3px 0 0 var(--preview-accent, #1f5d9c), 0 0 0 1px rgba(31, 93, 156, 0.08);
  font-weight: 700;
}

.preview-shell.has-lesson-sidebar .preview-content {
  max-width: none;
  margin: 0;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar {
  padding: 0.7rem 0.45rem;
  overflow: hidden;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-header-shell {
  padding: 0;
  margin-bottom: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-title-row {
  display: block;
  width: auto;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-label,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-title-actions .preview-sidebar-add-btn,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-title-actions .preview-sidebar-delete-btn,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-title-actions .preview-sidebar-duplicate-btn,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-tools .preview-lesson-action:not(.preview-sidebar-toggle),
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-tools .preview-sidebar-search-btn,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-lesson-options,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-actions,
.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-nav {
  display: none;
}

.preview-shell.has-lesson-sidebar.preview-shell-sidebar-collapsed .preview-sidebar-title-actions {
  display: inline-flex;
  justify-content: center;
  width: auto;
  margin: 0 auto;
  gap: 0;
}

.preview-lesson {
  border: 1px solid var(--preview-border, #d8e2ef);
  border-radius: calc(var(--preview-block-radius, 12px) + var(--preview-global-lesson-radius, 0px));
  padding: calc(var(--preview-block-padding, 16px) + var(--preview-global-lesson-padding, 0px));
  margin-bottom: 0.9rem;
  background: var(--preview-surface-bg, #fff);
  color: var(--preview-lesson-text, var(--preview-text, #15212e));
  scroll-margin-top: 9rem;
}

.preview-lesson > h2 {
  margin-top: 0;
  font-family: var(--preview-heading-font-family, "Segoe UI", Tahoma, sans-serif);
  font-size: calc(var(--preview-heading-font-size, 22px) * 0.88);
}

.preview-lesson-title {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.preview-lesson-title-prefix {
  flex: 0 0 auto;
}

.preview-lesson-title-text {
  min-width: 3rem;
}

.preview-lesson-direct-edit {
  display: inline-block;
  outline: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.08rem 0.22rem;
  cursor: text;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.preview-lesson-direct-edit:hover {
  border-color: rgba(199, 215, 234, 0.96);
  background: rgba(244, 248, 253, 0.72);
}

.preview-lesson-direct-edit:focus {
  border-color: rgba(31, 93, 156, 0.38);
  background: rgba(244, 248, 253, 0.92);
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.12);
}

.preview-block {
  border-top: 1px solid var(--preview-border, #d8e2ef);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.preview-block.preview-block-intrinsic-surface {
  border-top: 0;
  padding-top: 0;
}

.preview-block-editable {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.preview-block-editable .builder-overlay-object {
  cursor: pointer;
}

.preview-paragraph-authoring {
  position: relative;
  isolation: isolate;
}

.preview-paragraph-authoring-stage {
  min-height: 0;
  padding-top: 0;
  transition: padding-top 140ms ease;
}

.preview-block-editable > .preview-text-stack,
.preview-block-editable > .preview-list-wrap,
.preview-block-editable > .preview-definition,
.preview-block-editable > .preview-statement,
.preview-block-editable > .preview-quote,
.preview-block-editable > .preview-callout,
.preview-block-editable > .preview-glossary {
  min-height: 0;
}

.preview-paragraph-authoring.is-preview-authoring-open > .preview-paragraph-authoring-stage {
  padding-top: 3.45rem;
}

.preview-builder-meta {
  position: absolute;
  top: -0.11rem;
  left: 0.35rem;
  transform: translateY(-100%);
  z-index: 2100;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(100%, 19rem);
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(215, 227, 240, 0.94);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 32, 51, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}

.preview-builder-meta-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: rgba(237, 244, 255, 0.92);
  color: #16314a;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.preview-builder-meta-btn {
  min-height: 1.8rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.preview-builder-meta-picker {
  display: none;
  align-items: center;
}

.preview-builder-meta-picker.is-open {
  display: inline-flex;
}

.preview-builder-meta-select {
  min-width: 8rem;
  max-width: 10.5rem;
  height: 1.9rem;
  font-size: 0.78rem;
}

.preview-paragraph-authoring > .preview-paragraph-builder-actions {
  position: absolute;
  top: -0.11rem;
  right: 0.35rem;
  transform: translateY(-100%);
  z-index: 2100;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  max-width: min(100%, 32rem);
  padding: 0.3rem;
  border: 1px solid rgba(215, 227, 240, 0.94);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 32, 51, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-toolbar {
  position: absolute;
  top: -0.11rem;
  left: 50%;
  right: auto;
  transform: translate(-50%, -100%);
  z-index: 2101;
  justify-content: center;
  border: 1px solid rgba(215, 227, 240, 0.94);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 32, 51, 0.08);
  padding: 0.35rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: max-content;
  max-width: calc(100% - 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel {
  position: fixed;
  top: 10.6rem;
  right: 1.25rem;
  left: auto;
  z-index: 2605;
  width: min(860px, calc(100vw - 2rem));
  max-height: min(76vh, 860px);
  overflow: auto;
  border: 1px solid rgba(210, 223, 238, 0.96);
  border-radius: 14px;
  background: #f6f8fb;
  box-shadow: 0 22px 44px rgba(15, 32, 51, 0.16);
  padding: 0.12rem;
  overscroll-behavior: contain;
  contain: paint;
}

.preview-header {
  isolation: isolate;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .item-list {
  gap: 0.45rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .item-card,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .theme-card,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .style-box,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .gradient-editor,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .builder-background-group-box {
  padding: 0.45rem;
  gap: 0.35rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .field-hint {
  font-size: 0.72rem;
  line-height: 1.28;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .style-grid,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .quote-editor-select-grid,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .quote-editor-color-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0.45rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-quick-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.5rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-quick-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 0.4rem;
}


.preview-paragraph-authoring > .preview-paragraph-authoring-panel .preset-thumbnails {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 0.3rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .preset-thumb {
  padding: 0.26rem;
  gap: 0.22rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .preset-thumb-preview {
  min-height: 1.2rem;
  padding: 0.16rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .preset-thumb-label {
  font-size: 0.68rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .style-surface-thumb {
  min-height: 2.25rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .style-box {
  padding: 0.55rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-layout-thumb,
.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-thumb {
  gap: 0.24rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-layout-line {
  height: 0.26rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-layout-line.is-heading {
  height: 0.34rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-title {
  font-size: 0.68rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-body {
  font-size: 0.72rem;
  line-height: 1.35;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-body.is-lead {
  font-size: 0.82rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-body.is-fine-print {
  font-size: 0.62rem;
}

.preview-paragraph-authoring > .preview-paragraph-authoring-panel .paragraph-workspace-preset-thumb.is-supporting-note {
  padding: 0.32rem;
  border-radius: 0.6rem;
}

.preview-paragraph-authoring.is-preview-authoring-open {
  z-index: 1400;
}

.preview-block-editable:hover,
.preview-block-editable:focus-within {
  z-index: 1400;
}

.preview-block-editable.is-preview-meta-open,
.preview-block-editable.is-preview-authoring-open {
  z-index: 1400;
}

.preview-paragraph-authoring:hover > .preview-paragraph-authoring-toolbar,
.preview-paragraph-authoring:focus-within > .preview-paragraph-authoring-toolbar,
.preview-paragraph-authoring.is-preview-authoring-open > .preview-paragraph-authoring-toolbar,
.preview-block-editable:hover > .preview-builder-meta,
.preview-block-editable:focus-within > .preview-builder-meta,
.preview-block-editable.is-preview-meta-open > .preview-builder-meta,
.preview-block-editable.is-preview-authoring-open > .preview-builder-meta,
.preview-paragraph-authoring:hover > .preview-paragraph-builder-actions,
.preview-paragraph-authoring:focus-within > .preview-paragraph-builder-actions,
.preview-paragraph-authoring.is-preview-authoring-open > .preview-paragraph-builder-actions {
  opacity: 1;
  pointer-events: auto;
}

.preview-edit-jump {
  position: absolute;
  top: 0.2rem;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(47, 109, 180, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--preview-accent, #2f6db4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 32, 51, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  z-index: 4;
}

.preview-edit-jump svg {
  width: 0.8rem;
  height: 0.8rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-block-editable:hover .preview-edit-jump,
.preview-block-editable:focus-within .preview-edit-jump {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.preview-edit-jump:hover,
.preview-edit-jump:focus-visible {
  border-color: rgba(47, 109, 180, 0.45);
  box-shadow: 0 10px 24px rgba(15, 32, 51, 0.18);
  outline: none;
}

.builder-overlay-host {
  position: relative;
  overflow: visible;
}

.builder-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.builder-overlay-layer-behind {
  z-index: 1;
}

.builder-overlay-layer-above {
  z-index: 4;
}

.builder-overlay-object {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  filter: drop-shadow(0 10px 20px rgba(15, 32, 51, 0.16));
  will-change: transform, opacity;
  animation-duration: var(--overlay-duration, 5.4s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--overlay-iterations, infinite);
  animation-fill-mode: both;
}

.builder-overlay-object-shape-stateful {
  cursor: pointer;
}

.builder-overlay-object-toggle-stateful {
  cursor: pointer;
}

.builder-overlay-object[data-overlay-static="true"],
.builder-overlay-object[data-overlay-trigger="none"] {
  animation: none !important;
}

.builder-overlay-object[data-overlay-trigger="hover"] {
  animation-play-state: paused;
}

.builder-overlay-host:hover .builder-overlay-object[data-overlay-trigger="hover"] {
  animation-play-state: running;
}

.preview-stage-scroll-motion .preview-block:not(.is-preview-visible) .builder-overlay-object[data-overlay-trigger="auto"] {
  animation-play-state: paused !important;
}

.preview-stage-scroll-motion .preview-block[data-attention-replay="true"]:not(.is-preview-visible) .builder-overlay-object[data-overlay-trigger="auto"] {
  animation: none !important;
}

.builder-overlay-symbol,
.builder-overlay-image,
.builder-overlay-shape,
.builder-overlay-toggle,
.builder-overlay-slider,
.builder-overlay-input-text,
.builder-overlay-dial,
.builder-overlay-shape-label,
.builder-overlay-object svg {
  width: 100%;
  height: 100%;
  display: block;
}

.builder-overlay-image {
  object-fit: contain;
}

.builder-overlay-toggle {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(3.2rem, 4.2rem) 1fr;
  align-items: center;
  gap: 0.55rem;
  border-radius: 999px;
  border: 2px solid var(--maven-toggle-border, #8fa0b8);
  background: var(--maven-toggle-bg, #e7edf5);
  color: var(--maven-toggle-text, #17314c);
  padding: 0.38rem 0.55rem 0.38rem 0.42rem;
  box-sizing: border-box;
}

.builder-overlay-toggle-track {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.builder-overlay-toggle-knob {
  grid-column: 1;
  grid-row: 1;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--maven-toggle-knob, #ffffff);
  box-shadow: 0 4px 10px rgba(12, 22, 38, 0.2);
  transform: translateX(0);
  transition: transform 160ms ease;
}

.builder-overlay-object.is-on .builder-overlay-toggle-knob {
  transform: translateX(1.75rem);
}

.builder-overlay-toggle-label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

.builder-overlay-slider {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
  border-radius: 18px;
  border: 2px solid var(--maven-slider-border, #8fa0b8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--maven-slider-track, #d7e3f0) 78%, white 22%), var(--maven-slider-track, #d7e3f0));
  color: var(--maven-slider-text, #17314c);
}

.builder-overlay-slider-label,
.builder-overlay-slider-min,
.builder-overlay-slider-max,
.builder-overlay-slider-readout {
  font-size: 0.74rem;
  line-height: 1.15;
}

.builder-overlay-slider-label,
.builder-overlay-slider-readout {
  font-weight: 700;
}

.builder-overlay-slider-input {
  width: 100%;
  margin: 0;
  accent-color: var(--maven-slider-fill, #2f6db4);
}

.builder-overlay-slider-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.35rem;
}

.builder-overlay-slider-max {
  text-align: right;
}

.builder-overlay-slider-readout {
  justify-self: center;
}

.builder-overlay-dial {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.4rem;
  padding: 0.45rem;
  box-sizing: border-box;
  border-radius: 24px;
  border: 2px solid var(--maven-dial-border, #8fa0b8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--maven-dial-track, #d7e3f0) 70%, white 30%), var(--maven-dial-track, #d7e3f0));
  color: var(--maven-dial-text, #17314c);
}

.builder-overlay-dial-label {
  font-size: 0.74rem;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}

.builder-overlay-dial-face {
  position: relative;
  width: min(100%, 92px);
  height: min(100%, 92px);
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--maven-dial-track, #d7e3f0) 35%, white 65%);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--maven-dial-track, #d7e3f0) 70%, white 30%);
}

.builder-overlay-dial-ring {
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 6px solid var(--maven-dial-fill, #2f6db4);
  opacity: 0.28;
}

.builder-overlay-dial-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 34px;
  margin-left: -3px;
  margin-top: -30px;
  border-radius: 999px;
  background: var(--maven-dial-fill, #2f6db4);
  transform-origin: 50% 30px;
  transform: rotate(var(--maven-dial-angle, -135deg));
  box-shadow: 0 2px 8px rgba(12, 22, 38, 0.22);
}

.builder-overlay-dial-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 999px;
  background: var(--maven-dial-knob, #ffffff);
  border: 2px solid var(--maven-dial-fill, #2f6db4);
  box-sizing: border-box;
}

.builder-overlay-dial-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.builder-overlay-dial-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.builder-overlay-input-text {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  box-sizing: border-box;
  border-radius: 18px;
  border: 2px solid var(--maven-input-border, #8fa0b8);
  background: var(--maven-input-bg, #ffffff);
  color: var(--maven-input-text, #17314c);
  box-shadow: 0 8px 18px rgba(12, 22, 38, 0.08);
}

.builder-overlay-input-text-label {
  font-size: 0.73rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--maven-input-label, #17314c);
}

.builder-overlay-input-text-field {
  width: 100%;
  min-width: 0;
  height: 2rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--maven-input-border, #8fa0b8) 82%, white 18%);
  background: color-mix(in srgb, var(--maven-input-bg, #ffffff) 88%, white 12%);
  color: var(--maven-input-text, #17314c);
  padding: 0.35rem 0.55rem;
  font: inherit;
  box-sizing: border-box;
}

.builder-overlay-input-text-field::placeholder {
  color: var(--maven-input-placeholder, #7c8aa5);
}

.builder-overlay-shape {
  box-sizing: border-box;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.45rem 0.55rem;
  overflow: hidden;
}

.builder-overlay-shape-rectangle {
  border-radius: 6px;
}

.builder-overlay-shape-rounded_rectangle {
  border-radius: 18px;
}

.builder-overlay-shape-circle,
.builder-overlay-shape-oval {
  border-radius: 999px;
}

.builder-overlay-shape-line,
.builder-overlay-shape-arrow {
  border: 0;
  background: transparent !important;
  padding: 0;
}

.builder-overlay-shape-merge_polygon {
  border: 0;
  background: transparent !important;
  padding: 0;
  overflow: visible;
}

.builder-overlay-shape-merge-polygon-core {
  vector-effect: non-scaling-stroke;
}

.builder-overlay-shape-line-core {
  width: 100%;
  flex: 0 0 auto;
}

.builder-overlay-shape-arrow {
  gap: 0.2rem;
}

.builder-overlay-shape-arrow-shaft {
  flex: 1 1 auto;
}

.builder-overlay-shape-arrow-head {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 18px solid #2f6db4;
  flex: 0 0 auto;
}

.builder-overlay-shape-callout {
  border: 0;
  background: transparent !important;
  padding: 0;
  overflow: visible;
}

.builder-overlay-shape-callout-bubble {
  position: absolute;
  inset: 0.1rem;
  border-style: solid;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem 0.7rem;
  overflow: hidden;
}

.builder-overlay-shape-callout-pointer {
  position: absolute;
  width: 1.05rem;
  height: 1.05rem;
  border-style: solid;
  transform: rotate(45deg);
}

.builder-overlay-shape-callout-pointer-bottom {
  left: calc(50% - 0.525rem);
  bottom: -0.28rem;
  border-top: 0;
  border-left: 0;
}

.builder-overlay-shape-callout-pointer-top {
  left: calc(50% - 0.525rem);
  top: -0.28rem;
  border-right: 0;
  border-bottom: 0;
}

.builder-overlay-shape-callout-pointer-left {
  left: -0.28rem;
  top: calc(50% - 0.525rem);
  border-top: 0;
  border-right: 0;
}

.builder-overlay-shape-callout-pointer-right {
  right: -0.28rem;
  top: calc(50% - 0.525rem);
  border-left: 0;
  border-bottom: 0;
}

.builder-overlay-shape-label {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.overlay-shape-state-sample-wrap {
  position: relative;
  min-height: 8rem;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  overflow: hidden;
}

.overlay-shape-state-sample-wrap .overlay-shape-state-sample {
  pointer-events: none;
}

.builder-overlay-path-editor-wrap {
  display: grid;
  gap: 0.45rem;
}

.builder-overlay-path-editor {
  position: relative;
  min-height: 190px;
  border: 1px dashed #b7cade;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(236, 244, 252, 0.96) 100%);
  cursor: crosshair;
  overflow: hidden;
}

.builder-overlay-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.builder-overlay-path-grid {
  fill: none;
  stroke: rgba(89, 123, 158, 0.18);
  stroke-width: 0.8;
  stroke-dasharray: 1.6 2.4;
}

.builder-overlay-path-line {
  fill: none;
  stroke: #2f6db4;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.builder-overlay-path-point {
  fill: #ffffff;
  stroke: #2f6db4;
  stroke-width: 1.3;
}

.builder-overlay-path-point.is-start {
  fill: #2f6db4;
  stroke: #ffffff;
  stroke-width: 1;
}

.builder-overlay-path-index {
  fill: #1f4f84;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.builder-overlay-path-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.builder-overlay-path-status {
  font-size: 0.8rem;
  color: #35506c;
}

.builder-overlay-object[data-overlay-path="float"] {
  animation-name: builder-overlay-float;
}

.builder-overlay-object[data-overlay-path="sweep"] {
  animation-name: builder-overlay-sweep;
}

.builder-overlay-object[data-overlay-path="arc"] {
  animation-name: builder-overlay-arc;
}

.builder-overlay-object[data-overlay-path="pulse"] {
  animation-name: builder-overlay-pulse;
}

.builder-overlay-object[data-overlay-path="orbit"] {
  animation-name: builder-overlay-orbit;
}

.builder-overlay-object[data-overlay-path="drift"] {
  animation-name: builder-overlay-drift;
}

@keyframes builder-overlay-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--overlay-rotation, 0deg)); }
  50% { transform: translate(-50%, calc(-50% - 12px)) rotate(var(--overlay-rotation, 0deg)); }
}

@keyframes builder-overlay-sweep {
  0% { transform: translate(calc(-50% - 24px), -50%) rotate(var(--overlay-rotation, 0deg)); }
  50% { transform: translate(calc(-50% + 26px), -50%) rotate(var(--overlay-rotation, 0deg)); }
  100% { transform: translate(calc(-50% - 24px), -50%) rotate(var(--overlay-rotation, 0deg)); }
}

@keyframes builder-overlay-arc {
  0% { transform: translate(calc(-50% - 22px), calc(-50% + 10px)) rotate(var(--overlay-rotation, 0deg)); }
  50% { transform: translate(-50%, calc(-50% - 18px)) rotate(calc(var(--overlay-rotation, 0deg) - 8deg)); }
  100% { transform: translate(calc(-50% + 24px), calc(-50% + 8px)) rotate(var(--overlay-rotation, 0deg)); }
}

@keyframes builder-overlay-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(var(--overlay-rotation, 0deg)); opacity: inherit; }
  50% { transform: translate(-50%, -50%) scale(1.12) rotate(var(--overlay-rotation, 0deg)); opacity: 1; }
}

@keyframes builder-overlay-orbit {
  0% { transform: translate(calc(-50% - 12px), calc(-50% - 10px)) rotate(var(--overlay-rotation, 0deg)); }
  25% { transform: translate(calc(-50% + 10px), calc(-50% - 18px)) rotate(calc(var(--overlay-rotation, 0deg) + 8deg)); }
  50% { transform: translate(calc(-50% + 20px), calc(-50% + 6px)) rotate(calc(var(--overlay-rotation, 0deg) + 16deg)); }
  75% { transform: translate(calc(-50% - 6px), calc(-50% + 18px)) rotate(calc(var(--overlay-rotation, 0deg) + 8deg)); }
  100% { transform: translate(calc(-50% - 12px), calc(-50% - 10px)) rotate(var(--overlay-rotation, 0deg)); }
}

@keyframes builder-overlay-drift {
  0% { transform: translate(calc(-50% - 18px), calc(-50% + 20px)) rotate(calc(var(--overlay-rotation, 0deg) - 6deg)); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(calc(-50% + 10px), calc(-50% - 12px)) rotate(var(--overlay-rotation, 0deg)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-overlay-object {
    animation: none !important;
    transform: translate(-50%, -50%) rotate(var(--overlay-rotation, 0deg)) !important;
  }
}

[data-reduced-motion="true"] .builder-overlay-object {
  animation: none !important;
  transform: translate(-50%, -50%) rotate(var(--overlay-rotation, 0deg)) !important;
}

body[data-color-mode="dark"] .builder-overlay-path-editor {
  border-color: rgba(132, 167, 204, 0.35);
  background: linear-gradient(180deg, rgba(24, 36, 51, 0.96) 0%, rgba(16, 26, 38, 0.98) 100%);
}

body[data-color-mode="dark"] .builder-overlay-path-grid {
  stroke: rgba(148, 182, 219, 0.18);
}

body[data-color-mode="dark"] .builder-overlay-path-line {
  stroke: #6eb2ff;
}

body[data-color-mode="dark"] .builder-overlay-path-point {
  fill: #102131;
  stroke: #6eb2ff;
}

body[data-color-mode="dark"] .builder-overlay-path-point.is-start {
  fill: #6eb2ff;
  stroke: #102131;
}

body[data-color-mode="dark"] .builder-overlay-path-index {
  fill: #d4e5f6;
}

body[data-color-mode="dark"] .builder-overlay-path-status {
  color: #d4e5f6;
}

.preview-rich p,
.preview-rich ul,
.preview-rich ol {
  margin-top: 0;
}

.preview-media,
.preview-embed,
.preview-labeled-image {
  width: 100%;
  border: 1px solid #c5d7ec;
  border-radius: 8px;
  background: #0f1f32;
}

.preview-media {
  max-height: 360px;
  object-fit: contain;
}

.preview-embed {
  display: block;
  min-height: 360px;
  aspect-ratio: 16 / 9;
}

.preview-caption {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--preview-muted, #496078);
}

.preview-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 1px solid var(--maven-button-border, var(--preview-accent, #2f6db4));
  background: var(--maven-button-bg, var(--preview-accent, #2f6db4));
  color: var(--maven-button-text, #fff);
  border-radius: var(--maven-button-radius, 8px);
  text-decoration: none;
  padding: 0.4rem 0.72rem;
  transition: transform 120ms ease, box-shadow 160ms ease, filter 120ms ease;
}

.preview-completion-action {
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}

.preview-btn-sm {
  font-size: 0.82rem;
  padding: 0.32rem 0.6rem;
}

.preview-btn-lg {
  font-size: 1rem;
  padding: 0.55rem 1rem;
}

.preview-btn-outline {
  background: var(--maven-button-bg, transparent);
  color: var(--maven-button-text, var(--preview-accent, #2f6db4));
  border-color: var(--maven-button-border, var(--preview-accent, #2f6db4));
}

.preview-btn-ghost {
  background: var(--maven-button-bg, transparent);
  color: var(--maven-button-text, var(--preview-accent, #2f6db4));
  border-color: var(--maven-button-border, transparent);
}

.preview-btn-soft {
  background: var(--maven-button-bg, rgba(47, 109, 180, 0.12));
  color: var(--maven-button-text, #123657);
  border-color: var(--maven-button-border, rgba(47, 109, 180, 0.35));
}

.preview-btn-gradient {
  border-color: var(--maven-button-border, transparent);
  background: var(--maven-button-bg, linear-gradient(135deg, var(--preview-accent, #2f6db4) 0%, #3f93df 100%));
  color: var(--maven-button-text, #fff);
}

.preview-btn-hover-lift:hover {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  transform: translateY(-2px);
}

.preview-btn-hover-glow:hover {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  box-shadow: 0 0 0 3px rgba(47, 109, 180, 0.2), 0 10px 18px rgba(20, 33, 51, 0.2);
}

.preview-btn-hover-darken:hover {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  filter: brightness(0.9);
}

.preview-btn-press-shrink:active {
  transform: scale(0.98);
}

.preview-btn-press-inset:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.28);
}

.preview-button-state-hover.preview-button-state-hover-lift {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  transform: translateY(-2px);
}

.preview-button-state-hover.preview-button-state-hover-glow {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  box-shadow: 0 0 0 3px rgba(47, 109, 180, 0.2), 0 10px 18px rgba(20, 33, 51, 0.2);
}

.preview-button-state-hover.preview-button-state-hover-darken {
  background: var(--maven-button-hover-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-hover-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-hover-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-hover-radius, var(--maven-button-radius, 8px));
  filter: brightness(0.9);
}

.preview-button-state-press.preview-button-state-press-shrink {
  transform: scale(0.98);
}

.preview-button-state-press.preview-button-state-press-inset {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.28);
}

.preview-button-state-selected {
  background: var(--maven-button-selected-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-selected-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-selected-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-selected-radius, var(--maven-button-radius, 8px));
  box-shadow: 0 0 0 3px rgba(31, 93, 156, 0.18), 0 14px 26px rgba(19, 47, 74, 0.16);
  transform: translateY(-1px);
}

.preview-button-state-visited,
.preview-button-state-used {
  background: var(--maven-button-visited-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-visited-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-visited-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-visited-radius, var(--maven-button-radius, 8px));
  opacity: 0.92;
  box-shadow: 0 0 0 3px rgba(42, 143, 106, 0.14), 0 12px 22px rgba(17, 49, 76, 0.12);
}

.preview-button-state-disabled {
  background: var(--maven-button-disabled-bg, var(--maven-button-bg, var(--preview-accent, #2f6db4)));
  color: var(--maven-button-disabled-text, var(--maven-button-text, #fff));
  border-color: var(--maven-button-disabled-border, var(--maven-button-border, var(--preview-accent, #2f6db4)));
  border-radius: var(--maven-button-disabled-radius, var(--maven-button-radius, 8px));
  opacity: 0.48;
  filter: saturate(0.35);
  pointer-events: none;
  cursor: default;
}

.preview-button-state-sample {
  pointer-events: none;
}

.button-state-editor {
  display: grid;
  gap: 0.7rem;
}

.button-state-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

.button-state-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.8rem 0.85rem;
  border: 1px solid #c9d9ec;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: #18324d;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.button-state-card:hover {
  border-color: #7aa6d7;
  box-shadow: 0 10px 22px rgba(31, 93, 156, 0.08);
  transform: translateY(-1px);
}

.button-state-card.is-active {
  border-color: #1f5d9c;
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.12), 0 16px 28px rgba(31, 93, 156, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
}

@media (max-width: 1080px) {
  .button-state-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.button-state-card-head {
  display: grid;
  gap: 0.2rem;
}

.button-state-card-title {
  font-size: 0.95rem;
}

.button-state-card-note {
  color: #57718f;
  font-size: 0.82rem;
  line-height: 1.3;
}

.button-state-card-sample {
  justify-self: start;
}

.button-state-editor-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.button-state-editor-tab {
  min-width: 5.2rem;
}

.button-state-editor-tab.is-active {
  background: #1f5d9c;
  border-color: #1f5d9c;
  color: #ffffff;
}

.button-state-editor-pane {
  display: grid;
  gap: 0.65rem;
}

.button-state-editor-surface {
  padding: 0.85rem 0.95rem;
  border: 1px solid #d6e3f1;
  border-radius: 16px;
  background: #ffffff;
}

.button-state-editor-state-preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3rem;
}

.button-state-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.button-state-color-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid #d6e3f1;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.button-state-color-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.button-state-color-card-label {
  color: #18324d;
  font-size: 0.9rem;
}

.button-state-color-card-value {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: #eef4fb;
  color: #57718f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.button-state-color-card-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.button-state-color-card-swatch {
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid #c9d9ec;
  border-radius: 14px;
  background: #1f5d9c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.button-state-color-card-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.button-state-color-card-picker {
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
}

.button-state-color-card-hex {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

.button-state-color-card-hex.is-invalid {
  border-color: #d16a5b;
  box-shadow: 0 0 0 2px rgba(209, 106, 91, 0.12);
  background: #fff6f4;
}

.button-state-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.button-state-color-preset {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgba(24, 50, 77, 0.16);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.button-state-color-preset.is-active {
  border-color: #1f5d9c;
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.button-state-color-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.button-state-color-action {
  min-height: 2rem;
  padding-inline: 0.72rem;
  font-size: 0.78rem;
}

.button-state-editor-state-note {
  margin-top: 0.2rem;
}

@media (max-width: 980px) {
  .button-state-color-grid {
    grid-template-columns: 1fr;
  }
}

.timeline-state-sample {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--timeline-point-detail-border, #d7e3f0);
  border-radius: 14px;
  background: var(--timeline-point-detail-bg, #ffffff);
}

.timeline-state-sample .preview-timeline-milestone-marker {
  width: 2.25rem;
  height: 2.25rem;
}

.preview-btn-full {
  width: 100%;
  text-align: center;
}

.preview-btn-style-editorial-pill {
  box-shadow: 0 14px 28px rgba(31, 93, 156, 0.22);
  letter-spacing: 0.01em;
}

.preview-btn-style-glass-chip {
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(12, 24, 52, 0.22);
}

.preview-btn-style-signal-outline {
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.preview-btn-style-halo-gradient {
  box-shadow: 0 0 0 4px rgba(63, 147, 223, 0.16), 0 18px 34px rgba(31, 93, 156, 0.3);
  background: linear-gradient(135deg, #2f6db4 0%, #60a5fa 48%, #8b5cf6 100%);
}

.preview-btn-style-ribbon-fold {
  position: relative;
  padding-inline: 0.95rem 1.15rem;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 6% 50%);
  box-shadow: 0 12px 22px rgba(17, 31, 56, 0.22);
}

.preview-btn-style-midnight-beacon {
  box-shadow: 0 16px 30px rgba(4, 10, 22, 0.45);
  background: linear-gradient(180deg, #1a2640 0%, #0f1728 100%);
}

.preview-btn-style-sunrise-glow {
  box-shadow: 0 0 0 4px rgba(255, 179, 102, 0.2), 0 18px 30px rgba(242, 125, 73, 0.28);
  background: linear-gradient(135deg, #f27d49 0%, #f7b267 100%);
}

.preview-btn-style-mono-tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.preview-btn-style-soft-orbit {
  box-shadow: 0 0 0 6px rgba(31, 93, 156, 0.08), 0 12px 26px rgba(15, 73, 130, 0.14);
}

.preview-btn-style-stacked-shadow {
  box-shadow: 0 4px 0 rgba(17, 49, 92, 0.9), 0 16px 26px rgba(22, 63, 114, 0.24);
  transform: translateY(-1px);
}

.preview-btn-style-ticket-stub {
  border-style: dashed;
  border-width: 2px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}

.preview-btn-style-neon-frame {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7), 0 0 18px rgba(56, 189, 248, 0.32), inset 0 0 18px rgba(14, 165, 233, 0.12);
  text-shadow: 0 0 10px rgba(147, 197, 253, 0.35);
}

.preview-btn-style-floating-card {
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
  border-width: 1px;
}

.preview-btn-style-cut-corner {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 12px 24px rgba(18, 59, 99, 0.24);
}

.preview-btn-style-spotlight-chip {
  box-shadow: 0 0 0 5px rgba(251, 146, 60, 0.12), 0 12px 20px rgba(154, 52, 18, 0.12);
}

.preview-btn-style-double-underline {
  padding-bottom: 0.52rem;
  border-bottom-width: 4px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow: inset 0 -8px 0 rgba(15, 76, 129, 0.08);
  border-radius: 0;
}

.preview-btn-style-brass-plate {
  background: linear-gradient(135deg, #fde68a 0%, #facc15 38%, #fef3c7 100%);
  border-color: #d4a017;
  box-shadow: 0 12px 24px rgba(161, 98, 7, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.preview-btn-style-candy-stripe {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) 20%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.16) 40%, rgba(255, 255, 255, 0.16) 60%, transparent 60%, transparent 80%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  box-shadow: 0 14px 26px rgba(190, 24, 93, 0.26);
}

.preview-btn-style-compass-pill {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14), 0 14px 28px rgba(29, 78, 216, 0.14);
}

.preview-btn-style-ink-brush {
  position: relative;
  overflow: hidden;
}

.preview-btn-style-ink-brush::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 38%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 9%, transparent 10%),
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 8%, transparent 9%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, transparent 28%, rgba(255, 255, 255, 0.1) 54%, transparent 78%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.button-label {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.button-icon {
  font-size: 0.84em;
  opacity: 0.92;
}

.button-icon-image {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
}

.power-button-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #35506c;
  font-size: 0.92rem;
}

.power-button-inline-check input {
  margin: 0;
}

.power-button-note {
  margin-top: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  color: #17314c;
  box-shadow: 0 10px 24px rgba(17, 49, 76, 0.08);
}

.power-button-note > :first-child {
  margin-top: 0;
}

.power-button-note > :last-child {
  margin-bottom: 0;
}

.power-button-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.power-button-status-copy {
  flex: 1 1 14rem;
}

.power-button-status-action {
  flex: 0 0 auto;
}

.power-button-status.is-error {
  border-color: rgba(187, 63, 63, 0.28);
  background: rgba(187, 63, 63, 0.08);
  color: #7f1d1d;
}

.power-button-hidden-target {
  display: none !important;
}

.power-button-source-hidden {
  display: none !important;
}

.power-button-used {
  opacity: 0.92;
}

.power-button-complete {
  box-shadow: 0 0 0 3px rgba(33, 116, 82, 0.18), 0 12px 24px rgba(17, 49, 76, 0.12);
  border-color: #2a8f6a !important;
}

.power-button-target-flash {
  animation: power-button-target-flash 1.15s ease;
}

@keyframes power-button-target-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 109, 180, 0);
  }
  25% {
    box-shadow: 0 0 0 5px rgba(47, 109, 180, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 109, 180, 0);
  }
}

.preview-media-frame {
  border: var(--media-frame-border-width, 1px) solid var(--media-frame-border, #d8e2ef);
  border-radius: var(--media-frame-radius, 12px);
  background: var(--media-frame-bg, #fff);
  padding: 0.55rem;
  box-shadow: 0 8px calc(var(--media-frame-shadow, 28) * 1px) rgba(9, 23, 38, 0.12);
  overflow: hidden;
}

.preview-media-frame .preview-media {
  margin: 0;
}

.preview-media-frame .preview-media-text-split-image {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 12px;
  object-fit: cover;
}

.preview-media-frame-device {
  border-radius: calc(var(--media-frame-radius, 12px) + 8px);
  border-width: 2px;
  padding: 0.7rem 0.7rem 1.1rem;
  background: linear-gradient(180deg, #0f1d2d, #13263b);
}

.preview-media-frame-polaroid {
  padding: 0.6rem 0.6rem 1.3rem;
  transform: rotate(var(--media-frame-tilt, -2deg));
}

.preview-media-frame-bordered {
  border-width: max(3px, var(--media-frame-border-width, 3px));
}

.preview-media-frame-shadow {
  border-color: transparent;
}

.preview-media-frame-rounded .preview-media {
  border-radius: calc(var(--media-frame-radius, 12px) + 10px);
}

.preview-media-frame-rounded .preview-media-text-split-image {
  border-radius: calc(var(--media-frame-radius, 12px) + 10px);
}

.preview-media-frame-wave_top {
  clip-path: polygon(0 10%, 7% 4%, 14% 9%, 22% 3%, 30% 8%, 38% 2%, 46% 7%, 54% 1%, 62% 7%, 70% 2%, 78% 8%, 86% 3%, 93% 9%, 100% 4%, 100% 100%, 0 100%);
}

.preview-media-frame-wave_bottom {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 93% 96%, 86% 91%, 78% 97%, 70% 92%, 62% 98%, 54% 93%, 46% 99%, 38% 93%, 30% 98%, 22% 92%, 14% 97%, 7% 91%, 0 96%);
}

.preview-media-frame-wave_both {
  clip-path: polygon(0 10%, 7% 4%, 14% 9%, 22% 3%, 30% 8%, 38% 2%, 46% 7%, 54% 1%, 62% 7%, 70% 2%, 78% 8%, 86% 3%, 93% 9%, 100% 4%, 100% 90%, 93% 96%, 86% 91%, 78% 97%, 70% 92%, 62% 98%, 54% 93%, 46% 99%, 38% 93%, 30% 98%, 22% 92%, 14% 97%, 7% 91%, 0 96%);
}

.preview-media-frame-arch {
  clip-path: polygon(0 18%, 4% 13%, 10% 8%, 18% 4%, 28% 1%, 40% 0, 60% 0, 72% 1%, 82% 4%, 90% 8%, 96% 13%, 100% 18%, 100% 100%, 0 100%);
}

.media-frame-thumb {
  min-height: 50px;
  display: grid;
  place-items: center;
}

.media-frame-thumb-shell {
  width: 100%;
  min-height: 46px;
  padding: 0.3rem;
  border-radius: 12px;
  border: 1px solid #d8e2ef;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(9, 23, 38, 0.08);
}

.media-frame-thumb-media {
  height: 100%;
  min-height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg, #dcecff 0%, #f7fbff 100%);
}

.media-frame-thumb-none .media-frame-thumb-shell {
  box-shadow: none;
  border-style: dashed;
}

.media-frame-thumb-device .media-frame-thumb-shell {
  background: linear-gradient(180deg, #0f1d2d, #13263b);
  border-width: 2px;
}

.media-frame-thumb-polaroid .media-frame-thumb-shell {
  transform: rotate(-4deg);
  padding-bottom: 0.75rem;
}

.media-frame-thumb-bordered .media-frame-thumb-shell {
  border-width: 3px;
}

.media-frame-thumb-shadow .media-frame-thumb-shell {
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(9, 23, 38, 0.16);
}

.media-frame-thumb-rounded .media-frame-thumb-media {
  border-radius: 16px;
}

.media-frame-thumb-wave_top .media-frame-thumb-shell {
  clip-path: polygon(0 10%, 12% 4%, 24% 9%, 36% 3%, 48% 8%, 60% 3%, 72% 8%, 84% 4%, 100% 8%, 100% 100%, 0 100%);
}

.media-frame-thumb-wave_bottom .media-frame-thumb-shell {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 84% 96%, 72% 91%, 60% 97%, 48% 92%, 36% 98%, 24% 92%, 12% 97%, 0 92%);
}

.media-frame-thumb-wave_both .media-frame-thumb-shell {
  clip-path: polygon(0 10%, 12% 4%, 24% 9%, 36% 3%, 48% 8%, 60% 3%, 72% 8%, 84% 4%, 100% 8%, 100% 90%, 84% 96%, 72% 91%, 60% 97%, 48% 92%, 36% 98%, 24% 92%, 12% 97%, 0 92%);
}

.media-frame-thumb-arch .media-frame-thumb-shell {
  clip-path: polygon(0 22%, 6% 14%, 14% 7%, 24% 2%, 38% 0, 62% 0, 76% 2%, 86% 7%, 94% 14%, 100% 22%, 100% 100%, 0 100%);
}

.preview-callout {
  --callout-accent: var(--preview-accent, #2f6db4);
  --callout-bg: #f9fbff;
  --callout-text: #16314a;
  --callout-border: var(--preview-border, #d8e2ef);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  border: 1px solid var(--callout-border);
  border-left-width: 6px;
  border-left-color: var(--callout-accent);
  border-radius: 10px;
  padding: 0.7rem;
  background: var(--callout-bg);
  color: var(--callout-text);
}

.preview-callout-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: var(--callout-accent);
  grid-area: icon;
}

.preview-callout-body {
  grid-area: body;
}

.preview-callout-body > * {
  color: inherit;
}

.preview-callout-body strong {
  display: block;
  margin-bottom: 0.2rem;
}

.preview-callout-media {
  grid-area: media;
  min-width: 0;
}

.preview-callout-media img {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.preview-callout-media-none {
  grid-template-areas: "icon body";
}

.preview-callout-media-right {
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 220px);
  grid-template-areas: "icon body media";
}

.preview-callout-media-left {
  grid-template-columns: minmax(120px, 220px) auto minmax(0, 1fr);
  grid-template-areas: "media icon body";
}

.preview-callout-media-top {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "media media"
    "icon body";
}

.preview-callout-media-top .preview-callout-media img {
  max-width: 100%;
}

.preview-callout-tip {
  --callout-accent: #2f6db4;
  --callout-bg: #f9fbff;
  --callout-text: #16314a;
  --callout-border: #d8e2ef;
}

.preview-callout-warning {
  --callout-accent: #d17b00;
  --callout-bg: #fff9ef;
  --callout-text: #5f3c00;
  --callout-border: #f1d19a;
}

.preview-callout-important {
  --callout-accent: #b43a2f;
  --callout-bg: #fff4f2;
  --callout-text: #62211c;
  --callout-border: #efc2bc;
}

.preview-callout-best_practice {
  --callout-accent: #19715f;
  --callout-bg: #f1fcf8;
  --callout-text: #13473e;
  --callout-border: #bde6d9;
}

.preview-callout-preset-soft_card {
  border-left-width: 0;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(20, 35, 61, 0.08);
  padding: 0.9rem;
}

.preview-callout-preset-soft_card .preview-callout-icon {
  border-radius: 14px;
}

.preview-callout-preset-editorial_band {
  border-left-width: 0;
  border-top: 4px solid var(--callout-accent);
  border-radius: 14px;
}

.preview-callout-preset-editorial_band .preview-callout-icon {
  border-radius: 8px;
}

.preview-callout-preset-glass_panel {
  border-left-width: 0;
  border-radius: 18px;
  box-shadow: 0 18px 32px rgba(26, 49, 78, 0.1);
}

.preview-callout-preset-glass_panel .preview-callout-icon {
  box-shadow: 0 8px 18px rgba(26, 49, 78, 0.18);
}

.preview-callout-preset-signal_strip {
  border-left-width: 10px;
  border-radius: 16px;
  padding: 0.9rem;
}

.preview-callout-preset-spotlight {
  border-left-width: 0;
  border-radius: 18px;
  box-shadow: 0 20px 34px rgba(8, 16, 31, 0.2);
}

.preview-callout-preset-spotlight .preview-callout-icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--callout-text);
}

.preview-callout-preset-minimal_outline {
  border-left-width: 2px;
  border-radius: 16px;
  box-shadow: none;
}

.preview-callout-preset-minimal_outline .preview-callout-icon {
  width: 1.7rem;
  height: 1.7rem;
  background: transparent;
  color: var(--callout-accent);
  border: 1px solid currentColor;
}

.preview-layout {
  --layout-accent: var(--preview-accent, #2f6db4);
  --layout-bg: #f9fbff;
  --layout-text: #16314a;
  --layout-border: var(--preview-border, #d8e2ef);
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--layout-border);
  border-radius: 18px;
  padding: 0.9rem;
  background: var(--layout-bg);
  color: var(--layout-text);
}

.preview-layout > * {
  min-width: 0;
}

.preview-layout-primary > :first-child {
  margin-top: 0;
}

.preview-layout-primary > :last-child {
  margin-bottom: 0;
}

.preview-layout-split_hero {
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}

.preview-layout-media-left .preview-layout-primary {
  order: 2;
}

.preview-layout-media-left .preview-layout-media {
  order: 1;
}

.preview-layout-bento_grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.preview-layout-bento_grid .preview-layout-primary,
.preview-layout-alternating_media .preview-layout-primary {
  grid-column: 1 / -1;
}

.preview-layout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  align-items: center;
}

.preview-layout-row.reverse {
  direction: rtl;
}

.preview-layout-row.reverse > * {
  direction: ltr;
}

.preview-layout-sticky_side_note {
  grid-template-columns: 1.5fr 1fr;
  align-items: flex-start;
}

.preview-layout-note {
  position: sticky;
  top: 1.2rem;
  border: 1px solid var(--layout-border);
  background: color-mix(in srgb, var(--layout-bg) 82%, #ffffff 18%);
  border-radius: 10px;
  padding: 0.65rem;
}

.preview-layout-media {
  border: 1px dashed color-mix(in srgb, var(--layout-border) 72%, #ffffff 28%);
  border-radius: 10px;
  padding: 0.45rem;
  background: color-mix(in srgb, var(--layout-bg) 70%, #ffffff 30%);
}

.preview-layout-media img,
.preview-layout-card-image {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.preview-layout-row-body > :first-child,
.preview-layout-card > :first-child {
  margin-top: 0;
}

.preview-layout-card {
  border-color: var(--layout-border);
  background: color-mix(in srgb, var(--layout-bg) 74%, #ffffff 26%);
  color: inherit;
}

.preview-layout-preset-soft_panel {
  box-shadow: 0 16px 30px rgba(25, 45, 72, 0.07);
}

.preview-layout-preset-spotlight {
  box-shadow: 0 22px 36px rgba(10, 18, 34, 0.2);
}

.preview-layout-preset-minimal {
  border-width: 1px;
  box-shadow: none;
  background: color-mix(in srgb, var(--layout-bg) 88%, #ffffff 12%);
}

.preview-layout-preset-warm_note .preview-layout-note {
  background: color-mix(in srgb, var(--layout-bg) 86%, #ffffff 14%);
}

.preview-layout-preset-editorial .preview-layout-primary h3,
.preview-layout-preset-soft_panel .preview-layout-primary h3,
.preview-layout-preset-spotlight .preview-layout-primary h3,
.preview-layout-preset-minimal .preview-layout-primary h3,
.preview-layout-preset-warm_note .preview-layout-primary h3 {
  color: inherit;
}

.preview-media-text-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.preview-media-text-split[data-content-vertical-align="top"] {
  align-items: start;
}

.preview-media-text-split[data-content-vertical-align="center"] {
  align-items: center;
}

.preview-media-text-split[data-content-vertical-align="bottom"] {
  align-items: end;
}

.preview-media-text-split-content {
  min-width: 0;
}

.preview-media-text-split-content > :first-child {
  margin-top: 0;
}

.preview-media-text-split-media {
  margin: 0;
  border: 1px solid var(--preview-border, #d8e2ef);
  border-radius: 18px;
  padding: 0.75rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 32, 51, 0.08);
}

.preview-media-text-split-media img {
  display: block;
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.preview-media-text-split-media.is-framed {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.preview-media-text-split-media.is-framed .preview-media-frame {
  width: 100%;
}

.preview-image-block {
  display: grid;
  gap: 0.85rem;
}

.preview-image-block-media-wrap {
  width: 100%;
}

.preview-image-block-media-host {
  max-width: 100%;
}

.preview-image-block-stage {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: clamp(240px, 42vw, 460px);
  background: linear-gradient(180deg, rgba(10, 23, 38, 0.08), rgba(10, 23, 38, 0.2));
}

.preview-image-block-stage .preview-image-block-media-wrap,
.preview-image-block-stage .preview-image-block-media-host,
.preview-image-block-stage .preview-media-frame,
.preview-image-block-stage .preview-image-crop-shell,
.preview-image-block-stage .preview-image-block-media {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  min-height: inherit;
}

.preview-image-block-stage .preview-media-frame {
  padding: 0;
  border-radius: inherit;
}

.preview-image-block-stage .preview-image-crop-shell {
  aspect-ratio: auto;
  border-radius: inherit;
}

.preview-image-block-stage .preview-image-crop-target,
.preview-image-block-stage .preview-image-block-media {
  height: 100%;
  object-fit: cover;
}

.preview-image-block-stage .preview-image-block-media.is-contained-preview {
  object-fit: contain;
}

.preview-image-block-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  background: linear-gradient(90deg, rgba(9, 23, 38, 0.72), rgba(9, 23, 38, 0.18));
  color: #fff;
}

.preview-image-block-overlay[data-text-position="center"] {
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 23, 38, 0.22), rgba(9, 23, 38, 0.68));
}

.preview-image-block-overlay[data-text-position="right"] {
  justify-content: flex-end;
  text-align: right;
  background: linear-gradient(270deg, rgba(9, 23, 38, 0.72), rgba(9, 23, 38, 0.18));
}

.preview-image-block-copy {
  min-width: 0;
  max-width: min(520px, 100%);
  display: grid;
  gap: 0.45rem;
}

.preview-image-block-overlay .preview-image-block-copy {
  padding: 1rem 1.15rem;
  border-radius: 22px;
  background: color-mix(in srgb, rgba(6, 15, 26, 0.74) 82%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(4, 11, 22, 0.34);
}

.preview-image-block-copy > :first-child,
.preview-image-block-copy .preview-rich > :first-child {
  margin-top: 0;
}

.preview-image-block-copy > :last-child,
.preview-image-block-copy .preview-rich > :last-child {
  margin-bottom: 0;
}

.preview-image-block-heading {
  margin: 0;
}

.preview-image-block[data-layout="split"] {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: center;
  gap: 1.35rem;
}

.preview-image-block[data-layout="split"][data-text-position="left"] {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
}

.preview-image-block[data-layout="split"][data-content-vertical-align="top"] {
  align-items: start;
}

.preview-image-block[data-layout="split"][data-content-vertical-align="center"] {
  align-items: center;
}

.preview-image-block[data-layout="split"][data-content-vertical-align="bottom"] {
  align-items: end;
}

.preview-image-block[data-layout="split"] .preview-image-block-media-wrap {
  border: 1px solid var(--preview-border, #d8e2ef);
  border-radius: 20px;
  padding: 0.8rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 34px rgba(15, 32, 51, 0.09);
}

.preview-image-block[data-layout="split"] .preview-image-block-media-wrap .preview-media-frame {
  width: 100% !important;
}

.preview-image-block[data-layout="standard"] .preview-image-block-copy {
  justify-self: center;
  text-align: center;
}

.preview-gallery-wrapper {
  width: 100%;
  display: flex;
  margin-bottom: 0.75rem;
}
.preview-gallery-wrapper-align-left {
  justify-content: flex-start;
}
.preview-gallery-wrapper-align-center {
  justify-content: center;
}
.preview-gallery-wrapper-align-right {
  justify-content: flex-end;
}
.preview-gallery {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(var(--preview-gallery-columns, 3), minmax(0, 1fr));
  width: min(100%, calc(var(--preview-gallery-columns, 3) * 240px + (var(--preview-gallery-columns, 3) - 1) * 0.6rem));
  max-width: 100%;
}

.preview-gallery-item {
  margin: 0;
  border: 1px solid var(--preview-token-gallery-border, var(--preview-border, #d8e2ef));
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: var(--preview-token-gallery-card-bg, #fff);
  padding: 0.4rem;
  display: grid;
  gap: 0.35rem;
}

.preview-gallery-image {
  width: 100%;
  border: var(--preview-gallery-image-border, 1px solid #c5d7ec);
  border-radius: 8px;
  background: #0f1f32;
  height: var(--preview-gallery-image-height, 220px);
  object-fit: var(--preview-gallery-image-fit, cover);
  object-position: center;
}
.preview-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--preview-gallery-image-height, 220px);
  border: var(--preview-gallery-image-border, 1px solid #c5d7ec);
  border-radius: 8px;
  background: #eef2f8;
  color: #5c6a87;
  font-size: 0.85rem;
}
.preview-gallery-caption {
  font-size: 0.9rem;
  color: #182330;
  line-height: 1.3;
  margin: 0;
}

.preview-gallery-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gallery-overlay-stage-card {
  border: 1px solid #d7e3f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.6rem;
  display: grid;
  gap: 0.45rem;
}

.gallery-overlay-stage {
  position: relative;
  border: 1px solid #c5d8ee;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #ecf4ff, #dfeeff);
  min-height: 220px;
}

.gallery-overlay-stage-image {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: contain;
  background: #0b1725;
}

.gallery-overlay-stage-layer {
  position: absolute;
  inset: 0;
}

.gallery-overlay-stage-highlight {
  position: absolute;
  border: 2px solid var(--highlight-border, #1f5d9c);
  background: var(--highlight-bg, rgba(31, 93, 156, 0.18));
  color: var(--highlight-text, #0f3046);
  cursor: move;
  padding: 0;
  min-width: 2.8rem;
  min-height: 2rem;
}

.gallery-overlay-stage-highlight-box {
  border-radius: 12px;
}

.gallery-overlay-stage-highlight-circle {
  border-radius: 50%;
}

.gallery-overlay-stage-highlight-callout {
  border-radius: 14px;
  box-shadow: 0 12px 25px rgba(15, 32, 51, 0.18);
}

.gallery-overlay-stage-highlight-arrow {
  border-width: 0;
  border-radius: 999px;
  background: var(--highlight-border, #1f5d9c);
  min-height: 0.7rem;
}

.gallery-overlay-stage-highlight-arrow::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--highlight-border, #1f5d9c);
}

.gallery-overlay-stage-highlight.active {
  box-shadow: 0 0 0 3px rgba(47, 109, 180, 0.24);
}

.gallery-overlay-stage-highlight-label {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 0.7rem);
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: rgba(24, 59, 99, 0.92);
  color: #ffffff;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.gallery-overlay-stage-highlight-arrow .gallery-overlay-stage-highlight-label {
  inset: 50% auto auto 100%;
  transform: translate(0.45rem, -50%);
}

.gallery-overlay-stage-highlight-handle {
  position: absolute;
  right: -0.34rem;
  bottom: -0.34rem;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2f6db4;
  box-shadow: 0 2px 8px rgba(15, 34, 69, 0.18);
  cursor: nwse-resize;
}

.gallery-overlay-stage-highlight-rotate {
  position: absolute;
  left: 50%;
  top: -1.2rem;
  transform: translateX(-50%);
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #2f6db4;
  box-shadow: 0 2px 8px rgba(15, 34, 69, 0.18);
  cursor: grab;
}
.preview-gallery-highlight {
  position: absolute;
  border: 2px solid var(--highlight-border, #1f5d9c);
  background: var(--highlight-bg, rgba(31, 93, 156, 0.18));
  color: var(--highlight-text, #0f3046);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  transform-origin: center center;
  pointer-events: none;
}
.preview-gallery-highlight-circle {
  border-radius: 50%;
}
.preview-gallery-highlight-callout {
  border-radius: 12px;
  padding: 0.35rem 0.8rem;
  box-shadow: 0 12px 25px rgba(15, 32, 51, 0.18);
}
.preview-gallery-highlight-arrow {
  background: var(--highlight-border, #1f5d9c);
  border-width: 0;
  border-radius: 999px;
  padding: 0;
}
.preview-gallery-highlight-arrow::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--highlight-border, #1f5d9c);
}
.preview-gallery-highlight-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.4rem);
  background: rgba(26, 37, 58, 0.85);
  color: #ffffff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(15, 32, 51, 0.25);
}
.preview-gallery-highlight-arrow .preview-gallery-highlight-label {
  top: 50%;
  left: 100%;
  transform: translate(0.4rem, -50%);
}
.preview-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--preview-checkbox-gap, 0.8rem);
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(26, 37, 58, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 35px rgba(15, 32, 51, 0.12);
}

.preview-checkbox-heading {
  font-size: 1rem;
  color: #162131;
}

.preview-checkbox-progress,
.preview-checkbox-complete {
  font-size: 0.84rem;
  color: #53657f;
}

.preview-checkbox-complete {
  color: var(--preview-checkbox-accent, #1f5d9c);
  font-weight: 700;
}

.preview-checkbox-list.preview-checkbox-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.preview-checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--maven-choice-border, rgba(97, 112, 138, 0.08));
  width: 100%;
  text-align: left;
  border-top: none;
  border-left: none;
  border-right: none;
  background: var(--maven-choice-bg, transparent);
  color: var(--maven-choice-text, inherit);
  cursor: pointer;
  border-radius: 10px;
  transition: background 140ms ease, transform 140ms ease;
}
.preview-checkbox-option:last-child {
  border-bottom: none;
}
.preview-checkbox-option:hover {
  background: var(--maven-choice-bg, rgba(31, 93, 156, 0.04));
}
.preview-checkbox-option:focus-visible {
  outline: 2px solid var(--preview-checkbox-accent, #1f5d9c);
  outline-offset: 2px;
}
.preview-checkbox-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  border: 2px solid var(--maven-choice-indicator-border, rgba(154, 167, 198, 0.5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  background: var(--maven-choice-indicator-bg, #fff);
  color: var(--maven-choice-indicator-text, #1f5d9c);
}
.preview-checkbox-icon-circle {
  border-radius: 50%;
}
.preview-checkbox-icon-square {
  border-radius: 4px;
}
.preview-checkbox-icon-chip {
  border-radius: 999px;
}
.preview-checkbox-option.is-checked .preview-checkbox-icon {
  border-color: var(--maven-choice-indicator-border, var(--preview-checkbox-accent, #1f5d9c));
  background: var(--maven-choice-indicator-bg, var(--preview-checkbox-accent, #1f5d9c));
}
.preview-checkbox-option.is-checked .preview-checkbox-icon::after {
  content: '✔';
  color: var(--maven-choice-indicator-text, #fff);
  font-size: 0.65rem;
}
.preview-checkbox-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.preview-checkbox-text {
  font-size: 1rem;
  color: var(--maven-choice-text, #1b2430);
}
.preview-checkbox-muted-text .preview-checkbox-text {
  color: #566079;
  font-style: italic;
}
.preview-checkbox-bold-text .preview-checkbox-text {
  font-weight: 600;
}
.preview-checkbox-detail {
  font-size: 0.85rem;
  color: var(--maven-choice-detail, #5a6a84);
  line-height: 1.4;
}
.preview-checkbox-align-right .preview-checkbox-option {
  flex-direction: row-reverse;
}

.preview-continue-gate-note {
  color: #8b4a17;
  font-weight: 600;
}

.preview-gallery-masonry .preview-gallery-item {
  align-self: start;
}

.preview-table-wrap {
  border: 1px solid var(--table-border-color, var(--preview-border, #d8e2ef));
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 34px rgba(15, 32, 54, 0.08);
  overflow: auto;
}

.preview-table-toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
  margin-left: 0.3rem;
}

.preview-table-inline-action-button {
  min-width: 2.15rem;
  height: 1.95rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  color: var(--table-body-text, var(--preview-text, #15212e));
}

.preview-table th,
.preview-table td {
  border: 1px solid var(--table-border-color, #d7e3f0);
  padding: var(--table-cell-padding, 0.58rem 0.7rem);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: visible;
}

.preview-table th {
  background: var(--table-header-bg, var(--preview-token-table-header-bg, #f4f8fd));
  color: var(--table-header-text, #19324a);
}

.preview-table tbody tr {
  background: var(--table-body-bg, #ffffff);
}

.preview-table td {
  color: var(--table-body-text, var(--preview-text, #15212e));
}

.preview-table.striped tbody tr:nth-child(even) {
  background: var(--table-stripe-bg, var(--preview-token-table-stripe-bg, #f8fbff));
}

.preview-list-wrap {
  --list-accent: #2f6db4;
  --list-bg: #f7fbff;
  --list-text: #16314a;
  --list-border: #d9e6f2;
  --list-shadow: 0 12px 28px rgba(16, 32, 52, 0.06);
  color: var(--list-text);
}

.preview-list-wrap {
  padding: 0.8rem;
  border-radius: 16px;
}

.preview-list {
  display: grid;
  gap: 0.7rem;
}

.preview-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--list-border);
  background: var(--list-bg);
  color: var(--list-text);
  box-shadow: var(--list-shadow);
}

.preview-list-marker {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--list-accent) 16%, white);
  color: var(--list-accent);
  font-size: 0.84rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.list-marker-symbol-thumb {
  display: grid;
  gap: 0.24rem;
  justify-items: center;
  text-align: center;
  min-width: 4.6rem;
}

.list-marker-symbol-thumb-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, #2f6db4) 12%, white);
  color: var(--accent, #2f6db4);
  font-size: 0.96rem;
  line-height: 1;
}

.list-marker-symbol-thumb-label {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted, #496078);
  max-width: 5.4rem;
}

.preview-list-content {
  display: grid;
  gap: 0.2rem;
}

.preview-list-content > :first-child {
  margin-top: 0;
}

.preview-list-content > :last-child {
  margin-bottom: 0;
}

.preview-list-align-center .preview-list-item {
  text-align: center;
}

.preview-list-align-center .preview-list-content {
  justify-items: center;
}

.preview-list-align-right .preview-list-item {
  text-align: right;
}

.preview-list-align-right .preview-list-content {
  justify-items: end;
}

.preview-list-preset-signal_stripe .preview-list-item {
  border-left: 8px solid var(--list-accent);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.preview-list-preset-signal_stripe .preview-list-marker {
  background: transparent;
  min-width: auto;
  padding: 0;
  font-size: 1.2rem;
}

.preview-list-preset-number_cards .preview-list-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--list-bg) 92%, white), color-mix(in srgb, var(--list-bg) 78%, var(--list-accent) 12%));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--list-accent) 14%, transparent);
}

.preview-list-preset-number_cards .preview-list-marker {
  min-width: 2.65rem;
  min-height: 2.65rem;
  font-size: 0.9rem;
}

.preview-list-preset-soft_checks .preview-list-item {
  border-radius: 22px;
}

.preview-list-preset-soft_checks .preview-list-marker {
  background: color-mix(in srgb, var(--list-accent) 18%, white);
}

.preview-list-preset-editorial_rules .preview-list {
  gap: 0;
}

.preview-list-preset-editorial_rules .preview-list-item {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.preview-list-preset-editorial_rules .preview-list-item:first-child {
  border-top: 1px solid var(--list-border);
}

.preview-list-preset-editorial_rules .preview-list-marker,
.preview-list-preset-minimal_dots .preview-list-marker {
  background: transparent;
  padding: 0;
  min-width: 1rem;
}

.preview-list-preset-orbit_tags .preview-list-marker {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--list-accent) 10%, transparent);
}

.preview-list-preset-spotlight_panels .preview-list-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--list-bg) 94%, black 6%), color-mix(in srgb, var(--list-bg) 100%, black));
  color: var(--list-text);
  border-color: color-mix(in srgb, var(--list-border) 75%, black);
  box-shadow: 0 22px 42px rgba(7, 14, 24, 0.24);
}

.preview-list-preset-spotlight_panels .preview-list-marker {
  background: var(--list-accent);
  color: color-mix(in srgb, var(--list-bg) 86%, white);
}

.preview-list-preset-glass_chips .preview-list-item {
  background: linear-gradient(180deg, color-mix(in srgb, white 68%, var(--list-bg)), color-mix(in srgb, white 52%, var(--list-bg)));
  backdrop-filter: blur(8px);
}

.preview-list-preset-lane_markers .preview-list {
  position: relative;
  gap: 1rem;
}

.preview-list-preset-lane_markers .preview-list::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--list-accent) 12%, transparent), var(--list-accent), color-mix(in srgb, var(--list-accent) 12%, transparent));
}

.preview-list-preset-lane_markers .preview-list-item {
  padding-left: 1.1rem;
}

.preview-list-preset-lane_markers .preview-list-marker {
  position: relative;
  z-index: 1;
}

.preview-list-preset-minimal_dots .preview-list-item {
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.preview-list-preset-stacked_ribbons .preview-list-item {
  border-radius: 20px;
  overflow: hidden;
}

.preview-list-preset-stacked_ribbons .preview-list-marker {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--list-accent), color-mix(in srgb, var(--list-accent) 55%, black));
  color: #fff;
}

.preview-list-wrap.is-editor-preview .preview-list-item {
  min-height: 3.5rem;
}

.preview-bullet-highlights {
  --bullet-accent: #2f6db4;
  --bullet-bg: #f7fbff;
  --bullet-text: #16314a;
  --bullet-border: #d9e6f2;
  --bullet-columns: 1;
  display: grid;
  gap: 0.8rem;
  color: var(--bullet-text);
}

.preview-bullet-highlights-title {
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--bullet-text);
}

.preview-bullet-highlights-intro > :first-child {
  margin-top: 0;
}

.preview-bullet-highlights-intro > :last-child {
  margin-bottom: 0;
}

.preview-bullet-highlights-grid {
  display: grid;
  grid-template-columns: repeat(var(--bullet-columns, 1), minmax(0, 1fr));
  gap: 0.85rem;
}

.preview-bullet-highlights-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--bullet-border);
  background: var(--bullet-bg);
  color: var(--bullet-text);
  box-shadow: 0 14px 32px rgba(13, 28, 46, 0.08);
}

.preview-bullet-highlights-marker {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bullet-accent) 16%, white);
  color: var(--bullet-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.preview-bullet-highlights-body {
  display: grid;
  gap: 0.28rem;
}

.preview-bullet-highlights-item-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.preview-bullet-highlights-item-content > :first-child {
  margin-top: 0;
}

.preview-bullet-highlights-item-content > :last-child {
  margin-bottom: 0;
}

.preview-bullet-highlights-align-center {
  text-align: center;
}

.preview-bullet-highlights-align-center .preview-bullet-highlights-body {
  justify-items: center;
}

.preview-bullet-highlights-align-right {
  text-align: right;
}

.preview-bullet-highlights-align-right .preview-bullet-highlights-body {
  justify-items: end;
}

.preview-bullet-highlights-preset-signal_cards .preview-bullet-highlights-item {
  border-left: 8px solid var(--bullet-accent);
}

.preview-bullet-highlights-preset-editorial_panels .preview-bullet-highlights-item {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-left: 0;
  border-right: 0;
}

.preview-bullet-highlights-preset-editorial_panels .preview-bullet-highlights-marker {
  background: transparent;
  min-width: 1.2rem;
  padding: 0;
}

.preview-bullet-highlights-preset-glass_badges .preview-bullet-highlights-item {
  background: linear-gradient(180deg, color-mix(in srgb, white 72%, var(--bullet-bg)), color-mix(in srgb, white 54%, var(--bullet-bg)));
  backdrop-filter: blur(8px);
}

.preview-bullet-highlights-preset-spotlight_dark .preview-bullet-highlights-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bullet-bg) 94%, black 6%), color-mix(in srgb, var(--bullet-bg) 100%, black));
  border-color: color-mix(in srgb, var(--bullet-border) 75%, black);
  box-shadow: 0 24px 46px rgba(7, 14, 24, 0.28);
}

.preview-bullet-highlights-preset-spotlight_dark .preview-bullet-highlights-marker {
  background: var(--bullet-accent);
  color: color-mix(in srgb, var(--bullet-bg) 88%, white);
}

.preview-bullet-highlights-preset-ribbon_steps .preview-bullet-highlights-marker {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bullet-accent), color-mix(in srgb, var(--bullet-accent) 55%, black));
  color: #fff;
}

.preview-bullet-highlights-preset-soft_checks .preview-bullet-highlights-marker {
  background: color-mix(in srgb, var(--bullet-accent) 18%, white);
}

.preview-bullet-highlights-preset-lane_points .preview-bullet-highlights-grid {
  position: relative;
}

.preview-bullet-highlights-preset-lane_points .preview-bullet-highlights-grid::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bullet-accent) 14%, transparent), var(--bullet-accent), color-mix(in srgb, var(--bullet-accent) 14%, transparent));
}

.preview-bullet-highlights-preset-lane_points .preview-bullet-highlights-item {
  position: relative;
  z-index: 1;
}

.preview-bullet-highlights-preset-orbit_markers .preview-bullet-highlights-marker {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--bullet-accent) 10%, transparent);
}

.preview-bullet-highlights.is-editor-preview .preview-bullet-highlights-item {
  min-height: 4.4rem;
}

.preview-statement {
  border: 1px solid var(--preview-border, #d8e2ef);
  border-left-width: 6px;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  background: var(--statement-bg, #f9fbff);
}

.preview-statement-accent {
  border-left-color: var(--preview-accent, #2f6db4);
  --statement-bg: var(--preview-token-statement-accent-bg, #f9fbff);
}

.preview-statement-subtle {
  border-left-color: #93a8bf;
  --statement-bg: var(--preview-token-statement-subtle-bg, #f7f9fc);
}

.preview-statement-minimal {
  border-left-color: transparent;
  --statement-bg: #ffffff;
}

.preview-statement-success {
  border-left-color: #19715f;
  --statement-bg: var(--preview-token-statement-success-bg, #f2fcf7);
}

.preview-statement-warning {
  border-left-color: #d17b00;
  --statement-bg: var(--preview-token-statement-warning-bg, #fff7ef);
}

.preview-statement-contrast {
  border-left-color: var(--preview-accent, #2f6db4);
  --statement-bg: var(--preview-token-statement-contrast-bg, #12314d);
  color: #eef5ff;
}

.preview-statement-preset-banner {
  border-radius: 999px;
  padding: 0.7rem 1rem;
}

.preview-statement-preset-card {
  box-shadow: 0 10px 24px rgba(12, 26, 44, 0.12);
}

.definition-preset-preview {
  width: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--definition-accent, #1f5d9c) 22%, var(--builder-surface-border, #d7e3f0));
  background: var(--definition-bg, #f7fbff);
  color: var(--definition-text, #16314a);
  padding: 0.5rem 0.6rem;
  display: grid;
  gap: 0.2rem;
  position: relative;
  overflow: hidden;
}

.definition-preset-preview[data-preset='sliver']::before,
.definition-preset-preview[data-preset='dictionary']::before,
.definition-preset-preview[data-preset='spotlight']::before,
.definition-preset-preview[data-preset='split']::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--definition-accent, #1f5d9c);
}

.definition-preset-preview[data-preset='dictionary']::before {
  width: 100%;
  height: 1px;
  inset: auto 0 0 0;
}

.definition-preset-preview[data-preset='spotlight']::before {
  width: 100%;
  height: 100%;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--definition-accent, #12314d) 12%, transparent), transparent 55%);
}

.definition-preset-preview[data-preset='split']::before {
  width: 34%;
  opacity: 0.12;
}

.definition-preset-preview-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

.definition-preset-preview-word {
  font-size: 1rem;
  font-weight: 700;
}

.preview-definition {
  border-radius: 16px;
  background: var(--definition-bg, #f7fbff);
  color: var(--definition-text, #16314a);
  border: 1px solid var(--definition-border, color-mix(in srgb, var(--definition-accent, #1f5d9c) 22%, var(--builder-surface-border, #d7e3f0)));
  padding: 1rem 1.05rem;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.65rem;
  box-shadow: var(--definition-shadow, none);
  isolation: isolate;
}

.preview-definition::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--definition-accent, #1f5d9c);
}

.preview-definition-dictionary::before {
  width: 100%;
  height: 1px;
  inset: auto 0 0 0;
}

.preview-definition-spotlight::before {
  width: 100%;
  height: 100%;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--definition-accent, #12314d) 22%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--definition-accent, #12314d) 12%, transparent), transparent 55%);
}

.preview-definition-split::before {
  width: 32%;
  opacity: 0.12;
}

.preview-definition-kicker,
.preview-definition-examples-label {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  opacity: 0.78;
}

.preview-definition-word,
.preview-definition-body,
.preview-definition-examples {
  position: relative;
  z-index: 1;
}

.preview-definition-word {
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.preview-definition-body > :first-child {
  margin-top: 0;
}

.preview-definition-body > :last-child {
  margin-bottom: 0;
}

.preview-definition-examples {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.preview-definition-examples-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.preview-definition-spotlight {
  box-shadow: 0 20px 44px rgba(13, 27, 42, 0.22);
}

.preview-definition-split {
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

.preview-definition-split .preview-definition-kicker,
.preview-definition-split .preview-definition-word {
  grid-column: 1;
}

.preview-definition-split .preview-definition-body,
.preview-definition-split .preview-definition-examples {
  grid-column: 2;
}

.preview-definition-split .preview-definition-body {
  padding-left: 0.6rem;
}

.preview-glossary {
  --glossary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 248, 253, 0.92) 100%);
  --glossary-border: rgba(214, 227, 241, 0.82);
  --glossary-text: #12314b;
  --glossary-shadow: 0 18px 36px rgba(15, 31, 49, 0.08);
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 24px;
  border: 1px solid var(--glossary-border);
  background: var(--glossary-bg);
  box-shadow: var(--glossary-shadow);
  color: var(--glossary-text);
}

.preview-glossary-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--glossary-text);
}

.preview-glossary-intro > :first-child,
.preview-glossary-detail > :first-child {
  margin-top: 0;
}

.preview-glossary-intro > :last-child,
.preview-glossary-detail > :last-child {
  margin-bottom: 0;
}

.preview-glossary-list {
  display: grid;
  gap: 0.9rem;
}

.preview-glossary-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: var(--lesson-inner-card-bg, rgba(255, 255, 255, 0.92));
  border: 1px solid var(--lesson-inner-card-border, rgba(214, 227, 241, 0.76));
  box-shadow: var(--lesson-inner-card-shadow, none);
  color: var(--lesson-inner-card-text, inherit);
}

.preview-glossary-term-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  align-items: baseline;
}

.preview-glossary-term {
  font-size: 1rem;
  font-weight: 800;
  color: var(--lesson-inner-card-text, #13324a);
}

.preview-glossary-pronunciation {
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--lesson-inner-card-text, #5a738d) 68%, white 32%);
}

.preview-glossary-short {
  font-size: 0.92rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--lesson-inner-card-text, #224763) 84%, black 16%);
}

.preview-gallery-preset-polaroid .preview-gallery-item {
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 18px rgba(12, 26, 44, 0.16);
}

.preview-gallery-preset-cards .preview-gallery-item {
  box-shadow: 0 6px 14px rgba(12, 26, 44, 0.12);
}

.preview-gallery-preset-shadowed .preview-gallery-item {
  box-shadow: 0 8px 18px rgba(12, 26, 44, 0.14);
}

.preview-gallery-preset-clean .preview-gallery-item {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 32, 51, 0.08);
}

.preview-table-preset-compact .preview-table th,
.preview-table-preset-compact .preview-table td {
  padding: 0.32rem 0.44rem;
}

.preview-table-preset-spacious .preview-table th,
.preview-table-preset-spacious .preview-table td {
  padding: 0.68rem 0.75rem;
}

.preview-table-preset-minimal {
  border-color: transparent;
}

.preview-table-preset-minimal .preview-table th,
.preview-table-preset-minimal .preview-table td {
  border-left: 0;
  border-right: 0;
}

.preview-table-preset-contrast .preview-table th {
  background: #1a324b;
  color: #edf5ff;
}

.preview-table-preset-executive {
  border-top: 5px solid color-mix(in srgb, var(--table-header-text, #19324a) 72%, #2f6db4);
  box-shadow: 0 18px 36px rgba(16, 30, 49, 0.12);
}

.preview-table-preset-executive .preview-table th {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-table-preset-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(243, 248, 253, 0.72) 100%);
  border-color: color-mix(in srgb, var(--table-border-color, #d7e3f0) 72%, white);
  backdrop-filter: blur(10px);
}

.preview-table-preset-glass .preview-table th,
.preview-table-preset-glass .preview-table td {
  background: color-mix(in srgb, white 72%, var(--table-body-bg, #ffffff));
}

.preview-table-preset-ledger {
  background: linear-gradient(180deg, #fffefb 0%, #fbf8f0 100%);
  border-color: #d6ccb7;
}

.preview-table-preset-ledger .preview-table {
  font-variant-numeric: tabular-nums;
}

.preview-table-preset-ledger .preview-table th,
.preview-table-preset-ledger .preview-table td {
  border-style: dashed;
  border-color: #cdbf9d;
}

.preview-table-preset-ledger .preview-table th {
  background: #eee4d1;
  color: #43392a;
}

.preview-table-preset-spotlight {
  background: linear-gradient(180deg, #15314c 0%, #10253c 100%);
  border-color: #10253c;
  box-shadow: 0 18px 38px rgba(7, 17, 29, 0.26);
}

.preview-table-preset-spotlight .preview-table th {
  background: #7fc2ff;
  color: #092033;
  border-color: rgba(160, 209, 255, 0.34);
}

.preview-table-preset-spotlight .preview-table td {
  border-color: rgba(160, 209, 255, 0.18);
}

.preview-table-preset-rounded {
  background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
  padding: 0.35rem;
}

.preview-table-preset-rounded .preview-table {
  border-collapse: separate;
  border-spacing: 0 0.42rem;
}

.preview-table-preset-rounded .preview-table th,
.preview-table-preset-rounded .preview-table td {
  border: 0;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 31, 49, 0.08);
}

.preview-table-preset-rounded .preview-table tr > :first-child {
  border-radius: 14px 0 0 14px;
}

.preview-table-preset-rounded .preview-table tr > :last-child {
  border-radius: 0 14px 14px 0;
}

.table-editor-grid-shell {
  border: 1px solid #d7e2ef;
  border-radius: 16px;
  padding: 0.8rem;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.table-editor-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 0.65rem;
  color: #15212e;
}

.table-editor-grid th,
.table-editor-grid td {
  border: 1px solid #d6e0ec;
  padding: 0.4rem;
  vertical-align: top;
  background: #ffffff;
}

.table-editor-grid th {
  background: #eef5fc;
}

.table-grid-input {
  width: 100%;
  min-width: 0;
  border: 1px solid #c8d6e6;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  font: inherit;
  background: #ffffff;
}

.table-grid-input:focus {
  outline: none;
  border-color: #4b84c4;
  box-shadow: 0 0 0 3px rgba(75, 132, 196, 0.14);
}

.table-grid-remove-btn {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  padding: 0.22rem 0.45rem;
}

.table-grid-row-actions,
.table-grid-action-head {
  width: 90px;
  text-align: center;
  white-space: nowrap;
}

.table-style-card {
  gap: 0.8rem;
}

.table-style-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
}

.table-style-grid {
  align-items: start;
}

.table-editor-visibility-hint {
  margin-top: -0.15rem;
}

.preview-transition {
  border: 1px solid var(--preview-border, #d8e2ef);
  border-radius: 12px;
  padding: 1rem 1rem 1.05rem;
  display: grid;
  gap: 0.55rem;
  min-height: 116px;
  align-content: start;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

.preview-transition-line {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--preview-accent, #2f6db4) 50%, transparent 100%);
}

.preview-transition-title {
  display: block;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.32;
  font-weight: 800;
  color: var(--preview-text, #15212e);
  overflow-wrap: anywhere;
}

.preview-transition-subtitle {
  display: block;
  margin: 0;
  color: var(--preview-muted, #496078);
  font-size: 0.94rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.preview-transition-subtitle > :first-child {
  margin-top: 0;
}

.preview-transition-subtitle > :last-child {
  margin-bottom: 0;
}

.preview-transition-accent {
  background: var(--preview-token-transition-accent-bg, #edf4ff);
}

.preview-transition-muted {
  background: var(--preview-token-transition-muted-bg, #f6f8fb);
}

.preview-transition-minimal {
  background: var(--preview-token-transition-minimal-bg, #ffffff);
}

.preview-transition-chevron .preview-transition-line {
  height: 12px;
  background: repeating-linear-gradient(135deg, var(--preview-accent, #2f6db4) 0 8px, transparent 8px 16px);
}

.preview-transition-wave .preview-transition-line {
  height: 10px;
  background: repeating-radial-gradient(circle at 10px -2px, var(--preview-accent, #2f6db4) 0 6px, transparent 6px 14px);
}

.preview-transition-arrow .preview-transition-line {
  clip-path: polygon(0 40%, 85% 40%, 85% 18%, 100% 50%, 85% 82%, 85% 60%, 0 60%);
}

.preview-reflection {
  border: 1px solid var(--preview-token-reflection-border, var(--preview-border, #d8e2ef));
  border-radius: 10px;
  background: var(--preview-token-reflection-bg, #f8fbff);
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.preview-reflection input[type="text"],
.preview-reflection textarea {
  width: 100%;
  border: 1px solid #c5d7ec;
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  font: inherit;
  background: #fff;
}

.preview-reflection .preview-reflection-save {
  justify-self: start;
}

.preview-custom-code {
  border: 1px solid var(--preview-border, #d8e2ef);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.preview-statement-attribution {
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: var(--preview-muted, #496078);
  text-align: right;
}

.preview-stage[data-motion="fade"] .preview-block,
.preview-stage[data-motion="left"] .preview-block,
.preview-stage[data-motion="right"] .preview-block,
.preview-stage[data-motion="up"] .preview-block,
.preview-stage[data-motion="slide"] .preview-block,
.preview-stage[data-motion="stagger"] .preview-block,
.preview-stage[data-motion="reveal"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.preview-stage[data-motion="fade"] .preview-block {
  animation-name: previewFade;
}

.preview-stage[data-motion="left"] .preview-block {
  animation-name: previewLeft;
}

.preview-stage[data-motion="right"] .preview-block {
  animation-name: previewRight;
}

.preview-stage[data-motion="up"] .preview-block,
.preview-stage[data-motion="slide"] .preview-block {
  animation-name: previewSlide;
}

.preview-stage[data-motion="stagger"] .preview-block {
  animation-name: previewFade;
  animation-delay: calc(var(--preview-motion-index, 0) * 70ms);
}

.preview-stage[data-motion="reveal"] .preview-block {
  animation-name: previewReveal;
}

.preview-lesson[data-motion="fade"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewFade;
}

.preview-lesson[data-motion="left"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewLeft;
}

.preview-lesson[data-motion="right"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewRight;
}

.preview-lesson[data-motion="up"] .preview-block,
.preview-lesson[data-motion="slide"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewSlide;
}

.preview-lesson[data-motion="stagger"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewFade;
  animation-delay: calc(var(--preview-motion-index, 0) * 70ms);
}

.preview-lesson[data-motion="reveal"] .preview-block {
  opacity: 0;
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: previewReveal;
}

.preview-block[data-motion="fade"] {
  opacity: 0;
  animation: previewFade var(--preview-motion-duration, 0.45s) ease-out forwards;
}

.preview-block[data-motion="left"] {
  opacity: 0;
  animation: previewLeft var(--preview-motion-duration, 0.45s) ease-out forwards;
}

.preview-block[data-motion="right"] {
  opacity: 0;
  animation: previewRight var(--preview-motion-duration, 0.45s) ease-out forwards;
}

.preview-block[data-motion="up"],
.preview-block[data-motion="slide"] {
  opacity: 0;
  animation: previewSlide var(--preview-motion-duration, 0.45s) ease-out forwards;
}

.preview-block[data-motion="stagger"] {
  opacity: 0;
  animation: previewFade var(--preview-motion-duration, 0.45s) ease-out forwards;
  animation-delay: calc(var(--preview-motion-index, 0) * 70ms);
}

.preview-block[data-motion="reveal"] {
  opacity: 0;
  animation: previewReveal var(--preview-motion-duration, 0.45s) ease-out forwards;
}

.preview-stage[data-reduced-motion="true"] .preview-block {
  animation: none !important;
  opacity: 1 !important;
}

.preview-stage.preview-stage-scroll-motion[data-motion="fade"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="left"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="right"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="up"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="slide"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="stagger"] .preview-block,
.preview-stage.preview-stage-scroll-motion[data-motion="reveal"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="fade"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="left"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="right"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="up"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="slide"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="stagger"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="reveal"] .preview-block,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="fade"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="left"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="right"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="up"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="slide"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="stagger"],
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="reveal"] {
  animation: none;
  opacity: 0;
}

.preview-stage.preview-stage-scroll-motion[data-motion="fade"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="left"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="right"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="up"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="slide"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="stagger"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="reveal"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="fade"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="left"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="right"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="up"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="slide"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="stagger"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="reveal"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="fade"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="left"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="right"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="up"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="slide"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="stagger"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="reveal"].is-preview-visible {
  animation-duration: var(--preview-motion-duration, 0.45s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.preview-stage.preview-stage-scroll-motion[data-motion="fade"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="fade"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="fade"].is-preview-visible {
  animation-name: previewFade;
}

.preview-stage.preview-stage-scroll-motion[data-motion="left"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="left"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="left"].is-preview-visible {
  animation-name: previewLeft;
}

.preview-stage.preview-stage-scroll-motion[data-motion="right"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="right"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="right"].is-preview-visible {
  animation-name: previewRight;
}

.preview-stage.preview-stage-scroll-motion[data-motion="up"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion[data-motion="slide"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="up"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="slide"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="up"].is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="slide"].is-preview-visible {
  animation-name: previewSlide;
}

.preview-stage.preview-stage-scroll-motion[data-motion="stagger"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="stagger"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="stagger"].is-preview-visible {
  animation-name: previewFade;
  animation-delay: calc(var(--preview-motion-index, 0) * 70ms);
}

.preview-stage.preview-stage-scroll-motion[data-motion="reveal"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-lesson[data-motion="reveal"] .preview-block.is-preview-visible,
.preview-stage.preview-stage-scroll-motion .preview-block[data-motion="reveal"].is-preview-visible {
  animation-name: previewReveal;
}

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

@keyframes previewLeft {
  from { opacity: 0; transform: translateX(calc(var(--preview-motion-distance, 16px) * -1)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes previewRight {
  from { opacity: 0; transform: translateX(var(--preview-motion-distance, 16px)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes previewSlide {
  from { opacity: 0; transform: translateY(var(--preview-motion-distance, 16px)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes previewReveal {
  from { opacity: 0; clip-path: inset(0 0 calc(var(--preview-motion-distance, 16px) * 1.4) 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

.preview-block-stack {
  display: grid;
  gap: 0;
}

.builder-transition {
  --builder-transition-top: #d8e2ef;
  --builder-transition-bottom: #edf4ff;
  --builder-transition-height: 56px;
  position: relative;
  display: grid;
  align-items: stretch;
  min-height: var(--builder-transition-height);
  background: linear-gradient(180deg, var(--builder-transition-top) 0%, var(--builder-transition-bottom) 100%);
  overflow: hidden;
  border-radius: 0 0 18px 18px;
}

.builder-transition[data-transition-type='lines'] {
  background: transparent;
  padding: 0.35rem 0 0.5rem;
}

.builder-transition .divider-visual,
.builder-transition .divider-visual-lines,
.builder-transition .divider-visual-shape {
  width: 100%;
}

.builder-transition[data-transition-type='shape'] .divider-visual-shape {
  height: var(--builder-transition-height) !important;
}

.builder-transition-image {
  min-height: var(--builder-transition-height);
  background: var(--builder-transition-bottom);
}

.builder-transition-image-fill {
  width: 100%;
  min-height: var(--builder-transition-height);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.preview-kc,
.preview-quiz {
  border: 1px solid #c7d9ee;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.75rem;
}

.preview-kc-question {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.preview-question-media {
  display: grid;
  gap: 0.45rem;
  margin: 0.45rem 0 0.6rem;
}

.preview-question-media-asset {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #d7e3f0;
  background: #ffffff;
}

.preview-question-media-caption,
.preview-question-media-transcript {
  color: #314865;
}

.preview-kc label,
.preview-quiz label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.preview-kc-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #d7e3f0;
  background: #fff;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(15, 34, 69, 0.08);
  margin-top: 0.35rem;
}

.preview-kc-options {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.preview-kc-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: var(--maven-choice-bg, #ffffff);
  border: 1px solid var(--maven-choice-border, #d7e3f0);
  border-radius: 8px;
  cursor: pointer;
  color: var(--maven-choice-text, inherit);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.preview-kc-option input {
  flex-shrink: 0;
  accent-color: var(--maven-choice-accent, #1f5d9c);
}

.preview-kc-option:hover {
  background: var(--maven-choice-bg, #f0f5ff);
}

.preview-kc-option.is-selected,
.preview-kc-option.is-visited {
  border-color: var(--maven-choice-border, #d7e3f0);
}

.preview-kc-feedback {
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: #eef2fa;
  color: #1e2b47;
  min-height: 2rem;
  transition: opacity 0.2s ease;
  opacity: 0;
}

.preview-kc-feedback--visible {
  opacity: 1;
}

.preview-kc-feedback--success {
  border: 1px solid #1c8f4b;
  background: #eaf8f0;
  color: #135b2e;
}

.preview-matching-grid {
  display: grid;
  gap: 0.35rem;
  margin: 0.45rem 0;
}

.preview-matching-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.55rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #d7e3f0;
}

.preview-matching-cell {
  font-size: 0.9rem;
  color: #1c2d45;
}

.preview-hotspot-stage {
  position: relative;
  display: block;
  margin-bottom: 0.5rem;
}

.preview-hotspot-image {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d7e3f0;
  margin-bottom: 0;
}

.preview-hotspot-marker-live {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--maven-hotspot-size, 2.7rem);
  height: var(--maven-hotspot-size, 2.7rem);
  border-radius: 999px;
  border: 3px solid var(--maven-hotspot-border, rgba(255, 255, 255, 0.98));
  background: var(--maven-hotspot-bg, linear-gradient(180deg, #4f92dd 0%, #1f5ea8 100%));
  color: var(--maven-hotspot-text, #ffffff);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(16, 49, 88, 0.35), 0 0 0 5px rgba(255, 255, 255, 0.22);
  opacity: var(--maven-hotspot-opacity, 1);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.preview-hotspot-marker-live:hover,
.preview-hotspot-marker-live:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--maven-hotspot-hover-bg, var(--maven-hotspot-bg, linear-gradient(180deg, #4f92dd 0%, #1f5ea8 100%)));
  color: var(--maven-hotspot-hover-text, var(--maven-hotspot-text, #ffffff));
  border-color: var(--maven-hotspot-hover-border, var(--maven-hotspot-border, rgba(255, 255, 255, 0.98)));
  box-shadow: 0 16px 32px rgba(16, 49, 88, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.28);
  outline: none;
}

.preview-hotspot-marker-live.active {
  background: var(--maven-hotspot-selected-bg, linear-gradient(180deg, #2ba675 0%, #187857 100%));
  color: var(--maven-hotspot-selected-text, var(--maven-hotspot-text, #ffffff));
  border-color: var(--maven-hotspot-selected-border, var(--maven-hotspot-border, rgba(255, 255, 255, 0.98)));
  box-shadow: 0 16px 32px rgba(10, 71, 47, 0.36), 0 0 0 6px var(--maven-hotspot-selected-ring, rgba(24, 120, 87, 0.26));
}

.preview-kc-feedback--error {
  border: 1px solid #c43838;
  background: #ffe7e2;
  color: #80221b;
}

.preview-kc-feedback-explanation {
  margin-top: 0.4rem;
  font-size: 0.83rem;
  color: inherit;
}

.preview-grid {
  display: grid;
  gap: 0.45rem;
}

.preview-grid.two {
  grid-template-columns: 1fr 1fr;
}

.preview-steps {
  position: relative;
  display: grid;
  gap: var(--preview-step-gap, 1rem);
  padding: 1.25rem;
  border-radius: 22px;
  background: var(--process-bg, #ffffff);
  box-shadow: 0 28px 50px rgba(15, 73, 130, 0.18);
  border: 1px solid rgba(20, 33, 51, 0.1);
}

.preview-steps-track {
  position: relative;
  display: grid;
  gap: var(--preview-step-gap, 1rem);
}

.preview-timeline-heading {
  margin-bottom: 0.65rem;
}

.preview-timeline-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #152034;
}

.preview-timeline-subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: #566077;
}

.preview-timeline-rail {
  display: grid;
  gap: var(--preview-step-gap, 1rem);
  padding: 1.25rem;
  border-radius: 22px;
  background: var(--process-bg, #ffffff);
  box-shadow: 0 28px 50px rgba(15, 73, 130, 0.18);
  border: 1px solid rgba(20, 33, 51, 0.1);
}

.preview-timeline-shell {
  display: grid;
  gap: 1rem;
}

.preview-timeline-track {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1rem 0.2rem 0.6rem;
}

.preview-timeline-line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 3.35rem;
  height: var(--timeline-line-thickness, 3px);
  background: var(--process-accent, #1f5d9c);
  border-radius: 999px;
  opacity: 0.85;
}

.preview-timeline-line--dashed {
  background: repeating-linear-gradient(
    90deg,
    var(--process-accent, #1f5d9c) 0 12px,
    transparent 12px 22px
  );
}

.preview-timeline-line--dotted {
  background: repeating-linear-gradient(
    90deg,
    var(--process-accent, #1f5d9c) 0 4px,
    transparent 4px 14px
  );
}

.preview-timeline-milestones {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: var(--preview-step-gap, 1rem);
  min-width: max-content;
  align-items: start;
}

.preview-timeline-milestone {
  position: relative;
  display: grid;
  gap: 0.55rem;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 160px;
}

.preview-timeline-milestone-period {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--timeline-point-period-color, #5d6d87);
  padding-left: 0.1rem;
}

.preview-timeline-milestone-marker {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--timeline-point-marker-bg, var(--process-step-accent, var(--process-accent, #1f5d9c)));
  color: var(--timeline-point-marker-text, #ffffff);
  font-weight: 700;
  font-size: 0.84rem;
  box-shadow: 0 8px 18px rgba(15, 73, 130, 0.24);
  border: 3px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.preview-timeline-milestone-label {
  display: grid;
  gap: 0.18rem;
  color: var(--timeline-point-title-color, #21304b);
  padding-right: 0.5rem;
}

.preview-timeline-milestone-label strong {
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--timeline-point-title-color, #21304b);
}

.preview-timeline-milestone-label span {
  font-size: 0.82rem;
  color: var(--timeline-point-subtitle-color, #5a6984);
  line-height: 1.3;
}

.preview-timeline-milestone.is-active .preview-timeline-milestone-marker,
.preview-timeline-milestone:hover .preview-timeline-milestone-marker,
.preview-timeline-milestone:focus-visible .preview-timeline-milestone-marker {
  background: var(--timeline-point-hover-marker-bg, var(--timeline-point-marker-bg, var(--process-step-accent, var(--process-accent, #1f5d9c))));
  color: var(--timeline-point-hover-marker-text, var(--timeline-point-marker-text, #ffffff));
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 28px rgba(15, 73, 130, 0.28);
}

.preview-timeline-milestone:hover .preview-timeline-milestone-period,
.preview-timeline-milestone:focus-visible .preview-timeline-milestone-period {
  color: var(--timeline-point-hover-period-color, var(--timeline-point-period-color, #5d6d87));
}

.preview-timeline-milestone.is-active .preview-timeline-milestone-label strong,
.preview-timeline-milestone:hover .preview-timeline-milestone-label strong,
.preview-timeline-milestone:focus-visible .preview-timeline-milestone-label strong {
  color: var(--timeline-point-hover-title-color, var(--process-accent, #1f5d9c));
}

.preview-timeline-milestone:hover .preview-timeline-milestone-label span,
.preview-timeline-milestone:focus-visible .preview-timeline-milestone-label span {
  color: var(--timeline-point-hover-subtitle-color, var(--timeline-point-subtitle-color, #5a6984));
}

.preview-timeline-detail-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--timeline-point-detail-border, var(--process-card-border, rgba(20, 33, 51, 0.12)));
  background: var(--timeline-point-detail-bg, rgba(255, 255, 255, 0.97));
  box-shadow: var(--process-card-shadow, 0 20px 30px rgba(15, 73, 130, 0.12));
  padding: 1rem 1.05rem;
}

.preview-timeline-detail-card::before {
  content: '';
  position: absolute;
  top: -0.45rem;
  left: 2rem;
  width: 0.9rem;
  height: 0.9rem;
  transform: rotate(45deg);
  background: var(--timeline-point-detail-bg, rgba(255, 255, 255, 0.97));
  border-left: 1px solid var(--timeline-point-detail-border, var(--process-card-border, rgba(20, 33, 51, 0.12)));
  border-top: 1px solid var(--timeline-point-detail-border, var(--process-card-border, rgba(20, 33, 51, 0.12)));
}

.preview-timeline-detail-inner {
  display: grid;
  gap: 0.7rem;
}

.preview-timeline-detail-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.preview-timeline-detail-period {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #435776;
}

.preview-timeline-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-timeline-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.08);
  color: #26456b;
  font-size: 0.76rem;
  font-weight: 600;
}

.preview-step-empty {
  padding: 1rem;
  border-radius: 12px;
  background: #f4f6fb;
  color: #223152;
  font-weight: 600;
  text-align: center;
}

.preview-step {
  position: relative;
  padding: 1.3rem 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--process-card-border, rgba(20, 33, 51, 0.12));
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--process-card-shadow, 0 20px 30px rgba(15, 73, 130, 0.12));
  z-index: 1;
}

.preview-step-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}

.preview-step-title {
  font-size: 1rem;
  font-weight: 600;
  color: #141b2e;
}

.preview-step-meta {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.85rem;
  color: #4a5f7b;
}

.preview-step-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--process-signal-bg, rgba(31, 93, 156, 0.12));
  color: var(--process-signal-color, #1f5d9c);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.preview-step-signal-icon {
  font-size: 0.9rem;
}

.preview-step-date {
  font-weight: 600;
}

.preview-step-status {
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.preview-step-status--complete {
  color: #1b613c;
  background: #e8f8ef;
  border-color: #a8d9b4;
}

.preview-step-status--current {
  color: #7f4f00;
  background: #fff3d6;
  border-color: #f5d6a5;
}

.preview-step-status--upcoming {
  color: #3c4c66;
  background: #f0f3fb;
  border-color: #d5dbea;
}

.preview-step-status--blocked {
  color: #8a2323;
  background: #fce7e7;
  border-color: #f0bebe;
}

.preview-step-badge {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: #0f3456;
  background: #f0f5ff;
  border-radius: 18px;
  padding: 0.1rem 0.65rem;
}

.preview-step-body {
  font-size: 0.95rem;
  color: #111c2e;
  line-height: 1.5;
}

.preview-step-description {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: #2f3d59;
  line-height: 1.4;
}

.preview-step-sequence-hint {
  margin: -0.15rem 0 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f6383;
}

.preview-step-meta .preview-step-duration,
.preview-step-meta .preview-step-owner {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 0.45rem;
  color: #53607b;
}

.preview-step-deliverable {
  margin-top: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: #eef2ff;
  border: 1px solid rgba(31, 43, 70, 0.1);
  color: #132142;
  font-size: 0.85rem;
}

.preview-step-outcome {
  margin-top: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border-left: 4px solid var(--process-accent, #1f5d9c);
  background: rgba(31, 93, 156, 0.08);
  color: #0f1f36;
  font-size: 0.9rem;
  line-height: 1.5;
}

.preview-step-indicator {
  position: absolute;
  left: -2.8rem;
  top: 1.15rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--process-step-accent, var(--process-accent, #1f5d9c));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 6px 12px rgba(15, 73, 130, 0.25);
}

.preview-step-indicator::after {
  display: none;
}

.preview-step-indicator.is-final::after {
  display: none;
}

.preview-steps--flow .preview-step {
  border-color: rgba(15, 73, 130, 0.15);
  box-shadow: none;
}

.preview-steps--flow .preview-step-line {
  opacity: 0.85;
}

.preview-steps-track--orientation-vertical {
  padding-left: 3rem;
}

.preview-steps-track--orientation-vertical .preview-step-line {
  display: none;
}

.preview-steps-track--orientation-vertical .preview-step::after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: -1.66rem;
  top: 3.45rem;
  width: 2px;
  height: calc(100% + var(--preview-step-gap, 1rem) - 2.3rem);
  background: var(--process-accent, #1f5d9c);
  opacity: 0.92;
  z-index: 0;
}

.preview-steps-track--orientation-vertical .preview-step:last-child::after {
  display: none;
}

.preview-steps-track--orientation-horizontal {
  display: flex;
  align-items: stretch;
  gap: var(--preview-step-gap, 1rem);
  overflow-x: auto;
  overflow-y: visible;
  padding: 2rem 0.2rem 1.2rem;
  scroll-snap-type: x proximity;
}

.preview-steps-track--orientation-horizontal .preview-step {
  flex: 0 0 min(320px, 82vw);
  width: min(320px, 82vw);
  scroll-snap-align: start;
  padding-top: 1.7rem;
}

.preview-steps-track--orientation-horizontal .preview-step-indicator {
  left: auto;
  right: 1rem;
  top: 0.5rem;
}

.preview-steps-track--orientation-horizontal .preview-step-indicator::after {
  width: 40px;
  height: 2px;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.preview-step-line {
  position: absolute;
  pointer-events: none;
  left: 1.34rem;
  top: 1.2rem;
  bottom: 1rem;
  width: 2px;
  height: calc(100% - 2.4rem);
  z-index: 0;
}

.preview-steps-track--orientation-horizontal .preview-step-line {
  left: 1rem;
  right: 1rem;
  top: 1.63rem;
  bottom: auto;
  width: calc(100% - 2rem);
  height: 2px;
}

.preview-step-image {
  margin-top: 0.6rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 73, 130, 0.08);
}

.preview-step-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.preview-step-image.align-left {
  text-align: left;
}

.preview-step-image.align-right {
  text-align: right;
}

.preview-step-image.align-center {
  text-align: center;
}

.preview-step--interactive {
  padding-top: 1rem;
}

.preview-step-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.preview-step-toggle:disabled {
  cursor: not-allowed;
}

.preview-step-toggle-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  gap: 0.55rem;
}

.preview-step-toggle .preview-step-header {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.preview-step-toggle-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding-top: 0.05rem;
}

.preview-step-cue {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b6388;
  text-align: right;
  max-width: 8.5rem;
}

.preview-step-chevron {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 93, 156, 0.12);
  color: var(--process-accent, #1f5d9c);
  font-size: 1rem;
  font-weight: 700;
}

.preview-step-panel {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.preview-step-panel-header {
  display: grid;
  gap: 0.35rem;
}

.preview-step-panel[hidden] {
  display: none;
}

.preview-step--interactive.is-locked {
  opacity: 0.78;
}

.preview-step--interactive.is-locked .preview-step-cue {
  color: #7b889d;
}

.preview-step--interactive.is-open {
  border-color: rgba(31, 93, 156, 0.28);
  box-shadow: 0 24px 40px rgba(15, 73, 130, 0.16);
}

.preview-step-subtitle {
  font-size: 0.85rem;
  color: #4a5f7b;
}

.preview-step-annotation {
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  font-size: 0.82rem;
  color: #63708e;
  border-top: 1px solid rgba(15, 73, 130, 0.13);
}

.timeline-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-editor-general {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.timeline-toggle-field {
  min-height: 42px;
}

.timeline-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .preview-timeline-milestones {
    grid-auto-columns: minmax(140px, 1fr);
  }

  .preview-timeline-line {
    top: 3.15rem;
  }
}

body.workspace-dark .preview-timeline-rail {
  background: rgba(16, 26, 40, 0.92);
  border-color: rgba(131, 166, 214, 0.16);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.34);
}

body.workspace-dark .preview-timeline-milestone-period,
body.workspace-dark .preview-timeline-detail-period {
  color: #9eb4d7;
}

body.workspace-dark .preview-timeline-milestone-label {
  color: #dce8ff;
}

body.workspace-dark .preview-timeline-milestone-label span {
  color: #aabbd6;
}

body.workspace-dark .preview-timeline-detail-card {
  background: rgba(20, 32, 49, 0.98);
  border-color: rgba(131, 166, 214, 0.18);
}

body.workspace-dark .preview-timeline-detail-card::before {
  background: rgba(20, 32, 49, 0.98);
  border-left-color: rgba(131, 166, 214, 0.18);
  border-top-color: rgba(131, 166, 214, 0.18);
}

body.workspace-dark .preview-timeline-detail-chip {
  background: rgba(67, 104, 154, 0.18);
  color: #d4e4ff;
}

.preview-sorting-instructions {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.preview-sorting-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 0.65rem;
}

.preview-sorting-zone {
  border: 1px dashed var(--sorting-zone-accent, #c9d8ed);
  border-radius: 16px;
  padding: 0.9rem;
  background: var(--sorting-zone-background, #f8fbff);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.preview-sorting-zone-label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a5f7b;
}

.preview-sorting-zone-label-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.preview-sorting-zone-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.preview-sorting-zone-icon svg {
  width: 22px;
  height: 22px;
}

.preview-sorting-zone-description {
  font-size: 0.78rem;
  color: #5d6a88;
}

.preview-sorting-zone.is-drag-over {
  border-color: var(--brand);
  background: #e6f0ff;
}

.preview-sorting-items {
  flex: 1;
  display: grid;
  gap: 0.55rem;
}

.preview-sorting-accessible {
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  background: #f9fcff;
  display: grid;
  gap: 0.55rem;
}

.preview-sorting-accessible-title {
  font-size: 0.82rem;
  color: #4d6078;
}

.preview-sorting-accessible-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.preview-sorting-accessible-label {
  font-size: 0.86rem;
  color: #183049;
}

.sorting-category-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 0.85rem;
}

.sorting-category-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(15, 73, 130, 0.15);
  padding: 1rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15, 73, 130, 0.08);
}

.sorting-category-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sorting-category-accent, #cde4ff), transparent 70%);
}

.sorting-category-card .field {
  margin-top: 0.65rem;
}

.sorting-category-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}

.sorting-item-list {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.sorting-item-card {
  border-radius: 16px;
  border: 1px solid #dce4f2;
  background: #fff;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 14px rgba(9, 25, 61, 0.08);
}

.sorting-item-card .field {
  margin-bottom: 0;
}

.sorting-item-card button {
  align-self: flex-start;
}

.preview-sorting-item {
  border-radius: 10px;
  border: 1px solid #e0e6f0;
  background: #ffffff;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 8px 18px rgba(15, 73, 130, 0.08);
  cursor: grab;
}

.preview-sorting-item:active {
  cursor: grabbing;
}

.preview-sorting-item.is-dragging {
  opacity: 0.6;
}

.preview-sorting-item-label {
  font-weight: 500;
  color: var(--text);
}

.preview-sorting-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.preview-sorting-item-detail {
  font-size: 0.8rem;
  color: #5d6a88;
}

.preview-sorting-item-image {
  width: 100%;
  max-height: 140px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 1px solid #d3d8e6;
}

.preview-scenario-instructions {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.preview-scenario-options {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.preview-scenario-options-cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.preview-scenario-option {
  border-radius: 12px;
  border: 1px solid #d6dbed;
  background: #fdfefe;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font: inherit;
  color: #16253f;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 73, 130, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-scenario-option:hover {
  border-color: var(--brand);
}

.preview-scenario-option:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.preview-scenario-option.is-selected {
  border-color: var(--brand);
  box-shadow: 0 12px 24px rgba(31, 93, 156, 0.25);
}

.preview-scenario-option-label {
  font-weight: 600;
}

.preview-scenario-option-hint {
  font-size: 0.78rem;
  color: #5d6a88;
}

.preview-scenario-option-minimal {
  background: #f4f6fb;
  border-style: dashed;
  box-shadow: none;
}

.preview-scenario-card {
  min-height: 90px;
}

.preview-scenario-options-dialogue {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.preview-scenario-dialogue-bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-radius: 16px;
  border: 1px solid #d7dce8;
  background: #f9fbff;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-scenario-dialogue-bubble:hover {
  border-color: var(--brand);
}

.preview-scenario-dialogue-bubble--right {
  margin-left: auto;
  flex-direction: row-reverse;
}

.preview-scenario-dialogue-bubble--left {
  margin-right: auto;
}

.preview-scenario-dialogue-bubble--center {
  margin: 0 auto;
}

.preview-scenario-dialogue-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d0d7e5;
  background: #fff;
  flex-shrink: 0;
}

.preview-scenario-dialogue-bubble-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  max-width: 420px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #ffffff;
}

.preview-scenario-dialogue-bubble--right .preview-scenario-dialogue-bubble-content {
  background: #e8f2ff;
}

.preview-scenario-dialogue-speaker {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7791;
}

.preview-scenario-dialogue-hint {
  font-size: 0.82rem;
  color: #5d6a88;
}

.preview-scenario-dialogue-bubble.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(31, 93, 156, 0.12);
}

.preview-scenario-dialogue-bubble.is-selected .preview-scenario-dialogue-bubble-content {
  border-color: var(--brand);
}

.preview-conversation {
  display: grid;
  gap: 0.9rem;
}

.preview-conversation-title {
  margin: 0;
}

.preview-conversation-intro > :first-child {
  margin-top: 0;
}

.preview-conversation-intro > :last-child {
  margin-bottom: 0;
}

.preview-conversation-thread {
  display: grid;
  gap: 0.8rem;
}

.preview-conversation-entry {
  display: flex;
}

.preview-conversation-entry--right {
  justify-content: flex-end;
}

.preview-conversation-entry--center {
  justify-content: center;
}

.preview-conversation-bubble {
  width: min(100%, 760px);
  border: 1px solid #d9e1ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(17, 46, 84, 0.08);
  padding: 0.9rem 1rem;
}

.preview-conversation-entry--right .preview-conversation-bubble {
  background: linear-gradient(180deg, #eef6ff 0%, #e4efff 100%);
}

.preview-conversation-entry--center .preview-conversation-bubble {
  background: linear-gradient(180deg, #fbf6e7 0%, #fff8db 100%);
}

.preview-conversation-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.preview-conversation-speaker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #17324d;
}

.preview-conversation-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  background: #dfeaf7;
  color: #234d75;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-conversation-entry--center .preview-conversation-cue {
  background: #efdf9f;
  color: #725900;
}

.preview-conversation-body > :first-child {
  margin-top: 0;
}

.preview-conversation-body > :last-child {
  margin-bottom: 0;
}

.preview-card {
  border: 1px solid var(--builder-surface-border, #cad9ec);
  border-radius: 8px;
  background: var(--builder-surface-fill, var(--builder-surface-bg, #fff));
  padding: 0.65rem;
}

.preview-lesson[data-lesson-background-coverage="lesson_and_builders_and_inner_cards"] .preview-card:not(.preview-list-wrap) {
  background: var(--lesson-inner-card-bg, var(--builder-surface-bg, #fff));
  border-color: var(--lesson-inner-card-border, var(--builder-surface-border, #cad9ec));
  color: var(--lesson-inner-card-text, inherit);
  box-shadow: var(--lesson-inner-card-shadow, 0 12px 26px rgba(9, 23, 38, 0.1));
}

.cover-page-reminder.is-warning {
  color: #8b2f11;
  font-weight: 600;
}

.preview-cover-page {
  display: grid;
  grid-template-columns: minmax(180px, 40%) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  color: var(--preview-cover-text, inherit);
  border: 1px solid var(--preview-cover-border, #cad9ec);
  border-radius: 14px;
  padding: 0.9rem;
  background: var(--preview-cover-bg, linear-gradient(165deg, #f8fbff 0%, #ffffff 70%));
}

.preview-cover-page-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 320px;
  padding: 1.4rem;
  background-image: var(--preview-cover-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.preview-cover-page-hero .preview-cover-content {
  max-width: min(42rem, 100%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.preview-cover-page-hero.preview-cover-page-has-image .preview-cover-content {
  color: #ffffff;
}

.preview-cover-page-hero .preview-cover-content h2,
.preview-cover-page-hero .preview-cover-content .preview-rich,
.preview-cover-page-hero .preview-cover-content .preview-cover-author,
.preview-cover-page-hero .preview-cover-content .preview-cover-timing,
.preview-cover-page-hero .preview-cover-content .preview-cover-expectations-label,
.preview-cover-page-hero .preview-cover-content .preview-cover-expectations-list {
  color: inherit;
}

.preview-cover-media {
  margin: 0;
  border: 1px solid #d7e3f3;
  border-radius: 12px;
  padding: 0.45rem;
  background: #ffffff;
}

.preview-cover-media img {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.preview-cover-content h2 {
  margin: 0;
}

.preview-cover-author {
  margin-top: 0.35rem;
  margin-bottom: 0.55rem;
  color: var(--preview-cover-muted, #4a607d);
  font-weight: 600;
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .preview-cover-page {
    grid-template-columns: 1fr;
  }
}

.preview-chart {
  overflow: hidden;
}

.preview-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.85rem;
}

.preview-chart-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  opacity: 1;
  transform: none;
}

.preview-chart-legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(18, 38, 58, 0.08);
}

.preview-chart-pie-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.preview-chart-pie-graphic {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: 0 18px 36px rgba(17, 43, 70, 0.12);
  transform-origin: center;
}

.preview-chart-pie-hole {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.85rem;
  color: #35506b;
  box-shadow: inset 0 0 0 1px rgba(202, 217, 236, 0.9);
}

.preview-chart-pie-summary {
  flex: 1 1 220px;
}

.preview-chart-pie-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.45rem;
  opacity: 1;
  transform: none;
}

.preview-chart-pie-row:first-child {
  margin-top: 0;
}

.preview-chart-line-svg {
  display: block;
  overflow: visible;
}

.preview-chart-line-guide {
  stroke: rgba(53, 80, 107, 0.18);
  stroke-width: 1;
}

.preview-chart-line-area {
  fill: rgba(47, 109, 180, 0.12);
  opacity: 1;
}

.preview-chart-line-path {
  stroke-dashoffset: 0;
}

.preview-chart-line-dot {
  opacity: 1;
  transform-origin: center;
  transform: none;
}

.preview-chart-axis-labels {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.preview-chart-axis-label {
  font-size: 0.85rem;
  opacity: 1;
  transform: none;
}

.preview-chart-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
  opacity: 1;
  transform: none;
}

.preview-chart-bar-label,
.preview-chart-bar-value {
  font-size: 0.92rem;
}

.preview-chart-bar-track {
  height: 0.8rem;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.16);
  overflow: hidden;
}

.preview-chart-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--chart-fill-scale, 1));
}

.preview-chart.preview-chart-animate-once .preview-chart-legend-chip {
  opacity: 0;
  transform: translateY(8px);
  animation: preview-chart-rise 420ms ease forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-pie-graphic {
  animation: preview-chart-pie-enter 700ms cubic-bezier(.2,.9,.2,1) both;
}

.preview-chart.preview-chart-animate-once .preview-chart-pie-row {
  opacity: 0;
  transform: translateX(12px);
  animation: preview-chart-slide-in 420ms ease forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-line-area {
  opacity: 0;
  animation: preview-chart-area-reveal 600ms ease forwards;
  animation-delay: 140ms;
}

.preview-chart.preview-chart-animate-once .preview-chart-line-path {
  animation: preview-chart-line-draw 860ms cubic-bezier(.2,.8,.2,1) forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-line-dot {
  opacity: 0;
  animation: preview-chart-dot-pop 280ms ease forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-axis-label {
  opacity: 0;
  transform: translateY(8px);
  animation: preview-chart-rise 340ms ease forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-bar-row {
  opacity: 0;
  transform: translateY(10px);
  animation: preview-chart-rise 420ms ease forwards;
}

.preview-chart.preview-chart-animate-once .preview-chart-bar-fill {
  transform: scaleX(0);
  animation: preview-chart-bar-grow 760ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes preview-chart-bar-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(var(--chart-fill-scale, 1));
  }
}

@keyframes preview-chart-line-draw {
  from {
    stroke-dashoffset: var(--chart-stroke-length, 0);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes preview-chart-dot-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes preview-chart-area-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes preview-chart-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes preview-chart-slide-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes preview-chart-pie-enter {
  from {
    opacity: 0;
    transform: scale(0.82) rotate(-16deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-chart-legend-chip,
  .preview-chart-pie-graphic,
  .preview-chart-pie-row,
  .preview-chart-line-area,
  .preview-chart-line-path,
  .preview-chart-line-dot,
  .preview-chart-axis-label,
  .preview-chart-bar-row,
  .preview-chart-bar-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.preview-flashcards {
  position: relative;
  display: grid;
  gap: var(--flashcard-gap, 0.75rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.preview-flashcards-carousel {
  display: flex;
  gap: var(--flashcard-gap, 0.75rem);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.preview-flashcards-carousel .preview-flashcard {
  flex: 0 0 min(280px, 80%);
  scroll-snap-align: start;
}
.preview-flashcards-deck {
  position: relative;
  display: block;
  min-height: 320px;
}
.preview-flashcards-deck .preview-flashcard {
  width: min(360px, 90%);
  margin: 0 auto;
}

.preview-flashcard {
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  cursor: pointer;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  position: relative;
  overflow: visible;
}

.preview-flashcard-inner {
  position: relative;
  min-height: 220px;
  z-index: 1;
  border-radius: var(--flashcard-radius, 20px);
  border: var(--flashcard-border, 1px solid rgba(205, 214, 227, 0.6));
  box-shadow: var(--flashcard-shadow, 0 18px 45px rgba(15, 73, 130, 0.18));
  background: #fff;
  overflow: hidden;
}

.preview-flashcard-static {
  cursor: default;
  perspective: none;
  -webkit-perspective: none;
}

.preview-flashcard-inner-static {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
  min-height: 0;
  padding: 0.9rem;
}

.preview-flashcard-inner-static .preview-flashcard-face {
  position: relative;
  inset: auto;
  min-height: 220px;
}

.preview-flashcard-inner-static .preview-flashcard-front,
.preview-flashcard-inner-static .preview-flashcard-back {
  transform: none;
  opacity: 1;
}

.preview-flashcard-stack {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(var(--stack-offset, 0px)) rotate(var(--stack-rotate, 0deg));
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 1;
  opacity: var(--stack-opacity, 1);
}

.preview-flashcard-accent-pattern {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, var(--flashcard-accent-soft, rgba(255, 255, 255, 0.9)), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: blur(12px);
}

.preview-flashcard-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.preview-flashcard-pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}
.preview-flashcard-pattern-glow {
  opacity: 0.85;
}
.preview-flashcard-pattern-ribbon svg {
  mix-blend-mode: screen;
}
.preview-flashcard-pattern-halo svg {
  filter: blur(2px);
}
.preview-flashcard-pattern-grid svg {
  opacity: 0.65;
}
.preview-flashcard-pattern-wave svg {
  stroke-linecap: round;
}
.preview-flashcard-pattern-orbit svg {
  mix-blend-mode: screen;
}
.flashcard-style-hint {
  font-size: 0.75rem;
  color: #5c6a87;
  margin-top: 0.35rem;
}
.is-hidden {
  display: none !important;
}

.preview-flashcard:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

 
.preview-flashcard-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--flashcard-face-border, 1px solid rgba(205, 214, 227, 0.6));
  background: var(--flashcard-face-front-bg, linear-gradient(160deg, #ffffff 0%, #f2f6ff 80%));
  box-shadow: var(--flashcard-face-shadow, 0 12px 30px rgba(15, 73, 130, 0.12));
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.32s ease, opacity 0.22s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center center;
}

.preview-flashcard-front {
  transform: scaleX(1);
  opacity: 1;
  z-index: 2;
}

.preview-flashcard-back {
  transform: scaleX(0.96);
  background: var(--flashcard-face-back-bg, #f5f7fb);
  opacity: 0;
  z-index: 1;
}

.preview-flashcard.is-flipped .preview-flashcard-front {
  transform: scaleX(0.96);
  opacity: 0;
  z-index: 1;
}

.preview-flashcard.is-flipped .preview-flashcard-back {
  transform: scaleX(1);
  opacity: 1;
  z-index: 2;
}

.preview-flashcard-face-label {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4b5f79;
  margin-bottom: 0.4rem;
}

.preview-flashcard-face-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.preview-flashcard-face-tag {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--flashcard-accent, #dfeaff);
  color: #16213b;
}

.preview-flashcard-face-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.45rem;
  display: block;
  max-height: 140px;
  object-fit: contain;
}

.preview-flashcard-face-body {
  flex: 1;
  font-size: 0.95rem;
  color: #1b2330;
}

.preview-flashcard-face-hint {
  font-size: 0.78rem;
  color: #7b8da4;
  margin-top: 0.5rem;
}

.flashcard-settings-panel {
  margin-bottom: 1rem;
  display: grid;
  gap: 0.75rem;
  border-radius: 12px;
  border: 1px solid #dce4f2;
  padding: 1rem;
  background: #f8fbff;
}

.flashcard-layout-thumb {
  display: grid;
  gap: 0.24rem;
  align-items: stretch;
  min-height: 46px;
}

.flashcard-layout-thumb-grid,
.flashcard-layout-thumb-carousel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flashcard-layout-thumb-deck {
  grid-template-columns: 1fr;
}

.flashcard-layout-thumb-card {
  min-height: 14px;
  border-radius: 8px;
  background: linear-gradient(160deg, #ffffff 0%, #e9f0ff 100%);
  border: 1px solid rgba(31, 93, 156, 0.18);
  box-shadow: 0 4px 12px rgba(15, 73, 130, 0.08);
}

.flashcard-layout-thumb-carousel .flashcard-layout-thumb-card:nth-child(2) {
  transform: scale(1.06);
}

.flashcard-layout-thumb-deck .flashcard-layout-thumb-card:nth-child(2) {
  transform: translateY(-8px) scale(0.96);
  opacity: 0.88;
}

.flashcard-layout-thumb-deck .flashcard-layout-thumb-card:nth-child(3) {
  transform: translateY(-16px) scale(0.92);
  opacity: 0.76;
}

.flashcard-style-thumb {
  position: relative;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(31, 93, 156, 0.16);
  overflow: hidden;
}

.flashcard-style-thumb-accent,
.flashcard-style-thumb-body {
  position: absolute;
}

.flashcard-style-thumb-accent {
  inset: 6px 42% auto 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(47, 109, 180, 0.28);
}

.flashcard-style-thumb-body {
  inset: 18px 8px 8px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.flashcard-style-thumb-soft_gradient .flashcard-style-thumb-body {
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 90%);
}

.flashcard-style-thumb-neon_ribbon .flashcard-style-thumb-body {
  background: linear-gradient(160deg, #ffffff 0%, #f3f4ff 100%);
  box-shadow: inset 0 0 0 2px rgba(123, 92, 255, 0.18);
}

.flashcard-style-thumb-glass_grid .flashcard-style-thumb-body {
  background:
    linear-gradient(90deg, rgba(31, 93, 156, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(31, 93, 156, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.82);
  background-size: 10px 10px;
}

.flashcard-style-thumb-minimal_outline .flashcard-style-thumb-body {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(31, 93, 156, 0.14);
}

.flashcard-style-thumb-floating_accent .flashcard-style-thumb-body {
  background: linear-gradient(160deg, #ffffff 0%, #f0f2ff 100%);
  box-shadow: 0 10px 18px rgba(15, 73, 130, 0.12);
}

.flashcard-shape-thumb {
  min-height: 48px;
  border: 1px solid rgba(31, 93, 156, 0.18);
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 90%);
}

.flashcard-shape-thumb-rounded {
  border-radius: 20px;
}

.flashcard-shape-thumb-square {
  border-radius: 6px;
}

.flashcard-shape-thumb-pill {
  border-radius: 999px;
}

.flashcard-columns-thumb {
  min-height: 46px;
  display: grid;
  gap: 0.24rem;
  align-items: stretch;
  grid-auto-flow: column;
}

.flashcard-columns-thumb-col {
  border-radius: 8px;
  border: 1px solid rgba(31, 93, 156, 0.14);
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 90%);
}

.flashcard-spacing-thumb {
  min-height: 46px;
  display: grid;
  gap: var(--flashcard-spacing-thumb-gap, 9px);
}

.flashcard-spacing-thumb-card {
  border-radius: 10px;
  border: 1px solid rgba(31, 93, 156, 0.16);
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 90%);
}
.flashcard-item-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flashcard-toggle-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.flashcard-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.flashcard-toggle-row input {
  width: 1rem;
  height: 1rem;
}
.flashcard-toggle-row span {
  font-size: 0.95rem;
  color: #1f2530;
}
.flashcard-add-row {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-start;
}

.flashcard-editor-wrap {
  display: flex;
  flex-direction: column;
}

.collection-workspace-shell {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.collection-workspace-rail {
  position: sticky;
  top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 18px;
  border: 1px solid #dce4f2;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: 0 12px 28px rgba(9, 25, 61, 0.08);
}

.collection-workspace-rail-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #13203e;
}

.collection-workspace-rail-hint {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #5f6b7a;
}

.collection-workspace-rail-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.collection-workspace-rail-item {
  width: 100%;
  text-align: left;
  border: 1px solid #d9e4f1;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 10px 22px rgba(12, 31, 65, 0.05);
}

.collection-workspace-rail-item.active {
  border-color: #1f5d9c;
  box-shadow: 0 14px 30px rgba(31, 93, 156, 0.16);
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.collection-workspace-rail-item.is-drop-target {
  outline: 2px dashed rgba(31, 93, 156, 0.4);
  outline-offset: 2px;
}

.collection-workspace-rail-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #13203e;
}

.collection-workspace-rail-item-summary {
  font-size: 0.8rem;
  color: #5f6b7a;
  line-height: 1.4;
}

.collection-workspace-add-button {
  width: 100%;
}

.collection-workspace-main {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.collection-workspace-preview-card {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border-radius: 18px;
  border: 1px solid #dce4f2;
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(9, 25, 61, 0.08);
}

.collection-workspace-preview-media {
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef3fb 100%);
  border: 1px solid #dce4f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-workspace-preview-media img,
.collection-workspace-preview-media .preview-media-frame,
.collection-workspace-preview-shell {
  width: 100%;
  height: 100%;
}

.collection-workspace-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.collection-workspace-preview-empty {
  padding: 1rem;
  text-align: center;
  color: #5f6b7a;
  font-size: 0.9rem;
}

.collection-workspace-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.collection-workspace-preview-meta strong {
  font-size: 1rem;
  color: #13203e;
}

.collection-workspace-preview-summary {
  color: #5f6b7a;
  line-height: 1.55;
}

.collection-workspace-toolbar {
  display: flex;
  align-items: center;
}

.collection-workspace-toolbar .editor-view-switch {
  width: 100%;
}

.collection-workspace-toolbar .editor-view-chip {
  flex: 1 1 0;
  white-space: nowrap;
}

.collection-workspace-panel {
  border-radius: 18px;
  border: 1px solid #dce4f2;
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(9, 25, 61, 0.08);
}

.collection-workspace-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.collection-workspace-inline-switch .editor-view-chip {
  min-width: 0;
}

.collection-workspace-preview-card-flashcard {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.collection-workspace-flashcard-faces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.collection-workspace-flashcard-face {
  border-radius: 16px;
  border: 1px solid #dce4f2;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 150px;
}

.collection-workspace-flashcard-face-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6b7a;
}

.collection-workspace-flashcard-face-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #13203e;
}

.flashcard-editor-card {
  border-radius: 16px;
  border: 1px solid #dce4f2;
  background: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 12px 30px rgba(9, 25, 61, 0.08);
}

.flashcard-editor-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.flashcard-editor-card-tag {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #f0f4ff;
  color: #13203e;
}

.flashcard-editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

@media (max-width: 980px) {
  .collection-workspace-shell {
    grid-template-columns: 1fr;
  }

  .collection-workspace-rail {
    position: static;
  }

  .collection-workspace-preview-card {
    grid-template-columns: 1fr;
  }

  .collection-workspace-flashcard-faces {
    grid-template-columns: 1fr;
  }
}

.simulation-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.target-placement-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.target-placement-stage-column,
.target-placement-panel-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.style-studio-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.style-studio-workspace.is-compact {
  gap: 0.65rem;
}

.style-studio-switch {
  width: 100%;
}

.style-studio-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  width: 100%;
  border-radius: 16px;
  padding: 0.35rem;
  gap: 0.35rem;
}

.style-studio-switch-grid .editor-view-chip {
  min-width: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.style-studio-panel-host {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.style-studio-tips {
  border: 1px solid #d7e3f0;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.45rem 0.6rem;
}

.style-studio-tips > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #32557b;
}

.style-studio-tips .field-hint {
  margin-top: 0.45rem;
}

.paragraph-style-studio {
  gap: 0.55rem;
}

.paragraph-style-studio .style-box {
  padding: 0.45rem;
  gap: 0.4rem;
  border-radius: 12px;
}

.paragraph-style-studio .field {
  margin-top: 0;
}

.paragraph-style-studio .editor-view-switch {
  background: #f3f7fd;
}

.paragraph-style-studio .editor-view-chip {
  font-size: 0.78rem;
  padding: 0.4rem 0.55rem;
}

.paragraph-style-studio-advanced .style-box {
  background: #fbfcff;
}

.action-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.action-workspace-preview-column,
.action-workspace-panel-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.simulation-editor-stage-column,
.simulation-editor-panel-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.simulation-editor-add-row {
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 1100px) {
  .target-placement-workspace,
  .action-workspace,
  .simulation-editor-shell {
    grid-template-columns: 1fr;
  }
}
.preview-quote {
  position: relative;
  border: 1px solid var(--quote-border, #dbe4f7);
  border-radius: 18px;
  padding: 1.6rem 1.75rem;
  background: var(--quote-bg, #ffffff);
  color: var(--quote-text, inherit);
  font-family: var(--quote-font, "Georgia", serif);
  box-shadow: var(--quote-shadow, 0 18px 40px rgba(0, 0, 0, 0.1));
  overflow: hidden;
  margin: 1.2rem 0;
  padding-top: 2.4rem;
}

.preview-quote[data-layout='image'] {
  background:
    linear-gradient(180deg, rgba(8, 20, 33, calc(1 - var(--quote-image-overlay, 0.52))), rgba(8, 20, 33, calc(0.22 + (1 - var(--quote-image-overlay, 0.52))))),
    var(--quote-bg-image, none),
    var(--quote-bg, #ffffff);
  background-size: cover;
  background-position: center;
  color: var(--quote-text, #f7fbff);
  border: none;
  min-height: 320px;
  display: grid;
  align-content: center;
}

.preview-quote > :not(.preview-quote-pattern) {
  position: relative;
  z-index: 1;
}

.preview-quote-icon-wrap {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--quote-accent, #1f5d9c);
  font-size: 2rem;
  position: absolute;
  top: 0.35rem;
  left: 1.1rem;
  transform: translateY(-30%);
  z-index: 1;
}

.preview-quote-icon {
  font-size: 2rem;
  line-height: 1;
}

.preview-quote-icon--secondary {
  font-size: 1.2rem;
  opacity: 0.8;
}

.preview-quote-body {
  margin: 0.35rem 0 0;
  font-size: 1.16rem;
  line-height: 1.62;
  font-weight: 500;
}

.preview-quote-author-image {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--quote-accent, #1f5d9c) 28%, white);
  box-shadow: 0 12px 30px rgba(8, 20, 33, 0.2);
  margin-bottom: 0.65rem;
}

.preview-quote[data-author-image-placement='top-center'] .preview-quote-author-image {
  margin-left: auto;
  margin-right: auto;
}

.preview-quote[data-author-image-placement='left'] {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}

.preview-quote[data-author-image-placement='left'] .preview-quote-icon-wrap,
.preview-quote[data-author-image-placement='left'] .preview-quote-pattern {
  grid-column: 1 / -1;
}

.preview-quote[data-author-image-placement='left'] .preview-quote-author-image {
  grid-row: 2 / span 2;
  margin-top: 0.4rem;
}

.preview-quote[data-author-image-placement='left'] .preview-quote-body,
.preview-quote[data-author-image-placement='left'] .preview-quote-meta {
  grid-column: 2;
}

.preview-quote[data-author-image-placement='right'] {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: start;
}

.preview-quote[data-author-image-placement='right'] .preview-quote-icon-wrap,
.preview-quote[data-author-image-placement='right'] .preview-quote-pattern {
  grid-column: 1 / -1;
}

.preview-quote[data-author-image-placement='right'] .preview-quote-author-image {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin-top: 0.4rem;
}

.preview-quote[data-author-image-placement='right'] .preview-quote-body,
.preview-quote[data-author-image-placement='right'] .preview-quote-meta {
  grid-column: 1;
}

.preview-quote-meta {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: rgba(22, 32, 52, 0.75);
  max-width: min(100%, 24rem);
}

.preview-quote[data-author-position='left'] .preview-quote-meta {
  margin-right: auto;
  text-align: left;
  align-items: flex-start;
}

.preview-quote[data-author-position='right'] .preview-quote-meta {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.preview-quote[data-author-position='bottom-center'] .preview-quote-meta,
.preview-quote[data-author-position='top-center'] .preview-quote-meta {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

.preview-quote-meta.is-top {
  margin-top: 0.15rem;
  margin-bottom: 0.8rem;
}

.preview-quote-author {
  font-weight: 600;
}

.preview-quote-role {
  font-style: italic;
  color: rgba(22, 32, 52, 0.65);
}

.preview-quote-source a {
  color: var(--quote-accent, #1f5d9c);
  text-decoration: none;
}

.preview-quote-source a:hover {
  text-decoration: underline;
}

.preview-quote-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}

.preview-quote-pattern[data-variant='none'] {
  opacity: 0;
  background-image: none;
}

.preview-quote-graphic {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.45;
}

.preview-quote[data-layout='card'] {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--quote-accent, #1f5d9c);
}

.preview-quote[data-layout='banner'] {
  border-top-width: 6px;
  border-top-style: solid;
  border-top-color: var(--quote-accent, #1f5d9c);
  padding-top: 2.2rem;
}

.preview-quote[data-layout='glass'] {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 22px 50px rgba(15, 73, 130, 0.18);
  backdrop-filter: blur(12px);
}

.preview-quote[data-layout='spotlight'] {
  background: #0c1420;
  color: var(--quote-text, #f8f5ea);
  border: none;
  box-shadow: var(--quote-shadow, 0 30px 60px rgba(12, 20, 32, 0.6));
}

.preview-quote[data-align='center'] {
  text-align: center;
}

.preview-quote[data-align='right'] {
  text-align: right;
}

.preview-quote-pattern[data-variant='dots'] {
  background-image: radial-gradient(var(--quote-accent, rgba(31, 93, 156, 0.65)) 2px, transparent 2px);
  background-size: 18px 18px;
}

.preview-quote-pattern[data-variant='lines'],
.preview-quote-pattern[data-variant='grid'] {
  background-image: none;
  opacity: 0;
}

.preview-quote-pattern[data-variant='waves'] {
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0) 40px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0) 45px);
  opacity: 0.25;
}

.preview-quote-carousel {
  display: grid;
  gap: 0.75rem;
}

.preview-quote-carousel-stage {
  min-width: 0;
}

.preview-quote-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.preview-quote-carousel-button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
}

.preview-quote-carousel-status {
  font-size: 0.84rem;
  color: var(--quote-accent, #1f5d9c);
  font-weight: 700;
}

.preview-text-stack {
  display: grid;
  gap: 0.7rem;
  color: var(--builder-surface-text, #15212e);
}

.preview-text-stack.preview-card {
  padding: 0.9rem 1rem;
  border-radius: 16px;
}

.preview-text-stack-heading,
.preview-text-stack-subheading,
.preview-text-stack-body {
  min-width: 0;
}

.preview-text-stack-heading > :first-child,
.preview-text-stack-subheading > :first-child,
.preview-text-stack-body > :first-child {
  margin-top: 0;
}

.preview-text-stack-heading > :last-child,
.preview-text-stack-subheading > :last-child,
.preview-text-stack-body > :last-child {
  margin-bottom: 0;
}

.preview-text-stack-heading {
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--builder-surface-text, #15212e);
}

.preview-text-stack-subheading {
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--builder-surface-text, #15212e) 72%, white);
}

.preview-text-stack-body {
  column-count: var(--preview-text-columns, 1);
  column-gap: clamp(1.1rem, 2vw, 2rem);
}

.preview-text-stack-heading + .preview-text-stack-body,
.preview-text-stack-subheading + .preview-text-stack-body,
.preview-text-stack-subheading + .preview-text-stack-heading,
.preview-text-stack-heading + .preview-text-stack-subheading {
  margin-top: 0.18rem;
}

.preview-text-stack-body > * {
  break-inside: avoid;
}

@media (max-width: 900px) {
  .paragraph-workspace-editor-field.preview-text-stack-body .rte-editor {
    column-count: min(var(--preview-text-columns, 1), 2);
  }

  .preview-text-stack-body {
    column-count: min(var(--preview-text-columns, 1), 2);
  }
}

@media (max-width: 640px) {
  .paragraph-workspace-editor-field.preview-text-stack-body .rte-editor {
    column-count: 1;
  }

  .preview-text-stack-body {
    column-count: 1;
  }
}

.preview-accordion {
  display: grid;
  gap: 0.65rem;
}

.preview-accordion-card {
  border-radius: 14px;
  border: 1px solid rgba(15, 73, 130, 0.12);
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(15, 73, 130, 0.08);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.preview-accordion-card.is-open {
  border-color: var(--accordion-accent, #1f5d9c);
  box-shadow: 0 22px 42px rgba(15, 73, 130, 0.18);
}

.preview-accordion-summary {
  border: none;
  background: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.preview-accordion-indicator {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 160, 182, 0.5);
  background: #f4f7fb;
  color: #1f5d9c;
}

.preview-accordion-variant-panel .preview-accordion-indicator {
  border-color: transparent;
  background: var(--accordion-accent, #1f5d9c);
  color: #fff;
}

.preview-accordion-icon {
  font-size: 1.25rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 93, 156, 0.12);
}

.preview-accordion-icon-right {
  order: 3;
  margin-left: auto;
}

.preview-accordion-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.preview-accordion-title {
  font-weight: 600;
  font-size: 1rem;
  color: #142133;
}

.preview-accordion-inline-edit.doc-direct-editor {
  cursor: text;
}

.preview-accordion-inline-edit.doc-direct-editor:focus {
  outline: 2px solid rgba(47, 109, 180, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

.preview-accordion-subtitle {
  font-size: 0.85rem;
  color: #4a5f7b;
}

.preview-accordion-summary-text {
  font-size: 0.8rem;
  color: #5a6680;
}

.preview-accordion-meta {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #789;
}

.preview-accordion-date {
  font-weight: 600;
}

.preview-accordion-status {
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1f5d9c;
  background: rgba(31, 93, 156, 0.08);
}

.preview-accordion-status--complete {
  color: #1b613c;
  background: #e8f8ef;
}

.preview-accordion-status--current {
  color: #7f4f00;
  background: #fff3d6;
}

.preview-accordion-status--upcoming {
  color: #3c4c66;
  background: #f0f3fb;
}

.preview-accordion-status--blocked {
  color: #8a2323;
  background: #fbe9e9;
}

.preview-accordion-badge {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 73, 130, 0.3);
  background: rgba(15, 73, 130, 0.08);
  color: #0f3456;
}

.preview-accordion-content {
  padding: 0 1.25rem 1.2rem;
  border-top: 1px solid rgba(15, 73, 130, 0.08);
}

.preview-accordion-content.is-hidden {
  display: none;
}

.preview-accordion-annotation {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(15, 73, 130, 0.08);
  font-size: 0.85rem;
  color: #566077;
}

.preview-accordion-image {
  margin-bottom: 0.65rem;
}

.preview-accordion-image.align-left {
  text-align: left;
}

.preview-accordion-image.align-right {
  text-align: right;
}

.preview-accordion-image.align-center {
  text-align: center;
}

.preview-accordion-image.align-left img,
.preview-accordion-image.align-right img {
  max-width: 40%;
}

.preview-accordion-image.align-left img {
  float: left;
  margin: 0 0.9rem 0.85rem 0;
}

.preview-accordion-image.align-right img {
  float: right;
  margin: 0 0 0.85rem 0.9rem;
}

.preview-accordion-image.align-center img {
  margin: 0 auto 0.85rem;
  display: block;
  max-width: 100%;
}

.preview-accordion-item-image {
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 73, 130, 0.15);
  max-width: 100%;
  height: auto;
  display: block;
}

.preview-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tab-btn-gap, 0.35rem);
  margin-bottom: 0.75rem;
}

.preview-tab-btn {
  border-width: var(--tab-btn-border-width, 1px);
  border-style: solid;
  border-radius: var(--tab-btn-border-radius, 999px);
  border-color: var(--tab-btn-border-color, transparent);
  padding: var(--tab-btn-padding, 0.45rem 0.95rem);
  font: inherit;
  font-size: var(--tab-btn-font-size, 1rem);
  background: var(--tab-btn-bg, #f4f6fb);
  color: var(--tab-btn-color, #1d2534);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: var(--tab-btn-shadow, none);
}

.preview-tab-btn:hover {
  border-color: var(--tab-btn-hover-border, var(--tab-btn-border-color, #d6dbe7));
  background: var(--tab-btn-hover-bg, #e8effc);
}

.preview-tab-btn.is-active {
  border-color: var(--tab-btn-active-border, var(--tab-btn-border-color, #1f5d9c));
  background: var(--tab-btn-active-bg, #ffffff);
  color: var(--tab-btn-active-color, #1f5d9c);
}

.preview-tabs-content {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: #ffffff;
}

.preview-tab-title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.preview-tab-body {
  color: #1d2534;
}

.preview-tab-image {
  margin: 0 0 0.75rem;
}

.preview-tab-image.align-left {
  text-align: left;
}

.preview-tab-image.align-right {
  text-align: right;
}

.preview-tab-image.align-center {
  text-align: center;
}

.preview-tab-item-image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  display: inline-block;
  height: auto;
}

.preview-note {
  font-size: 0.82rem;
  color: var(--preview-muted, #496078);
}

.preview-attachment-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.preview-carousel {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 1rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}

.preview-carousel-stage {
  min-height: 160px;
  background: #f6f9ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.preview-carousel-placeholder {
  color: var(--muted);
  font-size: 0.9rem;
}

.preview-carousel-caption {
  font-size: 0.95rem;
  color: #142133;
}

.preview-carousel-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.preview-carousel-control {
  border: 1px solid #d6dbe7;
  background: #eef2ff;
  color: #142133;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 1rem;
}

.preview-image-comparison {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 1rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-image-comparison-stage {
  position: relative;
  border-radius: 10px;
  background: #f6f9ff;
  min-height: 180px;
  overflow: hidden;
}

.preview-image-comparison-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.preview-image-comparison-pane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-image-comparison-pane-after {
  z-index: 2;
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background: #fff;
}

.preview-image-comparison-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(20, 33, 51, 0.78);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.preview-image-comparison-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: rgba(20, 33, 51, 0.84);
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 22px rgba(8, 18, 35, 0.28);
}

.preview-image-comparison-knob::before,
.preview-image-comparison-knob::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid #fff;
}

.preview-image-comparison-knob::before {
  left: 0.62rem;
  border-left: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
}

.preview-image-comparison-knob::after {
  right: 0.62rem;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.preview-image-comparison-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 5;
  cursor: ew-resize;
}

.preview-image-comparison-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #142133;
  letter-spacing: 0.02em;
}

.preview-image-comparison-label {
  font-weight: 600;
}

.preview-image-comparison-placeholder {
  color: #4d6078;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.preview-image-comparison-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #4d6078;
  text-align: center;
  padding: 0 1rem;
  z-index: 4;
}

.preview-image-diff-slider {
  display: grid;
  gap: 0.7rem;
}

.preview-image-diff-reference {
  margin: 0;
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 0.7rem;
  background: #ffffff;
  display: grid;
  gap: 0.45rem;
}

.preview-image-diff-reference-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #142133;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.preview-image-diff-reference img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
}

.preview-cause-effect {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(160deg, #f7fbff 0%, #ffffff 58%);
  display: grid;
  gap: 0.8rem;
}

.preview-cause-effect-header h3 {
  margin: 0;
  color: #142133;
}

.preview-cause-effect-header p {
  margin: 0.35rem 0 0;
  color: #3f5872;
}

.preview-cause-effect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-cause-effect-selection {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(190, 205, 226, 0.85);
}

.preview-cause-effect-selection strong {
  color: #16304d;
}

.preview-cause-effect-selection p {
  margin: 0;
  color: #3b546d;
  font-size: 0.92rem;
}

.preview-cause-effect-selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.preview-cause-effect-action {
  border: 1px solid #b9cce8;
  background: #eef4ff;
  color: #153256;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.preview-cause-effect-action.active {
  background: #1f5d9c;
  color: #ffffff;
  border-color: #1f5d9c;
}

.preview-cause-effect-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem;
}

.preview-cause-effect-guide {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: #3b546d;
  padding: 0.15rem 0 0.1rem;
}

.preview-cause-effect-toggle-group {
  display: grid;
  gap: 0.35rem;
}

.preview-cause-effect-toggle-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #375370;
}

.preview-cause-effect-toggle-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.preview-cause-effect-toggle {
  border: 1px solid #b9cce8;
  background: #ffffff;
  color: #153256;
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.preview-cause-effect-toggle.active {
  background: #1f5d9c;
  color: #ffffff;
  border-color: #1f5d9c;
}

.preview-cause-effect-ripple {
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% center, rgba(31, 93, 156, 0.26) 0 24%, transparent 26%),
    radial-gradient(circle at 38% center, rgba(31, 93, 156, 0.2) 0 24%, transparent 26%),
    radial-gradient(circle at 62% center, rgba(31, 93, 156, 0.16) 0 24%, transparent 26%),
    radial-gradient(circle at 84% center, rgba(31, 93, 156, 0.12) 0 24%, transparent 26%),
    linear-gradient(90deg, rgba(31, 93, 156, 0.07) 0%, rgba(31, 93, 156, 0.01) 100%);
  background-size: 220% 100%;
  animation: preview-ripple-shift 2.6s linear infinite;
}

.preview-cause-effect-stream {
  display: grid;
  gap: 0.55rem;
}

.preview-cause-effect-summary {
  font-size: 0.86rem;
  color: #35506b;
}

.preview-cause-effect-cards {
  display: grid;
  gap: 0.55rem;
}

.preview-cause-card {
  border: 1px solid #d6dbe7;
  border-left: 4px solid #6b7f93;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: #ffffff;
  display: grid;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  animation: preview-cause-in 320ms ease forwards;
}

.preview-cause-card.path-good {
  border-left-color: #1f8a4c;
}

.preview-cause-card.path-bad {
  border-left-color: #c84343;
}

.preview-cause-card.path-neutral {
  border-left-color: #6b7f93;
}

.preview-cause-card.severity-low {
  box-shadow: 0 2px 8px rgba(34, 139, 84, 0.08);
}

.preview-cause-card.severity-medium {
  box-shadow: 0 2px 10px rgba(58, 95, 140, 0.11);
}

.preview-cause-card.severity-high {
  box-shadow: 0 3px 12px rgba(190, 107, 34, 0.18);
}

.preview-cause-card.severity-critical {
  box-shadow: 0 4px 14px rgba(186, 63, 63, 0.22);
}

.preview-cause-card p {
  margin: 0;
  color: #2d4259;
  font-size: 0.92rem;
}

.preview-cause-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.preview-chip {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  background: #eaf0fb;
  color: #234264;
}

.preview-chip.severity {
  background: #fdf0cf;
  color: #7a4d00;
}

@keyframes preview-cause-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preview-ripple-shift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.preview-confidence-challenge {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(165deg, #f7fbff 0%, #ffffff 60%);
  display: grid;
  gap: 0.75rem;
}

.preview-confidence-overview {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(190, 205, 226, 0.9);
}

.preview-confidence-overview strong {
  color: #173250;
}

.preview-confidence-overview p {
  margin: 0;
  color: #3b546d;
  font-size: 0.92rem;
}

.preview-confidence-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.preview-confidence-options {
  display: grid;
  gap: 0.45rem;
}

.preview-confidence-option {
  border: 1px solid #c4d6ed;
  background: #eef5ff;
  color: #16344f;
  border-radius: 10px;
  padding: 0.5rem 0.72rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.preview-confidence-option:hover {
  border-color: #8cb2da;
  background: #e6f0ff;
}

.preview-confidence-option.active {
  border-color: #1f5d9c;
  background: #1f5d9c;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(31, 93, 156, 0.25);
}

.preview-confidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-confidence-chip {
  border: 1px solid #b9cce8;
  background: #eef4ff;
  color: #18395a;
  border-radius: 999px;
  padding: 0.3rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.preview-confidence-chip.active {
  border-color: #1f5d9c;
  background: #1f5d9c;
  color: #ffffff;
}

.preview-confidence-feedback {
  border: 1px solid #d6dbe7;
  border-radius: 10px;
  background: #f4f8ff;
  color: #1d3551;
  padding: 0.6rem 0.72rem;
  min-height: 2rem;
}

.preview-confidence-feedback.is-success {
  border-color: #9fd2b0;
  background: #eaf8f0;
  color: #145332;
}

.preview-confidence-feedback.is-error {
  border-color: #e2b0b0;
  background: #ffeaea;
  color: #7b2525;
}

.preview-confidence-feedback p {
  margin: 0;
}

.preview-confidence-stats {
  display: grid;
  gap: 0.45rem;
}

.preview-confidence-summary,
.preview-confidence-review,
.preview-confidence-recap {
  border: 1px solid #d6dbe7;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.52rem 0.66rem;
  font-size: 0.86rem;
  color: #203a58;
}

.preview-confidence-followups,
.preview-confidence-review-target {
  display: grid;
  gap: 0.45rem;
}

.preview-confidence-followup-card,
.preview-confidence-review-target-card {
  display: grid;
  gap: 0.55rem;
  border: 1px solid #d6dbe7;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.7rem 0.78rem;
}

.preview-confidence-heatmap {
  display: grid;
  gap: 0.34rem;
}

.preview-confidence-heat-row {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

.preview-confidence-heat-row span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4c6682;
}

.preview-confidence-meter {
  height: 8px;
  border-radius: 999px;
  background: #dce6f5;
  overflow: hidden;
}

.preview-confidence-meter-fill {
  height: 100%;
  background: #1f5d9c;
}

.preview-confidence-heat-row.bucket-uncertain .preview-confidence-meter-fill {
  background: #bb8213;
}

.preview-confidence-heat-row.bucket-overconfident .preview-confidence-meter-fill {
  background: #c84343;
}

.preview-confidence-review ul {
  margin: 0.4rem 0 0;
  padding-left: 1rem;
}

.preview-guided-annotation {
  border: 1px solid #d6dbe7;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(170deg, #f8fbff 0%, #ffffff 62%);
  display: grid;
  gap: 0.75rem;
}

.preview-guided-annotation-header h3 {
  margin: 0;
  color: #142133;
}

.preview-guided-annotation-header p {
  margin: 0.35rem 0 0;
  color: #3f5872;
}

.preview-guided-annotation-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #eef3ff;
  border: 1px solid #d6dbe7;
  min-height: 220px;
}

.preview-guided-annotation-canvas {
  position: relative;
}

.preview-guided-annotation-canvas img {
  width: 100%;
  display: block;
  max-height: 440px;
  object-fit: contain;
  background: #ffffff;
}

.preview-guided-annotation-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f6580;
  text-align: center;
  padding: 0 1rem;
  font-size: 0.92rem;
}

.preview-guided-zone {
  position: absolute;
  border: 2px dashed rgba(31, 93, 156, 0.5);
  background: rgba(31, 93, 156, 0.07);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}

.preview-guided-zone.risk-high,
.preview-guided-zone.risk-critical {
  border-color: rgba(196, 67, 67, 0.72);
  background: rgba(196, 67, 67, 0.08);
}

.preview-guided-zone.tolerance-hidden {
  border-color: transparent;
  background: transparent;
}

.preview-guided-zone.is-marked {
  outline: 2px solid rgba(31, 138, 76, 0.8);
  outline-offset: -2px;
}

.preview-guided-zone-expert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #ffffff;
  background: rgba(16, 28, 46, 0.78);
  padding: 0.18rem 0.28rem;
  text-align: left;
}

.preview-guided-annotation-toolbar {
  display: grid;
  gap: 0.45rem;
}

.preview-guided-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.preview-guided-tool {
  border: 1px solid #b9cce8;
  background: #eef4ff;
  color: #16395d;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  text-transform: capitalize;
  cursor: pointer;
}

.preview-guided-tool.active {
  background: #1f5d9c;
  color: #ffffff;
  border-color: #1f5d9c;
}

.preview-guided-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.preview-guided-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.45rem;
}

.preview-guided-inputs input {
  border: 1px solid #c8d4e7;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}

.preview-guided-results {
  display: grid;
  gap: 0.45rem;
}

.preview-guided-scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.4rem;
}

.preview-guided-score-row {
  border: 1px solid #d6dbe7;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  color: #214160;
}

.preview-guided-summary {
  font-size: 0.86rem;
  color: #35506b;
}

.preview-guided-review {
  border: 1px solid #e6c7c7;
  border-radius: 8px;
  background: #fff6f6;
  color: #7e2f2f;
  padding: 0.5rem 0.6rem;
}

.preview-guided-review ul {
  margin: 0;
  padding-left: 1.1rem;
}

.preview-continue {
  margin: 1rem 0;
  display: grid;
  gap: 0.35rem;
  align-items: flex-start;
}

.continue-align-center {
  justify-items: center;
}

.continue-align-right {
  justify-items: end;
}

.continue-button {
  --continue-accent: var(--brand);
  --continue-secondary: #dff1ff;
  --continue-text: #ffffff;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  display: inline-grid;
  width: auto;
  cursor: pointer;
}

.continue-button.is-full-width {
  width: 100%;
}

.continue-button-shell {
  position: relative;
  display: inline-grid;
  align-items: center;
  grid-auto-flow: column;
  gap: 0.7rem;
  min-width: 0;
}

.continue-button.is-full-width .continue-button-shell {
  width: 100%;
}

.continue-button-core {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.continue-button-core.is-icon-only {
  gap: 0;
  padding-inline: 0.92rem;
}

.continue-button-icon,
.continue-button-line,
.continue-button-accent {
  pointer-events: none;
}

.continue-button-label {
  white-space: nowrap;
}

.continue-size-sm .continue-button-core {
  font-size: 0.84rem;
  padding: 0.5rem 0.95rem;
}

.continue-size-md .continue-button-core {
  font-size: 0.95rem;
  padding: 0.68rem 1.15rem;
}

.continue-size-lg .continue-button-core {
  font-size: 1.04rem;
  padding: 0.82rem 1.38rem;
}

.continue-size-xl .continue-button-core {
  font-size: 1.14rem;
  padding: 0.95rem 1.65rem;
}

.continue-size-sm .continue-button-icon {
  font-size: 0.95rem;
}

.continue-size-md .continue-button-icon {
  font-size: 1.05rem;
}

.continue-size-lg .continue-button-icon {
  font-size: 1.18rem;
}

.continue-size-xl .continue-button-icon {
  font-size: 1.3rem;
}

.continue-button-line {
  align-self: center;
}

.continue-button:hover .continue-button-core {
  transform: translateY(-1px);
}

.continue-button.is-live-motion.continue-motion-blink .continue-button-core {
  animation: continueSoftBlink 2.8s ease-in-out infinite;
}

.continue-button.is-live-motion.continue-motion-nudge .continue-button-core {
  animation: continueDownNudge 2.4s ease-in-out infinite;
}

.continue-button.is-live-motion.continue-motion-beacon .continue-button-core {
  animation: continueBeaconFloat 2.6s ease-in-out infinite;
}

.continue-button.is-live-motion.continue-motion-beacon .continue-button-accent {
  animation: continueBeaconPulse 2.6s ease-in-out infinite;
}

.continue-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.continue-button:disabled .continue-button-core {
  transform: none;
  box-shadow: none;
}

.continue-preset-arrow_pill .continue-button-core {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--continue-accent) 0%, color-mix(in srgb, var(--continue-accent) 72%, white) 100%);
  color: var(--continue-text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--continue-accent) 32%, transparent);
}

.continue-preset-down_chevron .continue-button-core {
  border-radius: 20px;
  background: #ffffff;
  border: 2px solid var(--continue-accent);
  color: color-mix(in srgb, var(--continue-accent) 86%, black);
  box-shadow: 0 10px 20px rgba(14, 35, 66, 0.08);
}

.continue-preset-down_chevron .continue-button-icon {
  display: inline-grid;
  width: 1.7em;
  height: 1.7em;
  place-items: center;
  border-radius: 999px;
  background: var(--continue-secondary);
  color: var(--continue-accent);
}

.continue-preset-halo_arrow .continue-button-core {
  border-radius: 999px;
  background: color-mix(in srgb, var(--continue-secondary) 78%, white);
  color: color-mix(in srgb, var(--continue-accent) 82%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 20%, white), 0 0 0 8px color-mix(in srgb, var(--continue-secondary) 32%, transparent);
}

.continue-preset-simple_drop .continue-button-shell,
.continue-preset-double_line_drop .continue-button-shell,
.continue-preset-thin_chevron_drop .continue-button-shell,
.continue-preset-stacked_chevron_drop .continue-button-shell,
.continue-preset-bold_drop .continue-button-shell {
  gap: 0;
}

.continue-preset-simple_drop .continue-button-core,
.continue-preset-double_line_drop .continue-button-core,
.continue-preset-thin_chevron_drop .continue-button-core,
.continue-preset-stacked_chevron_drop .continue-button-core,
.continue-preset-bold_drop .continue-button-core {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.15rem 0.25rem;
  color: var(--continue-accent);
}

.continue-preset-simple_drop .continue-button-icon,
.continue-preset-double_line_drop .continue-button-icon,
.continue-preset-thin_chevron_drop .continue-button-icon,
.continue-preset-stacked_chevron_drop .continue-button-icon,
.continue-preset-bold_drop .continue-button-icon {
  line-height: 1;
}

.continue-preset-simple_drop .continue-button-icon {
  font-weight: 500;
}

.continue-preset-double_line_drop .continue-button-icon {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.continue-preset-thin_chevron_drop .continue-button-icon {
  font-weight: 300;
  transform: scaleY(1.08);
}

.continue-preset-stacked_chevron_drop .continue-button-icon {
  font-weight: 400;
  letter-spacing: -0.18em;
}

.continue-preset-bold_drop .continue-button-icon {
  font-weight: 800;
}

.continue-preset-double_drop .continue-button-core {
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--continue-secondary) 72%, white) 100%);
  color: var(--continue-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 18%, white), 0 12px 24px rgba(14, 35, 66, 0.08);
}

.continue-preset-double_drop .continue-button-icon {
  letter-spacing: -0.12em;
  font-weight: 800;
}

.continue-preset-glass_drop .continue-button-core {
  border-radius: 999px;
  background: color-mix(in srgb, white 76%, var(--continue-secondary));
  color: color-mix(in srgb, var(--continue-accent) 90%, black);
  border: 1px solid color-mix(in srgb, var(--continue-accent) 18%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 14px 28px rgba(14, 35, 66, 0.09);
  backdrop-filter: blur(10px);
}

.continue-preset-glass_drop .continue-button-accent {
  position: absolute;
  inset: -0.36rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--continue-secondary) 68%, transparent);
}

.continue-preset-lane_marker .continue-button-shell {
  gap: 0.4rem;
}

.continue-preset-lane_marker .continue-button-line {
  width: 2px;
  min-height: 1.6rem;
  background: linear-gradient(180deg, transparent 0%, var(--continue-accent) 22%, var(--continue-accent) 78%, transparent 100%);
  border-radius: 999px;
}

.continue-preset-lane_marker .continue-button-core {
  border-radius: 999px;
  background: transparent;
  color: var(--continue-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 16%, white);
}

.continue-preset-lane_marker .continue-button-icon {
  display: inline-grid;
  width: 1.9em;
  height: 1.9em;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--continue-secondary) 74%, white);
}

.continue-preset-pulse_down .continue-button-core {
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--continue-secondary) 68%, white), #ffffff);
  color: var(--continue-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 16%, white);
}

.continue-preset-pulse_down .continue-button-accent {
  position: absolute;
  inset: -0.45rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--continue-accent) 12%, transparent), 0 0 0 10px color-mix(in srgb, var(--continue-secondary) 40%, transparent);
}

.continue-preset-ribbon_tag .continue-button-core {
  border-radius: 14px;
  background: linear-gradient(90deg, var(--continue-accent) 0%, color-mix(in srgb, var(--continue-accent) 55%, black) 100%);
  color: var(--continue-text);
  padding-right: 1.8rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
}

.continue-preset-split_path .continue-button-shell {
  gap: 0.8rem;
}

.continue-preset-split_path .continue-button-line {
  width: clamp(1.4rem, 5vw, 3.2rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--continue-accent) 50%, transparent 100%);
}

.continue-preset-split_path .continue-button-core {
  border-radius: 999px;
  background: var(--continue-secondary);
  color: color-mix(in srgb, var(--continue-accent) 84%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 18%, white);
}

.continue-preset-stepped_lines .continue-button-core {
  border-radius: 12px;
  background: transparent;
  color: color-mix(in srgb, var(--continue-accent) 82%, black);
  box-shadow: inset 0 -2px 0 var(--continue-accent);
}

.continue-preset-stepped_lines .continue-button-shell::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: -0.22rem;
  height: 6px;
  background:
    linear-gradient(90deg, var(--continue-accent) 0 22%, transparent 22% 30%, var(--continue-accent) 30% 56%, transparent 56% 64%, var(--continue-accent) 64% 100%);
  opacity: 0.5;
}

.continue-preset-orbit_ring .continue-button-core {
  border-radius: 999px;
  background: #ffffff;
  color: color-mix(in srgb, var(--continue-accent) 84%, black);
  box-shadow: inset 0 0 0 2px var(--continue-accent), 0 0 0 6px color-mix(in srgb, var(--continue-secondary) 50%, transparent);
}

.continue-preset-stop_marker .continue-button-core {
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--continue-accent) 92%, black), var(--continue-accent));
  color: var(--continue-text);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--continue-accent) 24%, transparent);
}

.continue-preset-stop_marker .continue-button-icon {
  display: inline-grid;
  width: 1.5em;
  height: 1.5em;
  place-items: center;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--continue-text) 18%, transparent);
}

.continue-preset-compass_drop .continue-button-core {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--continue-secondary) 0%, #ffffff 100%);
  color: color-mix(in srgb, var(--continue-accent) 86%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 18%, white), 0 10px 20px rgba(14, 35, 66, 0.07);
}

.continue-preset-compass_drop .continue-button-icon {
  display: inline-grid;
  width: 1.7em;
  height: 1.7em;
  place-items: center;
  border-radius: 999px 999px 999px 0.45em;
  background: var(--continue-accent);
  color: var(--continue-text);
}

.continue-preset-beacon .continue-button-core {
  border-radius: 999px;
  background: color-mix(in srgb, var(--continue-secondary) 68%, white);
  color: color-mix(in srgb, var(--continue-accent) 85%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--continue-accent) 20%, white);
}

.continue-preset-beacon .continue-button-accent {
  position: absolute;
  left: 50%;
  bottom: -0.7rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--continue-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--continue-accent) 18%, transparent), 0 0 0 8px color-mix(in srgb, var(--continue-secondary) 65%, transparent);
}

.continue-preset-halo_arrow .continue-button-accent,
.continue-preset-orbit_ring .continue-button-accent {
  position: absolute;
  inset: -0.28rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--continue-accent) 18%, transparent);
}

.continue-preset-ribbon_tag .continue-button-line,
.continue-preset-arrow_pill .continue-button-line,
.continue-preset-halo_arrow .continue-button-line,
.continue-preset-down_chevron .continue-button-line,
.continue-preset-simple_drop .continue-button-line,
.continue-preset-double_line_drop .continue-button-line,
.continue-preset-thin_chevron_drop .continue-button-line,
.continue-preset-stacked_chevron_drop .continue-button-line,
.continue-preset-bold_drop .continue-button-line,
.continue-preset-orbit_ring .continue-button-line,
.continue-preset-stop_marker .continue-button-line,
.continue-preset-compass_drop .continue-button-line,
.continue-preset-beacon .continue-button-line {
  display: none;
}

.continue-preset-simple_drop .continue-button-accent,
.continue-preset-double_line_drop .continue-button-accent,
.continue-preset-thin_chevron_drop .continue-button-accent,
.continue-preset-stacked_chevron_drop .continue-button-accent,
.continue-preset-bold_drop .continue-button-accent {
  display: none;
}

.continue-thumb {
  width: 100%;
  justify-self: stretch;
}

.continue-thumb .continue-button-core {
  width: 100%;
}

.continue-preview-panel {
  padding: 0.8rem;
}

.preview-continue-btn {
  cursor: default;
}

.preview-continue-btn:hover .continue-button-core,
.preview-continue-btn:focus-visible .continue-button-core {
  transform: none;
}

.preview-continue-state-hover .continue-button-core {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(17, 49, 76, 0.16);
}

.preview-continue-state-press .continue-button-core {
  transform: scale(0.98);
}

.preview-continue-state-blocked {
  opacity: 0.52;
  filter: saturate(0.4);
}

.preview-continue-state-sample {
  pointer-events: none;
}

.preview-continue-note,
.preview-continue-detail {
  font-size: 0.88rem;
  color: var(--muted);
}

@keyframes continueSoftBlink {
  0%, 68%, 100% {
    opacity: 1;
  }
  76% {
    opacity: 0.38;
  }
}

@keyframes continueDownNudge {
  0%, 62%, 100% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(6px);
  }
  84% {
    transform: translateY(0);
  }
}

@keyframes continueBeaconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(4px);
  }
}

@keyframes continueBeaconPulse {
  0%, 60%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  74% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.kc-option input[type="text"] {
  width: 100%;
}

.status {
  margin-top: 0.9rem;
  color: var(--muted);
  min-height: 1.2rem;
}

.app-copyright {
  margin: 0.85rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0.92;
}

body[data-active-tab="preview"] .app-copyright,
body[data-active-tab="publish"] .app-copyright {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0.8rem;
  margin: 0;
  transform: translateX(-50%);
  z-index: 35;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0 0.4rem;
  pointer-events: none;
}

.status-progress {
  margin-top: 0.45rem;
  padding: 0.55rem 0.75rem 0.7rem;
  border: 1px solid rgba(31, 93, 156, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.95), rgba(239, 246, 255, 0.95));
}

.status-progress-label {
  font-size: 0.92rem;
  color: var(--brand-ink);
  margin-bottom: 0.45rem;
  line-height: 1.45;
  white-space: pre-line;
}

.status-progress-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(31, 93, 156, 0.12);
}

.status-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(31, 93, 156, 0.18), rgba(31, 93, 156, 0.9), rgba(94, 160, 255, 0.95));
  animation: status-progress-indeterminate 1.15s ease-in-out infinite;
  transform: translateX(-120%);
  will-change: transform;
}

@keyframes status-progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  55% {
    transform: translateX(135%);
  }
  100% {
    transform: translateX(260%);
  }
}

body[data-color-mode="dark"] .status-progress {
  border-color: rgba(94, 160, 255, 0.22);
  background: linear-gradient(180deg, rgba(23, 33, 45, 0.98), rgba(19, 28, 39, 0.98));
}

body[data-color-mode="dark"] .status-progress-label {
  color: #dcecff;
}

body[data-color-mode="dark"] .status-progress-track {
  background: rgba(94, 160, 255, 0.16);
}

body[data-color-mode="dark"] .status-progress-bar {
  background: linear-gradient(90deg, rgba(94, 160, 255, 0.2), rgba(94, 160, 255, 0.92), rgba(151, 196, 255, 0.96));
}

body[data-color-mode="dark"] .app-copyright {
  color: #a9bfd6;
}

.inline-task-progress {
  margin-top: 0.7rem;
}

.style-box > .inline-task-progress:first-of-type,
.powerpoint-suggestion-card > .inline-task-progress:first-of-type {
  margin-top: 0.2rem;
}

.powerpoint-import-options {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #f8fbff;
  margin-bottom: 0.45rem;
}

.course-import-local-ai-status {
  border: 1px solid #d8e4f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.25rem;
}

.course-import-local-ai-status.is-ready {
  border-color: #c7e3d4;
  background: #f6fff8;
}

.course-import-local-ai-status.is-warn {
  border-color: #ead7bd;
  background: #fff9ef;
}

.import-type-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #26425f;
  font-size: 0.72rem;
  white-space: normal;
}

.import-type-guide li {
  margin: 0;
  line-height: 1.15;
  flex: 0 0 auto;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: #f1f6fc;
  border: 1px solid #d7e3f0;
}

.powerpoint-review-modal-panel {
  width: min(1280px, 96vw);
}

.powerpoint-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 0.9rem;
  min-height: 60vh;
}

.powerpoint-review-sidebar,
.powerpoint-review-main {
  border: 1px solid #dce5f1;
  border-radius: 16px;
  background: #ffffff;
}

.powerpoint-review-sidebar {
  padding: 0.9rem;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  overflow: hidden;
}

.powerpoint-review-summary {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e8eef7;
}

.powerpoint-review-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.powerpoint-review-summary-topline {
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.5rem 0.58rem;
  color: #24415d;
  font-size: 0.84rem;
}

.powerpoint-review-summary-notes {
  margin-top: 0.1rem;
}

.powerpoint-review-summary-notes-body {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.powerpoint-review-summary-note {
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.4rem 0.5rem;
  color: #24415d;
  font-size: 0.82rem;
}

.powerpoint-review-summary-note.is-info {
  border-color: #c8d9ee;
  background: #f5f9ff;
}

.powerpoint-review-summary-note.is-warn {
  border-color: #ead7bd;
  background: #fff9ef;
  color: #6d4a14;
}

.powerpoint-review-slides {
  display: grid;
  gap: 0.55rem;
  max-height: 60vh;
  overflow: auto;
}

.powerpoint-review-slides-disclosure {
  margin-bottom: 0;
}

.powerpoint-slide-item {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
}

.powerpoint-slide-item strong {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.powerpoint-slide-item span {
  display: block;
}

.powerpoint-slide-meta {
  color: #5a6c83;
  font-size: 0.76rem;
}

.powerpoint-slide-item.active {
  border-color: var(--brand);
  background: rgba(31, 93, 156, 0.08);
  color: #10314d;
}

.powerpoint-slide-item.is-excluded {
  opacity: 0.65;
}

.powerpoint-slide-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #fff3d7;
  color: #7b4d00;
  font-size: 0.74rem;
  font-weight: 600;
}

.powerpoint-review-main {
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  overflow: auto;
}

.powerpoint-review-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.powerpoint-review-detail {
  display: grid;
  gap: 0.95rem;
}

.powerpoint-review-primary-actions {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 0.1rem;
  padding-bottom: 0.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
}

body[data-color-mode="dark"] .powerpoint-review-primary-actions {
  background: linear-gradient(180deg, rgba(26, 39, 52, 0.98) 0%, rgba(26, 39, 52, 0.92) 100%);
}

body[data-color-mode="dark"] .powerpoint-review-summary-topline {
  border-color: #35506b;
  background: #1a2734;
  color: #dbe9f8;
}

.powerpoint-review-field {
  display: grid;
  gap: 0.35rem;
}

.powerpoint-suggestion-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #f8fbff;
}

.powerpoint-suggestion-card select {
  width: min(280px, 100%);
}

.powerpoint-review-field textarea,
.powerpoint-review-field input[type="text"] {
  width: 100%;
}

.powerpoint-review-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #e3eaf5;
  border-radius: 12px;
  background: #f8fbff;
}

.powerpoint-assets,
.powerpoint-warnings {
  margin: 0;
}

.powerpoint-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.powerpoint-asset-card {
  margin: 0;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fbff;
}

.powerpoint-asset-card img,
.powerpoint-asset-card video {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #eef4fb;
}

.powerpoint-asset-card audio {
  display: block;
  width: 100%;
  margin: 1rem 0;
}

.powerpoint-asset-card figcaption {
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  color: #445771;
}

.powerpoint-warning-list {
  margin: 0;
  padding-left: 1.15rem;
  color: #556880;
}

button {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
  border-radius: 8px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 4px 14px rgba(15, 52, 86, 0.14);
}

button.secondary {
  border-color: #7b8da4;
  background: #f4f7fb;
  color: #183049;
}

button.secondary:hover {
  background: #e8eef6;
  border-color: #697f99;
  box-shadow: 0 4px 12px rgba(24, 48, 73, 0.08);
}

button.danger {
  border-color: var(--danger);
  background: #fff4f2;
  color: #872517;
}

button.danger:hover {
  background: #f8e7e3;
  border-color: #8d3427;
  box-shadow: 0 4px 12px rgba(135, 37, 23, 0.08);
}

button.is-progress {
  display: grid;
  gap: 0.32rem;
  align-items: center;
  justify-items: stretch;
  min-width: 220px;
}

.button-progress-label {
  display: block;
  text-align: center;
}

.button-progress-track {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.button-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.45));
  animation: status-progress-indeterminate 1.05s ease-in-out infinite;
  transform: translateX(-120%);
  will-change: transform;
}

a {
  color: #0f4982;
}

@media (max-width: 980px) {
  .entitlement-banner,
  .admin-ops-head {
    flex-direction: column;
    align-items: stretch;
  }

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

  .sidebar {
    position: static;
    top: auto;
    align-self: stretch;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feedback-form-grid {
    grid-template-columns: 1fr;
  }

  .toolbar-fields {
    grid-template-columns: 1fr;
  }

  .quiz-grid {
    grid-template-columns: 1fr;
  }

  .theme-grid,
  .style-grid {
    grid-template-columns: 1fr;
  }

  .style-selector-row {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .course-look-layout,
  .theme-preview-layout {
    grid-template-columns: 1fr;
  }

  .preview-grid.two {
    grid-template-columns: 1fr;
  }

  .publish-review-options {
    grid-template-columns: 1fr;
  }

  .admin-ops-head {
    flex-direction: column;
  }

  .admin-ops-grid,
  .admin-ops-cards {
    grid-template-columns: 1fr;
  }

  .admin-ops-request-head {
    flex-direction: column;
    align-items: stretch;
  }

  .builder-shell {
    grid-template-columns: 1fr;
  }

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

  .toolbar-history-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .toolbar-history-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .toolbar-history-restore {
    grid-template-columns: 1fr;
  }

  .toolbar-history-restore-wrap {
    padding: 0.4rem;
  }

  .toolbar-history-quick-actions {
    justify-content: flex-start;
  }

  .toolbar-history-head .secondary {
    margin-top: 0;
  }

  .lesson-rail,
  .inspector-shell {
    position: static;
  }

  .block-library-results {
    grid-template-columns: 1fr;
  }

  .preview-layout-split_hero,
  .preview-layout-row,
  .preview-layout-sticky_side_note,
  .preview-media-text-split {
    grid-template-columns: 1fr;
  }

  .preview-gallery {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .preview-shell.has-lesson-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-sidebar {
    position: static;
    top: auto;
    border-right: 0;
    border-bottom: 1px solid var(--preview-border, #d8e2ef);
  }

  .preview-sidebar-nav {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
.quick-edit-map {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(31, 93, 156, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(244, 249, 255, 0.96), rgba(255, 255, 255, 0.96));
  margin-bottom: 0.8rem;
}

.quick-edit-map-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
}

.quick-edit-map-head strong {
  font-size: 0.92rem;
  color: #17324b;
}

.quick-edit-map-hint {
  font-size: 0.8rem;
  color: #5b6f83;
}

.quick-edit-map-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.quick-edit-map-chip {
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.quick-edit-target {
  animation: quick-edit-target-pulse 1.5s ease;
  box-shadow: 0 0 0 3px rgba(31, 93, 156, 0.18), 0 14px 28px rgba(14, 24, 38, 0.1);
}

@keyframes quick-edit-target-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 93, 156, 0.34), 0 0 0 rgba(14, 24, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(31, 93, 156, 0.18), 0 14px 28px rgba(14, 24, 38, 0.1);
  }
}