/* ============================================================
   STACKLAB CLAUDE + COBALT THEMES (v68, +cobalt 2026-08)
   Three additional themes:
     html.theme-light  -> Claude Light (ivory / terracotta)
     html.theme-dark   -> Claude Dark  (charcoal / terracotta)
     html.theme-cobalt -> Cobalt (dark navy / blue accent)
   The GREEN theme is untouched: it stays keyed off html.night
   (base style.css + the CSS embedded in nightfx.js) and remains
   the site default. nightfx.js cycles: green -> dark -> light -> cobalt.
   Load AFTER style.css. article.css loads later but its selectors
   are unprefixed, so every rule here wins on specificity.
   ============================================================ */

html.theme-light {
  --c-bg: #faf9f5;          /* ivory page background */
  --c-bg2: #f5f4ee;         /* sidebar "oat" */
  --c-panel: #ffffff;       /* cards / tables / code chrome */
  --c-panel2: #f0efe7;      /* secondary surface (headers, quotes) */
  --c-line: #e8e6dc;        /* hairline borders */
  --c-line2: #d6d3c6;       /* stronger borders / controls */
  --c-ink: #1f1e1d;         /* primary text */
  --c-muted: #63615a;       /* secondary text */
  --c-dim: #918f86;         /* tertiary text */
  --c-accent: #c96442;      /* Claude terracotta */
  --c-accent-rgb: 201, 100, 66; /* same color as --c-accent, as an r,g,b
                                    triplet - lets rgba(var(--c-accent-rgb), X)
                                    build custom-alpha glows (e.g. the
                                    reading-progress pulse) per theme. */
  --c-accent-strong: #b4552f; /* burnt terracotta: white text reads on it */
  --c-accent-ink: #ffffff;  /* text on accent */
  --c-accent-soft: rgba(201, 100, 66, .10);
  --c-code-bg: #f0efe7;     /* inline code */
  --c-pre-bg: #f7f6f1;      /* code blocks */
  --c-shadow: rgba(31, 30, 29, .06);
  color-scheme: light;
}

html.theme-dark {
  --c-bg: #262624;
  --c-bg2: #1f1e1c;
  --c-panel: #30302e;
  --c-panel2: #393937;
  --c-line: #3a3a37;
  --c-line2: #4c4c47;
  --c-ink: #f0eee6;
  --c-muted: #b8b5a9;
  --c-dim: #83817a;
  --c-accent: #d97757;
  --c-accent-rgb: 217, 119, 87;
  --c-accent-strong: #b4552f;
  --c-accent-ink: #1f1e1d;
  --c-accent-soft: rgba(217, 119, 87, .14);
  --c-code-bg: #1e1d1b;
  --c-pre-bg: #1a1918;
  --c-shadow: rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* Cobalt: dark navy background + blue accent. A 4th theme, same variable
   contract as the two Claude themes above so every rule below just works
   once these are defined - see the mechanical html.theme-dark ->
   +html.theme-cobalt selector extension throughout the rest of this file. */
html.theme-cobalt {
  --c-bg: #0b1120;
  --c-bg2: #0a0f1c;
  --c-panel: #0f172a;
  --c-panel2: #111827;
  --c-line: #1c2938;
  --c-line2: #2c3e54;
  --c-ink: #e2e8f0;
  --c-muted: #94a3b8;
  --c-dim: #64748b;
  --c-accent: #3b82f6;
  --c-accent-rgb: 59, 130, 246;
  --c-accent-strong: #2563eb;
  --c-accent-ink: #ffffff;
  --c-accent-soft: rgba(59, 130, 246, .16);
  --c-code-bg: #1c2938;
  --c-pre-bg: #0a0f1c;
  --c-shadow: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- base ---------- */
html.theme-light body,
html.theme-dark body , html.theme-cobalt body {
  background-color: var(--c-bg);
  background-image: none;          /* no night grid */
  color: var(--c-ink);
}

/* Claude-style serif headings in article bodies */
html.theme-light .md h1, html.theme-light .md h2, html.theme-light .md h3,
html.theme-dark .md h1, html.theme-cobalt .md h1, html.theme-dark .md h2, html.theme-cobalt .md h2, html.theme-dark .md h3 , html.theme-cobalt .md h3 {
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  color: var(--c-ink);
  text-shadow: none;
  letter-spacing: -0.01em;
}
/* animated underline that grows in on scroll-reveal (owner 2026-09) -
   nightfx.js adds .nfx-rv/.in to every .md h1/h2 UNCONDITIONALLY,
   regardless of active theme (its IntersectionObserver isn't theme-gated -
   see the "reveal-on-scroll" section of nightfx.js), but only the green
   night theme actually had a `::after` rule using those classes. Same
   effect here, own accent color per theme instead of the hardcoded green. */
html.theme-light .md h1.nfx-rv::after, html.theme-dark .md h1.nfx-rv::after, html.theme-cobalt .md h1.nfx-rv::after,
html.theme-light .md h2.nfx-rv::after, html.theme-dark .md h2.nfx-rv::after, html.theme-cobalt .md h2.nfx-rv::after {
  content: ""; display: block; height: 2px; margin-top: 6px; width: 0;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  transition: width .8s ease .15s; border-radius: 2px;
}
html.theme-light .md h1.nfx-rv.in::after, html.theme-dark .md h1.nfx-rv.in::after, html.theme-cobalt .md h1.nfx-rv.in::after,
html.theme-light .md h2.nfx-rv.in::after, html.theme-dark .md h2.nfx-rv.in::after, html.theme-cobalt .md h2.nfx-rv.in::after {
  width: 120px;
}

/* ---------- topbar ---------- */
html.theme-light .topbar,
html.theme-dark .topbar , html.theme-cobalt .topbar {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 8px var(--c-shadow);
}
html.theme-light .topbar a, html.theme-dark .topbar a, html.theme-cobalt .topbar a,
html.theme-light .topbar h1, html.theme-dark .topbar h1, html.theme-cobalt .topbar h1,
html.theme-light .logo-text, html.theme-dark .logo-text, html.theme-cobalt .logo-text,
html.theme-light .site-title, html.theme-dark .site-title, html.theme-cobalt .site-title,
html.theme-light .menu-toggle, html.theme-dark .menu-toggle , html.theme-cobalt .menu-toggle {
  color: var(--c-ink);
  text-shadow: none;
}
html.theme-light .login-info, html.theme-dark .login-info , html.theme-cobalt .login-info { color: var(--c-muted); }
html.theme-light .login-info strong, html.theme-dark .login-info strong , html.theme-cobalt .login-info strong { color: var(--c-ink); }
/* Login / Logout / Register links carry inline style="color:#50fa7b".
   v70 root-cause fix: this rule previously ALSO hit the 🛠 Admin pill
   (specificity .login-info a > .topbar-admin-btn) and painted its text
   terracotta-on-terracotta = invisible. The pill is now excluded. */
html.theme-light .login-info a:not(.topbar-admin-btn),
html.theme-dark .login-info a:not(.topbar-admin-btn) , html.theme-cobalt .login-info a:not(.topbar-admin-btn) { color: var(--c-accent) !important; }
html.theme-light .topbar-admin-btn, html.theme-light .login-info a.topbar-admin-btn,
html.theme-dark .topbar-admin-btn, html.theme-cobalt .topbar-admin-btn, html.theme-dark .login-info a.topbar-admin-btn , html.theme-cobalt .login-info a.topbar-admin-btn {
  /* burnt terracotta: white text reads at ~5.4:1 on BOTH themes */
  background: var(--c-accent-strong);
  color: #ffffff !important;
  text-shadow: none;
}
html.theme-light .topbar-admin-btn:hover,
html.theme-dark .topbar-admin-btn:hover , html.theme-cobalt .topbar-admin-btn:hover { box-shadow: 0 0 10px var(--c-accent-soft); filter: brightness(1.05); }
html.theme-light .topbar-avatar, html.theme-dark .topbar-avatar , html.theme-cobalt .topbar-avatar { border-color: var(--c-line2); }
html.theme-light .topbar-profile-link:hover strong,
html.theme-dark .topbar-profile-link:hover strong , html.theme-cobalt .topbar-profile-link:hover strong { text-shadow: none; color: var(--c-accent); }

/* theme toggle button - slim circular ring (base styles injected by
   nightfx.js are white-on-dark; retint both the icon and the ring) */
html.theme-light .theme-toggle, html.theme-dark .theme-toggle , html.theme-cobalt .theme-toggle {
  color: var(--c-ink);
  border-color: var(--c-line2);
}
html.theme-light .theme-toggle:hover,
html.theme-dark .theme-toggle:hover , html.theme-cobalt .theme-toggle:hover { border-color: var(--c-accent); }

/* ---------- sidebar ---------- */
html.theme-light .sidebar, html.theme-dark .sidebar , html.theme-cobalt .sidebar {
  background-color: var(--c-bg2);
  color: var(--c-muted);
  border-right: 1px solid var(--c-line);
}
html.theme-light .sidebar-header h2, html.theme-dark .sidebar-header h2 , html.theme-cobalt .sidebar-header h2 {
  color: var(--c-ink); text-shadow: none;
}
html.theme-light .sidebar-header p, html.theme-dark .sidebar-header p , html.theme-cobalt .sidebar-header p { color: var(--c-dim); }

html.theme-light .sidebar select, html.theme-dark .sidebar select, html.theme-cobalt .sidebar select,
html.theme-light #categorySelect, html.theme-dark #categorySelect , html.theme-cobalt #categorySelect {
  background-color: var(--c-panel) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line2) !important;
}
html.theme-light .sidebar-search input, html.theme-dark .sidebar-search input , html.theme-cobalt .sidebar-search input {
  background-color: var(--c-panel) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line2) !important;
}
html.theme-light .sidebar-search input:focus,
html.theme-dark .sidebar-search input:focus , html.theme-cobalt .sidebar-search input:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  background-color: var(--c-panel) !important;
}
html.theme-light .sidebar-search input::placeholder,
html.theme-dark .sidebar-search input::placeholder , html.theme-cobalt .sidebar-search input::placeholder { color: var(--c-dim); }

