:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --cre8-page-max-width: 1440px; --cre8-page-gutter-x: 24px; --cre8-page-gutter-y: 20px; --cre8-sidebar-width: 240px; }
body { margin: 0; min-height: 100vh; background: light-dark(#f6f8f4, #0b0c10); color: light-dark(#17201d, #e8e8ec); }
a { color: light-dark(#0f765d, #5fc1a8); font-weight: 760; }
code { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 0.95em; }

/* ── scrollbars: themed thin scrollbars across every SSR scroll surface ─── */
* { scrollbar-width: thin; scrollbar-color: light-dark(#c4ccc2, #3a3f47) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: light-dark(#c4ccc2, #3a3f47); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: light-dark(#9fb3a9, #5b6870); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: light-dark(#0f765d, #5fc1a8); background-clip: padding-box; }

/* ── page layout: AppShell / Nav / Sidebar / Drawer / Footer ───────────── */
.primitive-app-shell { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; }
.primitive-app-shell__body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.primitive-app-shell__content { flex: 1; min-width: 0; width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: var(--cre8-page-gutter-y) var(--cre8-page-gutter-x); overflow: auto; }
/* AppShell content owns the canonical outer padding. Direct child page
   containers share one width contract, while legacy <main> wrappers have
   their padding/margin/max-width neutralized so we don't double up. */
.primitive-app-shell__content > .primitive-page,
.primitive-app-shell__content > .primitive-attention-scope,
.primitive-app-shell__content > .primitive-room-scope,
.primitive-app-shell__content > main { width: min(var(--cre8-page-max-width), 100%); box-sizing: border-box; margin: 0 auto; max-width: none; padding: 0; }

.primitive-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: light-dark(#ffffff, #16181d); border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); color: light-dark(#17201d, #e8e8ec); }
.primitive-nav__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.primitive-nav__menu { display: none; appearance: none; align-items: center; justify-content: center; flex: none; width: 36px; height: 32px; padding: 0; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #1a1d22); color: inherit; cursor: pointer; }
.primitive-nav__menu:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__menu:focus-visible { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
.primitive-nav__menu-bars { display: inline-grid; gap: 3px; width: 16px; }
.primitive-nav__menu-bars span { display: block; height: 2px; border-radius: 999px; background: currentColor; }
.primitive-nav__right { display: flex; align-items: center; gap: 8px; }
.primitive-nav__brand { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: inherit; }
.primitive-nav__brand:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__items { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.primitive-nav__item { display: inline-flex; }
.primitive-nav__link { padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; color: inherit; }
.primitive-nav__link:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__item--active .primitive-nav__link { background: light-dark(#0f765d, #2a3550); color: #ffffff; }

.primitive-sidebar { flex: 0 0 var(--cre8-sidebar-width); width: var(--cre8-sidebar-width); min-width: var(--cre8-sidebar-width); max-width: var(--cre8-sidebar-width); height: 100%; max-height: 100vh; box-sizing: border-box; padding: 16px 12px; background: light-dark(#fbfcfa, #14161a); border-right: 1px solid light-dark(#e3e7e0, #2a2c33); overflow: auto; color: light-dark(#17201d, #e8e8ec); }
.primitive-sidebar__header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: light-dark(#6c7572, #8e9591); padding: 4px 8px 12px; }
.primitive-sidebar__group { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.primitive-sidebar__group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: light-dark(#8e9591, #6c7572); padding: 6px 8px 4px; }
.primitive-sidebar__item { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.25; text-decoration: none; color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%; }
.primitive-sidebar__item:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-sidebar__item--active { background: light-dark(#0f765d, #2a3550); color: #ffffff; }
.primitive-sidebar__item--active:hover { background: light-dark(#0f765d, #2a3550); }
.primitive-sidebar__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: light-dark(#0f765d, #2a3550); color: #ffffff; font-size: 10px; font-weight: 700; }
.primitive-sidebar__item--active .primitive-sidebar__badge { background: #ffffff; color: light-dark(#0f765d, #2a3550); }

.primitive-drawer-wrap { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.primitive-drawer-wrap[data-open="false"] { visibility: hidden; }
.primitive-drawer-wrap[data-open="true"] { visibility: visible; pointer-events: auto; }
.primitive-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 22, 19, 0.4); opacity: 0; transition: opacity 180ms ease; }
.primitive-drawer-wrap[data-open="true"] .primitive-drawer__backdrop { opacity: 1; }
.primitive-drawer { position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); background: light-dark(#ffffff, #16181d); color: light-dark(#17201d, #e8e8ec); box-shadow: 0 12px 40px rgba(15, 22, 19, 0.18); display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.primitive-drawer-wrap--right .primitive-drawer { right: 0; transform: translateX(100%); }
.primitive-drawer-wrap--left .primitive-drawer { left: 0; transform: translateX(-100%); }
.primitive-drawer-wrap[data-open="true"] .primitive-drawer { transform: translateX(0); }
.primitive-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-drawer__title { margin: 0; font-size: 16px; font-weight: 700; }
.primitive-drawer__body { flex: 1; padding: 16px 18px; overflow: auto; }

.primitive-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 20px; background: light-dark(#fbfcfa, #14161a); border-top: 1px solid light-dark(#e3e7e0, #2a2c33); font-size: 12px; color: light-dark(#6c7572, #8e9591); }
.primitive-footer__item { display: inline-flex; align-items: center; gap: 4px; }
.primitive-footer__item-label { font-weight: 600; color: light-dark(#4f5854, #a8a8b0); }
.primitive-footer__item-label::after { content: ":"; }
.primitive-footer__item-value { font-variant-numeric: tabular-nums; }
.primitive-footer-attention { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin-left: auto; padding: 3px 8px; border: 1px solid light-dark(#d7ddd5, #30343a); border-radius: 999px; color: inherit; text-decoration: none; background: light-dark(#ffffff, #191c22); font-variant-numeric: tabular-nums; }
.primitive-footer-attention:hover { color: light-dark(#17201d, #f0f4ef); border-color: light-dark(#9fb3a9, #5b6870); }
.primitive-footer-attention__menu { display: inline-grid; gap: 2px; width: 12px; }
.primitive-footer-attention__menu span { display: block; height: 1px; border-radius: 999px; background: currentColor; opacity: .82; }
.primitive-footer-attention__label { font-weight: 650; color: light-dark(#4f5854, #a8a8b0); }
.primitive-footer-attention__value { font-weight: 760; color: light-dark(#17201d, #f0f4ef); }
.primitive-footer-attention__threads:not(:empty) { color: light-dark(#6c7572, #9ba4a0); }

/* canonical primitive defaults: intentionally low specificity for page overrides */
:where(button, input, select, textarea) { font: inherit; }
:where(.primitive-page) { display: flex; flex-direction: column; gap: 18px; }
:where(.primitive-page__header) { margin: 0 0 2px; }
:where(.primitive-page__title) { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
:where(.primitive-container, .primitive-live-slot, .primitive-attention-scope, .primitive-room-scope) { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:where(.primitive-room-scope) { position: relative; }
:where(.primitive-room-scope__viewers) { position: absolute; top: 10px; right: 10px; z-index: 30; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 11px; font-weight: 760; line-height: 1.2; pointer-events: none; }
:where(.primitive-room-scope__cursor-layer) { position: absolute; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; }
:where(.primitive-room-scope__cursor) { position: absolute; left: 0; top: 0; transform: translate(-2px, -2px); color: #38bdf8; font: 12px/1.2 system-ui, sans-serif; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
:where(.primitive-container__header) { margin-bottom: 2px; }
:where(.primitive-container__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-live-slot__status) { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 22px; color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; line-height: 1.2; }
:where(.primitive-live-slot__status-dot) { width: 6px; height: 6px; border-radius: 999px; background: light-dark(#a4aca8, #5f6662); }
:where(.primitive-live-slot__status[data-state="open"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="patch"] .primitive-live-slot__status-dot) { background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-live-slot__status[data-state="connecting"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="polling"] .primitive-live-slot__status-dot) { background: light-dark(#a76500, #e8b75a); }
:where(.primitive-live-slot__status[data-state="error"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="unsupported"] .primitive-live-slot__status-dot) { background: light-dark(#b03030, #f08080); }
:where(.primitive-live-slot__noscript) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: light-dark(#6c7572, #8e9591); font-size: 12px; }
:where(.primitive-live-slot__refresh) { font-size: 12px; }
:where(.primitive-card, .primitive-banner, .primitive-stat, .primitive-keyvalue, .primitive-table, .primitive-list, .primitive-accordion) { box-sizing: border-box; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 10px; background: light-dark(#ffffff, #14161a); box-shadow: 0 1px 2px light-dark(rgba(16, 24, 20, 0.05), rgba(0, 0, 0, 0.22)); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
:where(.primitive-card__header) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); background: light-dark(#fbfcfa, #191b20); border-radius: 10px 10px 0 0; }
:where(.primitive-card__title) { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 740; line-height: 1.25; }
:where(.primitive-card__badge) { color: light-dark(#6c7572, #8e9591); font-size: 12px; font-weight: 650; }
:where(.primitive-card__body) { padding: 16px; }
/* Navigable card tile (ItemCard with an href) — the whole card is a deep link. */
:where(.primitive-card__link) { display: block; text-decoration: none; color: inherit; }
:where(.primitive-card__link:hover .primitive-card) { border-color: light-dark(#0f765d, #5fc1a8); box-shadow: 0 10px 28px light-dark(rgba(15, 118, 93, 0.12), rgba(0, 0, 0, 0.36)); transform: translateY(-2px); }
:where(.primitive-card__link:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; border-radius: 10px; }
/* Grid section variant (ItemList) — responsive tile grid; the header spans full width. */
:where(.primitive-section--grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
:where(.primitive-section--grid > .primitive-section__header) { grid-column: 1 / -1; margin: 0; }
:where(.primitive-section--grid > .primitive-section__header > .primitive-section__title) { margin: 0; font-size: 13px; font-weight: 740; }
/* Workspace archetype (WorkspaceView) — toolbar / rail|main split / status. */
:where(.primitive-section--workspace) { display: grid; gap: 16px; }
:where(.primitive-row--workspace-body, .primitive-row--workspace-body-inspector, .primitive-row--workspace-body-triple) { display: grid; gap: 16px; align-items: start; }
:where(.primitive-row--workspace-body) { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
:where(.primitive-row--workspace-body-inspector) { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); }
:where(.primitive-row--workspace-body-triple) { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) minmax(220px, 320px); }
:where(.primitive-section--workspace-main) { min-width: 0; }
@media (max-width: 880px) { :where(.primitive-row--workspace-body, .primitive-row--workspace-body-inspector, .primitive-row--workspace-body-triple) { grid-template-columns: 1fr; } }
:where(.primitive-banner) { padding: 15px 18px; border-left: 4px solid light-dark(#0f765d, #5fc1a8); background: light-dark(#f3f9f6, #111f1b); }
:where(.primitive-banner__title) { margin: 0 0 6px; font-size: 15px; font-weight: 760; line-height: 1.25; }
:where(.primitive-banner__body) { margin: 0; color: light-dark(#4f5854, #a8a8b0); line-height: 1.5; }
:where(.primitive-banner--warning) { border-left-color: light-dark(#a76500, #e8b75a); background: light-dark(#fdf6ea, #201a11); }
:where(.primitive-banner--info) { border-left-color: light-dark(#0f765d, #5fc1a8); background: light-dark(#f3f9f6, #111f1b); }
:where(.primitive-banner--error) { border-left-color: light-dark(#b03030, #f08080); background: light-dark(#fbf0f0, #201414); }
:where(.primitive-banner--success) { border-left-color: light-dark(#0f765d, #5fc1a8); background: light-dark(#eef7f3, #112019); }
:where(.primitive-stat) { padding: 12px 14px; }
:where(.primitive-stat__label) { color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
:where(.primitive-stat__value) { margin-top: 4px; color: light-dark(#17201d, #f2f4f0); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 760; line-height: 1.1; overflow-wrap: anywhere; }
:where(.primitive-stat__detail) { margin-top: 4px; color: light-dark(#6c7572, #8e9591); font-size: 12px; line-height: 1.35; }
:where(.primitive-badge) { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: light-dark(#eef2ec, #1f2126); color: light-dark(#4f5854, #a8a8b0); font-size: 11px; font-weight: 700; line-height: 1.2; }
:where(.primitive-list) { padding: 12px 14px; }
:where(.primitive-list__title, .primitive-keyvalue__title, .primitive-table__title) { margin-bottom: 10px; font-size: 13px; font-weight: 740; }
:where(.primitive-list__items) { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; }
:where(.primitive-list--ordered .primitive-list__items) { list-style-position: outside; }
:where(.primitive-listitem) { padding: 0; }
:where(.primitive-listitem__content) { display: inline-flex; flex-direction: column; gap: 2px; }
:where(.primitive-listitem__icon) { margin-inline-end: 6px; color: light-dark(#6c7572, #8e9591); }
:where(.primitive-listitem__title) { font-weight: 650; }
:where(.primitive-listitem__subtitle, .primitive-listitem__body, .primitive-list__empty) { color: light-dark(#6c7572, #8e9591); font-size: 12px; line-height: 1.4; }
:where(.primitive-keyvalue) { padding: 12px 14px; }
:where(.primitive-keyvalue__list) { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; }
:where(.primitive-keyvalue__item) { display: contents; }
:where(.primitive-keyvalue__key) { color: light-dark(#6c7572, #8e9591); font-size: 12px; font-weight: 700; }
:where(.primitive-keyvalue__value) { min-width: 0; overflow-wrap: anywhere; }
:where(.primitive-keyvalue__hint) { display: block; margin-top: 2px; color: light-dark(#6c7572, #8e9591); font-size: 11px; line-height: 1.35; }
:where(.primitive-table) { overflow: hidden; }
:where(.primitive-table__title, .primitive-table__count, .primitive-table__empty) { padding: 10px 12px; }
:where(.primitive-table__scroll) { overflow: auto; }
:where(.primitive-table__grid) { width: 100%; border-collapse: collapse; font-size: 12px; }
:where(.primitive-table__head) { position: relative; z-index: 1; }
:where(.primitive-table__body) { background: transparent; }
:where(.primitive-table__heading, .primitive-table__cell) { padding: 8px 10px; border-top: 1px solid light-dark(#e9ede7, #24272e); text-align: left; vertical-align: top; }
:where(.primitive-table__heading) { color: light-dark(#4f5854, #a8a8b0); background: light-dark(#fbfcfa, #191b20); font-size: 11px; font-weight: 760; letter-spacing: 0.03em; text-transform: uppercase; }
:where(.primitive-table__heading--sortable) { cursor: pointer; }
:where(.primitive-table__row:hover) { background: light-dark(#f5f7f3, #171a1f); }
:where(.primitive-table__pagination) { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-table__cell[data-align="right"], .primitive-table__heading[data-align="right"]) { text-align: right; }
:where(.primitive-table__cell[data-align="center"], .primitive-table__heading[data-align="center"]) { text-align: center; }
:where(.primitive-form) { display: flex; flex-direction: column; gap: 12px; }
:where(.primitive-form__header) { margin-bottom: 2px; }
:where(.primitive-form__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-form__fields) { display: grid; gap: 10px; }
:where(.primitive-form__actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(.primitive-form__result) { max-height: 240px; overflow: auto; padding: 10px; border-radius: 6px; background: light-dark(#eef2ec, #111318); color: inherit; font-size: 12px; }
:where(.primitive-field) { display: flex; flex-direction: column; gap: 5px; }
:where(.primitive-field--text, .primitive-field--email, .primitive-field--select) { min-width: 0; }
:where(.primitive-field__label) { color: light-dark(#4f5854, #a8a8b0); font-size: 12px; font-weight: 700; }
:where(.primitive-field__required) { color: light-dark(#b03030, #f08080); }
:where(.primitive-field__hint) { color: light-dark(#6c7572, #8e9591); font-size: 11px; line-height: 1.35; }
:where(.primitive-field > input:not([type="checkbox"]), .primitive-field > select, .primitive-field > textarea) { min-width: 0; padding: 8px 10px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #16181d); color: inherit; }
:where(.primitive-field > textarea) { min-height: 88px; resize: vertical; }
:where(.primitive-field > input[type="checkbox"]) { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); }
:where(button.primitive-action, .primitive-button, .primitive-tabs-button, .primitive-accordion__trigger, .primitive-modal__close, .primitive-toast__close) { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 12px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #1a1d22); color: inherit; font: inherit; font-size: 13px; font-weight: 680; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
:where(.primitive-action-primary, .primitive-button-primary) { border-color: light-dark(#0f765d, #3c806f); background: light-dark(#0f765d, #2a3550); color: #ffffff; box-shadow: 0 1px 2px light-dark(rgba(15, 118, 93, 0.25), rgba(0, 0, 0, 0.25)); }
:where(.primitive-action-danger) { border-color: light-dark(#b03030, #8d3c3c); color: light-dark(#b03030, #f08080); }
:where(button.primitive-action:hover:not(:disabled), .primitive-button:hover:not(:disabled), .primitive-tabs-button:hover:not(:disabled), .primitive-accordion__trigger:hover:not(:disabled)) { background: light-dark(#eef2ec, #1f2126); }
:where(.primitive-action-primary:hover:not(:disabled), .primitive-button-primary:hover:not(:disabled)) { background: light-dark(#0c654f, #3a4d80); }
:where(button.primitive-action:disabled, .primitive-button:disabled, .primitive-tabs-button:disabled, .primitive-accordion__trigger:disabled) { opacity: 0.55; cursor: not-allowed; }
:where(button.primitive-action:focus-visible, .primitive-button:focus-visible, .primitive-tabs-button:focus-visible, .primitive-accordion__trigger:focus-visible, .primitive-sidebar__item:focus-visible, .primitive-modal__close:focus-visible, .primitive-toast__close:focus-visible, .primitive-field > input:focus-visible, .primitive-field > select:focus-visible, .primitive-field > textarea:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
:where(.primitive-tabs) { overflow: hidden; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#ffffff, #14161a); }
:where(.primitive-tabs-strip) { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); background: light-dark(#fbfcfa, #191b20); }
:where(.primitive-tabs-button) { min-height: 30px; border-color: transparent; background: transparent; color: light-dark(#4f5854, #a8a8b0); }
:where(.primitive-tabs-button--active, .primitive-tabs-button[aria-selected="true"]) { border-color: light-dark(#cdd3cb, #34403c); background: light-dark(#ffffff, #22272e); color: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-tabs-panels) { padding: 14px; }
:where(.primitive-tab[hidden]) { display: none; }
:where(.primitive-accordion) { overflow: hidden; }
:where(.primitive-accordion--multiple) { overflow: hidden; }
:where(.primitive-accordion__item + .primitive-accordion__item) { border-top: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-accordion__trigger) { width: 100%; min-height: 40px; justify-content: flex-start; border: 0; border-radius: 0; background: transparent; text-align: left; }
:where(.primitive-accordion__chevron) { display: inline-flex; width: 1em; transition: transform 160ms ease; }
:where(.primitive-accordion__item[data-state="open"] .primitive-accordion__chevron) { transform: rotate(90deg); }
:where(.primitive-accordion__title) { font-weight: 700; }
:where(.primitive-accordion__panel) { padding: 12px 14px; border-top: 1px solid light-dark(#e9ede7, #24272e); }
:where(.primitive-switch) { display: flex; flex-direction: column; gap: 4px; }
:where(.primitive-switch__label) { display: inline-flex; align-items: center; gap: 8px; color: light-dark(#4f5854, #a8a8b0); font-size: 13px; font-weight: 700; }
:where(.primitive-switch__input) { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-switch__text) { user-select: none; }
:where(.primitive-switch__help, .primitive-switch__error) { font-size: 11px; line-height: 1.35; }
:where(.primitive-switch__help) { color: light-dark(#6c7572, #8e9591); }
:where(.primitive-switch__error) { color: light-dark(#b03030, #f08080); }
:where(.primitive-switch--disabled) { opacity: 0.55; }
:where(.primitive-switch--invalid .primitive-switch__input) { outline: 2px solid light-dark(#b03030, #f08080); outline-offset: 1px; }
:where(.primitive-checkbox--invalid .primitive-checkbox__control) { outline: 2px solid light-dark(#b03030, #f08080); outline-offset: 1px; }
:where(.primitive-modal__backdrop) { position: fixed; inset: 0; z-index: 70; background: rgba(15, 22, 19, 0.46); }
:where(.primitive-modal) { position: fixed; z-index: 71; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); transform: translate(-50%, -50%); overflow: hidden; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 10px; background: light-dark(#ffffff, #14161a); box-shadow: 0 24px 70px rgba(15, 22, 19, 0.28); }
:where(.primitive-modal__header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-modal__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-modal__body) { max-height: calc(100vh - 140px); overflow: auto; padding: 14px; }
:where(.primitive-toast) { display: flex; align-items: flex-start; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#ffffff, #14161a); box-shadow: 0 12px 36px rgba(15, 22, 19, 0.18); }
:where(.primitive-toast__title) { font-weight: 750; }
:where(.primitive-toast__body) { color: light-dark(#4f5854, #a8a8b0); font-size: 13px; line-height: 1.4; }
:where(.primitive-toast__icon) { flex: none; }
:where(.primitive-progress) { display: flex; flex-direction: column; gap: 6px; }
:where(.primitive-progress--complete .primitive-progress__fill) { background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-progress--indeterminate .primitive-progress__fill) { width: 38%; min-width: 38%; }
:where(.primitive-progress__header) { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: light-dark(#6c7572, #8e9591); font-size: 12px; }
:where(.primitive-progress__label, .primitive-progress__percent) { font-weight: 700; }
:where(.primitive-progress__track) { overflow: hidden; height: 8px; border-radius: 999px; background: light-dark(#e3e7e0, #24272e); }
:where(.primitive-progress__fill) { height: 100%; border-radius: inherit; background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-skeleton) { display: flex; flex-direction: column; gap: 8px; }
:where(.primitive-skeleton__line) { min-height: 12px; border-radius: 999px; background: light-dark(#e3e7e0, #24272e); }
:where(.primitive-media-wrap) { display: grid; place-items: center; overflow: hidden; min-height: 160px; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#eef2ec, #08090b); }
:where(.primitive-media-wrap--video, .primitive-media-wrap--audio) { width: 100%; }
:where(.primitive-media-wrap > video, .primitive-media-wrap > audio) { width: 100%; max-width: 100%; }
:where(.primitive-media-placeholder) { padding: 12px; color: light-dark(#6c7572, #8e9591); font-size: 12px; text-align: center; }
:where(.primitive-client-island) { display: grid; place-items: center; min-width: 0; min-height: 120px; border: 1px dashed light-dark(#cdd3cb, #2a2c33); border-radius: 8px; background: light-dark(#fbfcfa, #111318); }
:where(.primitive-client-island__fallback) { color: light-dark(#6c7572, #8e9591); font-size: 12px; }

@media (max-width: 760px) {
  :root { --cre8-page-gutter-x: 16px; --cre8-page-gutter-y: 14px; }
  .primitive-nav { z-index: 60; }
  .primitive-nav__menu { display: inline-flex; }
  .primitive-sidebar { display: none; }
  body.cre8-nav-open .primitive-sidebar { display: block; position: fixed; top: 52px; left: 0; bottom: 0; width: min(280px, 86vw); max-width: 86vw; z-index: 50; box-shadow: 0 18px 50px rgba(15, 22, 19, 0.32); }
}

/* ── form primitives: Input / Checkbox / Select ────────────────────────── */
.primitive-input, .primitive-select { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.primitive-input__label, .primitive-select__label { font-size: 12px; font-weight: 600; color: light-dark(#4f5854, #a8a8b0); }
.primitive-input__required, .primitive-select__required, .primitive-checkbox__required { color: light-dark(#b03030, #f08080); margin-left: 2px; }
.primitive-input__control, .primitive-select__control { padding: 8px 10px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #16181d); color: inherit; font: inherit; font-size: 14px; min-width: 0; }
.primitive-input__control:focus, .primitive-select__control:focus, .primitive-checkbox__control:focus { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 1px; }
.primitive-input--invalid .primitive-input__control, .primitive-select--invalid .primitive-select__control { border-color: light-dark(#b03030, #f08080); }
.primitive-input--disabled, .primitive-select--disabled, .primitive-checkbox--disabled { opacity: 0.55; }
.primitive-input__description, .primitive-select__description, .primitive-checkbox__description { font-size: 11px; color: light-dark(#6c7572, #8e9591); }
.primitive-input__error, .primitive-select__error, .primitive-checkbox__error { font-size: 11px; color: light-dark(#b03030, #f08080); }
textarea.primitive-input__control { min-height: 80px; resize: vertical; font-family: inherit; }
.primitive-checkbox { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.primitive-checkbox__label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.primitive-checkbox--disabled .primitive-checkbox__label { cursor: not-allowed; }
.primitive-checkbox__control { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); cursor: inherit; }
.primitive-checkbox__text { user-select: none; }

/* ── Calendar primitive (SSR calendar.rs + React Calendar.tsx) ──────────── */
.primitive-calendar { border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; overflow: hidden; background: light-dark(#ffffff, #16181d); }
.primitive-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-calendar__title { font-size: 14px; font-weight: 740; color: light-dark(#17201d, #e8e8ec); }
.primitive-calendar__nav { display: inline-flex; align-items: center; gap: 6px; }
.primitive-calendar__month { font-size: 12px; font-weight: 640; color: light-dark(#4f5854, #a8a8b0); }
.primitive-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: light-dark(#fbfcfa, #14161a); border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-calendar__weekday { padding: 6px 8px; font-size: 11px; font-weight: 640; text-align: right; color: light-dark(#6c7572, #8e9591); }
.primitive-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.primitive-calendar__cell { min-height: 78px; padding: 4px 6px; border-right: 1px solid light-dark(#eef1ec, #23252b); border-bottom: 1px solid light-dark(#eef1ec, #23252b); display: flex; flex-direction: column; gap: 3px; }
.primitive-calendar__cell:nth-child(7n) { border-right: none; }
.primitive-calendar__cell[data-in-month="false"] { background: light-dark(#fafbf9, #131519); }
.primitive-calendar__cell[data-in-month="false"] .primitive-calendar__daynum { color: light-dark(#b8c0bb, #565a61); }
.primitive-calendar__cell[data-today="true"] { background: light-dark(#eef7f3, #16241f); box-shadow: inset 0 0 0 2px light-dark(#0f765d, #5fc1a8); }
.primitive-calendar__daynum { font-size: 11px; font-weight: 600; text-align: right; color: light-dark(#4f5854, #a8a8b0); }
.primitive-calendar__cell[data-today="true"] .primitive-calendar__daynum { color: light-dark(#0f765d, #5fc1a8); font-weight: 760; }
.primitive-calendar__event { display: block; padding: 2px 6px; border-radius: 4px; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: light-dark(#e7f1ed, #1c2a25); color: light-dark(#0f765d, #8fd9c5); border: 1px solid light-dark(#cfe5dd, #244038); cursor: default; }
.primitive-calendar__event[data-kind="deadline"] { background: light-dark(#fdeede, #2e241a); color: light-dark(#9a5b16, #e8b577); border-color: light-dark(#f0d6b0, #43331f); }
.primitive-calendar__event[data-status="gen"] { background: light-dark(#efe7fb, #241c33); color: light-dark(#6b3fb0, #c2a8e8); border-color: light-dark(#dccdf0, #382a4d); }
.primitive-calendar__event[data-status="cancelled"] { opacity: 0.55; text-decoration: line-through; }
.primitive-calendar__empty, .primitive-calendar__count { margin: 0; padding: 8px 12px; font-size: 11px; color: light-dark(#6c7572, #8e9591); }

/* ── shared-layer refinements: stat grids + empty states + focus rings ───── */
/* Stat groups: a responsive grid of metric cards instead of a stacked column.
   Scoped via :has() to rows that directly hold stats, so other rows are untouched. */
:where(.primitive-row:has(> .primitive-stat)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: stretch; }
/* Zero-data states read as intentional, not forgotten: centered, breathing room. */
:where(.primitive-list__empty, .primitive-table__empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 24px 16px; text-align: center; color: light-dark(#8a938e, #7c857f); font-size: 13px; line-height: 1.45; }
/* Refined focus: a soft accent halo accompanies the outline on interactive elements. */
:where(button.primitive-action, .primitive-button, .primitive-button-primary, .primitive-tabs-button, .primitive-accordion__trigger, .primitive-sidebar__item, .primitive-card__link, .primitive-nav__link, .primitive-nav__menu, .primitive-field > input, .primitive-field > select, .primitive-field > textarea, .primitive-input__control, .primitive-select__control, .primitive-checkbox__control):focus-visible { box-shadow: 0 0 0 4px light-dark(rgba(15, 118, 93, 0.18), rgba(95, 193, 168, 0.22)); }

/* Legacy workbench-fragment utility. Live-snapshot pill rows across several
   apps (capitalstrategy .cs-*, breath, meditation, studio) mark up a
   horizontal wrapping row as `class="row"` and carry an inline gap, but no
   global `.row` rule ever existed — so `display:flex` (and the gap) never
   applied and the pills fell back to bare inline flow. Define it once here, in
   the sheet every SSR page loads. Scoped overrides (`.shop-live-snapshot .row`,
   `.market-live-snapshot .row`) still win on specificity; per-use inline gaps
   (breath 12px/8px, meditation 8px) still layer on top. */
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── App hero (Section{variant:"app-hero"}) ──────────────────────────────
   The standard page-top for app SSR documents: WorkbenchPageBuilder (and so
   DetailPageBuilder / ListPageBuilder) emits it. Mirrors the client ViewHero
   (view-client/src/layout/route-kit/view-kit.css) — a flush card with a 135°
   accent wash over a vertical depth gradient, eyebrow/title/subtitle copy,
   and the stat row restyled as a translucent metric strip. */
@keyframes cre8AppHeroIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Flush / full-bleed: negative gutter margins cancel the content-region
   padding so the hero sits edge-to-edge against the sidebar (left), the top
   bar, and the content-region right edge. Inner left padding is restored to
   the gutter so the hero text still aligns with the body content below it.
   No side/top border or radius — a flush band, with only a bottom rule to
   separate it from the page body. */
.primitive-section--app-hero { display: grid; gap: 10px; align-content: center; box-sizing: border-box; margin: calc(-1 * var(--cre8-page-gutter-y, 20px)) calc(-1 * var(--cre8-page-gutter-x, 24px)) 4px; padding: 26px var(--cre8-page-gutter-x, 24px); overflow: hidden; border: 0; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 0; background: linear-gradient(135deg, color-mix(in srgb, light-dark(#eef2ef, #1a1d22) 88%, light-dark(#0f765d, #5fc1a8) 12%), transparent 58%), linear-gradient(180deg, light-dark(#f7f9f7, #14161a), light-dark(#ffffff, #0e1013)); animation: cre8AppHeroIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
.primitive-section--app-hero > .primitive-section-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.primitive-section--app-hero > .primitive-section-eyebrow .primitive-section-eyebrow__sep { color: light-dark(#0f765d, #5fc1a8); font-weight: 700; }
.primitive-section--app-hero > h1 { max-width: 900px; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; }
.primitive-section--app-hero > p { max-width: 760px; margin: 0; color: light-dark(#6c7572, #8e9591); font-size: 14px; line-height: 1.5; }
.primitive-section--app-hero > .primitive-row { margin-top: 6px; }
.primitive-section--app-hero .primitive-stat { border-color: light-dark(rgba(16, 24, 20, 0.10), rgba(255, 255, 255, 0.08)); background: light-dark(rgba(255, 255, 255, 0.55), rgba(10, 12, 14, 0.35)); box-shadow: none; }