/* Fonts: self-hosted, SIL Open Font License 1.1 (see /fonts/LICENSE-*.txt) */
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-latin-wght-normal.19f9c92546.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-latin-ext-wght-normal.824f485b5d.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-mono-latin-wght-normal.684ad5b531.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-mono-latin-ext-wght-normal.1a189eb997.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/instrument-serif-latin-400-normal.5eb09b5ac0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/instrument-serif-latin-ext-400-normal.290e6267dd.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Layout: sticky top bar; left section rail, centre article column, right rail for feedback and page outline. Sage on green-tinted paper. */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --topbar-h: 56px;
  --bg: #f7f8f4;
  --surface: #ffffff;
  --surface-2: #eef1ea;
  --surface-3: #e6eadf;
  --fg: #1b2018;
  --fg-muted: #4f584a;
  --fg-subtle: #69725f;
  --border: #dde2d6;
  --border-strong: #c3cbba;
  --accent: #5c744a;
  --accent-hover: #4e6440;
  --accent-ink: #46593a;
  --accent-tint: #e8efe1;
  --accent-tint-strong: #d4e0c9;
  --on-accent: #ffffff;
  --chip-bg: #eef1ea;
  --chip-fg: #353d30;
  --tip-bg: #f1f5ec;
  --tip-rule: #9fb28d;
  --focus: #5c744a;
  --mark-bg: #e3ecb8;
  --mark-fg: #1b2018;
  --scrim: rgba(27, 32, 24, 0.38);
  --shadow-sm: 0 1px 2px rgba(27, 32, 24, 0.05);
  --shadow: 0 1px 2px rgba(27, 32, 24, 0.06), 0 8px 24px rgba(27, 32, 24, 0.10);
  --good: #3f7a3a;
  --good-tint: #e4f0df;
  --warn: #8a6414;
  --warn-tint: #f6ecd3;
  --bad: #a1402f;
  --bad-tint: #f6e2dd;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121510;
    --surface: #191d16;
    --surface-2: #21261e;
    --surface-3: #283023;
    --fg: #e5e9df;
    --fg-muted: #b0b8a7;
    --fg-subtle: #8f9886;
    --border: #2e3529;
    --border-strong: #414a3b;
    --accent: #9db886;
    --accent-hover: #b0c99b;
    --accent-ink: #b4cc9f;
    --accent-tint: #222c1d;
    --accent-tint-strong: #2d3a26;
    --on-accent: #131611;
    --chip-bg: #252b21;
    --chip-fg: #d5dbcd;
    --tip-bg: #1c2419;
    --tip-rule: #6f8a5b;
    --focus: #b4cc9f;
    --mark-bg: #4a5a24;
    --mark-fg: #f1f5e6;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.45);
    --good: #9fcf8f;
    --good-tint: #1f3019;
    --warn: #e2bd6a;
    --warn-tint: #352a12;
    --bad: #ec9a88;
    --bad-tint: #3a1f19;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121510;
  --surface: #191d16;
  --surface-2: #21261e;
  --surface-3: #283023;
  --fg: #e5e9df;
  --fg-muted: #b0b8a7;
  --fg-subtle: #8f9886;
  --border: #2e3529;
  --border-strong: #414a3b;
  --accent: #9db886;
  --accent-hover: #b0c99b;
  --accent-ink: #b4cc9f;
  --accent-tint: #222c1d;
  --accent-tint-strong: #2d3a26;
  --on-accent: #131611;
  --chip-bg: #252b21;
  --chip-fg: #d5dbcd;
  --tip-bg: #1c2419;
  --tip-rule: #6f8a5b;
  --focus: #b4cc9f;
  --mark-bg: #4a5a24;
  --mark-fg: #f1f5e6;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.45);
  --good: #9fcf8f;
  --good-tint: #1f3019;
  --warn: #e2bd6a;
  --warn-tint: #352a12;
  --bad: #ec9a88;
  --bad-tint: #3a1f19;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}
a { color: var(--accent-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 16px;
  max-width: 1480px;
  margin-inline: auto;
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--fg-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.menu-btn { display: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); flex: none; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; }
.brand-mark svg { width: 16px; height: 16px; stroke: var(--on-accent); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.brand-sub { color: var(--fg-subtle); font-weight: 500; }
.sep { width: 1px; height: 22px; background: var(--border); flex: none; }

.switcher { position: relative; flex: none; }
.switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-weight: 550; font-size: 0.92rem;
}
.switcher-btn:hover { border-color: var(--border-strong); }
#switcher-name { max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.switcher-btn .icon { width: 14px; height: 14px; color: var(--fg-subtle); }
.popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 260px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px;
}
.popover-k { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); padding: 6px 10px 4px; margin: 0; }
.prod-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; text-decoration: none; color: var(--fg); }
a.prod-item:hover, a.prod-item:focus-visible { background: var(--surface-2); }
.prod-item[aria-disabled="true"] { color: var(--fg-subtle); cursor: default; }
.prod-item .pi-text { display: grid; min-width: 0; flex: 1 1 auto; }
.prod-item .pi-name { font-weight: 550; font-size: 0.92rem; }
.prod-item .pi-desc { font-size: 0.8rem; color: var(--fg-subtle); }
.prod-item .pi-tag { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.prod-item .pi-check { color: var(--accent-ink); }

.search-btn {
  flex: 1 1 auto; min-width: 0; max-width: 520px; margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--fg-subtle); cursor: pointer; text-align: left;
}
.search-btn:hover { border-color: var(--border-strong); color: var(--fg-muted); }
.search-btn span.lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
kbd, .kbd {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px;
  padding: 0 5px; background: var(--surface); white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.fb-link {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border-radius: 8px; text-decoration: none; color: var(--fg-muted); font-size: 0.9rem; font-weight: 550;
}
.fb-link:hover { background: var(--surface-2); color: var(--fg); }
.fb-link[aria-current="page"] { background: var(--accent-tint); color: var(--accent-ink); }

/* ---------- Shell ---------- */
.page { overflow-x: clip; }
.shell {
  max-width: 1480px; margin-inline: auto;
  display: grid; grid-template-columns: 272px minmax(0, 1fr);
}
.shell.is-home .sidebar, .shell.is-feedback .sidebar { display: none; }
.shell.is-home, .shell.is-feedback { grid-template-columns: minmax(0, 1fr); }

.sidebar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h));
  align-self: start;
  height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto; scrollbar-width: thin;
  border-right: 1px solid var(--border);
  padding: 20px 14px 40px 16px;
  min-width: 0;
}
.side-prod { display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; font-weight: 600; }
.side-prod .icon { color: var(--accent-ink); }
.side-group + .side-group { margin-top: 6px; }
.group-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--fg-subtle); text-align: left;
}
.group-btn:hover { color: var(--fg); background: var(--surface-2); }
.group-btn .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.group-btn .icon { width: 13px; height: 13px; transition: transform 0.15s ease; }
.group-btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
.side-list { list-style: none; margin: 2px 0 8px; padding: 0; }
.side-list a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 8px 5px 10px; margin-left: 4px; border-left: 2px solid var(--border);
  text-decoration: none; color: var(--fg-muted); font-size: 0.9rem; line-height: 1.4;
}
.side-list a:hover { color: var(--fg); background: var(--surface-2); }
.side-list a[aria-current="page"] { color: var(--accent-ink); border-left-color: var(--accent); background: var(--accent-tint); font-weight: 550; }
.side-list a .t { flex: 1 1 auto; min-width: 0; }

.badge {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 999px; padding: 1px 6px; white-space: nowrap; flex: none; line-height: 1.5;
}
.badge-new { background: var(--accent); color: var(--on-accent); }
.badge-upd { background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--border); }

.scrim { display: none; }

/* ---------- Main ---------- */
.main { min-width: 0; padding: 28px max(16px, 3vw) 48px; }
.view-article { display: grid; grid-template-columns: minmax(0, 46rem) 232px; gap: 48px; justify-content: center; }
.article { min-width: 0; }
.rail { min-width: 0; }
.rail-in { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h) + 28px); display: grid; gap: 28px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); }
.crumbs a { color: var(--fg-subtle); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumbs .icon { width: 12px; height: 12px; }
.crumbs .badge { margin-left: 4px; }

h1, h2, h3 { text-wrap: balance; margin: 0; color: var(--fg); }
.article h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.3rem); line-height: 1.15; letter-spacing: -0.022em; font-weight: 650; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
.lead { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.55; color: var(--fg-muted); max-width: 42rem; }
.prose { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--border); }
.prose h2 { font-size: 1.34rem; line-height: 1.25; letter-spacing: -0.014em; font-weight: 630; margin-top: 2.4rem; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.prose h3 { font-size: 1.08rem; line-height: 1.35; font-weight: 620; margin-top: 1.8rem; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.prose > :first-child { margin-top: 1.4rem; }
.prose p, .prose ul, .prose ol, .prose dl { margin: 0.8rem 0 0; }
.prose p, .prose li, .prose dd { max-width: 68ch; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; }
.prose li + li { margin-top: 0.32rem; }
.prose li > ul, .prose li > ol { margin-top: 0.32rem; }
.prose strong { font-weight: 620; }
.prose code {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--chip-bg); color: var(--chip-fg);
  border-radius: 4px; padding: 0.05em 0.32em; overflow-wrap: anywhere;
}
.ui, .path {
  font-family: var(--font-mono); font-size: 0.74em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.045em;
  border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ui { color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--border); padding: 0.08em 0.42em; }
.path { color: var(--accent-ink); background: var(--accent-tint); padding: 0.12em 0.45em; }
.path > span + span::before { content: "\203A"; margin-inline: 0.45em; color: var(--fg-subtle); }

.who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.who-k { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); margin-right: 2px; }
.role { font-size: 0.8rem; font-weight: 550; color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); border-radius: 999px; padding: 0.12em 0.65em; white-space: nowrap; }

.tip { margin-top: 1.1rem; max-width: 68ch; background: var(--tip-bg); border-left: 3px solid var(--tip-rule); border-radius: 0 8px 8px 0; padding: 10px 14px 12px; }
.tip p { margin: 0 !important; }
.tip p + p { margin-top: 0.5rem !important; }
.tip-k { display: block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); margin-bottom: 2px; }

.table-wrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; line-height: 1.5; }
.prose table.wide { min-width: 34rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.prose thead th { background: var(--surface-2); font-weight: 600; font-size: 0.82rem; color: var(--fg-muted); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td.yes { color: var(--accent-ink); font-weight: 550; }
.prose td.no { color: var(--fg-subtle); }
ul.check { list-style: none; padding-inline-start: 0 !important; }
ul.check li { position: relative; padding-left: 1.7rem; }
ul.check li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.95rem; height: 0.95rem; border: 1.5px solid var(--accent); border-radius: 3px; }
dl.defs dt { font-weight: 600; margin-top: 0.85rem; }
dl.defs dd { margin: 0.2rem 0 0; }

ul.news { list-style: none; padding-inline-start: 0 !important; }
ul.news li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0 !important; }
ul.news .ver { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); background: var(--accent-tint); border-radius: 4px; padding: 1px 6px; height: fit-content; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Mail mock-up */
.mail-mock { margin: 1.4rem 0 0; max-width: 40rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.mm-head { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 14px; display: grid; gap: 2px; font-size: 0.84rem; }
.mm-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 8px; }
.mm-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mm-k { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); padding-top: 2px; }
.mm-body { padding: 4px 16px 16px; font-size: 0.94rem; }
.mm-body p { margin: 0.75rem 0 0 !important; }
.mm-sign { color: var(--fg); }
.mm-divider { display: flex; align-items: center; gap: 10px; margin-top: 1.1rem; font-size: 0.72rem; color: var(--fg-subtle); }
.mm-divider::before, .mm-divider::after { content: ""; height: 1px; background: var(--border); flex: 1 1 auto; }
.mm-quote { margin: 0.6rem 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); color: var(--fg-muted); font-size: 0.84rem; border-radius: 0 6px 6px 0; }
.mm-link { font-size: 0.86rem; }
.mm-a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.mail-mock figcaption { border-top: 1px solid var(--border); padding: 8px 14px; font-size: 0.8rem; color: var(--fg-subtle); }

/* Prev / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.pager a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; background: var(--surface); min-width: 0; }
.pager a:hover { border-color: var(--accent); }
.pager .pk { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); }
.pager .pt { color: var(--fg); font-weight: 560; line-height: 1.35; }
.pager .next { text-align: right; grid-column: 2; }

.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--fg-subtle); font-size: 0.84rem; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }

/* Rail */
.rail-k { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); margin: 0 0 8px; }
.helpful { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px; }
.helpful h2 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.faces { display: flex; gap: 8px; margin-top: 10px; }
.face {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--fg-muted); cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.face:hover { border-color: var(--accent); color: var(--accent-ink); }
.face[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.face svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fb-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--fg-subtle); }
.fb-thanks { margin: 10px 0 0; font-size: 0.9rem; font-weight: 550; color: var(--accent-ink); }
.fb-form { margin-top: 10px; display: grid; gap: 6px; }
.fb-form label { font-size: 0.84rem; font-weight: 550; }
.fb-form textarea {
  width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 0.9rem; line-height: 1.45;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px;
}
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-count { font-size: 0.76rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.fb-status { min-height: 1.2em; margin: 0; font-size: 0.8rem; color: var(--fg-subtle); }

.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.85rem; line-height: 1.4; color: var(--fg-muted); text-decoration: none; }
.toc a.lvl3 { padding-left: 24px; font-size: 0.8rem; }
.toc a:hover { color: var(--fg); }
.toc a.active { color: var(--accent-ink); border-left-color: var(--accent); }

/* ---------- Home ---------- */
.home { max-width: 1120px; margin-inline: auto; }
.hero { padding: 28px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hero .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); margin: 0; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: 1.1; letter-spacing: -0.028em; font-weight: 650; }
.hero p { margin: 0; color: var(--fg-muted); font-size: 1.08rem; max-width: 40rem; }
.hero-search {
  margin-top: 10px; width: 100%; max-width: 640px;
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 16px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--fg-subtle);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-sm);
}
.hero-search:hover { border-color: var(--accent); }
.hero-search .lbl { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-sec { margin-top: 44px; }
.home-sec > h2 { font-size: 1.12rem; font-weight: 620; letter-spacing: -0.01em; }
.home-sec > .sub { margin: 4px 0 0; color: var(--fg-muted); font-size: 0.92rem; }
.grid { display: grid; gap: 12px; margin-top: 14px; }
.grid-prod { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.grid-sec { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card {
  display: grid; gap: 6px; align-content: start; min-width: 0;
  padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  text-decoration: none; color: var(--fg);
}
a.card:hover { border-color: var(--accent); }
.card .ci { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); }
.card .ci .icon { width: 18px; height: 18px; }
.card .ct { font-weight: 600; font-size: 1rem; margin-top: 4px; }
.card .cd { color: var(--fg-muted); font-size: 0.88rem; line-height: 1.45; }
.card .cm { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-top: 4px; font-variant-numeric: tabular-nums; }
.card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.card.is-active .cm { color: var(--accent-ink); }
.card.is-later { background: transparent; border-style: dashed; color: var(--fg-subtle); }
.card.is-later .ci { background: var(--surface-2); color: var(--fg-subtle); }
.card.is-later .ct { color: var(--fg-muted); }
.pop-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.pop-list li { border-bottom: 1px solid var(--border); min-width: 0; }
.pop-list a { display: flex; align-items: baseline; gap: 10px; padding: 11px 2px; text-decoration: none; color: var(--fg); }
.pop-list a:hover .pt { color: var(--accent-ink); text-decoration: underline; }
.pop-list .ps { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); white-space: nowrap; }
.pop-list .icon { width: 15px; height: 15px; color: var(--fg-subtle); align-self: center; }

/* ---------- Feedback view ---------- */
.fbv { max-width: 1120px; margin-inline: auto; }
.fbv h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -0.02em; font-weight: 650; }
.fbv .lead { margin-bottom: 0; }
.fbv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--fg-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.stats b { color: var(--fg); font-weight: 650; }
.fbv .table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 40rem; }
.fbv th, .fbv td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.fbv thead th { background: var(--surface-2); font-weight: 600; font-size: 0.8rem; color: var(--fg-muted); white-space: nowrap; }
.fbv td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fbv th.n { text-align: right; }
.fbv .art-t { font-weight: 560; }
.fbv .art-s { font-size: 0.78rem; color: var(--fg-subtle); }
.score { display: inline-block; min-width: 3.4rem; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 1px 8px; font-size: 0.84rem; }
.score.bad { background: var(--bad-tint); color: var(--bad); }
.score.mid { background: var(--warn-tint); color: var(--warn); }
.score.good { background: var(--good-tint); color: var(--good); }
.score.none { color: var(--fg-subtle); }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comments li { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; }
.comments .cmeta { font-size: 0.74rem; color: var(--fg-subtle); margin-top: 2px; }
.fbv tr.crow td { background: var(--bg); }
.empty { margin-top: 18px; padding: 28px 20px; border: 1px dashed var(--border-strong); border-radius: 12px; text-align: center; color: var(--fg-muted); }
.empty h2 { font-size: 1.05rem; margin-bottom: 4px; }
.empty p { margin: 0; }

/* ---------- Search dialog ---------- */
.search-layer { position: fixed; inset: 0; z-index: 80; display: grid; align-items: start; justify-items: center; padding: calc(env(safe-area-inset-top, 0px) + 9vh) 16px 16px; background: var(--scrim); }
.search-box { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(640px, 80vh); }
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.search-field .icon { color: var(--fg-subtle); }
.search-field input { flex: 1 1 auto; min-width: 0; height: 54px; border: 0; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 1.05rem; }
.search-field input::placeholder { color: var(--fg-subtle); }
.search-field input::-webkit-search-cancel-button { display: none; }
.results { overflow-y: auto; padding: 6px; min-height: 0; }
.res-k { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); padding: 8px 10px 4px; margin: 0; }
.res { display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--fg); }
.res[aria-selected="true"] { background: var(--accent-tint); }
.res .rt { font-weight: 560; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.res .rt .rtt { min-width: 0; }
.res .rs { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-left: auto; white-space: nowrap; }
.res .rx { font-size: 0.84rem; color: var(--fg-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.res .rh { font-size: 0.78rem; color: var(--accent-ink); }
mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; padding: 0 1px; }
.no-res { padding: 22px 12px; text-align: center; color: var(--fg-muted); font-size: 0.92rem; }
.search-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--fg-subtle); }
.search-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .view-article { grid-template-columns: minmax(0, 46rem); }
  .rail-in { position: static; }
  .toc { display: none; }
  .rail { margin-top: 28px; }
  .helpful { max-width: 46rem; }
}
@media (max-width: 959px) {
  .menu-btn { display: inline-grid; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 35; left: 0; bottom: 0;
    top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h));
    height: auto; width: min(320px, 86vw);
    background: var(--surface); border-right: 1px solid var(--border);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .shell.is-home .sidebar, .shell.is-feedback .sidebar { display: block; }
  .drawer-open .sidebar { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; box-shadow: var(--shadow); }
  .drawer-open .scrim { display: block; position: fixed; inset: 0; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h)); z-index: 30; background: var(--scrim); }
  .main { padding-top: 22px; }
}
@media (max-width: 720px) {
  .brand-sub, .sep { display: none; }
  .search-btn .lbl, .search-btn kbd { display: none; }
  .search-btn { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; justify-content: center; margin-inline: auto 0; background: transparent; border-color: transparent; color: var(--fg-muted); }
  .fb-link .t { display: none; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
  .topbar-in { gap: 6px; }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
  #switcher-name { max-width: 8.5rem; }
}
/* ---------- Language switch, loading state, translation note ---------- */
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg-muted);
  font: inherit; font-size: 0.88rem; font-weight: 550; cursor: pointer;
}
.lang-btn:hover { background: var(--surface-2); color: var(--fg); }
.lang-btn .icon { width: 17px; height: 17px; }
.lang-short { display: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.art-loading { display: grid; gap: 12px; padding: 6px 0 24px; }
.art-loading-t { margin: 0 0 6px; color: var(--fg-muted); font-size: 0.95rem; }
.art-loading .sk { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); }
.art-loading .sk-1 { width: 92%; } .art-loading .sk-2 { width: 78%; } .art-loading .sk-3 { width: 64%; }
@media (prefers-reduced-motion: no-preference) {
  .art-loading .sk { animation: kb-pulse 1.4s ease-in-out infinite; }
  @keyframes kb-pulse { 50% { opacity: 0.55; } }
}
.untranslated { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 1.4rem; padding: 9px 12px; border-radius: 9px; background: var(--warn-tint); color: var(--fg); font-size: 0.9rem; }
.untranslated-k { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn); font-weight: 600; }
.search-note { margin: 0; padding: 6px 14px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--fg-subtle); }
.search-note:empty { display: none; }
@media (max-width: 720px) {
  .lang-long { display: none; }
  .lang-short { display: inline; }
  .lang-btn { padding: 0 7px; gap: 4px; }
}
@media (max-width: 420px) {
  .lang-btn .icon { display: none; }
  #switcher-name { max-width: 7rem; }
  .topbar-in { gap: 4px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ---------- Website additions (kb.css is the KB page's own stylesheet, kept as it is) ---------- */

/* Controls that only work with the script (search, theme, feedback) are hidden until boot.js marks the page. */
.no-js .js-only { display: none !important; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 12px; text-decoration: none; font-weight: 550;
}
.skip:focus { top: 8px; }

.side-prod a { color: inherit; text-decoration: none; }
.side-prod a:hover { color: var(--accent-ink); text-decoration: underline; }
.home-sec > h2 .h-link { color: inherit; text-decoration: none; }
.home-sec > h2 .h-link:hover { color: var(--accent-ink); text-decoration: underline; }
a.lang-btn { text-decoration: none; }

/* Product landing page */
.prod-page { max-width: 54rem; }
.prod-page h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.3rem); line-height: 1.15; letter-spacing: -0.022em; font-weight: 650; }
.prod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; color: var(--fg-subtle); font-size: 0.9rem; }
.prod-meta .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.prod-meta .btn .icon { width: 16px; height: 16px; }
.prod-sec { margin-top: 40px; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.prod-sec-head { display: flex; gap: 12px; align-items: flex-start; }
.prod-sec-head .ci { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); flex: none; }
.prod-sec-head h2 { font-size: 1.2rem; font-weight: 630; letter-spacing: -0.012em; }
.prod-sec-head .sub { margin: 4px 0 0; color: var(--fg-muted); font-size: 0.92rem; max-width: 46rem; }
.prod-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--border); }
.prod-list li { border-bottom: 1px solid var(--border); }
.prod-list a { display: grid; gap: 2px; padding: 11px 2px; text-decoration: none; color: var(--fg); }
.prod-list .pt { font-weight: 560; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.prod-list .pl { color: var(--fg-muted); font-size: 0.9rem; line-height: 1.45; }
.prod-list a:hover .pt { color: var(--accent-ink); text-decoration: underline; }

/* Not-found page and the bare "/" fallback */
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.nf-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.nf-actions .btn .icon { width: 16px; height: 16px; }
.root-pick { max-width: 30rem; margin: 10vh auto; }
.root-pick .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); margin: 0; }

/* The feedback note under the faces */
.helpful .fb-note { font-size: 0.76rem; }

/* Without the script, the narrow-screen drawer cannot open: show the article list below the page instead. */
@media (max-width: 959px) {
  .no-js .menu-btn { display: none; }
  .no-js .sidebar {
    position: static; order: 2; transform: none; visibility: visible; width: auto; height: auto;
    border-right: 0; border-top: 1px solid var(--border);
  }
}

/* ==========================================================================
   Figures: drawn UI pictures and animated walkthroughs (shared by every product).
   Injected into the page <style> by build.py. Markup comes from figlib.py.

   Part 1  --ui-* tokens: the Sage operator app look, mapped onto light and dark.
   Part 2  .kbf-*   the frame: browser bar, "Sample data" tag, screen, caption,
                    animation controls and the reduced-motion step list.
   Part 3  .m-*     the mock UI vocabulary (cards, buttons, chips, badges, grids,
                    editor toolbar, dialogs, bubbles). Product figures compose these.
   Every colour below is a token. Do not add literal colours outside Part 1.
   ========================================================================== */

/* ---------- Part 1: tokens ---------- */
:root {
  --ui-bg: #f4f1e8;
  --ui-surface: #ffffff;
  --ui-surface-2: #faf7ee;
  --ui-surface-3: #f1eddf;
  --ui-line: #e3ddc8;
  --ui-line-2: #d5cdb3;
  --ui-ink: #14190f;
  --ui-ink-2: #2a3324;
  --ui-ink-3: #525a48;
  --ui-ink-4: #8a9180;
  --ui-sage: #9cae89;
  --ui-sage-soft: #dde6cc;
  --ui-sage-tint: #ecf0df;
  --ui-sage-wash: #f5f7ec;
  --ui-sage-deep: #4e6740;
  --ui-primary: #5c744a;
  --ui-on-primary: #f6f8ef;
  --ui-warn: #a8621f;
  --ui-warn-soft: #f5e4cc;
  --ui-err: #b5564b;
  --ui-err-soft: #f1d6d1;
  --ui-ok: #4e8556;
  --ui-ok-soft: #dbe8d8;
  --ui-info: #5c84a6;
  --ui-info-soft: #dce6ee;
  --ui-time: #8a5216;
  --ui-note-wash: #fffbeb;
  --ui-note-line: #fbbf24;
  --ui-note-head: #92400e;
  --ui-note-ink: #78350f;
  --ui-bubble-in: #f1f5f9;
  --ui-side: #2a3324;
  --ui-side-2: #1c2418;
  --ui-side-ink: #dde0d2;
  --ui-side-mute: #9aa290;
  --ui-side-on: #3c4834;
  --ui-scrim: rgba(20, 26, 16, 0.34);
  --ui-shadow: 0 1px 2px rgba(40, 50, 30, 0.06), 0 6px 18px rgba(40, 50, 30, 0.07);
  --ui-modal-shadow: 0 18px 50px rgba(20, 26, 16, 0.24);
  --ui-cursor: #14190f;
  --ui-cursor-edge: #ffffff;
  --ui-ring: rgba(92, 116, 74, 0.38);
  --ui-hilite: rgba(92, 116, 74, 0.16);
  --ui-st-stock: #0f6cbd;
  --ui-st-comm: #0a7d6b;
  --ui-st-use: #107e3e;
  --ui-st-maint: #b25b00;
  --ui-st-out: #a4262c;
  --ui-st-ret: #605e5c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg: #141812;
    --ui-surface: #1b2018;
    --ui-surface-2: #20261d;
    --ui-surface-3: #283023;
    --ui-line: #333b2d;
    --ui-line-2: #3f4838;
    --ui-ink: #e5e9df;
    --ui-ink-2: #cdd4c5;
    --ui-ink-3: #a3ac99;
    --ui-ink-4: #808977;
    --ui-sage: #7d9668;
    --ui-sage-soft: #3a4a2f;
    --ui-sage-tint: #27321f;
    --ui-sage-wash: #1f281a;
    --ui-sage-deep: #b4cc9f;
    --ui-primary: #9db886;
    --ui-on-primary: #131611;
    --ui-warn: #e2b06a;
    --ui-warn-soft: #3a2c14;
    --ui-err: #ec9a88;
    --ui-err-soft: #3a1f19;
    --ui-ok: #9fcf8f;
    --ui-ok-soft: #1f3019;
    --ui-info: #9cbcd8;
    --ui-info-soft: #1c2935;
    --ui-time: #e2b06a;
    --ui-note-wash: #2b2512;
    --ui-note-line: #a8801f;
    --ui-note-head: #f0c46a;
    --ui-note-ink: #e8d3a0;
    --ui-bubble-in: #232a31;
    --ui-side: #10140e;
    --ui-side-2: #0b0e09;
    --ui-side-ink: #cdd3c3;
    --ui-side-mute: #7f8876;
    --ui-side-on: #26301f;
    --ui-scrim: rgba(0, 0, 0, 0.5);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
    --ui-modal-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    --ui-cursor: #f4f4ef;
    --ui-cursor-edge: #0b0e09;
    --ui-ring: rgba(157, 184, 134, 0.45);
    --ui-hilite: rgba(157, 184, 134, 0.16);
    --ui-st-stock: #6cb0ea;
    --ui-st-comm: #4fc1ad;
    --ui-st-use: #6cc48c;
    --ui-st-maint: #e8a35a;
    --ui-st-out: #ec8a90;
    --ui-st-ret: #aaa7a3;
  }
}
:root[data-theme="dark"] {
  --ui-bg: #141812;
  --ui-surface: #1b2018;
  --ui-surface-2: #20261d;
  --ui-surface-3: #283023;
  --ui-line: #333b2d;
  --ui-line-2: #3f4838;
  --ui-ink: #e5e9df;
  --ui-ink-2: #cdd4c5;
  --ui-ink-3: #a3ac99;
  --ui-ink-4: #808977;
  --ui-sage: #7d9668;
  --ui-sage-soft: #3a4a2f;
  --ui-sage-tint: #27321f;
  --ui-sage-wash: #1f281a;
  --ui-sage-deep: #b4cc9f;
  --ui-primary: #9db886;
  --ui-on-primary: #131611;
  --ui-warn: #e2b06a;
  --ui-warn-soft: #3a2c14;
  --ui-err: #ec9a88;
  --ui-err-soft: #3a1f19;
  --ui-ok: #9fcf8f;
  --ui-ok-soft: #1f3019;
  --ui-info: #9cbcd8;
  --ui-info-soft: #1c2935;
  --ui-time: #e2b06a;
  --ui-note-wash: #2b2512;
  --ui-note-line: #a8801f;
  --ui-note-head: #f0c46a;
  --ui-note-ink: #e8d3a0;
  --ui-bubble-in: #232a31;
  --ui-side: #10140e;
  --ui-side-2: #0b0e09;
  --ui-side-ink: #cdd3c3;
  --ui-side-mute: #7f8876;
  --ui-side-on: #26301f;
  --ui-scrim: rgba(0, 0, 0, 0.5);
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);
  --ui-modal-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --ui-cursor: #f4f4ef;
  --ui-cursor-edge: #0b0e09;
  --ui-ring: rgba(157, 184, 134, 0.45);
  --ui-hilite: rgba(157, 184, 134, 0.16);
  --ui-st-stock: #6cb0ea;
  --ui-st-comm: #4fc1ad;
  --ui-st-use: #6cc48c;
  --ui-st-maint: #e8a35a;
  --ui-st-out: #ec8a90;
  --ui-st-ret: #aaa7a3;
}