/* ---------- folder panel (owner 2026-08) ---------- */
html.theme-light .folder-panel-tab, html.theme-dark .folder-panel-tab , html.theme-cobalt .folder-panel-tab,
html.theme-light .folder-panel, html.theme-dark .folder-panel , html.theme-cobalt .folder-panel {
  background-color: var(--c-panel);
  color: var(--c-muted);
  border-color: var(--c-line2);
}
html.theme-light .folder-panel-tab:hover, html.theme-dark .folder-panel-tab:hover , html.theme-cobalt .folder-panel-tab:hover {
  background-color: var(--c-panel2);
  color: var(--c-ink);
}
html.theme-light .folder-panel-head, html.theme-dark .folder-panel-head , html.theme-cobalt .folder-panel-head {
  border-color: var(--c-line);
}
html.theme-light .folder-panel-head b, html.theme-dark .folder-panel-head b , html.theme-cobalt .folder-panel-head b {
  color: var(--c-ink);
}
html.theme-light .folder-panel-x, html.theme-dark .folder-panel-x , html.theme-cobalt .folder-panel-x { color: var(--c-dim); }
html.theme-light .folder-panel-x:hover, html.theme-dark .folder-panel-x:hover , html.theme-cobalt .folder-panel-x:hover { color: var(--c-ink); }
html.theme-light .folder-panel-item, html.theme-dark .folder-panel-item , html.theme-cobalt .folder-panel-item,
html.theme-light .folder-panel-sub, html.theme-dark .folder-panel-sub , html.theme-cobalt .folder-panel-sub {
  color: var(--c-ink);
}
html.theme-light .folder-panel-item:hover, html.theme-dark .folder-panel-item:hover , html.theme-cobalt .folder-panel-item:hover,
html.theme-light .folder-panel-sub:hover, html.theme-dark .folder-panel-sub:hover , html.theme-cobalt .folder-panel-sub:hover {
  background-color: var(--c-panel2);
}
html.theme-light .folder-panel-item.current, html.theme-dark .folder-panel-item.current , html.theme-cobalt .folder-panel-item.current {
  background-color: var(--c-accent-soft);
  border-left-color: var(--c-accent);
  color: var(--c-ink);
}
html.theme-light .folder-panel-empty, html.theme-dark .folder-panel-empty , html.theme-cobalt .folder-panel-empty { color: var(--c-dim); }

html.theme-light .article-nav, html.theme-dark .article-nav , html.theme-cobalt .article-nav { border-color: var(--c-line); }
html.theme-light .article-nav-prev, html.theme-dark .article-nav-prev , html.theme-cobalt .article-nav-prev,
html.theme-light .article-nav-next, html.theme-dark .article-nav-next , html.theme-cobalt .article-nav-next {
  border-color: var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .article-nav-prev:hover, html.theme-dark .article-nav-prev:hover , html.theme-cobalt .article-nav-prev:hover,
html.theme-light .article-nav-next:hover, html.theme-dark .article-nav-next:hover , html.theme-cobalt .article-nav-next:hover {
  background-color: var(--c-panel2);
  border-color: var(--c-accent);
}
html.theme-light .article-nav-label, html.theme-dark .article-nav-label , html.theme-cobalt .article-nav-label { color: var(--c-dim); }

html.theme-light .sidebar > details, html.theme-dark .sidebar > details , html.theme-cobalt .sidebar > details {
  border-bottom: 1px solid var(--c-line);
}
html.theme-light .sidebar summary, html.theme-dark .sidebar summary, html.theme-cobalt .sidebar summary,
html.theme-light #sidebar-container summary, html.theme-dark #sidebar-container summary , html.theme-cobalt #sidebar-container summary {
  color: var(--c-ink);
}
html.theme-light #sidebar-container summary:hover,
html.theme-dark #sidebar-container summary:hover , html.theme-cobalt #sidebar-container summary:hover { color: var(--c-accent); }
html.theme-light .sidebar .tool-subgroup summary,
html.theme-dark .sidebar .tool-subgroup summary , html.theme-cobalt .sidebar .tool-subgroup summary { color: var(--c-muted); }
html.theme-light .sidebar a, html.theme-dark .sidebar a, html.theme-cobalt .sidebar a,
html.theme-light #sidebar-container a, html.theme-dark #sidebar-container a , html.theme-cobalt #sidebar-container a {
  color: var(--c-muted);
  /* v70 root-cause fix: base style.css makes sidebar links display:block,
     which the GREEN theme overrides to inline-block — without the same
     override here, an "📧 <a>email</a>" card line stacked the emoji and
     the link on separate lines (owner screenshot 1 vs 2) */
  display: inline-block;
}
html.theme-light #sidebar-container a:hover,
html.theme-dark #sidebar-container a:hover , html.theme-cobalt #sidebar-container a:hover {
  /* owner 2026-09: night theme's equivalent hover has a soft text-shadow
     glow (html.night #sidebar-container a:hover in nightfx.js) - these 3
     themes explicitly had none, which read as flat/inconsistent next to
     it. Same treatment, each theme's own accent color. */
  color: var(--c-accent); text-shadow: 0 0 12px rgba(var(--c-accent-rgb), .5);
}
html.theme-light .active-link, html.theme-light #sidebar-container a.active-link,
html.theme-dark .active-link, html.theme-cobalt .active-link, html.theme-dark #sidebar-container a.active-link , html.theme-cobalt #sidebar-container a.active-link {
  color: var(--c-accent) !important;
  font-weight: 700;
  /* same reasoning as the hover rule above - night's .active-link glows
     (text-shadow:0 0 14px rgba(0,229,126,.55)), these were flat by
     comparison (owner-reported 2026-09). */
  text-shadow: 0 0 14px rgba(var(--c-accent-rgb), .55);
}
/* Folder "Tree View" listing (templates/category.html, render_sidebar_tree_styled
   in sidebar_macros.html) - its own .tree-* classes, NOT .sidebar/#sidebar-container,
   so the rules above never touched it. Without an override here it fell through to
   style.css's theme-independent `.tree-line:hover { background-color: #f5f7f9 }` -
   a plain light-gray box that only ever looked right on a white background, and
   never got the glowing-text treatment the night theme has via
   `html.night .tree-doc a:hover` (owner-reported 2026-09: looked like an ugly
   frame on the Claude themes instead of the text just lighting up). */
html.theme-light .tree-line:hover, html.theme-dark .tree-line:hover, html.theme-cobalt .tree-line:hover {
  /* deliberately much lighter than --c-accent-soft (10-16%, tuned for
     things like input focus rings) - matching night's 6% wash so the
     glowing TEXT stays the star of the effect instead of fighting a
     same-color box behind it (owner-reported 2026-09: --c-accent-soft
     read as a flat, muddy block instead of a glow). */
  background: rgba(var(--c-accent-rgb), .06);
}
html.theme-light .tree-doc a:hover, html.theme-dark .tree-doc a:hover, html.theme-cobalt .tree-doc a:hover {
  color: var(--c-accent);
  text-shadow: 0 0 12px rgba(var(--c-accent-rgb), .5);
}
/* owner 2026-09: white looked too stark - settled on the same muted tone
   the real sidebar links already use (.sidebar a { color: var(--c-muted) }
   above) for consistency. dark/cobalt only, theme-light and the green
   night theme are untouched on purpose. */
html.theme-dark .tree-doc a, html.theme-cobalt .tree-doc a {
  color: var(--c-muted);
}
/* folder headings ("Monitoring", "Grafana") had no override either - same
   gap as .tree-doc above, style.css's base `.tree-folder { color: #333 }`
   is nearly invisible on a dark background (owner-reported 2026-09).
   Mirrors night theme's own pattern: nested folders get the readable
   "ink" tone, the top-level root folder gets the accent color + a subtle
   glow to stand out as the current section. */
html.theme-dark .tree-folder, html.theme-cobalt .tree-folder {
  color: var(--c-ink);
}
html.theme-dark .tree-folder-root, html.theme-cobalt .tree-folder-root {
  color: var(--c-accent);
  text-shadow: 0 0 14px rgba(var(--c-accent-rgb), .2);
}
/* Card View's own per-section breadcrumb ("vng / changes / 2024 / 06" above
   each group of article cards, templates/category.html's render_card_listing
   macro) - same missed-component gap as .tree-* above. Base style.css has
   `.cat-crumb-last { color: #222 }` (near-black - the LAST segment is meant
   to stand out, but only works on a white page) and `.cat-crumb { color:
   #888 }`, both unreadable on a dark background (owner-reported 2026-09:
   both the first segment and the "current" last segment were nearly
   invisible). Mirrors night's own `--n-dim`/`--n-lime` treatment. */
html.theme-dark .cat-crumb, html.theme-cobalt .cat-crumb {
  color: var(--c-muted);
}
html.theme-dark .cat-crumb-last, html.theme-cobalt .cat-crumb-last {
  color: var(--c-accent);
}
html.theme-dark .cat-sep, html.theme-cobalt .cat-sep {
  color: var(--c-line2);
}
/* folder intro panel (a README.md rendered above the card grid, sharing
   one bordered frame with the listing below it - see .cat-readme-wrap in
   style.css and _find_readme in routes_pages.py). Styled for all 3
   Claude themes from the start, same lesson as the block above. */
html.theme-light .cat-readme-wrap, html.theme-dark .cat-readme-wrap, html.theme-cobalt .cat-readme-wrap {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
}
html.theme-light .cat-readme-sep, html.theme-dark .cat-readme-sep, html.theme-cobalt .cat-readme-sep {
  border-top-color: var(--c-line);
}
/* sidebar "search content" hint + /search results page (owner 2026-09) -
   styled for all 3 Claude themes from the start this time, instead of
   only covering the green/default theme and having to patch dark/cobalt
   in later (the pattern that kept coming up above for .tree-*/.cat-*). */
html.theme-light .content-search-hint, html.theme-dark .content-search-hint, html.theme-cobalt .content-search-hint {
  color: var(--c-muted);
}
html.theme-light .content-search-hint:hover, html.theme-dark .content-search-hint:hover, html.theme-cobalt .content-search-hint:hover {
  color: var(--c-accent);
}
html.theme-light .search-page-form input[type="text"], html.theme-dark .search-page-form input[type="text"], html.theme-cobalt .search-page-form input[type="text"] {
  background: var(--c-panel); color: var(--c-ink); border: 1px solid var(--c-line2);
}
html.theme-light .search-page-meta, html.theme-dark .search-page-meta, html.theme-cobalt .search-page-meta {
  color: var(--c-muted);
}
html.theme-light .search-result-title, html.theme-dark .search-result-title, html.theme-cobalt .search-result-title {
  color: var(--c-accent);
}
html.theme-light .search-result-path, html.theme-dark .search-result-path, html.theme-cobalt .search-result-path {
  color: var(--c-muted);
}
html.theme-light .search-result-snippet, html.theme-dark .search-result-snippet, html.theme-cobalt .search-result-snippet {
  color: var(--c-ink);
}
html.theme-dark .search-result-snippet mark, html.theme-cobalt .search-result-snippet mark {
  background: rgba(var(--c-accent-rgb), .35); color: var(--c-ink);
}
html.theme-light .sb-new-folder, html.theme-dark .sb-new-folder , html.theme-cobalt .sb-new-folder {
  background: var(--c-panel);
  border: 1px dashed var(--c-line2);
  color: var(--c-muted);
}
html.theme-light .sb-new-folder:hover,
html.theme-dark .sb-new-folder:hover , html.theme-cobalt .sb-new-folder:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* collapse / expand buttons */
html.theme-light #sidebar-collapse-btn, html.theme-dark #sidebar-collapse-btn, html.theme-cobalt #sidebar-collapse-btn,
html.theme-light #sidebar-expand-btn, html.theme-dark #sidebar-expand-btn, html.theme-cobalt #sidebar-expand-btn,
html.theme-light .sidebar-close-btn, html.theme-dark .sidebar-close-btn , html.theme-cobalt .sidebar-close-btn {
  background: var(--c-panel);
  color: var(--c-muted);
  border: 1px solid var(--c-line2);
}
html.theme-light #sidebar-collapse-btn:hover, html.theme-dark #sidebar-collapse-btn:hover, html.theme-cobalt #sidebar-collapse-btn:hover,
html.theme-light #sidebar-expand-btn:hover, html.theme-dark #sidebar-expand-btn:hover, html.theme-cobalt #sidebar-expand-btn:hover,
html.theme-light .sidebar-close-btn:hover, html.theme-dark .sidebar-close-btn:hover , html.theme-cobalt .sidebar-close-btn:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  box-shadow: none;
}

