@gemboss/ui 0.12.0 → 0.21.0

package/src/ui.css

@@ -1,610 +1 @@
-/* ══
-   Tool/App UI kit — the shared primitive layer for the internal operator surfaces
-   (admin console, seller app chrome, theme-editor). ONE semantic token spine
-   (`--ui-*`) that every primitive reads, plus the primitive CSS itself.
-
-   Why this exists: buttons/cards/badges were forked into 4–8 hand-rolled class
-   families per surface, each re-deriving color/spacing/centering — so the same
-   primitive drifted (e.g. a link-button whose text wasn't vertically centered).
-   See docs/frontend-shared-system-plan.md.
-
-   The `--ui-*` layer is SEMANTIC and resolved per surface: components only read
-   `--ui-*`; each surface maps those to its own tokens (admin → `--adm-*` below),
-   so one <Button> looks native everywhere without hard-coding a palette.
-   ══ */
-
-:root {
-  --ui-surface: #ffffff;
-  /* --ui-* is a SEMANTIC layer resolved PER SURFACE — it references each surface's own base tokens
-     rather than guessing from the OS. The default (`:root`) maps onto the seller app's warm-ivory
-     `--gemboss-*` set; `.gemboss-admin-shell` below remaps onto the dark `--adm-*` set. Literal fallbacks
-     keep the kit usable if a surface's base stylesheet isn't loaded. This is the "unify under --ui-*"
-     backbone — one token spine, no duplicated palette. */
-  --ui-surface: var(--gemboss-surface, #ffffff);
-  --ui-surface-2: var(--gemboss-hover, #eceef2);
-  --ui-text: var(--gemboss-text, #1b1c1e);
-  --ui-text-muted: var(--gemboss-text-muted, #686b71);
-  --ui-border: var(--gemboss-divider, #e5e7ea);
-  --ui-accent: var(--gemboss-primary, #1b1c1e);
-  --ui-accent-hover: var(--gemboss-primary-dark, #000000);
-  --ui-accent-fg: #ffffff;
-  --ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);   /* tinted bg for a selected/active state */
-  --ui-accent-strong: var(--gemboss-active-fg, #1b1c1e); /* readable accent text ON --ui-accent-soft */
-  --ui-text-strong: var(--gemboss-text-strong, #1b1c1e);
-  /* Chữ theo tông (ui-metric, …). Nền tối của admin ánh xạ lại bên dưới để còn đọc được. */
-  --ui-success-fg: var(--gemboss-success);
-  --ui-warning-fg: var(--gemboss-primary-dark);
-  --ui-danger-fg: var(--gemboss-danger-strong);
-  /* ONE focus ring for every control (02/10/2026): the admin's, iris — gemboss-shell.css points Polaris'
-     --p-color-border-focus at --gemboss-accent. Before, kit buttons, tabs and checks drew black, fields
-     and selects #005bd3 (Polaris' default, which the export shipped), and the admin drew iris. */
-  --ui-focus: var(--gemboss-accent, #5661f5);
-  --ui-radius-sm: 6px;
-  --ui-radius-md: 8px;
-  --ui-radius-lg: 12px;
-  --ui-space-1: 4px;
-  --ui-space-2: 8px;
-  --ui-space-3: 12px;
-  --ui-space-4: 16px;
-  /* Polaris' two heights under a mouse (0.12.0): a FIELD (gemboss-field, ui-select) is TextField/Select, 32px; a BUTTON
-     (ui-btn, ui-seg, ui-tabs) is Button, 28px. A toolbar row is 32 + 28, as in the admin. Under a thumb every control is
-     44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
-  --ui-control-h: 32px;
-  --ui-btn-h: 28px;
-  /* Polaris Card (13.9.5): no grey frame of its own, --p-shadow-100 under it. The edge is ONE 1px line in the surface's
-     --ui-border (Polaris paints a bevel inset on a ::before; a border cannot be covered by a full-bleed child, and it
-     follows a surface's dark --ui-border, which a light bevel would not). */
-  --ui-card-shadow: 0 1px 0 rgba(26,26,26,.07);
-  --ui-fs-body: 13px;
-  --ui-fs-caption: 12px;
-  /* Content column width for the seller app shell — ONE source of truth for every wide surface
-     right of the 240px sidebar (bare Page, .gemboss-w-dashboard, .gemboss-w-gallery, and the
-     navigation skeleton), so they cannot drift apart again. The /admin console is a SEPARATE
-     surface and still sets its own 1200px in admin/admin-shell.css; it does not read this token.
-     900px. Polaris' own cap is 998px — 41.375rem primary column + 20rem secondary + 1rem gutter,
-     read out of the installed @shopify/polaris stylesheet — and this sits deliberately BELOW it.
-
-     The reason is a measurement, not a preference about Shopify. The previous value was 1080/1040,
-     and moving to Polaris' 998 was the obvious "correct" answer, so that shipped first (#2250). Then
-     it turned out to be invisible: 1040 → 998 is 42px total, which is 21px of extra gutter per side.
-     Screenshotted side by side at 1440 on the same page seconds apart, the two rows were
-     indistinguishable, and Chris — who asked for this — could not see any change at all.
-
-     A cap only does its job if the breathing room it buys is legible. Measured gutters on
-     .Polaris-Page at 1440 beside the 240px sidebar:
-
-       1040px → 75 / 86      (before)
-        998px → 96 / 107     Polaris' number; +21px a side, not perceivable
-        960px → 115 / 126
-        900px → 145 / 156    +70px a side, roughly double the old gutter
-
-     900 is the first value where the column visibly stops leaning on the rail. The one cost, and it
-     was measured rather than guessed: card descriptions gain a line (Cart drawer 2 → 3). The 3-up
-     grid holds, and no width from 320 to 1920 overflows.
-
-     Still fixed px, no percentage, for the reason Polaris uses px: a % cap grows the reading measure
-     with the monitor (80% of 2560 is 2048px of line length). Responsiveness belongs to the padding
-     and to the secondary column dropping, not to the cap.
-
-     .gemboss-w-form stays 662px — that IS `.Polaris-Page--narrowWidth`, the primary column alone,
-     and a form is the one surface where Polaris' measure is about the input, not the page. */
-  --ui-content-max: 900px;
-}
-
-/* Admin console bridge: the black chrome defines `--adm-*`; remap `--ui-*` onto them so every
-   <Button>/<Select>/<Tag>/<Modal> inside .gemboss-admin-shell adopts the dark palette automatically. */
-.gemboss-admin-shell {
-  --ui-surface: var(--adm-surface);
-  --ui-surface-2: var(--adm-surface-2);
-  --ui-text: var(--adm-text);
-  --ui-text-muted: var(--adm-muted);
-  --ui-border: var(--adm-divider);
-  --ui-accent: var(--adm-accent);
-  --ui-accent-hover: var(--gemboss-primary-dark, #000000);
-  --ui-accent-fg: #ffffff;
-  --ui-accent-soft: var(--adm-accent-soft);
-  --ui-accent-strong: var(--adm-accent-fg);
-  --ui-text-strong: var(--adm-text-strong);
-  /* Tông trên nền tối #16161a: pha 70% với trắng ⇒ tương phản 6,2 / 9,5 / 4,8 (đo 01/10/2026, review #3609). */
-  --ui-success-fg: color-mix(in srgb, var(--gemboss-success) 70%, #ffffff);
-  --ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);
-  --ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);
-  --ui-focus: var(--adm-accent);
-  --ui-card-shadow: none;
-}
-
-/* ── Button ──
-   inline-flex + center so a <button> and an <a> render identically (anchors ignore
-   `height` as inline elements — the root cause of the misaligned link-buttons). */
-.ui-btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
-  height: var(--ui-btn-h); padding: 0 var(--ui-space-3); box-sizing: border-box;
-  line-height: 1; white-space: nowrap; vertical-align: middle;
-  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550;
-  cursor: pointer; text-decoration: none; user-select: none;
-  border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text);
-  transition: background .12s ease, border-color .12s ease;
-}
-.ui-btn:hover { background: var(--ui-surface-2); text-decoration: none; }
-.ui-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
-.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
-.ui-btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-fg); }
-.ui-btn--primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
-.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-text-muted); }
-.ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-/* `ui-btn--sm`: the default size under a mouse since 0.12.0; it only marks a button the admin keeps compact under a finger. */
-
-/* ── Card ── */
-.ui-card {
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-card-shadow); padding: var(--ui-space-4); color: var(--ui-text);
-}
-.ui-card__title { font-size: 14px; line-height: 20px; font-weight: 650; margin: 0 0 var(--ui-space-2); }
-/* Đầu thẻ có nút: `<div class="ui-card__head"><h2 class="ui-card__title">…</h2><button class="ui-btn">…</button></div>`.
-   Tiêu đề trái, hành động phải, xuống dòng khi hẹp (01/10/2026: partner-radar rel-head / agr). */
-.ui-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
-.ui-card__head > .ui-card__title { margin: 0; }
-.ui-card__head > :last-child:not(.ui-card__title) { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
-
-/* ── Select ──
-   Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
-   uses the muted token via %-encoding fallback).
-   Its BOX is the text field's (29/09/2026, Chris): same --gemboss-field-* tokens for ground, line and
-   ink, same hover, same focus ring as `.gemboss-field`. Before, a grey --ui-surface-2 select stood next
-   to a bordered white field in the same form (gempress editor, admin forms), and `:focus` removed the
-   outline and only recoloured the border, so a keyboard user saw almost nothing. Height is
-   --ui-control-h, the field's (Polaris Select, 32): a field, not a button (28, --ui-btn-h). */
-.ui-select {
-  height: var(--ui-control-h); padding: 0 32px 0 12px; max-width: 100%;
-  background: var(--p-color-input-bg-surface, var(--gemboss-field-bg)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;
-  border: 1px solid var(--p-color-input-border, var(--gemboss-field-line)); border-radius: var(--ui-radius-md);
-  color: var(--p-color-text, var(--gemboss-field-ink)); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 450;
-  appearance: none; -webkit-appearance: none; cursor: pointer;
-}
-.ui-select:hover:not(:disabled) {
-  border-color: var(--p-color-input-border-hover, var(--gemboss-field-line-hover));
-  background-color: var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover));
-}
-.ui-select:focus { outline: none; }
-.ui-select:focus-visible:not(:disabled) {
-  outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px;
-  border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
-}
-.ui-select:disabled { opacity: .5; cursor: not-allowed; }
-.ui-select--slim { height: 30px; font-size: var(--ui-fs-caption); }
-
-/* ── Tag / Chip ──
-   Small inline labels. `solid` = filled muted pill (was gemboss-vault-tag); `chip` =
-   bordered mono token (was gemboss-vault-chip). `accent` tone for the highlighted state. */
-.ui-tag {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: var(--ui-fs-caption); line-height: 20px; font-weight: 450;
-  padding: 0 6px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2); color: var(--ui-text-muted);
-}
-.ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
-.ui-tag--chip {
-  text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500;
-  padding: 2px 8px; background: transparent; border: 1px solid var(--ui-border);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-.ui-tag--chip.ui-tag--accent { color: var(--adm-accent-fg, var(--ui-accent)); border-color: var(--ui-accent); background: transparent; }
-
-/* Danh sách link dạng chip: `<div class="ui-chips"><a class="ui-tag ui-tag--chip" href>…</a>…</div>` (01/10/2026,
-   partner-radar /competitors: "đã tích hợp với GemPages"). `.ui-tag--chip` vốn là nhãn TĨNH cao ~19px, dưới mức 24px
-   của link trong danh sách (WCAG 2.5.8, §9.1) — visual-gate đo đúng chỗ đó đỏ ở 320 / 390 / 768. Chip là link thì cao
-   ≥ 28px, chữ thường (không mono), có hover + focus-visible; dưới ngón tay là điều khiển, lên 44px (khối coarse dưới).
-   Khe 8px: hai target nhỏ hơn 44px phải cách nhau ≥ 8px. */
-.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin: 0; padding: 0; list-style: none; }
-.ui-chips > a.ui-tag--chip {
-  min-height: 28px; padding: 4px 12px; border-radius: var(--ui-radius-md, 8px);
-  font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text); text-decoration: none;
-}
-.ui-chips > a.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
-.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px; }
-/* Danh sách LỌC dài (chuyên môn, hạng…) dùng ui-chips thay ui-seg: ui-seg không xuống dòng nên tràn ngang ở 320px.
-   Ô đang chọn = `aria-current="page"` (lọc là một URL), cùng tông với ui-seg đang chọn. */
-.ui-chips > a.ui-tag--chip[aria-current="page"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
-
-/* ── Tông màu cho tag: `ui-tag--success | --warning | --danger` (token ngữ nghĩa có sẵn). Trạng thái, nguồn,
-   kết quả kiểm — thay cho màu viết cứng ở từng surface. */
-.ui-tag--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong, var(--gemboss-success)); }
-.ui-tag--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
-.ui-tag--danger { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong, var(--gemboss-danger)); }
-
-/* ── Chữ phụ: `<p class="ui-muted">`, `<span class="ui-muted">` — mô tả, chú thích, dòng meta. Cỡ caption, màu muted.
-   Trước đây mỗi surface tự viết `.muted` (partner-radar: 180 chỗ). */
-.ui-muted { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
-
-/* ── Tiêu đề trang: `<div class="ui-page-head"><h1>…</h1><p>…</p></div>`. Đưa lên NGUYÊN VĂN từ admin
-   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Không đặt margin cho h1
-   và không dùng flex: margin 0 đến từ reset (Polaris ở admin, app-shell.css trong shell của bề mặt từ 0.12.0). */
-.ui-page-head { margin-bottom: 20px; }
-.ui-page-head h1 { color: var(--ui-text-strong); font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; } /* own line-height: the 20px body line overlapped a wrapped title (0.5.1) */
-.ui-page-head p { color: var(--ui-text-muted); font-size: var(--ui-fs-body); margin-top: 4px; }
-
-/* ── Thanh công cụ: `<div class="ui-toolbar">` — ô tìm giãn, điều khiển bám phải, một hàng gọn, xuống dòng khi hẹp.
-   Đưa lên từ admin `.gemboss-admin-toolbar`. Chỉ BỐ CỤC: ô tìm là `gemboss-field gemboss-field--group`. */
-.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
-
-/* ── Ô số liệu: `<div class="ui-metrics"><div class="ui-metric"><span class="ui-metric__val">12</span>
-   <span class="ui-metric__lbl">Nhãn</span></div></div>`; tông `ui-metric--success | --warning | --danger`.
-   Đưa lên từ admin `.gemboss-ec-metric` (GemChat). Khác `ui-stat` (viên đếm nhỏ, có thể bấm làm bộ lọc). */
-.ui-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
-.ui-metric { display: flex; flex-direction: column; gap: 1px; min-width: 78px; padding: 8px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; }
-/* Cả ô là link (`<a class="ui-metric" href>`): vùng chạm là cả ô (~52px), không phải con số 20px bên trong
-   (visual-gate đỏ ở partner-radar /ops 01/10/2026 khi link nằm trong __val). */
-a.ui-metric { text-decoration: none; color: inherit; }
-a.ui-metric:hover { border-color: var(--ui-text-muted); }
-a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.ui-metric__val { font-size: 17px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
-.ui-metric__lbl { font-size: var(--ui-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
-.ui-metric--success { border-color: color-mix(in srgb, var(--gemboss-success) 40%, transparent); }
-.ui-metric--success .ui-metric__val { color: var(--ui-success-fg); }
-.ui-metric--warning { border-color: color-mix(in srgb, #c99a2e 40%, transparent); }
-.ui-metric--warning .ui-metric__val { color: var(--ui-warning-fg); }
-.ui-metric--danger { border-color: color-mix(in srgb, var(--gemboss-danger-strong) 40%, transparent); }
-.ui-metric--danger .ui-metric__val { color: var(--ui-danger-fg); }
-
-/* ── Cặp nhãn – giá trị: `<dl class="ui-dl"><div><dt>Quốc gia</dt><dd>IL</dd></div>…</dl>` — dữ kiện của một hồ sơ.
-   Lưới tự giãn: mỗi ô ≥ 160px, xuống dòng khi hẹp. */
-.ui-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; margin: 0; }
-.ui-dl > div { min-width: 0; }
-.ui-dl dt { font-size: var(--ui-fs-caption); color: var(--ui-text-muted); }
-.ui-dl dd { margin: 4px 0 0; font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
-
-/* ── Thông báo: `<div class="ui-notice ui-notice--warning">…</div>`. Lỗi tải, cảnh báo cấu hình, việc cần người
-   làm. Mỗi tông mang màu chữ riêng (nền tông luôn sáng, kể cả trong admin tối). Không có tông = ghi chú trung tính.
-   role="status"/"alert" CHỈ khi thông báo xuất hiện sau khi trang đã tải (vùng live); có sẵn lúc tải thì không role. */
-.ui-notice { padding: 12px 16px; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); font-size: var(--ui-fs-body); overflow-wrap: anywhere; } /* a URL or key in a notice wraps instead of being cut by its card (gemwatcher Pulse, 0.6.2) */
-.ui-notice--warning { background: var(--gemboss-warning-soft); border-color: var(--gemboss-warning-border); color: var(--gemboss-warning); }
-.ui-notice--danger { background: var(--gemboss-danger-soft); border-color: var(--gemboss-danger-border); color: var(--gemboss-danger-strong); }
-.ui-notice--success { background: var(--gemboss-success-soft); border-color: var(--gemboss-success-border); color: var(--gemboss-success-strong); }
-
-/* ── Phân trang: `<nav class="ui-pager" aria-label="Trang"><a href rel="prev"><span aria-hidden="true">‹</span> Trước</a><span aria-current="page">2 / 9</span>
-   <a href rel="next">Sau ›</a></nav>`. Link ≥ 32px (≥ 24px WCAG 2.5.8), 44px dưới ngón tay (khối coarse). */
-.ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
-.ui-pager > a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text); text-decoration: none; font-size: var(--ui-fs-body); }
-.ui-pager > a:hover { background: var(--ui-surface-2); }
-.ui-pager > a:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px; }
-.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
-
-/* ── Badge ──
-   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/450 (its text span; 550 was the box), padding 2/8, radius 8, the secondary
-   fill. The admin's /admin console draws it too (components/ui/Badge.tsx). Tones (`--success|--warning|--critical|
-   --info`, `--dot`) are in kit-plain.css, for the non-React surfaces; the seller app uses Polaris <Badge tone>. */
-.ui-badge {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; white-space: nowrap;
-  padding: 2px 8px; border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-text) 8%, transparent); color: var(--ui-text-muted);
-} /* a tint of the ink, not --ui-surface-2: that is the table row hover, and a badge vanished on hover (0.5.1) */
-
-/* ── Modal ──
-   Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
-   scope and would render light. Kept in-tree so --ui-* resolves to the surface.
-   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Buttons are 28 everywhere since 0.12.0 (--ui-btn-h). */
-.ui-overlay {
-  position: fixed; inset: 0; z-index: 500;
-  background: rgba(0, 0, 0, 0.5);
-  display: grid; place-items: center; padding: 20px;
-}
-.ui-modal {
-  width: min(460px, 100%);
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px;
-  box-shadow: var(--gemboss-shadow-overlay, 0 20px 60px rgba(0, 0, 0, 0.4)); overflow: hidden;
-}
-/* Head = title + the one close button every modal used to draw for itself. */
-.ui-modal__head {
-  display: flex; align-items: center; gap: 12px;
-  padding: 12px 16px; border-bottom: 1px solid var(--ui-border);
-  font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text);
-}
-.ui-modal__title { min-width: 0; flex: 1 1 auto; }
-.ui-modal__close {
-  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
-  width: 28px; height: 28px; padding: 0;
-  border: 0; border-radius: var(--ui-radius-md, 8px); background: transparent;
-  color: var(--ui-text-muted); cursor: pointer;
-}
-.ui-modal__close svg { width: 20px; height: 20px; }
-.ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-modal__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
-/* Here, not in kit-plain.css: the admin loads only this file (0.7.3). */
-.ui-modal__body { padding: 16px; }
-.ui-modal__foot {
-  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
-  padding: 12px 16px; border-top: 1px solid var(--ui-border);
-}
-/* 44px under a thumb or at phone width; -8px keeps the head 53. */
-@media (pointer: coarse), (max-width: 47.9975em) {
-  .ui-modal__close { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
-  :is(.ui-modal__head, .ui-modal__foot) .ui-btn { min-height: 44px; }
-}
-
-/* `size="lg"`: only the HOOK here (this sheet is paid on every screen); its geometry is in
-   SettingsDialog.module.css, the one consumer's chunk. */
-.ui-modal--lg { position: relative; }
-
-/* The kit's multi-line field is the ONE field family (01/10/2026, Chris: "form control đồng bộ"): same
-   border token, hover and focus ring as `gemboss-field` / `.ui-select` (it drew a third look on GemFactory). */
-.ui-textarea {
-  width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
-  background: var(--p-color-input-bg-surface, var(--gemboss-field-bg));
-  border: 1px solid var(--p-color-input-border, var(--gemboss-field-line)); border-radius: var(--ui-radius-md);
-  padding: 12px; color: var(--p-color-text, var(--gemboss-field-ink)); font-size: var(--ui-fs-body); line-height: 1.5; font-family: inherit;
-}
-.ui-textarea::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
-.ui-textarea:hover:not(:disabled) {
-  border-color: var(--p-color-input-border-hover, var(--gemboss-field-line-hover));
-  background-color: var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover));
-}
-.ui-textarea:focus { outline: none; }
-.ui-textarea:focus-visible:not(:disabled) {
-  outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px;
-  border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
-}
-.ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
-/* On a PHONE-WIDTH screen every field of the family reads 16px (iOS zooms the page on tap below that)
-   and a select is a 44px target — by WIDTH, as `gemboss-field` does, because a desktop browser at 320px
-   still reports pointer: fine. Measured on GemFactory at 390px before this: select 13px, textarea 14px. */
-@media (max-width: 47.9975em) {
-  .ui-select.ui-select, .ui-textarea { font-size: 16px; }
-  /* Height only for the full select: `--slim` is a density decision (table rows), as the coarse block keeps it. */
-  .ui-select:not(.ui-select--slim) { min-height: 44px; }
-}
-
-/* ── Segmented control ──
-   Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
-   selected segment uses the accent-soft state. */
-.ui-seg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
-.ui-seg :is(button, a) {
-  display: inline-grid; place-items: center; width: calc(var(--ui-btn-h) - 2px); height: calc(var(--ui-btn-h) - 2px);
-  border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
-}
-.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-caption); font-weight: 550; }
-.ui-seg :is(button, a) + :is(button, a) { border-left: 1px solid var(--ui-border); }
-.ui-seg :is(button, a):hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-seg :is(button, a):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
-/* Lọc / chế độ xem bằng LINK (trang server-render, chọn = đổi URL): `<a aria-current="page">` là ô đang chọn. */
-.ui-seg a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ui-text-muted); }
-.ui-seg a[aria-current="page"],
-.ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
-.ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
-
-/* ── Stat chip ──
-   Count-led pill; clickable ones double as filters (active = accent-soft). */
-.ui-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: 24px; }
-.ui-stat {
-  display: inline-flex; align-items: center; gap: var(--ui-space-2);
-  padding: 6px 12px; border-radius: 999px; font-family: inherit;
-  background: var(--ui-surface); border: 1px solid var(--ui-border);
-  font-size: var(--ui-fs-caption); color: var(--ui-text-muted);
-}
-.ui-stat b { color: var(--ui-text-strong); font-weight: 650; }
-.ui-stat.is-clickable { cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease; }
-.ui-stat.is-clickable:hover { border-color: var(--ui-text-muted); background: var(--ui-surface-2); }
-.ui-stat.is-clickable.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
-.ui-stat.is-clickable.active b { color: var(--ui-accent-strong); }
-
-/* ── Toast / notification bar ──
-   App-wide "done / failed" pill for async actions (delete/duplicate/publish…).
-   Polaris-style: dark pill, bottom-center, error variant in critical red. Lives
-   in <ToastProvider> (components/ui/Toast.tsx), portaled to <body>. */
-.gemboss-toast-viewport {
-  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
-  z-index: 2147483000; /* above every overlay/modal/popup */
-  display: flex; flex-direction: column; align-items: center; gap: 12px;
-  width: max-content; max-width: min(560px, calc(100vw - 32px)); pointer-events: none;
-}
-.gemboss-toast {
-  pointer-events: auto;
-  display: flex; align-items: center; gap: 12px;
-  min-width: 220px; max-width: 100%; padding: 12px 12px 12px 16px;
-  background: var(--ui-text-strong, #1a1917); color: var(--gemboss-on-primary, #fff); border-radius: 12px;
-  font-size: var(--ui-fs-body, 13px); line-height: 1.4; font-weight: 500;
-  box-shadow: var(--gemboss-shadow-overlay, 0 8px 28px rgba(0, 0, 0, 0.24));
-  animation: gemboss-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.gemboss-toast.is-error { background: var(--gemboss-danger, #d72c0d); }
-.gemboss-toast-text { flex: 1 1 auto; min-width: 0; }
-.gemboss-toast-action {
-  flex: 0 0 auto; border: 0; background: transparent; color: var(--gemboss-on-primary, #fff); cursor: pointer;
-  padding: 4px 8px; border-radius: 8px; font: inherit; font-weight: 650;
-  text-decoration: underline; text-underline-offset: 2px;
-  transition: background 0.14s ease;
-}
-.gemboss-toast-action:hover { background: rgba(255, 255, 255, 0.16); }
-.gemboss-toast-dismiss {
-  flex: 0 0 auto; display: inline-grid; place-items: center;
-  width: 24px; height: 24px; border: 0; border-radius: 8px; cursor: pointer;
-  background: rgba(255, 255, 255, 0.12); color: var(--gemboss-on-primary, #fff);
-  transition: background 0.14s ease;
-}
-.gemboss-toast-dismiss:hover { background: rgba(255, 255, 255, 0.26); }
-.gemboss-toast-action:focus-visible,
-.gemboss-toast-dismiss:focus-visible { outline: 2px solid var(--gemboss-on-primary, #fff); outline-offset: 2px; }
-@keyframes gemboss-toast-in {
-  from { opacity: 0; transform: translateY(12px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@media (prefers-reduced-motion: reduce) { .gemboss-toast { animation: none; } }
-
-/* ── The kit's controls under a thumb ──
- * Measured by hit test on /admin/{theme-kernel,media,style-packs} at 390 and 1366 with a coarse
- * pointer: segmented buttons 36x36, selects 30-36 tall, clickable stat tiles 29, the asset row's
- * note button 30x30. §9.1 puts every one of them in the CONTROL tier (44px).
- *
- * HERE rather than in each surface's stylesheet, because this is the shared primitive layer — the
- * same reason the kit exists at all. The admin console and the seller app both read it.
- *
- * The block below is `pointer: coarse` only: a mouse at desktop width keeps the density these surfaces were
- * designed at. Growing a box for every pointer is what #2147 did to a working width.
- */
-/* Phone WIDTH (< 768) with a mouse too (a narrow window): buttons and segments are 44 (0.12.0; at desktop width 28). */
-@media (max-width: 47.9975em) { .ui-btn:not(.ui-btn--sm), .ui-seg :is(button, a) { min-height: 44px; } .ui-seg :is(button, a):not(.is-text) { min-width: 44px; } }
-@media (pointer: coarse) {
-  /* NOT `.ui-textarea`: it already declares `min-height: 96px` earlier in this file, so adding it to
-     a 44px group LOWERS it — same specificity, later line. The note dialog's box would have gone from
-     96 to ~58 on every touch device, inside a block whose whole point is bigger targets.
-     NOT `.ui-btn--sm` either: `min-height` always beats `height`, so a 44px floor voids the compact
-     variant — including four of them on the seller's own /app/settings/store. A density variant is a
-     decision, not an oversight; it gets its own measurement pass or none. */
-  .ui-btn:not(.ui-btn--sm),
-  .ui-stat.is-clickable,
-  .ui-chips > a.ui-tag--chip,
-  .ui-pager > a,
-  .ui-seg :is(button, a) { min-height: 44px; }
-  /* A clickable stat whose label is one short token ("7d" on /admin/gem-intelligence) measured 40x44
-     in the 13/09/2026 sweep: the height floor held, the width did not. */
-  .ui-stat.is-clickable { min-width: 44px; justify-content: center; }
-  /* Same for a one-word link chip: partner-radar /posts "All" measured 41x44 at 320 / 390 / 768 (visual-gate 03/10/2026,
-     after its labels went English and got shorter). */
-  .ui-chips > a.ui-tag--chip { min-width: 44px; justify-content: center; }
-  /* `--slim` is a second single class and lands later in this file, so it would win on order over a
-     bare `.ui-select`. Doubled here to decide it on specificity instead. */
-  .ui-select.ui-select,
-  .ui-select--slim.ui-select--slim { min-height: 44px; }
-  /* The icon-only segment is 36 WIDE as well — a target is an area. */
-  .ui-seg :is(button, a) { min-width: 44px; }
-}
-
-/* ── Skeleton ──
-   Vạch xám giữ chỗ cho nội dung chưa về. Ánh sáng chạy qua là gợi ý "đang chờ", không phải trang
-   trí — nên nó tắt hẳn với `prefers-reduced-motion`, giữ nguyên vạch tĩnh. */
-.ui-skeleton { display: flex; flex-direction: column; gap: var(--ui-space-2); }
-.ui-skeleton__line {
-  display: block; height: 12px; border-radius: 6px;
-  background: linear-gradient(90deg, var(--ui-surface-2) 25%, var(--ui-border) 37%, var(--ui-surface-2) 63%);
-  background-size: 400% 100%;
-  animation: ui-skeleton-sheen 1.4s ease-in-out infinite;
-}
-@keyframes ui-skeleton-sheen { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
-@media (prefers-reduced-motion: reduce) {
-  .ui-skeleton__line { animation: none; background: var(--ui-surface-2); }
-}
-/* Nhãn cho trình đọc màn hình — thứ `<p>Loading…</p>` cũ vốn có và một khối hình thuần sẽ mất. */
-.ui-sr-only {
-  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-
-}
-
-/* ── Resizer: the seam you drag between two panels ──
-   One look for every split in the fleet: the admin's editors (chat | preview) today; made for gemcare's
-   inbox columns too (they adopt it at their next ui:sync). The element is the drag target; its GEOMETRY (a flex item, a grid edge, an absolutely
-   placed strip) belongs to the surface. While a drag runs the surface puts `ui-resizing` on <body>
-   (and may put `dragging` on the seam itself to keep its grip lit).
-   Markup: <div class="ui-resizer" role="separator" aria-orientation="vertical" tabindex="0"
-   aria-label="…" aria-valuenow aria-valuemin aria-valuemax>. Pointer events, not mouse events (touch
-   is a pointer); arrow keys move it — a focusable separator that ignores the keyboard is INERT. */
-/* `touch-action: none` is what makes a FINGER drag reach this element at all. `preventDefault()` on
-   `pointerdown` does not stop panning: the browser hands the gesture to the nearest scroller and sends
-   `pointercancel`, so the seam jumps once and stops. */
-.ui-resizer { cursor: col-resize; position: relative; touch-action: none; outline: none; }
-/* The grip pill is invisible at rest (a clean seam) and fades in over the zone, on keyboard focus,
-   and while a drag runs. Focus shows the pill rather than a ring: on a 5px seam a ring is a smear. */
-.ui-resizer::before {
-  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-  width: 4px; height: 44px; border-radius: var(--gemboss-radius-full);
-  background: var(--gemboss-primary);
-  opacity: 0;
-  transition: opacity 0.14s ease, height 0.14s ease;
-}
-.ui-resizer:hover::before,
-.ui-resizer:focus-visible::before,
-.ui-resizer.dragging::before,
-body.ui-resizing .ui-resizer::before { opacity: 1; height: 52px; }
-/* A FINGER NEEDS MORE THAN 5px, and the line must still look like 5px. WCAG 2.5.8 puts the floor for
-   this kind of target at 24px, so the HIT area grows and the visible seam does not — widening the
-   element itself would also move the columns. Only where the pointer is coarse. */
-@media (pointer: coarse) {
-  .ui-resizer::after {
-    content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px;
-    touch-action: none;   /* the band must claim the gesture too, or the scroller still wins */
-    z-index: 2;           /* above the panels either side, transparent */
-  }
-}
-body.ui-resizing, body.ui-resizing * { cursor: col-resize !important; user-select: none !important; }
-/* While dragging, a full-viewport transparent shield sits above everything — iframes included — so the
-   pointer stream is never captured by a cross-document frame (the classic "stuck cursor"). */
-body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999; cursor: col-resize; }
-
-/* ── Tabs · Table · Empty state ──
-   Plain-CSS primitives for surfaces that are NOT React (gemcare's vanilla dashboard reads this
-   file through `npm run export:ui-css`). The React app has Polaris <Tabs>/<DataTable>/<EmptyState>
-   for these; nothing in apps/admin uses the classes below, and they restyle no existing component.
-   Only `--ui-*` / `--gemboss-*` tokens, so the dark `.gemboss-admin-shell` bridge applies too.
-
-   Tabs: `<div class="ui-tabs" role="tablist"><button role="tab" aria-selected="true">…` — the
-   selected state IS `aria-selected`, so what a screen reader announces and what is painted cannot
-   disagree. Polaris Tabs under a mouse (0.12.0): 28px, 12px/550; 8px apart, the §9.1 gap for targets under 44.
-   44px under a finger or at phone width (the rule after these). */
-.ui-tabs {
-  display: flex; gap: var(--ui-space-2); border-bottom: 1px solid var(--ui-border);
-  overflow-x: auto; scrollbar-width: none;
-}
-.ui-tabs > button,
-.ui-tabs > a {
-  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2);
-  min-height: var(--ui-btn-h); padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
-  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
-  font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550; white-space: nowrap;
-  color: var(--ui-text-muted);
-  transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
-}
-.ui-tabs > button:hover,
-.ui-tabs > a:hover { color: var(--ui-text); background: var(--ui-surface-2); }
-.ui-tabs > button:focus-visible,
-.ui-tabs > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
-.ui-tabs > a { text-decoration: none; }
-/* Tab bằng link (mỗi tab là một URL): `<nav class="ui-tabs"><a aria-current="page">` — cùng hình với tab nút. */
-.ui-tabs > a[aria-current="page"],
-.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); }
-.ui-tabs > a[aria-current="page"]::after,
-.ui-tabs > button[aria-selected="true"]::after {
-  content: ""; position: absolute; left: var(--ui-space-3); right: var(--ui-space-3); bottom: 0;
-  height: 2px; border-radius: var(--gemboss-radius-full); background: var(--ui-accent);
-}
-.ui-tabs > button:disabled { opacity: .5; cursor: not-allowed; }
-@media (pointer: coarse), (max-width: 47.9975em) { .ui-tabs > :is(button, a) { min-height: 44px; } }
-
-/* Table: wrap it — `<div class="ui-table-wrap"><table class="ui-table">` — so a wide table scrolls
-   inside its card instead of pushing the page sideways at 320px. Numeric cells take `.is-num`:
-   right-aligned tabular figures, so a column of numbers lines up digit for digit. */
-.ui-table-wrap {
-  overflow-x: auto; max-width: 100%;
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-card-shadow);
-}
-.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-body); color: var(--ui-text); }
-.ui-table th,
-.ui-table td {
-  padding: var(--ui-space-2) 6px; text-align: left; vertical-align: middle;
-  border-bottom: 1px solid var(--ui-border);
-}
-/* Polaris DataTable (13.9.5, measured on /app/analytics 05/10/2026): cells 8px 6px (a row 36), header 12px 6px (45),
-   the first column 12px in from the edge. */
-/* :where() keeps the edge columns at the base rule's weight, so a surface's own `.x-table td { padding }` still wins. */
-.ui-table :is(th, td):where(:first-child) { padding-left: var(--ui-space-3); }
-.ui-table :is(th, td):where(:last-child) { padding-right: var(--ui-space-3); }
-.ui-table th { font-weight: 450; color: var(--ui-text-muted); white-space: nowrap; }
-.ui-table thead th { padding-block: var(--ui-space-3); } /* the column header; a row header (tbody th) is a cell */
-.ui-table tbody tr:last-child > td { border-bottom: 0; }
-.ui-table tbody tr:hover { background: var(--ui-surface-2); }
-.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
-/* Dòng phụ dưới nội dung chính của một ô (lớp, nguồn, ngày…): `<td><a>Loox</a><span class="ui-sub">Cộng sinh</span></td>`.
-   Trước đây mỗi surface tự viết `.muted` riêng trong ô bảng (partner-radar, gemwatcher). */
-/* Link nằm thẳng trong ô (tên bản ghi dẫn sang trang chi tiết) là link trong DANH SÁCH: ≥ 24px (WCAG 2.5.8, §9.1).
-   Chữ 13px cho hộp 17px; visual-gate đo đỏ ở partner-radar /competitors 01/10/2026. inline-flex giữ nó trên dòng. */
-.ui-table td > a { display: inline-flex; align-items: center; min-height: 24px; }
-.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
-
-/* Empty state: `<div class="ui-empty"><p class="ui-empty__title">…</p><p class="ui-empty__body">…</p>
-   <button class="ui-btn">…</button></div>`. Says what is missing and what to do next. */
-.ui-empty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2);
-  padding: var(--ui-space-4); padding-block: 40px; text-align: center;
-  color: var(--ui-text-muted); font-size: var(--ui-fs-body);
-}
-.ui-empty__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text-strong); }
-.ui-empty__body { margin: 0; max-width: 48ch; line-height: 1.5; }
-.ui-empty > .ui-btn { margin-top: var(--ui-space-2); }
+:root{--ui-surface: #ffffff;--ui-surface: var(--gemboss-surface, #ffffff);--ui-surface-2: var(--gemboss-hover, #eceef2);--ui-text: var(--gemboss-text, #1b1c1e);--ui-text-muted: var(--gemboss-text-muted, #686b71);--ui-border: var(--gemboss-divider, #e5e7ea);--ui-accent: var(--gemboss-primary, #1b1c1e);--ui-accent-hover: var(--gemboss-primary-dark, #000000);--ui-accent-fg: #ffffff;--ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);--ui-accent-strong: var(--gemboss-active-fg, #1b1c1e);--ui-text-strong: var(--gemboss-text-strong, #1b1c1e);--ui-success-fg: var(--gemboss-success);--ui-warning-fg: var(--gemboss-primary-dark);--ui-danger-fg: var(--gemboss-danger-strong);--ui-focus: var(--gemboss-accent, #5661f5);--ui-radius-sm: 6px;--ui-radius-md: 8px;--ui-radius-lg: 12px;--ui-space-1: 4px;--ui-space-2: 8px;--ui-space-3: 12px;--ui-space-4: 16px;--ui-control-h: 32px;--ui-btn-h: 28px;--ui-card-shadow: 0 1px 0 rgba(26,26,26,.07);--ui-fs-body: 13px;--ui-fs-caption: 12px;--ui-content-max: 900px}.gemboss-admin-shell{--ui-surface: var(--adm-surface);--ui-surface-2: var(--adm-surface-2);--ui-text: var(--adm-text);--ui-text-muted: var(--adm-muted);--ui-border: var(--adm-divider);--ui-accent: var(--adm-accent);--ui-accent-hover: var(--gemboss-primary-dark, #000000);--ui-accent-fg: #ffffff;--ui-accent-soft: var(--adm-accent-soft);--ui-accent-strong: var(--adm-accent-fg);--ui-text-strong: var(--adm-text-strong);--ui-success-fg: color-mix(in srgb, var(--gemboss-success) 70%, #ffffff);--ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);--ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);--ui-focus: var(--adm-accent);--ui-card-shadow: none}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);height:var(--ui-btn-h);padding:0 var(--ui-space-3);box-sizing:border-box;line-height:1;white-space:nowrap;vertical-align:middle;border-radius:var(--ui-radius-md);font-family:inherit;font-size:var(--ui-fs-caption);font-weight:550;cursor:pointer;text-decoration:none;user-select:none;border:1px solid var(--ui-border);background:transparent;color:var(--ui-text);transition:background .12s ease,border-color .12s ease}.ui-btn:hover{background:var(--ui-surface-2);text-decoration:none}.ui-btn:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-btn[disabled],.ui-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-btn--primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}.ui-btn--primary:hover{background:var(--ui-accent-hover);border-color:var(--ui-accent-hover)}.ui-btn--ghost{border-color:transparent;background:transparent;color:var(--ui-text-muted)}.ui-btn--ghost:hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-card-shadow);padding:var(--ui-space-4);color:var(--ui-text)}.ui-card__title{font-size:14px;line-height:20px;font-weight:650;margin:0 0 var(--ui-space-2)}.ui-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2);margin-bottom:var(--ui-space-2)}.ui-card__head>.ui-card__title{margin:0}.ui-card__head>:last-child:not(.ui-card__title){display:flex;flex-wrap:wrap;gap:var(--ui-space-2)}.ui-select{height:var(--ui-control-h);padding:0 32px 0 12px;max-width:100%;background:var(--p-color-input-bg-surface, var(--gemboss-field-bg)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;border:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:var(--ui-radius-md);color:var(--p-color-text, var(--gemboss-field-ink));font-family:inherit;font-size:var(--ui-fs-body);font-weight:450;appearance:none;-webkit-appearance:none;cursor:pointer}.ui-select:hover:not(:disabled){border-color:var(--p-color-input-border-hover, var(--gemboss-field-line-hover));background-color:var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover))}.ui-select:focus{outline:none}.ui-select:focus-visible:not(:disabled){outline:2px solid var(--p-color-border-focus, var(--ui-focus));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.ui-select:disabled{opacity:.5;cursor:not-allowed}.ui-select--slim{height:30px;font-size:var(--ui-fs-caption)}.ui-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--ui-fs-caption);line-height:20px;font-weight:450;padding:0 6px;border-radius:var(--ui-radius-md);background:var(--ui-surface-2);color:var(--ui-text-muted)}.ui-tag--accent{background:var(--adm-accent-soft, rgba(20,22,26,.05));color:var(--adm-accent-fg, var(--ui-accent))}.ui-tag--chip{text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;padding:2px 8px;background:transparent;border:1px solid var(--ui-border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.ui-tag--chip.ui-tag--accent{color:var(--adm-accent-fg, var(--ui-accent));border-color:var(--ui-accent);background:transparent}.ui-chips{display:flex;flex-wrap:wrap;gap:var(--ui-space-2, 8px);margin:0;padding:0;list-style:none}.ui-chips>a.ui-tag--chip{min-height:28px;padding:4px 12px;border-radius:var(--ui-radius-md, 8px);font-family:inherit;font-size:var(--gemboss-fs-caption, 12px);color:var(--ui-text);text-decoration:none}.ui-chips>a.ui-tag--chip:hover{background:var(--ui-surface-2);border-color:var(--ui-text-muted)}.ui-chips>a.ui-tag--chip:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus));outline-offset:1px}.ui-chips>a.ui-tag--chip[aria-current=page]{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong);font-weight:600}.ui-tag--success{background:var(--gemboss-success-soft);color:var(--gemboss-success-strong, var(--gemboss-success))}.ui-tag--warning{background:var(--gemboss-warning-soft);color:var(--gemboss-warning)}.ui-tag--danger{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong, var(--gemboss-danger))}.ui-muted{color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-page-head{margin-bottom:20px}.ui-page-head h1{color:var(--ui-text-strong);font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.01em}.ui-page-head p{color:var(--ui-text-muted);font-size:var(--ui-fs-body);margin-top:4px}.ui-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}.ui-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0}.ui-metric{display:flex;flex-direction:column;gap:1px;min-width:78px;padding:8px 12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}a.ui-metric{text-decoration:none;color:inherit}a.ui-metric:hover{border-color:var(--ui-text-muted)}a.ui-metric:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-metric__val{font-size:17px;font-weight:700;color:var(--ui-text);font-variant-numeric:tabular-nums;line-height:1.15}.ui-metric__lbl{font-size:var(--ui-fs-caption);font-weight:500;color:var(--ui-text-muted)}.ui-metric--success{border-color:color-mix(in srgb,var(--gemboss-success) 40%,transparent)}.ui-metric--success .ui-metric__val{color:var(--ui-success-fg)}.ui-metric--warning{border-color:color-mix(in srgb,#c99a2e 40%,transparent)}.ui-metric--warning .ui-metric__val{color:var(--ui-warning-fg)}.ui-metric--danger{border-color:color-mix(in srgb,var(--gemboss-danger-strong) 40%,transparent)}.ui-metric--danger .ui-metric__val{color:var(--ui-danger-fg)}.ui-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 16px;margin:0}.ui-dl>div{min-width:0}.ui-dl dt{font-size:var(--ui-fs-caption);color:var(--ui-text-muted)}.ui-dl dd{margin:4px 0 0;font-weight:600;color:var(--ui-text);overflow-wrap:anywhere}.ui-notice{padding:12px 16px;border-radius:var(--ui-radius-md);border:1px solid var(--ui-border);background:var(--ui-surface-2);color:var(--ui-text);font-size:var(--ui-fs-body);overflow-wrap:anywhere}.ui-notice--warning{background:var(--gemboss-warning-soft);border-color:var(--gemboss-warning-border);color:var(--gemboss-warning)}.ui-notice--danger{background:var(--gemboss-danger-soft);border-color:var(--gemboss-danger-border);color:var(--gemboss-danger-strong)}.ui-notice--success{background:var(--gemboss-success-soft);border-color:var(--gemboss-success-border);color:var(--gemboss-success-strong)}.ui-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}.ui-pager>a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text);text-decoration:none;font-size:var(--ui-fs-body)}.ui-pager>a:hover{background:var(--ui-surface-2)}.ui-pager>a:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus));outline-offset:1px}.ui-pager>[aria-current=page]{color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--ui-fs-caption);line-height:16px;font-weight:450;white-space:nowrap;padding:2px 8px;border-radius:var(--ui-radius-md);background:color-mix(in srgb,var(--ui-text) 8%,transparent);color:var(--ui-text-muted)}.ui-overlay{position:fixed;inset:0;z-index:500;background:#00000080;display:grid;place-items:center;padding:20px}.ui-modal{width:min(460px,100%);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay, 0 20px 60px rgba(0, 0, 0, .4));overflow:hidden}.ui-modal__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ui-border);font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text)}.ui-modal__title{min-width:0;flex:1 1 auto}.ui-modal__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--ui-radius-md, 8px);background:transparent;color:var(--ui-text-muted);cursor:pointer}.ui-modal__close svg{width:20px;height:20px}.ui-modal__close:hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-modal__body{padding:16px}.ui-modal__foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--ui-border)}@media (pointer: coarse),(max-width: 47.9975em){.ui-modal__close{width:44px;height:44px;margin:-8px -8px -8px 0}:is(.ui-modal__head,.ui-modal__foot) .ui-btn{min-height:44px}}.ui-modal--lg{position:relative}.ui-textarea{width:100%;min-height:96px;resize:vertical;box-sizing:border-box;background:var(--p-color-input-bg-surface, var(--gemboss-field-bg));border:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:var(--ui-radius-md);padding:12px;color:var(--p-color-text, var(--gemboss-field-ink));font-size:var(--ui-fs-body);line-height:1.5;font-family:inherit}.ui-textarea::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.ui-textarea:hover:not(:disabled){border-color:var(--p-color-input-border-hover, var(--gemboss-field-line-hover));background-color:var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover))}.ui-textarea:focus{outline:none}.ui-textarea:focus-visible:not(:disabled){outline:2px solid var(--p-color-border-focus, var(--ui-focus));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.ui-textarea:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.ui-select.ui-select,.ui-textarea{font-size:16px}.ui-select:not(.ui-select--slim){min-height:44px}}.ui-seg{display:inline-flex;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}.ui-seg :is(button,a){display:inline-grid;place-items:center;width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;background:transparent;color:var(--ui-text-muted);cursor:pointer;font-family:inherit}.ui-seg :is(button,a).is-text{width:auto;padding:0 12px;font-size:var(--ui-fs-caption);font-weight:550;grid-auto-flow:column;column-gap:2px}.ui-seg :is(button,a)+:is(button,a){border-left:1px solid var(--ui-border)}.ui-seg :is(button,a):hover{background:var(--ui-surface-2);color:var(--ui-text)}.ui-seg :is(button,a):focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-seg a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ui-text-muted)}.ui-seg a[aria-current=page],.ui-seg button.active{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}.ui-seg svg{width:16px;height:16px;fill:currentColor}.ui-seg svg[fill=none]{fill:none}.ui-seg :is(button,a):disabled{opacity:.45;cursor:not-allowed}.ui-seg :is(button,a):disabled:not(.active):hover{background:transparent;color:var(--ui-text-muted)}.ui-seg--fill{display:flex;width:100%}.ui-seg.ui-seg--fill>:is(button,a).is-text{flex:1 1 0;min-width:0}.ui-seg-n{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--ui-text-muted);font-weight:450}.ui-stats{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-bottom:24px}.ui-stat{display:inline-flex;align-items:center;gap:var(--ui-space-2);padding:6px 12px;border-radius:999px;font-family:inherit;background:var(--ui-surface);border:1px solid var(--ui-border);font-size:var(--ui-fs-caption);color:var(--ui-text-muted)}.ui-stat b{color:var(--ui-text-strong);font-weight:650}.ui-stat.is-clickable{cursor:pointer;transition:border-color .14s ease,background-color .14s ease}.ui-stat.is-clickable:hover{border-color:var(--ui-text-muted);background:var(--ui-surface-2)}.ui-stat.is-clickable.active{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}.ui-stat.is-clickable.active b{color:var(--ui-accent-strong)}.gemboss-toast-viewport{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:2147483000;display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100vw - 32px));pointer-events:none}.gemboss-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-width:220px;max-width:100%;padding:12px 12px 12px 16px;background:var(--ui-text-strong, #1a1917);color:var(--gemboss-on-primary, #fff);border-radius:12px;font-size:var(--ui-fs-body, 13px);line-height:1.4;font-weight:500;box-shadow:var(--gemboss-shadow-overlay, 0 8px 28px rgba(0, 0, 0, .24));animation:gemboss-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-toast.is-error{background:var(--gemboss-danger, #d72c0d)}.gemboss-toast-text{flex:1 1 auto;min-width:0}.gemboss-toast-action{flex:0 0 auto;border:0;background:transparent;color:var(--gemboss-on-primary, #fff);cursor:pointer;padding:4px 8px;border-radius:8px;font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:2px;transition:background .14s ease}.gemboss-toast-action:hover{background:#ffffff29}.gemboss-toast-dismiss{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:8px;cursor:pointer;background:#ffffff1f;color:var(--gemboss-on-primary, #fff);transition:background .14s ease}.gemboss-toast-dismiss:hover{background:#ffffff42}.gemboss-toast-action:focus-visible,.gemboss-toast-dismiss:focus-visible{outline:2px solid var(--gemboss-on-primary, #fff);outline-offset:2px}@keyframes gemboss-toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.gemboss-toast{animation:none}}@media (max-width: 47.9975em){.ui-btn:not(.ui-btn--sm),.ui-seg :is(button,a){min-height:44px}.ui-seg :is(button,a):not(.is-text){min-width:44px}}@media (pointer: coarse){.ui-btn:not(.ui-btn--sm),.ui-stat.is-clickable,.ui-chips>a.ui-tag--chip,.ui-pager>a,.ui-seg :is(button,a){min-height:44px}.ui-stat.is-clickable{min-width:44px;justify-content:center}.ui-chips>a.ui-tag--chip{min-width:44px;justify-content:center}.ui-select.ui-select,.ui-select--slim.ui-select--slim{min-height:44px}.ui-seg :is(button,a){min-width:44px}}.ui-skeleton{display:flex;flex-direction:column;gap:var(--ui-space-2)}.ui-skeleton__line{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--ui-surface-2) 25%,var(--ui-border) 37%,var(--ui-surface-2) 63%);background-size:400% 100%;animation:ui-skeleton-sheen 1.4s ease-in-out infinite}@keyframes ui-skeleton-sheen{0%{background-position:100% 50%}to{background-position:0 50%}}@media (prefers-reduced-motion: reduce){.ui-skeleton__line{animation:none;background:var(--ui-surface-2)}}.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.ui-resizer{cursor:col-resize;position:relative;touch-action:none;outline:none}.ui-resizer:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:44px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-primary);opacity:0;transition:opacity .14s ease,height .14s ease}.ui-resizer:hover:before,.ui-resizer:focus-visible:before,.ui-resizer.dragging:before,body.ui-resizing .ui-resizer:before{opacity:1;height:52px}@media (pointer: coarse){.ui-resizer:after{content:"";position:absolute;inset:0 -14px;touch-action:none;z-index:2}}body.ui-resizing,body.ui-resizing *{cursor:col-resize!important;user-select:none!important}body.ui-resizing:after{content:"";position:fixed;inset:0;z-index:9999;cursor:col-resize}.ui-tabs{display:flex;gap:var(--ui-space-2);border-bottom:1px solid var(--ui-border);overflow-x:auto;scrollbar-width:none}.ui-tabs>button,.ui-tabs>a{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:var(--ui-btn-h);padding:0 var(--ui-space-3);border:0;background:transparent;cursor:pointer;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0;font-family:inherit;font-size:var(--ui-fs-caption);font-weight:550;white-space:nowrap;color:var(--ui-text-muted);transition:color var(--gemboss-transition-fast) ease,background-color var(--gemboss-transition-fast) ease}.ui-tabs>button:hover,.ui-tabs>a:hover{color:var(--ui-text);background:var(--ui-surface-2)}.ui-tabs>button:focus-visible,.ui-tabs>a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-tabs>a{text-decoration:none}.ui-tabs>a[aria-current=page],.ui-tabs>button[aria-selected=true]{color:var(--ui-text-strong)}.ui-tabs>a[aria-current=page]:after,.ui-tabs>button[aria-selected=true]:after{content:"";position:absolute;left:var(--ui-space-3);right:var(--ui-space-3);bottom:0;height:2px;border-radius:var(--gemboss-radius-full);background:var(--ui-accent)}.ui-tabs>button:disabled{opacity:.5;cursor:not-allowed}@media (pointer: coarse),(max-width: 47.9975em){.ui-tabs>:is(button,a){min-height:44px}}.ui-table-wrap{overflow-x:auto;max-width:100%;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-card-shadow)}.ui-table{width:100%;border-collapse:collapse;font-size:var(--ui-fs-body);color:var(--ui-text)}.ui-table th,.ui-table td{padding:var(--ui-space-2) 6px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ui-border)}.ui-table :is(th,td):where(:first-child){padding-left:var(--ui-space-3)}.ui-table :is(th,td):where(:last-child){padding-right:var(--ui-space-3)}.ui-table th{font-weight:450;color:var(--ui-text-muted);white-space:nowrap}.ui-table thead th{padding-block:var(--ui-space-3)}.ui-table tbody tr:last-child>td{border-bottom:0}.ui-table tbody tr:hover{background:var(--ui-surface-2)}.ui-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.ui-table td>a{display:inline-flex;align-items:center;min-height:24px}.ui-table .ui-sub{display:block;margin-top:2px;font-size:var(--ui-fs-caption);color:var(--ui-text-muted);font-weight:400}.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-space-2);padding:var(--ui-space-4);padding-block:40px;text-align:center;color:var(--ui-text-muted);font-size:var(--ui-fs-body)}.ui-empty__title{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text-strong)}.ui-empty__body{margin:0;max-width:48ch;line-height:1.5}.ui-empty>.ui-btn{margin-top:var(--ui-space-2)}