/* ---------- Part 2: the frame ---------- */
.kbf { margin: 1.6rem 0 0; max-width: 100%; min-width: 0; }
.kbf-frame { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.kbf-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); min-width: 0; }
.kbf-lights { display: inline-flex; gap: 5px; flex: none; }
.kbf-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.kbf-url { flex: 1 1 auto; min-width: 0; height: 22px; display: flex; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-subtle); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbf-bar-title { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--fg-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbf-tag { flex: none; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.kbf-screen { position: relative; overflow-x: auto; overflow-y: hidden; background: var(--ui-bg); scrollbar-width: thin; }
.kbf-screen:focus-visible { outline-offset: -2px; }
.kbf-canvas { position: relative; font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--ui-ink); background: var(--ui-bg); text-align: left; overflow: hidden; }
.kbf-canvas *, .kbf-canvas *::before, .kbf-canvas *::after { box-sizing: border-box; }
.prose .kbf-canvas p, .prose .kbf-canvas div { margin: 0; max-width: none; }
.kbf-canvas svg { display: inline-block; flex: none; }
.kbf figcaption { padding: 8px 2px 0; font-size: 0.84rem; line-height: 1.5; color: var(--fg-muted); max-width: 68ch; }
.kbf-k { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-ink); margin-right: 6px; }

/* Animation controls */
.kbf-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.kbf-play { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font-size: 0.8rem; font-weight: 600; cursor: pointer; flex: none; }
.kbf-play:hover { background: var(--surface-2); }
.kbf-play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.kbf-play .kbf-i-play { display: none; }
.kbf-play[aria-pressed="false"] .kbf-i-play { display: block; }
.kbf-play[aria-pressed="false"] .kbf-i-pause { display: none; }
.kbf-dots { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.kbf-dot { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; padding: 0; }
.kbf-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background 0.15s ease, transform 0.15s ease; }
.kbf-dot:hover::before { background: var(--fg-subtle); }
.kbf-dot[aria-current="step"]::before { background: var(--accent); transform: scale(1.25); }
.kbf-now { margin: 0 !important; flex: 1 1 14rem; min-width: 0; font-size: 0.82rem; line-height: 1.4; color: var(--fg-muted); }
.kbf-now-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.kbf-steps { display: none; margin: 0 !important; padding: 10px 14px 12px 2.1rem !important; border-top: 1px solid var(--border); background: var(--surface); font-size: 0.86rem; }
.kbf-steps li + li { margin-top: 0.2rem !important; }
.kbf.is-static .kbf-steps { display: block; }
.kbf.is-static .kbf-play, .kbf.is-static .kbf-now { display: none; }
.kbf.is-static .kbf-cursor { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kbf-is-anim .kbf-steps { display: block; }
  .kbf-is-anim .kbf-play, .kbf-is-anim .kbf-now, .kbf-is-anim .kbf-cursor { display: none; }
}

/* Cursor and click ripple */
.kbf-cursor { position: absolute; z-index: 30; left: 50%; top: 50%; width: 18px; height: 22px; margin: -2px 0 0 -3px; pointer-events: none; transition: left 0.7s cubic-bezier(.45,.05,.3,1), top 0.7s cubic-bezier(.45,.05,.3,1); }
.kbf-cursor svg { width: 18px; height: 22px; display: block; }
.kbf-cursor .c-fill { fill: var(--ui-cursor); }
.kbf-cursor .c-edge { fill: none; stroke: var(--ui-cursor-edge); stroke-width: 1.4; stroke-linejoin: round; }
.kbf-cursor::after { content: ""; position: absolute; left: -9px; top: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ui-primary); opacity: 0; transform: scale(0.3); }
.kbf-cursor.is-click::after { animation: kbf-ripple 0.5s ease-out; }
@keyframes kbf-ripple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
/* Typed text caret */
.kbf-type.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--ui-ink); animation: kbf-caret 0.8s steps(1) infinite; }
@keyframes kbf-caret { 50% { opacity: 0; } }
/* Elements that appear on a step fade in */
.kbf-anim [data-on] { animation: kbf-in 0.28s ease-out; }
@keyframes kbf-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.kbf-anim.no-anim [data-on] { animation: none; }
.kbf-anim[data-step="1"] [data-on]:not([data-on~="1"]){display:none!important}.kbf-anim[data-step="2"] [data-on]:not([data-on~="2"]){display:none!important}.kbf-anim[data-step="3"] [data-on]:not([data-on~="3"]){display:none!important}.kbf-anim[data-step="4"] [data-on]:not([data-on~="4"]){display:none!important}.kbf-anim[data-step="5"] [data-on]:not([data-on~="5"]){display:none!important}.kbf-anim[data-step="6"] [data-on]:not([data-on~="6"]){display:none!important}.kbf-anim[data-step="7"] [data-on]:not([data-on~="7"]){display:none!important}.kbf-anim[data-step="8"] [data-on]:not([data-on~="8"]){display:none!important}.kbf-anim[data-step="9"] [data-on]:not([data-on~="9"]){display:none!important}.kbf-anim[data-step="10"] [data-on]:not([data-on~="10"]){display:none!important}.kbf-anim[data-step="11"] [data-on]:not([data-on~="11"]){display:none!important}.kbf-anim[data-step="12"] [data-on]:not([data-on~="12"]){display:none!important}

/* ---------- Part 3: mock UI vocabulary ---------- */
.m-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.m-side { background: linear-gradient(180deg, var(--ui-side) 0%, var(--ui-side-2) 100%); color: var(--ui-side-ink); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.m-brand { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ui-side-on); }
.m-brand-logo { width: 24px; height: 24px; border-radius: 7px; background: var(--ui-side-on); border: 1px solid var(--ui-sage); display: grid; place-items: center; color: var(--ui-sage); font-weight: 700; font-size: 12px; }
.m-brand-name { font-weight: 600; font-size: 12.5px; line-height: 1.1; }
.m-brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-side-mute); }
.m-nav-k { margin: 8px 6px 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-side-mute); }
.m-nav { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; color: var(--ui-side-ink); line-height: 1.25; }
.m-nav::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.4px solid var(--ui-side-mute); flex: none; }
.m-nav.on { background: var(--ui-side-on); color: var(--ui-side-ink); font-weight: 600; }
.m-nav.on::before { border-color: var(--ui-sage); }
.m-nav .m-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ui-side-mute); }
.m-main { min-width: 0; display: flex; flex-direction: column; }
.m-top { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.m-crumbs { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-ink-3); white-space: nowrap; }
.m-crumbs b { color: var(--ui-ink); font-weight: 500; }
.m-search { margin-left: auto; height: 28px; width: 118px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 8px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink-4); font-size: 11.5px; }
.m-page { padding: 16px 18px 18px; min-width: 0; }
.m-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-ink-3); }
.m-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ink); line-height: 1.15; }
.m-h { font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.m-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-3); }
.m-muted { color: var(--ui-ink-3); }
.m-faint { color: var(--ui-ink-4); }
.m-mono { font-family: var(--font-mono); }
.m-small { font-size: 11.5px; }
.m-xs { font-size: 10.5px; }
.m-b { font-weight: 600; }
.m-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-row.top { align-items: flex-start; }
.m-row.wrap { flex-wrap: wrap; }
.m-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-col.tight { gap: 6px; }
.m-sp { flex: 1 1 auto; min-width: 0; }
.m-grow { flex: 1 1 auto; min-width: 0; }
.m-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: var(--ui-shadow); min-width: 0; }
.m-card.flat { box-shadow: none; }
.m-card-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
.m-pad { padding: 12px 14px; }
.m-pad-sm { padding: 9px 12px; }
.m-tint { background: var(--ui-surface-2); }
.m-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--ui-line-2); background: var(--ui-surface); color: var(--ui-ink); font-weight: 550; font-size: 12px; white-space: nowrap; flex: none; }
.m-btn.sm { height: 25px; padding: 0 8px; font-size: 11px; border-radius: 7px; }
.m-btn.p { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); }
.m-btn.ok { background: var(--ui-ok); border-color: var(--ui-ok); color: var(--ui-surface); }
.m-btn.g { background: transparent; border-color: transparent; }
.m-btn.dash { border-style: dashed; color: var(--ui-ink-3); }
.m-btn.dis { opacity: 0.5; }
.m-btn.press, .m-chip.press { box-shadow: 0 0 0 3px var(--ui-ring); }
.m-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink-2); font-size: 11.5px; white-space: nowrap; max-width: 100%; min-width: 0; }
.m-chip.on { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-surface); }
.m-chip .m-x { width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--ui-ink-3); margin-left: 1px; }
.m-chip-mark { font-size: 10.5px; color: var(--ui-ink-3); }
.m-badge { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; flex: none; background: var(--ui-surface-3); color: var(--ui-ink-3); }
.m-badge.sage { background: var(--ui-sage-tint); color: var(--ui-sage-deep); border-color: var(--ui-sage-soft); }
.m-badge.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.m-badge.err { background: var(--ui-err-soft); color: var(--ui-err); }
.m-badge.ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.m-badge.info { background: var(--ui-info-soft); color: var(--ui-info); }
.m-badge.mute { background: var(--ui-surface-3); color: var(--ui-ink-3); border-color: var(--ui-line); }
.m-badge.dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.m-prio { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.m-prio::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--ui-ink-4); }
.m-prio.crit { color: var(--ui-err); } .m-prio.crit::before { background: var(--ui-err); }
.m-prio.high { color: var(--ui-warn); } .m-prio.high::before { background: var(--ui-warn); }
.m-prio.norm { color: var(--ui-ink-2); }
.m-prio.low { color: var(--ui-ink-3); } .m-prio.low::before { opacity: 0.5; }
.m-av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 600; flex: none; background: var(--ui-surface-3); color: var(--ui-ink-2); border: 1px solid var(--ui-line); }
.m-av.sage { background: var(--ui-sage-soft); color: var(--ui-sage-deep); border-color: var(--ui-sage-soft); }
.m-av.sm { width: 20px; height: 20px; font-size: 8.5px; }
.m-input { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--ui-line-2); border-radius: 8px; background: var(--ui-surface); font-size: 12px; color: var(--ui-ink); min-width: 0; white-space: nowrap; overflow: hidden; }
.m-input.ph { color: var(--ui-ink-4); }
.m-input.focus { border-color: var(--ui-sage); box-shadow: 0 0 0 3px var(--ui-hilite); }
.m-input.sel::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--ui-ink-3); border-bottom: 1.5px solid var(--ui-ink-3); transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.m-input.area { height: auto; min-height: 44px; align-items: flex-start; padding: 7px 9px; white-space: normal; }
.m-label { font-size: 11px; font-weight: 500; color: var(--ui-ink-2); margin-bottom: 4px; }
.m-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--ui-surface-3); gap: 1px; flex: none; }
.m-seg > span { padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--ui-ink-3); white-space: nowrap; }
.m-seg > span.on { background: var(--ui-surface); color: var(--ui-sage-deep); box-shadow: var(--ui-shadow); }
.m-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ui-line); }
.m-tab { padding: 7px 11px; font-size: 12px; color: var(--ui-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.m-tab.on { color: var(--ui-ink); font-weight: 600; border-bottom-color: var(--ui-primary); }
/* Grid tables (no <table>: the page's table checks stay meaningful) */
.m-tbl { display: grid; font-size: 12px; min-width: 0; }
.m-tbl > div { display: grid; grid-template-columns: inherit; grid-column: 1 / -1; align-items: center; min-height: 34px; border-bottom: 1px solid var(--ui-line); }
.m-tbl > div:last-child { border-bottom: 0; }
.m-tbl > div > span { padding: 5px 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tbl > .m-th { min-height: 28px; background: var(--ui-surface-2); }
.m-tbl > .m-th > span { white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-ink-3); }
.m-tbl > .m-tr-hl { background: var(--ui-sage-wash); }
.m-tbl > .m-tr-bad { box-shadow: inset 3px 0 0 var(--ui-err); }
.m-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Editor */
.m-editor { border: 1px solid var(--ui-line-2); border-radius: 10px; background: var(--ui-surface); overflow: hidden; }
.m-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 4px 6px; background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); }
.m-tb.table-row { background: var(--ui-surface); }
.m-tbb { min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 5px; color: var(--ui-ink-2); font-size: 12px; }
.m-tbb.on { background: var(--ui-sage-tint); color: var(--ui-sage-deep); }
.m-tbb.hot { background: var(--ui-sage-tint); color: var(--ui-sage-deep); box-shadow: 0 0 0 2px var(--ui-ring); }
.m-tbb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-tbs { width: 1px; height: 16px; background: var(--ui-line); margin: 0 3px; }
.m-ed-body { padding: 9px 11px; min-height: 64px; font-size: 12.5px; line-height: 1.55; color: var(--ui-ink); }
.m-ed-body .m-ph { color: var(--ui-ink-4); }
.m-ed-table { display: grid; margin: 6px 0; border: 1px solid var(--ui-line-2); border-radius: 2px; font-size: 11.5px; }
.m-ed-table > span { padding: 4px 7px; border-right: 1px solid var(--ui-line-2); border-bottom: 1px solid var(--ui-line-2); min-height: 24px; white-space: nowrap; overflow: hidden; }
.m-ed-table > span.h { background: var(--ui-surface-2); font-weight: 600; }
.m-ed-table > span.cur { box-shadow: inset 0 0 0 2px var(--ui-sage); }
/* Dialog over a dimmed page */
.m-scrim { position: absolute; inset: 0; background: var(--ui-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.m-modal { width: 100%; background: var(--ui-surface); border-radius: 12px; box-shadow: var(--ui-modal-shadow); overflow: hidden; border: 1px solid var(--ui-line); }
.m-modal-hd { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); }
.m-modal-bd { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.m-modal-ft { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ui-line); }
.m-modal-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* Disclosure, summary list, popover */
.m-disc { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); }
.m-disc .m-k { flex: none; }
.m-disc-digest { font-size: 12px; color: var(--ui-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.m-chev { width: 12px; height: 12px; flex: none; margin-left: auto; color: var(--ui-ink-3); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 9px 14px; padding: 12px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 11px; align-items: center; }
.m-dl > .m-k { font-size: 9.5px; }
.m-pop { position: absolute; z-index: 12; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 11px; box-shadow: var(--ui-modal-shadow); padding: 10px 12px; }
/* Conversation */
.m-orig { border: 1px solid var(--ui-sage-soft); border-radius: 11px; background: var(--ui-surface); overflow: hidden; }
.m-orig-hd { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--ui-sage-wash); border-bottom: 1px solid var(--ui-sage-soft); }
.m-orig-title { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-sage-deep); }
.m-orig-bd { padding: 9px 12px 11px; font-size: 12.5px; line-height: 1.55; }
.m-msg { display: flex; gap: 8px; align-items: flex-start; }
.m-msg.out { flex-direction: row-reverse; }
.m-msg-col { max-width: 78%; min-width: 0; }
.m-msg-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; margin-bottom: 3px; }
.m-msg.out .m-msg-hd { justify-content: flex-end; }
.m-bub { padding: 7px 11px; font-size: 12.5px; line-height: 1.55; border-radius: 0 10px 10px 10px; background: var(--ui-bubble-in); color: var(--ui-ink); }
.m-msg.out .m-bub { border-radius: 10px 0 10px 10px; background: var(--ui-sage-wash); border: 1px solid var(--ui-sage-soft); }
.m-note { background: var(--ui-note-wash); border: 1px dashed var(--ui-note-line); border-radius: 8px; padding: 8px 12px; }
.m-note-who { font-weight: 600; font-size: 12px; color: var(--ui-note-head); }
.m-note-body { font-size: 12.5px; line-height: 1.55; color: var(--ui-note-ink); }
.m-day { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-4); }
.m-day::before, .m-day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ui-line); }
.m-mtab { flex: 1 1 0; text-align: center; padding: 7px 0; font-size: 12px; color: var(--ui-ink-2); border-bottom: 2px solid transparent; }
.m-mtab.on-reply { background: var(--ui-sage-wash); color: var(--ui-sage-deep); border-bottom-color: var(--ui-sage-deep); font-weight: 600; }
.m-mtab.on-comment { background: var(--ui-surface-2); color: var(--ui-ink-2); border-bottom-color: var(--ui-ink-2); font-weight: 600; }
.m-mtab.on-note { background: var(--ui-note-wash); color: var(--ui-note-head); border-bottom-color: var(--ui-note-head); font-weight: 600; }
/* Status dots, callouts, mail */
.m-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-warn); flex: none; display: inline-block; }
.m-pausemark { width: 8px; height: 9px; flex: none; display: inline-block; border-left: 2.5px solid var(--ui-ink-3); border-right: 2.5px solid var(--ui-ink-3); }
.m-hl { box-shadow: 0 0 0 2px var(--ui-primary), 0 0 0 5px var(--ui-hilite); border-radius: 8px; }
.m-mail { background: var(--ui-surface); color: var(--ui-ink); font-size: 13px; line-height: 1.55; }
.m-mail-hd { padding: 10px 16px; background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); display: grid; gap: 2px; font-size: 12px; }
.m-mail-hd > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.m-mail-bd { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.m-quote { padding: 6px 11px; border-left: 3px solid var(--ui-primary); background: var(--ui-surface-2); color: var(--ui-ink-3); font-size: 12px; border-radius: 0 6px 6px 0; }
.m-link { color: var(--ui-sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.m-mail-table { display: grid; border: 1px solid var(--ui-line-2); font-size: 12px; }
.m-mail-table > span { padding: 4px 8px; border-right: 1px solid var(--ui-line-2); border-bottom: 1px solid var(--ui-line-2); }
.m-mail-table > span.h { background: var(--ui-surface-2); font-weight: 600; }
/* Flow diagram */
.m-node { position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; background: var(--ui-surface); border: 1px solid var(--ui-line-2); box-shadow: var(--ui-shadow); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.m-node i { width: 9px; height: 9px; border-radius: 50%; flex: none; display: block; }
.m-node.entry { background: var(--ui-surface-2); border-style: dashed; color: var(--ui-ink-3); box-shadow: none; font-weight: 500; }
.m-node.entry i { border: 1.5px dashed var(--ui-ink-4); }
.m-node.end { background: var(--ui-surface-2); border-color: var(--ui-ink-4); box-shadow: none; }
.m-node.sel { border-color: var(--ui-sage-deep); box-shadow: 0 0 0 3px var(--ui-sage-soft); }
.m-node .m-tagx { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ink-3); font-weight: 500; }
.m-gate { position: absolute; font-size: 9.5px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--ui-line-2); background: var(--ui-surface); color: var(--ui-ink-2); white-space: nowrap; line-height: 16px; }
.m-gate.role { background: var(--ui-sage-tint); border-color: var(--ui-sage-soft); color: var(--ui-sage-deep); }
.m-gate.appr { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
.m-edge { stroke: var(--ui-ink-4); stroke-width: 1.4; fill: none; }
.m-edge-head { fill: var(--ui-ink-4); }
.m-griddots { background-image: radial-gradient(var(--ui-line-2) 1px, transparent 1.2px); background-size: 16px 16px; }
/* Portal */
.p-mast { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.p-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--ui-primary); color: var(--ui-on-primary); display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.p-nav { padding: 4px 8px; border-radius: 7px; font-size: 12px; color: var(--ui-ink-3); white-space: nowrap; }
.p-nav.on { background: var(--ui-sage-wash); color: var(--ui-ink); font-weight: 600; }
/* Form bits and placeholders */
.m-check { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--ui-ink-4); background: var(--ui-surface); display: inline-grid; place-items: center; flex: none; }
.m-check.on { background: var(--ui-primary); border-color: var(--ui-primary); }
.m-check.on::after { content: ""; width: 6px; height: 3px; border-left: 1.6px solid var(--ui-on-primary); border-bottom: 1.6px solid var(--ui-on-primary); transform: rotate(-45deg) translate(0.5px, -0.5px); }
.m-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ui-ink-4); background: var(--ui-surface); flex: none; display: inline-grid; place-items: center; }
.m-radio.on { border-color: var(--ui-primary); }
.m-radio.on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-primary); }
.m-skel { height: 9px; border-radius: 5px; background: var(--ui-surface-3); }
.m-dim { opacity: 0.55; }
.m-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 550; background: var(--ui-sage-tint); color: var(--ui-sage-deep); border: 1px solid var(--ui-sage-soft); white-space: nowrap; }
.m-sel-card { border: 1px solid var(--ui-line-2); border-radius: 12px; background: var(--ui-surface); padding: 12px 14px; position: relative; }
.m-sel-card.on { border-color: var(--ui-sage-deep); box-shadow: 0 0 0 3px var(--ui-sage-soft); }
.m-corner { position: absolute; top: 10px; right: 10px; }
.m-cap { display: grid; place-items: center; font-size: 11.5px; border-radius: 6px; height: 26px; font-variant-numeric: tabular-nums; }
.m-cap.ok { background: var(--ui-ok-soft); box-shadow: inset 0 -2px 0 var(--ui-ok); }
.m-cap.tight { background: var(--ui-warn-soft); box-shadow: inset 0 -2px 0 var(--ui-warn); }
.m-cap.over { background: var(--ui-err-soft); box-shadow: inset 0 -2px 0 var(--ui-err); font-weight: 700; }
/* ---------- Part 4: Asset Management (.a-*): its own shell and pieces, on the same tokens ---------- */
.a-app { display: grid; grid-template-columns: 178px minmax(0, 1fr); background: var(--ui-bg); }
.a-rail { background: linear-gradient(180deg, var(--ui-side) 0%, var(--ui-side-2) 100%); color: var(--ui-side-ink); padding: 0 9px 14px; font-size: 12px; display: flex; flex-direction: column; }
.a-brand { display: flex; align-items: center; gap: 9px; padding: 16px 8px 12px 17px; margin: 0 -9px 6px; border-bottom: 1px solid var(--ui-side-on); }
.a-brand-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--ui-side-on); border: 1px solid var(--ui-sage); display: grid; place-items: center; color: var(--ui-sage); font-weight: 700; font-size: 12px; flex: none; }
.a-brand-name { font-weight: 600; font-size: 13px; line-height: 1.1; color: var(--ui-side-ink); }
.a-brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-side-mute); margin-top: 2px; }
.a-grp { padding: 9px 9px 4px; font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-side-mute); }
.a-nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 7px; color: var(--ui-side-ink); line-height: 1.3; white-space: nowrap; }
.a-nav::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.4px solid var(--ui-side-mute); flex: none; }
.a-nav.on { background: var(--ui-side-on); font-weight: 600; }
.a-nav.on::before { border-color: var(--ui-sage); }
.a-nav.on::after { content: ""; position: absolute; left: -9px; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 0 2px 2px 0; background: var(--ui-sage); }
.a-nav .a-n { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--ui-side-mute); }
.a-main { min-width: 0; display: flex; flex-direction: column; }
.a-top { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); flex: none; }
.a-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-ink-3); white-space: nowrap; }
.a-crumb b { color: var(--ui-ink); font-weight: 500; }
.a-crumb i { font-style: normal; color: var(--ui-ink-4); margin: 0 5px; }
.a-search { margin-left: auto; height: 32px; width: 200px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 10px; border-radius: 9px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink-4); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.a-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--ui-ink-3); border: 1px solid var(--ui-line-2); border-radius: 5px; padding: 0 4px; background: var(--ui-surface); }
.a-bell { position: relative; color: var(--ui-ink-3); display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
.a-bell-n { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--ui-err); color: var(--ui-surface); font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.a-acct { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); white-space: nowrap; flex: none; }
.a-acct-r { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-3); }
.a-page { padding: 18px 20px 20px; min-width: 0; position: relative; }
.a-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-ink-3); }
.a-title { font-family: var(--font-display); font-size: 31px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; color: var(--ui-ink); }
.a-sub { font-size: 12px; color: var(--ui-ink-3); }
.a-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.a-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: var(--ui-shadow); min-width: 0; }
.a-card-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
.a-card-t { font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.a-card-bd { padding: 12px 14px; }
.a-cap { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-ink-3); }
.a-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 550; border: 1px solid transparent; white-space: nowrap; flex: none; }
.a-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.a-pill.ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.a-pill.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.a-pill.err { background: var(--ui-err-soft); color: var(--ui-err); }
.a-pill.info { background: var(--ui-info-soft); color: var(--ui-info); }
.a-pill.sage { background: var(--ui-sage-tint); color: var(--ui-sage-deep); border-color: var(--ui-sage-soft); }
.a-pill.mute { background: var(--ui-surface-3); color: var(--ui-ink-3); border-color: var(--ui-line); }
.a-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--ui-ink-3); white-space: nowrap; }
.a-tile { width: 28px; height: 28px; border-radius: 8px; background: var(--ui-sage-tint); border: 1px solid var(--ui-sage-soft); color: var(--ui-sage-deep); display: grid; place-items: center; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; flex: none; }
.a-reddot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-err); display: inline-block; flex: none; }
.a-danger { color: var(--ui-err) !important; border-color: var(--ui-err-soft) !important; }
.a-ok-btn { background: var(--ui-ok) !important; border-color: var(--ui-ok) !important; color: var(--ui-surface) !important; }
.a-banner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--ui-line); font-size: 12px; }
.a-banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-ink); }
.a-banner.warn b { color: var(--ui-warn); }
.a-banner.ok { background: var(--ui-ok-soft); border-color: var(--ui-ok); color: var(--ui-ink); }
.a-banner.ok b { color: var(--ui-ok); }
.a-banner.err { background: var(--ui-err-soft); border-color: var(--ui-err); color: var(--ui-ink); }
.a-steps { display: flex; align-items: flex-start; padding: 4px 4px 2px; }
.a-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 92px; font-size: 10.5px; color: var(--ui-ink-3); text-align: center; }
.a-step i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; display: block; background: var(--ui-surface); }
.a-step span { color: var(--ui-ink-3); }
.a-step.done i { background: currentColor; }
.a-step.cur i { background: currentColor; box-shadow: 0 0 0 4px var(--ui-hilite); }
.a-step.cur span { color: var(--ui-ink); font-weight: 600; }
.a-step.todo i { opacity: 0.55; }
.a-step-line { flex: 1 1 auto; height: 2px; background: var(--ui-line-2); margin-top: 8px; min-width: 10px; }
.a-step-line.done { background: var(--ui-sage); }
.st-stock { color: var(--ui-st-stock); } .st-comm { color: var(--ui-st-comm); } .st-use { color: var(--ui-st-use); }
.st-maint { color: var(--ui-st-maint); } .st-out { color: var(--ui-st-out); } .st-ret { color: var(--ui-st-ret); }
.a-swatch { width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.a-dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px 12px; font-size: 12px; align-items: center; }
.a-dl > .k { color: var(--ui-ink-3); font-size: 11.5px; }
.a-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.a-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.a-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.a-stat-v { font-family: var(--font-display); font-size: 30px; line-height: 1.05; color: var(--ui-ink); margin-top: 6px; }
.a-dark { background: linear-gradient(160deg, var(--ui-side) 0%, var(--ui-side-2) 100%); color: var(--ui-side-ink); border-radius: 14px; padding: 14px 16px; }
.a-dark .a-cap { color: var(--ui-side-mute); }
.a-dark-big { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--ui-side-ink); }
.a-dark .m-btn { background: transparent; color: var(--ui-side-ink); border-color: var(--ui-side-mute); }
.a-tl { font-size: 11px; }
.a-lane { display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); min-height: 38px; border-bottom: 1px solid var(--ui-line); }
.a-lane:last-child { border-bottom: 0; }
.a-lane > * { grid-row: 1; min-width: 0; }
.a-lane > .d { border-left: 1px solid var(--ui-line); }
.a-lane > .d.today { background: var(--ui-sage-wash); }
.a-lane.hd { min-height: 30px; background: var(--ui-surface-2); }
.a-lane.hd > span { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-3); }
.a-lane > .nm { grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding: 4px 10px; overflow: hidden; }
.a-bar { align-self: center; height: 24px; margin: 0 2px; border-radius: 6px; background: var(--ui-sage-tint); border: 1px solid var(--ui-sage); color: var(--ui-sage-deep); font-size: 10px; font-weight: 550; padding: 0 7px; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; z-index: 1; position: relative; }
.a-bar.req { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
.a-hub { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow); min-width: 0; }
.a-hub-i { width: 30px; height: 30px; border-radius: 8px; background: var(--ui-sage-tint); border: 1px solid var(--ui-sage-soft); flex: none; }
.a-hub-l { font-size: 12.5px; font-weight: 600; color: var(--ui-ink); }
.a-hub-h { font-size: 10.5px; color: var(--ui-ink-3); line-height: 1.35; }
.a-hub.later { background: transparent; border-style: dashed; box-shadow: none; }
.a-hub.later .a-hub-i { background: var(--ui-surface-3); border-color: var(--ui-line); }
.a-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink-2); font-size: 11.5px; white-space: nowrap; flex: none; }
.a-chip.on { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-surface); }
.a-chip .a-chip-n { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; }
.a-donut { width: 104px; height: 104px; flex: none; }
.a-donut circle { fill: none; stroke-width: 14; }
.a-danger-fill { background: var(--ui-err) !important; border-color: var(--ui-err) !important; color: var(--ui-surface) !important; }

