@21stware/rpui 0.2.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +47 -87
  2. package/dist/core/style.d.ts +1 -1
  3. package/dist/gallery.d.ts +5 -0
  4. package/dist/gallery.js +2654 -0
  5. package/dist/gallery.js.map +1 -0
  6. package/dist/rpml-loader.d.ts +2 -0
  7. package/dist/rpml-loader.js +27 -0
  8. package/dist/rpml-loader.js.map +1 -0
  9. package/dist/rpui.d.ts +2 -1
  10. package/dist/rpui.js +607 -423
  11. package/dist/rpui.js.map +1 -1
  12. package/dist/serve/cli.d.ts +1 -0
  13. package/dist/serve.js +143 -0
  14. package/package.json +14 -22
  15. package/LICENSE +0 -20
  16. package/SKILL.md +0 -279
  17. package/llms.txt +0 -298
package/README.md CHANGED
@@ -1,113 +1,73 @@
1
- # RPUI
1
+ # @21stware/rpui
2
2
 
3
- RPUI (Rapid Prototype UI) is a static UI prototype canvas and snapshot primitive runtime implemented with native Web Components. It converts interaction states, permission variants, loading/empty/error states, and nested UI details into one static HTML document.
3
+ The RPUI Web Components runtime — renders [RPML](https://github.com/21stware/rpui) (`.rpml`) static UI prototypes in the browser. Importing the bundle registers the custom elements as a side effect and injects one global stylesheet.
4
4
 
5
- A prototype imports one generated runtime file:
5
+ ## Install
6
6
 
7
- ```html
8
- <script type="module" src="./dist/rpui.js"></script>
7
+ ```bash
8
+ npm install @21stware/rpui
9
+ # or: bun add @21stware/rpui
9
10
  ```
10
11
 
11
- The runtime registers custom elements as a side effect and injects its global stylesheet and inline SVG icons. No framework, external CSS, image CDN, or icon CDN is required.
12
-
13
- ## What it provides
12
+ ## Render a prototype
14
13
 
15
- - `rp-page`, `rp-main-view`, `rp-annotation`, `rp-enum`, and `rp-enum-item` for the annotation canvas.
16
- - A persistent two-pane page layout: title and main snapshot stay visible on the left; top-level annotations render in an independently scrollable right pane.
17
- - Device preset sizing for `web`, `ipad`, and `mobile`, with fixed-width/auto-height snapshots by default.
18
- - `rp-enum-item description="..."` for short state explanations.
19
- - `rp-*` snapshot primitives for static product UI snapshots and annotation slices.
20
- - Compatibility aliases: `proto-*` for canvas primitives and `snap-*` for snapshot primitives.
21
- - Automatic numbered pin rendering from `data-pin="N"` inside `rp-main-view`.
22
- - Attribute-driven static visual states for forms, navigation, tables, overlays, feedback, and empty/loading states.
23
- - `llms.txt` as the model-facing component reference.
24
- - `skill.txt` as the repeatable RPUI prototype authoring workflow.
14
+ Import the runtime once; author with the bare RPML language tags (`page`, `view`, `button`, …):
25
15
 
26
- ## Development
27
-
28
- ```bash
29
- npm install
30
- npm run build
16
+ ```html
17
+ <script type="module" src="node_modules/@21stware/rpui/dist/rpui.js"></script>
18
+
19
+ <page title="Tasks" route="/tasks">
20
+ <view device="web">
21
+ <viewport device="web">
22
+ <navigator height="56"><logo label="PM+"></logo></navigator>
23
+ </viewport>
24
+ </view>
25
+ </page>
31
26
  ```
32
27
 
33
- Useful scripts:
28
+ Programmatic use (the runtime re-exports the parser entry points, so no separate dependency is needed):
34
29
 
35
- ```bash
36
- npm run dev # open the source-mode component preview at /preview/
37
- npm run typecheck # run TypeScript type checking without emitting files
38
- npm run build # type-check, bundle dist/rpui.js, and emit declarations
39
- npm run release # currently aliases npm run build
40
- npm run clean # remove and recreate dist/
30
+ ```js
31
+ import { parseToPage } from '@21stware/rpui';
32
+ document.body.appendChild(parseToPage(rpmlSource));
41
33
  ```
42
34
 
43
- There are currently no lint or test scripts. Use `npm run build` as the full type-check and release artifact verification step.
44
-
45
- ## Release artifacts
46
-
47
- Runtime source is organized into internal modules:
48
-
49
- - `src/rpui.ts` — public side-effect entry/aggregator
50
- - `src/registry.ts` — custom element registration and aliases
51
- - `src/core/` — icons, runtime CSS injection, DOM/attribute helpers
52
- - `src/canvas/` — page shell, main view, annotations, enums
53
- - `src/primitives/` — snapshot primitive component groups
54
-
55
- Build output is generated into `dist/`:
56
-
57
- - `dist/rpui.js` — bundled browser/runtime entrypoint
58
- - `dist/rpui.d.ts` — TypeScript declaration output for the public entry
59
- - `dist/rpui.js.map` — source map
35
+ ## `rpui serve` — host a directory of prototypes
60
36
 
61
- The package is ESM and exposes `dist/rpui.js` through `main`, `module`, and `exports`. The package is side-effectful because importing it registers custom elements.
62
-
63
- ## Development preview
64
-
65
- Run the source-mode preview during component development:
37
+ The package ships an `rpui` bin that hosts a directory of `.rpml` files as one navigable gallery (collapsible sidebar, hash routing, `index.rpml` as the default home) and prints a local URL:
66
38
 
67
39
  ```bash
68
- npm run dev
40
+ npx @21stware/rpui serve .
69
41
  ```
70
42
 
71
- This opens `/preview/`, which imports `/src/rpui.ts` directly through Vite. Use it to review component states while editing source.
72
-
73
- The demo files under `demo/` intentionally import `../dist/rpui.js` and are release-artifact smoke tests; run `npm run build` before opening them after source changes.
74
-
75
- ## Demo
76
-
77
- After building, open `demo/index.html` in a browser.
78
-
79
- The demo shows the intended static document structure:
43
+ ```
44
+ RPUI serving 9 .rpml files from /Users/me/prototypes
80
45
 
81
- - one `<rp-page>` root
82
- - one `<rp-main-view>` containing a main snapshot
83
- - meaningful `data-pin="N"` anchors
84
- - matching top-level annotations
85
- - nested annotations and enum-based state coverage
46
+ Local: http://localhost:3000
86
47
 
87
- ## Authoring guidance
48
+ Press Ctrl+C to stop
49
+ ```
88
50
 
89
- Use `rp-*` tags for new work. `proto-*` and `snap-*` are compatibility aliases.
51
+ The directory is re-scanned on every page load, so editing a `.rpml` and refreshing the browser shows the change — no build step, no watcher, no websocket.
90
52
 
91
- Prefer device presets for new prototypes:
53
+ | Argument | Description |
54
+ |----------|-------------|
55
+ | `[dir]` | Directory to serve (default: current directory) |
56
+ | `-p, --port` | Port (default `3000`; auto-increments if busy) |
57
+ | `--host` | Host (default `localhost`) |
92
58
 
93
- ```html
94
- <rp-main-view device="web" scale="0.65">
95
- <rp-viewport device="web">
96
- <!-- fixed-width, auto-height snapshot -->
97
- </rp-viewport>
98
- </rp-main-view>
59
+ ```bash
60
+ # serve a specific directory on a chosen port
61
+ npx @21stware/rpui serve ./prototypes --port 4000
99
62
  ```
100
63
 
101
- Supported presets are `web` (1440px), `ipad` (834px), and `mobile` (390px). Explicit `width` overrides a preset; explicit numeric `height` keeps legacy fixed-height behavior.
102
-
103
- Top-level annotations render in the right-side annotation pane automatically. Keep annotation content compact; use `rp-enum-item description="..."` for short state explanations.
104
-
105
- Prototype pages should be static and self-contained:
64
+ ## Exports
106
65
 
107
- - no functional JavaScript interactions
108
- - no event attributes such as `onclick`
109
- - no external CSS/image/icon CDN
110
- - no `position:absolute` or `position:fixed` in snapshot content
111
- - all states represented explicitly through attributes and `<rp-enum>` items
66
+ | Export | Description |
67
+ |--------|-------------|
68
+ | `@21stware/rpui` | side-effect entry; registers all custom elements and injects the runtime stylesheet |
69
+ | `registerAll()` | re-run registration (idempotent; `define()` skips already-registered tags) |
70
+ | `parseToPage(source)` | parse `.rpml` text into a ready-to-mount `<page>` element |
71
+ | `rewriteTags(source)` | rewrite bare RPML language tags to the registered component tags |
112
72
 
113
- See `llms.txt` for the component reference and `skill.txt` for the full prototype workflow.
73
+ See the repo root for the full [RPML spec](../../spec), [`llms.txt`](../../llms.txt) component reference, and the [`SKILL.md`](../../SKILL.md) authoring workflow.
package/dist/core/style.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export declare const RPUI_STYLE_ID = "rpui-runtime-style";
2
- export declare const style = "\n:root { --rp-bg:#f0f2f5; --rp-surface:#fff; --rp-surface-soft:#f9fafb; --rp-text:#111827; --rp-muted:#6b7280; --rp-border:#e5e7eb; --rp-border-strong:#d1d5db; --rp-primary:#2563eb; --rp-success:#059669; --rp-warning:#d97706; --rp-danger:#dc2626; --rp-purple:#7c3aed; --rp-radius-sm:4px; --rp-radius-md:8px; --rp-radius-lg:12px; --rp-shadow:0 8px 28px rgba(15,23,42,.08); --rp-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif; }\n* { box-sizing:border-box; }\nbody { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }\n.rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }\nrp-page, proto-page { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }\n.rp-page-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }\n.rp-page-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.rp-page-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.rp-page-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.rp-page-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.rp-page-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.rp-page-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.rp-page-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.rp-annotation-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.rp-annotation-pane-inner { padding:4px 12px 24px 6px; }\nrp-main-view, proto-main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }\n.rp-main-shell { position:relative; overflow:visible; border:1px solid var(--rp-border-strong); border-radius:var(--rp-radius-md); background:var(--rp-surface); box-shadow:var(--rp-shadow); }\n.rp-main-stage-clip { overflow:hidden; border-radius:var(--rp-radius-md); }\n.rp-main-stage { position:relative; transform-origin:top left; background:var(--rp-surface); }\n.rp-pin { position:absolute; z-index:20; display:grid; place-items:center; width:24px; height:24px; color:#fff; font-size:11px; font-weight:700; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:translate(-6px,-6px) rotate(-45deg); box-shadow:0 2px 8px rgba(37,99,235,.25); cursor:pointer; }\n.rp-pin > span { transform:rotate(45deg); }\n.rp-pin:hover { opacity:0.85; }\nrp-annotation, proto-annotation { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nrp-annotation rp-annotation, proto-annotation proto-annotation, rp-annotation proto-annotation, proto-annotation rp-annotation { margin:10px 0 8px 22px; }\n.rp-annotation-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.rp-annotation-title { font-weight:700; color:#111827; }\n.rp-annotation-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.rp-annotation-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.rp-annotation-marker.drop > span { transform:rotate(45deg); }\n.rp-annotation-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }\n.rp-annotation-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }\n.rp-annotation-marker.triangle > span { transform:translateY(2px); font-size:9px; }\n.rp-annotation-body { display:block; position:relative; width:fit-content; max-width:920px; }\n.rp-pin-slice { width:18px; height:18px; font-size:10px; box-shadow:0 1px 5px rgba(37,99,235,.3); }\n.rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:820px; }\n.rp-annotation-pane rp-annotation, .rp-annotation-pane proto-annotation { max-width:none; }\n.rp-annotation-pane .rp-annotation-body { max-width:none; }\n.rp-annotation-pane .rp-annotation-body > :not(rp-annotation):not(proto-annotation):not(rp-enum):not(proto-enum) { max-width:420px; }\n.rp-annotation-body p { margin:0 0 8px; }\nrp-enum, proto-enum { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.rp-annotation-pane rp-enum, .rp-annotation-pane proto-enum { flex-wrap:wrap; }\nrp-enum-item, proto-enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.rp-enum-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.rp-enum-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.rp-enum-label-text { display:block; }\n.rp-enum-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.rp-enum-content { display:block; width:fit-content; padding:8px; }\n.rp-annotation-title { font-weight:700; color:#111827; cursor:pointer; }\n.rp-annotation-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nsnap-viewport, rp-viewport { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nsnap-layout, rp-layout { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nsnap-layout > *, rp-layout > * { min-width:0; }\nsnap-viewport snap-layout, rp-viewport rp-layout { width:100%; }\nsnap-viewport > snap-layout, rp-viewport > rp-layout { flex:1 1 auto; min-height:0; }\nsnap-viewport > snap-navbar, rp-viewport > rp-navbar { flex:0 0 auto; }\nsnap-panel, rp-panel { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }\nsnap-viewport snap-panel, rp-viewport rp-panel { width:auto; min-width:0; }\nsnap-panel[elevation=\"1\"], rp-panel[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\nsnap-panel[elevation=\"2\"], rp-panel[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nsnap-navbar, rp-navbar { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsnap-sidebar, rp-sidebar { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nsnap-viewport snap-sidebar, rp-viewport rp-sidebar { min-height:100%; }\nsnap-sidebar[collapsed], rp-sidebar[collapsed] { width:72px; }\nsnap-logo, rp-logo { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsnap-search, rp-search, snap-input, rp-input, snap-date-picker, rp-date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\nsnap-textarea, rp-textarea { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsnap-search[state=\"focus\"], rp-search[state=\"focus\"], snap-input[state=\"focus\"], rp-input[state=\"focus\"], snap-textarea[state=\"focus\"], rp-textarea[state=\"focus\"], snap-date-picker[state=\"focus\"], rp-date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-search[state=\"filled\"], rp-search[state=\"filled\"], snap-input[state=\"filled\"], rp-input[state=\"filled\"], snap-textarea[state=\"filled\"], rp-textarea[state=\"filled\"], snap-date-picker[state=\"filled\"], rp-date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsnap-search[state=\"error\"], rp-search[state=\"error\"], snap-input[state=\"error\"], rp-input[state=\"error\"], snap-textarea[state=\"error\"], rp-textarea[state=\"error\"], snap-date-picker[state=\"error\"], rp-date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsnap-search[state=\"disabled\"], rp-search[state=\"disabled\"], snap-input[state=\"disabled\"], rp-input[state=\"disabled\"], snap-textarea[state=\"disabled\"], rp-textarea[state=\"disabled\"], snap-date-picker[state=\"disabled\"], rp-date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\nsnap-input[label], rp-input[label], snap-date-picker[label], rp-date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\nsnap-input[label][state=\"focus\"], rp-input[label][state=\"focus\"], snap-input[label][state=\"filled\"], rp-input[label][state=\"filled\"], snap-input[label][state=\"error\"], rp-input[label][state=\"error\"], snap-date-picker[label][state=\"focus\"], rp-date-picker[label][state=\"focus\"], snap-date-picker[label][state=\"filled\"], rp-date-picker[label][state=\"filled\"], snap-date-picker[label][state=\"error\"], rp-date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\n.rp-field-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\nsnap-input[state=\"focus\"] .rp-field-control, rp-input[state=\"focus\"] .rp-field-control, snap-date-picker[state=\"focus\"] .rp-field-control, rp-date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-input[state=\"filled\"] .rp-field-control, rp-input[state=\"filled\"] .rp-field-control, snap-date-picker[state=\"filled\"] .rp-field-control, rp-date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\nsnap-input[state=\"error\"] .rp-field-control, rp-input[state=\"error\"] .rp-field-control, snap-date-picker[state=\"error\"] .rp-field-control, rp-date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\n.rp-field-label { display:block; margin:0 0 6px; color:#374151; font-size:12px; font-weight:650; }\n.rp-placeholder { color:#9ca3af; }\n.rp-value { color:#111827; }\n.rp-error-text { color:var(--rp-danger); font-size:12px; }\nsnap-select, rp-select { display:inline-block; width:var(--snap-width,280px); }\n.rp-select-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nsnap-select[state=\"expanded\"] .rp-select-control, rp-select[state=\"expanded\"] .rp-select-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-select[state=\"disabled\"], rp-select[state=\"disabled\"] { opacity:.55; }\n.rp-select-value { flex:1 1 auto; min-width:0; }\n.rp-select-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nsnap-select[state=\"expanded\"] .rp-select-options, rp-select[state=\"expanded\"] .rp-select-options { display:grid; gap:2px; }\n.rp-select-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-select-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-badge, rp-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\nsnap-avatar, rp-avatar { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nsnap-list, rp-list { display:flex; flex-direction:column; gap:4px; width:100%; }\nsnap-list-item, rp-list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nsnap-list-item[state=\"selected\"], rp-list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nsnap-list-item[state=\"disabled\"], rp-list-item[state=\"disabled\"] { opacity:.5; }\n.rp-list-label { flex:1 1 auto; }\n.rp-list-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\nsnap-tabs, rp-tabs { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\nsnap-tab, rp-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\nsnap-tab.rp-tab-active, rp-tab.rp-tab-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nsnap-button, rp-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nsnap-button[size=\"sm\"], rp-button[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nsnap-button[size=\"lg\"], rp-button[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nsnap-button[variant=\"primary\"], rp-button[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nsnap-button[variant=\"secondary\"], rp-button[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nsnap-button[variant=\"danger\"], rp-button[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nsnap-button[variant=\"link\"], rp-button[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nsnap-button[variant=\"ghost\"], rp-button[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nsnap-button[state=\"disabled\"], rp-button[state=\"disabled\"], snap-button[disabled], rp-button[disabled] { opacity:.5; }\nsnap-button-group, rp-button-group { display:inline-flex; gap:0; width:fit-content; }\nsnap-button-group > snap-button, rp-button-group > rp-button { border-radius:0; margin-left:-1px; }\nsnap-button-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nsnap-button-group > :last-child { border-radius:0 8px 8px 0; }\nsnap-table, rp-table { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-viewport snap-table, rp-viewport rp-table { width:100%; max-width:none; }\n.rp-table-row { display:table-row; }\n.rp-table-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.rp-table-head .rp-table-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.rp-table-row:last-child .rp-table-cell { border-bottom:0; }\nsnap-table-row, rp-table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\nsnap-table-row > span, rp-table-row > span { padding:10px 12px; font-size:13px; }\nsnap-table-row[state=\"unread\"], rp-table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\nsnap-table-row[state=\"selected\"], rp-table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\nsnap-table-row[state=\"highlighted\"], rp-table-row[state=\"highlighted\"] { background:#fffbeb; }\nsnap-table-row[state=\"disabled\"], rp-table-row[state=\"disabled\"] { opacity:.5; }\nsnap-bulk-action-bar, rp-bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nsnap-empty, rp-empty { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.rp-empty-title { color:#111827; font-weight:700; }\n.rp-empty-desc { font-size:13px; }\nsnap-loading, rp-loading { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.rp-skeleton-line { height:14px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-spinner { display:inline-grid; place-items:center; width:32px; height:32px; }\nsnap-alert, rp-alert, snap-toast, rp-toast { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nsnap-alert[type=\"info\"], rp-alert[type=\"info\"], snap-toast[type=\"info\"], rp-toast[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-alert[type=\"success\"], rp-alert[type=\"success\"], snap-toast[type=\"success\"], rp-toast[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nsnap-alert[type=\"warning\"], rp-alert[type=\"warning\"], snap-toast[type=\"warning\"], rp-toast[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nsnap-alert[type=\"error\"], rp-alert[type=\"error\"], snap-toast[type=\"error\"], rp-toast[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\nsnap-dropdown, rp-dropdown, snap-popover, rp-popover { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\nsnap-tooltip, rp-tooltip { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nsnap-modal, rp-modal { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\nsnap-drawer, rp-drawer { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.rp-modal-head, .rp-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.rp-modal-body, .rp-drawer-body { padding:16px; }\n.rp-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-card, rp-card { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-card-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.rp-card-title { display:block; color:#111827; font-weight:750; }\n.rp-card-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.rp-card-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nsnap-stat-card, rp-stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-stat-label { color:#6b7280; font-size:12px; font-weight:650; }\n.rp-stat-value { color:#111827; font-size:26px; font-weight:800; }\n.rp-stat-change { font-size:12px; font-weight:700; }\nsnap-stat-card[trend=\"up\"] .rp-stat-change, rp-stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nsnap-stat-card[trend=\"down\"] .rp-stat-change, rp-stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\nsnap-tag, rp-tag { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\nsnap-tag[color=\"green\"], rp-tag[color=\"green\"] { background:#dcfce7; color:#166534; }\nsnap-tag[color=\"orange\"], rp-tag[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\nsnap-tag[color=\"red\"], rp-tag[color=\"red\"] { background:#fee2e2; color:#991b1b; }\nsnap-checkbox, rp-checkbox, snap-radio, rp-radio { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-box { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--rp-border-strong); border-radius:4px; color:#fff; }\nsnap-checkbox[state=\"checked\"] .rp-box, rp-checkbox[state=\"checked\"] .rp-box, snap-radio[state=\"checked\"] .rp-box, rp-radio[state=\"checked\"] .rp-box, snap-checkbox[state=\"indeterminate\"] .rp-box, rp-checkbox[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\nsnap-checkbox[state=\"disabled\"], rp-checkbox[state=\"disabled\"], snap-radio[state=\"disabled\"], rp-radio[state=\"disabled\"] { opacity:.5; }\nsnap-radio .rp-box, rp-radio .rp-box { border-radius:999px; }\nsnap-toggle, rp-toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-toggle-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.rp-toggle-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }\nsnap-toggle[state=\"on\"] .rp-toggle-track, rp-toggle[state=\"on\"] .rp-toggle-track { background:var(--rp-primary); }\nsnap-toggle[state=\"on\"] .rp-toggle-dot, rp-toggle[state=\"on\"] .rp-toggle-dot { margin-left:14px; }\nsnap-toggle[state=\"disabled\"], rp-toggle[state=\"disabled\"] { opacity:.5; }\nsnap-form, rp-form { display:grid; gap:12px; width:fit-content; }\nsnap-form[layout=\"horizontal\"], rp-form[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nsnap-form-item, rp-form-item { display:grid; gap:6px; width:fit-content; }\n.rp-form-label { color:#374151; font-size:12px; font-weight:700; }\n.rp-form-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.rp-form-error { color:var(--rp-danger); font-size:12px; }\nsnap-upload, rp-upload { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nsnap-upload[state=\"has-file\"], rp-upload[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nsnap-upload[state=\"uploading\"], rp-upload[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nsnap-image-placeholder, rp-image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nsnap-progress, rp-progress { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nsnap-progress[kind=\"circle\"], rp-progress[kind=\"circle\"], snap-progress[style=\"circle\"], rp-progress[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.rp-progress-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nsnap-progress[status=\"success\"] .rp-progress-bar, rp-progress[status=\"success\"] .rp-progress-bar { background:var(--rp-success); }\nsnap-progress[status=\"error\"] .rp-progress-bar, rp-progress[status=\"error\"] .rp-progress-bar { background:var(--rp-danger); }\nsnap-pagination, rp-pagination { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.rp-page-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.rp-page-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsnap-steps, rp-steps { display:flex; align-items:center; gap:8px; width:fit-content; }\n.rp-step { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.rp-step-dot { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; border:1px solid var(--rp-border-strong); background:#fff; color:#6b7280; font-size:11px; font-weight:750; }\n.rp-step.active { color:var(--rp-primary); font-weight:750; }\n.rp-step.active .rp-step-dot { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\n.rp-step.done .rp-step-dot { border-color:var(--rp-success); background:var(--rp-success); color:#fff; }\n.rp-step-sep { width:28px; height:1px; background:var(--rp-border); }\nsnap-breadcrumb, rp-breadcrumb { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.rp-breadcrumb-current { color:#111827; font-weight:650; }\n\n/* --- data input --- */\nsnap-slider, rp-slider { display:inline-flex; align-items:center; gap:10px; width:220px; }\n.rp-slider-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }\n.rp-slider-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }\n.rp-slider-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); box-shadow:0 1px 3px rgba(0,0,0,.2); }\n.rp-slider-value { font-size:12px; color:#374151; min-width:24px; }\nsnap-range, rp-range { display:inline-flex; align-items:center; width:220px; }\nsnap-number-input, rp-number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }\n.rp-num-value { flex:1; font-size:13px; }\n.rp-num-steppers { display:flex; flex-direction:column; }\n.rp-num-step { display:grid; place-items:center; width:20px; height:15px; color:#6b7280; cursor:pointer; }\nsnap-rating, rp-rating { display:inline-flex; gap:2px; color:#d1d5db; }\n.rp-star.filled { color:#f59e0b; }\nsnap-pin-input, rp-pin-input { display:inline-flex; gap:8px; }\n.rp-pin-cell { display:grid; place-items:center; width:40px; height:46px; border:1px solid var(--rp-border-strong); border-radius:8px; font-size:18px; font-weight:700; background:#fff; }\n.rp-pin-cell.active { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsnap-color-swatch, rp-color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-swatch-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }\n.rp-swatch-hex { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\nsnap-autocomplete, rp-autocomplete { display:inline-block; width:280px; }\n.rp-ac-options { display:grid; gap:1px; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\n.rp-ac-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-ac-option:first-child { background:#eff6ff; color:#1d4ed8; }\n\n/* --- data display additions --- */\nsnap-chip, rp-chip { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }\nsnap-tree, rp-tree { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }\n.rp-tree-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }\n.rp-tree-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }\n.rp-tree-spacer { display:inline-block; width:12px; }\n.rp-tree-label { flex:1; }\nsnap-timeline, rp-timeline { display:flex; flex-direction:column; width:fit-content; min-width:260px; }\nsnap-timeline-item, rp-timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }\nsnap-timeline-item:not(:last-child)::before, rp-timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }\n.rp-timeline-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }\n.rp-timeline-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }\n.rp-timeline-dot.done { border-color:var(--rp-success); background:var(--rp-success); }\n.rp-timeline-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }\n.rp-timeline-main { flex:1; }\n.rp-timeline-head { display:flex; align-items:baseline; gap:8px; }\n.rp-timeline-label { font-weight:650; color:#111827; font-size:13px; }\n.rp-timeline-time { font-size:12px; color:#9ca3af; }\n.rp-timeline-content { font-size:13px; color:#6b7280; margin-top:2px; }\nsnap-calendar, rp-calendar { display:inline-block; width:280px; padding:12px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-cal-head { text-align:center; font-weight:700; font-size:14px; margin-bottom:10px; }\n.rp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }\n.rp-cal-dow { display:grid; place-items:center; height:24px; font-size:11px; color:#9ca3af; }\n.rp-cal-cell { display:grid; place-items:center; height:32px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-cal-cell.selected { background:var(--rp-primary); color:#fff; font-weight:700; }\n.rp-cal-cell.muted { color:transparent; }\nsnap-kanban, rp-kanban { display:flex; gap:12px; width:fit-content; align-items:flex-start; }\nsnap-kanban-column, rp-kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }\n.rp-kanban-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }\n.rp-kanban-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }\n.rp-kanban-body { display:flex; flex-direction:column; gap:8px; }\nsnap-kanban-card, rp-kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }\n.rp-kanban-card-title { display:block; font-size:13px; color:#111827; }\n.rp-kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }\nsnap-code-block, rp-code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }\n.rp-code-head { padding:6px 12px; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#94a3b8; background:#1e293b; }\n.rp-code-body { padding:10px 0; }\n.rp-code-line { display:flex; align-items:center; gap:12px; padding:1px 12px; }\n.rp-code-ln { width:20px; text-align:right; color:#475569; font-family:ui-monospace,Menlo,monospace; font-size:11px; }\n.rp-code-bar { height:8px; border-radius:3px; background:#334155; }\nsnap-diff, rp-diff { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }\n.rp-diff-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }\n.rp-diff-line.add { background:#dcfce7; }\n.rp-diff-line.del { background:#fee2e2; }\n.rp-diff-sign { width:10px; color:#6b7280; }\n.rp-diff-line.add .rp-code-bar { background:#86efac; }\n.rp-diff-line.del .rp-code-bar { background:#fca5a5; }\n.rp-diff-line.ctx .rp-code-bar { background:#e5e7eb; }\nsnap-image-grid, rp-image-grid { display:grid; grid-template-columns:repeat(var(--grid-cols,3),1fr); gap:8px; width:fit-content; }\n.rp-grid-cell { display:grid; place-items:center; width:80px; height:80px; border-radius:8px; background:#f3f4f6; color:#9ca3af; }\nsnap-key-value, rp-key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-kv-row, rp-kv-row { display:flex; border-bottom:1px solid var(--rp-border); }\nsnap-kv-row:last-child, rp-kv-row:last-child { border-bottom:0; }\n.rp-kv-key { width:120px; padding:8px 12px; background:#f9fafb; color:#6b7280; font-size:13px; }\n.rp-kv-val { flex:1; padding:8px 12px; color:#111827; font-size:13px; }\nsnap-accordion, rp-accordion { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-accordion-item, rp-accordion-item { display:block; border-bottom:1px solid var(--rp-border); }\nsnap-accordion-item:last-child, rp-accordion-item:last-child { border-bottom:0; }\n.rp-accordion-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }\n.rp-accordion-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }\nsnap-banner, rp-banner { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }\nsnap-banner[type=\"success\"], rp-banner[type=\"success\"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }\nsnap-banner[type=\"warning\"], rp-banner[type=\"warning\"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }\nsnap-banner[type=\"error\"], rp-banner[type=\"error\"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }\n.rp-banner-text { flex:1; }\nsnap-skeleton, rp-skeleton { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:240px; }\n.rp-skel { border-radius:8px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-skel-block { height:120px; }\n.rp-skel-avatar { width:40px; height:40px; border-radius:50%; }\n.rp-skel-avatar.sm { width:28px; height:28px; }\n.rp-skel-row { display:flex; align-items:center; gap:10px; }\nsnap-countdown, rp-countdown { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }\nsnap-result, rp-result { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }\n.rp-result-icon.success { color:var(--rp-success); }\n.rp-result-icon.error { color:var(--rp-danger); }\n.rp-result-icon.empty { color:#9ca3af; }\n.rp-result-title { font-size:16px; font-weight:700; color:#111827; }\n.rp-result-desc { font-size:13px; color:#6b7280; }\nsnap-permission-gate, rp-permission-gate { display:block; position:relative; width:fit-content; }\n.rp-gate-content { opacity:.4; filter:grayscale(1); pointer-events:none; }\n.rp-gate-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.6); color:#6b7280; font-size:12px; font-weight:650; border-radius:8px; }\nsnap-quota-bar, rp-quota-bar { display:block; width:fit-content; min-width:240px; }\n.rp-quota-head { display:flex; justify-content:space-between; font-size:12px; color:#374151; margin-bottom:5px; }\n.rp-quota-num.danger { color:var(--rp-danger); font-weight:700; }\n.rp-quota-track { display:block; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-quota-fill { display:block; height:100%; background:var(--rp-primary); }\n.rp-quota-fill.danger { background:var(--rp-danger); }\nsnap-api-key, rp-api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }\n.rp-apikey-val { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\n.rp-apikey-copy { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#6b7280; }\nsnap-audit-row, rp-audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }\n.rp-audit-actor { font-weight:650; color:#111827; }\n.rp-audit-action { flex:1; color:#6b7280; }\n.rp-audit-time { color:#9ca3af; font-size:12px; }\nsnap-workflow-node, rp-workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\n.rp-wf-icon.done { color:var(--rp-success); }\n.rp-wf-icon.active { color:var(--rp-primary); }\n.rp-wf-icon.error { color:var(--rp-danger); }\n.rp-wf-icon.default { color:#9ca3af; }\n\n/* --- navigation & layout additions --- */\nsnap-segmented, rp-segmented { display:inline-flex; padding:2px; border-radius:8px; background:#f3f4f6; gap:2px; }\n.rp-seg-item { padding:5px 14px; border-radius:6px; font-size:13px; color:#6b7280; }\n.rp-seg-item.active { background:#fff; color:#111827; font-weight:650; box-shadow:0 1px 3px rgba(0,0,0,.08); }\nsnap-command-palette, rp-command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\n.rp-cmdk-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rp-border); }\n.rp-cmdk-list { padding:6px; }\n.rp-cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#374151; }\n.rp-cmdk-item.active { background:#eff6ff; color:#1d4ed8; }\nsnap-context-menu, rp-context-menu, snap-menu, rp-menu { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.12); }\n.rp-menu-item, snap-menu-item, rp-menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-menu-item.danger, snap-menu-item.danger, rp-menu-item.danger { color:var(--rp-danger); }\n.rp-menu-item.disabled, snap-menu-item.disabled, rp-menu-item.disabled { opacity:.45; }\n.rp-menu-label { flex:1; }\n.rp-menu-shortcut { color:#9ca3af; font-size:12px; }\nsnap-toc, rp-toc { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }\n.rp-toc-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }\n.rp-toc-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }\nsnap-kbd, rp-kbd { display:inline-flex; align-items:center; gap:3px; }\n.rp-kbd-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }\n.rp-kbd-plus { color:#9ca3af; font-size:11px; }\nsnap-split-pane, rp-split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsnap-split-pane > *, rp-split-pane > * { padding:14px; }\nsnap-split-pane > *:not(:last-child), rp-split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }\nsnap-divider, rp-divider { display:block; height:1px; background:var(--rp-border); margin:12px 0; }\nsnap-divider.rp-divider-v, rp-divider.rp-divider-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }\nsnap-spacer, rp-spacer { display:block; height:var(--snap-size,16px); }\n\n/* --- iOS --- */\nsnap-ios-navbar, rp-ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }\n.rp-ios-navbar-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:36px; }\n.rp-ios-nav-leading { display:flex; align-items:center; gap:2px; color:#007aff; font-size:15px; }\n.rp-ios-nav-title { text-align:center; font-weight:600; font-size:16px; color:#000; }\n.rp-ios-nav-trailing { text-align:right; color:#007aff; font-size:15px; }\n.rp-ios-nav-large { font-size:30px; font-weight:700; color:#000; padding:2px 2px 6px; }\nsnap-ios-tabbar, rp-ios-tabbar { display:flex; background:rgba(249,249,249,.94); border-top:1px solid #d8d8dc; padding:6px 0 4px; }\n.rp-ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#8e8e93; font-size:10px; }\n.rp-ios-tab.active { color:#007aff; }\n.rp-ios-tab-label { font-size:10px; }\nsnap-ios-list, rp-ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }\n.rp-ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }\nsnap-ios-list-item, rp-ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }\nsnap-ios-list-item:last-child, rp-ios-list-item:last-child { border-bottom:0; }\n.rp-ios-li-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#007aff; color:#fff; }\n.rp-ios-li-label { flex:1; }\n.rp-ios-li-detail { color:#8e8e93; }\n.rp-ios-li-chevron { color:#c7c7cc; }\nsnap-ios-action-sheet, rp-ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }\n.rp-ios-as-group { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }\n.rp-ios-as-title { padding:14px; text-align:center; font-size:13px; color:#8e8e93; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action { padding:16px; text-align:center; font-size:18px; color:#007aff; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action:last-child { border-bottom:0; }\n.rp-ios-as-action.destructive { color:#ff3b30; }\n.rp-ios-as-action.cancel { font-weight:600; }\nsnap-ios-alert, rp-ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }\n.rp-ios-alert-body { padding:18px 16px 14px; text-align:center; }\n.rp-ios-alert-title { font-size:17px; font-weight:600; color:#000; }\n.rp-ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }\n.rp-ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }\n.rp-ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }\n.rp-ios-alert-btn.primary { font-weight:600; }\n.rp-ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }\nsnap-ios-switch, rp-ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }\n.rp-ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }\n.rp-ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; box-shadow:0 2px 4px rgba(0,0,0,.2); }\nsnap-ios-segmented, rp-ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }\n.rp-ios-seg-item { padding:6px 16px; border-radius:7px; font-size:13px; color:#000; }\n.rp-ios-seg-item.active { background:#fff; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }\nsnap-ios-button, rp-ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }\nsnap-ios-button[variant=\"tinted\"], rp-ios-button[variant=\"tinted\"] { background:rgba(0,122,255,.15); color:#007aff; }\nsnap-ios-button[variant=\"plain\"], rp-ios-button[variant=\"plain\"] { background:transparent; color:#007aff; }\nsnap-ios-search, rp-ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }\nsnap-ios-stepper, rp-ios-stepper { display:inline-flex; align-items:center; border-radius:8px; background:rgba(118,118,128,.12); }\n.rp-ios-step { display:grid; place-items:center; width:46px; height:32px; color:#000; }\n.rp-ios-step-div { width:1px; height:18px; background:rgba(0,0,0,.15); }\n\n/* --- macOS --- */\nsnap-macos-window, rp-macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); font-family:-apple-system,sans-serif; }\n.rp-mac-titlebar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:#ececec; border-bottom:1px solid #d1d1d6; }\n.rp-mac-lights { display:flex; gap:8px; }\n.rp-mac-light { width:12px; height:12px; border-radius:50%; }\n.rp-mac-light.close { background:#ff5f57; }\n.rp-mac-light.min { background:#febc2e; }\n.rp-mac-light.max { background:#28c840; }\n.rp-mac-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:#3c3c43; }\n.rp-mac-window-body { padding:0; }\nsnap-macos-toolbar, rp-macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }\nsnap-macos-menubar, rp-macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }\n.rp-mac-menubar-apple { color:#000; }\n.rp-mac-menu-title { color:#000; }\n.rp-mac-menu-title.active { background:#007aff; color:#fff; padding:1px 7px; border-radius:4px; }\nsnap-macos-sidebar, rp-macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }\nsnap-macos-source-item, rp-macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }\nsnap-macos-source-item.selected, rp-macos-source-item.selected { background:#007aff; color:#fff; }\n.rp-mac-source-group { padding:8px 8px 3px; font-size:11px; font-weight:700; color:#8e8e93; text-transform:uppercase; }\nsnap-macos-segmented, rp-macos-segmented { display:inline-flex; border:1px solid #c4c4c7; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-seg-item { padding:4px 14px; font-size:13px; color:#000; background:#fff; border-right:1px solid #c4c4c7; }\n.rp-mac-seg-item:last-child { border-right:0; }\n.rp-mac-seg-item.active { background:#007aff; color:#fff; }\nsnap-macos-popover, rp-macos-popover { display:inline-block; position:relative; }\n.rp-mac-pop-arrow { display:block; width:16px; height:8px; margin:0 auto -1px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#fff; border:1px solid #d1d1d6; }\n.rp-mac-pop-body { min-width:220px; padding:12px; border-radius:10px; border:1px solid #d1d1d6; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.2); }\n.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }\nsnap-macos-sheet, rp-macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }\n.rp-mac-sheet-title { font-size:15px; font-weight:700; margin-bottom:12px; }\n.rp-mac-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }\nsnap-macos-stepper, rp-macos-stepper { display:inline-flex; flex-direction:column; border:1px solid #c4c4c7; border-radius:5px; overflow:hidden; }\n.rp-mac-step { display:grid; place-items:center; width:22px; height:13px; background:#fff; color:#3c3c43; }\n.rp-mac-step.up { border-bottom:1px solid #c4c4c7; }\nsnap-macos-disclosure, rp-macos-disclosure { display:block; font-family:-apple-system,sans-serif; }\n.rp-mac-disc-head { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#000; }\n.rp-mac-disc-tri { display:inline-flex; transition:none; }\n.rp-mac-disc-tri.open { transform:rotate(90deg); }\n.rp-mac-disc-body { padding:8px 0 0 18px; font-size:13px; color:#3c3c43; }\nsnap-macos-table, rp-macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-tr { display:flex; }\n.rp-mac-tr.rp-mac-th { background:#f6f6f6; border-bottom:1px solid #d1d1d6; font-size:12px; font-weight:600; color:#3c3c43; }\n.rp-mac-tr.alt { background:#f5f8ff; }\n.rp-mac-td { flex:1; display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; color:#3c3c43; }\n.rp-mac-cell-bar { height:8px; border-radius:3px; background:#e5e7eb; }\n\n/* --- agent / conversational UI (Codex-style: single column, de-bubbled) --- */\nsnap-chat, rp-chat { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }\nsnap-user-message, rp-user-message, snap-assistant-message, rp-assistant-message { display:block; }\n.rp-msg-role { font-size:12px; font-weight:700; color:#9ca3af; letter-spacing:.02em; margin:0 0 6px; }\n.rp-msg-content { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.7; color:#1f2937; }\nsnap-user-message .rp-msg-content, rp-user-message .rp-msg-content { color:#111827; }\nsnap-system-message, rp-system-message { display:flex; justify-content:center; }\n.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }\nsnap-tool-call, rp-tool-call { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-tool-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; }\n.rp-tool-glyph { display:inline-flex; }\n.rp-tool-glyph.done { color:var(--rp-success); }\n.rp-tool-glyph.running { color:var(--rp-primary); }\n.rp-tool-glyph.error { color:var(--rp-danger); }\n.rp-tool-name { font-family:ui-monospace,Menlo,monospace; font-weight:650; color:#374151; }\n.rp-tool-args-inline { font-family:ui-monospace,Menlo,monospace; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.rp-tool-body { margin-top:8px; padding-left:21px; }\nsnap-agent-output, rp-agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }\n.rp-output-head { padding:6px 12px; font-size:12px; color:#6b7280; border-bottom:1px solid var(--rp-border); font-family:ui-monospace,Menlo,monospace; }\n.rp-output-body { padding:12px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.6; color:#334155; white-space:pre-wrap; }\nsnap-reasoning, rp-reasoning { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-reason-head { display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; }\n.rp-reason-body { margin-top:8px; padding-left:19px; border-left:2px solid var(--rp-border); font-size:13px; line-height:1.7; color:#6b7280; }\nsnap-message-actions, rp-message-actions { display:inline-flex; gap:2px; }\n.rp-msg-action { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#9ca3af; cursor:pointer; }\n.rp-msg-action:hover { background:#f3f4f6; color:#374151; }\nsnap-suggestions, rp-suggestions { display:flex; flex-wrap:wrap; gap:8px; }\n.rp-suggestion { padding:7px 13px; border:1px solid var(--rp-border); border-radius:8px; font-size:13px; color:#374151; background:#fff; cursor:pointer; }\n.rp-suggestion:hover { border-color:var(--rp-border-strong); background:#f9fafb; }\nsnap-typing, rp-typing { display:flex; align-items:center; }\n.rp-typing-dots { display:inline-flex; gap:4px; }\n.rp-typing-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }\nsnap-composer, rp-composer { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }\n.rp-composer-attach { display:inline-flex; color:#9ca3af; }\n.rp-composer-input { flex:1; font-size:14px; }\n.rp-composer-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }\n.rp-composer-send.streaming { background:var(--rp-danger); }\nsnap-citation, rp-citation { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }\n.rp-cite-idx { display:grid; place-items:center; width:17px; height:17px; border-radius:4px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\n.rp-cite-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\nsnap-token-usage, rp-token-usage { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#9ca3af; }\n.rp-token-track { width:90px; height:5px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-token-fill { display:block; height:100%; background:#9ca3af; }\n";
2
+ export declare const style = "\n:root { --rp-bg:#f0f2f5; --rp-surface:#fff; --rp-surface-soft:#f9fafb; --rp-text:#111827; --rp-muted:#6b7280; --rp-border:#e5e7eb; --rp-border-strong:#d1d5db; --rp-primary:#2563eb; --rp-success:#059669; --rp-warning:#d97706; --rp-danger:#dc2626; --rp-purple:#7c3aed; --rp-radius-sm:4px; --rp-radius-md:8px; --rp-radius-lg:12px; --rp-shadow:0 8px 28px rgba(15,23,42,.08); --rp-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif; }\n* { box-sizing:border-box; }\nbody { margin:0; font-family:var(--rp-font); color:var(--rp-text); background:var(--rp-bg); }\n.rp-icon { display:inline-block; flex:0 0 auto; vertical-align:-0.16em; }\npage-el, page-el { display:block; min-height:100vh; padding:32px 40px; overflow:auto; }\n.page-el-shell { display:grid; grid-template-columns:max-content max-content; gap:24px; min-height:100vh; align-items:start; }\n.page-el-main { display:flex; flex-direction:column; min-width:0; overflow:visible; }\n.page-el-header { flex:0 0 auto; width:fit-content; max-width:none; margin:0 0 22px; }\n.page-el-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }\n.page-el-title { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.02em; }\n.page-el-route { font-size:13px; color:var(--rp-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.7); border:1px solid var(--rp-border); border-radius:999px; padding:3px 9px; }\n.page-el-description { margin:10px 0 0; color:#374151; line-height:1.6; font-size:14px; }\n.page-el-body { flex:0 1 auto; display:block; width:fit-content; max-width:100%; min-height:0; overflow:visible; }\n.annotation-el-pane { min-width:380px; max-width:680px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:auto; padding:0 0 48px 0; align-self:start; }\n.annotation-el-pane-inner { padding:4px 12px 24px 6px; }\nmain-view, main-view { display:block; width:fit-content; margin:0 0 28px; position:relative; }\n.rp-main-shell { position:relative; overflow:visible; border:1px solid var(--rp-border-strong); border-radius:var(--rp-radius-md); background:var(--rp-surface); box-shadow:var(--rp-shadow); }\n.rp-main-stage-clip { overflow:hidden; border-radius:var(--rp-radius-md); }\n.rp-main-stage { position:relative; transform-origin:top left; background:var(--rp-surface); }\n.rp-pin { position:absolute; z-index:20; display:grid; place-items:center; width:24px; height:24px; color:#fff; font-size:11px; font-weight:700; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:translate(-6px,-6px) rotate(-45deg); box-shadow:0 2px 8px rgba(37,99,235,.25); cursor:pointer; }\n.rp-pin > span { transform:rotate(45deg); }\n.rp-pin:hover { opacity:0.85; }\nannotation-el, annotation-el { display:block; width:fit-content; max-width:980px; margin:14px 0; line-height:1.65; color:#1f2937; font-size:14px; }\nannotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el, annotation-el annotation-el { margin:10px 0 8px 22px; }\n.annotation-el-head { display:flex; align-items:center; gap:8px; margin:0 0 4px; width:fit-content; }\n.annotation-el-title { font-weight:700; color:#111827; }\n.annotation-el-marker { display:inline-grid; place-items:center; flex:0 0 auto; color:#fff; font-size:10px; font-weight:700; line-height:1; }\n.annotation-el-marker.drop { width:22px; height:22px; background:var(--rp-primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }\n.annotation-el-marker.drop > span { transform:rotate(45deg); }\n.annotation-el-marker.circle { width:16px; height:16px; background:var(--rp-purple); border-radius:50%; }\n.annotation-el-marker.triangle { width:18px; height:16px; background:var(--rp-success); clip-path:polygon(50% 0, 100% 100%, 0 100%); }\n.annotation-el-marker.triangle > span { transform:translateY(2px); font-size:9px; }\n.annotation-el-body { display:block; position:relative; width:fit-content; max-width:920px; }\n.rp-pin-slice { width:18px; height:18px; font-size:10px; box-shadow:0 1px 5px rgba(37,99,235,.3); }\n.annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:820px; }\n.annotation-el-pane annotation-el, .annotation-el-pane annotation-el { max-width:none; }\n.annotation-el-pane .annotation-el-body { max-width:none; }\n.annotation-el-pane .annotation-el-body > :not(annotation-el):not(annotation-el):not(enum-el):not(enum-el) { max-width:420px; }\n.annotation-el-body p { margin:0 0 8px; }\nenum-el, enum-el { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; width:fit-content; margin:8px 0 12px; }\n.annotation-el-pane enum-el, .annotation-el-pane enum-el { flex-wrap:wrap; }\nenum-item, enum-item { display:block; flex:0 0 auto; width:fit-content; min-width:180px; max-width:600px; border:1px solid #f0f0f0; border-radius:var(--rp-radius-md); background:#fff; overflow:hidden; }\n.enum-el-label { display:flex; align-items:flex-start; gap:6px; padding:5px 9px 4px; font-size:12px; font-weight:650; color:#374151; }\n.enum-el-index { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; background:#111827; color:#fff; font-size:10px; font-weight:750; border-radius:3px; flex:0 0 auto; margin-top:1px; }\n.enum-el-label-text { display:block; }\n.enum-el-description { display:block; margin-top:2px; font-size:11px; line-height:1.35; font-weight:400; color:var(--rp-muted); }\n.enum-el-content { display:block; width:fit-content; padding:8px; }\n.annotation-el-title { font-weight:700; color:#111827; cursor:pointer; }\n.annotation-el-title:hover { color:var(--rp-primary); }\n.rp-section-focus { outline:2px dashed var(--rp-primary); outline-offset:4px; border-radius:4px; }\nviewport-el, viewport-el { display:flex; flex-direction:column; width:var(--snap-width,1440px); height:var(--snap-height,900px); background:#f8fafc; overflow:hidden; color:#111827; }\nlayout-el, layout-el { display:grid; grid-template-columns:var(--snap-columns,1fr); grid-template-rows:var(--snap-rows,auto); gap:var(--snap-gap,0); align-content:start; width:fit-content; max-width:100%; min-width:0; }\nlayout-el > *, layout-el > * { min-width:0; }\nviewport-el layout-el, viewport-el layout-el { width:100%; }\nviewport-el > layout-el, viewport-el > layout-el { flex:1 1 auto; min-height:0; }\nviewport-el > navbar-el, viewport-el > navbar-el { flex:0 0 auto; }\npanel-el, panel-el { display:block; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--rp-border); border-radius:var(--rp-radius-md); padding:var(--snap-padding,16px); }\nviewport-el panel-el, viewport-el panel-el { width:auto; min-width:0; }\npanel-el[elevation=\"1\"], panel-el[elevation=\"1\"] { box-shadow:0 4px 16px rgba(15,23,42,.06); }\npanel-el[elevation=\"2\"], panel-el[elevation=\"2\"] { box-shadow:var(--rp-shadow); }\nnavbar-el, navbar-el { display:flex; align-items:center; gap:14px; height:var(--snap-height,64px); padding:0 24px; background:#fff; border-bottom:1px solid var(--rp-border); }\nsidebar-el, sidebar-el { display:block; width:var(--snap-width,260px); min-height:0; background:#fff; border-right:1px solid var(--rp-border); padding:14px; }\nviewport-el sidebar-el, viewport-el sidebar-el { min-height:100%; }\nsidebar-el[collapsed], sidebar-el[collapsed] { width:72px; }\nlogo-el, logo-el { display:inline-grid; place-items:center; width:var(--snap-size,82px); height:32px; border-radius:8px; background:#111827; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; }\nsearch-el, search-el, input-el, input-el, date-picker, date-picker { display:inline-flex; align-items:center; gap:8px; width:280px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\ntextarea-el, textarea-el { display:block; width:320px; min-height:calc(var(--snap-rows,3) * 24px + 22px); padding:9px 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; white-space:pre-wrap; }\nsearch-el[state=\"focus\"], search-el[state=\"focus\"], input-el[state=\"focus\"], input-el[state=\"focus\"], textarea-el[state=\"focus\"], textarea-el[state=\"focus\"], date-picker[state=\"focus\"], date-picker[state=\"focus\"] { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nsearch-el[state=\"filled\"], search-el[state=\"filled\"], input-el[state=\"filled\"], input-el[state=\"filled\"], textarea-el[state=\"filled\"], textarea-el[state=\"filled\"], date-picker[state=\"filled\"], date-picker[state=\"filled\"] { border-color:#93c5fd; background:#f8fbff; }\nsearch-el[state=\"error\"], search-el[state=\"error\"], input-el[state=\"error\"], input-el[state=\"error\"], textarea-el[state=\"error\"], textarea-el[state=\"error\"], date-picker[state=\"error\"], date-picker[state=\"error\"] { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\nsearch-el[state=\"disabled\"], search-el[state=\"disabled\"], input-el[state=\"disabled\"], input-el[state=\"disabled\"], textarea-el[state=\"disabled\"], textarea-el[state=\"disabled\"], date-picker[state=\"disabled\"], date-picker[state=\"disabled\"] { opacity:.55; background:#f3f4f6; }\ninput-el[label], input-el[label], date-picker[label], date-picker[label] { display:inline-grid; align-items:start; gap:6px; width:280px; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }\ninput-el[label][state=\"focus\"], input-el[label][state=\"focus\"], input-el[label][state=\"filled\"], input-el[label][state=\"filled\"], input-el[label][state=\"error\"], input-el[label][state=\"error\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"focus\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"filled\"], date-picker[label][state=\"error\"], date-picker[label][state=\"error\"] { border:0; background:transparent; box-shadow:none; }\n.rp-field-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; color:#111827; }\ninput-el[state=\"focus\"] .rp-field-control, input-el[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control, date-picker[state=\"focus\"] .rp-field-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\ninput-el[state=\"filled\"] .rp-field-control, input-el[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control, date-picker[state=\"filled\"] .rp-field-control { border-color:#93c5fd; background:#f8fbff; }\ninput-el[state=\"error\"] .rp-field-control, input-el[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control, date-picker[state=\"error\"] .rp-field-control { border-color:var(--rp-danger); box-shadow:0 0 0 3px rgba(220,38,38,.1); }\n.rp-field-label { display:block; margin:0 0 6px; color:#374151; font-size:12px; font-weight:650; }\n.rp-placeholder { color:#9ca3af; }\n.rp-value { color:#111827; }\n.rp-error-text { color:var(--rp-danger); font-size:12px; }\nselect-el, select-el { display:inline-block; width:280px; max-width:100%; }\n.select-el-control { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; }\nselect-el[state=\"expanded\"] .select-el-control, select-el[state=\"expanded\"] .select-el-control { border-color:var(--rp-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }\nselect-el[state=\"disabled\"], select-el[state=\"disabled\"] { opacity:.55; }\n.select-el-value { flex:1 1 auto; min-width:0; }\n.select-el-options { display:none; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; box-shadow:0 10px 18px rgba(15,23,42,.08); }\nselect-el[state=\"expanded\"] .select-el-options, select-el[state=\"expanded\"] .select-el-options { display:grid; gap:2px; }\n.select-el-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.select-el-option.selected { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nbadge-el, badge-el { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:750; }\navatar-el, avatar-el { display:inline-grid; place-items:center; width:var(--snap-size,32px); height:var(--snap-size,32px); border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:12px; font-weight:800; }\nlist-el, list-el { display:flex; flex-direction:column; gap:4px; width:100%; }\nlist-item, list-item { display:flex; align-items:center; gap:8px; width:100%; min-width:180px; height:36px; padding:0 10px; border-radius:8px; color:#374151; }\nlist-item[state=\"selected\"], list-item[state=\"selected\"] { background:#eff6ff; color:#1d4ed8; font-weight:700; }\nlist-item[state=\"disabled\"], list-item[state=\"disabled\"] { opacity:.5; }\n.list-el-label { flex:1 1 auto; }\n.list-el-badge { margin-left:auto; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 6px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\ntabs-el, tabs-el { display:flex; gap:6px; border-bottom:1px solid var(--rp-border); margin-bottom:12px; width:fit-content; }\ntab-el, tab-el { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; }\ntab-el.tab-el-active, tab-el.tab-el-active { color:var(--rp-primary); border-bottom-color:var(--rp-primary); font-weight:700; }\nbutton-el, button-el { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--rp-border); background:#fff; color:#374151; font-size:13px; font-weight:650; }\nbutton-el[size=\"sm\"], button-el[size=\"sm\"] { min-height:28px; padding:0 9px; font-size:12px; border-radius:6px; }\nbutton-el[size=\"lg\"], button-el[size=\"lg\"] { min-height:40px; padding:0 16px; font-size:14px; }\nbutton-el[variant=\"primary\"], button-el[variant=\"primary\"] { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\nbutton-el[variant=\"secondary\"], button-el[variant=\"secondary\"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }\nbutton-el[variant=\"danger\"], button-el[variant=\"danger\"] { border-color:var(--rp-danger); color:var(--rp-danger); }\nbutton-el[variant=\"link\"], button-el[variant=\"link\"] { border-color:transparent; background:transparent; color:var(--rp-primary); padding-inline:2px; }\nbutton-el[variant=\"ghost\"], button-el[variant=\"ghost\"] { border-color:transparent; background:transparent; }\nbutton-el[state=\"disabled\"], button-el[state=\"disabled\"], button-el[disabled], button-el[disabled] { opacity:.5; }\nbutton-group, button-group { display:inline-flex; gap:0; width:fit-content; }\nbutton-group > button-el, button-group > button-el { border-radius:0; margin-left:-1px; }\nbutton-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }\nbutton-group > :last-child { border-radius:0 8px 8px 0; }\ntable-el, table-el { display:table; border-collapse:collapse; width:fit-content; min-width:720px; max-width:980px; background:#fff; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nviewport-el table-el, viewport-el table-el { width:100%; max-width:none; }\n.table-row { display:table-row; }\n.table-el-cell { display:table-cell; padding:11px 12px; border-bottom:1px solid var(--rp-border); font-size:13px; vertical-align:middle; white-space:nowrap; }\n.table-el-head .table-el-cell { background:#f9fafb; color:#6b7280; font-size:12px; font-weight:750; }\n.table-row:last-child .table-el-cell { border-bottom:0; }\ntable-row, table-row { display:grid; grid-template-columns:44px 150px 240px 90px 90px; align-items:center; min-width:560px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#fff; }\ntable-row > span, table-row > span { padding:10px 12px; font-size:13px; }\ntable-row[state=\"unread\"], table-row[state=\"unread\"] { background:#eff6ff; font-weight:700; }\ntable-row[state=\"selected\"], table-row[state=\"selected\"] { outline:2px solid rgba(37,99,235,.35); background:#f8fbff; }\ntable-row[state=\"highlighted\"], table-row[state=\"highlighted\"] { background:#fffbeb; }\ntable-row[state=\"disabled\"], table-row[state=\"disabled\"] { opacity:.5; }\nbulk-action-bar, bulk-action-bar { display:flex; align-items:center; gap:8px; width:fit-content; padding:8px 10px; margin:0 0 10px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:8px; color:#1e40af; font-size:13px; font-weight:650; }\nempty-el, empty-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:240px; padding:24px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; }\n.empty-el-title { color:#111827; font-weight:700; }\n.empty-el-desc { font-size:13px; }\nloading-el, loading-el { display:grid; gap:8px; min-width:260px; color:var(--rp-primary); }\n.skeleton-el-line { height:14px; border-radius:999px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-spinner { display:inline-grid; place-items:center; width:32px; height:32px; }\nalert-el, alert-el, toast-el, toast-el { display:flex; align-items:flex-start; gap:8px; width:fit-content; max-width:420px; padding:10px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\nalert-el[type=\"info\"], alert-el[type=\"info\"], toast-el[type=\"info\"], toast-el[type=\"info\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nalert-el[type=\"success\"], alert-el[type=\"success\"], toast-el[type=\"success\"], toast-el[type=\"success\"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }\nalert-el[type=\"warning\"], alert-el[type=\"warning\"], toast-el[type=\"warning\"], toast-el[type=\"warning\"] { border-color:#fde68a; background:#fffbeb; color:#92400e; }\nalert-el[type=\"error\"], alert-el[type=\"error\"], toast-el[type=\"error\"], toast-el[type=\"error\"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }\ndropdown-el, dropdown-el, popover-el, popover-el { display:block; width:var(--snap-width,300px); padding:8px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.1); }\ntooltip-el, tooltip-el { display:inline-block; width:fit-content; max-width:240px; padding:6px 8px; border-radius:6px; background:#111827; color:#fff; font-size:12px; }\n.rp-overlay-title { margin:0 0 8px; color:#111827; font-size:14px; font-weight:750; }\nmodal-el, modal-el { display:block; width:min(var(--snap-width,480px), 100%); border:1px solid var(--rp-border); border-radius:12px; background:#fff; box-shadow:0 24px 48px rgba(15,23,42,.18); overflow:hidden; }\ndrawer-el, drawer-el { display:block; width:min(var(--snap-width,360px), 100%); min-height:320px; border:1px solid var(--rp-border); background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.14); }\n.modal-el-head, .drawer-el-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--rp-border); font-weight:750; }\n.modal-el-body, .drawer-el-body { padding:16px; }\n.modal-el-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--rp-border); background:#f9fafb; }\ncard-el, card-el { display:block; width:auto; min-width:220px; padding:14px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.card-el-image { display:grid; place-items:center; height:120px; margin:-14px -14px 12px; border-radius:10px 10px 0 0; background:#f3f4f6; color:#6b7280; }\n.card-el-title { display:block; color:#111827; font-weight:750; }\n.card-el-subtitle { display:block; margin-top:4px; color:#6b7280; font-size:13px; }\n.card-el-footer { display:block; margin:12px -14px -14px; padding:10px 14px; border-top:1px solid var(--rp-border); background:#f9fafb; }\nstat-card, stat-card { display:grid; gap:6px; width:auto; min-width:0; padding:16px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-stat-label { color:#6b7280; font-size:12px; font-weight:650; }\n.rp-stat-value { color:#111827; font-size:26px; font-weight:800; }\n.rp-stat-change { font-size:12px; font-weight:700; }\nstat-card[trend=\"up\"] .rp-stat-change, stat-card[trend=\"up\"] .rp-stat-change { color:var(--rp-success); }\nstat-card[trend=\"down\"] .rp-stat-change, stat-card[trend=\"down\"] .rp-stat-change { color:var(--rp-danger); }\ntag-el, tag-el { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:650; }\ntag-el[color=\"green\"], tag-el[color=\"green\"] { background:#dcfce7; color:#166534; }\ntag-el[color=\"orange\"], tag-el[color=\"orange\"] { background:#ffedd5; color:#9a3412; }\ntag-el[color=\"red\"], tag-el[color=\"red\"] { background:#fee2e2; color:#991b1b; }\ncheckbox-el, checkbox-el, radio-el, radio-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.rp-box { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--rp-border-strong); border-radius:4px; color:#fff; }\ncheckbox-el[state=\"checked\"] .rp-box, checkbox-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, radio-el[state=\"checked\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box, checkbox-el[state=\"indeterminate\"] .rp-box { background:var(--rp-primary); border-color:var(--rp-primary); }\ncheckbox-el[state=\"disabled\"], checkbox-el[state=\"disabled\"], radio-el[state=\"disabled\"], radio-el[state=\"disabled\"] { opacity:.5; }\nradio-el .rp-box, radio-el .rp-box { border-radius:999px; }\ntoggle-el, toggle-el { display:inline-flex; align-items:center; gap:8px; font-size:13px; }\n.toggle-el-track { display:flex; align-items:center; width:34px; height:20px; border-radius:999px; background:#d1d5db; padding:2px; }\n.toggle-el-dot { display:block; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:none; }\ntoggle-el[state=\"on\"] .toggle-el-track, toggle-el[state=\"on\"] .toggle-el-track { background:var(--rp-primary); }\ntoggle-el[state=\"on\"] .toggle-el-dot, toggle-el[state=\"on\"] .toggle-el-dot { margin-left:14px; }\ntoggle-el[state=\"disabled\"], toggle-el[state=\"disabled\"] { opacity:.5; }\nform-el, form-el { display:grid; gap:12px; width:fit-content; max-width:100%; }\nform-el[layout=\"horizontal\"], form-el[layout=\"horizontal\"] { grid-template-columns:max-content 1fr; align-items:start; }\nform-item, form-item { display:grid; gap:6px; width:fit-content; max-width:100%; }\nform-item > *, form-item > * { max-width:100%; }\n.form-el-label { color:#374151; font-size:12px; font-weight:700; }\n.form-el-label.required::after { content:\" *\"; color:var(--rp-danger); }\n.form-el-error { color:var(--rp-danger); font-size:12px; }\nupload-el, upload-el { display:grid; justify-items:center; gap:8px; width:280px; padding:18px; border:1px dashed var(--rp-border-strong); border-radius:10px; background:#fff; color:#6b7280; text-align:center; font-size:13px; }\nupload-el[state=\"has-file\"], upload-el[state=\"has-file\"] { justify-items:start; border-style:solid; color:#374151; }\nupload-el[state=\"uploading\"], upload-el[state=\"uploading\"] { border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }\nimage-placeholder, image-placeholder { display:grid; place-items:center; width:var(--snap-width,160px); height:var(--snap-height,100px); background:#f3f4f6; border:1px dashed var(--rp-border-strong); border-radius:8px; color:#6b7280; font-size:12px; }\nprogress-el, progress-el { display:block; width:180px; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\nprogress-el[kind=\"circle\"], progress-el[kind=\"circle\"], progress-el[style=\"circle\"], progress-el[style=\"circle\"] { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:conic-gradient(var(--rp-primary) var(--progress,40%), #e5e7eb 0); font-size:12px; font-weight:750; }\n.progress-el-bar { display:block; height:100%; width:var(--progress,40%); background:var(--rp-primary); }\nprogress-el[status=\"success\"] .progress-el-bar, progress-el[status=\"success\"] .progress-el-bar { background:var(--rp-success); }\nprogress-el[status=\"error\"] .progress-el-bar, progress-el[status=\"error\"] .progress-el-bar { background:var(--rp-danger); }\npagination-el, pagination-el { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; }\n.page-el-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid var(--rp-border); border-radius:6px; background:#fff; color:#374151; }\n.page-el-btn.active { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; font-weight:750; }\nsteps-el, steps-el { display:flex; align-items:center; gap:8px; width:fit-content; }\n.rp-step { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.rp-step-dot { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; border:1px solid var(--rp-border-strong); background:#fff; color:#6b7280; font-size:11px; font-weight:750; }\n.rp-step.active { color:var(--rp-primary); font-weight:750; }\n.rp-step.active .rp-step-dot { border-color:var(--rp-primary); background:var(--rp-primary); color:#fff; }\n.rp-step.done .rp-step-dot { border-color:var(--rp-success); background:var(--rp-success); color:#fff; }\n.rp-step-sep { width:28px; height:1px; background:var(--rp-border); }\nbreadcrumb-el, breadcrumb-el { display:inline-flex; align-items:center; gap:6px; color:#6b7280; font-size:13px; }\n.breadcrumb-el-current { color:#111827; font-weight:650; }\n\n/* --- data input --- */\nslider-el, slider-el { display:inline-flex; align-items:center; gap:10px; width:220px; }\n.slider-el-track { position:relative; flex:1; height:4px; border-radius:999px; background:#e5e7eb; }\n.slider-el-fill { position:absolute; height:100%; border-radius:999px; background:var(--rp-primary); }\n.slider-el-thumb { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform:translateY(-50%); border-radius:50%; background:#fff; border:1px solid var(--rp-border-strong); }\n.slider-el-value { font-size:12px; color:#374151; min-width:24px; }\nrange-el, range-el { display:inline-flex; align-items:center; width:220px; }\nnumber-input, number-input { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 4px 0 11px; border:1px solid var(--rp-border-strong); border-radius:8px; background:#fff; width:120px; }\n.rp-num-value { flex:1; font-size:13px; }\n.rp-num-steppers { display:flex; flex-direction:column; }\n.rp-num-step { display:grid; place-items:center; width:20px; height:15px; color:#6b7280; cursor:pointer; }\nrating-el, rating-el { display:inline-flex; gap:2px; color:#d1d5db; }\n.rp-star.filled { color:#f59e0b; }\npin-input, pin-input { display:inline-flex; gap:8px; }\n.rp-pin-cell { display:grid; place-items:center; width:40px; height:46px; border:1px solid var(--rp-border-strong); border-radius:8px; font-size:18px; font-weight:700; background:#fff; }\n.rp-pin-cell.active { border-color:var(--rp-primary); }\ncolor-swatch, color-swatch { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-swatch-chip { width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); }\n.rp-swatch-hex { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\nautocomplete-el, autocomplete-el { display:inline-block; width:280px; }\n.rp-ac-options { display:grid; gap:1px; margin-top:6px; padding:5px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; }\n.rp-ac-option { padding:7px 8px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-ac-option:first-child { background:#eff6ff; color:#1d4ed8; }\n\n/* --- data display additions --- */\nchip-el, chip-el { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--rp-border); background:#f9fafb; color:#374151; font-size:12px; }\ntree-el, tree-el { display:flex; flex-direction:column; gap:1px; width:fit-content; min-width:240px; }\n.tree-el-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:6px; color:#374151; font-size:13px; padding-left:calc(8px + var(--tree-level,0) * 18px); }\n.tree-el-row.selected { background:#eff6ff; color:#1d4ed8; font-weight:650; }\n.tree-el-spacer { display:inline-block; width:12px; }\n.tree-el-label { flex:1; }\ntimeline-el, timeline-el { display:flex; flex-direction:column; width:fit-content; min-width:260px; }\ntimeline-item, timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }\ntimeline-item:not(:last-child)::before, timeline-item:not(:last-child)::before { content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--rp-border); }\n.timeline-el-dot { flex:0 0 auto; width:14px; height:14px; margin-top:2px; border-radius:50%; background:#fff; border:2px solid var(--rp-border-strong); z-index:1; }\n.timeline-el-dot.active { border-color:var(--rp-primary); background:var(--rp-primary); }\n.timeline-el-dot.done { border-color:var(--rp-success); background:var(--rp-success); }\n.timeline-el-dot.error { border-color:var(--rp-danger); background:var(--rp-danger); }\n.timeline-el-main { flex:1; }\n.timeline-el-head { display:flex; align-items:baseline; gap:8px; }\n.timeline-el-label { font-weight:650; color:#111827; font-size:13px; }\n.timeline-el-time { font-size:12px; color:#9ca3af; }\n.timeline-el-content { font-size:13px; color:#6b7280; margin-top:2px; }\ncalendar-el, calendar-el { display:inline-block; width:280px; padding:12px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.rp-cal-head { text-align:center; font-weight:700; font-size:14px; margin-bottom:10px; }\n.rp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }\n.rp-cal-dow { display:grid; place-items:center; height:24px; font-size:11px; color:#9ca3af; }\n.rp-cal-cell { display:grid; place-items:center; height:32px; border-radius:6px; font-size:13px; color:#374151; }\n.rp-cal-cell.selected { background:var(--rp-primary); color:#fff; font-weight:700; }\n.rp-cal-cell.muted { color:transparent; }\nkanban-el, kanban-el { display:flex; gap:12px; width:fit-content; align-items:flex-start; }\nkanban-column, kanban-column { display:flex; flex-direction:column; width:200px; padding:10px; border-radius:10px; background:#f3f4f6; }\n.kanban-el-head { display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:13px; margin-bottom:8px; color:#374151; }\n.kanban-el-count { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5e7eb; font-size:11px; }\n.kanban-el-body { display:flex; flex-direction:column; gap:8px; }\nkanban-card, kanban-card { display:block; padding:10px; border-radius:8px; background:#fff; border:1px solid var(--rp-border); }\n.kanban-card-title { display:block; font-size:13px; color:#111827; }\n.kanban-card-tag { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; }\ncode-block, code-block { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#0f172a; }\n.rp-code-head { padding:6px 12px; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#94a3b8; background:#1e293b; }\n.rp-code-body { padding:10px 0; }\n.rp-code-line { display:flex; align-items:center; gap:12px; padding:1px 12px; }\n.rp-code-ln { width:20px; text-align:right; color:#475569; font-family:ui-monospace,Menlo,monospace; font-size:11px; }\n.rp-code-bar { height:8px; border-radius:3px; background:#334155; }\ndiff-el, diff-el { display:block; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; font-family:ui-monospace,Menlo,monospace; }\n.diff-el-line { display:flex; align-items:center; gap:10px; padding:2px 10px; }\n.diff-el-line.add { background:#dcfce7; }\n.diff-el-line.del { background:#fee2e2; }\n.diff-el-sign { width:10px; color:#6b7280; }\n.diff-el-line.add .rp-code-bar { background:#86efac; }\n.diff-el-line.del .rp-code-bar { background:#fca5a5; }\n.diff-el-line.ctx .rp-code-bar { background:#e5e7eb; }\nimage-grid, image-grid { display:grid; grid-template-columns:repeat(var(--grid-cols,3),1fr); gap:8px; width:fit-content; }\n.rp-grid-cell { display:grid; place-items:center; width:80px; height:80px; border-radius:8px; background:#f3f4f6; color:#9ca3af; }\nkey-value, key-value { display:flex; flex-direction:column; width:fit-content; min-width:240px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nkv-row, kv-row { display:flex; border-bottom:1px solid var(--rp-border); }\nkv-row:last-child, kv-row:last-child { border-bottom:0; }\n.rp-kv-key { width:120px; padding:8px 12px; background:#f9fafb; color:#6b7280; font-size:13px; }\n.rp-kv-val { flex:1; padding:8px 12px; color:#111827; font-size:13px; }\naccordion-el, accordion-el { display:flex; flex-direction:column; width:fit-content; min-width:320px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\naccordion-item, accordion-item { display:block; border-bottom:1px solid var(--rp-border); }\naccordion-item:last-child, accordion-item:last-child { border-bottom:0; }\n.accordion-el-head { display:flex; align-items:center; gap:8px; padding:11px 14px; font-weight:650; font-size:13px; color:#111827; }\n.accordion-el-body { padding:0 14px 14px 36px; font-size:13px; color:#6b7280; }\nbanner-el, banner-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:480px; padding:12px 16px; border-radius:8px; font-size:13px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }\nbanner-el[type=\"success\"], banner-el[type=\"success\"] { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }\nbanner-el[type=\"warning\"], banner-el[type=\"warning\"] { background:#fffbeb; color:#92400e; border-color:#fde68a; }\nbanner-el[type=\"error\"], banner-el[type=\"error\"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }\n.banner-el-text { flex:1; }\nskeleton-el, skeleton-el { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:240px; }\n.rp-skel { border-radius:8px; background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); }\n.rp-skel-block { height:120px; }\n.rp-skel-avatar { width:40px; height:40px; border-radius:50%; }\n.rp-skel-avatar.sm { width:28px; height:28px; }\n.rp-skel-row { display:flex; align-items:center; gap:10px; }\ncountdown-el, countdown-el { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fef2f2; color:#991b1b; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }\nresult-el, result-el { display:grid; justify-items:center; gap:8px; width:fit-content; min-width:280px; padding:32px; text-align:center; }\n.result-el-icon.success { color:var(--rp-success); }\n.result-el-icon.error { color:var(--rp-danger); }\n.result-el-icon.empty { color:#9ca3af; }\n.result-el-title { font-size:16px; font-weight:700; color:#111827; }\n.result-el-desc { font-size:13px; color:#6b7280; }\npermission-gate, permission-gate { display:block; position:relative; width:fit-content; }\n.rp-gate-content { opacity:.4; filter:grayscale(1); pointer-events:none; }\n.rp-gate-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.6); color:#6b7280; font-size:12px; font-weight:650; border-radius:8px; }\nquota-bar, quota-bar { display:block; width:fit-content; min-width:240px; }\n.rp-quota-head { display:flex; justify-content:space-between; font-size:12px; color:#374151; margin-bottom:5px; }\n.rp-quota-num.danger { color:var(--rp-danger); font-weight:700; }\n.rp-quota-track { display:block; height:8px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-quota-fill { display:block; height:100%; background:var(--rp-primary); }\n.rp-quota-fill.danger { background:var(--rp-danger); }\napi-key, api-key { display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#f9fafb; }\n.rp-apikey-val { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#374151; }\n.rp-apikey-copy { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; color:#6b7280; }\naudit-row, audit-row { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--rp-border); width:fit-content; min-width:320px; font-size:13px; }\n.rp-audit-actor { font-weight:650; color:#111827; }\n.rp-audit-action { flex:1; color:#6b7280; }\n.rp-audit-time { color:#9ca3af; font-size:12px; }\nworkflow-node, workflow-node { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--rp-border); border-radius:8px; background:#fff; font-size:13px; }\n.rp-wf-icon.done { color:var(--rp-success); }\n.rp-wf-icon.active { color:var(--rp-primary); }\n.rp-wf-icon.error { color:var(--rp-danger); }\n.rp-wf-icon.default { color:#9ca3af; }\n\n/* --- navigation & layout additions --- */\nsegmented-el, segmented-el { display:inline-flex; padding:2px; border-radius:8px; background:#f3f4f6; gap:2px; }\n.rp-seg-item { padding:5px 14px; border-radius:6px; font-size:13px; color:#6b7280; }\n.rp-seg-item.active { background:#fff; color:#111827; font-weight:650; }\ncommand-palette, command-palette { display:block; width:520px; border:1px solid var(--rp-border); border-radius:12px; background:#fff; overflow:hidden; }\n.rp-cmdk-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--rp-border); }\n.rp-cmdk-list { padding:6px; }\n.rp-cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#374151; }\n.rp-cmdk-item.active { background:#eff6ff; color:#1d4ed8; }\ncontext-menu, context-menu, menu-el, menu-el { display:inline-flex; flex-direction:column; min-width:180px; padding:5px; border:1px solid var(--rp-border); border-radius:10px; background:#fff; }\n.menu-item, menu-item, menu-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:#374151; }\n.menu-item.danger, menu-item.danger, menu-item.danger { color:var(--rp-danger); }\n.menu-item.disabled, menu-item.disabled, menu-item.disabled { opacity:.45; }\n.menu-el-label { flex:1; }\n.menu-el-shortcut { color:#9ca3af; font-size:12px; }\ntoc-el, toc-el { display:flex; flex-direction:column; gap:2px; width:fit-content; min-width:160px; border-left:2px solid var(--rp-border); }\n.toc-el-item { padding:4px 12px; font-size:13px; color:#6b7280; border-left:2px solid transparent; margin-left:-2px; }\n.toc-el-item.active { color:var(--rp-primary); border-left-color:var(--rp-primary); font-weight:650; }\nkbd-el, kbd-el { display:inline-flex; align-items:center; gap:3px; }\n.kbd-el-key { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border:1px solid var(--rp-border-strong); border-bottom-width:2px; border-radius:5px; background:#f9fafb; font-size:11px; font-family:var(--rp-font); color:#374151; }\n.kbd-el-plus { color:#9ca3af; font-size:11px; }\nsplit-pane, split-pane { display:grid; grid-template-columns:var(--snap-columns,1fr 1fr); width:fit-content; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; }\nsplit-pane > *, split-pane > * { padding:14px; }\nsplit-pane > *:not(:last-child), split-pane > *:not(:last-child) { border-right:1px solid var(--rp-border); }\ndivider-el, divider-el { display:block; height:1px; background:var(--rp-border); margin:12px 0; }\ndivider-el.divider-el-v, divider-el.divider-el-v { display:inline-block; width:1px; height:auto; align-self:stretch; margin:0 12px; }\nspacer-el, spacer-el { display:block; height:var(--snap-size,16px); }\n\n/* --- iOS --- */\nios-navbar, ios-navbar { display:block; background:rgba(249,249,249,.94); border-bottom:1px solid #d8d8dc; padding:6px 12px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }\n.ios-navbar-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:36px; }\n.rp-ios-nav-leading { display:flex; align-items:center; gap:2px; color:#007aff; font-size:15px; }\n.rp-ios-nav-title { text-align:center; font-weight:600; font-size:16px; color:#000; }\n.rp-ios-nav-trailing { text-align:right; color:#007aff; font-size:15px; }\n.rp-ios-nav-large { font-size:30px; font-weight:700; color:#000; padding:2px 2px 6px; }\nios-tabbar, ios-tabbar { display:flex; background:rgba(249,249,249,.94); border-top:1px solid #d8d8dc; padding:6px 0 4px; }\n.rp-ios-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; color:#8e8e93; font-size:10px; }\n.rp-ios-tab.active { color:#007aff; }\n.rp-ios-tab-label { font-size:10px; }\nios-list, ios-list { display:block; border-radius:10px; background:#fff; overflow:hidden; width:fit-content; min-width:300px; border:1px solid #e5e5ea; font-family:-apple-system,sans-serif; }\n.ios-list-header { padding:6px 16px; font-size:13px; color:#6d6d72; background:#f2f2f7; text-transform:none; }\nios-list-item, ios-list-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid #e5e5ea; font-size:15px; color:#000; }\nios-list-item:last-child, ios-list-item:last-child { border-bottom:0; }\n.rp-ios-li-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#007aff; color:#fff; }\n.rp-ios-li-label { flex:1; }\n.rp-ios-li-detail { color:#8e8e93; }\n.rp-ios-li-chevron { color:#c7c7cc; }\nios-action-sheet, ios-action-sheet { display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:320px; padding:8px; font-family:-apple-system,sans-serif; }\n.rp-ios-as-group { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }\n.rp-ios-as-title { padding:14px; text-align:center; font-size:13px; color:#8e8e93; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action { padding:16px; text-align:center; font-size:18px; color:#007aff; border-bottom:1px solid #d1d1d6; }\n.rp-ios-as-action:last-child { border-bottom:0; }\n.rp-ios-as-action.destructive { color:#ff3b30; }\n.rp-ios-as-action.cancel { font-weight:600; }\nios-alert, ios-alert { display:block; width:270px; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); font-family:-apple-system,sans-serif; }\n.ios-alert-body { padding:18px 16px 14px; text-align:center; }\n.ios-alert-title { font-size:17px; font-weight:600; color:#000; }\n.ios-alert-msg { margin-top:3px; font-size:13px; color:#000; }\n.ios-alert-actions { display:flex; border-top:1px solid #d1d1d6; }\n.ios-alert-btn { flex:1; padding:11px; text-align:center; font-size:17px; color:#007aff; }\n.ios-alert-btn.primary { font-weight:600; }\n.ios-alert-btn:not(:last-child) { border-right:1px solid #d1d1d6; }\nios-switch, ios-switch { display:inline-flex; align-items:center; gap:8px; font-family:-apple-system,sans-serif; font-size:15px; }\n.ios-switch-track { width:51px; height:31px; border-radius:999px; background:#34c759; padding:2px; }\n.ios-switch-dot { display:block; width:27px; height:27px; border-radius:50%; background:#fff; margin-left:20px; }\nios-segmented, ios-segmented { display:inline-flex; padding:2px; border-radius:9px; background:#767680; background:rgba(118,118,128,.12); gap:2px; font-family:-apple-system,sans-serif; }\n.rp-ios-seg-item { padding:6px 16px; border-radius:7px; font-size:13px; color:#000; }\n.rp-ios-seg-item.active { background:#fff; font-weight:600; }\nios-button, ios-button { display:inline-grid; place-items:center; min-height:34px; padding:0 16px; border-radius:8px; background:#007aff; color:#fff; font-size:15px; font-weight:600; font-family:-apple-system,sans-serif; }\nios-button[variant=\"tinted\"], ios-button[variant=\"tinted\"] { background:rgba(0,122,255,.15); color:#007aff; }\nios-button[variant=\"plain\"], ios-button[variant=\"plain\"] { background:transparent; color:#007aff; }\nios-search, ios-search { display:inline-flex; align-items:center; gap:6px; width:280px; height:36px; padding:0 10px; border-radius:10px; background:rgba(118,118,128,.12); color:#8e8e93; font-size:15px; font-family:-apple-system,sans-serif; }\nios-stepper, ios-stepper { display:inline-flex; align-items:center; border-radius:8px; background:rgba(118,118,128,.12); }\n.rp-ios-step { display:grid; place-items:center; width:46px; height:32px; color:#000; }\n.rp-ios-step-div { width:1px; height:18px; background:rgba(0,0,0,.15); }\n\n/* --- macOS --- */\nmacos-window, macos-window { display:block; width:fit-content; min-width:480px; border-radius:10px; overflow:hidden; border:1px solid #d1d1d6; background:#fff; font-family:-apple-system,sans-serif; }\n.rp-mac-titlebar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:#ececec; border-bottom:1px solid #d1d1d6; }\n.rp-mac-lights { display:flex; gap:8px; }\n.rp-mac-light { width:12px; height:12px; border-radius:50%; }\n.rp-mac-light.close { background:#ff5f57; }\n.rp-mac-light.min { background:#febc2e; }\n.rp-mac-light.max { background:#28c840; }\n.rp-mac-title { flex:1; text-align:center; font-size:13px; font-weight:600; color:#3c3c43; }\n.rp-mac-window-body { padding:0; }\nmacos-toolbar, macos-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#f6f6f6; border-bottom:1px solid #d1d1d6; }\nmacos-menubar, macos-menubar { display:flex; align-items:center; gap:18px; height:26px; padding:0 14px; background:rgba(246,246,246,.9); border-bottom:1px solid #d1d1d6; font-size:13px; font-family:-apple-system,sans-serif; }\n.rp-mac-menubar-apple { color:#000; }\n.rp-mac-menu-title { color:#000; }\n.rp-mac-menu-title.active { background:#007aff; color:#fff; padding:1px 7px; border-radius:4px; }\nmacos-sidebar, macos-sidebar { display:flex; flex-direction:column; gap:1px; width:220px; padding:8px; background:rgba(246,246,246,.85); font-family:-apple-system,sans-serif; }\nmacos-source-item, macos-source-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; color:#3c3c43; }\nmacos-source-item.selected, macos-source-item.selected { background:#007aff; color:#fff; }\n.rp-mac-source-group { padding:8px 8px 3px; font-size:11px; font-weight:700; color:#8e8e93; text-transform:uppercase; }\nmacos-segmented, macos-segmented { display:inline-flex; border:1px solid #c4c4c7; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-seg-item { padding:4px 14px; font-size:13px; color:#000; background:#fff; border-right:1px solid #c4c4c7; }\n.rp-mac-seg-item:last-child { border-right:0; }\n.rp-mac-seg-item.active { background:#007aff; color:#fff; }\nmacos-popover, macos-popover { display:inline-block; position:relative; }\n.rp-mac-pop-arrow { display:block; width:16px; height:8px; margin:0 auto -1px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#fff; border:1px solid #d1d1d6; }\n.rp-mac-pop-body { min-width:220px; padding:12px; border-radius:10px; border:1px solid #d1d1d6; background:#fff; }\n.rp-mac-pop-title { font-weight:600; font-size:13px; margin-bottom:8px; }\nmacos-sheet, macos-sheet { display:block; width:fit-content; min-width:420px; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:18px; font-family:-apple-system,sans-serif; }\n.rp-mac-sheet-title { font-size:15px; font-weight:700; margin-bottom:12px; }\n.rp-mac-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }\nmacos-stepper, macos-stepper { display:inline-flex; flex-direction:column; border:1px solid #c4c4c7; border-radius:5px; overflow:hidden; }\n.rp-mac-step { display:grid; place-items:center; width:22px; height:13px; background:#fff; color:#3c3c43; }\n.rp-mac-step.up { border-bottom:1px solid #c4c4c7; }\nmacos-disclosure, macos-disclosure { display:block; font-family:-apple-system,sans-serif; }\n.rp-mac-disc-head { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#000; }\n.rp-mac-disc-tri { display:inline-flex; transition:none; }\n.rp-mac-disc-tri.open { transform:rotate(90deg); }\n.rp-mac-disc-body { padding:8px 0 0 18px; font-size:13px; color:#3c3c43; }\nmacos-table, macos-table { display:flex; flex-direction:column; width:fit-content; min-width:360px; border:1px solid #d1d1d6; border-radius:6px; overflow:hidden; font-family:-apple-system,sans-serif; }\n.rp-mac-tr { display:flex; }\n.rp-mac-tr.rp-mac-th { background:#f6f6f6; border-bottom:1px solid #d1d1d6; font-size:12px; font-weight:600; color:#3c3c43; }\n.rp-mac-tr.alt { background:#f5f8ff; }\n.rp-mac-td { flex:1; display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px; color:#3c3c43; }\n.rp-mac-cell-bar { height:8px; border-radius:3px; background:#e5e7eb; }\n\n/* --- agent / conversational UI (Codex-style: single column, de-bubbled) --- */\nchat-el, chat-el { display:flex; flex-direction:column; gap:24px; width:fit-content; min-width:520px; max-width:680px; }\nuser-message, user-message, assistant-message, assistant-message { display:block; }\n.rp-msg-role { font-size:12px; font-weight:700; color:#9ca3af; letter-spacing:.02em; margin:0 0 6px; }\n.rp-msg-content { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.7; color:#1f2937; }\nuser-message .rp-msg-content, user-message .rp-msg-content { color:#111827; }\nsystem-message, system-message { display:flex; justify-content:center; }\n.rp-sysmsg-line { padding:3px 12px; border-radius:999px; background:#f3f4f6; color:#6b7280; font-size:12px; }\ntool-call, tool-call { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-tool-head { display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; }\n.rp-tool-glyph { display:inline-flex; }\n.rp-tool-glyph.done { color:var(--rp-success); }\n.rp-tool-glyph.running { color:var(--rp-primary); }\n.rp-tool-glyph.error { color:var(--rp-danger); }\n.rp-tool-name { font-family:ui-monospace,Menlo,monospace; font-weight:650; color:#374151; }\n.rp-tool-args-inline { font-family:ui-monospace,Menlo,monospace; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.rp-tool-body { margin-top:8px; padding-left:21px; }\nagent-output, agent-output { display:block; width:fit-content; min-width:280px; max-width:600px; border:1px solid var(--rp-border); border-radius:8px; overflow:hidden; background:#f8fafc; }\n.rp-output-head { padding:6px 12px; font-size:12px; color:#6b7280; border-bottom:1px solid var(--rp-border); font-family:ui-monospace,Menlo,monospace; }\n.rp-output-body { padding:12px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.6; color:#334155; white-space:pre-wrap; }\nreasoning-el, reasoning-el { display:block; width:fit-content; min-width:280px; max-width:600px; }\n.rp-reason-head { display:flex; align-items:center; gap:6px; font-size:13px; color:#9ca3af; }\n.rp-reason-body { margin-top:8px; padding-left:19px; border-left:2px solid var(--rp-border); font-size:13px; line-height:1.7; color:#6b7280; }\nmessage-actions, message-actions { display:inline-flex; gap:2px; }\n.rp-msg-action { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:#9ca3af; cursor:pointer; }\n.rp-msg-action:hover { background:#f3f4f6; color:#374151; }\nsuggestions-el, suggestions-el { display:flex; flex-wrap:wrap; gap:8px; }\n.rp-suggestion { padding:7px 13px; border:1px solid var(--rp-border); border-radius:8px; font-size:13px; color:#374151; background:#fff; cursor:pointer; }\n.rp-suggestion:hover { border-color:var(--rp-border-strong); background:#f9fafb; }\ntyping-el, typing-el { display:flex; align-items:center; }\n.typing-el-dots { display:inline-flex; gap:4px; }\n.typing-el-dots > span { width:7px; height:7px; border-radius:50%; background:#c7c7cc; }\ncomposer-el, composer-el { display:flex; align-items:center; gap:10px; width:fit-content; min-width:520px; max-width:680px; padding:9px 9px 9px 14px; border:1px solid var(--rp-border-strong); border-radius:14px; background:#fff; }\n.composer-el-attach { display:inline-flex; color:#9ca3af; }\n.composer-el-input { flex:1; font-size:14px; }\n.composer-el-send { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:#fff; }\n.composer-el-send.streaming { background:var(--rp-danger); }\ncitation-el, citation-el { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:3px 9px 3px 3px; border:1px solid var(--rp-border); border-radius:6px; background:#f9fafb; font-size:12px; color:#374151; }\n.rp-cite-idx { display:grid; place-items:center; width:17px; height:17px; border-radius:4px; background:#e5e7eb; color:#374151; font-size:11px; font-weight:700; }\n.rp-cite-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\ntoken-usage, token-usage { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#9ca3af; }\n.rp-token-track { width:90px; height:5px; border-radius:999px; background:#e5e7eb; overflow:hidden; }\n.rp-token-fill { display:block; height:100%; background:#9ca3af; }\n";
3
3
  export declare function injectStyle(): void;
package/dist/gallery.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export interface RpmlDoc {
2
+ path: string;
3
+ source: string;
4
+ }
5
+ export declare function mountGallery(docs: RpmlDoc[], host?: HTMLElement): void;