@ketvietlab/ketsuite 0.1.1

package/dist/modules/backend/design/admin.css

@@ -0,0 +1,4229 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+   KetSuite backend — enterprise-dense application styling.
+
+   The [data-ui] attributes are the stable interface. Rules stay intentionally
+   shallow so ket.user can override them without specificity fights.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+/* The stable hook inventory is generated beside the components in
+   packages/ketsuite/src/ui/* and locked by test/backend-ui.test.ts. Keeping a
+   second hand-written list here was the drift this kit was created to remove. */
+
+@layer ket.app {
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
+
+  :where([hidden]) {
+    display: none !important;
+  }
+
+  :where(html) {
+    min-block-size: 100%;
+    background: var(--admin-bg);
+    font-family: var(--admin-font);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(body) {
+    min-block-size: 100%;
+    margin: 0;
+    background: var(--admin-bg);
+    color: var(--admin-ink);
+    font-family: inherit;
+    font-size: var(--admin-size-base);
+    line-height: 1.45;
+  }
+
+  :where(button, input, select, textarea) {
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(button, a) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(a) {
+    color: inherit;
+  }
+
+  :where(button, [href], input, select, textarea, summary):focus-visible {
+    outline: 2px solid var(--admin-focus-border);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background: var(--admin-accent-line);
+    color: var(--admin-ink);
+  }
+
+  * {
+    scrollbar-color: var(--admin-line-strong) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* ── Application shell ─────────────────────────────────────────────────── */
+
+  [data-ui="shell"] {
+    display: grid;
+    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
+    min-inline-size: 0;
+    background: var(--admin-bg);
+  }
+
+  body > [data-ui="shell"] {
+    min-block-size: 100dvh;
+  }
+
+  /* ── Sidebar ───────────────────────────────────────────────────────────────
+     Ported from vidoo_backend_theme, so the framework and the Odoo deployment
+     look like one product: 228px, a quiet tinted ground, and one column that
+     carries the brand, a menu search, the apps, the open app's menu, and the
+     systray at the foot. There is no application bar across the top — the row
+     above the content is the control panel, and it belongs to the view. */
+
+  [data-ui="sidebar"] {
+    z-index: 20;
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+    background: var(--admin-bg);
+    border-inline-end: 1px solid var(--admin-line);
+    white-space: nowrap;
+  }
+
+  [data-ui="sidebar-main"] {
+    display: flex;
+    min-block-size: 0;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  [data-ui="sidebar-header"] {
+    flex-shrink: 0;
+    padding: 0.75rem 0.75rem 0.5rem;
+  }
+
+  [data-ui="sidebar-brand"] {
+    display: flex;
+    inline-size: 100%;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background-color var(--admin-motion-fast);
+  }
+
+  [data-ui="sidebar-brand"]:hover {
+    background: var(--admin-surface);
+  }
+
+  [data-ui="sidebar-brand-name"] {
+    overflow: hidden;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    text-overflow: ellipsis;
+  }
+
+  [data-ui="sidebar-brand-chevron"] {
+    display: grid;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--admin-ink-muted);
+  }
+
+  /* The menu search, not the record search. This one narrows the sidebar; the
+     one in the control panel narrows the list. Both are GET forms. */
+  [data-ui="sidebar-search"] {
+    position: relative;
+    flex-shrink: 0;
+    margin: 0 0.75rem 0.625rem;
+  }
+
+  [data-ui="sidebar-search-icon"] {
+    position: absolute;
+    inset-inline-start: 0.625rem;
+    inset-block-start: 50%;
+    display: grid;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    place-items: center;
+    color: var(--admin-ink-muted);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  [data-ui="sidebar-search-input"] {
+    inline-size: 100%;
+    padding: 0.4375rem 0.625rem 0.4375rem 1.875rem;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    outline: none;
+    transition:
+      border-color var(--admin-motion-fast),
+      box-shadow var(--admin-motion-fast);
+  }
+
+  [data-ui="sidebar-search-input"]::placeholder {
+    color: var(--admin-ink-muted);
+  }
+
+  [data-ui="sidebar-search-input"]:focus {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+  }
+
+  /* The scroll lives here, not on the sidebar: the brand, the search and the
+     foot stay put while forty menu entries move under them. */
+  [data-ui="sidebar-nav"] {
+    flex: 1 1 auto;
+    padding: 0 0.5rem 0.75rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  [data-ui="sidebar-nav"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-ui="sidebar-section-label"] {
+    margin: 0.875rem 0.5rem 0.375rem;
+    color: var(--admin-ink-secondary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  [data-ui="sidebar-section-label"]:first-child {
+    margin-block-start: 0;
+  }
+
+  [data-ui="sidebar-section-label"][data-scope="app"] {
+    margin-block-start: 1.125rem;
+    padding-block-start: 0.75rem;
+    border-block-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="sidebar-empty"] {
+    margin: 0.5rem;
+    color: var(--admin-ink-muted);
+    font-size: 0.75rem;
+    white-space: normal;
+  }
+
+  [data-ui="app-list"],
+  [data-ui="menu"],
+  [data-ui="menu-section-children"] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  [data-ui="app-entry"],
+  [data-ui="menu-item"] {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3125rem 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.35;
+    text-decoration: none;
+    transition:
+      background-color var(--admin-motion-fast),
+      color var(--admin-motion-fast);
+  }
+
+  [data-ui="app-entry"]:hover,
+  [data-ui="menu-item"]:hover {
+    background: var(--admin-surface);
+  }
+
+  [data-ui="app-entry"][data-active="true"],
+  [data-ui="menu-item"][data-active="true"] {
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+    font-weight: 600;
+  }
+
+  [data-ui="app-icon"] {
+    display: grid;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--admin-ink-secondary);
+  }
+
+  [data-ui="menu-icon"] {
+    display: grid;
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--admin-ink-secondary);
+  }
+
+  [data-ui="app-entry"][data-active="true"] [data-ui="app-icon"] {
+    color: var(--admin-focus-border);
+  }
+
+  [data-ui="app-monogram"] {
+    display: grid;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    place-items: center;
+    border-radius: var(--admin-radius-xs);
+    background: var(--admin-surface-hover);
+    font-size: 0.625rem;
+    font-weight: 700;
+  }
+
+  [data-ui="app-name"],
+  [data-ui="menu-label"] {
+    overflow: hidden;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    text-overflow: ellipsis;
+  }
+
+  [data-ui="icon"] {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+  }
+
+  [data-ui="app-icon"] > [data-ui="icon"],
+  [data-ui="menu-icon"] > [data-ui="icon"],
+  [data-ui="sidebar-brand-chevron"] > [data-ui="icon"],
+  [data-ui="sidebar-search-icon"] > [data-ui="icon"],
+  [data-ui="menu-section-chevron"] > [data-ui="icon"],
+  [data-ui="chrome-search-icon"] > [data-ui="icon"],
+  [data-ui="indicator-icon"] > [data-ui="icon"],
+  [data-ui="pager-step"] > [data-ui="icon"],
+  [data-ui="view-kind"] > [data-ui="icon"],
+  [data-ui="facet-remove"] > [data-ui="icon"],
+  [data-ui="col-config-open"] > [data-ui="icon"] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [data-ui="pager-step"] > [data-ui="icon"],
+  [data-ui="view-kind"] > [data-ui="icon"],
+  [data-ui="col-config-open"] > [data-ui="icon"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+
+  [data-ui="chrome-search-icon"] {
+    display: grid;
+    inline-size: 0.8125rem;
+    block-size: 0.8125rem;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--admin-ink-muted);
+  }
+
+  [data-ui="chrome-create"] > [data-ui="icon"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    margin-inline-end: 0.25rem;
+  }
+
+  [data-ui="indicator-icon"] {
+    display: grid;
+    inline-size: 1rem;
+    block-size: 1rem;
+    place-items: center;
+  }
+
+  /* ── The open app's menu ───────────────────────────────────────────────── */
+
+  [data-ui="menu-item-wrap"] {
+    display: block;
+  }
+
+  [data-ui="menu-section-title"] {
+    display: flex;
+    inline-size: 100%;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.5rem 0.25rem;
+    margin-block-start: 0.125rem;
+    border-radius: var(--admin-radius-sm);
+    cursor: pointer;
+    list-style: none;
+    transition: background-color var(--admin-motion-fast);
+  }
+
+  [data-ui="menu-section-title"]:hover {
+    background: var(--admin-surface);
+  }
+
+  [data-ui="menu-section-title"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-ui="menu-section-chevron"] {
+    display: grid;
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--admin-ink-secondary);
+    transition: transform var(--admin-motion-fast);
+  }
+
+  [data-ui="menu-section"][open] > [data-ui="menu-section-title"] [data-ui="menu-section-chevron"] {
+    transform: rotate(90deg);
+  }
+
+  [data-ui="menu-section-text"] {
+    overflow: hidden;
+    color: var(--admin-ink-secondary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+
+  /* A rule down the side, so depth is legible without counting indents. */
+  [data-ui="menu-section-children"] {
+    margin-inline-start: 1rem;
+    padding-inline-start: 0.75rem;
+    border-inline-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="menu-item-wrap"][data-depth="1"] > * > [data-ui="menu-section-children"],
+  [data-ui="menu-item-wrap"][data-depth="2"] > * > [data-ui="menu-section-children"] {
+    margin-inline-start: 0.75rem;
+  }
+
+  [data-ui="menu-dot"] {
+    inline-size: 0.25rem;
+    block-size: 0.25rem;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--admin-ink-muted);
+  }
+
+  [data-ui="menu-item"][data-active="true"] [data-ui="menu-dot"] {
+    background: var(--admin-focus-border);
+  }
+
+  [data-ui="menu-item"][data-active="true"] [data-ui="menu-icon"] {
+    color: var(--admin-focus-border);
+  }
+
+  /* ── List chrome ───────────────────────────────────────────────────────────
+     The row above a list: what you can add, where you are, what you filtered on,
+     which slice you are looking at, and how you want to look at it. Every one of
+     them is a link or a form — no client state, so the back button works. */
+
+  [data-ui="chrome-lead"],
+  [data-ui="chrome-tail"] {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--admin-gap-sm);
+  }
+
+  [data-ui="chrome-lead"] {
+    flex: 0 1 auto;
+  }
+
+  [data-ui="chrome-tail"] {
+    flex: 0 0 auto;
+  }
+
+  [data-ui="chrome-create"] {
+    display: inline-flex;
+    min-block-size: var(--admin-control-height);
+    align-items: center;
+    padding-inline: 0.75rem;
+    border: 1px solid transparent;
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-accent);
+    color: var(--admin-accent-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  [data-ui="crumbs"] {
+    display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="crumb"] {
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    text-decoration: none;
+  }
+
+  [data-ui="crumb"][aria-current="page"] {
+    color: var(--admin-ink);
+    font-weight: 600;
+  }
+
+  /* The separator is CSS, so the markup stays a plain list of names. */
+  [data-ui="crumb"] + [data-ui="crumb"]::before {
+    margin-inline-end: var(--admin-gap-xs);
+    color: var(--admin-ink-muted);
+    content: "/";
+  }
+
+  [data-ui="chrome-search"] {
+    display: flex;
+    inline-size: min(100%, 32rem);
+    margin-inline: auto;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    min-block-size: var(--admin-control-height);
+    padding-inline: 0.5rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+  }
+
+  [data-ui="chrome-search"]:focus-within {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+  }
+
+  [data-ui="chrome-search-input"] {
+    flex: 1 1 8rem;
+    min-inline-size: 6rem;
+    border: 0;
+    background: none;
+    color: var(--admin-ink);
+    font: inherit;
+    font-size: 0.8125rem;
+    outline: none;
+  }
+
+  /* A facet is what you filtered on, and the × is how you undo it. Both visible:
+     a filter you cannot see is a list that is lying about how much it has. */
+  [data-ui="facet"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  [data-ui="facet-remove"] {
+    display: grid;
+    inline-size: 1rem;
+    block-size: 1rem;
+    place-items: center;
+    border-radius: var(--admin-radius-sm);
+    color: inherit;
+    line-height: 1;
+    text-decoration: none;
+  }
+
+  [data-ui="search-menu"] {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  [data-ui="search-menu-open"] {
+    display: inline-flex;
+    min-block-size: 1.75rem;
+    align-items: center;
+    gap: 0.25rem;
+    padding-inline: 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink-secondary);
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 600;
+    list-style: none;
+  }
+
+  [data-ui="search-menu-open"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-ui="search-menu-open"] > [data-ui="icon"] {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+  }
+
+  [data-ui="search-menu-content"] {
+    position: absolute;
+    z-index: 20;
+    inset-block-start: calc(100% + 0.375rem);
+    inset-inline-end: 0;
+    display: grid;
+    min-inline-size: 14rem;
+    max-block-size: 24rem;
+    padding: 0.375rem;
+    overflow: auto;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-float);
+  }
+
+  [data-ui="search-menu-item"] {
+    display: flex;
+    min-block-size: 2rem;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    text-decoration: none;
+  }
+
+  a[data-ui="search-menu-item"]:hover,
+  a[data-ui="search-menu-item"][data-active="true"] {
+    background: var(--admin-accent-soft);
+  }
+
+  [data-ui="search-menu-item"][data-nested="true"] {
+    display: grid;
+    block-size: auto;
+    color: var(--admin-ink-secondary);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  [data-ui="custom-filter"] {
+    display: grid;
+    gap: 0.375rem;
+    margin: 0.375rem 0 0;
+    padding: 0.5rem 0 0;
+    border: 0;
+    border-block-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="custom-filter"] select,
+  [data-ui="custom-filter"] input,
+  [data-ui="custom-filter"] button {
+    min-block-size: 2rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font: inherit;
+  }
+
+  [data-ui="custom-filter"] button {
+    background: var(--admin-accent);
+    color: var(--admin-accent-ink);
+    cursor: pointer;
+  }
+
+  [data-ui="pager"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-ui="pager-step"] {
+    display: grid;
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    place-items: center;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    font-size: 0.875rem;
+    line-height: 1;
+    text-decoration: none;
+  }
+
+  /* An arrow with nowhere to go stays put and says so, rather than disappearing —
+     a toolbar that changes width as you page is a toolbar you cannot aim at. */
+  [data-ui="pager-step"][aria-disabled="true"] {
+    border-color: var(--admin-line);
+    color: var(--admin-ink-muted);
+    cursor: default;
+  }
+
+  [data-ui="group-pager"] > td {
+    text-align: end;
+  }
+
+  [data-ui="group-pager"] > td > span,
+  [data-ui="group-pager"] > td > a {
+    display: inline-grid;
+    min-inline-size: 2rem;
+    min-block-size: 2rem;
+    place-items: center;
+    color: var(--admin-ink-secondary);
+    text-decoration: none;
+  }
+
+  [data-ui="group-pager"] > td > span:first-child {
+    display: inline;
+    margin-inline-end: var(--admin-gap-xs);
+    font-size: 0.75rem;
+  }
+
+  [data-ui="view-switch"] {
+    display: inline-flex;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    overflow: hidden;
+  }
+
+  [data-ui="view-kind"] {
+    display: grid;
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    place-items: center;
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    line-height: 1;
+    text-decoration: none;
+  }
+
+  [data-ui="view-kind"] + [data-ui="view-kind"] {
+    border-inline-start: 1px solid var(--admin-line-strong);
+  }
+
+  [data-ui="view-kind"][data-active="true"] {
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+  }
+
+  /* ── Kanban ───────────────────────────────────────────────────────────────── */
+
+  [data-ui="kanban"] {
+    display: grid;
+    gap: var(--admin-gap-sm);
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  }
+
+  [data-ui="kanban-card"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--admin-gap-xs);
+    padding: var(--admin-gap-sm);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  [data-ui="kanban-title"] {
+    margin: 0;
+    color: var(--admin-ink);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  [data-ui="kanban-meta"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="kanban-note"] {
+    margin: 0;
+    color: var(--admin-ink-secondary);
+    font-size: 0.75rem;
+  }
+
+  [data-ui="main"] {
+    min-inline-size: 0;
+  }
+
+  [data-ui="topbar"] {
+    z-index: 10;
+    display: flex;
+    min-block-size: var(--admin-topbar-height);
+    align-items: center;
+    gap: var(--admin-gap);
+    padding-inline: var(--admin-gap);
+    background: color-mix(in srgb, var(--admin-surface) 94%, transparent);
+    border-block-end: 1px solid var(--admin-line);
+    backdrop-filter: blur(10px);
+  }
+
+  body > [data-ui="shell"] [data-ui="topbar"] {
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  [data-ui="context-switcher"] {
+    display: flex;
+    min-inline-size: 0;
+    max-inline-size: min(24rem, 42vw);
+    flex-direction: column;
+    margin-inline-start: auto;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    text-align: end;
+    text-decoration: none;
+    transition:
+      border-color var(--admin-motion-fast),
+      background-color var(--admin-motion-fast);
+  }
+
+  [data-ui="context-switcher"]:hover,
+  [data-ui="context-switcher"]:focus-visible {
+    border-color: var(--admin-accent-line);
+    background: var(--admin-accent-soft);
+  }
+
+  [data-ui="context-company"],
+  [data-ui="context-branch"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui="context-company"] {
+    font-size: var(--admin-size-sm);
+    font-weight: 650;
+  }
+
+  [data-ui="context-branch"] {
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+  }
+
+  [data-ui="title"] {
+    margin: 0;
+    flex: 0 0 auto;
+    white-space: nowrap;
+    color: var(--admin-ink);
+    font-size: var(--admin-size-lg);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    line-height: 1.25;
+  }
+
+  [data-ui="content"] {
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--admin-gap) var(--admin-gap) var(--admin-gap-lg);
+    overflow-x: auto;
+  }
+
+  /* Screens that are reading rather than scanning keep their measure. */
+  [data-ui="content"]:has([data-ui="app-groups"]),
+  [data-ui="content"]:has([data-ui="tokens"]) {
+    inline-size: min(100%, var(--admin-page-max));
+    margin-inline: auto;
+  }
+
+  /* A list runs to both edges of the pane and starts directly under the bar:
+     the border, the radius and the drop shadow were drawing a card around
+     something that is not a card. */
+  [data-ui="content"]:has([data-ui="table-scroll"]):not(:has([data-ui="record-workspace"])) {
+    padding: 0;
+  }
+
+  [data-ui="content"]:has([data-ui="table-scroll"]):not(:has([data-ui="record-workspace"]))
+    [data-ui="table-scroll"] {
+    border-radius: 0;
+    border-block-start: 0;
+    border-inline: 0;
+    box-shadow: none;
+  }
+
+  /* ── App registry ──────────────────────────────────────────────────────── */
+
+  [data-ui="app-groups"] {
+    display: grid;
+    gap: 1.375rem;
+  }
+
+  [data-ui="app-group"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap-sm);
+  }
+
+  [data-ui="group-title"] {
+    margin: 0;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.075em;
+    line-height: 1.4;
+    text-transform: uppercase;
+  }
+
+  [data-ui="app-grid"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
+    gap: var(--admin-gap);
+  }
+
+  [data-ui="app-card"] {
+    position: relative;
+    display: grid;
+    min-inline-size: 0;
+    min-block-size: 10rem;
+    grid-template-rows: auto auto 1fr auto;
+    padding: var(--admin-gap-md);
+    overflow: hidden;
+    border: 1px solid var(--admin-line);
+    border-block-start: 2px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+
+  [data-ui="app-card"][data-state="installed"] {
+    border-block-start-color: var(--admin-accent);
+  }
+
+  [data-ui="app-title"] {
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--admin-ink);
+    font-size: 0.9375rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  [data-ui="app-summary"] {
+    min-inline-size: 0;
+    margin: 0.25rem 0 0;
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  [data-ui="app-meta"] {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-content: start;
+    gap: 0.1875rem var(--admin-gap-sm);
+    margin: var(--admin-gap) 0 0;
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-sm);
+    line-height: 1.35;
+  }
+
+  [data-ui="app-meta"] dt {
+    color: var(--admin-ink-secondary);
+    font-weight: 600;
+  }
+
+  [data-ui="app-meta"] dd {
+    min-inline-size: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  [data-ui="app-meta-value"][data-kind="dependents"] {
+    color: var(--admin-ink-secondary);
+    font-weight: 600;
+  }
+
+  [data-ui="app-actions"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-block-start: var(--admin-gap);
+    padding-block-start: var(--admin-gap);
+    border-block-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="app-action"] {
+    /* A button and a link both wear this. The rule was written for the button, so
+     an anchor got the border and none of the shape: min-block-size does nothing
+     to an inline box, and the browser kept its underline. Now it fits either. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    min-block-size: var(--admin-control-height);
+    padding-inline: 0.75rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+    cursor: pointer;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    transition:
+      background-color var(--admin-motion-fast),
+      border-color var(--admin-motion-fast),
+      color var(--admin-motion-fast),
+      transform var(--admin-motion-fast);
+  }
+
+  [data-ui="app-action"][data-action="install"] {
+    border-color: var(--admin-accent);
+    background: var(--admin-accent);
+    color: var(--admin-accent-ink);
+  }
+
+  [data-ui="app-action"]:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  [data-ui="app-action"]:disabled {
+    border-color: var(--admin-line);
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-disabled);
+    cursor: not-allowed;
+    opacity: 0.8;
+    transform: none;
+  }
+
+  /* ── Data list ────────────────────────────────────────────────────────── */
+
+  /* ── Data table ────────────────────────────────────────────────────────────
+     One table, drawn the same way everywhere: columns arrive as data, so the row
+     height, the header and the overflow behaviour are decided here once and no
+     module gets to disagree.
+
+     The scroll box is the important part. A wide list must scroll inside itself,
+     because a page that scrolls sideways takes the sidebar with it. */
+
+  [data-ui="table-scroll"] {
+    overflow-x: auto;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+
+  [data-ui="table"] {
+    inline-size: 100%;
+    border-spacing: 0;
+    background: var(--admin-surface);
+    /* auto, not fixed: a name column and a status column do not want the same
+       share of the width, and nothing here knows which is which. */
+    table-layout: auto;
+  }
+
+  [data-ui="table"] th {
+    position: sticky;
+    z-index: 1;
+    inset-block-start: 0;
+    block-size: 2rem;
+    padding: 0 var(--admin-gap);
+    background: var(--admin-surface-subtle);
+    border-block-end: 1px solid var(--admin-line);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.055em;
+    line-height: 1.2;
+    text-align: start;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  [data-ui="row"] {
+    block-size: var(--admin-row-height);
+  }
+
+  [data-ui="group-row"] td {
+    padding: 0;
+    border-block-end: 1px solid var(--admin-line);
+    background: var(--admin-surface-subtle);
+  }
+
+  [data-ui="group-link"] {
+    display: flex;
+    min-block-size: var(--admin-row-height);
+    align-items: center;
+    gap: 0.5rem;
+    padding-inline: var(--admin-gap);
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 650;
+    text-decoration: none;
+  }
+
+  [data-ui="group-indent"] {
+    inline-size: calc(var(--group-depth) * 1rem);
+    flex: 0 0 auto;
+  }
+
+  [data-ui="group-link"] > [data-ui="icon"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+
+  [data-ui="group-count"] {
+    min-inline-size: 1.5rem;
+    margin-inline-start: auto;
+    padding: 0.125rem 0.375rem;
+    border-radius: 999px;
+    background: var(--admin-surface-hover);
+    color: var(--admin-ink-secondary);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  [data-ui="row"]:last-child td {
+    border-block-end: 0;
+  }
+
+  [data-ui="row"] td {
+    padding: 0.375rem var(--admin-gap);
+    border-block-end: 1px solid var(--admin-line);
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.35;
+    text-align: start;
+    vertical-align: middle;
+    transition: background-color var(--admin-motion-fast);
+  }
+
+  /* The first column is what you are looking for; everything else qualifies it. */
+  [data-ui="row"] td:first-child {
+    color: var(--admin-ink);
+    font-weight: 500;
+  }
+
+  [data-ui="row-link"] {
+    color: inherit;
+    text-underline-offset: 0.14em;
+  }
+
+  [data-ui="cell"] code {
+    color: var(--admin-ink);
+    font-family: var(--admin-font-mono);
+    font-size: var(--admin-size-sm);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+
+  /* Numbers line up on the right, everywhere, so a column can be read down. */
+  [data-ui="table"] [data-align="end"] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-ui="col-actions"],
+  [data-ui="cell-actions"] {
+    inline-size: var(--admin-control-height);
+  }
+
+  /* ── Choosing columns ──────────────────────────────────────────────────────
+     A <details> and a list of links. Not checkboxes in a form: a checkbox needs
+     a handler to mean anything, and a handler is client state (D43). Each entry
+     is the same list with one more column, or one fewer. */
+
+  [data-ui="col-config"] {
+    position: relative;
+  }
+
+  [data-ui="col-config-open"] {
+    display: grid;
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    place-items: center;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink-secondary);
+    cursor: pointer;
+    font-size: 0.75rem;
+    line-height: 1;
+    list-style: none;
+  }
+
+  [data-ui="col-config-open"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-ui="col-config-menu"] {
+    position: absolute;
+    z-index: 30;
+    inset-block-start: calc(100% + 0.25rem);
+    inset-inline-end: 0;
+    display: flex;
+    min-inline-size: 10rem;
+    flex-direction: column;
+    padding: 0.25rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+
+  [data-ui="col-toggle"] {
+    display: flex;
+    min-block-size: 1.75rem;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding-inline: 0.375rem;
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    text-decoration: none;
+    text-transform: none;
+    letter-spacing: normal;
+    white-space: nowrap;
+  }
+
+  [data-ui="col-toggle"][data-on="true"] {
+    color: var(--admin-ink);
+    font-weight: 600;
+  }
+
+  [data-ui="col-toggle-mark"] {
+    inline-size: 0.75rem;
+    flex: 0 0 auto;
+    color: var(--admin-accent-text);
+  }
+
+  /* ── Status ────────────────────────────────────────────────────────────────
+     The tone is named for what it means, not for what it looks like. A design
+     team that wants "draft" amber changes one rule and every draft follows. */
+
+  [data-ui="badge"] {
+    display: inline-flex;
+    min-block-size: 1.375rem;
+    align-items: center;
+    gap: 0.3125rem;
+    padding-inline: 0.4375rem;
+    border-radius: var(--admin-radius-sm);
+    font-size: var(--admin-size-xs);
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  [data-ui="badge"]::before {
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    background: currentColor;
+    content: "";
+  }
+
+  [data-ui="badge"][data-tone="neutral"] {
+    background: var(--admin-neutral-soft);
+    color: var(--admin-neutral);
+  }
+
+  [data-ui="badge"][data-tone="info"] {
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+  }
+
+  [data-ui="badge"][data-tone="positive"] {
+    background: var(--admin-success-soft);
+    color: var(--admin-success);
+  }
+
+  [data-ui="badge"][data-tone="warning"] {
+    background: var(--admin-warning-soft);
+    color: var(--admin-warning);
+  }
+
+  [data-ui="badge"][data-tone="danger"] {
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger);
+  }
+
+  [data-ui="qr-code"] {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    image-rendering: pixelated;
+  }
+
+  /* ── People ────────────────────────────────────────────────────────────────
+     Initials, not a photograph: nothing stores one yet, and a broken image in
+     every row is worse than no image. This stays as the fallback either way. */
+
+  [data-ui="person"] {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="person-name"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui="avatar"] {
+    display: grid;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 50%;
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    line-height: 1;
+  }
+
+  /* ── Settings token list ──────────────────────────────────────────────── */
+
+  [data-ui="tokens"] {
+    display: grid;
+    gap: var(--admin-gap-sm);
+  }
+
+  [data-ui="token-list"] {
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+
+  [data-ui="token"] {
+    display: grid;
+    min-block-size: 2.5rem;
+    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
+    align-items: center;
+    border-block-end: 1px solid var(--admin-line);
+  }
+
+  [data-ui="token"]:last-child {
+    border-block-end: 0;
+  }
+
+  [data-ui="token-name"],
+  [data-ui="token-value"] {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0.625rem var(--admin-gap);
+    overflow-wrap: anywhere;
+  }
+
+  [data-ui="token-name"] {
+    color: var(--admin-ink);
+    font-family: var(--admin-font-mono);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+
+  [data-ui="token-value"] {
+    border-inline-start: 1px solid var(--admin-line);
+    color: var(--admin-ink-secondary);
+    font-family: var(--admin-font-mono);
+    font-size: var(--admin-size-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Feedback states ──────────────────────────────────────────────────── */
+
+  [data-ui="empty"] {
+    display: grid;
+    max-inline-size: 38rem;
+    justify-items: start;
+    gap: var(--admin-gap-xs);
+    margin: var(--admin-gap-md) auto;
+    padding: var(--admin-gap-md);
+    border: 1px dashed var(--admin-line-strong);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  [data-ui="empty-message"],
+  [data-ui="empty-hint"],
+  [data-ui="error-code"],
+  [data-ui="error-message"],
+  [data-ui="error-hint"] {
+    margin: 0;
+  }
+
+  [data-ui="empty-message"] {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-base);
+    font-weight: 700;
+  }
+
+  [data-ui="empty-hint"] {
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+  }
+
+  [data-ui="error"] {
+    display: grid;
+    max-inline-size: 48rem;
+    gap: var(--admin-gap-xs);
+    margin: var(--admin-gap-md) auto;
+    padding: var(--admin-gap-md);
+    border: 1px solid var(--admin-danger-line);
+    border-inline-start: 3px solid var(--admin-danger);
+    border-radius: var(--admin-radius);
+    background: var(--admin-danger-soft);
+    color: var(--admin-status-fixed-ink);
+  }
+
+  [data-ui="error-code"] {
+    color: var(--admin-danger);
+    font-family: var(--admin-font-mono);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.035em;
+  }
+
+  [data-ui="error-message"] {
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
+  [data-ui="error-hint"] {
+    margin-block-start: var(--admin-gap-xs);
+    padding-block-start: var(--admin-gap-sm);
+    border-block-start: 1px solid var(--admin-danger-line);
+    color: var(--admin-status-fixed-ink-secondary);
+    font-size: 0.8125rem;
+  }
+
+  /* ── Design catalogue ─────────────────────────────────────────────────── */
+
+  [data-ui="catalogue"] {
+    inline-size: min(100%, 108rem);
+    margin-inline: auto;
+    padding: var(--admin-gap-lg);
+  }
+
+  [data-ui="catalogue-nav"] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 50;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--admin-gap-xs);
+    margin: calc(var(--admin-gap-lg) * -1) calc(var(--admin-gap-lg) * -1) var(--admin-gap-xl);
+    padding: var(--admin-gap) var(--admin-gap-lg);
+    background: color-mix(in srgb, var(--admin-bg) 94%, transparent);
+    border-block-end: 1px solid var(--admin-line);
+    backdrop-filter: blur(12px);
+  }
+
+  [data-ui="catalogue-nav"] a {
+    block-size: var(--admin-control-height);
+    padding-inline: 0.5rem;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+    line-height: 1.25;
+    text-decoration: none;
+  }
+
+  [data-ui="catalogue-case"] {
+    display: grid;
+    gap: var(--admin-gap);
+    margin-block-end: 3rem;
+    scroll-margin-block-start: 5rem;
+  }
+
+  [data-ui="catalogue-head"] {
+    display: grid;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="catalogue-head"] h2,
+  [data-ui="catalogue-head"] p {
+    margin: 0;
+  }
+
+  [data-ui="catalogue-head"] h2 {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-md);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  [data-ui="catalogue-head"] p {
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+  }
+
+  [data-ui="catalogue-frame"] {
+    min-inline-size: 0;
+    max-block-size: 46rem;
+    overflow: auto;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-bg);
+    box-shadow: var(--admin-shadow-card);
+  }
+
+  [data-ui="catalogue-frame"] > [data-ui="shell"] {
+    min-inline-size: 50rem;
+    min-block-size: 26rem;
+  }
+
+  [data-ui="catalogue-frame"] > :is([data-ui="empty"], [data-ui="error"]) {
+    margin-block: 3rem;
+  }
+
+  /* ── Pointer states ───────────────────────────────────────────────────── */
+
+  @media (hover: hover) {
+    [data-ui="nav-item"]:hover {
+      background: var(--admin-surface);
+      color: var(--admin-ink);
+    }
+
+    [data-ui="nav-item"][data-active="true"]:hover {
+      background: var(--admin-accent-soft);
+      color: var(--admin-accent-text);
+    }
+
+    [data-ui="app-action"]:hover:not(:disabled) {
+      border-color: var(--admin-line-strong);
+      background: var(--admin-surface-hover);
+      color: var(--admin-ink);
+    }
+
+    [data-ui="app-action"][data-action="install"]:hover:not(:disabled) {
+      border-color: var(--admin-accent-hover);
+      background: var(--admin-accent-hover);
+      color: var(--admin-accent-ink);
+    }
+
+    [data-ui="row"]:hover td {
+      background: var(--admin-surface-hover);
+    }
+
+    [data-ui="catalogue-nav"] a:hover {
+      border-color: var(--admin-accent-line);
+      background: var(--admin-accent-soft);
+      color: var(--admin-accent-text);
+    }
+  }
+
+  /* ── Responsive composition ───────────────────────────────────────────── */
+
+  @media (max-width: 63.9375rem) {
+    [data-ui="content"] {
+      padding-inline: var(--admin-gap-md);
+    }
+
+    [data-ui="topbar"] {
+      padding-inline: var(--admin-gap-md);
+    }
+
+    [data-ui="table"] {
+      min-inline-size: 100%;
+    }
+  }
+
+  @media (max-width: 47.9375rem) {
+    :root {
+      --admin-topbar-height: 3.25rem;
+    }
+
+    [data-ui="shell"] {
+      display: block;
+    }
+
+    [data-ui="sidebar"],
+    body > [data-ui="shell"] > [data-ui="sidebar"] {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 30;
+      display: flex;
+      inline-size: 100%;
+      block-size: auto;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--admin-gap-sm);
+      min-block-size: var(--admin-topbar-height);
+      padding: var(--admin-gap-xs) var(--admin-gap-sm);
+      overflow: hidden;
+      background: var(--admin-surface);
+      border-inline-end: 0;
+      border-block-end: 1px solid var(--admin-line);
+    }
+
+    [data-ui="sidebar-header"] {
+      min-inline-size: 0;
+      flex: 1 1 auto;
+      padding: 0;
+    }
+
+    [data-ui="sidebar-brand"] {
+      min-block-size: 2.75rem;
+      padding-inline: var(--admin-gap-sm);
+    }
+
+    [data-ui="sidebar-search"],
+    [data-ui="sidebar-nav"] {
+      display: none;
+    }
+
+    [data-ui="sidebar-foot"] {
+      flex: 0 0 auto;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--admin-gap-xs);
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    [data-ui="indicators"] {
+      padding: 0;
+    }
+
+    [data-ui="viewer"] {
+      padding: 0;
+    }
+
+    [data-ui="viewer-who"] {
+      display: none;
+    }
+
+    [data-ui="nav-item"] {
+      min-block-size: 2.75rem;
+      flex: 0 0 auto;
+      padding-inline: 0.625rem;
+      white-space: nowrap;
+    }
+
+    [data-ui="nav-item"][data-active="true"] {
+      box-shadow: inset 0 -2px 0 var(--admin-accent);
+    }
+
+    body > [data-ui="shell"] [data-ui="topbar"] {
+      position: static;
+      flex-wrap: wrap;
+      min-block-size: var(--admin-topbar-height);
+      padding: var(--admin-gap-sm) var(--admin-gap);
+    }
+
+    [data-ui="chrome-lead"] {
+      min-inline-size: 0;
+      flex: 1 1 auto;
+    }
+
+    [data-ui="title"] {
+      overflow: hidden;
+      min-inline-size: 0;
+      text-overflow: ellipsis;
+    }
+
+    [data-ui="chrome-search"] {
+      order: 3;
+      inline-size: 100%;
+      min-block-size: 2.75rem;
+      flex: 1 0 100%;
+      margin: 0;
+    }
+
+    [data-ui="chrome-tail"] {
+      margin-inline-start: auto;
+    }
+
+    [data-ui="chrome-create"],
+    [data-ui="pager-step"],
+    [data-ui="view-kind"] {
+      min-block-size: 2.75rem;
+    }
+
+    [data-ui="pager-step"],
+    [data-ui="view-kind"] {
+      inline-size: 2.75rem;
+      block-size: 2.75rem;
+    }
+
+    [data-ui="content"] {
+      padding: var(--admin-gap) var(--admin-gap) var(--admin-gap-lg);
+    }
+
+    [data-ui="app-grid"] {
+      grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
+    }
+
+    [data-ui="app-action"] {
+      min-block-size: 2.75rem;
+      padding-inline: var(--admin-gap-md);
+    }
+
+    [data-ui="token"] {
+      grid-template-columns: 1fr;
+    }
+
+    [data-ui="token-value"] {
+      padding-block-start: 0;
+      border-inline-start: 0;
+    }
+
+    [data-ui="catalogue"] {
+      padding: var(--admin-gap);
+    }
+
+    [data-ui="catalogue-nav"] {
+      margin: calc(var(--admin-gap) * -1) calc(var(--admin-gap) * -1) var(--admin-gap-lg);
+      padding: var(--admin-gap);
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+  }
+
+  @media (max-width: 29.9375rem) {
+    [data-ui="app-grid"] {
+      grid-template-columns: 1fr;
+    }
+
+    [data-ui="app-card"] {
+      min-block-size: 9.5rem;
+      padding: var(--admin-gap);
+    }
+
+    [data-ui="empty"] {
+      margin-block: var(--admin-gap-md);
+      padding: var(--admin-gap-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto;
+      transition-duration: 0.01ms;
+    }
+  }
+
+  @media print {
+    [data-ui="sidebar"],
+    [data-ui="catalogue-nav"] {
+      display: none;
+    }
+
+    [data-ui="shell"] {
+      display: block;
+    }
+
+    [data-ui="topbar"] {
+      position: static;
+    }
+
+    [data-ui="content"] {
+      padding: 0;
+    }
+  }
+}
+
+/* The compact shell is two useful rows: identity/search, then a horizontally
+   scrollable menu for the current app. The old responsive rules changed the
+   sidebar to a row but left its flexing navigation at desktop height, producing
+   more than 500px of empty space above every mobile screen. */
+@media (max-width: 47.9375rem) {
+  [data-ui="sidebar-main"] {
+    display: contents;
+  }
+
+  [data-ui="sidebar"],
+  body > [data-ui="shell"] > [data-ui="sidebar"] {
+    display: grid;
+    grid-template-columns: auto minmax(8rem, 1fr);
+    align-items: center;
+    gap: var(--admin-gap-sm);
+    block-size: auto;
+    padding: var(--admin-gap-sm);
+  }
+  [data-ui="sidebar-header"] {
+    padding: 0;
+  }
+  [data-ui="sidebar-search"] {
+    margin: 0;
+  }
+  [data-ui="sidebar-nav"] {
+    display: block;
+    grid-column: 1 / -1;
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  [data-ui="sidebar-section-label"],
+  [data-ui="app-list"],
+  [data-ui="menu-section-title"],
+  [data-ui="sidebar-foot"] {
+    display: none;
+  }
+  [data-ui="menu"] {
+    display: flex;
+    inline-size: max-content;
+    gap: var(--admin-gap-xs);
+  }
+  [data-ui="menu-item-wrap"],
+  [data-ui="menu-section"] {
+    display: block;
+  }
+  [data-ui="menu-section-children"] {
+    display: flex;
+    inline-size: max-content;
+    gap: var(--admin-gap-xs);
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  [data-ui="menu-item"] {
+    min-block-size: 2.5rem;
+    padding-inline: var(--admin-gap);
+  }
+  [data-ui="menu-dot"] {
+    display: none;
+  }
+
+  /* A list remains a readable list on a narrow screen. Let its own scroll box
+     carry the width instead of squeezing identifiers into one-character lines. */
+  [data-ui="table"] {
+    inline-size: max-content;
+    min-inline-size: 100%;
+  }
+  [data-ui="row"] td,
+  [data-ui="cell"] code {
+    overflow-wrap: normal;
+    white-space: nowrap;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Sign-in, and the identity strip in the topbar.
+
+   Written against the same tokens as everything above, because the sign-in page
+   is the first screen anyone sees and a first screen that does not look like the
+   rest teaches the wrong thing about the rest.
+
+   The form is centred rather than full-width: at 1600px a login stretched across
+   the viewport reads as an error state.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+@layer ket.app {
+  [data-ui="login"] {
+    display: grid;
+    min-block-size: 100dvh;
+    place-items: center;
+    padding: var(--admin-gap-lg);
+    background: var(--admin-bg);
+  }
+
+  [data-ui="login-form"] {
+    display: grid;
+    inline-size: min(24rem, 100%);
+    gap: var(--admin-gap-md);
+    padding: var(--admin-gap-xl);
+    border: 1px solid var(--admin-line);
+    border-block-start: 2px solid var(--admin-accent);
+    border-radius: var(--admin-radius-lg);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-float);
+  }
+
+  [data-ui="login-title"] {
+    margin: 0;
+    color: var(--admin-ink);
+    font-size: var(--admin-size-xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  /* role="alert", so it is announced as well as seen. */
+  [data-ui="login-error"] {
+    margin: 0;
+    padding: var(--admin-gap-sm) var(--admin-gap-md);
+    border: 1px solid var(--admin-danger-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger-strong);
+    font-size: var(--admin-size-sm);
+    line-height: 1.4;
+  }
+
+  /* A field is a label wrapping its input, so the whole thing is a click target. */
+  [data-ui="field"] {
+    display: grid;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="field-label"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 500;
+  }
+
+  [data-ui="field-input"] {
+    min-block-size: var(--admin-control-height);
+    padding-inline: 0.625rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-bg);
+    color: var(--admin-ink);
+    font: inherit;
+    font-size: var(--admin-size-base);
+    transition:
+      border-color var(--admin-motion-fast),
+      box-shadow var(--admin-motion-fast);
+  }
+
+  [data-ui="field-input"]:focus-visible {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+    outline: none;
+  }
+
+  [data-ui="login-submit"] {
+    min-block-size: var(--admin-control-height);
+    border: 1px solid var(--admin-accent);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-accent);
+    color: var(--admin-accent-ink);
+    font: inherit;
+    font-size: var(--admin-size-base);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--admin-motion-fast);
+  }
+
+  [data-ui="login-submit"]:hover {
+    background: var(--admin-accent-hover);
+  }
+
+  [data-ui="login-providers"] {
+    display: grid;
+    gap: var(--admin-gap-sm);
+  }
+
+  [data-ui="login-divider"] {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-gap-sm);
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+    text-transform: uppercase;
+  }
+
+  [data-ui="login-divider"]::before,
+  [data-ui="login-divider"]::after {
+    block-size: 1px;
+    flex: 1;
+    background: var(--admin-line);
+    content: "";
+  }
+
+  [data-ui="login-provider"] {
+    display: grid;
+    min-block-size: var(--admin-control-height);
+    padding-inline: 0.75rem;
+    place-items: center;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-bg);
+    color: var(--admin-ink);
+    font-size: var(--admin-size-base);
+    font-weight: 600;
+    text-align: center;
+    text-decoration: none;
+    transition:
+      border-color var(--admin-motion-fast),
+      background-color var(--admin-motion-fast);
+  }
+
+  [data-ui="login-provider"]:hover {
+    border-color: var(--admin-accent);
+    background: var(--admin-accent-soft);
+  }
+
+  [data-ui="login-locales"] {
+    display: flex;
+    margin: 0;
+    gap: var(--admin-gap-sm);
+    justify-content: center;
+    font-size: var(--admin-size-xs);
+  }
+
+  [data-ui="login-locale"] {
+    color: var(--admin-ink-muted);
+    text-decoration: none;
+  }
+
+  [data-ui="login-locale"][data-active="true"] {
+    color: var(--admin-accent-text);
+    font-weight: 600;
+  }
+
+  /* ── KétViệt sidebar systray ──────────────────────────────────────────────── */
+
+  /* The old KétViệt footer had one compact operational row, then Settings below
+     a divider. KetSuite keeps that composition while the avatar opens a native
+     account menu, so sign-out remains available without another permanent icon. */
+  [data-ui="sidebar-foot"] {
+    display: flex;
+    position: relative;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--admin-gap-xs);
+    margin-block-start: auto;
+    padding: var(--admin-gap-sm) 0.625rem var(--admin-gap);
+    border-block-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="sidebar-tools"] {
+    display: flex;
+    min-inline-size: 0;
+    min-block-size: var(--admin-control-height);
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding: 0 0.125rem var(--admin-gap-sm);
+    border-block-end: 1px solid var(--admin-line);
+  }
+
+  [data-ui="indicators"] {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="indicators"] > ket-island[data-island="mail.inbox-indicator"],
+  [data-ui="indicator"][data-kind="message"] {
+    order: 1;
+  }
+
+  [data-ui="indicators"] > ket-island[data-island="activity.indicator"],
+  [data-ui="indicator"][data-kind="activity"] {
+    order: 2;
+  }
+
+  [data-ui="indicator"] {
+    display: inline-flex;
+    min-inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding-inline: var(--admin-gap-sm);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    line-height: 1;
+    text-decoration: none;
+    transition:
+      border-color var(--admin-motion-fast),
+      background-color var(--admin-motion-fast),
+      color var(--admin-motion-fast);
+  }
+
+  [data-ui="indicator"]:hover {
+    border-color: var(--admin-ink-muted);
+    background: var(--admin-surface-hover);
+    color: var(--admin-ink);
+  }
+
+  [data-ui="indicator-icon"] {
+    display: grid;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    flex: 0 0 auto;
+    place-items: center;
+  }
+
+  [data-ui="indicator-count"] {
+    min-inline-size: 0.75rem;
+    color: var(--admin-ink);
+    font-size: var(--admin-size-sm);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    text-align: center;
+  }
+
+  [data-ui="viewer-company-indicator"] {
+    display: grid;
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    flex: 0 0 auto;
+    place-items: center;
+    color: var(--admin-ink-muted);
+  }
+
+  [data-ui="viewer-company-indicator"] > [data-ui="icon"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+
+  [data-ui="viewer"] {
+    position: relative;
+    min-inline-size: 0;
+    margin-inline-start: auto;
+  }
+
+  [data-ui="viewer-trigger"] {
+    position: relative;
+    display: grid;
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    place-items: center;
+    border-radius: var(--admin-radius-sm);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  [data-ui="viewer-trigger"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-ui="viewer-trigger"] > [data-ui="avatar"] {
+    inline-size: var(--admin-control-height);
+    block-size: var(--admin-control-height);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-success-icon);
+    color: #fff;
+    font-size: var(--admin-size-base);
+    font-weight: 500;
+  }
+
+  [data-ui="viewer-presence"] {
+    position: absolute;
+    inset-inline-end: -0.125rem;
+    inset-block-end: -0.125rem;
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    border-radius: 50%;
+    background: var(--admin-success);
+    box-shadow: 0 0 0 2px var(--admin-bg);
+  }
+
+  [data-ui="viewer-menu"] {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-end: calc(100% + var(--admin-gap-sm));
+    z-index: 40;
+    display: grid;
+    inline-size: 12rem;
+    gap: var(--admin-gap-sm);
+    padding: var(--admin-gap-sm);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-float);
+  }
+
+  [data-ui="viewer-who"] {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+
+  [data-ui="viewer-name"] {
+    overflow: hidden;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Only rendered when the account belongs to more than one company, so it is
+   always meaningful when it is there. */
+  [data-ui="viewer-company"] {
+    overflow: hidden;
+    padding: 0.125rem 0.5rem;
+    border: 1px solid var(--admin-accent-line);
+    border-radius: var(--admin-radius-xs);
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+    font-size: var(--admin-size-xs);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui="signout"] {
+    display: block;
+  }
+
+  [data-ui="signout-button"] {
+    display: flex;
+    inline-size: 100%;
+    min-block-size: 2.25rem;
+    align-items: center;
+    gap: var(--admin-gap-sm);
+    padding-inline: var(--admin-gap-sm);
+    border: 0;
+    border-radius: var(--admin-radius-sm);
+    background: transparent;
+    color: var(--admin-ink-secondary);
+    font: inherit;
+    font-size: var(--admin-size-sm);
+    text-align: start;
+    cursor: pointer;
+    transition:
+      background-color var(--admin-motion-fast),
+      color var(--admin-motion-fast);
+  }
+
+  [data-ui="signout-button"]:hover {
+    background: var(--admin-surface-hover);
+    color: var(--admin-ink);
+  }
+
+  [data-ui="signout-button"] > [data-ui="icon"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+  [data-ui="signout-label"] {
+    min-inline-size: 0;
+  }
+
+  [data-ui="sidebar-settings"] {
+    display: flex;
+    min-block-size: 2rem;
+    align-items: center;
+    padding-inline: var(--admin-gap-sm);
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-sm);
+    font-weight: 500;
+    text-decoration: none;
+    transition:
+      background-color var(--admin-motion-fast),
+      color var(--admin-motion-fast);
+  }
+
+  [data-ui="sidebar-settings"]:hover {
+    background: var(--admin-surface-hover);
+    color: var(--admin-ink);
+  }
+
+  /* Named in the screen contract but never given a rule, so it inherited nothing
+   and sat flush against its sibling. */
+  [data-ui="app-meta-value"][data-kind="depends"] {
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+  }
+}
+
+/* ── KetSuite UI kit foundations ────────────────────────────────────────────
+   These rules mirror docs/design-system in kingfruit: operational density,
+   warm neutrals, one decisive primary action, explicit state and 44px compact
+   touch targets. They intentionally add no palette, radius or shadow. */
+
+@layer ket.app {
+  [data-ui="stack"] {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="stack"][data-gap="compact"] {
+    gap: var(--admin-gap-xs);
+  }
+  [data-ui="stack"][data-gap="loose"] {
+    gap: var(--admin-gap-md);
+  }
+
+  [data-ui="inline"] {
+    display: inline-flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="code"] {
+    color: var(--admin-ink);
+    font-family: var(--admin-font-mono);
+    font-size: var(--admin-size-sm);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+
+  /* Action hierarchy. Primary is brand-600, not brand-500: normal-size white
+     labels need the stronger token to meet AA. */
+  :where([data-ui="action"], [data-control="action"]) {
+    display: inline-flex;
+    min-block-size: var(--admin-control-height);
+    align-items: center;
+    justify-content: center;
+    gap: var(--admin-gap-xs);
+    padding-inline: 0.625rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--admin-motion-fast),
+      border-color var(--admin-motion-fast),
+      color var(--admin-motion-fast),
+      transform var(--admin-motion-fast);
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-size="compact"] {
+    min-block-size: var(--admin-control-height);
+    padding-inline: 0.5rem;
+    border-radius: var(--admin-radius-sm);
+    font-size: 0.8125rem;
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-size="prominent"] {
+    min-block-size: var(--admin-control-height);
+    padding-inline: var(--admin-gap);
+    font-size: 0.8125rem;
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-variant="primary"] {
+    border-color: var(--admin-accent);
+    background: var(--admin-accent);
+    color: var(--admin-accent-ink);
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-variant="tertiary"] {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-variant="destructive"] {
+    border-color: var(--admin-danger-line);
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger-strong);
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-icon-only="true"] {
+    inline-size: var(--admin-control-height);
+    padding: 0;
+  }
+
+  :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size="compact"] {
+    min-block-size: var(--admin-control-height);
+    inline-size: var(--admin-control-height);
+  }
+
+  :where([data-ui="action"], [data-control="action"]):is(:disabled, [aria-disabled="true"]) {
+    border-color: var(--admin-line);
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-disabled);
+    cursor: not-allowed;
+    opacity: 0.82;
+  }
+
+  :where([data-ui="action"], [data-control="action"]):active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px);
+  }
+  [data-ui="action-icon"] {
+    display: grid;
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    place-items: center;
+  }
+  [data-ui="action-spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border: 2px solid currentColor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: ket-action-spin 700ms linear infinite;
+  }
+  [data-ui="action-group"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+  @keyframes ket-action-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* Operational schedule: a real grid rather than a decorative calendar. The
+     label column remains readable while the date range scrolls horizontally. */
+  [data-ui="schedule-scroll"] {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+  [data-ui="schedule"] {
+    position: relative;
+    inline-size: 100%;
+  }
+  [data-ui="schedule-head"],
+  [data-ui="schedule-row"] {
+    position: relative;
+    display: grid;
+    min-block-size: 2.75rem;
+  }
+  [data-ui="schedule-head"] {
+    position: sticky;
+    z-index: 4;
+    inset-block-start: 0;
+    background: var(--admin-surface-subtle);
+    border-block-end: 1px solid var(--admin-line-strong);
+  }
+  [data-ui="schedule-row"] {
+    border-block-end: 1px solid var(--admin-line);
+  }
+  [data-ui="schedule-row"]:last-child {
+    border-block-end: 0;
+  }
+  [data-ui="schedule-corner"],
+  [data-ui="schedule-row-label"] {
+    position: sticky;
+    z-index: 3;
+    inset-inline-start: 0;
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--admin-gap-sm) var(--admin-gap);
+    background: var(--admin-surface);
+    border-inline-end: 1px solid var(--admin-line-strong);
+  }
+  [data-ui="schedule-corner"] {
+    z-index: 5;
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.055em;
+    text-transform: uppercase;
+  }
+  [data-ui="schedule-day"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-inline-end: 1px solid var(--admin-line);
+    color: var(--admin-ink-secondary);
+  }
+  [data-ui="schedule-day"][data-today="true"] {
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+  }
+  [data-ui="schedule-day-label"],
+  [data-ui="schedule-row-name"] {
+    font-size: var(--admin-size-sm);
+    font-weight: 650;
+  }
+  [data-ui="schedule-day-detail"],
+  [data-ui="schedule-row-detail"] {
+    overflow: hidden;
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="schedule-cell"] {
+    grid-row: 1;
+    border-inline-end: 1px solid var(--admin-line);
+  }
+  [data-ui="schedule-cell"][data-today="true"] {
+    background: color-mix(in srgb, var(--admin-accent-soft) 48%, transparent);
+  }
+  [data-ui="schedule-event"] {
+    z-index: 2;
+    grid-row: 1;
+    align-self: center;
+    display: flex;
+    min-inline-size: 0;
+    block-size: 2.25rem;
+    flex-direction: column;
+    justify-content: center;
+    margin-inline: 0.2rem;
+    padding-inline: var(--admin-gap-sm);
+    overflow: hidden;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+  }
+  [data-ui="schedule-event"][data-tone="neutral"] {
+    background: var(--admin-neutral-soft);
+    color: var(--admin-neutral);
+  }
+  [data-ui="schedule-event"][data-tone="positive"] {
+    border-color: var(--admin-success-icon);
+    background: var(--admin-success-soft);
+    color: var(--admin-success);
+  }
+  [data-ui="schedule-event"][data-tone="info"] {
+    border-color: var(--admin-accent-line);
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+  }
+  [data-ui="schedule-event"][data-tone="warning"] {
+    border-color: var(--admin-warning-icon);
+    background: var(--admin-warning-soft);
+    color: var(--admin-warning);
+  }
+  [data-ui="schedule-event"][data-tone="danger"] {
+    border-color: var(--admin-danger-line);
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger);
+  }
+  [data-ui="schedule-event-title"],
+  [data-ui="schedule-event-detail"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="schedule-event-title"] {
+    font-size: var(--admin-size-xs);
+  }
+  [data-ui="schedule-event-detail"] {
+    font-size: 0.6875rem;
+    opacity: 0.82;
+  }
+
+  [data-ui="tag"] {
+    display: inline-flex;
+    min-block-size: 1.625rem;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding-inline: var(--admin-gap-sm);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+
+  [data-ui="tag-remove"] {
+    color: inherit;
+    font-size: var(--admin-size-md);
+    line-height: 1;
+    text-decoration: none;
+  }
+  [data-ui="count-badge"] {
+    display: inline-grid;
+    min-inline-size: 1.25rem;
+    min-block-size: 1.25rem;
+    place-items: center;
+    padding-inline: 0.3125rem;
+    border-radius: 9999px;
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+    font-size: 0.625rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Dense record workspace: identity and cross-record facts stay above the
+     fold, while collaboration remains visible beside the active business tab. */
+  [data-ui="record-workspace"] {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
+    align-items: start;
+    gap: var(--admin-gap);
+  }
+  [data-ui="record-workspace"][data-has-aside="false"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  /* `framed` gives legacy list/form screens the accounting workspace. Rich
+     screens already render their own RecordWorkspace; flatten only the generic
+     wrapper in that case so no duplicate card or heading appears. */
+  [data-ui="record-workspace"][data-page-frame="true"]:has(
+    > [data-ui="record-sheet"] > [data-ui="record-body"] > [data-ui="record-workspace"]
+  ),
+  [data-ui="record-workspace"][data-page-frame="true"]:has(
+      > [data-ui="record-sheet"] > [data-ui="record-body"] > [data-ui="record-workspace"]
+    )
+    > [data-ui="record-sheet"],
+  [data-ui="record-workspace"][data-page-frame="true"]:has(
+      > [data-ui="record-sheet"] > [data-ui="record-body"] > [data-ui="record-workspace"]
+    )
+    > [data-ui="record-sheet"]
+    > [data-ui="record-body"] {
+    display: contents;
+  }
+  [data-ui="record-workspace"][data-page-frame="true"]:has(
+      > [data-ui="record-sheet"] > [data-ui="record-body"] > [data-ui="record-workspace"]
+    )
+    > [data-ui="record-sheet"]
+    > [data-ui="record-header"] {
+    display: none;
+  }
+  [data-ui="record-sheet"] {
+    min-inline-size: 0;
+    overflow: hidden;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+  [data-ui="record-header"] {
+    display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: var(--admin-gap-md);
+    padding: var(--admin-gap-md);
+    border-block-end: 1px solid var(--admin-line);
+  }
+  [data-ui="record-identity"] {
+    display: grid;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    grid-template-columns: 4.5rem minmax(0, 1fr);
+    align-items: center;
+    gap: var(--admin-gap);
+  }
+  [data-ui="record-thumbnail"] {
+    display: grid;
+    inline-size: 4.5rem;
+    aspect-ratio: 1;
+    overflow: hidden;
+    place-items: center;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-muted);
+  }
+  [data-ui="record-thumbnail"] > img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  [data-ui="record-thumbnail"] > [data-ui="icon"] {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+  [data-ui="record-kicker"],
+  [data-ui="record-heading"],
+  [data-ui="record-subtitle"] {
+    margin: 0;
+  }
+  [data-ui="record-kicker"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  [data-ui="record-heading"] {
+    overflow-wrap: anywhere;
+    color: var(--admin-ink);
+    font-size: clamp(1.25rem, 2vw, 1.75rem);
+    font-weight: 650;
+    letter-spacing: -0.025em;
+    line-height: 1.15;
+  }
+  [data-ui="record-subtitle"] {
+    margin-block-start: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+  }
+  [data-ui="record-badges"] {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 0 100%;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--admin-gap);
+    padding-inline-start: calc(4.5rem + var(--admin-gap));
+    overflow-x: auto;
+  }
+  [data-ui="record-toggle"] {
+    display: inline-flex;
+    min-block-size: 1.5rem;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  [data-ui="record-toggle"][data-disabled="true"] {
+    cursor: default;
+  }
+  [data-ui="record-toggle-input"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+    margin: 0;
+    accent-color: var(--admin-focus-border);
+  }
+  [data-ui="record-toggle-input"]:focus-visible {
+    outline: 2px solid var(--admin-focus-border);
+    outline-offset: 2px;
+  }
+  [data-ui="record-toggle-input"]:disabled {
+    opacity: 0.8;
+  }
+  [data-ui="record-toggle-label"] {
+    line-height: 1.2;
+  }
+  [data-ui="record-facts"] {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 1 auto;
+    align-items: stretch;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="record-fact"] {
+    display: grid;
+    min-inline-size: 5rem;
+    align-content: center;
+    justify-items: center;
+    gap: 0.0625rem;
+    padding: var(--admin-gap-sm) var(--admin-gap);
+    color: var(--admin-ink);
+    text-align: center;
+    text-decoration: none;
+  }
+  [data-ui="record-fact"] + [data-ui="record-fact"] {
+    border-inline-start: 1px solid var(--admin-line);
+  }
+  [data-ui="record-fact-value"] {
+    max-inline-size: 9rem;
+    overflow: hidden;
+    font-size: var(--admin-size-md);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="record-fact-label"] {
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-xs);
+    white-space: nowrap;
+  }
+  a[data-ui="record-fact"]:hover {
+    background: var(--admin-surface-hover);
+    color: var(--admin-accent-text);
+  }
+  [data-ui="record-navigation"] {
+    min-inline-size: 0;
+    padding-inline: var(--admin-gap);
+  }
+  [data-ui="record-navigation"] [data-ui="tabs"] {
+    border-block-end: 0;
+  }
+  [data-ui="record-controller"]:has(> ket-island:not([hidden]) > :not([hidden])) {
+    padding: var(--admin-gap-sm) var(--admin-gap-md) 0;
+    border-block-start: 1px solid var(--admin-line);
+  }
+  [data-ui="record-controller"] > ket-island {
+    display: contents;
+  }
+  [data-ui="record-body"] {
+    min-inline-size: 0;
+    padding: var(--admin-gap-md);
+    border-block-start: 1px solid var(--admin-line);
+  }
+  [data-ui="record-aside"] {
+    position: sticky;
+    inset-block-start: calc(var(--admin-topbar-height) + var(--admin-gap));
+    display: grid;
+    min-inline-size: 0;
+    max-block-size: calc(100dvh - var(--admin-topbar-height) - 2 * var(--admin-gap));
+    align-content: start;
+    gap: var(--admin-gap);
+    overflow-y: auto;
+  }
+  [data-ui="record-aside"] :is([data-ui="chatter"], [data-ui="activity-record"]) {
+    max-inline-size: none;
+    padding: var(--admin-gap);
+    box-shadow: none;
+  }
+  @media (min-width: 96rem) {
+    [data-ui="record-workspace"][data-has-aside="true"] {
+      grid-template-columns: minmax(0, 2fr) minmax(32rem, 1fr);
+    }
+  }
+  @media (max-width: 72rem) {
+    [data-ui="record-workspace"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    [data-ui="record-aside"] {
+      position: static;
+      max-block-size: none;
+      overflow: visible;
+    }
+  }
+  @media (max-width: 47.9375rem) {
+    [data-ui="record-header"] {
+      flex-direction: column;
+      padding: var(--admin-gap);
+    }
+    [data-ui="record-identity"] {
+      grid-template-columns: 3.75rem minmax(0, 1fr);
+    }
+    [data-ui="record-thumbnail"] {
+      inline-size: 3.75rem;
+    }
+    [data-ui="record-heading"] {
+      font-size: 1.25rem;
+    }
+    [data-ui="record-facts"] {
+      inline-size: 100%;
+      overflow-x: auto;
+    }
+    [data-ui="record-fact"] {
+      min-inline-size: 5.5rem;
+      flex: 1 0 auto;
+    }
+    [data-ui="record-badges"] {
+      gap: var(--admin-gap-sm);
+      padding-inline-start: 0;
+    }
+    [data-ui="record-toggle"] {
+      font-size: var(--admin-size-xs);
+    }
+    [data-ui="record-navigation"] {
+      padding-inline: var(--admin-gap-sm);
+    }
+    [data-ui="record-navigation"] [data-ui="tabs"] {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      overflow: visible;
+    }
+    [data-ui="record-navigation"] [data-ui="tabs"]:has(> [data-ui="tab"]:nth-child(3)) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-ui="record-navigation"] [data-ui="tab"] {
+      gap: 0;
+      justify-content: center;
+      padding-inline: var(--admin-gap-xs);
+      font-size: var(--admin-size-xs);
+      line-height: 1.15;
+      text-align: center;
+      white-space: normal;
+    }
+    [data-ui="record-navigation"] [data-ui="tab"] > span {
+      display: none;
+    }
+    [data-ui="record-body"] {
+      padding: var(--admin-gap);
+    }
+  }
+
+  /* Page hierarchy and surfaces. */
+  [data-ui="section"] {
+    display: grid;
+    gap: var(--admin-gap-sm);
+    min-inline-size: 0;
+  }
+  [data-ui="section-head"] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--admin-gap);
+  }
+  [data-ui="section-eyebrow"],
+  [data-ui="section-title"],
+  [data-ui="section-description"] {
+    margin: 0;
+  }
+  [data-ui="section-eyebrow"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    font-weight: 700;
+    letter-spacing: 0.075em;
+    text-transform: uppercase;
+  }
+  [data-ui="section-title"] {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-md);
+    line-height: 1.35;
+  }
+  [data-ui="section-description"] {
+    margin-block-start: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+  }
+  [data-ui="section-actions"] {
+    flex: 0 0 auto;
+  }
+  [data-ui="section-body"] {
+    min-inline-size: 0;
+  }
+
+  [data-ui="surface"] {
+    min-inline-size: 0;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+  [data-ui="surface"][data-tone="subtle"] {
+    background: var(--admin-surface-subtle);
+    box-shadow: none;
+  }
+  [data-ui="surface"][data-padding="compact"] {
+    padding: var(--admin-gap);
+  }
+  [data-ui="surface"][data-padding="default"] {
+    padding: var(--admin-gap-md);
+  }
+  [data-ui="surface"][data-padding="none"] {
+    padding: 0;
+  }
+
+  /* Durable record attachments. The upload stays compact, while long file
+     names wrap inside the panel instead of widening the page. */
+  [data-ui="attachments"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap);
+  }
+  [data-ui="attachment-list"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    list-style: none;
+  }
+  [data-ui="attachment-item"] {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--admin-gap);
+    padding: var(--admin-gap-sm) var(--admin-gap);
+  }
+  [data-ui="attachment-item"] + [data-ui="attachment-item"] {
+    border-block-start: 1px solid var(--admin-line);
+  }
+  [data-ui="attachment-link"] {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    color: var(--admin-accent-text);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  [data-ui="attachment-meta"] {
+    flex: 0 0 auto;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    white-space: nowrap;
+  }
+  [data-ui="attachment-upload"] {
+    display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="attachment-upload"] > label {
+    display: grid;
+    min-inline-size: min(18rem, 100%);
+    flex: 1 1 18rem;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+  [data-ui="attachment-input"] {
+    inline-size: 100%;
+    min-block-size: var(--admin-control-height);
+    min-inline-size: 0;
+    color: var(--admin-ink);
+    font: inherit;
+  }
+
+  /* Relational selectors keep the short path compact and put full CRUD in the
+     modal. The footer action remains visible even when the relation is empty. */
+  [data-ui="relation-select"] {
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+  [data-ui="relation-native"] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  [data-ui="relation-trigger"] {
+    display: flex;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--admin-control-height);
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--admin-gap-sm);
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [data-ui="relation-trigger"][data-empty="true"] {
+    color: var(--admin-ink-muted);
+  }
+  [data-ui="relation-trigger"]:focus-visible {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+    outline: none;
+  }
+  [data-ui="relation-value"] {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="relation-menu"] {
+    position: absolute;
+    inset-block-start: calc(100% + 0.25rem);
+    inset-inline: 0;
+    z-index: 40;
+    display: grid;
+    min-inline-size: min(22rem, calc(100vw - 2rem));
+    overflow: hidden;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-float);
+  }
+  [data-ui="relation-search"] {
+    inline-size: calc(100% - var(--admin-gap-sm) * 2);
+    min-block-size: var(--admin-control-height);
+    margin: var(--admin-gap-sm);
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font: inherit;
+  }
+  [data-ui="relation-options"] {
+    display: grid;
+    max-block-size: 16rem;
+    overflow: auto;
+  }
+  [data-ui="relation-option"] {
+    display: grid;
+    min-block-size: var(--admin-control-height);
+    padding: 0.375rem 0.625rem;
+    border: 0;
+    background: transparent;
+    color: var(--admin-ink);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [data-ui="relation-option"]:is(:hover, :focus-visible),
+  [data-ui="relation-option"][aria-selected="true"] {
+    background: var(--admin-accent-soft);
+    outline: none;
+  }
+  [data-ui="relation-option"] small {
+    color: var(--admin-ink-muted);
+  }
+  [data-ui="relation-footer"] {
+    display: flex;
+    justify-content: flex-start;
+    padding: var(--admin-gap-xs) var(--admin-gap-sm);
+    border-block-start: 1px solid var(--admin-line);
+  }
+  [data-ui="relation-dialog-toolbar"] {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-gap-sm);
+    margin-block-end: var(--admin-gap);
+  }
+  [data-ui="relation-dialog-toolbar"] [data-ui="form-control"] {
+    flex: 1 1 auto;
+  }
+  [data-ui="relation-dialog-list"] {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    border-block-start: 1px solid var(--admin-line);
+    list-style: none;
+  }
+  [data-ui="relation-dialog-row"] {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--admin-gap-sm);
+    padding: var(--admin-gap-sm) 0;
+    border-block-end: 1px solid var(--admin-line);
+  }
+  [data-ui="relation-dialog-main"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: 0.125rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--admin-ink);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [data-ui="relation-dialog-main"]:focus-visible {
+    outline: 2px solid var(--admin-focus-border);
+    outline-offset: 2px;
+  }
+  [data-ui="relation-dialog-meta"] {
+    overflow: hidden;
+    color: var(--admin-ink-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="relation-dialog-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--admin-gap-xs);
+  }
+  [data-ui="relation-editor"] {
+    display: grid;
+    gap: var(--admin-gap);
+    margin-block-end: var(--admin-gap);
+    padding: var(--admin-gap);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="relation-empty"] {
+    margin: 0;
+    padding: var(--admin-gap);
+    color: var(--admin-ink-muted);
+    text-align: center;
+  }
+  [data-ui="modal-sheet"][data-size="large"] {
+    inline-size: min(56rem, calc(100vw - var(--admin-gap-lg)));
+  }
+  [data-ui="modal-layer"][data-presentation="dialog"] {
+    place-items: center;
+    padding: var(--admin-gap-lg);
+  }
+  [data-ui="modal-layer"][data-presentation="dialog"] [data-ui="modal-sheet"] {
+    inline-size: min(56rem, 100%);
+    block-size: auto;
+    max-block-size: calc(100dvh - var(--admin-gap-lg) * 2);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-lg);
+    overflow: hidden;
+  }
+
+  /* URL-addressable modal workspace. The backdrop is a real close link and
+     the sheet owns its scroll, so the document never grows horizontally. */
+  [data-ui="modal-layer"] {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: grid;
+    min-inline-size: 0;
+    justify-items: end;
+  }
+  [data-ui="modal-backdrop"] {
+    position: absolute;
+    inset: 0;
+    display: block;
+    background: color-mix(in srgb, #000 36%, transparent);
+    text-decoration: none;
+  }
+  button[data-ui="modal-backdrop"] {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+  }
+  [data-ui="modal-backdrop"] > span {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  [data-ui="modal-sheet"] {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    inline-size: min(34rem, calc(100vw - var(--admin-gap-lg)));
+    max-inline-size: 100%;
+    block-size: 100dvh;
+    min-inline-size: 0;
+    grid-template-rows: auto minmax(0, 1fr);
+    border-inline-start: 1px solid var(--admin-line-strong);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-float);
+  }
+  [data-ui="modal-head"] {
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--admin-gap);
+    padding: var(--admin-gap) var(--admin-gap-md);
+    border-block-end: 1px solid var(--admin-line);
+  }
+  [data-ui="modal-title"] {
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    color: var(--admin-ink);
+    font-size: var(--admin-size-md);
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="modal-close"] {
+    display: grid;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    flex: 0 0 auto;
+    place-items: center;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink-secondary);
+    text-decoration: none;
+  }
+  [data-ui="modal-body"] {
+    min-inline-size: 0;
+    overflow: auto;
+    padding: var(--admin-gap-md);
+    overscroll-behavior: contain;
+  }
+
+  [data-ui="media"] {
+    display: grid;
+    min-inline-size: 0;
+    max-inline-size: 44rem;
+    grid-template-columns: minmax(14rem, 24rem) minmax(10rem, 18rem);
+    align-items: start;
+    gap: var(--admin-gap);
+  }
+  [data-ui="media-primary"] {
+    display: block;
+    inline-size: 100%;
+    aspect-ratio: 1;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-lg);
+    object-fit: contain;
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="media-placeholder"] {
+    display: grid;
+    grid-column: 1 / -1;
+    min-block-size: 10rem;
+    place-items: center;
+    padding: var(--admin-gap-md);
+    border: 1px dashed var(--admin-line);
+    border-radius: var(--admin-radius-lg);
+    color: var(--admin-ink-secondary);
+    text-align: center;
+  }
+  [data-ui="media-gallery"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="media-item"] {
+    display: grid;
+    inline-size: 100%;
+    gap: var(--admin-gap-xs);
+    padding: var(--admin-gap-xs);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+  [data-ui="media-item"][data-primary="true"] {
+    border-color: var(--admin-accent-line);
+    box-shadow: 0 0 0 2px var(--admin-focus-ring);
+  }
+  [data-ui="media-item"] > img {
+    display: block;
+    inline-size: 100%;
+    aspect-ratio: 1;
+    border-radius: calc(var(--admin-radius) - var(--admin-gap-xs));
+    object-fit: cover;
+  }
+  [data-ui="media-item-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+  [data-ui="media-item-actions"] > form {
+    display: inline-flex;
+  }
+  [data-ui="media-actions"] {
+    display: flex;
+    grid-column: 1 / -1;
+    flex-wrap: wrap;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="media-upload"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="media-file-label"] {
+    display: inline-flex;
+    block-size: var(--admin-control-height);
+    min-block-size: var(--admin-control-height);
+    align-items: center;
+    justify-content: center;
+    padding-inline: 0.625rem;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink-secondary);
+    cursor: pointer;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+  [data-ui="media-file-label"]:focus-within {
+    outline: 2px solid var(--admin-focus-border);
+    outline-offset: 2px;
+  }
+  [data-ui="media-file-input"] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  [data-ui="media-extension"] {
+    min-inline-size: 0;
+    grid-column: 1 / -1;
+  }
+
+  [data-ui="media"] > :is([data-ui="loading"], [data-ui="error"]) {
+    grid-column: 1 / -1;
+  }
+
+  [data-ui="record-form"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap);
+  }
+  [data-ui="form-cluster"] {
+    display: flex;
+    inline-size: 100%;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: end;
+    justify-content: flex-end;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="record-form"][data-layout="actions"] {
+    display: block;
+  }
+  [data-ui="record-form"][data-layout="inline"] {
+    display: grid;
+    min-inline-size: min(100%, 14rem);
+    max-inline-size: 22rem;
+    flex: 0 1 22rem;
+    grid-template-columns: minmax(9rem, 1fr) auto;
+    align-items: end;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
+    display: inline-flex;
+    min-inline-size: auto;
+    max-inline-size: none;
+    flex: 0 0 auto;
+  }
+  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-grid"] {
+    display: block;
+  }
+  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-grid"]:empty {
+    display: none;
+  }
+  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-actions"] {
+    grid-column: 2;
+    align-self: end;
+  }
+  [data-ui="form-grid"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--admin-gap-sm) var(--admin-gap-lg);
+  }
+  [data-ui="form-field"] {
+    display: grid;
+    min-inline-size: 0;
+    min-block-size: var(--admin-control-height);
+    gap: 0.125rem;
+  }
+  [data-ui="form-field"][data-span="full"] {
+    grid-column: 1 / -1;
+  }
+  [data-ui="form-label"] {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+  [data-ui="form-required"] {
+    color: var(--admin-danger);
+    font-weight: 700;
+  }
+  [data-ui="form-control"] {
+    inline-size: 100%;
+    min-block-size: var(--admin-control-height);
+    min-inline-size: 0;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    background: var(--admin-surface);
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    transition:
+      border-color var(--admin-motion-fast),
+      box-shadow var(--admin-motion-fast);
+  }
+  :is(input, select)[data-ui="form-control"]:not([type="checkbox"]) {
+    block-size: var(--admin-control-height);
+  }
+  [data-ui="form-control"]:focus-visible {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+    outline: none;
+  }
+  [data-ui="form-control"]:disabled {
+    border-color: var(--admin-line);
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-disabled);
+    cursor: not-allowed;
+  }
+  [data-ui="form-field"][data-invalid="true"] [data-ui="form-control"] {
+    border-color: var(--admin-danger);
+  }
+  textarea[data-ui="form-control"] {
+    min-block-size: 5rem;
+    resize: vertical;
+  }
+  input[type="checkbox"][data-ui="form-control"] {
+    inline-size: 1rem;
+    min-block-size: 1rem;
+    padding: 0;
+    accent-color: var(--admin-focus-border);
+  }
+  [data-ui="form-field"][data-kind="checkbox"] {
+    grid-template-columns: 1rem minmax(0, 1fr);
+    align-content: start;
+    align-items: start;
+    column-gap: var(--admin-gap-sm);
+  }
+  [data-ui="form-field"][data-kind="checkbox"] [data-ui="form-control"] {
+    grid-column: 1;
+    grid-row: 1;
+    margin-block-start: 0.0625rem;
+  }
+  [data-ui="form-field"][data-kind="checkbox"]
+    :is([data-ui="form-label"], [data-ui="form-help"], [data-ui="form-error"]) {
+    grid-column: 2;
+  }
+  [data-ui="form-options"] {
+    display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap);
+  }
+  [data-ui="form-option"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+    cursor: pointer;
+  }
+  [data-ui="form-option-input"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    accent-color: var(--admin-focus-border);
+  }
+  [data-ui="form-option-input"]:disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
+  [data-ui="form-help"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+  }
+  [data-ui="form-error"] {
+    color: var(--admin-danger-strong);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+
+  [data-ui="date-picker"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: var(--admin-gap-sm);
+    min-inline-size: 0;
+  }
+  [data-ui="date-picker"] fieldset {
+    display: grid;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="date-picker-label"] {
+    padding: 0;
+    color: var(--admin-ink);
+    font-size: var(--admin-size-sm);
+    font-weight: 700;
+  }
+  [data-ui="date-picker-fields"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(10rem, 1fr));
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="date-picker"][data-range="false"] [data-ui="date-picker-fields"] {
+    grid-template-columns: minmax(10rem, 18rem);
+  }
+  [data-ui="date-picker-field"] {
+    display: grid;
+    min-inline-size: 0;
+    grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
+    align-items: center;
+    gap: 0.125rem var(--admin-gap-sm);
+  }
+  [data-ui="date-picker-field-label"] {
+    grid-column: 1;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    font-weight: 600;
+  }
+  [data-ui="date-picker-required"] {
+    color: var(--admin-danger);
+    font-weight: 700;
+  }
+  [data-ui="date-picker-control-wrap"] {
+    position: relative;
+    display: grid;
+    align-items: center;
+    min-inline-size: 0;
+    grid-column: 2;
+  }
+  [data-ui="date-picker-icon"] {
+    position: absolute;
+    inset-inline-start: var(--admin-gap-sm);
+    z-index: 1;
+    display: inline-grid;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    place-items: center;
+    color: var(--admin-ink-muted);
+    pointer-events: none;
+  }
+  [data-ui="date-picker-control"] {
+    inline-size: 100%;
+    block-size: var(--admin-control-height);
+    min-block-size: var(--admin-control-height);
+    min-inline-size: 0;
+    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    color: var(--admin-ink);
+    background: var(--admin-surface);
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    color-scheme: light dark;
+    transition:
+      border-color var(--admin-motion-fast),
+      box-shadow var(--admin-motion-fast);
+  }
+  [data-ui="date-picker-control"]:focus-visible {
+    border-color: var(--admin-focus-border);
+    box-shadow: 0 0 0 3px var(--admin-focus-ring);
+    outline: none;
+  }
+  [data-ui="date-picker-control"]:disabled {
+    background: var(--admin-surface-subtle);
+    color: var(--admin-ink-disabled);
+    cursor: not-allowed;
+  }
+  [data-ui="date-picker-field"][data-invalid="true"] [data-ui="date-picker-control"] {
+    border-color: var(--admin-danger);
+  }
+  [data-ui="date-picker-help"] {
+    grid-column: 2;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+  }
+  [data-ui="date-picker-error"] {
+    grid-column: 2;
+    color: var(--admin-danger-strong);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+  [data-ui="date-picker-actions"] {
+    padding-block-end: 0.0625rem;
+  }
+  [data-ui="form-errors"] {
+    margin: 0;
+    padding: var(--admin-gap-sm) var(--admin-gap);
+    border: 1px solid var(--admin-danger-line);
+    border-inline-start: 3px solid var(--admin-danger);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-danger-soft);
+    color: var(--admin-status-fixed-ink);
+    font-size: var(--admin-size-sm);
+  }
+  [data-ui="form-actions"] {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /* Record forms use the label/value rhythm of operational ERP screens.
+     Labels stay scannable in a narrow rail while controls consume the remaining
+     measure. Narrow screens return to the simpler stacked field. */
+  [data-ui="record-form"][data-layout="default"]
+    > [data-ui="form-grid"]
+    > [data-ui="form-field"]:not([data-kind="checkbox"]) {
+    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--admin-gap);
+  }
+
+  [data-ui="record-form"][data-layout="default"]
+    > [data-ui="form-grid"]
+    > [data-ui="form-field"]:not([data-kind="checkbox"])
+    > [data-ui="form-label"] {
+    grid-column: 1;
+    align-self: center;
+  }
+
+  [data-ui="record-form"][data-layout="default"]
+    > [data-ui="form-grid"]
+    > [data-ui="form-field"]:not([data-kind="checkbox"])
+    > :is([data-ui="form-control"], [data-ui="form-options"], [data-ui="form-help"], [data-ui="form-error"]) {
+    grid-column: 2;
+  }
+
+  [data-ui="record-form"][data-layout="default"]
+    > [data-ui="form-grid"]
+    > [data-ui="form-field"][data-kind="textarea"] {
+    align-items: start;
+  }
+
+  [data-ui="record-form"][data-layout="default"]
+    > [data-ui="form-grid"]
+    > [data-ui="form-field"][data-kind="textarea"]
+    > [data-ui="form-label"] {
+    margin-block-start: 0.375rem;
+  }
+
+  @media (max-width: 42rem) {
+    [data-ui="date-picker"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+    }
+    [data-ui="date-picker-fields"],
+    [data-ui="date-picker"][data-range="false"] [data-ui="date-picker-fields"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    [data-ui="date-picker-actions"],
+    [data-ui="date-picker-actions"] [data-ui="action-group"] {
+      inline-size: 100%;
+    }
+    [data-ui="date-picker-actions"] [data-ui="action"] {
+      flex: 1 1 8rem;
+    }
+    [data-ui="media"] {
+      max-inline-size: none;
+      grid-template-columns: minmax(0, 1fr);
+    }
+    [data-ui="media-gallery"],
+    [data-ui="media-actions"],
+    [data-ui="media-extension"],
+    [data-ui="media"] > :is([data-ui="loading"], [data-ui="error"]) {
+      grid-column: 1;
+    }
+    [data-ui="form-grid"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    [data-ui="form-field"][data-span="full"] {
+      grid-column: auto;
+    }
+    [data-ui="record-form"][data-layout="default"]
+      > [data-ui="form-grid"]
+      > [data-ui="form-field"]:not([data-kind="checkbox"]) {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+    }
+    [data-ui="record-form"][data-layout="default"]
+      > [data-ui="form-grid"]
+      > [data-ui="form-field"]:not([data-kind="checkbox"])
+      > :is(
+        [data-ui="form-label"],
+        [data-ui="form-control"],
+        [data-ui="form-options"],
+        [data-ui="form-help"],
+        [data-ui="form-error"]
+      ) {
+      grid-column: 1;
+    }
+    [data-ui="record-form"][data-layout="default"]
+      > [data-ui="form-grid"]
+      > [data-ui="form-field"][data-kind="textarea"]
+      > [data-ui="form-label"] {
+      margin-block-start: 0;
+    }
+    [data-ui="form-actions"],
+    [data-ui="form-actions"] [data-ui="action-group"] {
+      inline-size: 100%;
+    }
+    [data-ui="form-actions"] [data-ui="action"] {
+      flex: 1 1 10rem;
+    }
+    [data-ui="form-cluster"] {
+      align-items: stretch;
+    }
+    [data-ui="record-form"][data-layout="inline"] {
+      min-inline-size: 100%;
+      max-inline-size: none;
+      flex-basis: 100%;
+    }
+    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
+      min-inline-size: 100%;
+    }
+    [data-ui="relation-menu"] {
+      position: fixed;
+      inset: auto var(--admin-gap-sm) var(--admin-gap-sm);
+      max-block-size: min(28rem, calc(100dvh - var(--admin-gap-lg)));
+    }
+    [data-ui="relation-options"] {
+      max-block-size: min(18rem, 45dvh);
+    }
+    [data-ui="relation-dialog-toolbar"],
+    [data-ui="relation-dialog-row"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    [data-ui="relation-dialog-toolbar"] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    [data-ui="relation-dialog-row"] {
+      align-items: stretch;
+    }
+    [data-ui="relation-dialog-actions"] {
+      justify-content: flex-end;
+    }
+    [data-ui="relation-dialog-actions"] [data-ui="action"] {
+      flex: 0 0 auto;
+    }
+    [data-ui="modal-layer"][data-presentation="dialog"] {
+      padding: 0;
+    }
+    [data-ui="modal-layer"][data-presentation="dialog"] [data-ui="modal-sheet"] {
+      inline-size: 100%;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+
+  [data-ui="card-grid"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
+    gap: var(--admin-gap);
+  }
+  [data-ui="content-card"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap);
+    padding: var(--admin-gap);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    box-shadow: var(--admin-shadow-card);
+  }
+  [data-ui="card-head"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap-xs);
+  }
+  [data-ui="content-card"][data-selected="true"] {
+    border-color: var(--admin-accent-line);
+    box-shadow: 0 0 0 2px var(--admin-focus-ring);
+  }
+  [data-ui="card-title"],
+  [data-ui="card-summary"] {
+    margin: 0;
+  }
+  [data-ui="card-title"] {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-base);
+    line-height: 1.35;
+  }
+  [data-ui="card-title"] a {
+    color: inherit;
+    text-decoration: none;
+  }
+  [data-ui="card-summary"],
+  [data-ui="card-meta"] {
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+  }
+  [data-ui="card-body"] {
+    min-inline-size: 0;
+    color: var(--admin-ink);
+  }
+  [data-ui="card-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--admin-gap-sm);
+    padding-block-start: var(--admin-gap);
+    border-block-start: 1px solid var(--admin-line);
+  }
+
+  [data-ui="metric"] {
+    display: grid;
+    min-inline-size: 0;
+    gap: var(--admin-gap-xs);
+    padding: var(--admin-gap);
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+  [data-ui="card-grid"]:has(> [data-ui="metric"]) {
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  }
+  [data-ui="metric-label"],
+  [data-ui="metric-value"],
+  [data-ui="metric-detail"] {
+    margin: 0;
+  }
+  [data-ui="metric-label"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    font-weight: 600;
+  }
+  [data-ui="metric-value"] {
+    color: var(--admin-ink);
+    font-size: var(--admin-size-xl);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.25;
+  }
+  @media (max-width: 29.9375rem) {
+    [data-ui="metric"][data-tone="night-audit-amount"] [data-ui="metric-value"] {
+      font-size: var(--admin-size-lg);
+      overflow-wrap: anywhere;
+    }
+  }
+  [data-ui="metric-detail"] {
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+  }
+
+  /* Secondary navigation for deep records. */
+  [data-ui="breadcrumbs"] ol {
+    display: flex;
+    min-inline-size: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-ui="breadcrumb"] {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+  }
+  [data-ui="breadcrumb"]:not(:last-child)::after {
+    color: var(--admin-ink-muted);
+    content: "/";
+  }
+  [data-ui="breadcrumb"] a {
+    color: inherit;
+  }
+  [data-ui="breadcrumb"] [aria-current="page"] {
+    color: var(--admin-ink);
+    font-weight: 600;
+  }
+  [data-ui="tabs"] {
+    display: flex;
+    min-inline-size: 0;
+    gap: var(--admin-gap-xs);
+    overflow-x: auto;
+    border-block-end: 1px solid var(--admin-line);
+  }
+  [data-ui="tab"] {
+    display: inline-flex;
+    min-block-size: var(--admin-control-height);
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    padding-block-start: 0.25rem;
+    padding-inline: var(--admin-gap);
+    border-block-end: 2px solid transparent;
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  [data-ui="tab"][data-active="true"] {
+    border-block-end-color: var(--admin-accent);
+    color: var(--admin-accent-text);
+  }
+
+  /* Compact operational records for mobile and narrow side panels. */
+  [data-ui="record-list"] {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+    list-style: none;
+  }
+  [data-ui="record-row"] + [data-ui="record-row"] {
+    border-block-start: 1px solid var(--admin-line);
+  }
+  [data-ui="record-row"] > a {
+    display: flex;
+    min-block-size: 3rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--admin-gap);
+    padding: var(--admin-gap-sm) var(--admin-gap);
+    color: inherit;
+    text-decoration: none;
+  }
+  [data-ui="record-copy"] {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+  [data-ui="record-title"] {
+    overflow: hidden;
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="record-summary"] {
+    overflow: hidden;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="record-value"] {
+    flex: 0 0 auto;
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Inline feedback and loading. */
+  [data-ui="notice"] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--admin-gap-sm);
+    padding: var(--admin-gap-sm);
+    border: 1px solid var(--admin-accent-line);
+    border-inline-start: 3px solid var(--admin-accent);
+    border-radius: var(--admin-radius);
+    background: var(--admin-accent-soft);
+    color: var(--admin-ink);
+  }
+  [data-ui="notice"][data-tone="positive"] {
+    border-color: var(--admin-success-icon);
+    background: var(--admin-success-soft);
+  }
+  [data-ui="notice"][data-tone="warning"] {
+    border-color: var(--admin-warning-icon);
+    background: var(--admin-warning-soft);
+  }
+  [data-ui="notice"][data-tone="danger"] {
+    border-color: var(--admin-danger-line);
+    border-inline-start-color: var(--admin-danger);
+    background: var(--admin-danger-soft);
+  }
+  [data-ui="notice"][data-tone="positive"],
+  [data-ui="notice"][data-tone="warning"],
+  [data-ui="notice"][data-tone="danger"] {
+    color: var(--admin-status-fixed-ink);
+  }
+  [data-ui="notice-icon"] {
+    display: grid;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    place-items: center;
+  }
+  [data-ui="notice-copy"] {
+    min-inline-size: 0;
+  }
+  [data-ui="notice-title"],
+  [data-ui="notice-message"] {
+    margin: 0;
+  }
+  [data-ui="notice-title"] {
+    font-size: 0.8125rem;
+    font-weight: 700;
+  }
+  [data-ui="notice-message"] {
+    margin-block-start: 0.125rem;
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+  }
+  [data-ui="notice"][data-tone="positive"] [data-ui="notice-message"],
+  [data-ui="notice"][data-tone="warning"] [data-ui="notice-message"],
+  [data-ui="notice"][data-tone="danger"] [data-ui="notice-message"] {
+    color: var(--admin-status-fixed-ink-secondary);
+  }
+  [data-ui="notice-actions"],
+  [data-ui="empty-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--admin-gap-sm);
+  }
+
+  [data-ui="loading"] {
+    display: grid;
+    max-inline-size: 42rem;
+    gap: var(--admin-gap);
+    padding: var(--admin-gap-md);
+  }
+  [data-ui="loading-label"] {
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  [data-ui="skeleton"] {
+    display: grid;
+    gap: var(--admin-gap-sm);
+  }
+  [data-ui="skeleton-line"] {
+    display: block;
+    block-size: 0.75rem;
+    border-radius: var(--admin-radius-xs);
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="skeleton-line"]:nth-child(2n) {
+    inline-size: 82%;
+  }
+  [data-ui="skeleton-line"]:nth-child(3n) {
+    inline-size: 64%;
+  }
+
+  [data-ui="table-caption"] {
+    padding: var(--admin-gap);
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-align: start;
+  }
+  [data-ui="sort-link"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: inherit;
+    text-decoration: none;
+  }
+  [data-ui="sort-icon"] {
+    display: grid;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    place-items: center;
+    color: var(--admin-accent-text);
+  }
+  [data-ui="action-label"],
+  [data-ui="col"],
+  [data-ui="facet-label"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="empty-icon"] {
+    display: grid;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    place-items: center;
+    color: var(--admin-ink-muted);
+  }
+  [data-ui="kanban-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--admin-gap-sm);
+    margin-block-start: auto;
+  }
+  [data-ui="pager-range"] {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  @media (hover: hover) {
+    :where([data-ui="action"], [data-control="action"]):hover:not(:disabled, [aria-disabled="true"]),
+    [data-ui="record-row"] > a:hover {
+      border-color: var(--admin-line-strong);
+      background: var(--admin-surface-hover);
+      color: var(--admin-ink);
+    }
+    :where([data-ui="action"], [data-control="action"])[data-variant="primary"]:hover:not(:disabled) {
+      border-color: var(--admin-accent-hover);
+      background: var(--admin-accent-hover);
+      color: var(--admin-accent-ink);
+    }
+    :where([data-ui="action"], [data-control="action"])[data-variant="destructive"]:hover:not(:disabled) {
+      border-color: var(--admin-danger);
+      background: var(--admin-danger);
+      color: #fff;
+    }
+    [data-ui="content-card"][data-interactive="true"]:hover {
+      border-color: var(--admin-accent-line);
+      box-shadow: var(--admin-shadow-float);
+      transform: translateY(-2px);
+    }
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-ui="action"], [data-control="action"])[data-size] {
+      min-block-size: 2.75rem;
+    }
+    [data-ui="modal-layer"][data-presentation="dialog"]
+      [data-ui="relation-dialog-actions"]
+      [data-ui="action"][data-size="compact"] {
+      min-block-size: var(--admin-control-height);
+    }
+    :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size] {
+      inline-size: 2.75rem;
+    }
+    [data-ui="section-head"],
+    [data-ui="notice"] {
+      grid-template-columns: 1fr;
+      flex-direction: column;
+    }
+    [data-ui="section-actions"],
+    [data-ui="notice-actions"] {
+      inline-size: 100%;
+    }
+    [data-ui="surface"][data-padding="default"] {
+      padding: var(--admin-gap-md);
+    }
+    [data-ui="card-grid"] {
+      grid-template-columns: 1fr;
+    }
+    [data-ui="attachment-item"] {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: var(--admin-gap-xs);
+    }
+    [data-ui="modal-sheet"] {
+      inline-size: 100%;
+      border-inline-start: 0;
+    }
+    [data-ui="table"] [data-priority="tertiary"] {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui="action-spinner"] {
+      animation: none;
+    }
+    [data-ui="content-card"] {
+      transform: none !important;
+    }
+  }
+}
+
+@media (max-width: 47.9375rem) {
+  [data-ui="sidebar-foot"] {
+    display: none;
+  }
+}