/* ---- helpdesk (product figure styles) ---- */
/* Helpdesk figure classes (hd-*). Colours only through the shared --ui-* tokens, so light and dark both work. */
.hd-tabs-wrap { flex-wrap: wrap; row-gap: 0; }
.hd-sub .m-tab { font-size: 11.5px; padding: 6px 9px; }
.hd-switch { width: 30px; height: 17px; border-radius: 999px; background: var(--ui-surface-3); border: 1px solid var(--ui-line-2); position: relative; flex: none; display: inline-block; margin-top: 2px; }
.hd-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--ui-surface); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-line-2); }
.hd-switch.on { background: var(--ui-primary); border-color: var(--ui-primary); }
.hd-switch.on::after { left: 14px; border-color: var(--ui-primary); }
.hd-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--ui-line-2); border-bottom-width: 2px; background: var(--ui-surface); font-family: var(--font-mono); font-size: 9.5px; color: var(--ui-ink-3); }
.hd-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--ui-ink); color: var(--ui-surface); border-radius: 10px; padding: 8px 14px; font-size: 12px; box-shadow: var(--ui-modal-shadow); z-index: 14; max-width: 86%; text-align: center; }
.hd-rail-item { padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; }
.hd-rail-item.on { background: var(--ui-sage-wash); border-color: var(--ui-sage-soft); }
.hd-iconbtn { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 5px; color: var(--ui-ink-3); flex: none; }
.hd-iconbtn.dim { opacity: 0.35; }
.hd-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.hd-colorbox { display: block; width: 60px; height: 28px; border-radius: 8px; border: 1px solid var(--ui-line-2); padding: 3px; background: var(--ui-surface); flex: none; }
.hd-colorbox > i { display: block; width: 100%; height: 100%; border-radius: 5px; }
.hd-empty { text-align: center; padding: 26px 16px; }
.hd-empty-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin: 0 auto 8px; background: var(--ui-sage-tint); color: var(--ui-sage-deep); }
.hd-kpi { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.hd-kpi-v { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hd-bar { height: 7px; border-radius: 999px; background: var(--ui-surface-3); overflow: hidden; flex: 1 1 auto; min-width: 0; }
.hd-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ui-sage); }
.hd-bar > i.warn { background: var(--ui-warn); }
.hd-bar > i.err { background: var(--ui-err); }
.hd-bar > i.info { background: var(--ui-info); }
.hd-bar > i.mute { background: var(--ui-ink-4); }
.hd-tile { border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); padding: 12px 14px; box-shadow: var(--ui-shadow); min-width: 0; }
.hd-tile b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.hd-req { color: var(--ui-err); margin-left: 3px; }
.hd-notif { padding: 7px 8px; border-radius: 8px; }
.hd-notif.unread { background: var(--ui-sage-wash); }
.hd-ntag { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 600; background: var(--ui-warn-soft); color: var(--ui-warn); }
.hd-ntag.res { background: var(--ui-ok-soft); color: var(--ui-ok); }
.hd-ntag.tm { background: var(--ui-info-soft); color: var(--ui-info); }
.hd-belldot { position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--ui-err); color: var(--ui-surface); font-size: 8.5px; font-weight: 700; line-height: 14px; text-align: center; }
.hd-menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ui-ink); }
.hd-menu-item.hot { background: var(--ui-surface-2); }
.hd-menu-item.danger { color: var(--ui-err); }
.hd-gs-hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-ink-3); }
.hd-gs-opt { padding: 6px 14px; }
.hd-gs-opt.on { background: var(--ui-sage-wash); box-shadow: inset 2px 0 0 var(--ui-sage); }
.hd-step { border: 1px solid var(--ui-line); border-radius: 10px; padding: 9px 11px; }
.hd-step.done { background: var(--ui-ok-soft); border-color: transparent; }
.hd-step.wait { border-color: var(--ui-warn); }
.hd-pill-warn { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--ui-warn-soft); color: var(--ui-warn); white-space: nowrap; }
.hd-pill-ok { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--ui-ok-soft); color: var(--ui-ok); white-space: nowrap; }
.hd-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--ui-line); }
.hd-chiptag { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; background: var(--ui-surface-3); color: var(--ui-ink-3); margin-right: 5px; flex: none; }
.hd-ledger { display: grid; grid-template-columns: 88px minmax(0, 1fr) 158px minmax(0, 1fr); font-size: 11px; border: 1px solid var(--ui-line); border-radius: 8px; overflow: hidden; }
.hd-ledger > span { padding: 5px 7px; border-top: 1px solid var(--ui-line); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-ledger > span.h { border-top: 0; background: var(--ui-surface-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-ink-3); }
.hd-ledger > span.r { text-align: right; }
.hd-ledger > span.pj { color: var(--ui-ink-3); font-style: italic; }
.hd-varchip { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--ui-ink-2); white-space: nowrap; }
.hd-varinline { font-family: var(--font-mono); font-size: 11px; color: var(--ui-sage-deep); background: var(--ui-sage-tint); border-radius: 4px; padding: 0 3px; }
.hd-cfgrow { display: flex; gap: 10px; align-items: flex-start; }
.hd-ntag, .hd-notif .m-xs { white-space: nowrap; }
.kbf .p-mast > .m-row:first-child { flex: none; }
.kbf .p-mast .m-small { white-space: nowrap; }
.kbf .p-mast { gap: 10px; }
.kbf .p-mast .p-nav { padding: 4px 6px; }

/* ---- ams (product figure styles) ---- */
/* ---------- Asset Management (products/ams): round-2 pieces, on the shared --ui-* tokens ---------- */
.ams-mode { flex: 1 1 0; min-width: 0; border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 10px; padding: 11px 13px; }
.ams-mode.on { border-color: var(--ui-sage); background: var(--ui-sage-wash); }
.ams-mode.on .m-b { color: var(--ui-sage-deep); }
.ams-qr { display: block; fill: var(--ui-ink); flex: none; }
.ams-prog { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--ui-surface-3); overflow: hidden; flex: none; vertical-align: middle; }
.ams-prog > i { display: block; height: 100%; border-radius: 999px; background: var(--ui-primary); }
.ams-prog.over > i { background: var(--ui-err); }
.ams-label { border: 1px solid var(--ui-line-2); border-radius: 6px; padding: 8px 6px 7px; text-align: center; background: var(--ui-surface); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ams-label b { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ams-label span { font-size: 9.5px; color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ams-feed { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); font-size: 12px; }
.ams-feed:last-child { border-bottom: 0; }
.ams-feed > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ink-4); margin-top: 4px; flex: none; }
.ams-feed > i.ok { background: var(--ui-ok); }
.ams-feed > i.warn { background: var(--ui-warn); }
.ams-feed > i.info { background: var(--ui-info); }
.ams-feed > i.sage { background: var(--ui-sage); }
.ams-menu { position: absolute; z-index: 12; width: 230px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-modal-shadow); overflow: hidden; }
.ams-menu-i { padding: 7px 10px; border-radius: 7px; font-size: 12px; color: var(--ui-ink-2); }
.ams-menu-i.hl { background: var(--ui-sage-wash); color: var(--ui-ink); }
.ams-menu-i.danger { color: var(--ui-err); }
.ams-hit { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 12px; }
.ams-hit.on { background: var(--ui-sage-wash); box-shadow: inset 0 0 0 1px var(--ui-sage-soft); }
.ams-verify { border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); overflow: hidden; min-width: 0; }
.ams-verify-hd { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; font-weight: 600; }
.ams-verify-r { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-bottom: 1px solid var(--ui-line); font-size: 11px; min-width: 0; }
.ams-verify-r:last-child { border-bottom: 0; }

/* ---- flexshop (product figure styles) ---- */
/* Flexshop figures (.fs-*): the Flexshop restyle look ("Sage Operator" tokens plus the shared restyle kit)
   drawn on the KB's --ui-* tokens. The admin console: a 244px dark sage rail, a 58px white top bar,
   Instrument Serif page titles, and colour only in 7px "dot squares" beside ink words. The employee portal:
   a white masthead, a sage-tint hero band and product cards. Every colour is a token, defined below with
   light AND dark values. */
:root {
  --fs-amber: #c97a2b;
  --fs-amber-soft: #f6e5cf;
  --fs-sage-3: #6f8859;
  --fs-sky: #5c84a6;
  --fs-rose: #b5564b;
  --fs-rail-1: #2a3324;
  --fs-rail-2: #1c2418;
  --fs-rail-ink: #e1e5d6;
  --fs-rail-mute: #97a08b;
  --fs-rail-on: #3a4632;
  --fs-pic: #f1eddf;
  --fs-pic-ink: #8a9180;
  --fs-device: #1d2219;
  --fs-device-edge: #3b4334;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-amber: #e2b06a;
    --fs-amber-soft: #3a2c14;
    --fs-sage-3: #9db886;
    --fs-sky: #9cbcd8;
    --fs-rose: #ec9a88;
    --fs-rail-1: #10140e;
    --fs-rail-2: #0b0e09;
    --fs-rail-ink: #cdd3c3;
    --fs-rail-mute: #7f8876;
    --fs-rail-on: #26301f;
    --fs-pic: #283023;
    --fs-pic-ink: #a3ac99;
    --fs-device: #050604;
    --fs-device-edge: #4a5442;
  }
}
:root[data-theme="dark"] {
  --fs-amber: #e2b06a;
  --fs-amber-soft: #3a2c14;
  --fs-sage-3: #9db886;
  --fs-sky: #9cbcd8;
  --fs-rose: #ec9a88;
  --fs-rail-1: #10140e;
  --fs-rail-2: #0b0e09;
  --fs-rail-ink: #cdd3c3;
  --fs-rail-mute: #7f8876;
  --fs-rail-on: #26301f;
  --fs-pic: #283023;
  --fs-pic-ink: #a3ac99;
  --fs-device: #050604;
  --fs-device-edge: #4a5442;
}

/* ---- console shell ---- */
.fs-app { display: grid; grid-template-columns: 196px minmax(0, 1fr); background: var(--ui-bg); position: relative; min-height: inherit; }
.fs-rail { background: linear-gradient(180deg, var(--fs-rail-1) 0%, var(--fs-rail-2) 100%); color: var(--fs-rail-ink); padding: 0 10px 14px; font-size: 12px; display: flex; flex-direction: column; }
.fs-brand { display: flex; align-items: center; gap: 9px; padding: 15px 8px 12px; margin: 0 -10px 4px; padding-left: 18px; border-bottom: 1px solid var(--fs-rail-on); }
.fs-brand-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--fs-rail-on); border: 1px solid var(--ui-sage); display: grid; place-items: center; color: var(--ui-sage); flex: none; }
.fs-brand-name { font-weight: 600; font-size: 13px; line-height: 1.1; color: var(--fs-rail-ink); }
.fs-brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-rail-mute); margin-top: 2px; }
.fs-grp { padding: 10px 9px 4px; font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fs-rail-mute); }
.fs-nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 7px; color: var(--fs-rail-ink); line-height: 1.3; white-space: nowrap; }
.fs-nav svg { color: var(--fs-rail-mute); }
.fs-nav.on { background: var(--fs-rail-on); font-weight: 600; }
.fs-nav.on svg { color: var(--ui-sage); }
.fs-nav.on::after { content: ""; position: absolute; left: -10px; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 0 2px 2px 0; background: var(--ui-sage); }
.fs-nav .fs-n { margin-left: auto; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--fs-amber); color: var(--fs-rail-2); font-family: var(--font-mono); font-size: 9px; font-weight: 600; display: grid; place-items: center; }
.fs-rail-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--fs-rail-on); display: flex; flex-direction: column; gap: 2px; }
.fs-rail-foot .fs-nav { color: var(--fs-rail-mute); font-size: 11.5px; }
.fs-main { min-width: 0; display: flex; flex-direction: column; }
.fs-top { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); flex: none; }
.fs-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-ink-3); white-space: nowrap; }
.fs-crumb b { color: var(--ui-ink); font-weight: 500; }
.fs-crumb i { font-style: normal; color: var(--ui-ink-4); margin: 0 6px; }
.fs-acct { margin-left: auto; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); white-space: nowrap; flex: none; font-size: 11.5px; }
.fs-acct-r { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-3); }
.fs-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ui-line-2); background: var(--ui-surface); font-size: 12px; font-weight: 550; color: var(--ui-ink); flex: none; }
.fs-page { padding: 18px 20px 20px; min-width: 0; position: relative; }
.fs-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.fs-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ui-ink-3); margin-bottom: 4px; }
.fs-title { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; color: var(--ui-ink); }
.fs-lede { font-size: 11.5px; color: var(--ui-ink-3); margin-top: 5px; max-width: 520px; line-height: 1.45; }

/* ---- cards, tiles, dot squares ---- */
.fs-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: var(--ui-shadow); min-width: 0; }
.fs-card-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
.fs-card-t { font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.fs-card-bd { padding: 12px 14px; }
.fs-inset { background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px; }
.fs-cap { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ui-ink-3); }
.fs-kpi { padding: 12px 14px; }
.fs-kpi-v { font-family: var(--font-display); font-size: 30px; line-height: 1.05; color: var(--ui-ink); margin-top: 6px; }
.fs-kpi-s { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ui-ink-3); margin-top: 4px; }
.fs-sq { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex: none; background: var(--ui-ink-4); }
.fs-sq.ok { background: var(--ui-ok); } .fs-sq.warn { background: var(--fs-amber); } .fs-sq.err { background: var(--fs-rose); }
.fs-sq.info { background: var(--fs-sky); } .fs-sq.sage { background: var(--ui-sage-deep); } .fs-sq.sage3 { background: var(--fs-sage-3); }
.fs-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fs-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fs-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* ---- badges and pills ---- */
.fs-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 550; border: 1px solid transparent; white-space: nowrap; flex: none; background: var(--ui-surface-3); color: var(--ui-ink-3); }
.fs-badge.ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.fs-badge.warn { background: var(--fs-amber-soft); color: var(--fs-amber); }
.fs-badge.err { background: var(--ui-err-soft); color: var(--fs-rose); }
.fs-badge.info { background: var(--ui-info-soft); color: var(--fs-sky); }
.fs-badge.sage { background: var(--ui-sage-tint); color: var(--ui-sage-deep); border-color: var(--ui-sage-soft); }
.fs-badge.mute { background: var(--ui-surface-3); color: var(--ui-ink-3); border-color: var(--ui-line); }
.fs-pill { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); font-size: 10.5px; font-weight: 550; white-space: nowrap; flex: none; }
.fs-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink-3); font-size: 9.5px; white-space: nowrap; flex: none; }
.fs-ref { font-family: var(--font-mono); font-size: 11px; color: var(--ui-ink); font-weight: 500; white-space: nowrap; }
.fs-grade { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--ui-line-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--ui-ink-3); background: var(--ui-surface); flex: none; }
.fs-grade.on.A { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: var(--ui-ok); }
.fs-grade.on.B { background: var(--ui-sage-tint); color: var(--ui-sage-deep); border-color: var(--ui-sage-deep); }
.fs-grade.on.C { background: var(--fs-amber-soft); color: var(--fs-amber); border-color: var(--fs-amber); }
.fs-grade.on.D { background: var(--ui-err-soft); color: var(--fs-rose); border-color: var(--fs-rose); }
.fs-chipf { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink-2); font-size: 11.5px; white-space: nowrap; flex: none; }
.fs-chipf.on { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-surface); }
.fs-chipf .fs-cn { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; }

/* ---- switches, bars, banners ---- */
.fs-sw { width: 30px; height: 17px; border-radius: 999px; background: var(--ui-line-2); position: relative; display: inline-block; flex: none; }
.fs-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.fs-sw.on { background: var(--ui-primary); }
.fs-sw.on::after { left: 15px; }
.fs-sw.dis { opacity: 0.55; }
.fs-bar { height: 7px; border-radius: 999px; background: var(--ui-surface-3); overflow: hidden; display: flex; min-width: 40px; }
.fs-bar > i { display: block; height: 100%; background: var(--fs-sage-3); }
.fs-bar > i.warn { background: var(--fs-amber); } .fs-bar > i.err { background: var(--fs-rose); }
.fs-bar > i.wait { background: var(--fs-amber); opacity: 0.55; } .fs-bar > i.item { background: var(--ui-sage-deep); }
.fs-bar > i.basket { background: var(--fs-sky); }
.fs-bar.big { height: 10px; }
.fs-banner { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--ui-line); font-size: 11.5px; line-height: 1.45; background: var(--ui-surface); color: var(--ui-ink); }
.fs-banner.ok { background: var(--ui-ok-soft); border-color: var(--ui-ok); }
.fs-banner.warn { background: var(--fs-amber-soft); border-color: var(--fs-amber); }
.fs-banner.err { background: var(--ui-err-soft); border-color: var(--fs-rose); }
.fs-banner.info { background: var(--ui-info-soft); border-color: var(--fs-sky); }
.fs-banner.sage { background: var(--ui-sage-tint); border-color: var(--ui-sage-soft); }
.fs-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ui-sage-tint); border: 1px solid var(--ui-sage-soft); font-size: 12px; }
.fs-strip.amber { background: var(--fs-amber-soft); border-color: var(--fs-amber); }
.fs-btn-ok { background: var(--ui-ok) !important; border-color: var(--ui-ok) !important; color: var(--ui-surface) !important; }
.fs-btn-danger { color: var(--fs-rose) !important; border-color: var(--ui-err-soft) !important; }
.fs-link { color: var(--ui-sage-deep); font-weight: 550; white-space: nowrap; }

/* ---- drawer and dialogs ---- */
.fs-scrim { position: absolute; inset: 0; background: var(--ui-scrim); z-index: 10; }
.fs-drawer { position: absolute; top: 0; right: 0; bottom: 0; background: var(--ui-surface); border-left: 1px solid var(--ui-line); box-shadow: var(--ui-modal-shadow); z-index: 11; display: flex; flex-direction: column; }
.fs-drawer-hd { padding: 14px 16px 12px; border-bottom: 1px solid var(--ui-line); display: flex; align-items: flex-start; gap: 10px; }
.fs-drawer-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.fs-drawer-bd { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; overflow: hidden; }
.fs-drawer-ft { padding: 10px 16px; border-top: 1px solid var(--ui-line); display: flex; align-items: center; gap: 8px; }
.fs-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 11; }
.fs-dlg { width: 100%; background: var(--ui-surface); border-radius: 14px; box-shadow: var(--ui-modal-shadow); border: 1px solid var(--ui-line); overflow: hidden; }
.fs-dlg-hd { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px 10px; }
.fs-dlg-t { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--ui-ink); }
.fs-dlg-bd { padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.fs-dlg-ft { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--ui-line); background: var(--ui-surface-2); }
.fs-sec { font-size: 12px; font-weight: 600; color: var(--ui-ink); }
.fs-opt { border: 1px solid var(--ui-line-2); border-radius: 11px; padding: 9px 11px; display: flex; gap: 9px; align-items: flex-start; background: var(--ui-surface); }
.fs-opt.on { border-color: var(--ui-sage-deep); box-shadow: 0 0 0 3px var(--ui-sage-soft); }

/* ---- timeline and tracker ---- */
.fs-tl { display: flex; flex-direction: column; gap: 0; }
.fs-tl-i { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; position: relative; padding-bottom: 10px; font-size: 11.5px; }
.fs-tl-i::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--ui-line); }
.fs-tl-i:last-child::before { display: none; }
.fs-tl-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ui-line-2); background: var(--ui-surface); margin-top: 1px; }
.fs-tl-dot.ok { background: var(--ui-ok); border-color: var(--ui-ok); }
.fs-tl-dot.ready { border-color: var(--fs-amber); box-shadow: 0 0 0 3px var(--fs-amber-soft); }
.fs-tl-dot.err { background: var(--fs-rose); border-color: var(--fs-rose); }
.fs-track { display: flex; align-items: flex-start; }
.fs-track-s { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; flex: none; font-size: 10.5px; color: var(--ui-ink-3); text-align: center; }
.fs-track-s i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ui-line-2); background: var(--ui-surface); display: block; }
.fs-track-s.done i { background: var(--fs-sage-3); border-color: var(--fs-sage-3); }
.fs-track-s.now i { border-color: var(--fs-sage-3); box-shadow: 0 0 0 4px var(--ui-hilite); }
.fs-track-s.now { color: var(--ui-ink); font-weight: 600; }
.fs-track-s em { font-style: normal; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-ink-4); }
.fs-track-l { flex: 1 1 auto; height: 2px; background: var(--ui-line-2); margin-top: 7px; min-width: 8px; }
.fs-track-l.done { background: var(--fs-sage-3); }

/* ---- portal ---- */
.fs-portal { background: var(--ui-bg); min-height: inherit; position: relative; }
.fs-mast { height: 50px; display: flex; align-items: center; gap: 6px; padding: 0 18px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.fs-mast-logo { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 13.5px; color: var(--ui-ink); margin-right: 14px; }
.fs-mast-logo span { width: 26px; height: 26px; border-radius: 8px; background: var(--ui-primary); color: var(--ui-on-primary); display: grid; place-items: center; }
.fs-pnav { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; font-size: 12px; color: var(--ui-ink-3); white-space: nowrap; }
.fs-pnav.on { background: var(--ui-sage-wash); color: var(--ui-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ui-primary); }
.fs-pnav .fs-pc { min-width: 17px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--ui-surface-3); color: var(--ui-ink-2); font-family: var(--font-mono); font-size: 9px; font-weight: 600; display: grid; place-items: center; }
.fs-pnav .fs-pc.amber { background: var(--fs-amber); color: var(--ui-surface); }
.fs-basket { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--ui-primary); color: var(--ui-on-primary); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.fs-basket.dis { background: var(--ui-surface-3); color: var(--ui-ink-4); }
.fs-basket b { font-family: var(--font-mono); font-size: 10px; background: var(--ui-on-primary); color: var(--ui-primary); border-radius: 999px; padding: 0 6px; }
.fs-av { width: 28px; height: 28px; border-radius: 50%; background: var(--ui-sage-soft); color: var(--ui-sage-deep); display: grid; place-items: center; font-size: 10px; font-weight: 650; flex: none; }
.fs-pbody { padding: 16px 20px 20px; }
.fs-hero { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; align-items: center; padding: 18px 20px; background: var(--ui-sage-tint); border-bottom: 1px solid var(--ui-sage-soft); }
.fs-hero-t { font-family: var(--font-display); font-size: 30px; line-height: 1.05; color: var(--ui-ink); margin-top: 4px; }
.fs-hero-s { font-size: 11.5px; color: var(--ui-ink-3); margin-top: 6px; line-height: 1.45; max-width: 440px; }
.fs-budget { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ui-shadow); }
.fs-budget-v { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ui-ink); margin: 6px 0 2px; }
.fs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fs-pcard { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.fs-pcard.hl { border-color: var(--ui-sage-deep); box-shadow: 0 0 0 3px var(--ui-sage-soft); }
.fs-pic { height: 92px; background: var(--fs-pic); color: var(--fs-pic-ink); display: grid; place-items: center; position: relative; }
.fs-pic .fs-badge { position: absolute; top: 8px; left: 8px; }
.fs-pcard-bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fs-brandline { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-ink-4); }
.fs-pname { font-size: 12.5px; font-weight: 600; color: var(--ui-ink); line-height: 1.25; }
.fs-price { font-size: 14px; font-weight: 650; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.fs-price small { font-size: 9.5px; font-weight: 500; color: var(--ui-ink-4); margin-left: 3px; }
.fs-stock { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ui-ink-3); }
.fs-rcard { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.fs-box { width: 40px; height: 40px; border-radius: 10px; background: var(--ui-sage-tint); border: 1px solid var(--ui-sage-soft); color: var(--ui-sage-deep); display: grid; place-items: center; }
.fs-dash { border: 1.5px dashed var(--ui-line-2); border-radius: 14px; padding: 18px; text-align: center; color: var(--ui-ink-3); font-size: 12px; }
.fs-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: 11.5px; align-items: baseline; }
.fs-kv > .k { color: var(--ui-ink-3); }

