:root {
  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --bg-sidebar: #fbfcfd;
  --border: #e4e8ec;
  --text: #1c2430;
  --text-muted: #66707c;
  --accent: #d2232a;      /* Cart-Power red */
  --accent-soft: #fdecec;
  --link: #0b6bcb;
  --code-bg: #f0f3f6;
  /* callout / changelog palette */
  --info: #2563eb;   --info-bg: #eef4ff;   --info-bd: #cfe0ff;
  --warn: #b5730a;   --warn-bg: #fff7e6;   --warn-bd: #f0d59a;
  --danger: #c0341d; --danger-bg: #fdecea; --danger-bd: #f2c0b8;
  --ok: #1a7f4b;     --ok-bg: #eafaf1;     --ok-bd: #bfe8cf;
  --code-block-bg: #0b1020; --code-block-fg: #e6ebff;
  --shadow: 0 1px 3px rgba(20, 30, 45, .08), 0 4px 18px rgba(20, 30, 45, .05);
  --sidebar-w: 320px;
  --toc-w: 240px;
  --header-h: 60px;
  --radius: 9px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Dark palette. It applies when the OS asks for dark and the reader has not
   pinned light, and whenever the reader has pinned dark. The two rule blocks
   below carry identical declarations — keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151b; --bg-alt: #161c24; --bg-sidebar: #131922;
    --border: #26303c; --text: #e6ebf1; --text-muted: #8b97a5;
    --accent: #ff5a60; --accent-soft: #2a1618; --link: #6db3ff; --code-bg: #1c242e;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.3);
    --info: #7fb8ff;   --info-bg: #14212f;   --info-bd: #27486b;
    --warn: #e6ad4d;   --warn-bg: #2a2113;   --warn-bd: #5c4620;
    --danger: #ff8a75; --danger-bg: #2d1714; --danger-bd: #63302a;
    --ok: #63dd8f;     --ok-bg: #12271b;     --ok-bd: #245c39;
  }
}
:root[data-theme="dark"] {
  --bg: #10151b; --bg-alt: #161c24; --bg-sidebar: #131922;
  --border: #26303c; --text: #e6ebf1; --text-muted: #8b97a5;
  --accent: #ff5a60; --accent-soft: #2a1618; --link: #6db3ff; --code-bg: #1c242e;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.3);
  --info: #7fb8ff;   --info-bg: #14212f;   --info-bd: #27486b;
  --warn: #e6ad4d;   --warn-bg: #2a2113;   --warn-bd: #5c4620;
  --danger: #ff8a75; --danger-bg: #2d1714; --danger-bd: #63302a;
  --ok: #63dd8f;     --ok-bg: #12271b;     --ok-bd: #245c39;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.brand small { color: var(--text-muted); font-weight: 500; font-size: 12px; }
.topbar .spacer { flex: 1; }

.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-switch button {
  border: 0; background: transparent; color: var(--text-muted);
  padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.lang-switch button.active { background: var(--accent); color: #fff; }

.menu-toggle { display: none; flex: none; border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text); border-radius: 8px; width: 38px; height: 38px; cursor: pointer; font-size: 18px; }

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg { display: block; }

/* ---------- Layout ---------- */
.layout { display: flex; align-items: flex-start; }
.sidebar {
  width: var(--sidebar-w); flex: none;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  padding: 18px 14px 40px;
}
.search { margin-bottom: 14px; }
.search-field { position: relative; display: flex; align-items: center; }
.search input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
.search input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.search .icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: var(--text-muted); pointer-events: none;
}
.search .count { margin-top: 6px; font-size: 12px; color: var(--text-muted); padding-left: 4px; }

.cat-group { margin-bottom: 6px; }
.cat-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700; padding: 12px 8px 6px;
}
.mod-link {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--text); font-size: 14px; cursor: pointer; line-height: 1.35;
}
.mod-link:hover { background: var(--bg-alt); text-decoration: none; }
.mod-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mod-link .code { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.mod-link.active .code { color: var(--accent); opacity: .8; }
mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- Content ---------- */
.content { flex: 1; min-width: 0; display: flex; justify-content: center; }
.article-wrap { flex: 1; min-width: 0; max-width: 860px; padding: 34px 46px 120px; }
.article-wrap.home { max-width: 1180px; } /* the tile grid wants more room than prose */

.doc-header { margin-bottom: 8px; }
.doc-header .kicker { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.doc-header h1 { font-size: 32px; margin: 6px 0 4px; line-height: 1.2; }
.doc-header .meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--text-muted); font-size: 13px; margin-top: 10px; }
.doc-header .meta .code { font-family: var(--mono); }