/* drag-to-resize handle (fix: invisible white line on light backgrounds) */
html.theme-light #sidebar-resizer::after,
html.theme-dark #sidebar-resizer::after , html.theme-cobalt #sidebar-resizer::after { background: var(--c-line2); }
html.theme-light #sidebar-resizer:hover::after,
html.theme-dark #sidebar-resizer:hover::after, html.theme-cobalt #sidebar-resizer:hover::after,
html.theme-light body.sidebar-resizing #sidebar-resizer::after,
html.theme-dark body.sidebar-resizing #sidebar-resizer::after , html.theme-cobalt body.sidebar-resizing #sidebar-resizer::after { background: var(--c-accent); }

/* Recently viewed (fix: stayed green when leaving the green theme) */
html.theme-light .recents-block, html.theme-dark .recents-block , html.theme-cobalt .recents-block {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
html.theme-light .recents-title, html.theme-dark .recents-title , html.theme-cobalt .recents-title { color: var(--c-accent); }
html.theme-light .recents-list a, html.theme-dark .recents-list a , html.theme-cobalt .recents-list a { color: var(--c-muted); }
html.theme-light .recents-list a:hover, html.theme-dark .recents-list a:hover , html.theme-cobalt .recents-list a:hover { color: var(--c-accent); }

/* Sidebar cards (info blocks) */
html.theme-light .info-block, html.theme-light .sidebar .info-block,
html.theme-dark .info-block, html.theme-cobalt .info-block, html.theme-dark .sidebar .info-block , html.theme-cobalt .sidebar .info-block {
  background-color: var(--c-panel);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  /* v69: pin the exact compact metrics the green theme gets, so the card
     can't "jump" — and stop long emails/URLs from stretching the sidebar */
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
html.theme-light .info-title, html.theme-light .sidebar .info-title,
html.theme-dark .info-title, html.theme-cobalt .info-title, html.theme-dark .sidebar .info-title , html.theme-cobalt .sidebar .info-title {
  color: var(--c-ink);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
html.theme-light .info-card-md p, html.theme-dark .info-card-md p , html.theme-cobalt .info-card-md p {
  margin: 3px 0;
  line-height: 1.5;
}
html.theme-light .info-card-md img, html.theme-dark .info-card-md img , html.theme-cobalt .info-card-md img { max-width: 100%; }
html.theme-light .info-line, html.theme-dark .info-line , html.theme-cobalt .info-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.35;
  min-width: 0;
}
html.theme-light .info-block a, html.theme-light .sidebar .info-block a,
html.theme-light .info-line a,
html.theme-dark .info-block a, html.theme-cobalt .info-block a, html.theme-dark .sidebar .info-block a, html.theme-cobalt .sidebar .info-block a,
html.theme-dark .info-line a , html.theme-cobalt .info-line a { color: var(--c-accent); }

/* ---------- content shell ---------- */
html.theme-light .content, html.theme-dark .content , html.theme-cobalt .content { background: transparent; color: var(--c-ink); }
html.theme-light .breadcrumb, html.theme-dark .breadcrumb , html.theme-cobalt .breadcrumb { color: var(--c-dim); }
html.theme-light .breadcrumb a, html.theme-dark .breadcrumb a , html.theme-cobalt .breadcrumb a { color: var(--c-muted); }
html.theme-light .breadcrumb a:hover, html.theme-dark .breadcrumb a:hover , html.theme-cobalt .breadcrumb a:hover { color: var(--c-accent); }
html.theme-light .footer, html.theme-dark .footer , html.theme-cobalt .footer {
  color: var(--c-dim);
  border-top: 1px solid var(--c-line);
}
html.theme-light .pagination, html.theme-dark .pagination , html.theme-cobalt .pagination { border-top: 1px solid var(--c-line); }
/* folder-siblings slide-out panel (owner 2026-09): the base rules in
   style.css were hardcoded to one fixed dark palette with no theme
   awareness - fine by coincidence against a dark page, but a jarring dark
   slab dropped onto these light/dark Claude themes' own actual palette. */
html.theme-light .folder-panel-tab, html.theme-dark .folder-panel-tab , html.theme-cobalt .folder-panel-tab,
html.theme-light .folder-panel, html.theme-dark .folder-panel , html.theme-cobalt .folder-panel {
  background: var(--c-panel); color: var(--c-muted); border-color: var(--c-line2);
}
html.theme-light .folder-panel-tab:hover, html.theme-dark .folder-panel-tab:hover , html.theme-cobalt .folder-panel-tab:hover {
  background: var(--c-panel2); color: var(--c-accent); border-color: var(--c-accent);
}
html.theme-light .folder-panel-head, html.theme-dark .folder-panel-head , html.theme-cobalt .folder-panel-head {
  border-bottom-color: var(--c-line);
}
html.theme-light .folder-panel-head b, html.theme-dark .folder-panel-head b , html.theme-cobalt .folder-panel-head b { color: var(--c-ink); }
html.theme-light .folder-panel-x, html.theme-dark .folder-panel-x , html.theme-cobalt .folder-panel-x { color: var(--c-dim); }
html.theme-light .folder-panel-x:hover, html.theme-dark .folder-panel-x:hover , html.theme-cobalt .folder-panel-x:hover { color: var(--c-ink); }
html.theme-light .folder-panel-item, html.theme-dark .folder-panel-item , html.theme-cobalt .folder-panel-item,
html.theme-light .folder-panel-sub, html.theme-dark .folder-panel-sub , html.theme-cobalt .folder-panel-sub { color: var(--c-muted); }
html.theme-light .folder-panel-item:hover, html.theme-dark .folder-panel-item:hover , html.theme-cobalt .folder-panel-item:hover,
html.theme-light .folder-panel-sub:hover, html.theme-dark .folder-panel-sub:hover , html.theme-cobalt .folder-panel-sub:hover {
  background: rgba(var(--c-accent-rgb), .08); color: var(--c-ink);
}
html.theme-light .folder-panel-item.current, html.theme-dark .folder-panel-item.current , html.theme-cobalt .folder-panel-item.current {
  background: rgba(var(--c-accent-rgb), .14); border-left-color: var(--c-accent); color: var(--c-ink);
}
html.theme-light .folder-panel-sub, html.theme-dark .folder-panel-sub , html.theme-cobalt .folder-panel-sub { color: var(--c-dim); }
html.theme-light .folder-panel-empty, html.theme-dark .folder-panel-empty , html.theme-cobalt .folder-panel-empty { color: var(--c-dim); }

html.theme-light .pagination a, html.theme-dark .pagination a , html.theme-cobalt .pagination a {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .pagination a:hover,
html.theme-dark .pagination a:hover , html.theme-cobalt .pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }

/* banners use inline pastel styles -> attribute-match like the night theme */
html.theme-light div[style*="e6fffa"], html.theme-light div[style*="fff7e6"],
html.theme-dark div[style*="e6fffa"], html.theme-cobalt div[style*="e6fffa"], html.theme-dark div[style*="fff7e6"] , html.theme-cobalt div[style*="fff7e6"] {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-muted) !important;
  border-radius: 12px !important;
}
html.theme-light div[style*="e6fffa"] a, html.theme-light div[style*="fff7e6"] a,
html.theme-dark div[style*="e6fffa"] a, html.theme-cobalt div[style*="e6fffa"] a, html.theme-dark div[style*="fff7e6"] a , html.theme-cobalt div[style*="fff7e6"] a { color: var(--c-accent); }
html.theme-light div[style*="e6fffa"] strong, html.theme-light div[style*="fff7e6"] strong,
html.theme-dark div[style*="e6fffa"] strong, html.theme-cobalt div[style*="e6fffa"] strong, html.theme-dark div[style*="fff7e6"] strong , html.theme-cobalt div[style*="fff7e6"] strong { color: var(--c-ink); }

html.theme-light .site-quote, html.theme-dark .site-quote , html.theme-cobalt .site-quote {
  border-left: 3px solid var(--c-accent);
  background: var(--c-panel2);
  color: var(--c-muted);
}

/* ---------- markdown body ---------- */
html.theme-light .md, html.theme-dark .md , html.theme-cobalt .md { color: var(--c-ink); }
html.theme-light .md a, html.theme-dark .md a , html.theme-cobalt .md a { color: var(--c-accent); }
html.theme-light .md a:hover, html.theme-dark .md a:hover , html.theme-cobalt .md a:hover { text-decoration: underline; }
html.theme-light .md strong, html.theme-dark .md strong , html.theme-cobalt .md strong { color: var(--c-ink); }
html.theme-light .md hr, html.theme-dark .md hr , html.theme-cobalt .md hr { border-top: 1px dashed var(--c-line2) !important; }
html.theme-light .md blockquote, html.theme-dark .md blockquote , html.theme-cobalt .md blockquote {
  background: var(--c-panel2) !important;
  border-left: 4px solid var(--c-accent) !important;
  color: var(--c-muted) !important;
}
html.theme-light .md code:not(pre code), html.theme-dark .md code:not(pre code) , html.theme-cobalt .md code:not(pre code) {
  background: var(--c-code-bg);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  border-radius: 6px;
  padding: 1px 6px;
}
html.theme-light .img-caption, html.theme-dark .img-caption , html.theme-cobalt .img-caption { color: var(--c-dim); }

/* ---------- code boxes ---------- */
html.theme-light .codebox, html.theme-dark .codebox , html.theme-cobalt .codebox {
  border: 1px solid var(--c-line) !important;
  background: var(--c-panel);
  box-shadow: 0 4px 16px var(--c-shadow) !important;
}
html.theme-light .codebox:hover, html.theme-dark .codebox:hover , html.theme-cobalt .codebox:hover {
  border-color: var(--c-line2) !important;
  transform: none;
}
html.theme-light .codebox-header, html.theme-dark .codebox-header , html.theme-cobalt .codebox-header {
  background: var(--c-panel2) !important;
  border-bottom: 1px solid var(--c-line) !important;
  color: var(--c-muted) !important;
}
html.theme-light .lang-badge, html.theme-dark .lang-badge , html.theme-cobalt .lang-badge {
  background: var(--c-accent-soft) !important;
  border: 1px solid transparent !important;
  color: var(--c-accent) !important;
}
html.theme-light .copy-btn, html.theme-light .copy-all-btn,
html.theme-dark .copy-btn, html.theme-cobalt .copy-btn, html.theme-dark .copy-all-btn , html.theme-cobalt .copy-all-btn {
  background: var(--c-panel) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line2) !important;
  box-shadow: none;
}
html.theme-light .copy-btn:hover, html.theme-light .copy-all-btn:hover,
html.theme-dark .copy-btn:hover, html.theme-cobalt .copy-btn:hover, html.theme-dark .copy-all-btn:hover , html.theme-cobalt .copy-all-btn:hover {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  box-shadow: none;
}
html.theme-light .md pre, html.theme-light pre { background: var(--c-pre-bg) !important; }
html.theme-dark .md pre, html.theme-cobalt .md pre, html.theme-dark pre , html.theme-cobalt pre { background: var(--c-pre-bg) !important; color: #e8e6dc; }
html.theme-light .md pre code, html.theme-dark .md pre code , html.theme-cobalt .md pre code { background: transparent !important; }

/* ---------- tables ---------- */
html.theme-light .md table, html.theme-dark .md table, html.theme-cobalt .md table,
html.theme-light table, html.theme-dark table , html.theme-cobalt table {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-line) !important;
  box-shadow: 0 2px 8px var(--c-shadow) !important;
  color: var(--c-ink);
}
html.theme-light .md thead th, html.theme-dark .md thead th , html.theme-cobalt .md thead th {
  background: var(--c-panel2) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-line) !important;
}
html.theme-light .md th, html.theme-light .md td,
html.theme-dark .md th, html.theme-cobalt .md th, html.theme-dark .md td , html.theme-cobalt .md td {
  border-color: var(--c-line) !important;
  color: var(--c-ink);
}
html.theme-light .md tbody tr:nth-child(odd) td { background: rgba(31, 30, 29, .02) !important; }
html.theme-dark .md tbody tr:nth-child(odd) td , html.theme-cobalt .md tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .02) !important; }
html.theme-light .md tbody tr:hover td,
html.theme-dark .md tbody tr:hover td , html.theme-cobalt .md tbody tr:hover td { background: var(--c-accent-soft) !important; }
html.theme-light .md table code, html.theme-dark .md table code , html.theme-cobalt .md table code {
  background: var(--c-code-bg) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink) !important;
}