/* ---- phone frame ---- */
.fs-phone { width: 300px; border-radius: 34px; background: var(--fs-device); padding: 10px; border: 1px solid var(--fs-device-edge); flex: none; }
.fs-phone-in { border-radius: 26px; overflow: hidden; background: var(--ui-bg); height: 560px; position: relative; display: flex; flex-direction: column; }
.fs-phone-notch { height: 22px; background: var(--ui-surface); display: flex; justify-content: center; align-items: center; flex: none; }
.fs-phone-notch i { width: 70px; height: 7px; border-radius: 999px; background: var(--fs-device); display: block; }
.fs-overlay-rail { position: absolute; top: 0; left: 0; bottom: 0; width: 210px; z-index: 11; box-shadow: var(--ui-modal-shadow); }
.fs-overlay-rail > .fs-rail { height: 100%; }

/* ---- hcm (product figure styles) ---- */
/* HCM (HR Management) figures: the older @juvaro/ui look (Fiori-like greys, violet accent #5b48c7),
   not the sage operator look. Every colour is an --hc-* token defined here, with light and dark values.
   All classes are prefixed hc-. */
:root {
  --hc-bg: #faf9f8;
  --hc-surface: #ffffff;
  --hc-surface-2: #f3f2f1;
  --hc-line: #e1dfdd;
  --hc-line-2: #c8c6c4;
  --hc-ink: #1a2733;
  --hc-muted: #5b6b79;
  --hc-faint: #8a8886;
  --hc-accent: #5b48c7;
  --hc-accent-muted: #f1eefb;
  --hc-on-accent: #ffffff;
  --hc-ring: rgba(91, 72, 199, 0.28);
  --hc-ok: #107e3e;
  --hc-ok-bg: #f2faf5;
  --hc-warn: #b25b00;
  --hc-warn-bg: #fdf2e6;
  --hc-err: #a4262c;
  --hc-err-bg: #fdecec;
  --hc-info: #0f6cbd;
  --hc-info-bg: #f5f8fb;
  --hc-neu: #5b6b79;
  --hc-neu-bg: #f3f2f1;
  --hc-c1: #5b48c7;
  --hc-c1-soft: rgba(91, 72, 199, 0.18);
  --hc-c2: #0f8a7e;
  --hc-c2-soft: rgba(15, 138, 126, 0.18);
  --hc-c3: #c2410c;
  --hc-c3-soft: rgba(194, 65, 12, 0.18);
  --hc-c4: #2563eb;
  --hc-c4-soft: rgba(37, 99, 235, 0.18);
  --hc-on-c: #ffffff;
  --hc-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hc-bg: #1b1a19;
    --hc-surface: #252423;
    --hc-surface-2: #2f2e2d;
    --hc-line: #3b3a39;
    --hc-line-2: #4d4b49;
    --hc-ink: #f3f2f1;
    --hc-muted: #b3b0ad;
    --hc-faint: #8a8886;
    --hc-accent: #a99cf0;
    --hc-accent-muted: #2d2848;
    --hc-on-accent: #16132b;
    --hc-ring: rgba(169, 156, 240, 0.35);
    --hc-ok: #6fcf8f;
    --hc-ok-bg: #18301f;
    --hc-warn: #f2a65a;
    --hc-warn-bg: #3a2a12;
    --hc-err: #f1868b;
    --hc-err-bg: #3b1b1d;
    --hc-info: #82b8ec;
    --hc-info-bg: #172a3d;
    --hc-neu: #c8c6c4;
    --hc-neu-bg: #323130;
    --hc-c1: #a99cf0;
    --hc-c1-soft: rgba(169, 156, 240, 0.22);
    --hc-c2: #4fc1b3;
    --hc-c2-soft: rgba(79, 193, 179, 0.22);
    --hc-c3: #f0915a;
    --hc-c3-soft: rgba(240, 145, 90, 0.22);
    --hc-c4: #7aa7f5;
    --hc-c4-soft: rgba(122, 167, 245, 0.22);
    --hc-on-c: #16132b;
    --hc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --hc-bg: #1b1a19;
  --hc-surface: #252423;
  --hc-surface-2: #2f2e2d;
  --hc-line: #3b3a39;
  --hc-line-2: #4d4b49;
  --hc-ink: #f3f2f1;
  --hc-muted: #b3b0ad;
  --hc-faint: #8a8886;
  --hc-accent: #a99cf0;
  --hc-accent-muted: #2d2848;
  --hc-on-accent: #16132b;
  --hc-ring: rgba(169, 156, 240, 0.35);
  --hc-ok: #6fcf8f;
  --hc-ok-bg: #18301f;
  --hc-warn: #f2a65a;
  --hc-warn-bg: #3a2a12;
  --hc-err: #f1868b;
  --hc-err-bg: #3b1b1d;
  --hc-info: #82b8ec;
  --hc-info-bg: #172a3d;
  --hc-neu: #c8c6c4;
  --hc-neu-bg: #323130;
  --hc-c1: #a99cf0;
  --hc-c1-soft: rgba(169, 156, 240, 0.22);
  --hc-c2: #4fc1b3;
  --hc-c2-soft: rgba(79, 193, 179, 0.22);
  --hc-c3: #f0915a;
  --hc-c3-soft: rgba(240, 145, 90, 0.22);
  --hc-c4: #7aa7f5;
  --hc-c4-soft: rgba(122, 167, 245, 0.22);
  --hc-on-c: #16132b;
  --hc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Shell */
.hc-app { background: var(--hc-bg); color: var(--hc-ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 12.5px; line-height: 1.4; position: relative; }
.hc-app.tp { --hc-accent: var(--hc-info); --hc-accent-muted: var(--hc-info-bg); }
.hc-bar { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: var(--hc-surface); border-bottom: 1px solid var(--hc-line); }
.hc-glyph { width: 24px; height: 24px; border-radius: 4px; background: var(--hc-accent-muted); color: var(--hc-accent); display: grid; place-items: center; flex: none; }
.hc-prod { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hc-slash { color: var(--hc-faint); }
.hc-ws { font-size: 13px; color: var(--hc-muted); white-space: nowrap; }
.hc-prof { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 3px 7px; border-radius: 6px; color: var(--hc-faint); white-space: nowrap; }
.hc-prof.open { background: var(--hc-surface-2); }
.hc-prof-l { line-height: 1.15; }
.hc-prof-l b { display: block; font-size: 12px; font-weight: 600; }
.hc-prof-l span { display: block; font-size: 10px; }
.hc-av { width: 28px; height: 28px; border-radius: 50%; background: var(--hc-surface-2); color: var(--hc-faint); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none; }
.hc-av.md { width: 34px; height: 34px; background: var(--hc-accent-muted); color: var(--hc-accent); font-size: 12px; }
.hc-body { display: flex; align-items: stretch; min-height: 300px; }
.hc-rail { width: 150px; flex: none; background: var(--hc-surface); border-right: 1px solid var(--hc-line); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.hc-nav { padding: 7px 10px; border-radius: 4px; font-size: 12.5px; color: var(--hc-ink); white-space: nowrap; }
.hc-nav.on { background: var(--hc-accent-muted); color: var(--hc-accent); font-weight: 600; }
.hc-collapse { margin-top: auto; padding: 7px 10px; font-size: 11.5px; color: var(--hc-muted); }
.hc-page { flex: 1 1 auto; min-width: 0; padding: 16px 18px 18px; position: relative; }
.hc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.hc-h1 { font-size: 16px; font-weight: 600; color: var(--hc-ink); }
.hc-sub { font-size: 12px; color: var(--hc-muted); margin-top: 2px; }

/* Cards, text */
.hc-card { background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.hc-card + .hc-card, .hc-gap { margin-top: 12px; }
.hc-ct { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.hc-muted { color: var(--hc-muted); }
.hc-faint { color: var(--hc-faint); }
.hc-small { font-size: 11.5px; }
.hc-xs { font-size: 10.5px; }
.hc-b { font-weight: 600; }
.hc-mono { font-family: var(--font-mono); font-size: 11px; }
.hc-link { color: var(--hc-accent); font-weight: 600; }
.hc-code { font-family: var(--font-mono); font-size: 11px; background: var(--hc-surface-2); border: 1px solid var(--hc-line); border-radius: 3px; padding: 0 4px; }
.hc-err-t { color: var(--hc-err); font-size: 12px; }
.hc-ok-t { color: var(--hc-ok); }
.hc-warn-t { color: var(--hc-warn); }
.hc-acc-t { color: var(--hc-accent); }
.hc-note { background: var(--hc-surface-2); border: 1px solid var(--hc-line); border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--hc-muted); }
.hc-note b { color: var(--hc-ink); }
.hc-banner { display: flex; align-items: center; gap: 10px; background: var(--hc-warn-bg); border: 1px solid var(--hc-warn); border-radius: 6px; padding: 9px 12px; font-size: 12px; color: var(--hc-ink); }
.hc-big { font-size: 22px; font-weight: 600; line-height: 1.1; }
.hc-big small { font-size: 12px; font-weight: 400; color: var(--hc-muted); }
.hc-big.neg { color: var(--hc-err); }

/* Buttons, chips, dots */
.hc-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--hc-line-2); background: var(--hc-surface); color: var(--hc-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; }
.hc-btn.p { background: var(--hc-accent); border-color: var(--hc-accent); color: var(--hc-on-accent); }
.hc-btn.ok { background: var(--hc-ok); border-color: var(--hc-ok); color: var(--hc-on-accent); }
.hc-btn.danger { color: var(--hc-err); }
.hc-btn.sm { height: 24px; padding: 0 9px; font-size: 11.5px; }
.hc-btn.press, .hc-in.press { box-shadow: 0 0 0 3px var(--hc-ring); }
.hc-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--hc-neu-bg); color: var(--hc-neu); white-space: nowrap; flex: none; }
.hc-chip.ok { background: var(--hc-ok-bg); color: var(--hc-ok); }
.hc-chip.warn { background: var(--hc-warn-bg); color: var(--hc-warn); }
.hc-chip.err { background: var(--hc-err-bg); color: var(--hc-err); }
.hc-chip.info { background: var(--hc-info-bg); color: var(--hc-info); }
.hc-chip.acc { background: var(--hc-accent-muted); color: var(--hc-accent); }
.hc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--hc-c1); }
.hc-dot.c2, .hc-lc.c2 { --c: var(--hc-c2); --cs: var(--hc-c2-soft); }
.hc-dot.c3, .hc-lc.c3 { --c: var(--hc-c3); --cs: var(--hc-c3-soft); }
.hc-dot.c4, .hc-lc.c4 { --c: var(--hc-c4); --cs: var(--hc-c4-soft); }
.hc-dot.c2, .hc-dot.c3, .hc-dot.c4 { background: var(--c); }
.hc-sdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--hc-neu); }
.hc-sdot.ok { background: var(--hc-ok); } .hc-sdot.warn { background: var(--hc-warn); } .hc-sdot.err { background: var(--hc-err); }

/* Tables */
.hc-tbl { display: grid; font-size: 12px; min-width: 0; }
.hc-tbl > div { display: grid; grid-template-columns: inherit; grid-column: 1 / -1; align-items: center; min-height: 34px; border-bottom: 1px solid var(--hc-line); }
.hc-tbl > div:last-child { border-bottom: 0; }
.hc-tbl > div > span { padding: 5px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-tbl > .hc-th { min-height: 30px; background: var(--hc-surface-2); }
.hc-tbl > .hc-th > span { font-size: 11.5px; font-weight: 600; color: var(--hc-muted); white-space: normal; }
.hc-tbl > .hc-sel { background: var(--hc-accent-muted); }
.hc-tbl > .hc-new { background: var(--hc-ok-bg); }
.hc-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.hc-tbl.boxed { border: 1px solid var(--hc-line); border-radius: 6px; overflow: hidden; }

/* Forms */
.hc-label { font-size: 11px; font-weight: 600; color: var(--hc-muted); margin-bottom: 4px; }
.hc-in { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--hc-line-2); border-radius: 4px; background: var(--hc-surface); font-size: 12.5px; color: var(--hc-ink); white-space: nowrap; overflow: hidden; min-width: 0; }
.hc-in.ph { color: var(--hc-faint); }
.hc-in.ro { background: var(--hc-surface-2); color: var(--hc-muted); }
.hc-in.focus { border-color: var(--hc-accent); box-shadow: 0 0 0 2px var(--hc-accent-muted); }
.hc-in.sel::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-right: 1.5px solid var(--hc-muted); border-bottom: 1.5px solid var(--hc-muted); transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.hc-in.area { height: auto; min-height: 52px; align-items: flex-start; padding: 7px 9px; white-space: normal; font-family: var(--font-mono); font-size: 11.5px; }
.hc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.hc-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; }
.hc-span2 { grid-column: 1 / -1; }
.hc-tog { width: 30px; height: 17px; border-radius: 9px; background: var(--hc-line-2); position: relative; display: inline-block; flex: none; }
.hc-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--hc-surface); }
.hc-tog.on { background: var(--hc-accent); }
.hc-tog.on::after { left: 15px; }
.hc-togrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hc-line); margin-bottom: 12px; overflow: hidden; }
.hc-tab { padding: 7px 9px; font-size: 12px; color: var(--hc-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.hc-tab.on { color: var(--hc-accent); font-weight: 600; border-bottom-color: var(--hc-accent); }
.hc-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.hc-dl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--hc-muted); margin-bottom: 2px; }
.hc-meter { height: 6px; border-radius: 3px; background: var(--hc-surface-2); overflow: hidden; }
.hc-meter > i { display: block; height: 100%; background: var(--hc-accent); }

/* Dialogs and menus */
.hc-modal { width: 100%; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: 8px; box-shadow: var(--hc-shadow); overflow: hidden; }
.hc-modal-hd { padding: 14px 16px 4px; font-size: 15px; font-weight: 600; }
.hc-modal-bd { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.hc-modal-ft { padding: 10px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--hc-line); }
.hc-menu { position: absolute; width: 250px; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: 8px; box-shadow: var(--hc-shadow); z-index: 6; }
.hc-menu-hd { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--hc-line); }
.hc-mi { padding: 7px 10px; border-radius: 4px; font-size: 12.5px; }
.hc-mi.danger { color: var(--hc-err); }
.hc-mi.hl { background: var(--hc-surface-2); }
.hc-pop { position: absolute; background: var(--hc-surface); border: 1px solid var(--hc-line); border-radius: 6px; box-shadow: var(--hc-shadow); z-index: 8; padding: 4px; }

/* Approvals lane timeline */
.hc-lane { display: flex; gap: 10px; flex-wrap: wrap; }
.hc-stepbox { min-width: 180px; border: 1px solid var(--hc-line); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; background: var(--hc-surface); }
.hc-stepbox.faded { opacity: 0.5; }
.hc-details { background: var(--hc-surface-2); border-radius: 6px; padding: 10px 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; }

/* Team calendar */
.hc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--hc-line); border-left: 1px solid var(--hc-line); }
.hc-cal > div { min-height: 64px; border-right: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); padding: 3px 4px; font-size: 10.5px; color: var(--hc-muted); min-width: 0; overflow: hidden; }
.hc-cal > .dow { min-height: 0; text-align: center; font-weight: 600; padding: 4px; }
.hc-cal > .out { background: var(--hc-surface-2); color: var(--hc-faint); }
.hc-lc { --c: var(--hc-c1); --cs: var(--hc-c1-soft); display: block; margin-top: 2px; padding: 1px 5px; border-radius: 3px; font-size: 10.5px; font-weight: 600; background: var(--c); color: var(--hc-on-c); border: 1px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-lc.pend { background: repeating-linear-gradient(135deg, var(--cs) 0 4px, transparent 4px 8px); color: var(--c); }

/* Trees and timelines */
.hc-tree > div { display: flex; align-items: center; gap: 7px; min-height: 26px; font-size: 12px; }
.hc-tw { width: 14px; color: var(--hc-muted); text-align: center; flex: none; }
.hc-period { border: 1px solid var(--hc-line); border-radius: 6px; padding: 9px 11px; background: var(--hc-surface); }
.hc-period.cur { border-color: var(--hc-accent); }
.hc-period.new { border-color: var(--hc-ok); background: var(--hc-ok-bg); }
.hc-tl { position: relative; height: 66px; }
.hc-tl-bar { position: absolute; height: 22px; border-radius: 4px; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.hc-tl-bar.earn { background: var(--hc-accent-muted); color: var(--hc-accent); border: 1px solid var(--hc-accent); }
.hc-tl-bar.take { background: repeating-linear-gradient(135deg, var(--hc-c2-soft) 0 5px, transparent 5px 10px); color: var(--hc-c2); border: 1px solid var(--hc-c2); }
.hc-tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--hc-line-2); }
.hc-tl-lbl { position: absolute; bottom: -16px; font-size: 10px; color: var(--hc-faint); transform: translateX(-50%); white-space: nowrap; }

/* Diagrams */
.hc-col3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hc-flow { display: flex; align-items: center; gap: 8px; }
.hc-node { border: 1px solid var(--hc-line-2); border-radius: 8px; background: var(--hc-surface); padding: 9px 11px; font-size: 12px; min-width: 0; }
.hc-node.acc { border-color: var(--hc-accent); background: var(--hc-accent-muted); }
.hc-arrow { color: var(--hc-faint); flex: none; font-size: 16px; }
.hc-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 4px; background: var(--hc-surface-2); border: 1px solid var(--hc-line); font-size: 11.5px; margin: 2px 4px 2px 0; white-space: nowrap; }
.hc-pill.on { background: var(--hc-accent-muted); border-color: var(--hc-accent); color: var(--hc-accent); font-weight: 600; }

/* Numbered callouts on overview pictures */
.hc-co { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--hc-accent); color: var(--hc-on-accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; z-index: 7; box-shadow: 0 0 0 3px var(--hc-surface); }
.hc-center { display: flex; justify-content: center; padding: 26px 16px; }

/* ---- crm (product figure styles) ---- */
/* CRM (.cr-*): the Sage Operator shell CRM shares with Helpdesk, plus CRM-only pieces.
   Only --ui-* tokens and the --cr-* tokens below (light and dark). */
:root {
  --cr-forest: #0e5c47;
  --cr-on-forest: #eaf6f1;
  --cr-rail-on: rgba(156, 174, 137, 0.18);
  --cr-paper: #ffffff;
  --cr-paper-ink: #1d2219;
  --cr-paper-line: #dcd6c3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cr-forest: #3f9c80;
    --cr-on-forest: #08130f;
    --cr-rail-on: rgba(125, 150, 104, 0.22);
    --cr-paper: #23291f;
    --cr-paper-ink: #e5e9df;
    --cr-paper-line: #3f4838;
  }
}
:root[data-theme="dark"] {
  --cr-forest: #3f9c80;
  --cr-on-forest: #08130f;
  --cr-rail-on: rgba(125, 150, 104, 0.22);
  --cr-paper: #23291f;
  --cr-paper-ink: #e5e9df;
  --cr-paper-line: #3f4838;
}

/* Shell: dark rail, white top bar */
.cr-app { display: grid; grid-template-columns: 172px minmax(0, 1fr); }
.cr-rail { background: linear-gradient(180deg, var(--ui-side) 0%, var(--ui-side-2) 100%); color: var(--ui-side-ink); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.cr-brand { display: flex; align-items: center; gap: 9px; padding: 2px 4px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ui-side-on); }
.cr-glyph { width: 26px; height: 26px; border-radius: 8px; background: var(--cr-forest); color: var(--cr-on-forest); display: grid; place-items: center; flex: none; }
.cr-brand-name { font-weight: 600; font-size: 12.5px; line-height: 1.1; }
.cr-brand-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-side-mute); }
.cr-grp { margin: 9px 6px 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-side-mute); }
.cr-nav { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--ui-side-ink); line-height: 1.25; white-space: nowrap; }
.cr-nav svg { color: var(--ui-side-mute); }
.cr-nav.on { background: var(--cr-rail-on); font-weight: 600; }
.cr-nav.on svg { color: var(--ui-sage); }
.cr-nav.on::before { content: ""; position: absolute; left: -10px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-sage); }
.cr-main { min-width: 0; display: flex; flex-direction: column; }
.cr-top { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.cr-crumb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-ink-3); white-space: nowrap; }
.cr-crumb b { color: var(--ui-ink); font-weight: 500; }
.cr-prof { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); }
.cr-prof-n { font-size: 11.5px; font-weight: 600; line-height: 1.1; }
.cr-prof-r { font-size: 9.5px; color: var(--ui-ink-3); line-height: 1.1; }
.cr-page { padding: 16px 18px 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Page header: mono eyebrow, title, muted subtitle, actions at the right */
.cr-hd { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.cr-hd > .m-row { flex: none; flex-wrap: wrap; }
.cr-hd-t { flex: 1 1 240px; min-width: 0; }
.cr-sub { color: var(--ui-ink-3); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.cr-back { font-size: 11.5px; color: var(--ui-sage-deep); display: inline-flex; align-items: center; gap: 4px; }

/* Layout pieces */
.cr-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; min-width: 0; }
.cr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cr-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px 12px; font-size: 11.5px; padding: 10px 14px; }
.cr-kv > span:nth-child(odd) { color: var(--ui-ink-3); }
.cr-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.cr-form .full { grid-column: 1 / -1; }
.cr-hint { font-size: 10.5px; color: var(--ui-ink-3); line-height: 1.4; }
.cr-ro { height: 28px; display: flex; align-items: center; padding: 0 9px; border-radius: 8px; background: var(--ui-surface-2); border: 1px dashed var(--ui-line-2); font-size: 12px; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; }
.cr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
.cr-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ui-ink-2); white-space: nowrap; }
.cr-switch i { width: 26px; height: 15px; border-radius: 999px; background: var(--ui-line-2); position: relative; display: inline-block; flex: none; }
.cr-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ui-surface); }
.cr-switch.on i { background: var(--ui-primary); }
.cr-switch.on i::after { left: 13px; }
.cr-co { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cr-ini { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; background: var(--ui-sage-tint); color: var(--ui-sage-deep); border: 1px solid var(--ui-sage-soft); flex: none; }
.cr-link { color: var(--ui-sage-deep); font-weight: 550; }
.cr-id { font-family: var(--font-mono); font-size: 10px; color: var(--ui-ink-3); }

/* Inline confirmation card (role alertdialog in the app, never a modal) */
.cr-confirm { border: 1px solid var(--ui-line-2); border-left: 3px solid var(--ui-warn); border-radius: 10px; background: var(--ui-surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cr-confirm.err { border-left-color: var(--ui-err); }
.cr-confirm.ok { border-left-color: var(--ui-ok); }
.cr-confirm-t { font-weight: 600; font-size: 12.5px; }
.cr-btn-err { color: var(--ui-err); border-color: var(--ui-err-soft); }
.cr-btn-errfill { background: var(--ui-err); border-color: var(--ui-err); color: var(--ui-surface); }

/* Pipeline board */
.cr-totals { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
.cr-board { display: grid; gap: 10px; align-items: start; }
.cr-colm { background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cr-colm-hd { display: flex; flex-direction: column; gap: 3px; padding: 2px 3px 4px; }
.cr-dcard .m-badge { align-self: flex-start; }
.cr-dcard { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 9px; padding: 7px 9px; box-shadow: var(--ui-shadow); font-size: 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Quote document and totals */
.cr-tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 11.5px; padding: 10px 14px; }
.cr-tot .num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-tot .big { font-weight: 700; border-top: 1px solid var(--ui-line); padding-top: 5px; }
.cr-doc { background: var(--cr-paper); color: var(--cr-paper-ink); border: 1px solid var(--cr-paper-line); border-radius: 4px; box-shadow: var(--ui-shadow); padding: 22px 26px; font-size: 11.5px; line-height: 1.5; }
.cr-doc-h { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.cr-doc-line { border-top: 1px solid var(--cr-paper-line); }
.cr-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ui-ink-3); }

/* Import wizard */
.cr-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-stp { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ui-ink-3); white-space: nowrap; }
.cr-stp b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-family: var(--font-mono); background: var(--ui-surface-3); color: var(--ui-ink-3); border: 1px solid var(--ui-line); }
.cr-stp.on { color: var(--ui-ink); font-weight: 600; }
.cr-stp.on b { background: var(--ui-primary); color: var(--ui-on-primary); border-color: var(--ui-primary); }
.cr-stp.done b { background: var(--ui-sage-tint); color: var(--ui-sage-deep); border-color: var(--ui-sage-soft); }
.cr-stp-sep { width: 18px; height: 1px; background: var(--ui-line-2); }
.cr-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cr-count { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); padding: 8px 10px; }
.cr-count-n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cr-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--ui-line-2); border-radius: 10px; background: var(--ui-surface-2); font-size: 11.5px; }

/* Something that changed in a walkthrough */
.cr-new { box-shadow: 0 0 0 2px var(--ui-ok), 0 0 0 5px var(--ui-ok-soft); border-radius: 8px; }
.cr-gone { opacity: 0.45; text-decoration: line-through; }

/* Plain diagram boxes */
.cr-node { border: 1px solid var(--ui-line-2); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); padding: 9px 12px; font-size: 11.5px; }
.cr-node.hub { border-color: var(--cr-forest); box-shadow: 0 0 0 3px var(--ui-sage-soft); }
.cr-node.off { border-style: dashed; box-shadow: none; background: var(--ui-surface-2); color: var(--ui-ink-3); }
.cr-arrow { font-family: var(--font-mono); font-size: 10px; color: var(--ui-ink-3); text-align: center; }

/* ---- workspace (product figure styles) ---- */
/* Workspace (Tenant Portal) figure styles, prefix ws-. Two looks, as in the app:
   1. Front door (Launch Pad, My profile, Account & security, sign-in): light parchment and sage. That IS the shared
      --ui-* palette, so front-door drawings use the --ui-* tokens directly and follow the KB light/dark theme.
   2. Admin pages (every left-rail page): a FIXED dark theme. .ws-adm re-points the --ui-* tokens at the --ws-adm-*
      tokens below, so the shared .m-* classes draw dark inside it. The admin look is dark in both KB themes, because
      the app has no light admin mode (print only); its colours are still explicit tokens with light and dark blocks.
   App tile colours (from the product catalogue accents) are --ws-app-* tokens with light and dark values. */