.ver-select { display: inline-flex; align-items: center; gap: 8px; }
.ver-select label { font-size: 13px; color: var(--text-muted); }
.ver-select select {
  font: inherit; font-size: 13px; padding: 5px 30px 5px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2366707c' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.badge-latest { font-size: 11px; font-weight: 700; color: #0a7d34; background: #e4f7ea; padding: 2px 8px; border-radius: 20px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-latest { color: #61e08a; background: #14301d; }
}
:root[data-theme="dark"] .badge-latest { color: #61e08a; background: #14301d; }

hr.sep { border: 0; border-top: 1px solid var(--border); margin: 22px 0 28px; }

/* rendered docx body */
.article { font-size: 15.5px; overflow-wrap: break-word; word-break: break-word; }
.article a { overflow-wrap: anywhere; }

/* headings — a hairline rule opens every top-level section */
.article h2 {
  font-size: 25px; line-height: 1.25;
  margin: 46px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.article > h2:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
.article h3 { font-size: 20px; margin: 32px 0 10px; }
.article h4 { font-size: 16.5px; margin: 24px 0 8px; }
.article h2, .article h3, .article h4 { scroll-margin-top: calc(var(--header-h) + 16px); position: relative; }
.article p { margin: 12px 0; }
.article ul, .article ol { padding-left: 26px; margin: 12px 0; }
.article li { margin: 6px 0; }
.article ul li::marker { color: var(--accent); }
.article ol li::marker { color: var(--text-muted); font-weight: 700; }
.article li ul, .article li ol { margin: 6px 0; }
.article hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* screenshots — framed, with optional caption */
.article img {
  max-width: 100%; height: auto; display: block;
  margin: 18px auto; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: zoom-in;
}
.article figure {
  margin: 22px 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); overflow: hidden; box-shadow: var(--shadow);
}
.article figure img { margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.article figcaption {
  padding: 9px 14px; font-size: 13px; color: var(--text-muted);
  background: var(--bg); border-top: 1px solid var(--border);
}

.article a[href^="http"]::after { content: " ↗"; font-size: .8em; color: var(--text-muted); }

/* callouts — notes, warnings, tips */
.article .callout {
  position: relative; margin: 20px 0; padding: 14px 16px 14px 48px;
  border: 1px solid var(--cal-bd); background: var(--cal-bg); border-radius: 10px;
}
.article .callout::before {
  content: var(--cal-icon); position: absolute; left: 15px; top: 13px;
  font-size: 16px; line-height: 1.3;
}
.article .callout > :first-child { margin-top: 0; }
.article .callout > :last-child { margin-bottom: 0; }
.article .callout.note   { --cal-bg: var(--info-bg);   --cal-bd: var(--info-bd);   --cal-icon: "ℹ️"; }
.article .callout.warn   { --cal-bg: var(--warn-bg);   --cal-bd: var(--warn-bd);   --cal-icon: "⚠️"; }
.article .callout.danger { --cal-bg: var(--danger-bg); --cal-bd: var(--danger-bd); --cal-icon: "⛔"; }
.article .callout.ok     { --cal-bg: var(--ok-bg);     --cal-bd: var(--ok-bd);     --cal-icon: "💡"; }

/* code */
.article code {
  font-family: var(--mono); font-size: .88em; background: var(--code-bg);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px;
}
.article pre {
  background: var(--code-block-bg); color: var(--code-block-fg);
  border-radius: 10px; padding: 14px 16px; margin: 16px 0; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
}
.article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.article kbd, .article .kbd {
  display: inline-block; font-family: var(--sans); font-size: .88em; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 7px;
}

/* tables — .table-wrap is emitted by the build; bare tables stay scrollable too */
.article .table-wrap {
  margin: 20px 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto;
}
.article .table-wrap table { display: table; width: 100%; margin: 0; }
.article table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 14px; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.article th { background: var(--bg-alt); font-weight: 700; }
.article tbody tr:nth-child(2n) td { background: color-mix(in srgb, var(--bg-alt) 55%, transparent); }
.article .table-wrap tr > :first-child { border-left: 0; }
.article .table-wrap tr > :last-child { border-right: 0; }
.article .table-wrap tr:first-child > * { border-top: 0; }
.article .table-wrap tr:last-child > * { border-bottom: 0; }
.article table p { margin: 6px 0; }

/* release history — "Version 1.25 from 23 May 2024" + [+]/[!]/[*] entries */
.article .rel-head {
  display: flex; align-items: center; gap: 12px;
  margin: 30px 0 12px; font-size: 15px; font-weight: 700;
}
.article .rel-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.article .chg { display: flex; align-items: flex-start; gap: 10px; margin: 7px 0; }
.article .chg-tag {
  flex: none; margin-top: 2px; width: 21px; height: 21px; border-radius: 6px;
  display: inline-grid; place-items: center; line-height: 1;
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  color: var(--chg-fg); background: var(--chg-bg); border: 1px solid var(--chg-bd);
}
.article .chg-add { --chg-fg: var(--ok);     --chg-bg: var(--ok-bg);     --chg-bd: var(--ok-bd); }
.article .chg-fix { --chg-fg: var(--danger); --chg-bg: var(--danger-bg); --chg-bd: var(--danger-bd); }
.article .chg-upd { --chg-fg: var(--info);   --chg-bg: var(--info-bg);   --chg-bd: var(--info-bd); }

/* ---------- Home: search + module tiles ---------- */
.home-lead { color: var(--text-muted); font-size: 16px; max-width: 640px; margin: 10px 0 0; }

.home-search { position: relative; display: flex; align-items: center; margin: 26px 0 6px; }
.home-search input {
  width: 100%; padding: 13px 16px 13px 44px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text);
}
.home-search input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.home-search .icon {
  position: absolute; left: 15px; display: flex; align-items: center;
  color: var(--text-muted); pointer-events: none;
}
.home-count { font-size: 13px; color: var(--text-muted); margin: 0 0 18px 4px; }
.home-heading { font-size: 18px; margin: 22px 0 14px; }
.home-heading:empty { display: none; }
.home-more { margin: 22px 0 10px; }
.home-more-btn {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text-muted);
  padding: 9px 14px; font: 600 13px var(--sans); cursor: pointer;
}
.home-more-btn:hover { background: var(--bg-alt); color: var(--text); }
.tile-date { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 30px 46px 22px;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start;
  max-width: 1180px; margin: 0 auto;
}
.footer-about { flex: 1 1 280px; min-width: 240px; }
.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.footer-brand .logo {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 12px;
}
.footer-about p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; max-width: 380px; }
.footer-links { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.footer-links a { color: var(--text); }
.footer-links a:hover { color: var(--link); }
.footer-cta { margin-left: auto; }
.cta-btn {
  display: inline-block; padding: 11px 18px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow);
}
.cta-btn:hover { filter: brightness(1.08); text-decoration: none; }
.footer-bottom {
  max-width: 1180px; margin: 22px auto 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px;
}
@media (max-width: 760px) {
  .site-footer { padding: 24px 20px 18px; }
  .footer-cta { margin-left: 0; }
  .cta-btn { display: block; text-align: center; }
}

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); text-decoration: none;
}
.tile:hover {
  text-decoration: none; border-color: var(--accent);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.tile-name { font-weight: 650; font-size: 15px; line-height: 1.35; }
.tile-desc {
  font-size: 13.5px; line-height: 1.5; color: var(--text-muted); flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.tile-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px; color: var(--text-muted);
}
.tile-meta .ver {
  font-family: var(--mono); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}
.tile-meta .lang { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.tile-meta .lang.off { opacity: .35; }

/* ---------- On-page TOC ---------- */
.toc {
  width: var(--toc-w); flex: none;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 34px 20px 60px; font-size: 13px;
}
.toc .toc-title { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.toc a { display: block; color: var(--text-muted); padding: 4px 0; border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; line-height: 1.4; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.lvl-3 { padding-left: 24px; }
.toc a.lvl-4 { padding-left: 36px; font-size: 12px; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* ---------- States ---------- */
.empty { padding: 80px 40px; text-align: center; color: var(--text-muted); }
.empty h2 { color: var(--text); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* image lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100; display: none; place-items: center; padding: 40px; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 60px rgba(0,0,0,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .toc { display: none; } }
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { font-size: 15px; min-width: 0; overflow: hidden; }
  .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand small { display: none; }
  .lang-switch button { padding: 6px 10px; }
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; z-index: 25;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow); width: min(85vw, var(--sidebar-w));
  }
  .sidebar.open { transform: translateX(0); }
  .article-wrap { padding: 24px 18px 100px; }
  .doc-header h1 { font-size: 26px; }
  .scrim { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0,0,0,.4); z-index: 24; display: none; }
  .scrim.open { display: block; }
}