/* ---------- index cards / listing ---------- */
html.theme-light .note-card, html.theme-light .tool-group, html.theme-light .tool-subgroup,
html.theme-dark .note-card, html.theme-cobalt .note-card, html.theme-dark .tool-group, html.theme-cobalt .tool-group, html.theme-dark .tool-subgroup , html.theme-cobalt .tool-subgroup {
  background: var(--c-panel) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink);
}
html.theme-light .note-card:hover, html.theme-dark .note-card:hover , html.theme-cobalt .note-card:hover {
  border-color: var(--c-accent) !important;
  box-shadow: 0 8px 24px var(--c-shadow);
}

/* ---------- toasts / online pill ---------- */
html.theme-light .site-toast, html.theme-dark .site-toast , html.theme-cobalt .site-toast {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .site-toast.success { border-color: #3d9a50; color: #2c7a3d; }
html.theme-dark .site-toast.success , html.theme-cobalt .site-toast.success { border-color: #4caf6d; color: #7fd99a; }
html.theme-light .site-toast.error { border-color: #d9534f; color: #b23c38; }
html.theme-dark .site-toast.error , html.theme-cobalt .site-toast.error { border-color: #e5726d; color: #f0938f; }
html.theme-light .online-pill, html.theme-dark .online-pill , html.theme-cobalt .online-pill {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  color: var(--c-muted);
}
html.theme-light .online-dot, html.theme-dark .online-dot , html.theme-cobalt .online-dot {
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent-soft);
}

/* ---------- support widget ---------- */
html.theme-light #support-fab, html.theme-dark #support-fab , html.theme-cobalt #support-fab {
  background: var(--c-accent-strong);
  border: 1px solid var(--c-accent-strong);
  color: #fff;
  box-shadow: 0 10px 24px var(--c-shadow);
}
html.theme-light #support-panel, html.theme-dark #support-panel , html.theme-cobalt #support-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  box-shadow: 0 18px 50px var(--c-shadow);
}
html.theme-light .support-title, html.theme-dark .support-title , html.theme-cobalt .support-title { color: var(--c-ink); }
html.theme-light .support-sub, html.theme-light .support-label,
html.theme-dark .support-sub, html.theme-cobalt .support-sub, html.theme-dark .support-label , html.theme-cobalt .support-label { color: var(--c-muted); }
html.theme-light .support-input, html.theme-dark .support-input , html.theme-cobalt .support-input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .support-input:focus, html.theme-dark .support-input:focus , html.theme-cobalt .support-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
html.theme-light .support-send, html.theme-dark .support-send , html.theme-cobalt .support-send {
  background: var(--c-accent-strong);
  color: #fff;
}
html.theme-light #support-close, html.theme-dark #support-close , html.theme-cobalt #support-close {
  border: 1px solid var(--c-line2);
  color: var(--c-muted);
  background: transparent;
}
html.theme-light #support-close:hover,
html.theme-dark #support-close:hover , html.theme-cobalt #support-close:hover { color: var(--c-ink); border-color: var(--c-accent); }
html.theme-light .support-option, html.theme-dark .support-option , html.theme-cobalt .support-option {
  background: var(--c-panel2);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}
html.theme-light .support-option:hover,
html.theme-dark .support-option:hover , html.theme-cobalt .support-option:hover { border-color: var(--c-accent); }
html.theme-light .support-option small, html.theme-dark .support-option small , html.theme-cobalt .support-option small { color: var(--c-muted); }
html.theme-light .support-error { background: rgba(217,83,79,.10); border-color: #d9534f; color: #b23c38; }
html.theme-dark .support-error , html.theme-cobalt .support-error { background: rgba(229,114,109,.14); border-color: #e5726d; color: #f0938f; }
html.theme-light .req { color: #b23c38; }
html.theme-dark .req , html.theme-cobalt .req { color: #f0938f; }
html.theme-light .support-done-text, html.theme-dark .support-done-text , html.theme-cobalt .support-done-text { color: var(--c-ink); }
html.theme-light #support-expand, html.theme-light #support-fullpage,
html.theme-dark #support-expand, html.theme-cobalt #support-expand, html.theme-dark #support-fullpage , html.theme-cobalt #support-fullpage {
  border: 1px solid var(--c-line2);
  color: var(--c-muted);
}
html.theme-light #support-expand:hover, html.theme-light #support-fullpage:hover,
html.theme-dark #support-expand:hover, html.theme-cobalt #support-expand:hover, html.theme-dark #support-fullpage:hover , html.theme-cobalt #support-fullpage:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light #support-resize, html.theme-dark #support-resize , html.theme-cobalt #support-resize {
  border-top-color: var(--c-line2);
  border-left-color: var(--c-line2);
}
html.theme-light #support-resize:hover, html.theme-dark #support-resize:hover , html.theme-cobalt #support-resize:hover { border-color: var(--c-accent); }
html.theme-light #support-back, html.theme-dark #support-back , html.theme-cobalt #support-back { color: var(--c-muted); }
html.theme-light #support-back:hover, html.theme-dark #support-back:hover , html.theme-cobalt #support-back:hover { color: var(--c-accent); }
html.theme-light .support-empty, html.theme-dark .support-empty , html.theme-cobalt .support-empty { color: var(--c-muted); }
html.theme-light .support-empty .mono, html.theme-dark .support-empty .mono , html.theme-cobalt .support-empty .mono { color: var(--c-ink); }
html.theme-light .support-offline-note, html.theme-dark .support-offline-note , html.theme-cobalt .support-offline-note {
  background: var(--c-panel2);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
}
html.theme-light .support-offline-note a, html.theme-dark .support-offline-note a , html.theme-cobalt .support-offline-note a { color: var(--c-accent); }

/* ---------- live chat transcript (widget) ---------- */
html.theme-light #chat-messages, html.theme-dark #chat-messages , html.theme-cobalt #chat-messages {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
html.theme-light .chat-bubble.me, html.theme-dark .chat-bubble.me , html.theme-cobalt .chat-bubble.me {
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  color: var(--c-ink);
}
html.theme-light .chat-bubble.agent, html.theme-dark .chat-bubble.agent , html.theme-cobalt .chat-bubble.agent {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .chat-send-btn, html.theme-dark .chat-send-btn , html.theme-cobalt .chat-send-btn {
  background: var(--c-accent-strong);
  color: #fff;
}

/* ---------- AI chat pane (widget tab + standalone /ai page) ---------- */
html.theme-light .ai-user, html.theme-dark .ai-user , html.theme-cobalt .ai-user {
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  color: var(--c-ink);
}
html.theme-light .ai-assistant, html.theme-dark .ai-assistant , html.theme-cobalt .ai-assistant {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .ai-sources, html.theme-dark .ai-sources , html.theme-cobalt .ai-sources { color: var(--c-muted); }
html.theme-light .ai-sources a, html.theme-dark .ai-sources a , html.theme-cobalt .ai-sources a { color: var(--c-accent); }
html.theme-light .ai-meta, html.theme-dark .ai-meta , html.theme-cobalt .ai-meta { color: var(--c-dim); }
html.theme-light .ai-form, html.theme-dark .ai-form , html.theme-cobalt .ai-form { border-top: 1px solid var(--c-line); }
html.theme-light .ai-input, html.theme-dark .ai-input , html.theme-cobalt .ai-input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .ai-input:focus, html.theme-dark .ai-input:focus , html.theme-cobalt .ai-input:focus { border-color: var(--c-accent); }
html.theme-light .ai-send, html.theme-dark .ai-send , html.theme-cobalt .ai-send {
  background: var(--c-accent-strong);
  color: #fff;
}
html.theme-light .ai-send.ai-stop, html.theme-dark .ai-send.ai-stop , html.theme-cobalt .ai-send.ai-stop { background: #d9534f; color: #fff; }
html.theme-light .ai-cmd-menu, html.theme-dark .ai-cmd-menu , html.theme-cobalt .ai-cmd-menu {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
}
html.theme-light .ai-conv-bar, html.theme-dark .ai-conv-bar , html.theme-cobalt .ai-conv-bar,
html.theme-light .ai-conv-panel, html.theme-dark .ai-conv-panel , html.theme-cobalt .ai-conv-panel {
  border-color: var(--c-line);
  background: var(--c-panel);
}
html.theme-light .ai-conv-toggle, html.theme-dark .ai-conv-toggle , html.theme-cobalt .ai-conv-toggle,
html.theme-light .ai-conv-new, html.theme-dark .ai-conv-new , html.theme-cobalt .ai-conv-new {
  background: var(--c-panel2);
  border-color: var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .ai-conv-toggle:hover, html.theme-dark .ai-conv-toggle:hover , html.theme-cobalt .ai-conv-toggle:hover,
html.theme-light .ai-conv-new:hover, html.theme-dark .ai-conv-new:hover , html.theme-cobalt .ai-conv-new:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light .ai-conv-item, html.theme-dark .ai-conv-item , html.theme-cobalt .ai-conv-item { border-color: var(--c-line); }
html.theme-light .ai-conv-item:hover, html.theme-dark .ai-conv-item:hover , html.theme-cobalt .ai-conv-item:hover { background: var(--c-panel2); }
html.theme-light .ai-conv-item.on, html.theme-dark .ai-conv-item.on , html.theme-cobalt .ai-conv-item.on { background: var(--c-accent-soft); }
html.theme-light .ai-conv-title, html.theme-dark .ai-conv-title , html.theme-cobalt .ai-conv-title { color: var(--c-ink); }
html.theme-light .ai-conv-meta, html.theme-dark .ai-conv-meta , html.theme-cobalt .ai-conv-meta,
html.theme-light .ai-conv-empty, html.theme-dark .ai-conv-empty , html.theme-cobalt .ai-conv-empty { color: var(--c-dim); }
html.theme-light .ai-scope-pop, html.theme-dark .ai-scope-pop , html.theme-cobalt .ai-scope-pop {
  background: var(--c-panel);
  border-color: var(--c-line2);
  box-shadow: 0 8px 24px var(--c-shadow);
}
html.theme-light .ai-scope-head, html.theme-dark .ai-scope-head , html.theme-cobalt .ai-scope-head {
  border-color: var(--c-line);
  color: var(--c-ink);
}
html.theme-light .ai-scope-x, html.theme-dark .ai-scope-x , html.theme-cobalt .ai-scope-x { color: var(--c-dim); }
html.theme-light .ai-scope-item, html.theme-dark .ai-scope-item , html.theme-cobalt .ai-scope-item {
  color: var(--c-ink);
  border-color: var(--c-line);
}
html.theme-light .ai-scope-item:hover, html.theme-dark .ai-scope-item:hover , html.theme-cobalt .ai-scope-item:hover {
  background: var(--c-panel2);
  color: var(--c-accent);
}
html.theme-light .ai-cmd-item, html.theme-dark .ai-cmd-item , html.theme-cobalt .ai-cmd-item { color: var(--c-ink); }
html.theme-light .ai-cmd-item b, html.theme-dark .ai-cmd-item b , html.theme-cobalt .ai-cmd-item b { color: var(--c-accent); }
html.theme-light .ai-cmd-item:hover, html.theme-light .ai-cmd-item.on,
html.theme-dark .ai-cmd-item:hover, html.theme-cobalt .ai-cmd-item:hover, html.theme-dark .ai-cmd-item.on , html.theme-cobalt .ai-cmd-item.on { background: var(--c-panel2); }
html.theme-light .ai-msg code, html.theme-dark .ai-msg code , html.theme-cobalt .ai-msg code {
  background: var(--c-code-bg);
  border: 1px solid var(--c-line2);
  color: var(--c-accent);
}
html.theme-light .ai-code pre, html.theme-dark .ai-code pre , html.theme-cobalt .ai-code pre {
  background: var(--c-pre-bg) !important;
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .ai-copy, html.theme-dark .ai-copy , html.theme-cobalt .ai-copy {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
  color: var(--c-muted);
}
html.theme-light .ai-copy:hover, html.theme-dark .ai-copy:hover , html.theme-cobalt .ai-copy:hover { border-color: var(--c-accent); }
html.theme-light .ai-msg .ai-h, html.theme-dark .ai-msg .ai-h , html.theme-cobalt .ai-msg .ai-h { color: var(--c-ink); }
html.theme-light .ai-table th, html.theme-dark .ai-table th , html.theme-cobalt .ai-table th {
  background: var(--c-panel2);
  color: var(--c-ink);
}
html.theme-light .ai-table th, html.theme-light .ai-table td,
html.theme-dark .ai-table th, html.theme-cobalt .ai-table th, html.theme-dark .ai-table td , html.theme-cobalt .ai-table td { border: 1px solid var(--c-line2); }
html.theme-light .ai-table td, html.theme-dark .ai-table td , html.theme-cobalt .ai-table td { color: var(--c-ink); }
/* standalone /ai page */
html.theme-light .ai-page-body, html.theme-dark .ai-page-body , html.theme-cobalt .ai-page-body { background: var(--c-bg); }
html.theme-light .ai-page-head, html.theme-dark .ai-page-head , html.theme-cobalt .ai-page-head { color: var(--c-ink); }
html.theme-light .ai-back, html.theme-dark .ai-back , html.theme-cobalt .ai-back { color: var(--c-muted); }
html.theme-light .ai-limit-note, html.theme-dark .ai-limit-note , html.theme-cobalt .ai-limit-note { color: var(--c-dim); }
html.theme-light .ai-pane-page, html.theme-dark .ai-pane-page , html.theme-cobalt .ai-pane-page {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}

/* ---------- generic form fallbacks (survive template variations) ---------- */
html.theme-dark input, html.theme-cobalt input, html.theme-dark select, html.theme-cobalt select, html.theme-dark textarea , html.theme-cobalt textarea {
  background: var(--c-panel2);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}

/* ---------- scrollbars / selection ---------- */
/* v69: thin scrollbars on the LIGHT theme too — the default fat scrollbar
   popping in/out of the sidebar shifted the card layout ("nhảy") */
html.theme-light ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-light ::-webkit-scrollbar-track { background: transparent; }
html.theme-light ::-webkit-scrollbar-thumb {
  background: var(--c-line2);
  border-radius: 6px;
  border: 2px solid var(--c-bg2);
}
html.theme-light ::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }
html.theme-light .sidebar, html.theme-dark .sidebar , html.theme-cobalt .sidebar { scrollbar-gutter: stable; }
html.theme-dark ::-webkit-scrollbar , html.theme-cobalt ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-dark ::-webkit-scrollbar-track , html.theme-cobalt ::-webkit-scrollbar-track { background: var(--c-bg); }
html.theme-dark ::-webkit-scrollbar-thumb , html.theme-cobalt ::-webkit-scrollbar-thumb {
  background: var(--c-line2);
  border-radius: 6px;
  border: 2px solid var(--c-bg);
}
html.theme-dark ::-webkit-scrollbar-thumb:hover , html.theme-cobalt ::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }
html.theme-light ::selection, html.theme-dark ::selection , html.theme-cobalt ::selection {
  background: var(--c-accent-soft);
  color: inherit;
}

/* ============================================================
   MERMAID DIAGRAMS (all three themes)
   ```mermaid fences are converted by article-fix.js into
   <div class="mermaid"> and rendered by static/vendor/mermaid.min.js
   ============================================================ */
.mermaid {
  overflow-x: auto;
  margin: 1rem 0;
  padding: 14px;
  border-radius: 12px;
}
/* v75: NOT max-width:100% anymore - that was the real bug behind the
   clipped diagram text (checklist flowcharts, VIP/BGP diagrams, etc.).
   Mermaid lays out node boxes to exactly fit their own text at its
   NATIVE render size; forcing the whole SVG to shrink into the content
   column via max-width squeezed everything down proportionally on paper,
   but text metrics (foreignObject HTML, and - it turns out - native SVG
   <text> too, likely from Vietnamese diacritics/emoji width estimation
   quirks) didn't reliably keep in lockstep with that shrink, so labels
   overflowed their box at the smaller scale. Rendering at native size
   and letting the container scroll horizontally (already had
   overflow-x: auto) sidesteps the whole scaling question: text can never
   be clipped by shrinking, because nothing shrinks. margin:auto centers
   it when it's narrower than the column and simply lets it sit flush
   left - not clipped-while-centered - when it's wider and needs to
   scroll. */
.mermaid svg { display: block; margin: 0 auto; height: auto; }
.mermaid[data-mermaid-error="1"] {
  white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  display: block;
}
.mermaid[data-mermaid-error="1"]::before {
  content: "\26A0  Mermaid syntax error \2014 raw source:";
  display: block;
  font-family: inherit;
  font-weight: 700;
  margin-bottom: 8px;
  opacity: .85;
}
html.night .mermaid { background: #0a1b11; border: 1px solid #16301f; }
html.night .mermaid[data-mermaid-error="1"] { color: #ffb4bc; border-color: #5a2730; }
html.theme-light .mermaid { background: var(--c-panel); border: 1px solid var(--c-line); }
html.theme-light .mermaid[data-mermaid-error="1"] { color: #a13a37; border-color: #e0b4b2; }
html.theme-dark .mermaid , html.theme-cobalt .mermaid { background: var(--c-panel); border: 1px solid var(--c-line); }
html.theme-dark .mermaid[data-mermaid-error="1"] , html.theme-cobalt .mermaid[data-mermaid-error="1"] { color: #f0938f; border-color: #6b3d3a; }
/* no theme class at all (very first paint edge case): neutral box.
   Owner 2026-08: this :not() chain didn't know about .theme-cobalt when
   it was added, and :not() clauses count toward specificity - each one
   here outweighed the plain "html.theme-cobalt .mermaid" rule above, so
   Cobalt's diagrams silently fell through to this white fallback box
   instead of their own dark one. Must list every real theme here or the
   next new theme hits the same bug. */
html:not(.night):not(.theme-light):not(.theme-dark):not(.theme-cobalt) .mermaid { border: 1px solid #ddd; background: #fff; }

/* ============================================================
   ADMIN CONSOLE (v69) — the admin pages now load nightfx.js +
   this stylesheet, so they follow the SAME 3-theme toggle as the
   site. Green stays exactly as before (base .admin-* rules are
   the green palette); everything below only fires on the two
   Claude themes.
   ============================================================ */
html.theme-light .admin-body, html.theme-dark .admin-body , html.theme-cobalt .admin-body {
  background: var(--c-bg);
  color: var(--c-ink);
}
html.theme-light .admin-top, html.theme-dark .admin-top , html.theme-cobalt .admin-top {
  background: var(--c-bg2);
  border-bottom: 1px solid var(--c-line);
}
html.theme-light .admin-brand, html.theme-dark .admin-brand , html.theme-cobalt .admin-brand { color: var(--c-ink); }
html.theme-light .admin-nav a, html.theme-dark .admin-nav a , html.theme-cobalt .admin-nav a { color: var(--c-muted); }
html.theme-light .admin-nav a:hover, html.theme-dark .admin-nav a:hover , html.theme-cobalt .admin-nav a:hover {
  color: var(--c-ink);
  background: var(--c-accent-soft);
}
html.theme-light .admin-nav a.on, html.theme-dark .admin-nav a.on , html.theme-cobalt .admin-nav a.on {
  background: var(--c-accent-strong);
  color: #ffffff;
}
html.theme-light .admin-me, html.theme-dark .admin-me , html.theme-cobalt .admin-me { color: var(--c-muted); }
html.theme-light .admin-me-user, html.theme-dark .admin-me-user , html.theme-cobalt .admin-me-user { color: var(--c-ink); }
html.theme-light .admin-me a, html.theme-dark .admin-me a , html.theme-cobalt .admin-me a { color: var(--c-accent); }
html.theme-light .admin-me a + a, html.theme-dark .admin-me a + a , html.theme-cobalt .admin-me a + a { border-left-color: var(--c-line2); }
html.theme-light .admin-h1, html.theme-dark .admin-h1 , html.theme-cobalt .admin-h1 { color: var(--c-ink); }
html.theme-light .admin-h2, html.theme-dark .admin-h2 , html.theme-cobalt .admin-h2 { color: var(--c-accent); }
html.theme-light .admin-hint, html.theme-dark .admin-hint , html.theme-cobalt .admin-hint { color: var(--c-muted); }

html.theme-light .admin-card, html.theme-dark .admin-card , html.theme-cobalt .admin-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
}
html.theme-light .admin-card small, html.theme-dark .admin-card small , html.theme-cobalt .admin-card small { color: var(--c-muted); }
html.theme-light .admin-card.stat b, html.theme-dark .admin-card.stat b , html.theme-cobalt .admin-card.stat b { color: var(--c-accent); }
html.theme-light .admin-card.off { border-color: #d9534f; }
html.theme-dark .admin-card.off , html.theme-cobalt .admin-card.off { border-color: #e5726d; }

html.theme-light .admin-table, html.theme-dark .admin-table , html.theme-cobalt .admin-table {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
html.theme-light .admin-table th, html.theme-dark .admin-table th , html.theme-cobalt .admin-table th {
  background: var(--c-panel2);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line2);
}
html.theme-light .admin-table td, html.theme-dark .admin-table td , html.theme-cobalt .admin-table td {
  border-bottom: 1px solid var(--c-line);
}
html.theme-light .admin-table tr:hover td,
html.theme-dark .admin-table tr:hover td , html.theme-cobalt .admin-table tr:hover td { background: var(--c-accent-soft); }

html.theme-light .admin-input, html.theme-dark .admin-input , html.theme-cobalt .admin-input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .admin-input:focus, html.theme-dark .admin-input:focus , html.theme-cobalt .admin-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
html.theme-light .admin-btn, html.theme-dark .admin-btn , html.theme-cobalt .admin-btn {
  background: var(--c-panel);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .admin-btn:hover, html.theme-dark .admin-btn:hover , html.theme-cobalt .admin-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light .admin-btn.primary, html.theme-dark .admin-btn.primary , html.theme-cobalt .admin-btn.primary {
  background: var(--c-accent-strong);
  color: #ffffff;
  border: none;
}
html.theme-light .admin-btn.danger:hover { border-color: #d9534f; color: #b23c38; }
html.theme-dark .admin-btn.danger:hover , html.theme-cobalt .admin-btn.danger:hover { border-color: #e5726d; color: #f0938f; }

html.theme-light .wpi-log, html.theme-dark .wpi-log , html.theme-cobalt .wpi-log {
  background: var(--c-panel); color: var(--c-ink); border-color: var(--c-line2);
}

html.theme-light .admin-msg.okk { background: rgba(61,154,80,.12); border-color: #3d9a50; color: #2c7a3d; }
html.theme-dark .admin-msg.okk , html.theme-cobalt .admin-msg.okk { background: rgba(76,175,109,.14); border-color: #4caf6d; color: #7fd99a; }
html.theme-light .admin-msg.err { background: rgba(217,83,79,.10); border-color: #d9534f; color: #b23c38; }
html.theme-dark .admin-msg.err , html.theme-cobalt .admin-msg.err { background: rgba(229,114,109,.14); border-color: #e5726d; color: #f0938f; }

html.theme-light .flags label, html.theme-dark .flags label , html.theme-cobalt .flags label { color: var(--c-muted); }

/* picker + chips (Users / Access) */
html.theme-light .chip, html.theme-dark .chip , html.theme-cobalt .chip {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .chip.all, html.theme-dark .chip.all , html.theme-cobalt .chip.all {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light .chip-x, html.theme-dark .chip-x , html.theme-cobalt .chip-x { color: var(--c-muted); }
html.theme-light .chip-x:hover { color: #b23c38; }
html.theme-dark .chip-x:hover , html.theme-cobalt .chip-x:hover { color: #f0938f; }
html.theme-light .chosen-path, html.theme-dark .chosen-path , html.theme-cobalt .chosen-path { color: var(--c-accent); }
html.theme-light .picker-box, html.theme-dark .picker-box , html.theme-cobalt .picker-box {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
}
html.theme-light .picker-head, html.theme-dark .picker-head , html.theme-cobalt .picker-head { color: var(--c-ink); }
html.theme-light .picker-all, html.theme-dark .picker-all , html.theme-cobalt .picker-all { color: var(--c-ink); }
html.theme-light .picker-tree, html.theme-dark .picker-tree , html.theme-cobalt .picker-tree { border: 1px solid var(--c-line); }
html.theme-light .picker-caret, html.theme-dark .picker-caret , html.theme-cobalt .picker-caret { color: var(--c-muted); }
html.theme-light .picker-legend, html.theme-dark .picker-legend , html.theme-cobalt .picker-legend { color: var(--c-muted); }

/* image library (Images tab) */
html.theme-light .imglib-cell, html.theme-dark .imglib-cell , html.theme-cobalt .imglib-cell {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
html.theme-light .imglib-cell:hover, html.theme-dark .imglib-cell:hover , html.theme-cobalt .imglib-cell:hover { border-color: var(--c-accent); }
html.theme-light .imglib-cell img { background: var(--c-panel2); }
html.theme-dark .imglib-cell img , html.theme-cobalt .imglib-cell img { background: var(--c-bg); }
html.theme-light .imglib-name, html.theme-dark .imglib-name , html.theme-cobalt .imglib-name { color: var(--c-muted); }
html.theme-light .imglib-panel, html.theme-dark .imglib-panel , html.theme-cobalt .imglib-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
}
html.theme-light .imglib-meta, html.theme-dark .imglib-meta, html.theme-cobalt .imglib-meta,
html.theme-light .imglib-opts label, html.theme-dark .imglib-opts label, html.theme-cobalt .imglib-opts label,
html.theme-light .imglib-panel > label, html.theme-dark .imglib-panel > label , html.theme-cobalt .imglib-panel > label { color: var(--c-muted); }
html.theme-light .imglib-unused-list, html.theme-dark .imglib-unused-list , html.theme-cobalt .imglib-unused-list { border-color: var(--c-line); }
html.theme-light .imglib-unused-row, html.theme-dark .imglib-unused-row , html.theme-cobalt .imglib-unused-row { border-color: var(--c-line); }
html.theme-light .imglib-unused-row img, html.theme-dark .imglib-unused-row img , html.theme-cobalt .imglib-unused-row img { background: var(--c-panel2); }
html.theme-light .imglib-unused-row .path, html.theme-dark .imglib-unused-row .path , html.theme-cobalt .imglib-unused-row .path { color: var(--c-ink); }
html.theme-light .imglib-unused-row .size, html.theme-dark .imglib-unused-row .size , html.theme-cobalt .imglib-unused-row .size { color: var(--c-muted); }

/* admin file manager */
html.theme-light .admin-code, html.theme-dark .admin-code , html.theme-cobalt .admin-code {
  background: var(--c-panel2);
  border-color: var(--c-line);
  color: var(--c-accent);
}
html.theme-light .filemgr-breadcrumb, html.theme-dark .filemgr-breadcrumb , html.theme-cobalt .filemgr-breadcrumb { color: var(--c-muted); }
html.theme-light .filemgr-breadcrumb a, html.theme-dark .filemgr-breadcrumb a , html.theme-cobalt .filemgr-breadcrumb a { color: var(--c-accent); }
html.theme-light .filemgr-list, html.theme-dark .filemgr-list , html.theme-cobalt .filemgr-list { border-color: var(--c-line); }
html.theme-light .filemgr-row, html.theme-dark .filemgr-row , html.theme-cobalt .filemgr-row { border-color: var(--c-line); }
html.theme-light .filemgr-row:hover, html.theme-dark .filemgr-row:hover , html.theme-cobalt .filemgr-row:hover { background: var(--c-panel2); }
html.theme-light .filemgr-row .name, html.theme-dark .filemgr-row .name , html.theme-cobalt .filemgr-row .name { color: var(--c-ink); }
html.theme-light .filemgr-row.folder .name:hover, html.theme-dark .filemgr-row.folder .name:hover , html.theme-cobalt .filemgr-row.folder .name:hover { color: var(--c-accent); }
html.theme-light .filemgr-row .meta, html.theme-dark .filemgr-row .meta , html.theme-cobalt .filemgr-row .meta { color: var(--c-muted); }

/* /share/<token> standalone read-only view */
html.theme-light .share-body, html.theme-dark .share-body , html.theme-cobalt .share-body { background: var(--c-bg); color: var(--c-ink); }
html.theme-light .share-banner, html.theme-dark .share-banner , html.theme-cobalt .share-banner {
  background: var(--c-bg2); border-color: var(--c-line); color: var(--c-muted);
}
html.theme-light .share-title, html.theme-dark .share-title , html.theme-cobalt .share-title { color: var(--c-ink); }

/* click-to-zoom popup on public article pages - same card treatment */
html.theme-light .img-lb-panel, html.theme-dark .img-lb-panel , html.theme-cobalt .img-lb-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
}
html.theme-light .img-lb-close, html.theme-dark .img-lb-close , html.theme-cobalt .img-lb-close {
  color: var(--c-muted);
  border-color: var(--c-line2);
}
html.theme-light .img-lb-close:hover, html.theme-dark .img-lb-close:hover , html.theme-cobalt .img-lb-close:hover {
  color: var(--c-ink);
  border-color: var(--c-accent);
}

/* ============================================================
   WEB DOC EDITOR (/editor) — style.css pins this page permanently
   dark (see the "the editor page is always dark" comment there);
   it predates the 3-theme system and never got Claude coverage,
   so switching theme elsewhere and then hitting Edit left the
   toolbar themed but the textarea/preview stuck on hardcoded dark
   green colors. Bring the whole page in line with the active theme.
   ============================================================ */
html.theme-light .editor-page, html.theme-dark .editor-page , html.theme-cobalt .editor-page {
  background-color: var(--c-bg);
  color: var(--c-ink);
}
html.theme-light #editor-meta input, html.theme-dark #editor-meta input , html.theme-cobalt #editor-meta input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .editor-crumb, html.theme-dark .editor-crumb , html.theme-cobalt .editor-crumb { color: var(--c-muted); }
html.theme-light .editor-crumb strong, html.theme-dark .editor-crumb strong , html.theme-cobalt .editor-crumb strong { color: var(--c-ink); }
html.theme-light .editor-crumb .crumb-sep, html.theme-dark .editor-crumb .crumb-sep , html.theme-cobalt .editor-crumb .crumb-sep { color: var(--c-dim); }
html.theme-light #editor-docnav-pos, html.theme-dark #editor-docnav-pos , html.theme-cobalt #editor-docnav-pos { color: var(--c-dim); }
html.theme-light .editor-tab, html.theme-light .editor-save, html.theme-light .editor-view-link,
html.theme-dark .editor-tab, html.theme-cobalt .editor-tab, html.theme-dark .editor-save, html.theme-cobalt .editor-save, html.theme-dark .editor-view-link , html.theme-cobalt .editor-view-link {
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .editor-tab.active, html.theme-dark .editor-tab.active , html.theme-cobalt .editor-tab.active {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-color: var(--c-accent);
}
html.theme-light .editor-save, html.theme-dark .editor-save , html.theme-cobalt .editor-save {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
html.theme-light .editor-save:hover, html.theme-dark .editor-save:hover , html.theme-cobalt .editor-save:hover {
  box-shadow: 0 0 12px var(--c-accent-soft);
}
html.theme-light .editor-status.ok { background: rgba(61,154,80,.12); color: #2c7a3d; }
html.theme-dark .editor-status.ok , html.theme-cobalt .editor-status.ok { background: rgba(76,175,109,.14); color: #7fd99a; }
html.theme-light .editor-status.err { background: rgba(217,83,79,.10); color: #b23c38; }
html.theme-dark .editor-status.err , html.theme-cobalt .editor-status.err { background: rgba(229,114,109,.14); color: #f0938f; }
html.theme-light #editor-text, html.theme-dark #editor-text , html.theme-cobalt #editor-text {
  background: var(--c-panel);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light #editor-text:focus, html.theme-dark #editor-text:focus , html.theme-cobalt #editor-text:focus { border-color: var(--c-accent); }
html.theme-light #editor-gutter, html.theme-dark #editor-gutter , html.theme-cobalt #editor-gutter {
  background: var(--c-bg2);
  color: var(--c-dim);
  border: 1px solid var(--c-line2);
  border-right: none;
}
html.theme-light #editor-write-pane:focus-within #editor-gutter,
html.theme-dark #editor-write-pane:focus-within #editor-gutter , html.theme-cobalt #editor-write-pane:focus-within #editor-gutter { border-color: var(--c-accent); }
html.theme-light #pane-divider, html.theme-dark #pane-divider , html.theme-cobalt #pane-divider { border-left-color: var(--c-line2); }
html.theme-light #pane-divider:hover, html.theme-light #pane-divider.dragging,
html.theme-dark #pane-divider:hover, html.theme-cobalt #pane-divider:hover, html.theme-dark #pane-divider.dragging , html.theme-cobalt #pane-divider.dragging { border-left-color: var(--c-accent); }
html.theme-light .editor-preview, html.theme-dark .editor-preview , html.theme-cobalt .editor-preview {
  background: var(--c-panel);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .editor-preview p, html.theme-light .editor-preview li, html.theme-light .editor-preview td,
html.theme-dark .editor-preview p, html.theme-cobalt .editor-preview p, html.theme-dark .editor-preview li, html.theme-cobalt .editor-preview li, html.theme-dark .editor-preview td , html.theme-cobalt .editor-preview td {
  color: var(--c-ink);
}
html.theme-light .editor-preview h1, html.theme-light .editor-preview h2, html.theme-light .editor-preview h3,
html.theme-dark .editor-preview h1, html.theme-cobalt .editor-preview h1, html.theme-dark .editor-preview h2, html.theme-cobalt .editor-preview h2, html.theme-dark .editor-preview h3 , html.theme-cobalt .editor-preview h3 {
  color: var(--c-accent);
  text-shadow: none;
}
html.theme-light .editor-preview a, html.theme-dark .editor-preview a , html.theme-cobalt .editor-preview a { color: var(--c-accent); }
html.theme-light .editor-preview strong, html.theme-dark .editor-preview strong , html.theme-cobalt .editor-preview strong { color: var(--c-ink); }
html.theme-light .editor-preview pre, html.theme-dark .editor-preview pre , html.theme-cobalt .editor-preview pre {
  background: var(--c-pre-bg) !important;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
}
html.theme-light .editor-preview code:not(pre code), html.theme-dark .editor-preview code:not(pre code) , html.theme-cobalt .editor-preview code:not(pre code) {
  background: var(--c-code-bg);
  border: 1px solid var(--c-line2);
  color: var(--c-accent);
}
html.theme-light .editor-preview table, html.theme-dark .editor-preview table , html.theme-cobalt .editor-preview table {
  border: 1px solid var(--c-line2);
  background: var(--c-panel);
}
html.theme-light .editor-preview th, html.theme-dark .editor-preview th , html.theme-cobalt .editor-preview th {
  color: var(--c-accent);
  background: var(--c-panel2);
}
html.theme-light .editor-preview th, html.theme-light .editor-preview td,
html.theme-dark .editor-preview th, html.theme-cobalt .editor-preview th, html.theme-dark .editor-preview td , html.theme-cobalt .editor-preview td {
  border: 1px solid var(--c-line);
}
html.theme-light .editor-preview blockquote, html.theme-dark .editor-preview blockquote , html.theme-cobalt .editor-preview blockquote {
  background: var(--c-panel2);
  border-left: 4px solid var(--c-accent);
  color: var(--c-muted);
}
html.theme-light .editor-del { border-color: rgba(217,83,79,.5); color: #b23c38; }
html.theme-dark .editor-del , html.theme-cobalt .editor-del { border-color: rgba(229,114,109,.5); color: #f0938f; }
html.theme-light .editor-del:hover { background: rgba(217,83,79,.10); border-color: #d9534f; }
html.theme-dark .editor-del:hover , html.theme-cobalt .editor-del:hover { background: rgba(229,114,109,.14); border-color: #e5726d; }

/* ============================================================
   AUTH PAGES (v71) — login/register now load nightfx.js + this
   stylesheet (auth_layout.html), so they follow the SAME 3-theme
   system. Green auth stays exactly as before (the base .auth-*
   rules in style.css ARE the green palette).
   ============================================================ */
html.theme-light .auth-page, html.theme-dark .auth-page , html.theme-cobalt .auth-page {
  background-color: var(--c-bg);
  background-image: none;          /* no night grid */
  color: var(--c-ink);
}
html.theme-light .auth-box, html.theme-dark .auth-box , html.theme-cobalt .auth-box {
  background-color: var(--c-panel);
  border: 1px solid var(--c-line2);
  box-shadow: 0 10px 32px var(--c-shadow);
}
html.theme-light .auth-brand span, html.theme-dark .auth-brand span , html.theme-cobalt .auth-brand span {
  color: var(--c-ink);
  text-shadow: none;
}
html.theme-light .auth-box h2, html.theme-dark .auth-box h2 , html.theme-cobalt .auth-box h2 { color: var(--c-ink); }
html.theme-light .auth-box input, html.theme-dark .auth-box input , html.theme-cobalt .auth-box input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .auth-box input::placeholder,
html.theme-dark .auth-box input::placeholder , html.theme-cobalt .auth-box input::placeholder { color: var(--c-dim); }
html.theme-light .auth-box input:focus, html.theme-dark .auth-box input:focus , html.theme-cobalt .auth-box input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
/* Chrome/Safari autofill: repaint the themed surface (inset shadow is the
   only reliable way — same trick as the green theme) */
html.theme-light .auth-box input:-webkit-autofill,
html.theme-light .auth-box input:-webkit-autofill:hover,
html.theme-light .auth-box input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #faf9f5 inset;
  box-shadow: 0 0 0 1000px #faf9f5 inset;
  -webkit-text-fill-color: #1f1e1d;
  caret-color: #1f1e1d;
  border: 1px solid #d6d3c6;
}
html.theme-dark .auth-box input:-webkit-autofill, html.theme-cobalt .auth-box input:-webkit-autofill,
html.theme-dark .auth-box input:-webkit-autofill:hover, html.theme-cobalt .auth-box input:-webkit-autofill:hover,
html.theme-dark .auth-box input:-webkit-autofill:focus , html.theme-cobalt .auth-box input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #262624 inset;
  box-shadow: 0 0 0 1000px #262624 inset;
  -webkit-text-fill-color: #f0eee6;
  caret-color: #f0eee6;
  border: 1px solid #4c4c47;
}
html.theme-light .auth-box button, html.theme-dark .auth-box button , html.theme-cobalt .auth-box button {
  background: var(--c-accent-strong);
  color: #ffffff;
  border: 1px solid var(--c-accent-strong);
}
html.theme-light .auth-box button:hover, html.theme-dark .auth-box button:hover , html.theme-cobalt .auth-box button:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 12px var(--c-accent-soft);
}
html.theme-light .auth-box p, html.theme-dark .auth-box p, html.theme-cobalt .auth-box p,
html.theme-light .auth-switch, html.theme-dark .auth-switch, html.theme-cobalt .auth-switch,
html.theme-light .auth-lbl, html.theme-dark .auth-lbl, html.theme-cobalt .auth-lbl,
html.theme-light .auth-file-label, html.theme-dark .auth-file-label , html.theme-cobalt .auth-file-label {
  color: var(--c-muted);
}
html.theme-light .auth-box a:not(.google-btn),
html.theme-dark .auth-box a:not(.google-btn) , html.theme-cobalt .auth-box a:not(.google-btn) { color: var(--c-accent); }
html.theme-light .auth-box .req { color: #b23c38; }
html.theme-dark .auth-box .req , html.theme-cobalt .auth-box .req { color: #f0938f; }
/* .flash-* divs set their OWN color/background/border, so the old
   ".auth-box .flashes { color }" rule above never actually reached them
   (a directly-targeted rule always wins over an inherited one, no matter
   whose selector is "stronger") - every flash stayed hardcoded green,
   even a plain info/error one. Themed directly here instead. */
html.theme-light .flash-success { background: rgba(61,154,80,.12); color: #2c7a3d; border-color: #3d9a50; box-shadow: none; }
html.theme-dark .flash-success , html.theme-cobalt .flash-success { background: rgba(76,175,109,.14); color: #7fd99a; border-color: #4caf6d; box-shadow: none; }
html.theme-light .flash-info, html.theme-light .flash-message {
  background: var(--c-panel2); color: var(--c-muted); border-color: var(--c-line2);
}
html.theme-dark .flash-info, html.theme-cobalt .flash-info, html.theme-dark .flash-message , html.theme-cobalt .flash-message {
  background: var(--c-panel2); color: var(--c-muted); border-color: var(--c-line2);
}
html.theme-light .flash-error { background: rgba(217,83,79,.10); color: #b23c38; border-color: #d9534f; }
html.theme-dark .flash-error , html.theme-cobalt .flash-error { background: rgba(229,114,109,.14); color: #f0938f; border-color: #e5726d; }
html.theme-light .av-circle, html.theme-dark .av-circle , html.theme-cobalt .av-circle {
  border: 2px dashed var(--c-line2);
  background-color: var(--c-panel2);
}
html.theme-light .av-circle:hover, html.theme-light .av-circle:focus,
html.theme-dark .av-circle:hover, html.theme-cobalt .av-circle:hover, html.theme-dark .av-circle:focus , html.theme-cobalt .av-circle:focus {
  border-color: var(--c-accent);
}
html.theme-light .av-circle .av-hint, html.theme-dark .av-circle .av-hint , html.theme-cobalt .av-circle .av-hint {
  color: var(--c-dim);
}

/* Google sign-in button + divider (v71.1: were stuck on the green palette) */
html.theme-light .auth-divider, html.theme-dark .auth-divider , html.theme-cobalt .auth-divider { color: var(--c-dim); }
html.theme-light .auth-divider::before, html.theme-light .auth-divider::after,
html.theme-dark .auth-divider::before, html.theme-cobalt .auth-divider::before, html.theme-dark .auth-divider::after , html.theme-cobalt .auth-divider::after {
  background: var(--c-line2);
}
html.theme-light .google-btn, html.theme-light .auth-box a.google-btn,
html.theme-dark .google-btn, html.theme-cobalt .google-btn, html.theme-dark .auth-box a.google-btn , html.theme-cobalt .auth-box a.google-btn {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .google-btn:hover, html.theme-dark .google-btn:hover , html.theme-cobalt .google-btn:hover {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Phone sidebar account block (v73) */
html.theme-light .sidebar-account, html.theme-dark .sidebar-account , html.theme-cobalt .sidebar-account {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
html.theme-light .sidebar-account .sa-user,
html.theme-dark .sidebar-account .sa-user , html.theme-cobalt .sidebar-account .sa-user { color: var(--c-ink); }
html.theme-light .sidebar-account .sa-link,
html.theme-dark .sidebar-account .sa-link , html.theme-cobalt .sidebar-account .sa-link { color: var(--c-accent); }

/* ===== bilingual dialog player (```dialog blocks) - was 100% stuck on
   the green night palette, never themed. Waveform canvas colors (drawn
   by wavesurfer.js, can't be reached by CSS) are fixed separately in
   static/js/dialog.js. ===== */
html.theme-light .sl-line, html.theme-dark .sl-line , html.theme-cobalt .sl-line {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
}
html.theme-light .sl-line-en, html.theme-dark .sl-line-en , html.theme-cobalt .sl-line-en { color: var(--c-ink); }
html.theme-light .sl-line-vi, html.theme-dark .sl-line-vi , html.theme-cobalt .sl-line-vi {
  color: var(--c-muted);
  border-top: 1px dashed var(--c-line2);
}
html.theme-light .sl-controls button, html.theme-dark .sl-controls button , html.theme-cobalt .sl-controls button {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .sl-controls button:hover, html.theme-dark .sl-controls button:hover , html.theme-cobalt .sl-controls button:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light .sl-controls .sl-speed.on, html.theme-dark .sl-controls .sl-speed.on, html.theme-cobalt .sl-controls .sl-speed.on,
html.theme-light .sl-controls .sl-loop.on, html.theme-dark .sl-controls .sl-loop.on , html.theme-cobalt .sl-controls .sl-loop.on {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}
html.theme-light .sl-controls .sl-del:hover, html.theme-dark .sl-controls .sl-del:hover, html.theme-cobalt .sl-controls .sl-del:hover {
  border-color: #e5484d;
  color: #e5484d;
}
html.theme-light .sl-full, html.theme-dark .sl-full , html.theme-cobalt .sl-full {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
}
html.theme-light .sl-full-title, html.theme-dark .sl-full-title , html.theme-cobalt .sl-full-title { color: var(--c-ink); }
html.theme-light .sl-full-note, html.theme-dark .sl-full-note , html.theme-cobalt .sl-full-note { color: var(--c-dim); }

/* ===== multi-speaker conversation player (```conv / ```conv-table) ===== */
html.theme-light .sl-conv-en, html.theme-dark .sl-conv-en , html.theme-cobalt .sl-conv-en { color: var(--c-ink); }
html.theme-light .sl-conv-vi, html.theme-dark .sl-conv-vi , html.theme-cobalt .sl-conv-vi { color: var(--c-muted); }
html.theme-light .sl-conv-table-wrap, html.theme-dark .sl-conv-table-wrap , html.theme-cobalt .sl-conv-table-wrap {
  border: 1px solid var(--c-line2);
  box-shadow: none;
}
html.theme-light .sl-conv-table, html.theme-dark .sl-conv-table , html.theme-cobalt .sl-conv-table {
  background: var(--c-panel2);
}
html.theme-light .sl-conv-table th, html.theme-dark .sl-conv-table th, html.theme-cobalt .sl-conv-table th,
html.theme-light .sl-conv-table td, html.theme-dark .sl-conv-table td , html.theme-cobalt .sl-conv-table td {
  border-color: var(--c-line2);
}
html.theme-light .sl-conv-table thead th, html.theme-dark .sl-conv-table thead th , html.theme-cobalt .sl-conv-table thead th {
  background: var(--c-panel);
  color: var(--c-accent);
}
html.theme-light .sl-conv-table tbody td:last-child, html.theme-dark .sl-conv-table tbody td:last-child , html.theme-cobalt .sl-conv-table tbody td:last-child {
  color: var(--c-muted);
}
html.theme-light .sl-conv-text, html.theme-dark .sl-conv-text , html.theme-cobalt .sl-conv-text { color: var(--c-ink); }
html.theme-light .sl-conv-text:hover, html.theme-dark .sl-conv-text:hover, html.theme-cobalt .sl-conv-text:hover,
html.theme-light .sl-conv-text.playing, html.theme-dark .sl-conv-text.playing , html.theme-cobalt .sl-conv-text.playing {
  color: var(--c-accent);
}
html.theme-light .sl-conv-wave-panel, html.theme-dark .sl-conv-wave-panel , html.theme-cobalt .sl-conv-wave-panel {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
}
html.theme-light tr.sl-conv-wave-row td, html.theme-dark tr.sl-conv-wave-row td , html.theme-cobalt tr.sl-conv-wave-row td {
  background: var(--c-panel);
}

/* ===== ```phrase sentence-builder blocks (static/js/phrase.js) ===== */
html.theme-light .sl-phrase-box, html.theme-dark .sl-phrase-box , html.theme-cobalt .sl-phrase-box {
  background: var(--c-panel2);
  border: 1px solid var(--c-line2);
}
html.theme-light .sl-phrase-stem, html.theme-dark .sl-phrase-stem , html.theme-cobalt .sl-phrase-stem {
  color: var(--c-ink);
  border-bottom-color: var(--c-line2);
}
html.theme-light .sl-phrase-stem:hover, html.theme-dark .sl-phrase-stem:hover , html.theme-cobalt .sl-phrase-stem:hover {
  color: var(--c-accent);
}
html.theme-light .sl-phrase-item, html.theme-dark .sl-phrase-item , html.theme-cobalt .sl-phrase-item {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  color: var(--c-ink);
}
html.theme-light .sl-phrase-item:hover, html.theme-dark .sl-phrase-item:hover , html.theme-cobalt .sl-phrase-item:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
html.theme-light .sl-phrase-vi, html.theme-dark .sl-phrase-vi , html.theme-cobalt .sl-phrase-vi { color: var(--c-muted); }
html.theme-light .sl-phrase-stem.sl-phrase-playing, html.theme-dark .sl-phrase-stem.sl-phrase-playing , html.theme-cobalt .sl-phrase-stem.sl-phrase-playing,
html.theme-light .sl-phrase-item.sl-phrase-playing, html.theme-dark .sl-phrase-item.sl-phrase-playing , html.theme-cobalt .sl-phrase-item.sl-phrase-playing {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
html.theme-light .sl-phrase-del, html.theme-dark .sl-phrase-del , html.theme-cobalt .sl-phrase-del { color: var(--c-muted); }
html.theme-light .sl-phrase-del:hover, html.theme-dark .sl-phrase-del:hover , html.theme-cobalt .sl-phrase-del:hover { color: #e5484d; }

/* ===== site-styled alert/confirm/prompt (static/js/dialogs.js) ===== */
html.theme-light .sl-modal-panel, html.theme-dark .sl-modal-panel , html.theme-cobalt .sl-modal-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-line2);
  box-shadow: 0 20px 60px var(--c-shadow);
}
html.theme-light .sl-modal-title, html.theme-dark .sl-modal-title , html.theme-cobalt .sl-modal-title { color: var(--c-ink); }
html.theme-light .sl-modal-msg, html.theme-dark .sl-modal-msg , html.theme-cobalt .sl-modal-msg { color: var(--c-muted); }
html.theme-light .sl-modal-input, html.theme-dark .sl-modal-input , html.theme-cobalt .sl-modal-input {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .sl-modal-input:focus, html.theme-dark .sl-modal-input:focus , html.theme-cobalt .sl-modal-input:focus { border-color: var(--c-accent); }
html.theme-light .sl-modal-btn, html.theme-dark .sl-modal-btn , html.theme-cobalt .sl-modal-btn {
  background: var(--c-panel2);
  color: var(--c-ink);
  border: 1px solid var(--c-line2);
}
html.theme-light .sl-modal-btn:hover, html.theme-dark .sl-modal-btn:hover , html.theme-cobalt .sl-modal-btn:hover { border-color: var(--c-accent); }
html.theme-light .sl-modal-btn.sl-modal-ok, html.theme-dark .sl-modal-btn.sl-modal-ok , html.theme-cobalt .sl-modal-btn.sl-modal-ok {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: none;
}
html.theme-light .sl-modal-btn.sl-modal-ok.danger, html.theme-dark .sl-modal-btn.sl-modal-ok.danger , html.theme-cobalt .sl-modal-btn.sl-modal-ok.danger {
  background: #d9534f;
  color: #ffffff;
}