:root {
  --ws-adm-bg: #14181a;
  --ws-adm-rail: #171c1e;
  --ws-adm-surface: #1b2022;
  --ws-adm-surface-2: #232a2c;
  --ws-adm-surface-3: #2a3234;
  --ws-adm-line: #2f3739;
  --ws-adm-line-2: #3b4547;
  --ws-adm-ink: #e6eae8;
  --ws-adm-ink-2: #d3dad7;
  --ws-adm-ink-3: #9fb0aa;
  --ws-adm-ink-4: #77877f;
  --ws-adm-accent: #8ba888;
  --ws-adm-accent-hi: #a3bfa0;
  --ws-adm-accent-muted: #222c26;
  --ws-adm-accent-soft: #33443a;
  --ws-adm-on-accent: #121614;
  --ws-adm-ok: #6fbf8b;
  --ws-adm-ok-soft: #1c3226;
  --ws-adm-warn: #e3a552;
  --ws-adm-warn-soft: #3b2c15;
  --ws-adm-err: #e5736f;
  --ws-adm-err-soft: #3d2120;
  --ws-adm-info: #7db3e8;
  --ws-adm-info-soft: #1a2c3d;
  --ws-adm-scrim: rgba(4, 6, 6, 0.6);
  --ws-adm-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ws-adm-modal-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --ws-adm-ring: rgba(139, 168, 136, 0.45);
  --ws-adm-hilite: rgba(139, 168, 136, 0.16);
  --ws-app-ams-fg: #0a7d6b; --ws-app-ams-bg: #e3f3ef;
  --ws-app-hd-fg: #a63d57; --ws-app-hd-bg: #f7dde4;
  --ws-app-hcm-fg: #5b48c7; --ws-app-hcm-bg: #f1eefb;
  --ws-app-fs-fg: #9b2f78; --ws-app-fs-bg: #f9e6f3;
  --ws-app-hub-fg: #7a4a86; --ws-app-hub-bg: #f4eef6;
  --ws-app-sfs-fg: #4e6740; --ws-app-sfs-bg: #eff1ee;
  --ws-app-crm-fg: #0e5c47; --ws-app-crm-bg: #e8f7f2;
  --ws-app-soon-fg: #6a7061; --ws-app-soon-bg: #ebe6d6;
  --ws-app-adm-fg: #f4f1e8; --ws-app-adm-bg: #14190f;
  --ws-atmos: rgba(156, 174, 137, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ws-adm-bg: #111517;
    --ws-adm-rail: #14191b;
    --ws-adm-surface: #1b2022;
    --ws-adm-surface-2: #232a2c;
    --ws-adm-surface-3: #2a3234;
    --ws-adm-line: #2f3739;
    --ws-adm-line-2: #3b4547;
    --ws-adm-ink: #e6eae8;
    --ws-adm-ink-2: #d3dad7;
    --ws-adm-ink-3: #9fb0aa;
    --ws-adm-ink-4: #77877f;
    --ws-adm-accent: #8ba888;
    --ws-adm-accent-hi: #a3bfa0;
    --ws-adm-accent-muted: #222c26;
    --ws-adm-accent-soft: #33443a;
    --ws-adm-on-accent: #121614;
    --ws-adm-ok: #6fbf8b;
    --ws-adm-ok-soft: #1c3226;
    --ws-adm-warn: #e3a552;
    --ws-adm-warn-soft: #3b2c15;
    --ws-adm-err: #e5736f;
    --ws-adm-err-soft: #3d2120;
    --ws-adm-info: #7db3e8;
    --ws-adm-info-soft: #1a2c3d;
    --ws-adm-scrim: rgba(0, 0, 0, 0.6);
    --ws-adm-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --ws-adm-modal-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
    --ws-adm-ring: rgba(139, 168, 136, 0.45);
    --ws-adm-hilite: rgba(139, 168, 136, 0.16);
    --ws-app-ams-fg: #5fd0bd; --ws-app-ams-bg: #12312b;
    --ws-app-hd-fg: #ee9db1; --ws-app-hd-bg: #3a1c24;
    --ws-app-hcm-fg: #b4a8f4; --ws-app-hcm-bg: #27224a;
    --ws-app-fs-fg: #e79ccd; --ws-app-fs-bg: #3a1a30;
    --ws-app-hub-fg: #d2abdc; --ws-app-hub-bg: #34243a;
    --ws-app-sfs-fg: #b4cc9f; --ws-app-sfs-bg: #26301f;
    --ws-app-crm-fg: #74d1b3; --ws-app-crm-bg: #12302a;
    --ws-app-soon-fg: #a3ac99; --ws-app-soon-bg: #283023;
    --ws-app-adm-fg: #14190f; --ws-app-adm-bg: #e5e9df;
    --ws-atmos: rgba(125, 150, 104, 0.14);
  }
}
:root[data-theme="dark"] {
  --ws-adm-bg: #111517;
  --ws-adm-rail: #14191b;
  --ws-adm-surface: #1b2022;
  --ws-adm-surface-2: #232a2c;
  --ws-adm-surface-3: #2a3234;
  --ws-adm-line: #2f3739;
  --ws-adm-line-2: #3b4547;
  --ws-adm-ink: #e6eae8;
  --ws-adm-ink-2: #d3dad7;
  --ws-adm-ink-3: #9fb0aa;
  --ws-adm-ink-4: #77877f;
  --ws-adm-accent: #8ba888;
  --ws-adm-accent-hi: #a3bfa0;
  --ws-adm-accent-muted: #222c26;
  --ws-adm-accent-soft: #33443a;
  --ws-adm-on-accent: #121614;
  --ws-adm-ok: #6fbf8b;
  --ws-adm-ok-soft: #1c3226;
  --ws-adm-warn: #e3a552;
  --ws-adm-warn-soft: #3b2c15;
  --ws-adm-err: #e5736f;
  --ws-adm-err-soft: #3d2120;
  --ws-adm-info: #7db3e8;
  --ws-adm-info-soft: #1a2c3d;
  --ws-adm-scrim: rgba(0, 0, 0, 0.6);
  --ws-adm-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ws-adm-modal-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  --ws-adm-ring: rgba(139, 168, 136, 0.45);
  --ws-adm-hilite: rgba(139, 168, 136, 0.16);
  --ws-app-ams-fg: #5fd0bd; --ws-app-ams-bg: #12312b;
  --ws-app-hd-fg: #ee9db1; --ws-app-hd-bg: #3a1c24;
  --ws-app-hcm-fg: #b4a8f4; --ws-app-hcm-bg: #27224a;
  --ws-app-fs-fg: #e79ccd; --ws-app-fs-bg: #3a1a30;
  --ws-app-hub-fg: #d2abdc; --ws-app-hub-bg: #34243a;
  --ws-app-sfs-fg: #b4cc9f; --ws-app-sfs-bg: #26301f;
  --ws-app-crm-fg: #74d1b3; --ws-app-crm-bg: #12302a;
  --ws-app-soon-fg: #a3ac99; --ws-app-soon-bg: #283023;
  --ws-app-adm-fg: #14190f; --ws-app-adm-bg: #e5e9df;
  --ws-atmos: rgba(125, 150, 104, 0.14);
}

/* ---------- Front door (shared parchment/sage tokens) ---------- */
.ws-fd { position: relative; min-height: 100%; padding: 18px 22px 22px; background: radial-gradient(120% 70% at 50% -10%, var(--ws-atmos), transparent 60%), var(--ui-bg); }
.ws-fd-hd { display: flex; align-items: center; gap: 10px; }
.ws-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ui-sage-deep); color: var(--ui-bg); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ws-brand { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ui-ink); line-height: 1.1; }
.ws-brand em { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 21px; color: var(--ui-sage-deep); }
.ws-sub { font-size: 11px; color: var(--ui-ink-3); padding-top: 2px; }
.ws-uchip { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); font-size: 12px; font-weight: 550; color: var(--ui-ink); }
.ws-uchip svg { color: var(--ui-ink-3); }
.ws-search, .prose .kbf-canvas .ws-search { margin: 16px auto 2px; max-width: 460px; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--ui-surface); border: 1px solid var(--ui-line-2); color: var(--ui-ink-4); font-size: 12.5px; box-shadow: var(--ui-shadow); }
.ws-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--ui-line); background: var(--ui-surface-2); color: var(--ui-ink-3); }
.ws-kick { display: flex; align-items: center; gap: 8px; padding: 16px 0 9px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-ink-3); }
.ws-kick b { font-weight: 500; color: var(--ui-ink-4); }
.ws-kick::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ui-line); }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ws-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px 10px; border-radius: 14px; background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); min-width: 0; }
.ws-tile.soon { opacity: 0.55; box-shadow: none; background: var(--ui-surface-2); }
.ws-tile.dis { opacity: 0.7; }
.ws-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; flex: none; }
.ws-ic svg { width: 22px; height: 22px; }
.ws-ic.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 9.5px; }
.ws-ic.sm svg { width: 14px; height: 14px; }
.ws-ic.ams { color: var(--ws-app-ams-fg); background: var(--ws-app-ams-bg); }
.ws-ic.hd { color: var(--ws-app-hd-fg); background: var(--ws-app-hd-bg); }
.ws-ic.hcm { color: var(--ws-app-hcm-fg); background: var(--ws-app-hcm-bg); }
.ws-ic.fs { color: var(--ws-app-fs-fg); background: var(--ws-app-fs-bg); }
.ws-ic.hub { color: var(--ws-app-hub-fg); background: var(--ws-app-hub-bg); }
.ws-ic.sfs { color: var(--ws-app-sfs-fg); background: var(--ws-app-sfs-bg); }
.ws-ic.crm { color: var(--ws-app-crm-fg); background: var(--ws-app-crm-bg); }
.ws-ic.soon { color: var(--ws-app-soon-fg); background: var(--ws-app-soon-bg); }
.ws-ic.adm { color: var(--ws-app-adm-fg); background: var(--ws-app-adm-bg); }
.ws-tname { font-size: 12px; font-weight: 600; color: var(--ui-ink); line-height: 1.25; }
.ws-tmeta { font-size: 10.5px; color: var(--ui-ink-3); line-height: 1.3; }
.ws-tmeta.act { color: var(--ui-sage-deep); font-weight: 550; }
.ws-back { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-ink-3); }
.ws-back b { color: var(--ui-ink); font-weight: 600; }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-sage-deep); flex: none; display: inline-block; }
.ws-fcard { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; padding: 13px 15px; min-width: 0; }
.ws-fcard-t { font-size: 13px; font-weight: 600; color: var(--ui-ink); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ws-big-av { width: 48px; height: 48px; border-radius: 50%; background: var(--ui-sage-soft); color: var(--ui-sage-deep); display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: none; }
.ws-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px 12px; font-size: 12px; align-items: center; }
.ws-kv > .k { color: var(--ui-ink-3); font-size: 11px; }
.ws-lang { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ui-line-2); background: var(--ui-surface); font-size: 12px; color: var(--ui-ink-2); }
.ws-lang.on { background: var(--ui-sage-deep); border-color: var(--ui-sage-deep); color: var(--ui-bg); font-weight: 600; }
.ws-saved { font-size: 11px; color: var(--ui-ok); font-weight: 550; }
.ws-menu { position: absolute; z-index: 12; min-width: 190px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-modal-shadow); padding: 6px; font-size: 12px; }
.ws-menu > div { padding: 6px 9px; border-radius: 7px; color: var(--ui-ink-2); }
.ws-menu > div.hl { background: var(--ui-sage-wash); color: var(--ui-ink); font-weight: 550; }
.ws-menu > .sep, .prose .kbf-canvas .ws-menu > .sep { height: 1px; padding: 0; margin: 4px 2px; background: var(--ui-line); }
.ws-menu > .sub { font-size: 10.5px; color: var(--ui-ink-4); padding-top: 0; }
.ws-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.ws-art { background: linear-gradient(160deg, var(--ui-sage-deep), var(--ui-side-2)); color: var(--ui-on-primary); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.ws-art em { font-family: var(--font-display); font-style: italic; font-size: 34px; line-height: 1; }
.ws-check { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ui-ink-3); }
.ws-check i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ui-ink-4); flex: none; display: inline-block; }
.ws-check.ok { color: var(--ui-ok); }
.ws-check.ok i { border-color: var(--ui-ok); background: var(--ui-ok); }
.ws-row-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.ws-row-pick.cur { border-color: var(--ui-sage-deep); box-shadow: 0 0 0 3px var(--ui-sage-soft); }

/* ---------- Admin (fixed dark: --ui-* re-pointed at --ws-adm-*) ---------- */
.ws-adm {
  --ui-bg: var(--ws-adm-bg); --ui-surface: var(--ws-adm-surface); --ui-surface-2: var(--ws-adm-surface-2); --ui-surface-3: var(--ws-adm-surface-3);
  --ui-line: var(--ws-adm-line); --ui-line-2: var(--ws-adm-line-2);
  --ui-ink: var(--ws-adm-ink); --ui-ink-2: var(--ws-adm-ink-2); --ui-ink-3: var(--ws-adm-ink-3); --ui-ink-4: var(--ws-adm-ink-4);
  --ui-sage: var(--ws-adm-accent); --ui-sage-soft: var(--ws-adm-accent-soft); --ui-sage-tint: var(--ws-adm-accent-muted); --ui-sage-wash: var(--ws-adm-accent-muted); --ui-sage-deep: var(--ws-adm-accent-hi);
  --ui-primary: var(--ws-adm-accent); --ui-on-primary: var(--ws-adm-on-accent);
  --ui-ok: var(--ws-adm-ok); --ui-ok-soft: var(--ws-adm-ok-soft); --ui-warn: var(--ws-adm-warn); --ui-warn-soft: var(--ws-adm-warn-soft);
  --ui-err: var(--ws-adm-err); --ui-err-soft: var(--ws-adm-err-soft); --ui-info: var(--ws-adm-info); --ui-info-soft: var(--ws-adm-info-soft);
  --ui-scrim: var(--ws-adm-scrim); --ui-shadow: var(--ws-adm-shadow); --ui-modal-shadow: var(--ws-adm-modal-shadow);
  --ui-ring: var(--ws-adm-ring); --ui-hilite: var(--ws-adm-hilite);
  background: var(--ws-adm-bg); color: var(--ws-adm-ink); position: relative;
}
.ws-top { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: var(--ws-adm-surface); border-bottom: 1px solid var(--ws-adm-line); font-size: 12px; }
.ws-glyph { width: 22px; height: 22px; border-radius: 6px; background: var(--ws-adm-accent); color: var(--ws-adm-on-accent); display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.ws-top .ws-ws { color: var(--ws-adm-ink-3); padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--ws-adm-line-2); }
.ws-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ws-adm-line-2); color: var(--ws-adm-ink-2); font-size: 11px; font-weight: 550; white-space: nowrap; }
.ws-bell { position: relative; color: var(--ws-adm-ink-3); display: inline-grid; place-items: center; width: 26px; height: 26px; }
.ws-bell b { position: absolute; top: -1px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--ws-adm-err); color: var(--ws-adm-bg); font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.ws-prof { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ws-adm-ink); }
.ws-prof small { display: block; font-size: 9.5px; color: var(--ws-adm-ink-3); line-height: 1.1; }
.ws-av { width: 24px; height: 24px; border-radius: 50%; background: var(--ws-adm-accent-soft); color: var(--ws-adm-accent-hi); display: grid; place-items: center; font-size: 9.5px; font-weight: 600; flex: none; }
.ws-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); min-height: 380px; }
.ws-rail { background: var(--ws-adm-rail); border-right: 1px solid var(--ws-adm-line); padding: 10px 8px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.ws-rgrp { padding: 9px 8px 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ws-adm-ink-4); }
.ws-ri { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--ws-adm-ink-2); white-space: nowrap; }
.ws-ri::before { content: ""; width: 11px; height: 11px; border-radius: 3px; border: 1.4px solid var(--ws-adm-ink-4); flex: none; }
.ws-ri.on { background: var(--ws-adm-accent-muted); color: var(--ws-adm-accent-hi); font-weight: 600; }
.ws-ri.on::before { border-color: var(--ws-adm-accent); }
.ws-ri b { margin-left: auto; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--ws-adm-accent); color: var(--ws-adm-on-accent); font-size: 9px; display: grid; place-items: center; }
.ws-content { padding: 16px 18px 18px; min-width: 0; position: relative; }
.ws-ph { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
.ws-ph-t { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ws-adm-ink); line-height: 1.2; }
.ws-ph-t small { font-size: 12px; font-weight: 500; color: var(--ws-adm-ink-3); margin-left: 6px; letter-spacing: 0; }
.ws-ph-d { font-size: 11.5px; color: var(--ws-adm-ink-3); padding-top: 3px; max-width: 520px; line-height: 1.45; }
.ws-acard { background: var(--ws-adm-surface); border: 1px solid var(--ws-adm-line); border-radius: 10px; min-width: 0; }
.ws-acard-hd { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--ws-adm-line); font-size: 12.5px; font-weight: 600; color: var(--ws-adm-ink); }
.ws-acard-bd { padding: 11px 13px; font-size: 12px; }
.ws-kpi { background: var(--ws-adm-surface); border: 1px solid var(--ws-adm-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ws-kpi-k { font-size: 10.5px; color: var(--ws-adm-ink-3); }
.ws-kpi-v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ws-adm-ink); line-height: 1.2; padding-top: 2px; }
.ws-kpi-s { font-size: 10.5px; color: var(--ws-adm-ink-4); }
.ws-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ws-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ws-g21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.ws-tog { width: 28px; height: 16px; border-radius: 999px; background: var(--ui-line-2); position: relative; flex: none; display: inline-block; }
.ws-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-surface); }
.ws-tog.on { background: var(--ui-primary); }
.ws-tog.on::after { left: 14px; background: var(--ui-on-primary); }
.ws-meter { height: 6px; border-radius: 999px; background: var(--ui-surface-3); overflow: hidden; width: 80px; display: inline-block; vertical-align: middle; }
.ws-meter i { display: block; height: 100%; background: var(--ui-primary); border-radius: 999px; }
.ws-meter.warn i { background: var(--ui-warn); }
.ws-toast { position: absolute; right: 16px; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--ui-surface-3); border: 1px solid var(--ui-line-2); border-left: 3px solid var(--ui-ok); box-shadow: var(--ui-modal-shadow); font-size: 12px; color: var(--ui-ink); max-width: 360px; }
.ws-banner { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 9px; font-size: 11.5px; line-height: 1.45; border: 1px solid var(--ui-line); background: var(--ui-surface-2); color: var(--ui-ink-2); }
.ws-banner.ok { background: var(--ui-ok-soft); border-color: var(--ui-ok-soft); color: var(--ui-ink); }
.ws-banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn-soft); color: var(--ui-ink); }
.ws-banner.info { background: var(--ui-info-soft); border-color: var(--ui-info-soft); color: var(--ui-ink); }
.ws-rowwarn { box-shadow: inset 0 0 0 1.5px var(--ui-warn); border-radius: 6px; }
.ws-sev { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--ui-ink-4); }
.ws-sev.warn { background: var(--ui-warn); } .ws-sev.err { background: var(--ui-err); } .ws-sev.ok { background: var(--ui-ok); } .ws-sev.info { background: var(--ui-info); }
.ws-quote { font-size: 11.5px; color: var(--ui-ink-3); font-style: italic; }
.ws-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--ui-ink-2); background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 6px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---- hub (product figure styles) ---- */
/* Integration Hub figure styles, prefix hb-. The Hub is the light Fiori-style @juvaro/ui skin with a PLUM accent (#7a4a86),
   not the sage front door. .hb re-points the shared --ui-* tokens at the --hb-* tokens below, so the shared .m-* classes
   draw in the Hub's look. Light values are the app's own (hub-theme.css and the @juvaro/ui tokens); the dark values map
   the same roles onto a dark plum-grey for the KB's dark theme. */
:root {
  --hb-bg: #faf9f8;
  --hb-surface: #ffffff;
  --hb-surface-2: #faf9f8;
  --hb-surface-3: #f3f2f1;
  --hb-line: #e1dfdd;
  --hb-line-2: #c8c6c4;
  --hb-ink: #1a2733;
  --hb-ink-2: #323130;
  --hb-ink-3: #5b6b79;
  --hb-ink-4: #8a8886;
  --hb-accent: #7a4a86;
  --hb-accent-hover: #63386e;
  --hb-accent-muted: #f4eef6;
  --hb-accent-soft: #e6d7ea;
  --hb-on-accent: #ffffff;
  --hb-row-hover: #f3f9fd;
  --hb-ok: #107e3e;
  --hb-ok-soft: #dff6dd;
  --hb-warn: #b25b00;
  --hb-warn-soft: #fff4ce;
  --hb-err: #a4262c;
  --hb-err-soft: #fde7e9;
  --hb-info: #0f6cbd;
  --hb-info-soft: #e6f2fb;
  --hb-av-1: #9a68a6;
  --hb-av-2: #63386e;
  --hb-scrim: rgba(26, 39, 51, 0.36);
  --hb-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --hb-modal-shadow: 0 16px 44px rgba(26, 39, 51, 0.22);
  --hb-ring: rgba(122, 74, 134, 0.35);
  --hb-hilite: rgba(122, 74, 134, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hb-bg: #17141a;
    --hb-surface: #1f1b22;
    --hb-surface-2: #241f28;
    --hb-surface-3: #2c2630;
    --hb-line: #3a333e;
    --hb-line-2: #4a4250;
    --hb-ink: #ece6ef;
    --hb-ink-2: #d8d0dc;
    --hb-ink-3: #ab9fb2;
    --hb-ink-4: #877c8d;
    --hb-accent: #c79bd3;
    --hb-accent-hover: #d8b6e1;
    --hb-accent-muted: #33263a;
    --hb-accent-soft: #4a3653;
    --hb-on-accent: #1b1220;
    --hb-row-hover: #262130;
    --hb-ok: #6cc48c;
    --hb-ok-soft: #1c3324;
    --hb-warn: #e8a35a;
    --hb-warn-soft: #3a2b16;
    --hb-err: #ec8a90;
    --hb-err-soft: #3d1f23;
    --hb-info: #6cb0ea;
    --hb-info-soft: #1a2b3b;
    --hb-av-1: #b88ac4;
    --hb-av-2: #7a4a86;
    --hb-scrim: rgba(0, 0, 0, 0.55);
    --hb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hb-modal-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
    --hb-ring: rgba(199, 155, 211, 0.4);
    --hb-hilite: rgba(199, 155, 211, 0.14);
  }
}
:root[data-theme="dark"] {
  --hb-bg: #17141a;
  --hb-surface: #1f1b22;
  --hb-surface-2: #241f28;
  --hb-surface-3: #2c2630;
  --hb-line: #3a333e;
  --hb-line-2: #4a4250;
  --hb-ink: #ece6ef;
  --hb-ink-2: #d8d0dc;
  --hb-ink-3: #ab9fb2;
  --hb-ink-4: #877c8d;
  --hb-accent: #c79bd3;
  --hb-accent-hover: #d8b6e1;
  --hb-accent-muted: #33263a;
  --hb-accent-soft: #4a3653;
  --hb-on-accent: #1b1220;
  --hb-row-hover: #262130;
  --hb-ok: #6cc48c;
  --hb-ok-soft: #1c3324;
  --hb-warn: #e8a35a;
  --hb-warn-soft: #3a2b16;
  --hb-err: #ec8a90;
  --hb-err-soft: #3d1f23;
  --hb-info: #6cb0ea;
  --hb-info-soft: #1a2b3b;
  --hb-av-1: #b88ac4;
  --hb-av-2: #7a4a86;
  --hb-scrim: rgba(0, 0, 0, 0.55);
  --hb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --hb-modal-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  --hb-ring: rgba(199, 155, 211, 0.4);
  --hb-hilite: rgba(199, 155, 211, 0.14);
}

