/* Bio-Matters theme enhancements — kept separate so the visual system is easy to maintain. */
:root {
  color-scheme: light;
  --surface-raised: #ffffff;
  --surface-tint: #f4f7fb;
  --text-strong: #172033;
  --focus-ring: #2563eb;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2f8;
  --muted: #b2bfd0;
  --line: #344255;
  --paper: #1b2635;
  --soft: #243246;
  --canvas: #111a27;
  --header: rgba(17, 26, 39, .94);
  --surface-raised: #1b2635;
  --surface-tint: #243246;
  --text-strong: #f4f7fb;
  --focus-ring: #93c5fd;
  --shadow: 0 18px 48px rgba(0,0,0,.32);
}
html[data-theme="dark"] body {
  background: var(--canvas);
  color: var(--ink);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .workspace-sidebar,
html[data-theme="dark"] .workspace-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .dialog-content,
html[data-theme="dark"] .aside-card,
html[data-theme="dark"] .preview-pane,
html[data-theme="dark"] .content-row,
html[data-theme="dark"] .article-editor-card,
html[data-theme="dark"] .editor-dialog .dialog-body {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #111b29;
  color: #edf2f8;
  border-color: #46566b;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #9aabc0; opacity: 1; }
html[data-theme="dark"] .field-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .reader-meta { color: var(--muted); }
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .text-link {
  color: #e6eef8;
  border-color: #50627a;
}
html[data-theme="dark"] .button-outline:hover,
html[data-theme="dark"] .button-quiet:hover,
html[data-theme="dark"] .text-link:hover { background: #2d4058; color: #fff; }
html[data-theme="dark"] .markdown-body blockquote,
html[data-theme="dark"] #markdownPreview blockquote {
  color: #e8f0fa !important;
  background: #26364b !important;
  border-left-color: #7dd3fc !important;
}
html[data-theme="dark"] .markdown-body blockquote p,
html[data-theme="dark"] #markdownPreview blockquote p,
html[data-theme="dark"] .markdown-body blockquote li,
html[data-theme="dark"] #markdownPreview blockquote li { color: #e8f0fa !important; }
html[data-theme="dark"] .markdown-body table th,
html[data-theme="dark"] .markdown-body table td,
html[data-theme="dark"] #markdownPreview table th,
html[data-theme="dark"] #markdownPreview table td { border-color: #43536a; }
html[data-theme="dark"] .markdown-body table th,
html[data-theme="dark"] #markdownPreview table th { background: #26364b; color: #f1f5f9; }
html[data-theme="dark"] .markdown-body a,
html[data-theme="dark"] #markdownPreview a { color: #93c5fd; }
html[data-theme="dark"] .toc-link { color: #c2cede; }
html[data-theme="dark"] .toc-link:hover,
html[data-theme="dark"] .toc-link:focus-visible { background: #2a3a50; color: #fff; }
html[data-theme="dark"] .search-suggestions,
html[data-theme="dark"] .search-suggestions [role="option"] { background: #1b2635; color: #edf2f8; border-color: #3a4a60; }
html[data-theme="dark"] .search-suggestions [role="option"]:hover,
html[data-theme="dark"] .search-suggestions [role="option"]:focus { background: #2c4058; color: #fff; }
html[data-theme="dark"] .design-options-block,
html[data-theme="dark"] .article-style-overrides,
html[data-theme="dark"] .editor-workflow-note,
html[data-theme="dark"] .markdown-quick-tools { background: #202e41; border-color: #3a4b62; }
html[data-theme="dark"] .design-category-heading { background: linear-gradient(120deg,#20344b,#1b2635); border-color: #3b5069; }
html[data-theme="dark"] .design-category-heading p { color: #b9c7d9; }
html[data-theme="dark"] .design-category-nav { background: rgba(17,26,39,.96); border-color: #3a4b62; }
html[data-theme="dark"] .design-category-nav a { color: #dbeafe; background: #243246; border-color: #40536c; }
html[data-theme="dark"] .design-category-nav a:hover,
html[data-theme="dark"] .design-category-nav a:focus-visible { background: #365273; color: #fff; }
html[data-theme="dark"] .card-heading p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .reader-summary { color: #bdc9d8; }
html[data-theme="dark"] .toast { background: #26364b; color: #f8fafc; border-color: #50627a; }
html[data-theme="dark"] :focus-visible { outline-color: #93c5fd; }
html[data-theme="dark"] .workspace-sidebar a.active,
html[data-theme="dark"] .workspace-sidebar button.active { background: #29415c; color: #fff; }
html[data-theme="dark"] .markdown-body pre,
html[data-theme="dark"] #markdownPreview pre {
  background: var(--article-code-bg, var(--default-code-bg, #0d1520));
  color: var(--article-code-text, var(--default-code-text, #e5edf7));
  border-color: var(--line);
}

/* Article reading layout: use the freed sidebar space for a wide, calm reading column. */
.reader-layout {
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) !important;
  max-width: 1500px;
  justify-content: stretch;
  gap: clamp(22px, 3vw, 42px);
}
.reader-article { max-width: 100%; min-width: 0; }
.reader-left-rail { max-width: 100%; }
.reader-article .markdown-body { max-width: 100%; }
.reader-article .markdown-body img { max-width: min(70%, 640px); }
@media (max-width: 980px) {
  .reader-layout { grid-template-columns: minmax(190px, 230px) minmax(0,1fr) !important; gap: 22px; }
}
@media (max-width: 760px) {
  .reader-layout { display: flex !important; flex-direction: column; }
  .reader-article { order: 0; width: 100%; }
  .reader-left-rail { order: 1; width: 100%; max-height: none; position: static; }
  .reader-article .markdown-body img { max-width: 100%; }
}

/* Categorized design studio: jump navigation and clear section/subsection hierarchy. */
.design-category-nav {
  position: sticky;
  top: 8px;
  z-index: 20;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  margin: 0 0 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.design-category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.design-category-nav a:hover,
.design-category-nav a:focus-visible { background: var(--accent); color: #fff; outline-offset: 2px; }
.design-category-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  margin: 16px 0 2px;
  border: 1px solid #dbe5f0;
  border-radius: 16px;
  background: linear-gradient(120deg,#f2f7ff,#fff);
  scroll-margin-top: 90px;
}
.design-category-heading > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 850;
}
.design-category-heading h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.design-category-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
#designForm .field-label { min-width: 0; }
#designForm .design-options-block { padding: 18px; }
#designForm .design-options-block h4 { font-size: 14px; }
#designForm .form-actions { padding-top: 16px; border-top: 1px solid var(--line); }
#panel-design .card-heading { align-items: flex-start; }
#panel-design .card-heading h3 { font-size: clamp(21px,2.2vw,28px); }
#panel-design .card-heading p { max-width: 660px; line-height: 1.65; }

/* More expressive authoring console with practical formatting shortcuts. */
.markdown-quick-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 14px 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.quick-tools-label { margin-right: 5px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.markdown-quick-tools button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.markdown-quick-tools button:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--paper); }
.markdown-quick-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor-toolbar { flex-wrap: wrap; gap: 8px; }
.editor-workflow-note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); line-height: 1.6; }
.editor-workflow-note strong { flex: 0 0 auto; color: var(--ink); }
.markdown-editor-grid { align-items: stretch; }
.markdown-editor-grid > .field-label { min-width: 0; }
.markdown-editor-grid textarea { width: 100%; }
.preview-pane { background: var(--paper); }
@media (max-width: 760px) {
  .design-category-nav { position: static; }
  .design-category-heading { align-items: flex-start; padding: 14px; }
  .markdown-quick-tools { gap: 6px; }
  .quick-tools-label { flex-basis: 100%; }
  .editor-workflow-note { flex-direction: column; gap: 4px; }
}

#articleStyleOverrides:has(input:disabled) { opacity: .82; }
#articleStyleOverrides input:disabled,
#articleStyleOverrides select:disabled { cursor: not-allowed; }
.style-default-explanation { margin: 6px 0 10px; }


/* Advanced media studio: visual, responsive, theme-aware authoring console */
.media-studio{margin:1rem 0;padding:clamp(1rem,2.4vw,1.45rem);border:1px solid color-mix(in srgb,var(--accent,#2563eb) 30%,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#2563eb) 7%,var(--surface,#fff)),var(--surface,#fff) 60%);box-shadow:0 12px 32px rgba(15,23,42,.07)}
.media-studio-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.media-studio-heading h4{font-size:1.12rem;margin:.25rem 0;color:var(--ink)}.media-studio-heading p{margin:0;max-width:660px;color:var(--muted);font-size:.88rem;line-height:1.55}.media-studio-kicker{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--accent)}.studio-live-badge{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.4rem .65rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:.72rem;font-weight:700;color:var(--ink)}.studio-live-badge i{width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.media-studio-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr);gap:1rem}.media-live-preview{display:flex;align-items:center;justify-content:center;min-height:220px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:15px;background:repeating-linear-gradient(135deg,var(--soft,#f8fafc),var(--soft,#f8fafc) 12px,color-mix(in srgb,var(--surface,#fff) 80%,var(--soft,#f8fafc)) 12px,color-mix(in srgb,var(--surface,#fff) 80%,var(--soft,#f8fafc)) 24px);padding:.75rem}.media-live-preview img,.media-live-preview video{display:block;max-width:100%;max-height:330px;object-fit:contain;border-radius:10px}.media-live-preview audio{width:100%;max-width:440px}.media-live-preview a{display:inline-flex;padding:.75rem 1rem;border-radius:10px;background:var(--surface);color:var(--accent);font-weight:700;overflow-wrap:anywhere}.media-preview-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1rem;color:var(--muted)}.media-preview-placeholder>span{font-size:2.4rem;color:var(--accent)}.media-preview-placeholder strong{color:var(--ink)}.media-preview-placeholder small{font-size:.8rem}.media-studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.studio-action{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.8rem;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.studio-action>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-size:1.2rem}.studio-action b{font-size:.82rem}.studio-action small{font-size:.7rem;line-height:1.35;color:var(--muted)}.studio-action:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 7px 18px rgba(15,23,42,.08)}.media-studio-tip{display:flex;gap:.55rem;margin-top:.85rem;padding:.7rem .85rem;border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));font-size:.78rem;line-height:1.5;color:var(--muted)}.media-studio-tip strong{color:var(--accent);white-space:nowrap}.media-asset-item{grid-template-columns:minmax(0,1fr) auto}.media-asset-item[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.markdown-quick-tools{box-shadow:0 4px 16px rgba(15,23,42,.04)}
html[data-theme="dark"] .media-studio{background:linear-gradient(135deg,#1d2a3c,#151f2d);border-color:#3a4b62;box-shadow:0 12px 32px rgba(0,0,0,.18)}html[data-theme="dark"] .media-live-preview{background:repeating-linear-gradient(135deg,#182334,#182334 12px,#1c293a 12px,#1c293a 24px)}html[data-theme="dark"] .studio-action{background:#1a2637;border-color:#3a4b62}html[data-theme="dark"] .studio-action:hover{background:#223249}html[data-theme="dark"] .studio-live-badge{background:#1a2637;border-color:#3a4b62}html[data-theme="dark"] .media-studio-tip{background:#202e41}
@media(max-width:680px){.media-studio-heading{flex-direction:column}.media-studio-grid{grid-template-columns:1fr}.media-live-preview{min-height:160px}.media-studio-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-live-badge{align-self:flex-start}}

/* Right-side article navigation: readable in both themes. */
.reader-toc-card .toc-h1{color:var(--ink);}
.reader-toc-card .toc-h2{color:var(--muted);}
.toc-group-label{padding:8px 10px;font-size:.82rem;font-weight:800;color:var(--ink);background:var(--soft);border-radius:9px;}
html[data-theme="dark"] .reader-left-rail .aside-card{box-shadow:0 8px 26px rgba(0,0,0,.18);}
html[data-theme="dark"] .toc-h1{background:#26364a;color:#f2f6fc;border-left-color:var(--accent);}
html[data-theme="dark"] .toc-h2{border-left-color:#43536a;color:#c4cfdf;}
html[data-theme="dark"] .toc-link:hover,html[data-theme="dark"] .toc-link:focus-visible{background:#2b3b51;color:#fff;}
html[data-theme="dark"] .toc-group-label{background:#26364a;color:#f2f6fc;}


/* ==========================================================
   Unified automatic light/dark theme coverage
   All common surfaces and text inherit from the same tokens.
   ========================================================== */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f7f9fc;
  --paper: #ffffff;
  --soft: #eef3f8;
  --header: rgba(255,255,255,.94);
  --ink: #172033;
  --muted: #5b687b;
  --line: #d7e0eb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-tint: #f1f5f9;
  --text-strong: #172033;
  --focus-ring: #2563eb;
  --theme-input: #ffffff;
  --theme-input-text: #172033;
  --theme-hover: #e8eff8;
  --theme-code: #edf2f7;
  --shadow: 0 12px 34px rgba(15,23,42,.08);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101722;
  --paper: #1b2635;
  --soft: #243246;
  --header: rgba(17,26,39,.96);
  --ink: #edf2f8;
  --muted: #b2bfd0;
  --line: #3a4a60;
  --surface: #1b2635;
  --surface-raised: #202e41;
  --surface-tint: #243246;
  --text-strong: #f4f7fb;
  --focus-ring: #93c5fd;
  --theme-input: #111b29;
  --theme-input-text: #edf2f8;
  --theme-hover: #2c4058;
  --theme-code: #0d1520;
  --shadow: 0 18px 48px rgba(0,0,0,.32);
}
html[data-theme] body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}
html[data-theme] :is(.topbar, header, nav, .workspace-sidebar, .workspace-card,
  .dialog, .dialog-content, .aside-card, .preview-pane, .content-row,
  .article-editor-card, .editor-dialog .dialog-body, .card, .panel,
  .modal, .dropdown-menu, .popover, .search-suggestions, .design-options-block,
  .article-style-overrides, .editor-workflow-note, .markdown-quick-tools,
  .design-category-heading, .design-category-nav, .media-studio,
  .media-live-preview, .studio-action, .studio-live-badge, .media-studio-tip,
  .reader-toc-card, .reader-summary, .content-card, .topic-card, .article-card,
  .workspace-main .section, .form-section) {
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme] :is(.topbar, .workspace-sidebar, .workspace-card, .dialog,
  .dialog-content, .aside-card, .preview-pane, .content-row,
  .article-editor-card, .editor-dialog .dialog-body, .card, .panel, .modal,
  .dropdown-menu, .popover, .design-options-block, .article-style-overrides,
  .editor-workflow-note, .markdown-quick-tools, .reader-toc-card,
  .content-card, .topic-card, .article-card, .form-section) {
  background-color: var(--paper);
}
html[data-theme] :is(.muted, .reader-meta, .form-note, .field-help,
  .card-heading p, .section-heading p, .reader-summary, .media-studio-heading p,
  .media-preview-placeholder, .studio-action small, .media-studio-tip) {
  color: var(--muted) !important;
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  textarea, select, .search-input, .form-control) {
  background-color: var(--theme-input) !important;
  color: var(--theme-input-text) !important;
  border-color: var(--line) !important;
}
html[data-theme] :is(input, textarea, select)::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}
html[data-theme] :is(label, .field-label, .form-label, .toc-link, .toc-h1, .toc-h2,
  .markdown-body, #markdownPreview, .reader-article) {
  color: var(--ink);
}
html[data-theme] :is(.markdown-body, #markdownPreview) :is(p, li, td, th, blockquote,
  strong, em, span, code, pre, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
html[data-theme] :is(.markdown-body, #markdownPreview) :is(blockquote, table th,
  pre, code:not(pre code)) {
  background-color: var(--theme-code);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.markdown-body, #markdownPreview) a { color: #93c5fd !important; }
html[data-theme="light"] :is(.markdown-body, #markdownPreview) a { color: #1d4ed8; }
html[data-theme] :is(.markdown-body, #markdownPreview) table td,
html[data-theme] :is(.markdown-body, #markdownPreview) table th { border-color: var(--line) !important; }
html[data-theme] :is(.markdown-body, #markdownPreview) table th {
  background: var(--soft) !important;
  color: var(--ink) !important;
}
html[data-theme] :is(button, .button, .button-outline, .button-quiet, .text-link,
  .studio-action, .toc-link, .design-category-nav a) {
  border-color: var(--line);
}
html[data-theme] :is(.button-outline, .button-quiet, .text-link, .studio-action,
  .toc-link, .design-category-nav a) { color: var(--ink); }
html[data-theme] :is(.button-outline:hover, .button-quiet:hover, .text-link:hover,
  .studio-action:hover, .toc-link:hover, .toc-link:focus-visible,
  .design-category-nav a:hover, .design-category-nav a:focus-visible) {
  background-color: var(--theme-hover);
  color: var(--ink);
}
html[data-theme] :focus-visible { outline-color: var(--focus-ring); }
html[data-theme] .toast {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme] .search-suggestions,
html[data-theme] .search-suggestions [role="option"] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme] .design-category-heading {
  background: var(--surface-raised);
  border-color: var(--line);
}
html[data-theme] .design-category-nav {
  background: var(--header);
  border-color: var(--line);
}
html[data-theme="dark"] .workspace-sidebar a.active,
html[data-theme="dark"] .workspace-sidebar button.active {
  background: var(--theme-hover);
  color: var(--ink);
}

/* Reader: article text owns the wide column; tools sit in a compact right rail. */
@media (min-width: 901px) {
  .reader-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 270px) !important;
    align-items: start !important;
    gap: clamp(20px, 2.4vw, 34px) !important;
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
  }
  .reader-article {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    max-width: none !important;
  }
  .reader-left-rail {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    max-width: 270px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 0 2px 8px 0;
  }
  .reader-left-rail .aside-card { padding: 12px; margin-bottom: 10px; }
  .reader-article .markdown-body { max-width: 100%; }
}
@media (max-width: 900px) {
  .reader-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .reader-article { grid-column: 1 !important; grid-row: 1 !important; }
  .reader-left-rail {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .reader-left-rail { display: flex; flex-direction: column; }
}


/* V6: keep search + article contents visible while the article scrolls.
   The rail itself can scroll when its contents exceed the viewport. */
@media (min-width: 901px) {
  #readerView .reader-layout {
    overflow: visible !important;
    align-items: start !important;
  }
  #readerView .reader-left-rail {
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    height: fit-content !important;
    max-height: calc(100vh - 116px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
    z-index: 5;
  }
  #readerView .reader-left-rail .aside-card {
    flex: 0 0 auto;
  }
  #readerView .reader-toc-card {
    min-height: 0 !important;
  }
  #readerView #tableOfContents {
    max-height: min(42vh, 420px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  #readerView .toc-link {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
    border-left: 3px solid transparent;
  }
  #readerView .toc-link.is-active,
  #readerView .toc-link[aria-current="location"] {
    background: color-mix(in srgb, var(--accent) 16%, var(--paper)) !important;
    color: var(--accent) !important;
    border-left-color: var(--accent) !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 900px) {
  #readerView .reader-left-rail {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #readerView #tableOfContents {
    max-height: 320px !important;
    overflow-y: auto !important;
  }
}




/* ==========================================================
   Refined light theme + reliable article code color controls
   Dark theme styling above is intentionally retained.
   ========================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #182230;
  --muted: #596779;
  --line: #dbe3ed;
  --paper: #ffffff;
  --soft: #f3f6fa;
  --canvas: #f6f8fc;
  --header: rgba(255,255,255,.94);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-tint: #eef3f9;
  --text-strong: #182230;
  --focus-ring: #2563eb;
  --theme-input: #ffffff;
  --theme-input-text: #182230;
  --theme-hover: #edf3fb;
  --theme-code: #eef2f7;
  --shadow: 0 12px 32px rgba(20,35,55,.07);
}
html[data-theme="light"] body {
  background: var(--canvas);
  color: var(--ink);
}
html[data-theme="light"] :is(.topbar,.workspace-sidebar,.workspace-card,.dialog,
  .dialog-content,.aside-card,.preview-pane,.content-row,.article-editor-card,
  .editor-dialog .dialog-body,.card,.panel,.modal,.dropdown-menu,.popover,
  .design-options-block,.article-style-overrides,.editor-workflow-note,
  .markdown-quick-tools,.reader-toc-card,.content-card,.topic-card,.article-card,
  .form-section,.settings-panel,.storage-tools-panel,.source-manager,
  .media-layout-editor,.default-format-panel,.media-asset-panel) {
  color: var(--ink);
  background-color: var(--paper);
  border-color: var(--line);
}
html[data-theme="light"] :is(.muted,.reader-meta,.form-note,.field-help,.form-help,
  .hint,.section-heading p,.card-heading p,.reader-summary,.media-studio-heading p,
  .media-preview-placeholder,.studio-action small,.media-studio-tip,.media-asset-item small) {
  color: var(--muted);
}
html[data-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  textarea,select,.search-input,.form-control) {
  color: var(--theme-input-text);
  background: var(--theme-input);
  border-color: var(--line);
}
html[data-theme="light"] :is(input,textarea,select)::placeholder { color: #78869a; opacity: 1; }
html[data-theme="light"] :is(.button-outline,.button-quiet,.text-link,.studio-action,
  .toc-link,.design-category-nav a,.category-nav-main,.category-nav-sub) {
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="light"] :is(.button-outline:hover,.button-quiet:hover,.text-link:hover,
  .studio-action:hover,.toc-link:hover,.toc-link:focus-visible,
  .design-category-nav a:hover,.design-category-nav a:focus-visible) {
  background: var(--theme-hover);
  color: var(--ink);
}
html[data-theme="light"] .design-category-heading {
  background: linear-gradient(120deg,#edf4ff,#ffffff 75%);
  border-color: var(--line);
}
html[data-theme="light"] .design-category-heading p { color: var(--muted); }
html[data-theme="light"] .design-category-nav {
  background: rgba(255,255,255,.96);
  border-color: var(--line);
}
html[data-theme="light"] .design-category-nav a { background: #f2f6fb; }
html[data-theme="light"] .toast { background: #ffffff; color: var(--ink); border-color: var(--line); }
html[data-theme="light"] .search-suggestions,
html[data-theme="light"] .search-suggestions [role="option"] {
  background: #ffffff; color: var(--ink); border-color: var(--line);
}
html[data-theme="light"] .search-suggestions [role="option"]:hover,
html[data-theme="light"] .search-suggestions [role="option"]:focus {
  background: #edf3fb; color: var(--ink);
}
html[data-theme="light"] .reader-left-rail .aside-card { box-shadow: 0 8px 24px rgba(20,35,55,.06); }
html[data-theme="light"] .toc-h1 { background: #edf3fa; color: #182230; border-left-color: var(--accent); }
html[data-theme="light"] .toc-h2 { border-left-color: #dbe3ed; color: #596779; }
html[data-theme="light"] .toc-link.is-active,
html[data-theme="light"] .toc-link[aria-current="location"] {
  background: #e7f0ff; color: #1746a2; border-left-color: #2563eb; font-weight: 750;
}
html[data-theme="light"] #storageToolsPanel {
  background: #fff;
  color: #182230;
  border: 1px solid #dbe3ed;
  box-shadow: 0 8px 24px rgba(20,35,55,.05);
}
html[data-theme="light"] #storageToolsPanel :is(h3,h4,p,strong,label,.form-note) { color: #182230; }
html[data-theme="light"] #storageToolsPanel :is(input,textarea,select) {
  background: #fff; color: #182230; border-color: #dbe3ed;
}
html[data-theme="light"] #storageToolsPanel :is(input,textarea)::placeholder { color: #78869a; }
html[data-theme="light"] .media-studio {
  background: linear-gradient(135deg,#f0f6ff,#ffffff 72%);
  border-color: #d6e3f5;
}
html[data-theme="light"] .media-live-preview {
  background: repeating-linear-gradient(135deg,#f2f6fb,#f2f6fb 12px,#ffffff 12px,#ffffff 24px);
}
html[data-theme="light"] .studio-action { background: #fff; }
html[data-theme="light"] .media-studio-tip { background: #eef4fb; }

/* The code block uses article-specific variables first, then website defaults.
   Do not hard-code colors under the dark theme: that previously overrode the
   color picker and made changes appear not to work. */
html[data-theme] #readerBody pre,
html[data-theme] #markdownPreview pre,
html[data-theme] .markdown-body pre {
  background: var(--article-code-bg, var(--default-code-bg, #17212b)) !important;
  color: var(--article-code-text, var(--default-code-text, #e7edf4)) !important;
  font-size: var(--article-code-size, var(--default-code-size, 13px));
  text-align: var(--article-code-align, var(--article-default-code-align, left));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
}
html[data-theme] #readerBody pre code,
html[data-theme] #markdownPreview pre code,
html[data-theme] .markdown-body pre code {
  background: transparent !important;
  color: inherit !important;
  font-size: inherit;
}
html[data-theme] #readerBody :not(pre) > code,
html[data-theme] #markdownPreview :not(pre) > code,
html[data-theme] .markdown-body :not(pre) > code {
  background: var(--theme-code, var(--soft));
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme] #storageToolsPanel .button:not(.button-outline) { color: #fff; }
html[data-theme] #storageToolsPanel .button-outline { color: var(--ink); background: var(--surface-tint, var(--soft)); border-color: var(--line); }
html[data-theme] :is(input,textarea,select):focus-visible { outline-color: var(--focus-ring); }


/* Final default-style synchronization: use theme tokens for ordinary copy,
   but leave explicit per-article color properties untouched. */
html[data-theme="light"] {
  --ink: #172033; --text: #172033; --text-strong: #111827;
  --muted: #536176; --line: #d8e0eb; --canvas: #f7f9fc;
  --paper: #ffffff; --surface: #ffffff; --surface-raised: #ffffff;
  --surface-tint: #eef3f9; --soft: #f1f5f9; --theme-hover: #e8eff8;
  --theme-code: #f1f5f9; --theme-input: #ffffff; --theme-input-text: #172033;
  --focus-ring: #2563eb;
}
html[data-theme="dark"] {
  --ink: #f1f5fb; --text: #f1f5fb; --text-strong: #ffffff;
  --muted: #bdc8d8; --line: #3a4a60; --canvas: #101722;
  --paper: #1b2635; --surface: #1b2635; --surface-raised: #202e41;
  --surface-tint: #26364b; --soft: #263449; --theme-hover: #2c4058;
  --theme-code: #111b29; --theme-input: #111b29; --theme-input-text: #f1f5fb;
  --focus-ring: #93c5fd;
}
html[data-theme] body { color: var(--ink); background: var(--canvas); }
html[data-theme] :is(#readerBody,#markdownPreview,.markdown-body) :is(p,li,blockquote,figcaption,th,td) { color: inherit; }
html[data-theme] #readerBody h1,
html[data-theme] #markdownPreview h1,
html[data-theme] .markdown-body h1 {
  text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: .07em; text-underline-offset: .18em;
}
/* Contents headings are navigation links, not article headings/cards. */
html[data-theme] :is(.reader-toc-card,.reader-left-rail) .toc-h1 {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--ink) !important;
  text-decoration: none !important; padding: 7px 0 !important;
}
html[data-theme] :is(.reader-toc-card,.reader-left-rail) .toc-h2 { color: var(--muted) !important; }
html[data-theme] .toc-link.is-active,
html[data-theme] .toc-link[aria-current="location"] {
  background: var(--theme-hover) !important; color: var(--ink) !important;
  border-left-color: var(--focus-ring) !important;
}
html[data-theme] #readerBody pre,
html[data-theme] #markdownPreview pre,
html[data-theme] .markdown-body pre {
  background: var(--article-code-bg, var(--default-code-bg, var(--theme-code))) !important;
  color: var(--article-code-text, var(--default-code-text, var(--ink))) !important;
}
html[data-theme] #readerBody pre code,
html[data-theme] #markdownPreview pre code,
html[data-theme] .markdown-body pre code {
  background: transparent !important; color: inherit !important;
  border: 0 !important; box-shadow: none !important;
}
html[data-theme] #readerBody :not(pre) > code,
html[data-theme] #markdownPreview :not(pre) > code,
html[data-theme] .markdown-body :not(pre) > code {
  background: transparent !important; color: inherit !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),textarea,select) {
  color: var(--theme-input-text) !important; background: var(--theme-input) !important; border-color: var(--line) !important;
}
html[data-theme] :is(input,textarea,select)::placeholder { color: var(--muted) !important; opacity: 1; }

/* Dark-mode readability for topic/folder trees and article rows. */
#topicManager .topic-row,
#topicManager .topic-row-main,
#topicManager .topic-row-main b,
#topicManager .topic-row-count,
#topicManager .nested-articles-branch .topic-article-row,
#topicManager .nested-articles-branch .topic-article-row > div,
#topicManager .nested-articles-branch .topic-article-row span:not(.status-chip),
#sourceFileTree,
#sourceFileTree .source-tree-row,
#sourceFileTree .source-entry-name,
#sourceFileTree .source-tree-row small,
#panel-topicsAdmin .folder-import,
#panel-topicsAdmin .folder-import h4,
#panel-topicsAdmin .folder-import p {
  color: var(--text, #172033);
}
#topicManager .topic-row,
#topicManager .nested-articles-branch .topic-article-row,
#sourceFileTree {
  background-color: var(--surface, #fff);
  border-color: var(--line, #dbe3ef);
}
#topicManager .nested-articles-branch .topic-article-row:hover,
#sourceFileTree .source-tree-row:hover {
  background-color: var(--soft, #f1f5f9);
}
#sourceFileTree .source-tree-row small { background: var(--soft, #f1f5f9); }
:root[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row,
:root[data-theme="dark"] #topicManager .topic-row,
:root[data-theme="dark"] #sourceFileTree,
[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row,
[data-theme="dark"] #topicManager .topic-row,
[data-theme="dark"] #sourceFileTree {
  color: var(--text, #e5e7eb);
  background-color: var(--surface, #111827);
  border-color: var(--line, #374151);
}
:root[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row > div,
:root[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row span:not(.status-chip),
[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row > div,
[data-theme="dark"] #topicManager .nested-articles-branch .topic-article-row span:not(.status-chip) {
  color: var(--text, #e5e7eb) !important;
}


/* Final fix: keep the live-preview title attached to the preview viewport,
   with the same surface color as the preview in either theme. */
html[data-theme] .preview-pane {
  position: relative;
  isolation: isolate;
  padding-top: 0;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme] .preview-pane > .preview-label {
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  margin: 0 -15px 15px;
  padding: 12px 15px;
  background: var(--surface-tint, var(--soft)) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  line-height: 1.35;
  opacity: 1;
}
html[data-theme] .preview-pane #markdownPreview {
  color: var(--ink);
}

/* Fix theme leakage in the source/media saving workflow and profile surfaces:
   labels and headings must not retain pale-on-white or dark-on-dark colors. */
html[data-theme] :is(#storageToolsPanel, .media-studio, .media-studio-tip,
  .media-studio-heading, .profile-card, .profile-panel, .author-card) {
  color: var(--ink) !important;
}
html[data-theme] :is(#storageToolsPanel, .media-studio, .profile-card,
  .profile-panel, .author-card) :is(h1,h2,h3,h4,h5,p,span,strong,b,label,
  small,.field-label,.section-heading,.card-heading,.form-note,.field-help) {
  color: inherit;
}
html[data-theme] :is(#storageToolsPanel, .media-studio, .profile-card,
  .profile-panel, .author-card) :is(input,textarea,select) {
  background: var(--theme-input, var(--paper)) !important;
  color: var(--theme-input-text, var(--ink)) !important;
  border-color: var(--line) !important;
}
html[data-theme] :is(#storageToolsPanel, .media-studio, .profile-card,
  .profile-panel, .author-card) :is(input,textarea,select)::placeholder {
  color: var(--muted) !important;
}
html[data-theme="light"] :is(#storageToolsPanel, .media-studio,
  .profile-card, .profile-panel, .author-card) {
  background-color: var(--paper);
  color: #172033 !important;
}
html[data-theme="dark"] :is(#storageToolsPanel, .media-studio,
  .profile-card, .profile-panel, .author-card) {
  background-color: var(--paper);
  color: #f1f5fb !important;
}
html[data-theme="light"] :is(#storageToolsPanel, .media-studio,
  .profile-card, .profile-panel, .author-card) :is(h1,h2,h3,h4,h5,p,span,strong,b,label,small) {
  color: #172033;
}
html[data-theme="dark"] :is(#storageToolsPanel, .media-studio,
  .profile-card, .profile-panel, .author-card) :is(h1,h2,h3,h4,h5,p,span,strong,b,label,small) {
  color: #f1f5fb;
}