.hb {
  --ui-bg: var(--hb-bg); --ui-surface: var(--hb-surface); --ui-surface-2: var(--hb-surface-2); --ui-surface-3: var(--hb-surface-3);
  --ui-line: var(--hb-line); --ui-line-2: var(--hb-line-2);
  --ui-ink: var(--hb-ink); --ui-ink-2: var(--hb-ink-2); --ui-ink-3: var(--hb-ink-3); --ui-ink-4: var(--hb-ink-4);
  --ui-sage: var(--hb-accent); --ui-sage-soft: var(--hb-accent-soft); --ui-sage-tint: var(--hb-accent-muted); --ui-sage-wash: var(--hb-accent-muted); --ui-sage-deep: var(--hb-accent);
  --ui-primary: var(--hb-accent); --ui-on-primary: var(--hb-on-accent);
  --ui-ok: var(--hb-ok); --ui-ok-soft: var(--hb-ok-soft); --ui-warn: var(--hb-warn); --ui-warn-soft: var(--hb-warn-soft);
  --ui-err: var(--hb-err); --ui-err-soft: var(--hb-err-soft); --ui-info: var(--hb-info); --ui-info-soft: var(--hb-info-soft);
  --ui-scrim: var(--hb-scrim); --ui-shadow: var(--hb-shadow); --ui-modal-shadow: var(--hb-modal-shadow);
  --ui-ring: var(--hb-ring); --ui-hilite: var(--hb-hilite);
  background: var(--hb-bg); color: var(--hb-ink); position: relative;
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", var(--font-sans);
}
.hb .m-btn { border-radius: 5px; font-weight: 600; }
.hb .m-input { border-radius: 4px; }
.hb .m-modal { border-radius: 16px; }
.hb .m-badge { border-radius: 4px; }
.hb-top { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); font-size: 12.5px; }
.hb-glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--hb-accent); color: var(--hb-on-accent); display: grid; place-items: center; flex: none; }
.hb-glyph svg { width: 16px; height: 16px; }
.hb-top b { font-weight: 600; color: var(--hb-ink); }
.hb-top .hb-ws { color: var(--hb-ink-3); padding-left: 10px; border-left: 1px solid var(--hb-line); }
.hb-acct { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 3px; border-radius: 999px; border: 1px solid var(--hb-line); font-size: 12px; color: var(--hb-ink); }
.hb-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--hb-av-1), var(--hb-av-2)); color: var(--hb-on-accent); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex: none; }
.hb-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 400px; }
.hb-rail { background: var(--hb-surface); border-right: 1px solid var(--hb-line); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.hb-ri { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 5px; color: var(--hb-ink-2); }
.hb-ri svg { color: var(--hb-ink-3); }
.hb-ri.on { background: var(--hb-accent-muted); color: var(--hb-accent); font-weight: 600; }
.hb-ri.on svg { color: var(--hb-accent); }
.hb-ri.on::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--hb-accent); }
.hb-content { padding: 16px 18px 18px; min-width: 0; position: relative; }
.hb-ph { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; }
.hb-ph-t { font-size: 20px; font-weight: 600; color: var(--hb-ink); letter-spacing: -0.01em; line-height: 1.2; }
.hb-ph-t small { font-size: 12px; font-weight: 400; color: var(--hb-ink-3); margin-left: 8px; }
.hb-ph-d { font-size: 12px; color: var(--hb-ink-3); padding-top: 3px; line-height: 1.45; }
.hb-ro { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 5px; background: var(--hb-info-soft); color: var(--hb-ink); font-size: 11.5px; border-left: 3px solid var(--hb-info); }
.hb-card { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; min-width: 0; box-shadow: var(--hb-shadow); }
.hb-card-hd { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--hb-line); font-size: 12.5px; font-weight: 600; color: var(--hb-ink); }
.hb-card-bd { padding: 11px 13px; font-size: 12px; }
.hb-kpi { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.hb-kpi-k { font-size: 10.5px; color: var(--hb-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.hb-kpi-v { font-size: 21px; font-weight: 600; color: var(--hb-ink); line-height: 1.25; padding-top: 2px; }
.hb-kpi-s { font-size: 10.5px; color: var(--hb-ink-4); }
.hb-g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.hb-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.hb-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hb-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hb-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: var(--hb-err-soft); border: 1px solid var(--hb-err-soft); color: var(--hb-ink); font-size: 12px; }
.hb-strip b { color: var(--hb-err); }
.hb-cg { width: 30px; height: 30px; border-radius: 7px; background: var(--hb-accent-muted); color: var(--hb-accent); display: grid; place-items: center; flex: none; }
.hb-cg svg { width: 16px; height: 16px; }
.hb-cg.sm { width: 24px; height: 24px; border-radius: 6px; }
.hb-cg.sm svg { width: 13px; height: 13px; }
.hb-cg.soon { background: var(--hb-surface-3); color: var(--hb-ink-4); }
.hb-mcard { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hb-mcard.soon { opacity: 0.6; }
.hb-desc { font-size: 11.5px; color: var(--hb-ink-3); line-height: 1.45; }
.hb-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hb-line); background: var(--hb-surface); font-size: 11.5px; color: var(--hb-ink-2); white-space: nowrap; }
.hb-pill.on { background: var(--hb-accent); border-color: var(--hb-accent); color: var(--hb-on-accent); font-weight: 600; }
.hb-wchip { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 4px; background: var(--hb-surface-3); color: var(--hb-ink-2); font-size: 10.5px; }
.hb-ticks { display: inline-flex; gap: 2px; align-items: center; }
.hb-ticks i { width: 4px; height: 12px; border-radius: 1px; background: var(--hb-ok); display: block; }
.hb-ticks i.f { background: var(--hb-err); }
.hb-group { padding: 6px 7px; background: var(--hb-surface-3); font-size: 10.5px; font-weight: 600; color: var(--hb-ink-3); grid-column: 1 / -1; }
.hb-tog { width: 30px; height: 16px; border-radius: 999px; background: var(--hb-line-2); position: relative; flex: none; display: inline-block; }
.hb-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--hb-surface); }
.hb-tog.on { background: var(--hb-accent); }
.hb-tog.on::after { left: 16px; background: var(--hb-on-accent); }
/* Editor sheet */
.hb-sheet { background: var(--hb-surface); min-height: 100%; display: flex; flex-direction: column; }
.hb-sheet-hd { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--hb-line); }
.hb-sheet-t { font-size: 16px; font-weight: 600; color: var(--hb-ink); }
.hb-sheet-bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; padding: 14px 18px; }
.hb-sheet-bd.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.hb-sheet-ft { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--hb-line); margin-top: auto; }
.hb-sec { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hb-ink-3); padding-bottom: 7px; border-bottom: 1px solid var(--hb-line); }
.hb-fld { display: flex; flex-direction: column; gap: 4px; }
.hb-fld > .l { font-size: 11px; font-weight: 600; color: var(--hb-ink-2); }
.hb-fld > .h { font-size: 10.5px; color: var(--hb-ink-3); line-height: 1.4; }
.hb-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 6px; font-size: 11px; line-height: 1.45; color: var(--hb-ink); }
.hb-note b { display: block; font-size: 11.5px; }
.hb-note.warn { background: var(--hb-warn-soft); border-left: 3px solid var(--hb-warn); }
.hb-note.info { background: var(--hb-info-soft); border-left: 3px solid var(--hb-info); }
.hb-note.ok { background: var(--hb-ok-soft); border-left: 3px solid var(--hb-ok); }
.hb-note.err { background: var(--hb-err-soft); border-left: 3px solid var(--hb-err); }
.hb-seg { display: inline-flex; border: 1px solid var(--hb-line-2); border-radius: 5px; overflow: hidden; }
.hb-seg > span { padding: 4px 10px; font-size: 11.5px; color: var(--hb-ink-2); border-right: 1px solid var(--hb-line-2); white-space: nowrap; }
.hb-seg > span:last-child { border-right: 0; }
.hb-seg > span.on { background: var(--hb-accent-muted); color: var(--hb-accent); font-weight: 600; }
.hb-code { font-family: "IBM Plex Mono", var(--font-mono); font-size: 10.5px; color: var(--hb-ink-2); background: var(--hb-surface-3); border-radius: 4px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hb-toast { position: absolute; right: 16px; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 6px; background: var(--hb-ink); color: var(--hb-surface); box-shadow: var(--hb-modal-shadow); font-size: 12px; max-width: 380px; }
.hb-crumb { font-size: 12px; color: var(--hb-ink-3); }
.hb-crumb b { color: var(--hb-ink); font-weight: 600; }
.hb-chip { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 4px; background: var(--hb-surface-3); color: var(--hb-ink-2); font-size: 11px; white-space: nowrap; }
.hb-chip.ok { background: var(--hb-ok-soft); color: var(--hb-ok); }
.hb-chip.warn { background: var(--hb-warn-soft); color: var(--hb-warn); }
.hb-chip.err { background: var(--hb-err-soft); color: var(--hb-err); }
.hb-chip.mute { background: var(--hb-surface-3); color: var(--hb-ink-3); }
.hb-chip.plum { background: var(--hb-accent-muted); color: var(--hb-accent); }
/* Overview flow map */
.hb-map { position: relative; height: 380px; }
.hb-map svg.hb-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-edge { fill: none; stroke: var(--hb-line-2); stroke-width: 1.6; }
.hb-edge.in { stroke: var(--hb-accent); }
.hb-edge.out { stroke: var(--hb-info); stroke-dasharray: 0; }
.hb-edge.plat { stroke: var(--hb-ink-4); stroke-dasharray: 4 4; }
.hb-node { position: absolute; width: 196px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; box-shadow: var(--hb-shadow); }
.hb-node b { display: block; font-size: 12px; color: var(--hb-ink); }
.hb-node small { display: block; font-size: 10.5px; color: var(--hb-ink-3); line-height: 1.3; }
.hb-mono { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--hb-surface-3); color: var(--hb-ink-2); flex: none; }
.hb-core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hb-av-1), var(--hb-accent-hover)); color: var(--hb-on-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; box-shadow: 0 0 0 10px var(--hb-accent-muted); }
.hb-core b { font-size: 13px; }
.hb-core small { font-size: 10px; opacity: 0.9; padding: 0 12px; }
.hb-legend { display: flex; gap: 16px; font-size: 11px; color: var(--hb-ink-3); align-items: center; }
.hb-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--hb-accent); vertical-align: middle; margin-right: 5px; }
.hb-legend i.out { border-top-color: var(--hb-info); }
.hb-legend i.plat { border-top: 2px dashed var(--hb-ink-4); }
.hb-firing { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px; background: var(--hb-err); color: var(--hb-surface); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; }

/* ---- figure style attributes, as classes (tools/build.py StyleClasses) ---- */
:where(.s-002a9917){padding:4px 0!important;border-top:1px solid var(--ui-line)!important}
:where(.s-00430195){border:1px dashed var(--ui-line-2)!important;border-radius:10px!important;padding:9px 11px!important}
:where(.s-00a7a0b0){width:60%%!important}
:where(.s-00a9a83d){padding:6px 0!important}
:where(.s-00fbebc4){display:grid!important;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)!important;gap:16px!important}
:where(.s-0146349b){max-width:480px!important}
:where(.s-01676077){font-size:9.5px!important;color:var(--ui-sage-deep)!important}
:where(.s-016af9a1){gap:8px!important;margin-bottom:12px!important}
:where(.s-01782b48){height:auto!important;min-height:300px!important}
:where(.s-017a6516){padding:3px 8px!important;border-radius:4px!important;background:var(--hb-accent-muted)!important;font-weight:600!important}
:where(.s-019eb39a){display:flex!important;align-items:center!important;gap:5px!important;margin-top:4px!important}
:where(.s-0203ba20){position:absolute!important;left:24px!important;bottom:18px!important;z-index:14!important;max-width:420px!important}
:where(.s-02a5bcac){gap:6px!important;margin-top:3px!important}
:where(.s-02af1c70){grid-template-columns:1.2fr 1.2fr 0.7fr 0.9fr 0.8fr 1.6fr 0.9fr!important}
:where(.s-02bc897e){width:150px!important;flex:none!important}
:where(.s-02c56f92){border-top:2px solid var(--ui-sage-soft)!important;margin-top:0!important}
:where(.s-03148ac1){gap:5px!important;margin-bottom:9px!important}
:where(.s-032e46ca){display:flex!important;gap:10px!important;align-items:center!important;padding:7px 0!important;border-bottom:1px solid var(--hc-line)!important}
:where(.s-034540a0){grid-template-columns:1.7fr 0.9fr 0.8fr 1.3fr 1.15fr 1.1fr 0.35fr!important}
:where(.s-03aba8ff){margin-left:auto!important;display:flex!important}
:where(.s-03b0f4e0){display:flex!important;align-items:center!important;gap:12px!important}
:where(.s-04675ee1){gap:3px!important}
:where(.s-04c8d808){padding:10px 14px 0!important}
:where(.s-04fac48d){width:100px!important;height:25px!important}
:where(.s-0594bb6d){grid-template-columns:40px minmax(0,1fr) 108px 142px 76px 104px 76px 84px 72px 66px 62px!important}
:where(.s-05a3f1a7){width:120px!important;height:24px!important;flex:none!important}
:where(.s-06079177){height:21px!important;font-size:10.5px!important}
:where(.s-0647b01d){grid-template-columns:2fr 1fr!important}
:where(.s-0699a634){padding:0 12px!important;height:50px!important}
:where(.s-06fc253c){padding:8px 0!important;border-bottom:1px solid var(--ui-line)!important;gap:12px!important}
:where(.s-07f83412){font-size:12.5px!important;opacity:.9!important;max-width:240px!important}
:where(.s-08a490ac){padding:7px 9px!important}
:where(.s-08ee5d23){position:relative!important;min-height:860px!important}
:where(.s-0962751c){grid-template-columns:minmax(0,1.7fr) 0.6fr 0.6fr 0.9fr 0.9fr 0.8fr!important}
:where(.s-0981e697){padding:2px!important}
:where(.s-09d63304){min-width:0!important;flex:1 1 200px!important}
:where(.s-0a07d96d){left:650px!important;top:12px!important}
:where(.s-0a8fe9fc){grid-column:3 / 4!important}
:where(.s-0ae5efdd){grid-template-columns:minmax(0,1fr) 62px 62px 62px 62px 62px 76px 68px 78px 68px 84px 96px!important}
:where(.s-0b60d5ab){grid-template-columns:150px minmax(0,1fr)!important}
:where(.s-0b797e87){gap:7px!important}
:where(.s-0c45bba9){position:relative!important;min-height:600px!important}
:where(.s-0c5de1d0){min-height:800px!important}
:where(.s-0c6a0939){position:absolute!important;left:56.1%!important;top:4px!important;white-space:nowrap!important;transform:translateX(-50%)!important}
:where(.s-0c785522){gap:8px!important;padding:10px 12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-0c859fc4){width:29%!important}
:where(.s-0cbbdb59){grid-template-columns:1.9fr 0.8fr 0.5fr 1.3fr 1.1fr 0.6fr!important}
:where(.s-0d248ae7){margin-bottom:4px!important}
:where(.s-0d2f5934){right:10px!important;top:300px!important}
:where(.s-0d6046ee){gap:5px!important}
:where(.s-0d6127f2){width:440px!important;text-align:center!important}
:where(.s-0d7a7a08){color:var(--ui-warn)!important;font-weight:600!important}
:where(.s-0dca9051){grid-column:5!important}
:where(.s-0dd317b5){grid-template-columns:1.1fr 0.9fr 0.6fr 2.6fr!important}
:where(.s-0e8d6450){gap:12px!important;padding:12px 14px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-0ee7f66a){margin-top:12px!important}
:where(.s-0f234c03){margin:0 6px!important}
:where(.s-0fc195ac){grid-template-columns:1.25fr 0.65fr 0.95fr 1.25fr 0.9fr 1.15fr!important}
:where(.s-101bfa17){max-width:220px!important}
:where(.s-1030953d){margin-bottom:12px!important;border-color:var(--fs-amber)!important}
:where(.s-107b8df3){position:relative!important;min-height:500px!important}
:where(.s-10dd21a9){margin-top:12px!important;border-style:dashed!important;box-shadow:none!important}
:where(.s-10f8a7ec){width:28px!important;text-align:right!important}
:where(.s-110c1427){justify-content:flex-end!important}
:where(.s-1142639f){left:10px!important;top:30px!important}
:where(.s-1149cd81){display:inline-flex!important;gap:8px!important;align-items:center!important}
:where(.s-1149d215){background:var(--ui-surface)!important}
:where(.s-115b004f){font-weight:500!important}
:where(.s-11d8ba3e){width:860px!important}
:where(.s-1211f8fa){width:56px!important;height:24px!important;justify-content:flex-end!important;font-family:var(--font-mono)!important}
:where(.s-1223c150){gap:4px!important;margin-top:7px!important}
:where(.s-127ec18a){margin-bottom:12px!important;gap:14px!important}
:where(.s-127fd7fd){min-height:30px!important}
:where(.s-12aaa32d){color:var(--ui-st-maint)!important}
:where(.s-12abba4f){min-width:170px!important}
:where(.s-12f7b82e){width:80%!important}
:where(.s-13042e7a){margin:3px 0 0 38px!important}
:where(.s-131d964d){position:relative!important;min-height:330px!important}
:where(.s-13dcb35d){gap:22px!important;margin-top:4px!important}
:where(.s-13dce855){width:32%!important}
:where(.s-13f07bb0){min-height:420px!important}
:where(.s-1405d90d){font-size:20px!important;font-weight:600!important}
:where(.s-1473ae7d){display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:12px!important}
:where(.s-1491cf00){width:38px!important;height:38px!important;font-size:13px!important}
:where(.s-14c4ab6c){padding:12px!important}
:where(.s-157107dd){padding:7px 0 0!important}
:where(.s-15967002){max-width:560px!important}
:where(.s-15984de7){font-size:21px!important;font-weight:600!important;letter-spacing:-.015em!important}
:where(.s-1665a1ad){padding:5px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-16bbd203){height:24px!important;font-size:11px!important}
:where(.s-172d7f49){left:46%!important;top:158px!important;width:220px!important}
:where(.s-17b81d1b){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;align-items:start!important}
:where(.s-17d11b88){grid-template-columns:2fr 0.8fr 0.8fr 1.5fr 2fr!important}
:where(.s-180d1d5c){align-items:center!important;padding:26px!important}
:where(.s-181b2c1b){display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
:where(.s-184854e9){background:var(--ui-ok)!important}
:where(.s-18abe42f){position:relative!important;min-height:640px!important}
:where(.s-18d202f9){width:220px!important;height:30px!important}
:where(.s-19830f56){border:1px solid var(--ui-sage)!important;border-radius:9px!important;background:var(--ui-surface)!important;margin-bottom:6px!important}
:where(.s-19befec6){width:35%!important;margin-top:8px!important}
:where(.s-19de5191){padding:22px 16px!important;background:var(--ui-scrim)!important}
:where(.s-1a260dd7){padding:4px 8px!important;border-radius:4px!important;background:var(--hb-accent-muted)!important;font-weight:600!important}
:where(.s-1a29ae61){letter-spacing:0.2em!important}
:where(.s-1b18b2a3){width:34px!important;height:34px!important;border-radius:6px!important;display:grid!important;place-items:center!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface-2)!important;color:var(--ui-ink-4)!important}
:where(.s-1b89f72b){position:absolute!important;left:20px!important;right:20px!important;top:14px!important;z-index:5!important}
:where(.s-1ba51881){width:70px!important}
:where(.s-1bba1f2b){grid-template-columns:minmax(0,1.5fr) minmax(0,0.9fr) minmax(0,2fr) minmax(0,0.5fr)!important}
:where(.s-1cab5b95){display:flex!important;gap:8px!important;align-items:center!important;margin-bottom:8px!important}
:where(.s-1cc0b6a1){text-transform:none!important;letter-spacing:0!important;font-family:var(--font-sans)!important;font-size:9.5px!important}
:where(.s-1d0c3eb9){margin-top:7px!important;color:var(--ui-sage-deep)!important}
:where(.s-1d173e85){width:250px!important;height:28px!important}
:where(.s-1d1a6529){text-align:center!important;white-space:normal!important}
:where(.s-1d890abe){padding:16px!important;min-height:330px!important}
:where(.s-1dac370f){line-height:1.5!important}
:where(.s-1de0ed13){padding:8px 12px!important;border-top:1px solid var(--ui-line)!important}
:where(.s-1ef1d2ac){height:28px!important}
:where(.s-1ef3a750){font-size:16px!important;font-weight:600!important}
:where(.s-1f2d2ac9){padding:3px 8px!important;border-radius:4px!important}
:where(.s-1f3288f0){margin-top:10px!important;padding-top:8px!important;border-top:1px solid var(--ui-line)!important}
:where(.s-1f9d2e9d){width:280px!important}
:where(.s-1fc42ba5){left:150px!important;top:12px!important}
:where(.s-1fd96cf7){min-height:28px!important;background:var(--ui-surface-2)!important}
:where(.s-200dd793){display:block!important;font-size:9.5px!important}
:where(.s-20aa6a4e){grid-template-columns:0.9fr 1.8fr 0.8fr 0.6fr!important}
:where(.s-20e1e3dd){border-top:1px solid var(--ui-line)!important;margin-top:10px!important;padding-top:10px!important;position:relative!important}
:where(.s-21318f66){width:120px!important;height:26px!important}
:where(.s-218bbdb7){padding:8px 0!important;border-bottom:1px solid var(--ui-line)!important;margin-top:6px!important}
:where(.s-21a5e553){left:10px!important;top:120px!important}
:where(.s-21a9e598){gap:10px!important;padding:10px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-21e16a68){grid-template-columns:0.5fr 1.4fr 1.5fr 1.2fr 0.9fr 0.8fr 0.8fr!important}
:where(.s-226444d3){font-size:14px!important}
:where(.s-2292c689){width:16px!important;text-align:center!important}
:where(.s-22a08c80){min-width:0!important}
:where(.s-22a5a650){line-height:1.45!important}
:where(.s-2328e3f9){left:10px!important;top:210px!important}
:where(.s-23db8d7d){border-radius:0!important;border-width:0 0 1px 0!important}
:where(.s-2439121d){width:33.333333333333336%!important}
:where(.s-2451edee){flex-direction:column!important;gap:3px!important;padding:8px 10px!important}
:where(.s-246f5e00){grid-template-columns:1fr 1.6fr 0.9fr 0.9fr 0.9fr!important}
:where(.s-24ad6ef1){padding:5px 0!important;border-bottom:1px dashed var(--ui-line)!important}
:where(.s-250abb17){height:25px!important;border-color:var(--ui-warn)!important}
:where(.s-264ee3dc){padding:12px 14px!important;border-top:1px solid var(--ui-line)!important}
:where(.s-2713cf65){font-size:9.5px!important;white-space:nowrap!important}
:where(.s-2763e92c){display:flex!important;gap:10px!important;align-items:flex-end!important;margin-bottom:10px!important}
:where(.s-279f7de0){grid-template-columns:minmax(0,2.4fr) minmax(0,0.6fr) minmax(0,0.6fr) minmax(0,1fr)!important}
:where(.s-281e647a){margin-top:14px!important;overflow:hidden!important}
:where(.s-28637295){flex:1!important;min-width:0!important}
:where(.s-286ec631){width:76px!important;text-align:right!important;color:var(--ui-ink-3)!important}
:where(.s-28eaf188){left:420px!important;top:64px!important}
:where(.s-28fe69c9){display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
:where(.s-291212ed){width:200px!important;height:26px!important;background:var(--ui-surface-2)!important}
:where(.s-2963e4f2){width:21%!important}
:where(.s-296bcccd){padding:8px 10px 4px!important}
:where(.s-296d727a){max-width:640px!important}
:where(.s-297096a4){gap:10px!important}
:where(.s-29801ba8){font-size:12.5px!important;line-height:1.45!important;max-width:230px!important}
:where(.s-29addf97){padding:8px 2px!important;border-top:1px solid var(--ui-line)!important}
:where(.s-29bc82be){width:30px!important;height:30px!important;border-radius:8px!important;display:grid!important;place-items:center!important;background:var(--ui-surface-3)!important;color:var(--ui-ink-3)!important;margin-bottom:10px!important}
:where(.s-29e36099){margin-top:28px!important}
:where(.s-29fb1110){padding-top:8px!important}
:where(.s-2a9495ec){position:relative!important}
:where(.s-2ab00e1c){grid-template-columns:1.8fr 0.6fr 1fr 0.85fr 0.9fr 0.9fr 0.9fr!important}
:where(.s-2ad52ba8){gap:0!important}
:where(.s-2af78458){background:var(--ui-surface-2)!important}
:where(.s-2affa822){grid-template-columns:1.9fr 0.7fr 0.7fr 0.7fr 0.7fr 0.9fr 0.9fr 1fr 0.8fr!important}
:where(.s-2b013fa0){min-height:50px!important}
:where(.s-2b2307ac){padding:6px 10px!important;border-radius:6px!important;background:var(--ui-sage-wash)!important;font-weight:600!important}
:where(.s-2b4cfad2){gap:6px!important;margin-top:7px!important}
:where(.s-2baf411c){color:var(--ui-time)!important}
:where(.s-2bd7d7c8){width:21.333333333333332%!important}
:where(.s-2c3347df){left:57.1%!important}
:where(.s-2c4e8945){padding:2px 16px!important}
:where(.s-2ce8086f){position:relative!important;min-height:400px!important}
:where(.s-2cf3a13e){min-height:34px!important}
:where(.s-2dc0e1f5){left:376px!important;top:110px!important}
:where(.s-2e6790b0){gap:5px!important;justify-content:flex-end!important}
:where(.s-2e8c9929){color:var(--ui-sage-deep)!important;margin-right:10px!important}
:where(.s-2ed8beaf){margin-top:5px!important}
:where(.s-2ef78abe){display:grid!important;grid-template-columns:1.25fr 1fr!important;gap:12px!important;margin-top:12px!important}
:where(.s-2f0acfdf){border-top:1px solid var(--ui-line)!important;margin-top:10px!important;padding-top:10px!important}
:where(.s-2f0b0e4b){width:460px!important}
:where(.s-2f174e43){width:33%!important}
:where(.s-2f5fdf1a){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,0.55fr) minmax(0,1.6fr) minmax(0,0.95fr) minmax(0,1.05fr) minmax(0,1.05fr)!important}
:where(.s-2f74ae6c){width:37%!important}
:where(.s-2fafd39d){grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr 0.6fr 0.7fr!important}
:where(.s-2fc3492b){width:40px!important;height:40px!important;font-size:13px!important}
:where(.s-2fea38ce){padding:6px 6px!important;margin:2px -6px!important}
:where(.s-301647f5){margin-top:6px!important}
:where(.s-307fbbf6){margin-top:8px!important;width:100%!important}
:where(.s-30983bdd){grid-template-columns:1fr 1fr!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-30a1c991){font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase!important;opacity:.8!important}
:where(.s-31a82559){border-color:var(--ui-sage-deep)!important;box-shadow:0 0 0 3px var(--ui-sage-soft)!important}
:where(.s-320afbe7){padding:9px 10px!important}
:where(.s-326307d0){text-align:center!important;padding:60px 20px!important}
:where(.s-32cbb91c){width:14%!important}
:where(.s-32d5e68a){gap:10px!important;padding:3px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-3323ec10){margin:10px 12px!important}
:where(.s-339a16c2){margin-bottom:9px!important}
:where(.s-33cc30c1){min-height:46px!important}
:where(.s-33ee2981){font-size:11px!important}
:where(.s-3461f612){position:absolute!important;left:56.1%!important;top:0!important;bottom:0!important;border-left:2px solid var(--hc-err)!important}
:where(.s-34841856){gap:6px!important;padding-top:10px!important}
:where(.s-34af08d0){max-width:820px!important}
:where(.s-35741841){padding:6px 10px!important;border-radius:7px!important;font-size:12px!important;color:var(--ui-ink-2)!important}
:where(.s-35a170bf){color:var(--ui-err)!important;font-weight:600!important}
:where(.s-35c38185){font-size:11.5px!important;font-weight:400!important}
:where(.s-35c92b1c){grid-template-columns:58px minmax(0,1.3fr) 72px minmax(0,1.25fr) 120px!important}
:where(.s-35eaa00b){width:34px!important;height:24px!important}
:where(.s-35eecf3e){padding:0!important}
:where(.s-364799f2){border:1px solid var(--ui-sage)!important;border-radius:10px!important;padding:9px 11px!important;background:var(--ui-surface)!important}
:where(.s-3699712c){min-height:58px!important}
:where(.s-36a2b1b2){font-size:12px!important;color:var(--ui-ink-2)!important}
:where(.s-36a399df){width:110px!important;flex:none!important}
:where(.s-37711516){padding:7px 8px!important;border-radius:8px!important;background:var(--ui-sage-wash)!important;border:1px solid var(--ui-sage-soft)!important}
:where(.s-37b08599){grid-column:8!important}
:where(.s-386ba132){padding:8px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-386c1b61){white-space:normal!important}
:where(.s-39030dbe){gap:0 18px!important}
:where(.s-3922710e){width:44%!important}
:where(.s-392f09c1){gap:5px!important;white-space:nowrap!important}
:where(.s-39572099){position:relative!important;height:300px!important;overflow:hidden!important}
:where(.s-39c68df3){display:flex!important;gap:8px!important;align-items:center!important}
:where(.s-3a2407e6){grid-template-columns:2.2fr 1.1fr 1.5fr 0.8fr 0.8fr 1fr!important}
:where(.s-3a338f8a){font-weight:500!important;min-width:130px!important;text-align:center!important}
:where(.s-3a800765){background:var(--ui-surface-3)!important;color:var(--ui-ink-2)!important;border-color:var(--ui-line)!important}
:where(.s-3b005e0d){gap:14px!important;padding:8px 14px!important;border-top:1px solid var(--ui-line)!important;background:var(--ui-surface-2)!important}
:where(.s-3b0d88ae){padding:16px!important}
:where(.s-3b4a6452){font-size:19px!important}
:where(.s-3b964e0e){gap:10px!important;padding:9px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-3baff368){gap:10px!important;padding:7px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-3c1d8aa5){border:1px solid var(--ui-line)!important;border-radius:10px!important;padding:9px 11px!important;background:var(--ui-surface)!important}
:where(.s-3c37da1c){line-height:1.4!important;margin-bottom:8px!important}
:where(.s-3c422298){display:block!important;padding-left:15px!important;margin-top:2px!important}
:where(.s-3c73c7b7){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 18px!important}
:where(.s-3cab7ef2){width:200px!important}
:where(.s-3d09288f){gap:8px!important;align-items:flex-end!important;margin-top:6px!important}
:where(.s-3d1e8527){width:28px!important;height:28px!important}
:where(.s-3d494aad){margin-top:3px!important}
:where(.s-3d4e3018){grid-template-columns:30px 0.9fr 1.1fr 1.9fr 0.8fr 0.9fr 1.5fr 0.5fr!important}
:where(.s-3d92a80a){gap:5px!important;margin-top:2px!important}
:where(.s-3db25b6b){min-width:0!important;flex:1 1 150px!important}
:where(.s-3e99314f){gap:6px!important;margin-bottom:4px!important}
:where(.s-3ef736ed){padding:7px 0!important;border-top:1px solid var(--ui-line)!important}
:where(.s-3f0497fe){gap:6px!important}
:where(.s-3f131cbc){right:14px!important;top:48px!important}
:where(.s-3f3e63b1){width:250px!important;flex:none!important;gap:12px!important}
:where(.s-3f6a608b){padding-left:6px!important;white-space:nowrap!important}
:where(.s-403146b4){min-height:600px!important}
:where(.s-4086cc65){gap:8px!important;padding:5px 0!important}
:where(.s-41149aaf){align-items:start!important}
:where(.s-413bfc16){margin-top:6px!important;color:var(--ui-ink-2)!important}
:where(.s-41445441){height:20px!important;font-size:10.5px!important}
:where(.s-41a71052){min-height:40px!important;background:var(--ui-surface-2)!important}
:where(.s-4224a89e){margin-top:12px!important;display:flex!important;gap:10px!important;align-items:center!important}
:where(.s-423c764e){left:38%!important;top:178px!important;width:200px!important;padding:5px!important}
:where(.s-42a6ced8){margin-bottom:14px!important}
:where(.s-42d36796){font-size:26px!important}
:where(.s-42dfbccf){overflow:hidden!important;margin-bottom:10px!important}
:where(.s-4342f30e){padding-left:0px!important}
:where(.s-437e3094){box-shadow:var(--ui-modal-shadow)!important}
:where(.s-43a97fe4){margin-top:8px!important}
:where(.s-43e80f9e){gap:7px!important;padding-left:36px!important}
:where(.s-44281e37){color:var(--ui-ink-2)!important}
:where(.s-44d629a5){padding:5px 8px!important;border-radius:4px!important;background:var(--hb-accent-muted)!important}
:where(.s-44e56955){grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr)!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-451fab0a){gap:8px!important;padding:4px 0!important}
:where(.s-453be8fe){padding:14px 18px!important}
:where(.s-45c782f0){gap:9px!important;border-top:1px solid var(--ui-line)!important;padding:10px 11px!important}
:where(.s-4641e5fe){width:720px!important}
:where(.s-466e8ab5){right:16px!important;top:56px!important}
:where(.s-46acf530){gap:7px!important;padding-left:54px!important}
:where(.s-46ddb045){width:1000px!important}
:where(.s-47a5dde1){padding:12px 16px!important}
:where(.s-483f2ccc){min-height:80px!important;justify-content:center!important;display:flex!important}
:where(.s-485fc5be){padding:5px 8px!important}
:where(.s-4863b8cf){align-items:stretch!important}
:where(.s-48897e8c){grid-template-columns:0.8fr 1.8fr 0.8fr 0.7fr!important}
:where(.s-489527a1){width:56px!important;flex:none!important}
:where(.s-48ae7abd){width:1020px!important}
:where(.s-491198dd){gap:8px!important}
:where(.s-4952ee85){width:128px!important;flex:none!important}
:where(.s-49b206d1){margin:3px 0 8px!important}
:where(.s-49f73736){grid-template-columns:repeat(3,minmax(0,1fr))!important}
:where(.s-4a0b6365){align-items:center!important}
:where(.s-4a312b68){width:85%!important}
:where(.s-4a453d3b){left:470px!important;top:30px!important}
:where(.s-4a5d80ee){width:67.5%!important}
:where(.s-4a77369d){gap:8px!important;margin-bottom:6px!important}
:where(.s-4ac05c88){grid-template-columns:1.4fr 0.6fr 0.8fr 0.9fr 1.4fr 0.7fr 1fr!important}
:where(.s-4ae96027){width:30%!important;height:14px!important}
:where(.s-4b657e5f){gap:11px!important;margin-bottom:10px!important}
:where(.s-4b6a4d95){font-style:italic!important;margin-top:3px!important}
:where(.s-4c118130){display:flex!important;align-items:center!important;gap:10px!important;margin-top:8px!important}
:where(.s-4d69a74d){flex-wrap:wrap!important}
:where(.s-4d74af3a){width:64px!important;text-align:right!important}
:where(.s-4e3aa61b){min-height:360px!important}
:where(.s-4e5b30c3){font-size:12.5px!important;max-width:560px!important;margin-top:4px!important}
:where(.s-4ecefea8){text-transform:none!important;letter-spacing:0!important;font-family:var(--font-sans)!important;font-size:10px!important}
:where(.s-4edb7f6e){font-size:16px!important}
:where(.s-4fb675a4){padding:14px!important;text-align:center!important}
:where(.s-502afc7f){width:32px!important;height:32px!important}
:where(.s-50f8b28a){padding:4px 0 8px!important}
:where(.s-5103dac5){grid-template-columns:1.4fr 1fr!important;margin-top:8px!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-5109f020){grid-template-columns:1fr 1.2fr!important}
:where(.s-5119c98b){width:60px!important;flex:none!important}
:where(.s-51377a91){grid-column:1/-1!important}
:where(.s-513dc54a){width:46px!important;height:46px!important}
:where(.s-517a82f6){padding:7px 0!important}
:where(.s-518151fa){grid-template-columns:1.4fr 1.3fr 0.8fr!important}
:where(.s-5225e5b7){width:0%!important}
:where(.s-525a2958){position:static!important;padding:4px!important;width:220px!important}
:where(.s-5306f18f){font-size:22px!important}
:where(.s-532b080d){grid-template-columns:1fr!important}
:where(.s-533ff172){gap:22px!important;margin-bottom:10px!important;font-size:11px!important}
:where(.s-53443ebd){margin:4px 0 12px!important}
:where(.s-53522f69){padding:10px 12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-53a2015f){padding:10px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-53ee9114){z-index:12!important;align-items:flex-start!important;padding-top:24px!important}
:where(.s-541964fc){opacity:.6!important}
:where(.s-548fa4a9){grid-template-columns:56px minmax(0,1fr) minmax(0,2.1fr) 104px!important}
:where(.s-54b84a78){grid-template-columns:2.4fr 1fr 1fr!important}
:where(.s-54c38d1e){display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)!important;gap:18px!important}
:where(.s-54f34fdd){flex-direction:column!important;gap:8px!important}
:where(.s-550e777a){display:grid!important;grid-template-columns:140px 1fr!important;gap:2px 10px!important;font-size:10.5px!important;margin:4px 0 8px!important}
:where(.s-5519da69){display:flex!important;gap:10px!important;align-items:flex-end!important;margin-bottom:12px!important}
:where(.s-55bcecaf){right:10px!important;top:210px!important}
:where(.s-55d8ffef){width:170px!important}
:where(.s-55e58d3b){gap:9px!important}
:where(.s-565e5e21){width:820px!important}
:where(.s-56c5be28){text-decoration:line-through!important}
:where(.s-570ae712){align-items:flex-start!important;padding-top:30px!important}
:where(.s-5725c6f3){gap:0!important;border-bottom:1px solid var(--ui-line)!important;background:var(--ui-surface)!important}
:where(.s-576f7869){font-family:Georgia,serif!important;font-weight:600!important}
:where(.s-57b76d23){min-height:330px!important}
:where(.s-57cac444){padding:8px 12px 4px!important}
:where(.s-57ff453c){width:160px!important;margin-top:8px!important}
:where(.s-58492156){height:100px!important}
:where(.s-5865b76e){min-height:480px!important}
:where(.s-5878d012){max-width:560px!important;margin:0 auto!important}
:where(.s-58c1d4ab){width:36%!important}
:where(.s-598d7359){display:flex!important;gap:8px!important;align-items:center!important;margin:10px 0!important}
:where(.s-599767be){gap:10px!important;align-items:flex-end!important}
:where(.s-59d59eb6){width:118px!important;gap:6px!important}
:where(.s-5a54376e){width:52%!important}
:where(.s-5a5f7abe){width:110px!important}
:where(.s-5a83a069){margin:12px 0 6px!important}
:where(.s-5a93599e){display:flex!important;align-items:center!important;gap:7px!important}
:where(.s-5b1ac91a){border-color:var(--ui-sage-deep)!important}
:where(.s-5b763584){padding:5px!important}
:where(.s-5bc8c801){gap:6px!important;flex:none!important}
:where(.s-5c411528){padding:5px 0!important}
:where(.s-5c5258cd){grid-template-columns:2fr 1.2fr 1fr 0.8fr!important}
:where(.s-5ca88411){margin:4px 0 12px!important;line-height:1.45!important}
:where(.s-5d02d651){align-items:flex-end!important}
:where(.s-5d59525b){color:var(--ui-sage-deep)!important}
:where(.s-5deef253){width:57%!important}
:where(.s-5dfe070e){min-width:0!important;flex:1 1 110px!important}
:where(.s-5e153c61){margin-top:-6px!important;line-height:1.4!important}
:where(.s-5e461f07){font-size:13px!important}
:where(.s-5f24fd92){max-width:780px!important}
:where(.s-5f326564){text-align:right!important}
:where(.s-5ffb2a7f){justify-content:center!important;gap:34px!important;padding:22px!important}
:where(.s-6008f17e){height:1px!important;background:var(--ui-line)!important;margin:6px 4px!important}
:where(.s-601ccb6e){width:980px!important}
:where(.s-6039ac12){grid-template-columns:minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,1fr)!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-605ba3b7){justify-content:center!important;font-family:var(--font-mono)!important;font-size:9px!important;letter-spacing:0.08em!important;color:var(--ui-ink-3)!important}
:where(.s-6062a5ce){font-size:18px!important;margin:4px 0 6px!important}
:where(.s-6082e69f){border-bottom:1px solid var(--ui-line)!important;padding:5px 0!important}
:where(.s-6113cb7f){background:var(--ui-err)!important;border-color:var(--ui-err)!important;color:var(--ui-surface)!important}
:where(.s-61bdd47e){width:38%!important}
:where(.s-61dff855){position:relative!important;display:inline-flex!important;color:var(--ui-ink-2)!important}
:where(.s-621f16f3){max-width:720px!important}
:where(.s-622cba0a){text-transform:uppercase!important;letter-spacing:.6px!important}
:where(.s-624cc40d){font-size:10.5px!important;min-height:62px!important}
:where(.s-628f8dcf){grid-template-columns:minmax(0,1fr) 92px 70px 400px!important}
:where(.s-62af6ed3){gap:8px!important;padding:8px 0!important;border-top:1px solid var(--ui-line)!important}
:where(.s-62d13db6){font-size:17px!important}
:where(.s-62f056b3){width:12%!important}
:where(.s-6320d393){left:200px!important;top:30px!important}
:where(.s-6344d34d){display:flex!important;justify-content:flex-end!important;margin-bottom:8px!important}
:where(.s-634e55ac){padding:12px 14px!important}
:where(.s-6387e9b6){width:680px!important}
:where(.s-63bd7425){min-height:560px!important}
:where(.s-63fcc4e4){grid-template-columns:2fr 1.2fr 1.1fr 0.6fr 0.9fr!important}
:where(.s-640de484){gap:6px!important;margin-bottom:7px!important}
:where(.s-643ae850){width:22px!important;height:18px!important;border-radius:5px!important;background:var(--ui-st-stock)!important;display:inline-block!important}
:where(.s-645c77d2){font-size:17px!important;font-weight:600!important}
:where(.s-64df22e5){padding:0 14px 10px!important}
:where(.s-65097ba4){width:26px!important;justify-content:center!important;padding:0!important}
:where(.s-650d6b2d){color:var(--hb-accent)!important}
:where(.s-651ab11a){margin-left:auto!important;width:26px!important;height:26px!important}
:where(.s-6548021c){gap:7px!important;padding:3px 6px!important;border-radius:9px!important;background:var(--ui-surface-2)!important}
:where(.s-654c968f){font-size:9.5px!important;letter-spacing:0.08em!important;text-transform:uppercase!important;background:var(--ui-surface-3)!important;border-radius:4px!important;padding:2px 6px!important;margin-right:4px!important}
:where(.s-659277d2){width:900px!important}
:where(.s-65b3f56e){display:flex!important;align-items:baseline!important;gap:8px!important}
:where(.s-66264350){top:50px!important;right:16px!important;width:320px!important;top:48px!important}
:where(.s-662c8e43){width:150px!important}
:where(.s-662f8058){gap:1px!important;min-width:0!important}
:where(.s-662ff83b){min-height:54px!important}
:where(.s-664beb7b){border:1px solid var(--ui-line)!important;border-radius:8px!important;background:var(--ui-surface-2)!important;padding:8px 12px!important}
:where(.s-66a84ce7){display:block!important}
:where(.s-66b11bef){width:170px!important;flex:none!important}
:where(.s-66c0eaa4){gap:3px!important;color:var(--ui-ok)!important}
:where(.s-66ecfda7){max-width:260px!important}
:where(.s-670b1988){text-align:center!important;padding:12px 0!important}
:where(.s-67497320){grid-template-columns:minmax(0,1.8fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,0.8fr) minmax(0,0.9fr)!important}
:where(.s-67aebed4){grid-template-columns:repeat(3,1fr)!important}
:where(.s-67c64599){display:flex!important;flex-direction:column!important;gap:6px!important}
:where(.s-685fc3ce){width:470px!important}
:where(.s-6873237b){margin:2px 0 8px!important}
:where(.s-68936642){gap:10px!important;padding-bottom:12px!important}
:where(.s-68ceefcf){gap:12px!important;margin-top:6px!important}
:where(.s-68eb3d92){font-size:17px!important;font-weight:600!important;letter-spacing:-0.01em!important}
:where(.s-6941c7ea){width:500px!important}
:where(.s-6954c6c0){padding:7px 9px!important;gap:8px!important}
:where(.s-6971378e){align-self:flex-end!important}
:where(.s-6a3d96f2){display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
:where(.s-6b33d29e){right:10px!important;top:30px!important}
:where(.s-6b45f9b9){padding:3px 0 8px!important}
:where(.s-6b77d049){max-width:430px!important}
:where(.s-6bdddff0){margin-top:6px!important;max-width:640px!important}
:where(.s-6bf09d03){position:relative!important;min-height:520px!important}
:where(.s-6c405d68){border:1px solid var(--ui-line)!important;border-radius:11px!important;padding:10px 12px!important}
:where(.s-6ca18dd2){padding:9px 0!important;border-bottom:1px solid var(--hc-line)!important}
:where(.s-6cbf52f5){width:118px!important;flex:none!important}
:where(.s-6cf911c9){gap:9px!important;padding:7px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-6d2a18ba){width:100px!important}
:where(.s-6d3037d0){gap:6px!important;padding:10px 12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-6d35b63b){align-items:flex-start!important;padding-top:24px!important}
:where(.s-6d576540){gap:10px!important;align-items:flex-start!important}
:where(.s-6d5b5064){display:flex!important;gap:8px!important;align-items:flex-end!important}
:where(.s-6d87d296){width:760px!important}
:where(.s-6e5f15ae){grid-template-columns:1.6fr 1.1fr 0.9fr 0.9fr 0.7fr 0.6fr!important}
:where(.s-6eeb7d41){grid-template-columns:1.6fr 1.5fr 1fr 1.2fr 1fr 1.6fr!important}
:where(.s-6efcea52){min-height:520px!important}
:where(.s-6f18ce5c){grid-template-columns:repeat(4,minmax(0,1fr))!important}
:where(.s-6ff9e393){margin-top:8px!important;gap:6px!important}
:where(.s-7001be50){width:12px!important}
:where(.s-70522ada){height:16px!important;font-size:8.5px!important}
:where(.s-70600c48){right:10px!important;top:120px!important}
:where(.s-707884c8){left:376px!important;top:70px!important}
:where(.s-7111cb0c){border-color:var(--ui-sage)!important}
:where(.s-712f90ac){color:var(--ui-warn)!important;margin-top:3px!important}
:where(.s-71658681){display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
:where(.s-71a05970){width:50%%!important;margin-top:8px!important}
:where(.s-71e66b50){width:206px!important;flex:none!important}
:where(.s-71e883ee){font-size:9.5px!important}
:where(.s-7217a7ab){height:60px!important}
:where(.s-725a587b){margin-bottom:12px!important;max-width:620px!important}
:where(.s-72893568){padding:6px!important}
:where(.s-730f5b77){opacity:.7!important}
:where(.s-732e6219){width:14px!important}
:where(.s-7393f04d){stroke:var(--ui-sage-deep)!important}
:where(.s-7395dfea){gap:4px!important;justify-content:flex-end!important}
:where(.s-73fcc972){color:var(--ui-ink)!important}
:where(.s-74190e5f){padding:2px 0!important}
:where(.s-742d665f){gap:6px!important;color:var(--ui-err)!important}
:where(.s-74630bde){position:relative!important;min-height:800px!important}
:where(.s-74f4832c){left:420px!important;top:230px!important}
:where(.s-74f604f8){padding:10px 0!important}
:where(.s-75c59249){max-width:340px!important}
:where(.s-75dbe18b){display:flex!important;flex-direction:column!important;gap:11px!important;justify-content:center!important}
:where(.s-76f3d323){left:0!important;top:62px!important;width:180px!important;padding:5px!important;font-size:12px!important}
:where(.s-779098ca){grid-template-columns:minmax(0,1.6fr) 0.7fr 0.7fr!important}
:where(.s-779f6e95){width:440px!important}
:where(.s-77a2ddad){position:relative!important;min-height:440px!important}
:where(.s-77b001cd){width:60px!important;height:24px!important}
:where(.s-7832cbe6){justify-content:center!important;margin:10px 0!important}
:where(.s-7835ec53){left:42.9%!important;width:42.9%!important;top:62px!important}
:where(.s-787d5df7){max-width:760px!important}
:where(.s-78954a20){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important}
:where(.s-79a1e4b2){width:580px!important}
:where(.s-7a5d97a6){left:250px!important;top:84px!important}
:where(.s-7ab05642){justify-content:flex-end!important;gap:4px!important}
:where(.s-7ae7cc52){width:84px!important;height:24px!important}
:where(.s-7b033dad){max-width:460px!important}
:where(.s-7b2b2246){height:120px!important}
:where(.s-7b740c46){position:relative!important;min-height:470px!important}
:where(.s-7c121f1f){padding:3px 0!important}
:where(.s-7c7c99fb){border-top:1px solid var(--ui-line)!important}
:where(.s-7cc58fe7){color:var(--ui-ok)!important}
:where(.s-7ce7df83){grid-column:2!important}
:where(.s-7d8b4542){padding:22px!important;display:grid!important;grid-template-columns:1fr 1.2fr 1fr!important;gap:14px!important;align-items:center!important}
:where(.s-7da5df64){gap:5px!important;color:var(--fs-amber)!important}
:where(.s-7da8d09b){grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,0.8fr) minmax(0,0.8fr) minmax(0,1.3fr)!important}
:where(.s-7e000820){min-height:40px!important}
:where(.s-7e04020e){width:110px!important;height:26px!important}
:where(.s-7e6609e5){font-size:12.5px!important}
:where(.s-7e763766){width:940px!important}
:where(.s-7eaecc77){width:50%!important}
:where(.s-7ec48985){height:12px!important}
:where(.s-7ed77be9){display:flex!important;gap:9px!important}
:where(.s-7ef0ecbb){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
:where(.s-7efbe7fb){padding:10px 18px 0!important}
:where(.s-7f0d25f1){max-width:440px!important}
:where(.s-7f4f7002){margin:14px 0 4px!important}
:where(.s-7fdb4392){font-size:21px!important;font-family:Georgia,serif!important}
:where(.s-7feaad48){margin-bottom:7px!important}
:where(.s-801fc8b8){gap:6px!important;padding:10px 14px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-802e06f8){top:58px!important;right:18px!important;width:200px!important;padding:6px!important}
:where(.s-805eb47f){max-width:620px!important}
:where(.s-80c42cc8){grid-column:5 / 7!important}
:where(.s-8100c3b1){margin:8px 0 3px!important}
:where(.s-810524ed){width:1160px!important}
:where(.s-8121e2da){margin-bottom:5px!important}
:where(.s-813e1ff4){gap:4px 14px!important}
:where(.s-8141cac5){width:420px!important}
:where(.s-818205ab){font-size:24px!important}
:where(.s-81b7b988){grid-template-columns:minmax(0,1fr) 170px 90px!important}
:where(.s-81d31713){gap:6px!important;margin-bottom:10px!important}
:where(.s-81f93515){width:150px!important;height:26px!important}
:where(.s-823c1fba){display:flex!important;flex-direction:column!important;gap:10px!important;min-height:400px!important}
:where(.s-828392ed){gap:3px!important;justify-content:flex-end!important}
:where(.s-8325cdb0){gap:10px!important;padding:12px 14px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-83725d2c){flex:1!important}
:where(.s-83b4e37f){width:5%!important}
:where(.s-83f39700){gap:7px!important;font-size:10.5px!important;color:var(--hb-accent)!important}
:where(.s-83fdee1f){padding:46px 20px!important;display:flex!important;justify-content:center!important}
:where(.s-841a7d70){grid-template-columns:2fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr!important}
:where(.s-8420507d){grid-template-columns:1.1fr 1.6fr 0.5fr 0.8fr 1fr!important}
:where(.s-84dfc12a){padding:28px 40px!important;display:flex!important;justify-content:center!important}
:where(.s-84f2fbfd){gap:6px!important;margin-top:8px!important}
:where(.s-850e442e){min-height:44px!important}
:where(.s-85380f89){max-width:700px!important}
:where(.s-85416c8f){grid-template-columns:1.7fr 0.5fr 1fr 0.75fr 1.15fr 2.4fr!important}
:where(.s-85a50800){gap:8px!important;margin-bottom:10px!important}
:where(.s-8636f452){width:320px!important;height:34px!important}
:where(.s-865a7653){font-size:28px!important}
:where(.s-866eaa30){height:22px!important}
:where(.s-86d0c8e2){background:var(--ui-sage)!important}
:where(.s-86f12f95){padding:9px 12px!important;border-bottom:1px solid var(--ui-line)!important;gap:8px!important}
:where(.s-86fa6dce){width:780px!important}
:where(.s-87548011){grid-template-columns:minmax(0,1fr) 140px 66px 58px 96px 320px!important}
:where(.s-87e4babe){padding-left:22px!important}
:where(.s-880cb9f1){gap:8px!important;padding:7px 0!important;border-bottom:1px solid var(--hb-line)!important}
:where(.s-886b33de){width:620px!important}
:where(.s-888252bb){color:var(--ui-ink-3)!important}
:where(.s-88ddb2e4){width:200px!important;flex:none!important}
:where(.s-89086d4e){display:flex!important;flex-direction:column!important;gap:10px!important}
:where(.s-89410918){margin:14px 0 8px!important}
:where(.s-896c022e){min-height:340px!important}
:where(.s-899be63b){gap:8px!important;margin-bottom:10px!important;border-radius:12px!important}
:where(.s-89e41883){font-size:26px!important;width:24px!important}
:where(.s-89e8d70b){gap:7px!important;margin-bottom:3px!important}
:where(.s-8a7aa8f4){grid-template-columns:1.9fr 2fr 1.2fr 1.1fr 0.9fr 0.9fr 1.7fr!important}
:where(.s-8aa17d1a){margin:2px 0 10px!important}
:where(.s-8aa2b24f){width:520px!important}
:where(.s-8b04bc74){grid-column:3!important}
:where(.s-8b36e616){padding:9px 0!important;border-bottom:1px solid var(--hc-line)!important;padding-left:22px!important}
:where(.s-8bc0d87c){display:block!important;font-size:12.5px!important}
:where(.s-8bd2bc27){width:220px!important;flex:none!important}
:where(.s-8bde36d0){font-weight:400!important}
:where(.s-8bf4e524){margin-top:-4px!important}
:where(.s-8c12decd){right:22px!important;top:auto!important;bottom:66px!important;width:330px!important}
:where(.s-8c7977ef){height:26px!important}
:where(.s-8d0b6102){color:var(--ui-warn)!important}
:where(.s-8dd1c823){gap:6px!important;color:var(--ui-ok)!important}
:where(.s-8e116a99){grid-template-columns:minmax(0,1fr)!important}
:where(.s-8e26c5f7){margin-bottom:8px!important}
:where(.s-8e30c0cb){flex:none!important;white-space:nowrap!important}
:where(.s-8e3e75a5){gap:5px!important;opacity:0.6!important}
:where(.s-8e84ac29){gap:8px!important;padding:6px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-8f99b6b2){font-size:16px!important;margin-bottom:8px!important}
:where(.s-8fe18d80){margin-top:-6px!important}
:where(.s-8febba15){width:224px!important;flex:none!important}
:where(.s-8ffec319){display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px 12px!important}
:where(.s-9027679d){min-width:120px!important;text-align:center!important}
:where(.s-90500853){text-align:center!important}
:where(.s-906e05fc){background:var(--ui-surface-3)!important;border-radius:3px!important;padding:0 4px!important}
:where(.s-90f22309){margin:-6px 0 10px!important}
:where(.s-91269935){width:80px!important}
:where(.s-9157e8bc){grid-template-columns:1.8fr 1.5fr 1.5fr 1fr!important}
:where(.s-915b82d5){width:170px!important;height:26px!important}
:where(.s-9214aa7f){padding:16px!important;text-align:center!important}
:where(.s-922090a1){grid-column:7!important}
:where(.s-9256b18f){font-size:9px!important}
:where(.s-927e7b03){grid-template-columns:1.1fr 1.6fr 1fr 0.5fr!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-92831db7){width:31%!important}
:where(.s-928af12f){margin-left:4px!important}
:where(.s-92a69b85){padding:10px 14px!important;gap:12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-92df3cbf){justify-content:center!important;font-family:var(--font-mono)!important;height:26px!important}
:where(.s-92e63b3e){grid-template-columns:0.9fr 1.1fr 2fr 0.8fr 1.8fr 0.5fr!important}
:where(.s-92e8a0df){grid-template-columns:0.8fr 1.6fr 1.6fr 0.9fr!important}
:where(.s-92fb3351){display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)!important;gap:10px!important}
:where(.s-9361bc60){width:79.0%!important}
:where(.s-93b6a0df){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
:where(.s-9472070b){padding:7px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-94742cdc){display:grid!important;grid-template-columns:minmax(0,1fr) 236px!important;gap:12px!important}
:where(.s-9477ae5c){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:14px!important}
:where(.s-94be0569){width:34px!important;height:34px!important}
:where(.s-95112649){margin-top:4px!important;line-height:1.45!important}
:where(.s-951985a4){min-height:640px!important}
:where(.s-952c6174){margin-top:8px!important;border-top:1px solid var(--ui-line)!important;padding-top:8px!important;font-size:12px!important}
:where(.s-958cbb57){grid-template-columns:1.1fr 0.8fr 0.7fr 1.3fr 0.4fr 0.7fr 1fr!important}
:where(.s-961587cb){font-size:10px!important;color:var(--ui-ink-2)!important}
:where(.s-96cf76ca){min-height:52px!important}
:where(.s-9753174f){width:700px!important}
:where(.s-99b9ba53){justify-content:center!important}
:where(.s-99bc4548){grid-column:2 / 5!important;margin-left:12px!important}
:where(.s-99d73e08){margin:4px 0 14px!important;line-height:1.45!important}
:where(.s-99f5eb04){padding:7px 8px!important}
:where(.s-9a666a68){width:68%!important}
:where(.s-9a8eea4a){grid-template-columns:0.4fr 1.1fr 1.15fr 2.4fr!important}
:where(.s-9ac49008){margin-right:10px!important}
:where(.s-9b0aa7c9){grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,0.6fr)!important}
:where(.s-9ba7884b){padding:4px 0!important}
:where(.s-9c8ccda7){left:20px!important;top:535px!important;width:250px!important}
:where(.s-9c9bd710){max-width:860px!important}
:where(.s-9ce7fbc6){justify-content:center!important;gap:6px!important}
:where(.s-9d2a1fa1){gap:6px!important;margin-bottom:6px!important}
:where(.s-9d5367af){margin-left:8px!important}
:where(.s-9d8d7170){max-width:520px!important}
:where(.s-9daf5700){background:var(--ui-sage-tint)!important;color:var(--ui-sage-deep)!important;border-radius:999px!important;padding:1px 8px!important;font-size:10.5px!important;white-space:nowrap!important}
:where(.s-9db3c323){width:130px!important}
:where(.s-9dd4d3ef){margin-top:-2px!important;gap:10px!important}
:where(.s-9f9573b3){width:22px!important;height:22px!important}
:where(.s-a014400c){left:85.7%!important;width:14.3%!important;top:62px!important}
:where(.s-a041e3ec){left:14px!important;top:130px!important}
:where(.s-a07b96df){margin-left:0!important}
:where(.s-a0fc2e0b){margin-top:7px!important}
:where(.s-a107610c){padding:12px 14px!important;gap:10px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-a10f3915){display:inline-grid!important;place-items:center!important;width:20px!important;height:20px!important}
:where(.s-a21f50f7){padding:6px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-a23ef65c){grid-template-columns:1.8fr 1fr 0.9fr!important}
:where(.s-a2ba15b8){left:200px!important;top:130px!important}
:where(.s-a2c7a64e){grid-template-columns:minmax(0,0.3fr) minmax(0,2.4fr) minmax(0,1fr) minmax(0,0.9fr) minmax(0,0.8fr) minmax(0,1.1fr)!important}
:where(.s-a2d3837f){padding:18px!important;min-height:300px!important}
:where(.s-a2e28cf8){top:52px!important;right:14px!important;width:272px!important;padding:0!important;overflow:hidden!important}
:where(.s-a2f8a2b5){width:58px!important;height:22px!important}
:where(.s-a31d2e32){left:14px!important;top:30px!important}
:where(.s-a34a20a2){width:1080px!important}
:where(.s-a3970b9f){font-size:15px!important}
:where(.s-a3bfca8e){width:800px!important}
:where(.s-a3f62cb3){color:var(--ui-st-stock)!important}
:where(.s-a41dc6ed){position:relative!important;min-height:740px!important}
:where(.s-a42970d5){gap:6px 14px!important;margin-bottom:10px!important}
:where(.s-a49cca52){font-size:12px!important}
:where(.s-a5121a34){grid-template-columns:1fr 1.1fr 0.7fr 1.2fr!important}
:where(.s-a5230222){width:30px!important;height:30px!important}
:where(.s-a5317b8d){overflow:hidden!important}
:where(.s-a55e4e26){color:var(--ui-warn)!important;margin:-2px 0 4px 21px!important}
:where(.s-a5f2edb9){width:50px!important;height:26px!important}
:where(.s-a658f78a){display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
:where(.s-a6ad56a6){gap:8px!important;padding:5px 0!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-a6c9d848){margin-top:6px!important;color:var(--ui-sage-deep)!important}
:where(.s-a6d87bd8){transform:rotate(-90deg)!important}
:where(.s-a6ec0188){font-weight:400!important;margin-left:8px!important;font-size:11px!important}
:where(.s-a76b23aa){stroke:var(--ui-st-stock)!important}
:where(.s-a79e529a){grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,0.9fr)!important}
:where(.s-a82b31ad){width:38px!important;height:38px!important;border-radius:6px!important;flex:none!important;background:linear-gradient(135deg,var(--ui-sage-soft),var(--ui-info-soft))!important;border:1px solid var(--ui-line)!important}
:where(.s-a82c205f){position:static!important;padding:4px!important;margin-top:4px!important}
:where(.s-a82d4c12){padding:8px 10px!important;gap:9px!important}
:where(.s-a86925b3){gap:7px!important;opacity:0.5!important}
:where(.s-a86c85d8){margin:8px 0 5px!important}
:where(.s-a91e4135){grid-template-columns:2.3fr 1fr 1.1fr 0.8fr 0.8fr!important}
:where(.s-a9622d86){width:58px!important;height:24px!important}
:where(.s-a9f211c1){width:32px!important;height:32px!important;font-size:12px!important}
:where(.s-aa588df6){text-transform:none!important;letter-spacing:0!important;font-family:var(--font-sans)!important;font-size:11px!important}
:where(.s-aa7523b6){color:var(--ui-err)!important}
:where(.s-aa9c1b32){display:grid!important;grid-template-columns:2.2fr 0.7fr 0.9fr 0.8fr 0.8fr 0.9fr!important;gap:6px!important;padding:4px 0!important;border-bottom:1px solid var(--cr-paper-line)!important;font-size:10.5px!important;font-weight:600!important}
:where(.s-aac2bc40){display:flex!important;gap:8px!important;align-items:center!important;margin-bottom:6px!important}
:where(.s-ab5acf20){gap:4px!important}
:where(.s-ab79ea2b){margin:0!important}
:where(.s-abe750d9){padding:18px!important;background:var(--ui-surface-3)!important}
:where(.s-abf37ef4){min-height:190px!important}
:where(.s-ac445731){width:480px!important}
:where(.s-ac692ed5){grid-template-columns:1.5fr 0.9fr 1.6fr 1fr 0.8fr 1.1fr!important}
:where(.s-ac7f6b8c){width:70px!important;flex:none!important}
:where(.s-acd1ff98){width:44px!important;text-align:right!important}
:where(.s-ace77659){color:var(--ui-note-head)!important;font-weight:500!important}
:where(.s-ad426e41){width:260px!important}
:where(.s-ad4edbca){align-items:flex-start!important;padding-top:20px!important}
:where(.s-ada31c3a){display:flex!important;flex-direction:column!important}
:where(.s-adc473ea){width:210px!important;flex:none!important}
:where(.s-ae076c16){margin-top:3px!important;font-style:italic!important}
:where(.s-ae45e129){display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}
:where(.s-ae56bfd0){padding:20px 22px!important}
:where(.s-ae6fc78b){width:600px!important}
:where(.s-aebc026e){width:240px!important}
:where(.s-af12d2ac){right:16px!important;top:150px!important;width:220px!important}
:where(.s-af3360b9){max-width:680px!important}
:where(.s-af8a80a2){background:var(--ui-ink-4)!important}
:where(.s-af9bde8e){margin:4px 0 8px!important}
:where(.s-b014512e){margin-right:auto!important}
:where(.s-b0dbe948){position:relative!important;flex:1!important}
:where(.s-b0fa315e){margin-top:3px!important;max-width:420px!important}
:where(.s-b116066d){margin-top:7px!important;gap:4px!important}
:where(.s-b137ab16){color:var(--ui-ink-4)!important}
:where(.s-b15a9c0c){margin-left:32px!important;background:var(--ui-surface-2)!important}
:where(.s-b165a498){gap:4px 10px!important}
:where(.s-b191547b){padding:8px 0!important;font-size:11px!important;align-items:flex-end!important;gap:3px!important}
:where(.s-b1a1b465){font-weight:400!important;font-size:11px!important}
:where(.s-b1afc228){gap:5px!important;color:var(--fs-rose)!important}
:where(.s-b1cf89f9){border:1px solid var(--ui-line)!important;border-radius:4px!important;padding:1px 5px!important;font-size:9.5px!important}
:where(.s-b25aed16){width:190px!important;flex:none!important}
:where(.s-b2c45835){grid-column:4!important}
:where(.s-b2c5b3e2){max-width:290px!important}
:where(.s-b2eace59){border-top:1px solid var(--ui-line)!important;padding-top:6px!important}
:where(.s-b2eb5c57){gap:9px!important;padding:5px 0!important}
:where(.s-b2ecbb44){max-width:600px!important}
:where(.s-b3df71ea){left:0!important;top:58px!important;width:190px!important;padding:5px!important;font-size:12px!important}
:where(.s-b485d400){width:24px!important;padding:0!important;justify-content:center!important}
:where(.s-b51cecd1){margin-top:3px!important;line-height:1.4!important}
:where(.s-b56987db){margin-bottom:12px!important}
:where(.s-b5951bfe){margin:4px 0 8px!important;max-width:92%!important}
:where(.s-b5bb431a){max-width:400px!important}
:where(.s-b7129581){padding:5px 8px!important;border-radius:6px!important;background:var(--ui-sage-wash)!important}
:where(.s-b74c7508){padding:14px!important;min-height:430px!important}
:where(.s-b7aa1ec0){width:100%!important}
:where(.s-b7c4a76b){color:var(--ui-ink)!important;font-weight:600!important}
:where(.s-b82dfab1){display:grid!important;grid-template-columns:200px minmax(0,1fr)!important}
:where(.s-b87a97c0){border:1px solid var(--ui-line-2)!important;border-radius:9px!important;padding:8px 10px!important}
:where(.s-b888c81e){gap:1px!important}
:where(.s-b8ab6338){gap:2px!important}
:where(.s-b922c89f){margin-bottom:10px!important}
:where(.s-b9c41b37){position:relative!important;min-height:420px!important}
:where(.s-b9e8c1b2){width:560px!important}
:where(.s-ba1aebaf){left:10px!important;top:300px!important}
:where(.s-ba624310){position:relative!important;min-height:530px!important}
:where(.s-ba8e2510){min-height:430px!important}
:where(.s-badcd27c){width:40%!important}
:where(.s-bb743a8d){display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 18px!important}
:where(.s-bba2c862){margin-top:5px!important;line-height:1.45!important}
:where(.s-bbca7c2f){grid-template-columns:132px minmax(0,1fr)!important}
:where(.s-bc972432){padding:34px 20px!important;display:flex!important;justify-content:center!important}
:where(.s-bcb21904){left:100.0%!important}
:where(.s-bcc61f9c){color:var(--ui-sage-deep)!important;margin-bottom:8px!important}
:where(.s-bd0213bf){width:60px!important;opacity:.6!important}
:where(.s-bd299c8a){font-size:11.5px!important}
:where(.s-bd928663){grid-template-columns:1.25fr 0.6fr 1.9fr 1.15fr 1.1fr 0.75fr 0.65fr 0.5fr!important}
:where(.s-bd949a68){grid-column:6!important}
:where(.s-bdc14401){grid-template-columns:1.2fr 0.6fr 1fr 1.1fr 2.2fr!important}
:where(.s-bdd4392a){width:100%!important;justify-content:center!important}
:where(.s-bddb4719){padding:6px 10px!important;border-radius:6px!important}
:where(.s-bdef4026){gap:6px!important;border-top:1px solid var(--ui-line)!important}
:where(.s-be7d595c){padding:16px!important;min-height:300px!important}
:where(.s-be9aa7bb){min-width:0!important;flex:1 1 auto!important}
:where(.s-bef8d226){left:42.9%!important;width:14.3%!important;top:30px!important}
:where(.s-bf474445){width:38px!important;height:38px!important;border-radius:6px!important;flex:none!important;display:grid!important;place-items:center!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface-2)!important;color:var(--ui-ink-4)!important}
:where(.s-bf7d9d1b){text-transform:none!important;letter-spacing:0!important;color:var(--ui-ink-4)!important}
:where(.s-bfa665db){display:grid!important;grid-template-columns:2.2fr 0.7fr 0.9fr 0.8fr 0.8fr 0.9fr!important;gap:6px!important;padding:4px 0!important;border-bottom:1px solid var(--cr-paper-line)!important;font-size:10.5px!important}
:where(.s-c006ddb8){position:relative!important;display:inline-flex!important}
:where(.s-c11d681e){grid-template-columns:1.6fr 1.3fr 1.6fr 0.9fr 1.1fr!important}
:where(.s-c1980779){grid-template-columns:90px 1fr!important;padding:8px 10px!important}
:where(.s-c28fa1ae){font-size:10px!important}
:where(.s-c2e66c1e){max-width:500px!important}
:where(.s-c3289449){gap:16px!important}
:where(.s-c4a20de0){overflow:hidden!important;border-top:2px solid var(--ui-note-line)!important}
:where(.s-c53ea1da){margin-top:14px!important}
:where(.s-c54046d0){margin:6px 0 14px!important}
:where(.s-c542e78b){justify-content:center!important;margin:12px 0!important}
:where(.s-c601aada){gap:12px!important;padding:8px 12px!important;border-top:1px solid var(--ui-line)!important;background:var(--ui-surface-2)!important}
:where(.s-c64e2b61){margin:3px 0 6px!important;line-height:1.4!important}
:where(.s-c6ccf839){position:relative!important;min-height:560px!important}
:where(.s-c6fa01b3){font-weight:700!important}
:where(.s-c78650f1){padding:8px 0!important;border-top:1px solid var(--ui-line)!important}
:where(.s-c78ca065){width:78px!important;flex:none!important;opacity:0.5!important}
:where(.s-c7abf658){font-size:11.5px!important;margin-top:3px!important;max-width:660px!important}
:where(.s-c7cc7fb9){overflow:hidden!important;position:relative!important}
:where(.s-c7db0592){padding:18px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
:where(.s-c830caa3){stroke:var(--ui-st-maint)!important}
:where(.s-c83d3f65){overflow:hidden!important;border-top:2px solid var(--ui-line)!important}
:where(.s-c841bc62){padding:1px 4px!important}
:where(.s-c86b8005){width:25px!important;justify-content:center!important;padding:0!important}
:where(.s-c8cb980a){left:376px!important;top:90px!important}
:where(.s-c90bd792){position:absolute!important;left:0!important;top:0!important}
:where(.s-c92fcbd5){width:80px!important;height:26px!important}
:where(.s-c9471679){position:relative!important;min-height:580px!important}
:where(.s-c961e98b){width:76px!important;text-align:right!important;color:var(--ui-err)!important}
:where(.s-c98d833c){opacity:.45!important}
:where(.s-ca29c849){grid-template-columns:minmax(0,1.8fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,0.8fr)!important}
:where(.s-ca6fc035){margin-left:auto!important}
:where(.s-ca956a31){font-size:8.5px!important}
:where(.s-caf81b0a){padding:10px 12px!important;border-bottom:1px solid var(--ui-line)!important;gap:6px!important}
:where(.s-cbba90d4){margin:-4px 0 8px!important}
:where(.s-cc0e1e3e){border:1px solid var(--ui-line)!important;border-radius:9px!important;padding:9px 10px!important}
:where(.s-cc5916f3){padding:18px!important;position:relative!important}
:where(.s-cc7362b3){z-index:12!important}
:where(.s-cccb985e){font-size:12px!important;margin-bottom:8px!important}
:where(.s-cd2b97c4){width:140px!important}
:where(.s-cd8d727a){padding:9px 12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-cdb8bc2a){margin:12px 14px 0!important}
:where(.s-cdfb3b34){grid-template-columns:minmax(0,1.6fr) 0.7fr!important}
:where(.s-ce06f8e7){grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,0.7fr) minmax(0,0.6fr) minmax(0,0.5fr) minmax(0,0.4fr) minmax(0,1.3fr) minmax(0,0.8fr) minmax(0,0.7fr)!important}
:where(.s-ce118cb8){width:79%!important}
:where(.s-ce61d2d1){gap:8px!important;align-items:flex-end!important;margin-top:10px!important}
:where(.s-ceb82e75){display:block!important;font-size:12px!important}
:where(.s-cef34d56){grid-template-columns:2fr 1.2fr 1fr!important}
:where(.s-cf20bef4){gap:5px!important;white-space:normal!important;line-height:1.25!important}
:where(.s-cf3e37e9){grid-template-columns:2fr 1.4fr 0.9fr 0.9fr 1.1fr 1fr!important}
:where(.s-cf94127b){margin:7px 0!important}
:where(.s-d063db45){font-size:13.5px!important}
:where(.s-d1cf3e35){display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;gap:12px!important;margin-top:12px!important}
:where(.s-d1de1c03){border:1px solid var(--ui-line)!important}
:where(.s-d2647748){padding:18px!important}
:where(.s-d2ba66be){padding:18px!important;display:flex!important;justify-content:center!important}
:where(.s-d2d8f5ee){padding:14px 14px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
:where(.s-d334b57b){width:120px!important}
:where(.s-d3646235){border-bottom:1px solid var(--ui-line)!important;padding:4px 0!important}
:where(.s-d38b94a4){padding:10px 14px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-d40fdf9f){margin:8px 0 4px!important}
:where(.s-d47aa6b5){position:relative!important;min-height:760px!important}
:where(.s-d4b653b4){font-weight:500!important;min-width:120px!important;text-align:center!important}
:where(.s-d4d91f9a){width:20%!important}
:where(.s-d5472040){grid-template-columns:0.9fr 1.3fr 2fr 0.8fr 1.1fr 1.4fr 0.5fr!important}
:where(.s-d5593225){gap:5px!important;margin-top:6px!important}
:where(.s-d5a33b90){gap:12px!important}
:where(.s-d5e43809){width:48px!important}
:where(.s-d65deed6){display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:10px!important}
:where(.s-d670a145){right:16px!important;top:44px!important;width:220px!important}
:where(.s-d687f870){grid-template-columns:repeat(2,112px)!important}
:where(.s-d6e33350){left:42.9%!important}
:where(.s-d704d6b4){width:360px!important;padding:20px!important}
:where(.s-d7b74c0b){margin:4px 0 12px!important;line-height:1.4!important;flex:1!important}
:where(.s-d7db16a3){display:inline-flex!important}
:where(.s-d84a5325){width:180px!important;height:26px!important}
:where(.s-d88e2336){position:relative!important;min-height:470px!important;display:grid!important}
:where(.s-d957ea40){gap:8px!important;margin-bottom:8px!important}
:where(.s-d96867f4){grid-template-columns:1fr 0.8fr 1fr 0.7fr 0.6fr!important}
:where(.s-d9bf9db6){grid-template-columns:1.25fr 1.55fr 0.95fr 0.6fr 0.55fr 0.5fr 0.55fr 0.65fr 0.6fr!important}
:where(.s-da1072ac){width:40%%!important;margin-top:8px!important}
:where(.s-da9c403a){padding:22px 22px 34px!important}
:where(.s-dacd1268){position:relative!important;min-height:1010px!important}
:where(.s-dae89a11){gap:5px!important;width:44px!important}
:where(.s-db000ee1){padding-top:6px!important}
:where(.s-db1c7f28){padding:8px 12px!important}
:where(.s-db689f68){margin:0!important;border-radius:0!important;border-width:0 0 1px 0!important;flex-wrap:wrap!important}
:where(.s-dc4505e0){gap:10px!important;padding:8px 0!important;border-bottom:1px dashed var(--ui-line)!important}
:where(.s-dc614636){width:46%!important}
:where(.s-dc9d6d9a){width:30%!important}
:where(.s-dc9eac3f){width:190px!important}
:where(.s-dd1173f4){gap:10px!important;margin-bottom:10px!important}
:where(.s-ddcc75df){gap:9px!important;border-top:1px solid var(--ui-line)!important;padding-top:9px!important}
:where(.s-ddcf1cad){grid-template-columns:1fr 1fr 1fr!important;margin-top:6px!important}
:where(.s-dea122fe){left:0.0%!important}
:where(.s-deb0c589){gap:6px!important;margin-bottom:12px!important}
:where(.s-dee66878){display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important;gap:10px!important}
:where(.s-deedfcfa){left:0.0%!important;width:42.9%!important;top:30px!important}
:where(.s-df0080c7){padding:12px 8px!important}
:where(.s-df3420c1){height:28px!important;padding:0 10px!important;background:var(--ui-surface)!important;flex:none!important}
:where(.s-df593e9c){left:52%!important;top:322px!important;width:240px!important}
:where(.s-df5afa5a){max-width:420px!important}
:where(.s-df6ed008){padding:6px 10px!important}
:where(.s-df928149){margin-top:10px!important}
:where(.s-dfe7d2e0){background:var(--ui-warn)!important}
:where(.s-e04796f9){display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:12px!important}
:where(.s-e059c9e5){grid-template-columns:2.4fr 1fr 0.9fr 1fr!important}
:where(.s-e07371c4){grid-template-columns:3fr 0.8fr 0.8fr 0.9fr 1fr 0.8fr 0.6fr!important}
:where(.s-e09b02ab){left:14px!important;top:230px!important}
:where(.s-e104eb5f){width:220px!important}
:where(.s-e12951a0){padding:6px 10px!important;border-radius:7px!important;font-size:12px!important;background:var(--ui-sage-tint)!important;color:var(--ui-sage-deep)!important;font-weight:600!important}
:where(.s-e12bb1a3){width:300px!important;flex:none!important}
:where(.s-e17b531d){margin-bottom:3px!important}
:where(.s-e1c21d20){background:var(--ui-info)!important}
:where(.s-e22f8a49){grid-template-columns:2fr 1.6fr 0.7fr 0.8fr!important}
:where(.s-e2338526){top:48px!important;right:70px!important;width:320px!important}
:where(.s-e238d9de){width:740px!important}
:where(.s-e23a3366){width:1060px!important}
:where(.s-e2f75f21){gap:14px!important}
:where(.s-e364fa98){gap:4px!important;margin-top:5px!important}
:where(.s-e3f18b1a){border-color:var(--ui-line-2)!important}
:where(.s-e3f447c4){width:180px!important}
:where(.s-e46c50c6){width:66%!important}
:where(.s-e505ac1a){display:flex!important;gap:8px!important;align-items:flex-start!important;margin-top:6px!important}
:where(.s-e57137f6){min-height:380px!important}
:where(.s-e5a3feb4){width:84px!important}
:where(.s-e6486cff){gap:7px!important;padding-left:0px!important}
:where(.s-e648fe27){opacity:.3!important}
:where(.s-e6b83aab){padding-left:44px!important}
:where(.s-e6e73135){width:22px!important;height:22px!important;font-size:8.5px!important}
:where(.s-e7157289){width:64px!important;flex:none!important}
:where(.s-e78e2a58){gap:7px!important;padding-left:18px!important}
:where(.s-e7c673f0){border-color:var(--ui-sage-soft)!important}
:where(.s-e7cf3e6d){border-top:1px solid var(--ui-line)!important;margin-top:14px!important;padding-top:12px!important}
:where(.s-e838da69){line-height:1.4!important}
:where(.s-e879c0ba){color:var(--hc-ink)!important;margin-bottom:3px!important}
:where(.s-e87eab91){display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:8px!important}
:where(.s-e8971e91){top:50px!important;right:62px!important;width:340px!important}
:where(.s-e914ce70){text-align:right!important;white-space:nowrap!important}
:where(.s-e939412e){margin:-4px 0 10px!important}
:where(.s-e969c8f7){text-transform:none!important;letter-spacing:0!important}
:where(.s-e9bbb154){font-size:18px!important;font-weight:600!important;letter-spacing:-.01em!important}
:where(.s-ea0325f8){flex:1!important;justify-content:center!important}
:where(.s-ea7d1bd1){min-height:250px!important}
:where(.s-ea9ac21b){display:flex!important;flex-direction:column!important;gap:9px!important;padding:24px 34px!important}
:where(.s-eb2aacd1){width:70px!important;height:26px!important}
:where(.s-eb2cdaa5){margin-top:4px!important}
:where(.s-eb78790f){height:24px!important}
:where(.s-eb99a4c1){white-space:nowrap!important}
:where(.s-eb9e070a){max-width:160px!important}
:where(.s-eba21bf0){font-size:14px!important;color:var(--ui-sage-deep)!important}
:where(.s-ebfe5a2b){height:25px!important}
:where(.s-ec5559aa){padding:9px 12px!important}
:where(.s-ecb7c1b9){padding:4px 8px!important;border-radius:4px!important}
:where(.s-eccef7df){margin-top:-2px!important}
:where(.s-ece3ec21){padding:6px 0!important;border-top:1px solid var(--ui-line)!important}
:where(.s-ecec0069){width:78px!important;flex:none!important}
:where(.s-ed16a39e){width:960px!important}
:where(.s-ed4dcfcb){grid-column:6 / 9!important}
:where(.s-ed524873){display:flex!important;gap:6px!important;flex-wrap:wrap!important}
:where(.s-edcd9007){align-self:end!important}
:where(.s-eddeb8ba){left:58px!important;top:120px!important}
:where(.s-ee2e7486){display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
:where(.s-ee84b733){right:22px!important;top:58px!important}
:where(.s-ee9a7539){z-index:13!important}
:where(.s-ee9f8fb0){gap:5px!important;margin-top:7px!important}
:where(.s-eee3f850){margin-top:20px!important}
:where(.s-ef4e05ee){min-height:860px!important}
:where(.s-efab37c3){padding:18px!important;min-height:420px!important}
:where(.s-efe8abb9){margin-top:4px!important;gap:8px!important}
:where(.s-eff35da5){gap:8px!important;padding:3px 0!important}
:where(.s-f0714abb){padding:9px 0!important;border-bottom:1px dashed var(--ui-line)!important}
:where(.s-f0ac9eee){width:640px!important}
:where(.s-f1319bea){margin:6px 0 12px!important}
:where(.s-f1cc7763){width:660px!important}
:where(.s-f1ce89f4){overflow:hidden!important;border-top:2px solid var(--ui-sage-soft)!important}
:where(.s-f1e68843){color:var(--fs-rose)!important}
:where(.s-f1efc7be){font-size:15px!important;font-weight:600!important}
:where(.s-f212bc61){gap:8px!important;margin-top:9px!important}
:where(.s-f25a9f00){width:34%!important}
:where(.s-f2a59f6a){line-height:1.15!important}
:where(.s-f2b7ce93){grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr) minmax(0,0.9fr) minmax(0,0.7fr)!important}
:where(.s-f2c140d5){width:11%!important}
:where(.s-f315a79f){padding-bottom:6px!important}
:where(.s-f3193bc7){width:90px!important;height:26px!important}
:where(.s-f333503d){padding:7px 10px!important;align-items:center!important}
:where(.s-f33be12c){color:var(--ui-warn)!important;letter-spacing:1px!important}
:where(.s-f3b4dfed){max-width:800px!important}
:where(.s-f3c739d6){border:1px solid var(--ui-line)!important;border-radius:9px!important;background:var(--ui-surface)!important;margin-bottom:6px!important}
:where(.s-f42197bb){grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important}
:where(.s-f4359a44){width:24px!important;height:24px!important;font-size:9px!important}
:where(.s-f43c136b){grid-template-columns:88px 1fr!important;padding:8px 10px!important}
:where(.s-f4459682){display:flex!important;gap:10px!important;align-items:center!important}
:where(.s-f4561649){margin-top:2px!important}
:where(.s-f47e3b97){width:90px!important}
:where(.s-f52daf8f){top:50px!important;right:16px!important;width:320px!important}
:where(.s-f5c90588){padding:18px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
:where(.s-f5d272c9){left:85.7%!important}
:where(.s-f6c3b7ea){min-height:300px!important}
:where(.s-f71ee22a){font-size:14.5px!important}
:where(.s-f7404217){width:880px!important}
:where(.s-f7564064){margin-top:6px!important;gap:3px!important}
:where(.s-f7d6e0a2){position:relative!important;min-height:660px!important}
:where(.s-f80ba1d3){margin:8px 0 0 23px!important}
:where(.s-f82c7260){gap:10px!important;padding:10px 14px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-f8328d25){grid-template-columns:1.4fr 0.9fr 0.9fr 0.8fr 0.7fr!important}
:where(.s-f85c702c){margin-bottom:6px!important}
:where(.s-f87fcd11){flex:none!important}
:where(.s-f892e641){grid-template-columns:0.6fr 1.8fr 1.2fr 0.5fr!important}
:where(.s-f8988c86){gap:5px!important;padding-top:4px!important}
:where(.s-f8cdb5fa){grid-template-columns:minmax(0,1.9fr) minmax(0,1.45fr) minmax(0,0.9fr) minmax(0,1fr) minmax(0,0.95fr) minmax(0,0.9fr) minmax(0,0.75fr)!important}
:where(.s-f9c55249){display:inline-flex!important;gap:8px!important}
:where(.s-f9f265fb){margin-right:3px!important}
:where(.s-f9fc2084){font-size:12px!important;display:block!important}
:where(.s-fad11344){width:920px!important}
:where(.s-fb2034fb){width:4%!important}
:where(.s-fb60b32b){width:55%!important}
:where(.s-fc14352b){position:absolute!important;left:42.9%!important;width:14.3%!important;top:0!important;bottom:0!important;background:var(--hc-accent-muted)!important}
:where(.s-fc446402){color:var(--ui-ink-2)!important;margin-top:3px!important}
:where(.s-fc9c1b21){width:90%!important}
:where(.s-fcc614a7){stroke:var(--ui-ink-4)!important}
:where(.s-fd029433){width:6%!important}
:where(.s-fd18b410){min-height:470px!important}
:where(.s-fdeec0a2){padding:14px 16px 12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important}
:where(.s-fe0f27d5){margin-bottom:8px!important;gap:6px!important}
:where(.s-fe3c94c1){margin-top:9px!important}
:where(.s-fec9bed6){display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;gap:12px!important}
:where(.s-fed67cb6){gap:6px!important;margin-bottom:9px!important}
:where(.s-fef559fd){grid-template-columns:0.35fr 0.8fr 1.8fr 2fr!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;overflow:hidden!important}
:where(.s-ff08dc17){padding:6px 12px!important;border-bottom:1px solid var(--ui-line)!important}
:where(.s-ffae025e){left:14.3%!important}
:where(.s-ffcb6e42){width:160px!important}